feat(component): added a Toast component that reads the label, the po…

packages/daisy/src/components/toast/toast.tsx

@@ -0,0 +1,47 @@
+import { component$ } from '@builder.io/qwik';
+import { Toast as HeadlessToast } from '@qwik-ui/headless';
+
+interface ToastProps {
+  class?: string;
+  top?: boolean;
+  center?: boolean;
+  end?: boolean;
+  middle?: boolean;
+  bottom?: boolean;
+  start?: boolean;
+  label?: string;
+  alert?: string;
+}
+
+export const Toast = component$((props: ToastProps) => {
+  const { label, top, start, center, end, middle, bottom, alert, ...rest } =
+    props;
+
+  return (
+    <div class="form-control">
+      <label class="label cursor-pointer">
+        <div
+          style={{
+            position: 'relative',
+            border: 'solid',
+            width: '480px',
+            height: '240px',
+            borderRadius: '12px',
+            background: 'rgb(220,220,220)',
+          }}
+        >
+          <HeadlessToast
+            alert={alert}
+            label={label}
+            class={`toast ${start && 'toast-start'} ${top && 'toast-top'} ${
+              center && 'toast-center'
+            } ${end && 'toast-end'} ${middle && 'toast-middle'} ${
+              bottom && 'toast-bottom'
+            }`}
+            {...rest}
+          />
+        </div>
+      </label>
+    </div>
+  );
+});

packages/daisy/src/index.ts

@@ -6,5 +6,6 @@ export * from './components/drawer/drawer';
 export * from './components/popover/popover';
 export * from './components/rating/rating';
 export * from './components/tabs';
+export * from './components/toast/toast';
 export * from './components/toggle/toggle';
 export * from './components/tooltip/tooltip';

packages/headless/src/components/toast/toast.tsx

@@ -0,0 +1,32 @@
+import { component$ } from '@builder.io/qwik';
+interface ToastProps {
+  value?: string;
+  /**
+   * The controlled state of the toast.
+   */
+
+  label?: string;
+  alert?: string;
+  /**
+   * The state of the toast when initially rendered. Use `defaultPressed`
+   * if you do not need to control the state of the toast.
+   * @defaultValue false
+   */
+}
+
+export const Toast = component$((props: ToastProps) => {
+  const { alert = 'info', label, ...toastProps } = props;
+
+  return (
+    <div class="toast" style={{ position: 'absolute' }} {...toastProps}>
+      <div
+        class={`alert alert-${alert}`}
+        style={{ background: alert === 'error' ? 'red' : 'auto' }}
+      >
+        <div>
+          <span>{label}</span>
+        </div>
+      </div>
+    </div>
+  );
+});

packages/headless/src/index.ts

@@ -6,6 +6,7 @@ export * from './components/drawer';
 export * from './components/popover';
 export * from './components/rating/rating';
 export * from './components/tabs/tabs';
+export * from './components/toast/toast';
 export * from './components/toggle/toggle';
 export * from './components/tooltip/tooltip';
 export * as Select from './components/select/select';

packages/website/src/components/menu/menu.tsx

@@ -26,6 +26,7 @@ export const Menu = component$<Props>(({ onClose$ }) => {
     { label: 'Popover', path: `/docs/${appState.theme.toLowerCase()}/popover` },
     { label: 'Select', path: `/docs/${appState.theme.toLowerCase()}/select` },
     { label: 'Tabs', path: `/docs/${appState.theme.toLowerCase()}/tabs` },
+    { label: 'Toast', path: `/docs/${appState.theme.toLowerCase()}/toast` },
     { label: 'Toggle', path: `/docs/${appState.theme.toLowerCase()}/toggle` },
     { label: 'Tooltip', path: `/docs/${appState.theme.toLowerCase()}/tooltip` },
   ];

packages/website/src/routes/docs/daisy/toast/index.tsx

@@ -0,0 +1,25 @@
+import { component$ } from '@builder.io/qwik';
+import { Toast } from '@qwik-ui/theme-daisy';
+
+export default component$(() => {
+  return (
+    <>
+      <h2>This is the documentation for the Toast</h2>
+      <h1>toast with alert inside</h1>
+      <Toast label="New Message" alert="success" />
+      <h1>toast with top & start attributes</h1>
+      <Toast label="Errored" top start alert="error" />
+      <h1>toast with top & center attributes</h1>
+      <Toast label="Information" top center alert="info" />
+      <h1>toast with top & end attributes</h1>
+      <Toast
+        label="You should probably think twice about it"
+        top
+        end
+        alert="warning"
+      />
+      <h1>toast with middle & start attributes</h1>
+      <Toast label="New Message" start middle />
+    </>
+  );
+});

packages/website/src/routes/docs/headless/toast/index.tsx

@@ -0,0 +1,11 @@
+import { component$ } from '@builder.io/qwik';
+import { Toast } from '@qwik-ui/headless';
+
+export default component$(() => {
+  return (
+    <>
+      <h2>This is the documentation for the Toast</h2>
+      <Toast />
+    </>
+  );
+});