refactor(styled popover): to dot notation

Author: maiieul

apps/website/src/routes/docs/styled/popover/examples/hero.tsx

@@ -1,20 +1,13 @@
 import { component$ } from '@builder.io/qwik';
-import {
-  Input,
-  Label,
-  PopoverRoot,
-  PopoverTrigger,
-  PopoverPanel,
-  buttonVariants,
-} from '@qwik-ui/styled';
+import { Input, Label, Popover, buttonVariants } from '~/components/ui';
 
 export default component$(() => {
   return (
-    <PopoverRoot flip={false} gutter={8}>
-      <PopoverTrigger class={buttonVariants({ look: 'outline' })}>
-        Open popover
-      </PopoverTrigger>
-      <PopoverPanel>
+    <Popover.Root flip={false} gutter={8}>
+      <Popover.Trigger class={buttonVariants({ look: 'outline' })}>
+        Open popover.
+      </Popover.Trigger>
+      <Popover.Panel>
         <div class="grid gap-4">
           <div class="space-y-2">
             <h4 class="font-medium leading-none">Dimensions</h4>
@@ -47,7 +40,7 @@ export default component$(() => {
             </div>
           </div>
         </div>
-      </PopoverPanel>
-    </PopoverRoot>
+      </Popover.Panel>
+    </Popover.Root>
   );
 });

apps/website/src/routes/docs/styled/popover/index.mdx

@@ -22,58 +22,64 @@ qwik-ui add popover
 
 ```tsx
 import { PropsOf, Slot, component$, useStyles$ } from '@builder.io/qwik';
-import { Popover } from '@qwik-ui/headless';
+import { Popover as HeadlessPopover } from '@qwik-ui/headless';
 import { cn } from '@qwik-ui/utils';
 
-export const PopoverRoot = component$<PropsOf<typeof Popover.Root>>(({ ...props }) => {
+const Root = component$<PropsOf<typeof HeadlessPopover.Root>>(({ ...props }) => {
   return (
-    <Popover.Root {...props}>
+    <HeadlessPopover.Root {...props}>
       <Slot />
-    </Popover.Root>
+    </HeadlessPopover.Root>
   );
 });
 
-export const PopoverTrigger = Popover.Trigger;
+const Trigger = HeadlessPopover.Trigger;
 
-export const PopoverPanel = component$<PropsOf<typeof Popover.Panel>>(({ ...props }) => {
+const Panel = component$<PropsOf<typeof HeadlessPopover.Panel>>(({ ...props }) => {
   useStyles$(`
     .my-transition {
       transition: opacity 150ms, display 150ms, overlay 150ms;
       transition-behavior: allow-discrete;
     }
-
+  
     .popover-showing {
       opacity: 1;
     }
-
+  
     .popover-closing {
       opacity: 0;
     }
     `);
 
   return (
-    <Popover.Panel
+    <HeadlessPopover.Panel
       {...props}
       class={cn(
         'my-transition w-72 rounded-md border bg-popover p-4 text-popover-foreground opacity-0 shadow-md outline-none',
         props.class,
       )}
     >
       <Slot />
-    </Popover.Panel>
+    </HeadlessPopover.Panel>
   );
 });
+
+export const Popover = {
+  Root,
+  Trigger,
+  Panel,
+};
 ```
 
 ## Usage
 
 ```tsx
-import { PopoverRoot, PopoverPanel, PopoverTrigger } from '~/components/ui';
+import { Popover } from '~/components/ui';
 ```
 
 ```tsx
-<PopoverRoot>
-  <PopoverTrigger>Open Trigger</PopoverTrigger>
-  <PopoverPanel>Place your content here.</PopoverPanel>
-</PopoverRoot>
+<Popover.Root>
+  <Popover.Trigger>Open Trigger</Popover.Trigger>
+  <Popover.Panel>Place your content here.</Popover.Panel>
+</Popover.Root>
 ```

packages/kit-styled/src/components/popover/popover.tsx

@@ -1,18 +1,18 @@
 import { PropsOf, Slot, component$, useStyles$ } from '@builder.io/qwik';
-import { Popover } from '@qwik-ui/headless';
+import { Popover as HeadlessPopover } from '@qwik-ui/headless';
 import { cn } from '@qwik-ui/utils';
 
-export const PopoverRoot = component$<PropsOf<typeof Popover.Root>>(({ ...props }) => {
+const Root = component$<PropsOf<typeof HeadlessPopover.Root>>(({ ...props }) => {
   return (
-    <Popover.Root {...props}>
+    <HeadlessPopover.Root {...props}>
       <Slot />
-    </Popover.Root>
+    </HeadlessPopover.Root>
   );
 });
 
-export const PopoverTrigger = Popover.Trigger;
+const Trigger = HeadlessPopover.Trigger;
 
-export const PopoverPanel = component$<PropsOf<typeof Popover.Panel>>(({ ...props }) => {
+const Panel = component$<PropsOf<typeof HeadlessPopover.Panel>>(({ ...props }) => {
   useStyles$(`
     .my-transition {
       transition: opacity 150ms, display 150ms, overlay 150ms;
@@ -29,14 +29,20 @@ export const PopoverPanel = component$<PropsOf<typeof Popover.Panel>>(({ ...prop
     `);
 
   return (
-    <Popover.Panel
+    <HeadlessPopover.Panel
       {...props}
       class={cn(
         'my-transition w-72 rounded-md border bg-popover p-4 text-popover-foreground opacity-0 shadow-md outline-none',
         props.class,
       )}
     >
       <Slot />
-    </Popover.Panel>
+    </HeadlessPopover.Panel>
   );
 });
+
+export const Popover = {
+  Root,
+  Trigger,
+  Panel,
+};