chore(dialog.daisy): draft daisy dialog (broken)

Author: GregOnNet

apps/website/src/routes/docs/daisy/dialog/index.tsx

@@ -1,6 +1,5 @@
 import { component$ } from '@builder.io/qwik';
-import { Dialog } from '@qwik-ui/headless';
-import { Button } from '@qwik-ui/theme-daisy';
+import { Button, Dialog } from '@qwik-ui/theme-daisy';
 
 export default component$(() => {
   return (
@@ -12,13 +11,15 @@ export default component$(() => {
       <h2>Basic Example</h2>
 
       <Dialog.Root>
-        <Dialog.Trigger>
-          <Button variant="primary">Open Dialog</Button>
-        </Dialog.Trigger>
         <Dialog.Portal>
-          <Dialog.Close />
-          <Dialog.Title text="Hello there!" />
-          <Dialog.Content>I have the high ground</Dialog.Content>
+          <div q:slot="trigger">
+            <Button variant="primary">Open Dialog</Button>
+          </div>
+          <div q:slot="portal">
+            <Dialog.Close />
+            <Dialog.Title text="Hello there!" />
+            <Dialog.Content>I have the high ground</Dialog.Content>
+          </div>
         </Dialog.Portal>
       </Dialog.Root>
     </>

packages/daisy/src/components/dialog/dialog.tsx

@@ -0,0 +1,51 @@
+import { Slot, component$, useId } from '@builder.io/qwik';
+import { Dialog as DialogHeadless } from '@qwik-ui/headless';
+
+const Root = component$(() => {
+  return (
+    <DialogHeadless.Root>
+      <Slot />
+    </DialogHeadless.Root>
+  );
+});
+
+const Trigger = component$(() => {
+  return (
+    <>
+      <label for="my-modal-5">
+        <DialogHeadless.Trigger>
+          <Slot name="trigger" />
+        </DialogHeadless.Trigger>
+      </label>
+      <input id="my-modal-5" type="checkbox" class="modal-toggle" />
+    </>
+  );
+});
+
+const Portal = component$(() => {
+  const dialogId = `dialog-${useId()}`;
+
+  return (
+    <>
+      <label for={dialogId}>
+        <DialogHeadless.Trigger>
+          <Slot name="trigger" />
+        </DialogHeadless.Trigger>
+      </label>
+      <input id={dialogId} type="checkbox" class="modal-toggle" />
+      <DialogHeadless.Portal
+        classNames={{ container: 'modal', content: 'modal-box' }}
+      >
+        <Slot name="portal" />
+      </DialogHeadless.Portal>
+    </>
+  );
+});
+
+const Close = DialogHeadless.Close;
+
+const Title = DialogHeadless.Title;
+
+const Content = DialogHeadless.Content;
+
+export { Root, Trigger, Portal, Close, Title, Content };

packages/daisy/src/index.ts

@@ -1,22 +1,23 @@
 export * from './components/accordion/accordion';
 export * from './components/alert/alert';
 export * from './components/badge/badge';
-export * from './components/button/button';
-export * from './components/progress/progress';
+export * from './components/breadcrumb';
 export * from './components/button-group/button-group';
+export * from './components/button/button';
 export * from './components/card';
+export * from './components/checkbox/checkbox';
 export * from './components/collapse/collapse';
+export * as Dialog from './components/dialog/dialog';
 export * from './components/drawer/drawer';
-export * from './components/spinner/spinner';
+export * from './components/navigation-bar/navigation-bar';
+export * from './components/pagination/pagination';
 export * from './components/popover/popover';
+export * from './components/progress/progress';
 export * from './components/rating/rating';
+export * from './components/ratio/radio';
+export * from './components/slider/slider';
+export * from './components/spinner/spinner';
 export * from './components/tabs';
 export * from './components/toast/toast';
 export * from './components/toggle/toggle';
 export * from './components/tooltip/tooltip';
-export * from './components/checkbox/checkbox';
-export * from './components/pagination/pagination';
-export * from './components/ratio/radio';
-export * from './components/slider/slider';
-export * from './components/breadcrumb';
-export * from './components/navigation-bar/navigation-bar';