Merge branch 'preview' into fix-propel-package-type-fix

packages/propel/src/combobox/combobox.stories.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Check, ChevronsUpDown } from "lucide-react";
 import { useArgs } from "storybook/preview-api";
-import { Combobox } from "./combobox";
+import { Combobox, ComboboxButton, ComboboxOptions, ComboboxOption } from "./combobox";
 
 const frameworks = [
   { value: "react", label: "React" },
@@ -19,9 +19,9 @@ const meta = {
   title: "Components/Combobox",
   component: Combobox,
   subcomponents: {
-    ComboboxButton: Combobox.Button,
-    ComboboxOptions: Combobox.Options,
-    ComboboxOption: Combobox.Option,
+    ComboboxButton,
+    ComboboxOptions,
+    ComboboxOption,
   },
   parameters: {
     layout: "centered",
@@ -37,22 +37,22 @@ const meta = {
     const setValue = (newValue: string | string[]) => updateArgs({ value: newValue });
     return (
       <Combobox {...args} value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+        <ComboboxButton className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Combobox.Button>
-        <Combobox.Options showSearch searchPlaceholder="Search framework..." className="w-72">
+        </ComboboxButton>
+        <ComboboxOptions showSearch searchPlaceholder="Search framework..." className="w-72">
           {frameworks.map((framework) => (
-            <Combobox.Option
+            <ComboboxOption
               key={framework.value}
               value={framework.value}
               className="flex items-center gap-2 px-4 py-2"
             >
               {value === framework.value && <Check className="h-4 w-4" />}
               <span>{framework.label}</span>
-            </Combobox.Option>
+            </ComboboxOption>
           ))}
-        </Combobox.Options>
+        </ComboboxOptions>
       </Combobox>
     );
   },
@@ -68,22 +68,22 @@ export const WithoutSearch: Story = {
     const [value, setValue] = useState("");
     return (
       <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+        <ComboboxButton className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Combobox.Button>
-        <Combobox.Options className="w-72">
+        </ComboboxButton>
+        <ComboboxOptions className="w-72">
           {frameworks.map((framework) => (
-            <Combobox.Option
+            <ComboboxOption
               key={framework.value}
               value={framework.value}
               className="flex items-center gap-2 px-4 py-2"
             >
               {value === framework.value && <Check className="h-4 w-4" />}
               <span>{framework.label}</span>
-            </Combobox.Option>
+            </ComboboxOption>
           ))}
-        </Combobox.Options>
+        </ComboboxOptions>
       </Combobox>
     );
   },
@@ -95,22 +95,22 @@ export const MultiSelect: Story = {
 
     return (
       <Combobox multiSelect value={value} onValueChange={(v) => setValue(v as string[])}>
-        <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+        <ComboboxButton className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
           <span className="truncate">{value.length > 0 ? `${value.length} selected` : "Select frameworks..."}</span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Combobox.Button>
-        <Combobox.Options showSearch searchPlaceholder="Search framework..." className="w-72">
+        </ComboboxButton>
+        <ComboboxOptions showSearch searchPlaceholder="Search framework..." className="w-72">
           {frameworks.map((framework) => (
-            <Combobox.Option
+            <ComboboxOption
               key={framework.value}
               value={framework.value}
               className="flex items-center gap-2 px-4 py-2"
             >
               {value.includes(framework.value) && <Check className="h-4 w-4" />}
               <span>{framework.label}</span>
-            </Combobox.Option>
+            </ComboboxOption>
           ))}
-        </Combobox.Options>
+        </ComboboxOptions>
       </Combobox>
     );
   },
@@ -123,24 +123,24 @@ export const MultiSelectWithLimit: Story = {
     return (
       <div className="space-y-2">
         <Combobox multiSelect maxSelections={3} value={value} onValueChange={(v) => setValue(v as string[])}>
-          <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+          <ComboboxButton className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
             <span className="truncate">
               {value.length > 0 ? `${value.length}/3 selected` : "Select up to 3 frameworks..."}
             </span>
             <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-          </Combobox.Button>
-          <Combobox.Options showSearch searchPlaceholder="Search framework..." className="w-72">
+          </ComboboxButton>
+          <ComboboxOptions showSearch searchPlaceholder="Search framework..." className="w-72">
             {frameworks.map((framework) => (
-              <Combobox.Option
+              <ComboboxOption
                 key={framework.value}
                 value={framework.value}
                 className="flex items-center gap-2 px-4 py-2"
               >
                 {value.includes(framework.value) && <Check className="h-4 w-4" />}
                 <span>{framework.label}</span>
-              </Combobox.Option>
+              </ComboboxOption>
             ))}
-          </Combobox.Options>
+          </ComboboxOptions>
         </Combobox>
         <p className="text-xs text-gray-500">Maximum 3 selections allowed</p>
       </div>
@@ -154,22 +154,22 @@ export const Disabled: Story = {
     const [value, setValue] = useState("");
     return (
       <Combobox disabled value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-gray-100 px-4 py-2 opacity-50">
+        <ComboboxButton className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-gray-100 px-4 py-2 opacity-50">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Combobox.Button>
-        <Combobox.Options showSearch searchPlaceholder="Search framework..." className="w-72">
+        </ComboboxButton>
+        <ComboboxOptions showSearch searchPlaceholder="Search framework..." className="w-72">
           {frameworks.map((framework) => (
-            <Combobox.Option
+            <ComboboxOption
               key={framework.value}
               value={framework.value}
               className="flex items-center gap-2 px-4 py-2"
             >
               {value === framework.value && <Check className="h-4 w-4" />}
               <span>{framework.label}</span>
-            </Combobox.Option>
+            </ComboboxOption>
           ))}
-        </Combobox.Options>
+        </ComboboxOptions>
       </Combobox>
     );
   },
@@ -180,13 +180,13 @@ export const DisabledOptions: Story = {
     const [value, setValue] = useState("");
     return (
       <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+        <ComboboxButton className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Combobox.Button>
-        <Combobox.Options showSearch searchPlaceholder="Search framework..." className="w-72">
+        </ComboboxButton>
+        <ComboboxOptions showSearch searchPlaceholder="Search framework..." className="w-72">
           {frameworks.map((framework) => (
-            <Combobox.Option
+            <ComboboxOption
               key={framework.value}
               value={framework.value}
               disabled={framework.value === "angular" || framework.value === "svelte"}
@@ -194,9 +194,9 @@ export const DisabledOptions: Story = {
             >
               {value === framework.value && <Check className="h-4 w-4" />}
               <span>{framework.label}</span>
-            </Combobox.Option>
+            </ComboboxOption>
           ))}
-        </Combobox.Options>
+        </ComboboxOptions>
       </Combobox>
     );
   },
@@ -207,22 +207,22 @@ export const CustomMaxHeight: Story = {
     const [value, setValue] = useState("");
     return (
       <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+        <ComboboxButton className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Combobox.Button>
-        <Combobox.Options showSearch searchPlaceholder="Search framework..." maxHeight="sm" className="w-72">
+        </ComboboxButton>
+        <ComboboxOptions showSearch searchPlaceholder="Search framework..." maxHeight="sm" className="w-72">
           {frameworks.map((framework) => (
-            <Combobox.Option
+            <ComboboxOption
               key={framework.value}
               value={framework.value}
               className="flex items-center gap-2 px-4 py-2"
             >
               {value === framework.value && <Check className="h-4 w-4" />}
               <span>{framework.label}</span>
-            </Combobox.Option>
+            </ComboboxOption>
           ))}
-        </Combobox.Options>
+        </ComboboxOptions>
       </Combobox>
     );
   },
@@ -233,27 +233,27 @@ export const CustomEmptyMessage: Story = {
     const [value, setValue] = useState("");
     return (
       <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
-        <Combobox.Button className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+        <ComboboxButton className="flex w-72 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Combobox.Button>
-        <Combobox.Options
+        </ComboboxButton>
+        <ComboboxOptions
           showSearch
           searchPlaceholder="Search framework..."
           emptyMessage="No frameworks found. Try a different search."
           className="w-72"
         >
           {frameworks.map((framework) => (
-            <Combobox.Option
+            <ComboboxOption
               key={framework.value}
               value={framework.value}
               className="flex items-center gap-2 px-4 py-2"
             >
               {value === framework.value && <Check className="h-4 w-4" />}
               <span>{framework.label}</span>
-            </Combobox.Option>
+            </ComboboxOption>
           ))}
-        </Combobox.Options>
+        </ComboboxOptions>
       </Combobox>
     );
   },

packages/propel/src/combobox/combobox.tsx

@@ -220,11 +220,10 @@ function ComboboxOption({ value, children, disabled, className }: ComboboxOption
   );
 }
 
-// Compound component export
-const Combobox = Object.assign(ComboboxRoot, {
-  Button: ComboboxButton,
-  Options: ComboboxOptions,
-  Option: ComboboxOption,
-});
+ComboboxRoot.displayName = "Combobox";
+ComboboxButton.displayName = "ComboboxButton";
+ComboboxOptions.displayName = "ComboboxOptions";
+ComboboxOption.displayName = "ComboboxOption";
 
-export { Combobox };
+
+export { ComboboxRoot as Combobox, ComboboxButton, ComboboxOptions, ComboboxOption };

packages/propel/src/command/command.stories.tsx

@@ -1,15 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { File, Folder, Settings, User } from "lucide-react";
-import { Command } from "./command";
+import { Command, CommandInput, CommandList, CommandItem, CommandEmpty } from "./command";
 
 const meta = {
   title: "Components/Command",
   component: Command,
   subcomponents: {
-    CommandInput: Command.Input,
-    CommandList: Command.List,
-    CommandItem: Command.Item,
-    CommandEmpty: Command.Empty,
+    CommandInput,
+    CommandList,
+    CommandItem,
+    CommandEmpty,
   },
   parameters: {
     layout: "centered",
@@ -24,13 +24,13 @@ export const Default: Story = {
   render() {
     return (
       <Command className="w-96 rounded-lg border border-gray-200 p-2">
-        <Command.Input placeholder="Search..." className="h-9 w-full bg-transparent py-3 text-sm outline-none" />
-        <Command.List className="max-h-80 overflow-auto py-2">
-          <Command.Item className="cursor-pointer rounded px-3 py-2 hover:bg-gray-100">Item 1</Command.Item>
-          <Command.Item className="cursor-pointer rounded px-3 py-2 hover:bg-gray-100">Item 2</Command.Item>
-          <Command.Item className="cursor-pointer rounded px-3 py-2 hover:bg-gray-100">Item 3</Command.Item>
-        </Command.List>
-        <Command.Empty className="py-6 text-center text-sm text-gray-500">No results found.</Command.Empty>
+        <CommandInput placeholder="Search..." className="h-9 w-full bg-transparent py-3 text-sm outline-none" />
+        <CommandList className="max-h-80 overflow-auto py-2">
+          <CommandItem className="cursor-pointer rounded px-3 py-2 hover:bg-gray-100">Item 1</CommandItem>
+          <CommandItem className="cursor-pointer rounded px-3 py-2 hover:bg-gray-100">Item 2</CommandItem>
+          <CommandItem className="cursor-pointer rounded px-3 py-2 hover:bg-gray-100">Item 3</CommandItem>
+        </CommandList>
+        <CommandEmpty className="py-6 text-center text-sm text-gray-500">No results found.</CommandEmpty>
       </Command>
     );
   },
@@ -40,29 +40,29 @@ export const WithIcons: Story = {
   render() {
     return (
       <Command className="w-96 rounded-lg border border-gray-200 p-2">
-        <Command.Input
+        <CommandInput
           placeholder="Search files and folders..."
           className="h-9 w-full bg-transparent py-3 text-sm outline-none"
         />
-        <Command.List className="max-h-80 overflow-auto py-2">
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
+        <CommandList className="max-h-80 overflow-auto py-2">
+          <CommandItem className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
             <Folder className="h-4 w-4" />
             <span>Documents</span>
-          </Command.Item>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
+          </CommandItem>
+          <CommandItem className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
             <Folder className="h-4 w-4" />
             <span>Downloads</span>
-          </Command.Item>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
+          </CommandItem>
+          <CommandItem className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
             <File className="h-4 w-4" />
             <span>README.md</span>
-          </Command.Item>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
+          </CommandItem>
+          <CommandItem className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
             <File className="h-4 w-4" />
             <span>package.json</span>
-          </Command.Item>
-        </Command.List>
-        <Command.Empty className="py-6 text-center text-sm text-gray-500">No files or folders found.</Command.Empty>
+          </CommandItem>
+        </CommandList>
+        <CommandEmpty className="py-6 text-center text-sm text-gray-500">No files or folders found.</CommandEmpty>
       </Command>
     );
   },
@@ -72,32 +72,32 @@ export const WithCategories: Story = {
   render() {
     return (
       <Command className="w-96 rounded-lg border border-gray-200 p-2">
-        <Command.Input
+        <CommandInput
           placeholder="Search commands..."
           className="h-9 w-full bg-transparent py-3 text-sm outline-none"
         />
-        <Command.List className="max-h-80 overflow-auto py-2">
+        <CommandList className="max-h-80 overflow-auto py-2">
           <div className="px-2 py-1.5 text-xs font-semibold text-gray-500">User</div>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
+          <CommandItem className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
             <User className="h-4 w-4" />
             <span>Profile</span>
-          </Command.Item>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
+          </CommandItem>
+          <CommandItem className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
             <Settings className="h-4 w-4" />
             <span>Settings</span>
-          </Command.Item>
+          </CommandItem>
 
           <div className="mt-2 px-2 py-1.5 text-xs font-semibold text-gray-500">Files</div>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
+          <CommandItem className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
             <Folder className="h-4 w-4" />
             <span>Open Folder</span>
-          </Command.Item>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
+          </CommandItem>
+          <CommandItem className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
             <File className="h-4 w-4" />
             <span>New File</span>
-          </Command.Item>
-        </Command.List>
-        <Command.Empty className="py-6 text-center text-sm text-gray-500">No commands found.</Command.Empty>
+          </CommandItem>
+        </CommandList>
+        <CommandEmpty className="py-6 text-center text-sm text-gray-500">No commands found.</CommandEmpty>
       </Command>
     );
   },
@@ -107,12 +107,12 @@ export const EmptyState: Story = {
   render() {
     return (
       <Command className="w-96 rounded-lg border border-gray-200 p-2">
-        <Command.Input placeholder="Search..." className="h-9 w-full bg-transparent py-3 text-sm outline-none" />
-        <Command.List className="max-h-80 overflow-auto py-2">{/* No items - will show empty state */}</Command.List>
-        <Command.Empty className="py-6 text-center text-sm text-gray-500">
+        <CommandInput placeholder="Search..." className="h-9 w-full bg-transparent py-3 text-sm outline-none" />
+        <CommandList className="max-h-80 overflow-auto py-2">{/* No items - will show empty state */}</CommandList>
+        <CommandEmpty className="py-6 text-center text-sm text-gray-500">
           <p className="font-semibold">No results found</p>
           <p className="mt-1 text-xs">Try searching for something else</p>
-        </Command.Empty>
+        </CommandEmpty>
       </Command>
     );
   },
@@ -122,15 +122,15 @@ export const LongList: Story = {
   render() {
     return (
       <Command className="w-96 rounded-lg border border-gray-200 p-2">
-        <Command.Input placeholder="Search items..." className="h-9 w-full bg-transparent py-3 text-sm outline-none" />
-        <Command.List className="max-h-60 overflow-auto py-2">
+        <CommandInput placeholder="Search items..." className="h-9 w-full bg-transparent py-3 text-sm outline-none" />
+        <CommandList className="max-h-60 overflow-auto py-2">
           {Array.from({ length: 20 }, (_, i) => (
-            <Command.Item key={i} className="cursor-pointer rounded px-3 py-2 hover:bg-gray-100">
+            <CommandItem key={i} className="cursor-pointer rounded px-3 py-2 hover:bg-gray-100">
               Item {i + 1}
-            </Command.Item>
+            </CommandItem>
           ))}
-        </Command.List>
-        <Command.Empty className="py-6 text-center text-sm text-gray-500">No results found.</Command.Empty>
+        </CommandList>
+        <CommandEmpty className="py-6 text-center text-sm text-gray-500">No results found.</CommandEmpty>
       </Command>
     );
   },
@@ -140,20 +140,20 @@ export const WithoutSearch: Story = {
   render() {
     return (
       <Command className="w-96 rounded-lg border border-gray-200 p-2">
-        <Command.List className="max-h-80 overflow-auto py-2">
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
+        <CommandList className="max-h-80 overflow-auto py-2">
+          <CommandItem className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
             <User className="h-4 w-4" />
             <span>Profile</span>
-          </Command.Item>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
+          </CommandItem>
+          <CommandItem className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
             <Settings className="h-4 w-4" />
             <span>Settings</span>
-          </Command.Item>
-          <Command.Item className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
+          </CommandItem>
+          <CommandItem className="flex cursor-pointer items-center gap-2 rounded px-3 py-2 hover:bg-gray-100">
             <Folder className="h-4 w-4" />
             <span>Files</span>
-          </Command.Item>
-        </Command.List>
+          </CommandItem>
+        </CommandList>
       </Command>
     );
   },
@@ -163,22 +163,22 @@ export const CustomStyling: Story = {
   render() {
     return (
       <Command className="w-96 rounded-lg border-2 border-blue-300 bg-blue-50 p-2 shadow-lg">
-        <Command.Input
+        <CommandInput
           placeholder="Search with custom styling..."
           className="h-9 w-full bg-transparent py-3 text-sm text-blue-900 outline-none placeholder:text-blue-400"
         />
-        <Command.List className="max-h-80 overflow-auto py-2">
-          <Command.Item className="cursor-pointer rounded px-3 py-2 text-blue-900 hover:bg-blue-200">
+        <CommandList className="max-h-80 overflow-auto py-2">
+          <CommandItem className="cursor-pointer rounded px-3 py-2 text-blue-900 hover:bg-blue-200">
             Custom Item 1
-          </Command.Item>
-          <Command.Item className="cursor-pointer rounded px-3 py-2 text-blue-900 hover:bg-blue-200">
+          </CommandItem>
+          <CommandItem className="cursor-pointer rounded px-3 py-2 text-blue-900 hover:bg-blue-200">
             Custom Item 2
-          </Command.Item>
-          <Command.Item className="cursor-pointer rounded px-3 py-2 text-blue-900 hover:bg-blue-200">
+          </CommandItem>
+          <CommandItem className="cursor-pointer rounded px-3 py-2 text-blue-900 hover:bg-blue-200">
             Custom Item 3
-          </Command.Item>
-        </Command.List>
-        <Command.Empty className="py-6 text-center text-sm text-blue-500">No matching items found.</Command.Empty>
+          </CommandItem>
+        </CommandList>
+        <CommandEmpty className="py-6 text-center text-sm text-blue-500">No matching items found.</CommandEmpty>
       </Command>
     );
   },
@@ -188,15 +188,15 @@ export const DisabledItems: Story = {
   render() {
     return (
       <Command className="w-96 rounded-lg border border-gray-200 p-2">
-        <Command.Input placeholder="Search..." className="h-9 w-full bg-transparent py-3 text-sm outline-none" />
-        <Command.List className="max-h-80 overflow-auto py-2">
-          <Command.Item className="cursor-pointer rounded px-3 py-2 hover:bg-gray-100">Active Item 1</Command.Item>
-          <Command.Item disabled className="cursor-not-allowed rounded px-3 py-2 opacity-50">
+        <CommandInput placeholder="Search..." className="h-9 w-full bg-transparent py-3 text-sm outline-none" />
+        <CommandList className="max-h-80 overflow-auto py-2">
+          <CommandItem className="cursor-pointer rounded px-3 py-2 hover:bg-gray-100">Active Item 1</CommandItem>
+          <CommandItem disabled className="cursor-not-allowed rounded px-3 py-2 opacity-50">
             Disabled Item
-          </Command.Item>
-          <Command.Item className="cursor-pointer rounded px-3 py-2 hover:bg-gray-100">Active Item 2</Command.Item>
-        </Command.List>
-        <Command.Empty className="py-6 text-center text-sm text-gray-500">No results found.</Command.Empty>
+          </CommandItem>
+          <CommandItem className="cursor-pointer rounded px-3 py-2 hover:bg-gray-100">Active Item 2</CommandItem>
+        </CommandList>
+        <CommandEmpty className="py-6 text-center text-sm text-gray-500">No results found.</CommandEmpty>
       </Command>
     );
   },

packages/propel/src/command/command.tsx

@@ -31,11 +31,11 @@ function CommandItem({ ...props }: React.ComponentProps<typeof CommandPrimitive.
   return <CommandPrimitive.Item data-slot="command-item" {...props} />;
 }
 
-const Command = Object.assign(CommandComponent, {
-  Input: CommandInput,
-  List: CommandList,
-  Empty: CommandEmpty,
-  Item: CommandItem,
-});
+// Display names for debugging
+CommandComponent.displayName = "Command";
+CommandInput.displayName = "CommandInput";
+CommandList.displayName = "CommandList";
+CommandEmpty.displayName = "CommandEmpty";
+CommandItem.displayName = "CommandItem";
 
-export { Command };
+export { CommandComponent as Command, CommandInput, CommandList, CommandEmpty, CommandItem };

packages/propel/src/context-menu/context-menu.stories.tsx

@@ -1,20 +1,20 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Copy, Download, Edit, Share, Trash, Star, Archive } from "lucide-react";
 import { ChevronRightIcon } from "../icons/arrows/chevron-right";
-import { ContextMenu } from "./context-menu";
+import { ContextMenu, ContextMenuTrigger, ContextMenuPortal, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuSubmenu, ContextMenuSubmenuTrigger } from "./context-menu";
 
 // cannot use satisfies here because base-ui does not have portable types.
 const meta: Meta<typeof ContextMenu> = {
   title: "Components/ContextMenu",
   component: ContextMenu,
   subcomponents: {
-    ContextMenuTrigger: ContextMenu.Trigger,
-    ContextMenuPortal: ContextMenu.Portal,
-    ContextMenuContent: ContextMenu.Content,
-    ContextMenuItem: ContextMenu.Item,
-    ContextMenuSeparator: ContextMenu.Separator,
-    ContextMenuSubmenu: ContextMenu.Submenu,
-    ContextMenuSubmenuTrigger: ContextMenu.SubmenuTrigger,
+    ContextMenuTrigger,
+    ContextMenuPortal,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuSeparator,
+    ContextMenuSubmenu,
+    ContextMenuSubmenuTrigger,
   },
   args: {
     children: null,
@@ -32,20 +32,20 @@ export const Default: Story = {
   render() {
     return (
       <ContextMenu>
-        <ContextMenu.Trigger>
+        <ContextMenuTrigger>
           <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-custom-border-300 text-sm">
             Right click here
           </div>
-        </ContextMenu.Trigger>
-        <ContextMenu.Portal>
-          <ContextMenu.Content>
-            <ContextMenu.Item>Back</ContextMenu.Item>
-            <ContextMenu.Item>Forward</ContextMenu.Item>
-            <ContextMenu.Item>Reload</ContextMenu.Item>
-            <ContextMenu.Separator />
-            <ContextMenu.Item>More Tools</ContextMenu.Item>
-          </ContextMenu.Content>
-        </ContextMenu.Portal>
+        </ContextMenuTrigger>
+        <ContextMenuPortal>
+          <ContextMenuContent>
+            <ContextMenuItem>Back</ContextMenuItem>
+            <ContextMenuItem>Forward</ContextMenuItem>
+            <ContextMenuItem>Reload</ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem>More Tools</ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenuPortal>
       </ContextMenu>
     );
   },
@@ -55,36 +55,36 @@ export const WithIcons: Story = {
   render() {
     return (
       <ContextMenu>
-        <ContextMenu.Trigger>
+        <ContextMenuTrigger>
           <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-custom-border-300 text-sm">
             Right click here
           </div>
-        </ContextMenu.Trigger>
-        <ContextMenu.Portal>
-          <ContextMenu.Content>
-            <ContextMenu.Item>
+        </ContextMenuTrigger>
+        <ContextMenuPortal>
+          <ContextMenuContent>
+            <ContextMenuItem>
               <Copy className="mr-2 h-4 w-4" />
               Copy
-            </ContextMenu.Item>
-            <ContextMenu.Item>
+            </ContextMenuItem>
+            <ContextMenuItem>
               <Edit className="mr-2 h-4 w-4" />
               Edit
-            </ContextMenu.Item>
-            <ContextMenu.Item>
+            </ContextMenuItem>
+            <ContextMenuItem>
               <Download className="mr-2 h-4 w-4" />
               Download
-            </ContextMenu.Item>
-            <ContextMenu.Separator />
-            <ContextMenu.Item>
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem>
               <Share className="mr-2 h-4 w-4" />
               Share
-            </ContextMenu.Item>
-            <ContextMenu.Item>
+            </ContextMenuItem>
+            <ContextMenuItem>
               <Trash className="mr-2 h-4 w-4 text-red-500" />
               <span className="text-red-500">Delete</span>
-            </ContextMenu.Item>
-          </ContextMenu.Content>
-        </ContextMenu.Portal>
+            </ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenuPortal>
       </ContextMenu>
     );
   },
@@ -94,43 +94,43 @@ export const WithSubmenus: Story = {
   render() {
     return (
       <ContextMenu>
-        <ContextMenu.Trigger>
+        <ContextMenuTrigger>
           <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-custom-border-300 text-sm">
             Right click here
           </div>
-        </ContextMenu.Trigger>
-        <ContextMenu.Portal>
-          <ContextMenu.Content>
-            <ContextMenu.Item>
+        </ContextMenuTrigger>
+        <ContextMenuPortal>
+          <ContextMenuContent>
+            <ContextMenuItem>
               <Copy className="mr-2 h-4 w-4" />
               Copy
-            </ContextMenu.Item>
-            <ContextMenu.Item>
+            </ContextMenuItem>
+            <ContextMenuItem>
               <Edit className="mr-2 h-4 w-4" />
               Edit
-            </ContextMenu.Item>
-            <ContextMenu.Separator />
-            <ContextMenu.Submenu>
-              <ContextMenu.SubmenuTrigger>
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuSubmenu>
+              <ContextMenuSubmenuTrigger>
                 <Share className="mr-2 h-4 w-4" />
                 Share
                 <ChevronRightIcon className="ml-auto h-4 w-4" />
-              </ContextMenu.SubmenuTrigger>
-              <ContextMenu.Portal>
-                <ContextMenu.Content>
-                  <ContextMenu.Item>Email</ContextMenu.Item>
-                  <ContextMenu.Item>Message</ContextMenu.Item>
-                  <ContextMenu.Item>Copy Link</ContextMenu.Item>
-                </ContextMenu.Content>
-              </ContextMenu.Portal>
-            </ContextMenu.Submenu>
-            <ContextMenu.Separator />
-            <ContextMenu.Item>
+              </ContextMenuSubmenuTrigger>
+              <ContextMenuPortal>
+                <ContextMenuContent>
+                  <ContextMenuItem>Email</ContextMenuItem>
+                  <ContextMenuItem>Message</ContextMenuItem>
+                  <ContextMenuItem>Copy Link</ContextMenuItem>
+                </ContextMenuContent>
+              </ContextMenuPortal>
+            </ContextMenuSubmenu>
+            <ContextMenuSeparator />
+            <ContextMenuItem>
               <Trash className="mr-2 h-4 w-4 text-red-500" />
               <span className="text-red-500">Delete</span>
-            </ContextMenu.Item>
-          </ContextMenu.Content>
-        </ContextMenu.Portal>
+            </ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenuPortal>
       </ContextMenu>
     );
   },
@@ -140,36 +140,36 @@ export const DisabledItems: Story = {
   render() {
     return (
       <ContextMenu>
-        <ContextMenu.Trigger>
+        <ContextMenuTrigger>
           <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-custom-border-300 text-sm">
             Right click here
           </div>
-        </ContextMenu.Trigger>
-        <ContextMenu.Portal>
-          <ContextMenu.Content>
-            <ContextMenu.Item>
+        </ContextMenuTrigger>
+        <ContextMenuPortal>
+          <ContextMenuContent>
+            <ContextMenuItem>
               <Copy className="mr-2 h-4 w-4" />
               Copy
-            </ContextMenu.Item>
-            <ContextMenu.Item disabled>
+            </ContextMenuItem>
+            <ContextMenuItem disabled>
               <Edit className="mr-2 h-4 w-4" />
               Edit (Disabled)
-            </ContextMenu.Item>
-            <ContextMenu.Item>
+            </ContextMenuItem>
+            <ContextMenuItem>
               <Download className="mr-2 h-4 w-4" />
               Download
-            </ContextMenu.Item>
-            <ContextMenu.Separator />
-            <ContextMenu.Item disabled>
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem disabled>
               <Share className="mr-2 h-4 w-4" />
               Share (Disabled)
-            </ContextMenu.Item>
-            <ContextMenu.Item>
+            </ContextMenuItem>
+            <ContextMenuItem>
               <Trash className="mr-2 h-4 w-4 text-red-500" />
               <span className="text-red-500">Delete</span>
-            </ContextMenu.Item>
-          </ContextMenu.Content>
-        </ContextMenu.Portal>
+            </ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenuPortal>
       </ContextMenu>
     );
   },
@@ -179,7 +179,7 @@ export const OnFileCard: Story = {
   render() {
     return (
       <ContextMenu>
-        <ContextMenu.Trigger>
+        <ContextMenuTrigger>
           <div className="w-64 p-4 border border-custom-border-200 rounded-lg hover:bg-custom-background-80 cursor-pointer">
             <div className="flex items-center gap-3">
               <div className="w-12 h-12 bg-custom-primary-100 rounded flex items-center justify-center text-white text-lg">
@@ -191,32 +191,32 @@ export const OnFileCard: Story = {
               </div>
             </div>
           </div>
-        </ContextMenu.Trigger>
-        <ContextMenu.Portal>
-          <ContextMenu.Content>
-            <ContextMenu.Item>
+        </ContextMenuTrigger>
+        <ContextMenuPortal>
+          <ContextMenuContent>
+            <ContextMenuItem>
               <Download className="mr-2 h-4 w-4" />
               Download
-            </ContextMenu.Item>
-            <ContextMenu.Item>
+            </ContextMenuItem>
+            <ContextMenuItem>
               <Copy className="mr-2 h-4 w-4" />
               Copy Link
-            </ContextMenu.Item>
-            <ContextMenu.Item>
+            </ContextMenuItem>
+            <ContextMenuItem>
               <Star className="mr-2 h-4 w-4" />
               Add to Favorites
-            </ContextMenu.Item>
-            <ContextMenu.Separator />
-            <ContextMenu.Item>
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem>
               <Archive className="mr-2 h-4 w-4" />
               Archive
-            </ContextMenu.Item>
-            <ContextMenu.Item>
+            </ContextMenuItem>
+            <ContextMenuItem>
               <Trash className="mr-2 h-4 w-4 text-red-500" />
               <span className="text-red-500">Delete</span>
-            </ContextMenu.Item>
-          </ContextMenu.Content>
-        </ContextMenu.Portal>
+            </ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenuPortal>
       </ContextMenu>
     );
   },
@@ -226,31 +226,31 @@ export const OnImage: Story = {
   render() {
     return (
       <ContextMenu>
-        <ContextMenu.Trigger>
+        <ContextMenuTrigger>
           <div className="relative w-80 h-56 bg-custom-background-80 rounded-lg overflow-hidden cursor-pointer">
             <div className="absolute inset-0 flex items-center justify-center text-custom-text-400">
               Image Placeholder
             </div>
           </div>
-        </ContextMenu.Trigger>
-        <ContextMenu.Portal>
-          <ContextMenu.Content>
-            <ContextMenu.Item>
+        </ContextMenuTrigger>
+        <ContextMenuPortal>
+          <ContextMenuContent>
+            <ContextMenuItem>
               <Download className="mr-2 h-4 w-4" />
               Save Image
-            </ContextMenu.Item>
-            <ContextMenu.Item>
+            </ContextMenuItem>
+            <ContextMenuItem>
               <Copy className="mr-2 h-4 w-4" />
               Copy Image
-            </ContextMenu.Item>
-            <ContextMenu.Item>
+            </ContextMenuItem>
+            <ContextMenuItem>
               <Copy className="mr-2 h-4 w-4" />
               Copy Image URL
-            </ContextMenu.Item>
-            <ContextMenu.Separator />
-            <ContextMenu.Item>Open Image in New Tab</ContextMenu.Item>
-          </ContextMenu.Content>
-        </ContextMenu.Portal>
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem>Open Image in New Tab</ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenuPortal>
       </ContextMenu>
     );
   },
@@ -260,7 +260,7 @@ export const OnText: Story = {
   render() {
     return (
       <ContextMenu>
-        <ContextMenu.Trigger>
+        <ContextMenuTrigger>
           <div className="w-96 p-6 border border-custom-border-200 rounded-lg">
             <h3 className="text-lg font-semibold mb-2">Context Menu on Text</h3>
             <p className="text-custom-text-300">
@@ -268,21 +268,21 @@ export const OnText: Story = {
               applied to text content areas.
             </p>
           </div>
-        </ContextMenu.Trigger>
-        <ContextMenu.Portal>
-          <ContextMenu.Content>
-            <ContextMenu.Item>
+        </ContextMenuTrigger>
+        <ContextMenuPortal>
+          <ContextMenuContent>
+            <ContextMenuItem>
               <Copy className="mr-2 h-4 w-4" />
               Copy
-            </ContextMenu.Item>
-            <ContextMenu.Item>
+            </ContextMenuItem>
+            <ContextMenuItem>
               <Edit className="mr-2 h-4 w-4" />
               Edit
-            </ContextMenu.Item>
-            <ContextMenu.Separator />
-            <ContextMenu.Item>Select All</ContextMenu.Item>
-          </ContextMenu.Content>
-        </ContextMenu.Portal>
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem>Select All</ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenuPortal>
       </ContextMenu>
     );
   },
@@ -292,48 +292,48 @@ export const NestedSubmenus: Story = {
   render() {
     return (
       <ContextMenu>
-        <ContextMenu.Trigger>
+        <ContextMenuTrigger>
           <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-custom-border-300 text-sm">
             Right click here
           </div>
-        </ContextMenu.Trigger>
-        <ContextMenu.Portal>
-          <ContextMenu.Content>
-            <ContextMenu.Item>New File</ContextMenu.Item>
-            <ContextMenu.Item>New Folder</ContextMenu.Item>
-            <ContextMenu.Separator />
-            <ContextMenu.Submenu>
-              <ContextMenu.SubmenuTrigger>
+        </ContextMenuTrigger>
+        <ContextMenuPortal>
+          <ContextMenuContent>
+            <ContextMenuItem>New File</ContextMenuItem>
+            <ContextMenuItem>New Folder</ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuSubmenu>
+              <ContextMenuSubmenuTrigger>
                 Import
                 <ChevronRightIcon className="ml-auto h-4 w-4" />
-              </ContextMenu.SubmenuTrigger>
-              <ContextMenu.Portal>
-                <ContextMenu.Content>
-                  <ContextMenu.Item>From File</ContextMenu.Item>
-                  <ContextMenu.Item>From URL</ContextMenu.Item>
-                  <ContextMenu.Submenu>
-                    <ContextMenu.SubmenuTrigger>
+              </ContextMenuSubmenuTrigger>
+              <ContextMenuPortal>
+                <ContextMenuContent>
+                  <ContextMenuItem>From File</ContextMenuItem>
+                  <ContextMenuItem>From URL</ContextMenuItem>
+                  <ContextMenuSubmenu>
+                    <ContextMenuSubmenuTrigger>
                       From Cloud
                       <ChevronRightIcon className="ml-auto h-4 w-4" />
-                    </ContextMenu.SubmenuTrigger>
-                    <ContextMenu.Portal>
-                      <ContextMenu.Content>
-                        <ContextMenu.Item>Google Drive</ContextMenu.Item>
-                        <ContextMenu.Item>Dropbox</ContextMenu.Item>
-                        <ContextMenu.Item>OneDrive</ContextMenu.Item>
-                      </ContextMenu.Content>
-                    </ContextMenu.Portal>
-                  </ContextMenu.Submenu>
-                </ContextMenu.Content>
-              </ContextMenu.Portal>
-            </ContextMenu.Submenu>
-            <ContextMenu.Separator />
-            <ContextMenu.Item>
+                    </ContextMenuSubmenuTrigger>
+                    <ContextMenuPortal>
+                      <ContextMenuContent>
+                        <ContextMenuItem>Google Drive</ContextMenuItem>
+                        <ContextMenuItem>Dropbox</ContextMenuItem>
+                        <ContextMenuItem>OneDrive</ContextMenuItem>
+                      </ContextMenuContent>
+                    </ContextMenuPortal>
+                  </ContextMenuSubmenu>
+                </ContextMenuContent>
+              </ContextMenuPortal>
+            </ContextMenuSubmenu>
+            <ContextMenuSeparator />
+            <ContextMenuItem>
               <Trash className="mr-2 h-4 w-4 text-red-500" />
               <span className="text-red-500">Delete</span>
-            </ContextMenu.Item>
-          </ContextMenu.Content>
-        </ContextMenu.Portal>
+            </ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenuPortal>
       </ContextMenu>
     );
   },
@@ -343,36 +343,36 @@ export const WithKeyboardShortcuts: Story = {
   render() {
     return (
       <ContextMenu>
-        <ContextMenu.Trigger>
+        <ContextMenuTrigger>
           <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-custom-border-300 text-sm">
             Right click here
           </div>
-        </ContextMenu.Trigger>
-        <ContextMenu.Portal>
-          <ContextMenu.Content>
-            <ContextMenu.Item>
+        </ContextMenuTrigger>
+        <ContextMenuPortal>
+          <ContextMenuContent>
+            <ContextMenuItem>
               <Copy className="mr-2 h-4 w-4" />
               Copy
               <span className="ml-auto text-xs text-custom-text-400">⌘C</span>
-            </ContextMenu.Item>
-            <ContextMenu.Item>
+            </ContextMenuItem>
+            <ContextMenuItem>
               <Edit className="mr-2 h-4 w-4" />
               Edit
               <span className="ml-auto text-xs text-custom-text-400">⌘E</span>
-            </ContextMenu.Item>
-            <ContextMenu.Item>
+            </ContextMenuItem>
+            <ContextMenuItem>
               <Download className="mr-2 h-4 w-4" />
               Download
               <span className="ml-auto text-xs text-custom-text-400">⌘D</span>
-            </ContextMenu.Item>
-            <ContextMenu.Separator />
-            <ContextMenu.Item>
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem>
               <Trash className="mr-2 h-4 w-4 text-red-500" />
               <span className="text-red-500">Delete</span>
               <span className="ml-auto text-xs text-custom-text-400">⌘⌫</span>
-            </ContextMenu.Item>
-          </ContextMenu.Content>
-        </ContextMenu.Portal>
+            </ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenuPortal>
       </ContextMenu>
     );
   },

packages/propel/src/context-menu/context-menu.tsx

@@ -128,15 +128,13 @@ ContextMenuItem.displayName = "ContextMenuItem";
 ContextMenuSeparator.displayName = "ContextMenuSeparator";
 ContextMenuSubmenuTrigger.displayName = "ContextMenuSubmenuTrigger";
 
-// compound components
-const ContextMenu = Object.assign(ContextMenuRoot, {
-  Trigger: ContextMenuTrigger,
-  Portal: ContextMenuPortal,
-  Content: ContextMenuContent,
-  Item: ContextMenuItem,
-  Separator: ContextMenuSeparator,
-  Submenu: ContextMenuSubmenu,
-  SubmenuTrigger: ContextMenuSubmenuTrigger,
-});
-
-export { ContextMenu };
+export {
+  ContextMenuRoot as ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuPortal,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuSubmenu,
+  ContextMenuSubmenuTrigger,
+};

packages/propel/src/context-menu/index.ts

@@ -1,4 +1,13 @@
-export { ContextMenu } from "./context-menu";
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuPortal,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuSubmenu,
+  ContextMenuSubmenuTrigger,
+} from "./context-menu";
 export type {
   ContextMenuProps,
   ContextMenuTriggerProps,

packages/propel/src/dialog/dialog.stories.tsx

@@ -2,14 +2,14 @@ import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useArgs } from "storybook/preview-api";
 import { CloseIcon } from "../icons/actions/close-icon";
-import { Dialog, EDialogWidth } from "./root";
+import { Dialog, DialogPanel, DialogTitle, EDialogWidth } from "./root";
 
 const meta = {
   title: "Components/Dialog",
   component: Dialog,
   subcomponents: {
-    DialogPanel: Dialog.Panel,
-    DialogTitle: Dialog.Title,
+    DialogPanel,
+    DialogTitle,
   },
   args: {
     children: null,
@@ -31,9 +31,9 @@ const meta = {
         </button>
         {open && (
           <Dialog {...args} open={open} onOpenChange={setOpen}>
-            <Dialog.Panel>
+            <DialogPanel>
               <div className="p-6">
-                <Dialog.Title>Dialog Title</Dialog.Title>
+                <DialogTitle>Dialog Title</DialogTitle>
                 <div className="mt-4">
                   <p className="text-sm text-gray-600">This is the dialog content. You can put any content here.</p>
                 </div>
@@ -52,7 +52,7 @@ const meta = {
                   </button>
                 </div>
               </div>
-            </Dialog.Panel>
+            </DialogPanel>
           </Dialog>
         )}
       </>
@@ -79,9 +79,9 @@ export const TopPosition: Story = {
         </button>
         {open && (
           <Dialog {...args} open={open} onOpenChange={setOpen}>
-            <Dialog.Panel position="top">
+            <DialogPanel position="top">
               <div className="p-6">
-                <Dialog.Title>Top Positioned Dialog</Dialog.Title>
+                <DialogTitle>Top Positioned Dialog</DialogTitle>
                 <div className="mt-4">
                   <p className="text-sm text-gray-600">
                     This dialog appears at the top of the screen instead of centered.
@@ -96,7 +96,7 @@ export const TopPosition: Story = {
                   </button>
                 </div>
               </div>
-            </Dialog.Panel>
+            </DialogPanel>
           </Dialog>
         )}
       </>
@@ -114,9 +114,9 @@ export const SmallWidth: Story = {
         </button>
         {open && (
           <Dialog {...args} open={open} onOpenChange={setOpen}>
-            <Dialog.Panel width={EDialogWidth.SM}>
+            <DialogPanel width={EDialogWidth.SM}>
               <div className="p-6">
-                <Dialog.Title>Small Dialog</Dialog.Title>
+                <DialogTitle>Small Dialog</DialogTitle>
                 <div className="mt-4">
                   <p className="text-sm text-gray-600">This is a small dialog.</p>
                 </div>
@@ -129,7 +129,7 @@ export const SmallWidth: Story = {
                   </button>
                 </div>
               </div>
-            </Dialog.Panel>
+            </DialogPanel>
           </Dialog>
         )}
       </>
@@ -147,9 +147,9 @@ export const LargeWidth: Story = {
         </button>
         {open && (
           <Dialog {...args} open={open} onOpenChange={setOpen}>
-            <Dialog.Panel width={EDialogWidth.XXXXL}>
+            <DialogPanel width={EDialogWidth.XXXXL}>
               <div className="p-6">
-                <Dialog.Title>Large Dialog</Dialog.Title>
+                <DialogTitle>Large Dialog</DialogTitle>
                 <div className="mt-4">
                   <p className="text-sm text-gray-600">
                     This is a large dialog with more horizontal space for content.
@@ -164,7 +164,7 @@ export const LargeWidth: Story = {
                   </button>
                 </div>
               </div>
-            </Dialog.Panel>
+            </DialogPanel>
           </Dialog>
         )}
       </>
@@ -182,10 +182,10 @@ export const WithCloseButton: Story = {
         </button>
         {open && (
           <Dialog {...args} open={open} onOpenChange={setOpen}>
-            <Dialog.Panel>
+            <DialogPanel>
               <div className="p-6">
                 <div className="flex items-start justify-between">
-                  <Dialog.Title>Dialog with Close Button</Dialog.Title>
+                  <DialogTitle>Dialog with Close Button</DialogTitle>
                   <button onClick={() => setOpen(false)} className="rounded-full p-1 hover:bg-gray-100">
                     <CloseIcon className="h-4 w-4" />
                   </button>
@@ -194,7 +194,7 @@ export const WithCloseButton: Story = {
                   <p className="text-sm text-gray-600">This dialog has a close button in the header.</p>
                 </div>
               </div>
-            </Dialog.Panel>
+            </DialogPanel>
           </Dialog>
         )}
       </>
@@ -216,9 +216,9 @@ export const ConfirmationDialog: Story = {
         </button>
         {open && (
           <Dialog {...args} open={open} onOpenChange={setOpen}>
-            <Dialog.Panel width={EDialogWidth.SM}>
+            <DialogPanel width={EDialogWidth.SM}>
               <div className="p-6">
-                <Dialog.Title>Confirm Deletion</Dialog.Title>
+                <DialogTitle>Confirm Deletion</DialogTitle>
                 <div className="mt-4">
                   <p className="text-sm text-gray-600">
                     Are you sure you want to delete this item? This action cannot be undone.
@@ -239,7 +239,7 @@ export const ConfirmationDialog: Story = {
                   </button>
                 </div>
               </div>
-            </Dialog.Panel>
+            </DialogPanel>
           </Dialog>
         )}
       </>
@@ -262,9 +262,9 @@ export const FormDialog: Story = {
         </button>
         {open && (
           <Dialog {...args} open={open} onOpenChange={setOpen}>
-            <Dialog.Panel width={EDialogWidth.MD}>
+            <DialogPanel width={EDialogWidth.MD}>
               <form onSubmit={handleSubmit} className="p-6">
-                <Dialog.Title>Create New Item</Dialog.Title>
+                <DialogTitle>Create New Item</DialogTitle>
                 <div className="mt-4 space-y-4">
                   <div>
                     <label htmlFor="name" className="block text-sm font-medium text-gray-700">
@@ -302,7 +302,7 @@ export const FormDialog: Story = {
                   </button>
                 </div>
               </form>
-            </Dialog.Panel>
+            </DialogPanel>
           </Dialog>
         )}
       </>
@@ -320,9 +320,9 @@ export const ScrollableContent: Story = {
         </button>
         {open && (
           <Dialog {...args} open={open} onOpenChange={setOpen}>
-            <Dialog.Panel width={EDialogWidth.MD}>
+            <DialogPanel width={EDialogWidth.MD}>
               <div className="p-6">
-                <Dialog.Title>Scrollable Content</Dialog.Title>
+                <DialogTitle>Scrollable Content</DialogTitle>
                 <div className="mt-4 max-h-96 overflow-y-auto">
                   {Array.from({ length: 20 }, (_, i) => (
                     <p key={i} className="mb-2 text-sm text-gray-600">
@@ -340,7 +340,7 @@ export const ScrollableContent: Story = {
                   </button>
                 </div>
               </div>
-            </Dialog.Panel>
+            </DialogPanel>
           </Dialog>
         )}
       </>
@@ -375,9 +375,9 @@ export const AllWidths: Story = {
         ))}
         {widths.map(({ width, label }) => (
           <Dialog key={width} open={openWidth === width} onOpenChange={() => setOpenWidth(null)}>
-            <Dialog.Panel width={width}>
+            <DialogPanel width={width}>
               <div className="p-6">
-                <Dialog.Title>{label} Dialog</Dialog.Title>
+                <DialogTitle>{label} Dialog</DialogTitle>
                 <div className="mt-4">
                   <p className="text-sm text-gray-600">This dialog uses the {label} width variant.</p>
                 </div>
@@ -390,7 +390,7 @@ export const AllWidths: Story = {
                   </button>
                 </div>
               </div>
-            </Dialog.Panel>
+            </DialogPanel>
           </Dialog>
         ))}
       </div>

packages/propel/src/dialog/root.tsx

@@ -34,6 +34,18 @@ export interface DialogTitleProps extends React.ComponentProps<typeof BaseDialog
   children: React.ReactNode;
 }
 
+export interface DialogPortalProps extends React.ComponentProps<typeof BaseDialog.Portal> {
+  children: React.ReactNode;
+}
+
+export interface DialogOverlayProps extends React.ComponentProps<typeof BaseDialog.Backdrop> {
+  className?: string;
+}
+
+export interface DialogTriggerProps extends React.ComponentProps<typeof BaseDialog.Trigger> {
+  children: React.ReactNode;
+}
+
 // Constants
 const OVERLAY_CLASSNAME = cn("fixed inset-0 z-backdrop bg-custom-backdrop");
 const BASE_CLASSNAME = "relative text-left bg-custom-background-100 rounded-lg shadow-md w-full z-modal";
@@ -122,14 +134,6 @@ const DialogTitle = memo(function DialogTitle({ className, children, ...props }:
 });
 
 DialogTitle.displayName = "DialogTitle";
+DialogComponent.displayName = "Dialog";
 
-// Create the compound Dialog component with proper typing
-const Dialog = Object.assign(DialogComponent, {
-  Panel: DialogPanel,
-  Title: DialogTitle,
-}) as typeof DialogComponent & {
-  Panel: typeof DialogPanel;
-  Title: typeof DialogTitle;
-};
-
-export { Dialog, DialogTitle, DialogPanel };
+export { DialogComponent as Dialog, DialogTitle, DialogPanel, DialogTrigger };

packages/propel/src/emoji-icon-picker/emoji-picker.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useCallback } from "react";
 import { Tabs } from "@base-ui-components/react";
-import { Popover } from "../popover";
+import { Popover, PopoverTrigger, PopoverContent } from "../popover";
 import { cn } from "../utils/classname";
 import { convertPlacementToSideAndAlign } from "../utils/placement";
 import { EmojiRoot } from "./emoji/emoji";
@@ -95,10 +95,10 @@ export function EmojiPicker(props: TCustomEmojiPicker) {
 
   return (
     <Popover open={isOpen} onOpenChange={handleToggle}>
-      <Popover.Button className={cn("outline-none", buttonClassName)} disabled={disabled}>
+      <PopoverTrigger className={cn("outline-none", buttonClassName)} disabled={disabled}>
         {label}
-      </Popover.Button>
-      <Popover.Panel
+      </PopoverTrigger>
+      <PopoverContent
         positionerClassName="z-50"
         className={cn(
           "w-80 bg-custom-background-100 rounded-md border-[0.5px] border-custom-border-300 overflow-hidden",
@@ -132,7 +132,7 @@ export function EmojiPicker(props: TCustomEmojiPicker) {
             </Tabs.Panel>
           ))}
         </Tabs.Root>
-      </Popover.Panel>
+      </PopoverContent>
     </Popover>
   );
 }

packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useCallback } from "react";
 import { EmojiRoot } from "../emoji-icon-picker/emoji/emoji";
 import { emojiToString } from "../emoji-icon-picker/helper";
-import { Popover } from "../popover";
+import { Popover, PopoverTrigger, PopoverContent } from "../popover";
 import { cn } from "../utils/classname";
 import { convertPlacementToSideAndAlign } from "../utils/placement";
 import type { TPlacement, TSide, TAlign } from "../utils/placement";
@@ -59,10 +59,10 @@ export function EmojiReactionPicker(props: EmojiReactionPickerProps) {
 
   return (
     <Popover open={isOpen} onOpenChange={handleToggle}>
-      <Popover.Button className={cn("outline-none", buttonClassName)} disabled={disabled}>
+      <PopoverTrigger className={cn("outline-none", buttonClassName)} disabled={disabled}>
         {label}
-      </Popover.Button>
-      <Popover.Panel
+      </PopoverTrigger>
+      <PopoverContent
         positionerClassName="z-50"
         className={cn(
           "w-80 bg-custom-background-100 rounded-md border-[0.5px] border-custom-border-300 overflow-hidden",
@@ -80,7 +80,7 @@ export function EmojiReactionPicker(props: EmojiReactionPickerProps) {
             searchDisabled={searchDisabled}
           />
         </div>
-      </Popover.Panel>
+      </PopoverContent>
     </Popover>
   );
 }

packages/propel/src/popover/popover.stories.tsx

@@ -2,15 +2,15 @@ import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useArgs } from "storybook/preview-api";
 import { CloseIcon } from "../icons/actions/close-icon";
-import { Popover } from "./root";
+import { Popover, PopoverTrigger, PopoverContent } from "./root";
 
 // cannot use satifies here because base-ui does not have portable types.
 const meta: Meta<typeof Popover> = {
   title: "Components/Popover",
   component: Popover,
   subcomponents: {
-    PopoverButton: Popover.Button,
-    PopoverPanel: Popover.Panel,
+    PopoverTrigger,
+    PopoverContent,
   },
   parameters: {
     layout: "centered",
@@ -27,13 +27,13 @@ const meta: Meta<typeof Popover> = {
 
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <PopoverTrigger className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
           Open Popover
-        </Popover.Button>
-        <Popover.Panel className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
+        </PopoverTrigger>
+        <PopoverContent className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
           <h3 className="text-sm font-semibold">Popover Title</h3>
           <p className="mt-2 text-sm text-gray-600">This is the popover content. You can put any content here.</p>
-        </Popover.Panel>
+        </PopoverContent>
       </Popover>
     );
   },
@@ -63,10 +63,10 @@ export const Controlled: Story = {
           </button>
         </div>
         <Popover open={open} onOpenChange={setOpen}>
-          <Popover.Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+          <PopoverTrigger className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
             Controlled Popover
-          </Popover.Button>
-          <Popover.Panel className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
+          </PopoverTrigger>
+          <PopoverContent className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
             <div className="flex items-start justify-between">
               <h3 className="text-sm font-semibold">Controlled State</h3>
               <button onClick={() => setOpen(false)} className="rounded-full p-1 hover:bg-gray-100">
@@ -74,7 +74,7 @@ export const Controlled: Story = {
               </button>
             </div>
             <p className="mt-2 text-sm text-gray-600">Current state: {open ? "Open" : "Closed"}</p>
-          </Popover.Panel>
+          </PopoverContent>
         </Popover>
       </div>
     );
@@ -86,13 +86,13 @@ export const SideTop: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <PopoverTrigger className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
           Open Above
-        </Popover.Button>
-        <Popover.Panel side="top" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
+        </PopoverTrigger>
+        <PopoverContent side="top" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
           <h3 className="text-sm font-semibold">Top Positioned</h3>
           <p className="mt-2 text-sm text-gray-600">This popover appears above the button.</p>
-        </Popover.Panel>
+        </PopoverContent>
       </Popover>
     );
   },
@@ -103,13 +103,13 @@ export const SideBottom: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <PopoverTrigger className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
           Open Below
-        </Popover.Button>
-        <Popover.Panel side="bottom" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
+        </PopoverTrigger>
+        <PopoverContent side="bottom" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
           <h3 className="text-sm font-semibold">Bottom Positioned</h3>
           <p className="mt-2 text-sm text-gray-600">This popover appears below the button.</p>
-        </Popover.Panel>
+        </PopoverContent>
       </Popover>
     );
   },
@@ -120,13 +120,13 @@ export const SideLeft: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <PopoverTrigger className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
           Open Left
-        </Popover.Button>
-        <Popover.Panel side="left" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
+        </PopoverTrigger>
+        <PopoverContent side="left" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
           <h3 className="text-sm font-semibold">Left Positioned</h3>
           <p className="mt-2 text-sm text-gray-600">This popover appears to the left of the button.</p>
-        </Popover.Panel>
+        </PopoverContent>
       </Popover>
     );
   },
@@ -137,13 +137,13 @@ export const SideRight: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <PopoverTrigger className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
           Open Right
-        </Popover.Button>
-        <Popover.Panel side="right" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
+        </PopoverTrigger>
+        <PopoverContent side="right" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
           <h3 className="text-sm font-semibold">Right Positioned</h3>
           <p className="mt-2 text-sm text-gray-600">This popover appears to the right of the button.</p>
-        </Popover.Panel>
+        </PopoverContent>
       </Popover>
     );
   },
@@ -154,13 +154,13 @@ export const AlignStart: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <PopoverTrigger className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
           Align Start
-        </Popover.Button>
-        <Popover.Panel align="start" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
+        </PopoverTrigger>
+        <PopoverContent align="start" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
           <h3 className="text-sm font-semibold">Start Aligned</h3>
           <p className="mt-2 text-sm text-gray-600">This popover is aligned to the start.</p>
-        </Popover.Panel>
+        </PopoverContent>
       </Popover>
     );
   },
@@ -171,13 +171,13 @@ export const AlignEnd: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <PopoverTrigger className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
           Align End
-        </Popover.Button>
-        <Popover.Panel align="end" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
+        </PopoverTrigger>
+        <PopoverContent align="end" className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
           <h3 className="text-sm font-semibold">End Aligned</h3>
           <p className="mt-2 text-sm text-gray-600">This popover is aligned to the end.</p>
-        </Popover.Panel>
+        </PopoverContent>
       </Popover>
     );
   },
@@ -188,13 +188,13 @@ export const CustomOffset: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <PopoverTrigger className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
           Custom Offset
-        </Popover.Button>
-        <Popover.Panel sideOffset={20} className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
+        </PopoverTrigger>
+        <PopoverContent sideOffset={20} className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
           <h3 className="text-sm font-semibold">Custom Side Offset</h3>
           <p className="mt-2 text-sm text-gray-600">This popover has a custom side offset of 20px.</p>
-        </Popover.Panel>
+        </PopoverContent>
       </Popover>
     );
   },
@@ -210,10 +210,10 @@ export const WithForm: Story = {
     };
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <PopoverTrigger className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
           Open Form
-        </Popover.Button>
-        <Popover.Panel className="w-72 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
+        </PopoverTrigger>
+        <PopoverContent className="w-72 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
           <h3 className="text-sm font-semibold">Quick Form</h3>
           <form onSubmit={handleSubmit} className="mt-3 space-y-3">
             <div>
@@ -251,7 +251,7 @@ export const WithForm: Story = {
               </button>
             </div>
           </form>
-        </Popover.Panel>
+        </PopoverContent>
       </Popover>
     );
   },
@@ -262,17 +262,17 @@ export const WithList: Story = {
     const [open, setOpen] = useState(args.open);
     return (
       <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+        <PopoverTrigger className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
           Show Options
-        </Popover.Button>
-        <Popover.Panel className="w-56 rounded-lg border border-gray-200 bg-white shadow-lg">
+        </PopoverTrigger>
+        <PopoverContent className="w-56 rounded-lg border border-gray-200 bg-white shadow-lg">
           <div className="p-2">
             <h3 className="px-2 py-1.5 text-xs font-semibold text-gray-500">Options</h3>
             <button className="w-full rounded px-2 py-1.5 text-left text-sm hover:bg-gray-100">Option 1</button>
             <button className="w-full rounded px-2 py-1.5 text-left text-sm hover:bg-gray-100">Option 2</button>
             <button className="w-full rounded px-2 py-1.5 text-left text-sm hover:bg-gray-100">Option 3</button>
           </div>
-        </Popover.Panel>
+        </PopoverContent>
       </Popover>
     );
   },
@@ -285,11 +285,11 @@ export const ColorPicker: Story = {
 
     return (
       <Popover>
-        <Popover.Button className="flex items-center gap-2 rounded border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+        <PopoverTrigger className="flex items-center gap-2 rounded border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
           <div className="h-4 w-4 rounded" style={{ backgroundColor: selectedColor }} />
           <span className="text-sm">Pick Color</span>
-        </Popover.Button>
-        <Popover.Panel className="w-48 rounded-lg border border-gray-200 bg-white p-3 shadow-lg">
+        </PopoverTrigger>
+        <PopoverContent className="w-48 rounded-lg border border-gray-200 bg-white p-3 shadow-lg">
           <h3 className="mb-2 text-xs font-semibold">Select Color</h3>
           <div className="grid grid-cols-5 gap-2">
             {colors.map((color) => (
@@ -304,7 +304,7 @@ export const ColorPicker: Story = {
               />
             ))}
           </div>
-        </Popover.Panel>
+        </PopoverContent>
       </Popover>
     );
   },

packages/propel/src/popover/root.tsx

@@ -45,6 +45,15 @@ const PopoverContent = memo(function PopoverContent({
 });
 
 // wrapper components
+const PopoverTrigger = React.memo(function PopoverTrigger(props: React.ComponentProps<typeof BasePopover.Trigger>) {
+  return <BasePopover.Trigger data-slot="popover-trigger" {...props} />;
+});
+
+const PopoverPortal = React.memo(function PopoverPortal(props: React.ComponentProps<typeof BasePopover.Portal>) {
+  return <BasePopover.Portal data-slot="popover-portal" {...props} />;
+});
+
+const PopoverPositioner = React.memo(function PopoverPositioner(props: React.ComponentProps<typeof BasePopover.Positioner>) {
 const PopoverTrigger = memo(function PopoverTrigger(props: React.ComponentProps<typeof BasePopover.Trigger>) {
   return <BasePopover.Trigger data-slot="popover-trigger" {...props} />;
 });
@@ -58,6 +67,9 @@ const PopoverPositioner = memo(function PopoverPositioner(props: React.Component
 });
 
 // compound components
+const PopoverRoot = React.memo<React.ComponentProps<typeof BasePopover.Root>>(function Popover(props) {
+  return <BasePopover.Root data-slot="popover" {...props} />;
+});
 const Popover = Object.assign(
   memo(function Popover(props: React.ComponentProps<typeof BasePopover.Root>) {
     return <BasePopover.Root data-slot="popover" {...props} />;
@@ -70,9 +82,9 @@ const Popover = Object.assign(
 
 // display names
 PopoverContent.displayName = "PopoverContent";
-Popover.displayName = "Popover";
+PopoverRoot.displayName = "Popover";
 PopoverPortal.displayName = "PopoverPortal";
 PopoverTrigger.displayName = "PopoverTrigger";
 PopoverPositioner.displayName = "PopoverPositioner";
 
-export { Popover };
+export { PopoverRoot as Popover, PopoverTrigger, PopoverContent };

packages/propel/src/skeleton/root.tsx

@@ -2,12 +2,18 @@ import React from "react";
 // helpers
 import { cn } from "../utils/classname";
 
-type SkeletonProps = {
+export type SkeletonProps = {
   children: React.ReactNode;
   className?: string;
   ariaLabel?: string;
 };
 
+export type SkeletonItemProps = {
+  height?: string;
+  width?: string;
+  className?: string;
+};
+
 function SkeletonRoot({ children, className = "", ariaLabel = "Loading content" }: SkeletonProps) {
   return (
     <div data-slot="skeleton" className={cn("animate-pulse", className)} role="status" aria-label={ariaLabel}>
@@ -16,13 +22,7 @@ function SkeletonRoot({ children, className = "", ariaLabel = "Loading content"
   );
 }
 
-type ItemProps = {
-  height?: string;
-  width?: string;
-  className?: string;
-};
-
-function SkeletonItem({ height = "auto", width = "auto", className = "" }: ItemProps) {
+function SkeletonItem({ height = "auto", width = "auto", className = "" }: SkeletonItemProps) {
   return (
     <div
       data-slot="skeleton-item"
@@ -32,8 +32,6 @@ function SkeletonItem({ height = "auto", width = "auto", className = "" }: ItemP
   );
 }
 
-const Skeleton = Object.assign(SkeletonRoot, { Item: SkeletonItem });
-
 SkeletonRoot.displayName = "plane-ui-skeleton";
 SkeletonItem.displayName = "plane-ui-skeleton-item";
 

packages/propel/src/skeleton/skeleton.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Skeleton } from "./index";
+import { Skeleton, SkeletonItem } from "./index";
 
 const meta = {
   title: "Components/Skeleton",
@@ -19,7 +19,7 @@ export const Default: Story = {
   render() {
     return (
       <Skeleton className="w-80 flex flex-col gap-2">
-        <Skeleton.Item height="40px" width="100%" />
+        <SkeletonItem height="40px" width="100%" />
       </Skeleton>
     );
   },
@@ -29,10 +29,10 @@ export const Card: Story = {
   render() {
     return (
       <Skeleton className="w-80 flex flex-col gap-4">
-        <Skeleton.Item height="200px" width="100%" />
+        <SkeletonItem height="200px" width="100%" />
         <div className="flex flex-col gap-2">
-          <Skeleton.Item height="20px" width="60%" />
-          <Skeleton.Item height="16px" width="40%" />
+          <SkeletonItem height="20px" width="60%" />
+          <SkeletonItem height="16px" width="40%" />
         </div>
       </Skeleton>
     );
@@ -45,10 +45,10 @@ export const List: Story = {
       <Skeleton className="w-96 flex flex-col gap-3">
         {[...Array(5)].map((_, i) => (
           <div key={i} className="flex gap-3">
-            <Skeleton.Item height="40px" width="40px" className="rounded-full" />
+            <SkeletonItem height="40px" width="40px" className="rounded-full" />
             <div className="flex-1 flex flex-col gap-2">
-              <Skeleton.Item height="16px" width="70%" />
-              <Skeleton.Item height="12px" width="50%" />
+              <SkeletonItem height="16px" width="70%" />
+              <SkeletonItem height="12px" width="50%" />
             </div>
           </div>
         ))}
@@ -62,15 +62,15 @@ export const Table: Story = {
     return (
       <Skeleton className="w-full flex flex-col gap-3">
         <div className="flex gap-4">
-          <Skeleton.Item height="20px" width="150px" />
-          <Skeleton.Item height="20px" width="200px" />
-          <Skeleton.Item height="20px" width="120px" />
+          <SkeletonItem height="20px" width="150px" />
+          <SkeletonItem height="20px" width="200px" />
+          <SkeletonItem height="20px" width="120px" />
         </div>
         {[...Array(5)].map((_, i) => (
           <div key={i} className="flex gap-4">
-            <Skeleton.Item height="40px" width="150px" />
-            <Skeleton.Item height="40px" width="200px" />
-            <Skeleton.Item height="40px" width="120px" />
+            <SkeletonItem height="40px" width="150px" />
+            <SkeletonItem height="40px" width="200px" />
+            <SkeletonItem height="40px" width="120px" />
           </div>
         ))}
       </Skeleton>
@@ -83,16 +83,16 @@ export const Profile: Story = {
     return (
       <Skeleton className="w-80 flex flex-col gap-4">
         <div className="flex items-center gap-4">
-          <Skeleton.Item height="80px" width="80px" className="rounded-full" />
+          <SkeletonItem height="80px" width="80px" className="rounded-full" />
           <div className="flex-1 flex flex-col gap-2">
-            <Skeleton.Item height="20px" width="60%" />
-            <Skeleton.Item height="16px" width="40%" />
+            <SkeletonItem height="20px" width="60%" />
+            <SkeletonItem height="16px" width="40%" />
           </div>
         </div>
         <div className="flex flex-col gap-2">
-          <Skeleton.Item height="16px" width="100%" />
-          <Skeleton.Item height="16px" width="90%" />
-          <Skeleton.Item height="16px" width="70%" />
+          <SkeletonItem height="16px" width="100%" />
+          <SkeletonItem height="16px" width="90%" />
+          <SkeletonItem height="16px" width="70%" />
         </div>
       </Skeleton>
     );
@@ -103,7 +103,7 @@ export const Avatar: Story = {
   render() {
     return (
       <Skeleton className="flex gap-2">
-        <Skeleton.Item height="40px" width="40px" className="rounded-full" />
+        <SkeletonItem height="40px" width="40px" className="rounded-full" />
       </Skeleton>
     );
   },
@@ -114,7 +114,7 @@ export const AvatarGroup: Story = {
     return (
       <Skeleton className="flex -space-x-2">
         {[...Array(4)].map((_, i) => (
-          <Skeleton.Item key={i} height="40px" width="40px" className="rounded-full border-2 border-white" />
+          <SkeletonItem key={i} height="40px" width="40px" className="rounded-full border-2 border-white" />
         ))}
       </Skeleton>
     );
@@ -125,10 +125,10 @@ export const Text: Story = {
   render() {
     return (
       <Skeleton className="w-96 flex flex-col gap-2">
-        <Skeleton.Item height="16px" width="100%" />
-        <Skeleton.Item height="16px" width="95%" />
-        <Skeleton.Item height="16px" width="90%" />
-        <Skeleton.Item height="16px" width="60%" />
+        <SkeletonItem height="16px" width="100%" />
+        <SkeletonItem height="16px" width="95%" />
+        <SkeletonItem height="16px" width="90%" />
+        <SkeletonItem height="16px" width="60%" />
       </Skeleton>
     );
   },
@@ -138,7 +138,7 @@ export const Button: Story = {
   render() {
     return (
       <Skeleton className="inline-flex">
-        <Skeleton.Item height="40px" width="120px" className="rounded-md" />
+        <SkeletonItem height="40px" width="120px" className="rounded-md" />
       </Skeleton>
     );
   },
@@ -148,8 +148,8 @@ export const Input: Story = {
   render() {
     return (
       <Skeleton className="w-80 flex flex-col gap-2">
-        <Skeleton.Item height="14px" width="80px" />
-        <Skeleton.Item height="40px" width="100%" className="rounded-md" />
+        <SkeletonItem height="14px" width="80px" />
+        <SkeletonItem height="40px" width="100%" className="rounded-md" />
       </Skeleton>
     );
   },
@@ -160,18 +160,18 @@ export const Form: Story = {
     return (
       <Skeleton className="w-96 flex flex-col gap-4">
         <div className="flex flex-col gap-2">
-          <Skeleton.Item height="14px" width="80px" />
-          <Skeleton.Item height="40px" width="100%" className="rounded-md" />
+          <SkeletonItem height="14px" width="80px" />
+          <SkeletonItem height="40px" width="100%" className="rounded-md" />
         </div>
         <div className="flex flex-col gap-2">
-          <Skeleton.Item height="14px" width="100px" />
-          <Skeleton.Item height="40px" width="100%" className="rounded-md" />
+          <SkeletonItem height="14px" width="100px" />
+          <SkeletonItem height="40px" width="100%" className="rounded-md" />
         </div>
         <div className="flex flex-col gap-2">
-          <Skeleton.Item height="14px" width="60px" />
-          <Skeleton.Item height="80px" width="100%" className="rounded-md" />
+          <SkeletonItem height="14px" width="60px" />
+          <SkeletonItem height="80px" width="100%" className="rounded-md" />
         </div>
-        <Skeleton.Item height="40px" width="120px" className="rounded-md" />
+        <SkeletonItem height="40px" width="120px" className="rounded-md" />
       </Skeleton>
     );
   },
@@ -181,13 +181,13 @@ export const ProductCard: Story = {
   render() {
     return (
       <Skeleton className="w-72 flex flex-col gap-3 p-4 border rounded-lg">
-        <Skeleton.Item height="200px" width="100%" className="rounded-md" />
+        <SkeletonItem height="200px" width="100%" className="rounded-md" />
         <div className="flex flex-col gap-2">
-          <Skeleton.Item height="20px" width="80%" />
-          <Skeleton.Item height="16px" width="60%" />
-          <Skeleton.Item height="24px" width="40%" />
+          <SkeletonItem height="20px" width="80%" />
+          <SkeletonItem height="16px" width="60%" />
+          <SkeletonItem height="24px" width="40%" />
         </div>
-        <Skeleton.Item height="40px" width="100%" className="rounded-md" />
+        <SkeletonItem height="40px" width="100%" className="rounded-md" />
       </Skeleton>
     );
   },

packages/propel/src/tabs/tabs.stories.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Settings, User, Bell } from "lucide-react";
 import { HomeIcon } from "../icons/workspace/home-icon";
-import { Tabs } from "./tabs";
+import { Tabs, TabsList, TabsTrigger, TabsContent, TabsIndicator } from "./tabs";
 
 type TabOption = {
   label: string;
@@ -20,10 +20,10 @@ const meta: Meta<typeof Tabs> = {
   title: "Components/Tabs",
   component: Tabs,
   subcomponents: {
-    TabsList: Tabs.List,
-    TabsTrigger: Tabs.Trigger,
-    TabsContent: Tabs.Content,
-    TabsIndicator: Tabs.Indicator,
+    TabsList,
+    TabsTrigger,
+    TabsContent,
+    TabsIndicator,
   },
   parameters: {
     layout: "centered",
@@ -41,21 +41,21 @@ export const Basic: Story = {
     return (
       <div className="w-[400px]">
         <Tabs defaultValue={defaultValue}>
-          <Tabs.List>
+          <TabsList>
             {tabOptions.map((option) => (
-              <Tabs.Trigger key={option.value} value={option.value}>
+              <TabsTrigger key={option.value} value={option.value}>
                 {option.label}
-              </Tabs.Trigger>
+              </TabsTrigger>
             ))}
-            <Tabs.Indicator />
-          </Tabs.List>
+            <TabsIndicator />
+          </TabsList>
           {tabOptions.map((option) => (
-            <Tabs.Content key={option.value} value={option.value} className="p-4">
+            <TabsContent key={option.value} value={option.value} className="p-4">
               <div className="text-sm">
                 <h3 className="font-medium mb-2">{option.label}</h3>
                 <p className="text-custom-text-300">Content for the {option.label.toLowerCase()} tab.</p>
               </div>
-            </Tabs.Content>
+            </TabsContent>
           ))}
         </Tabs>
       </div>
@@ -77,14 +77,14 @@ export const Sizes: Story = {
           <div key={size} className="flex flex-col gap-2">
             <div className="text-sm font-medium">{sizeLabels[size]}</div>
             <Tabs defaultValue={defaultValue}>
-              <Tabs.List>
+              <TabsList>
                 {tabOptions.map((option) => (
-                  <Tabs.Trigger key={option.value} value={option.value} size={size}>
+                  <TabsTrigger key={option.value} value={option.value} size={size}>
                     {option.label}
-                  </Tabs.Trigger>
+                  </TabsTrigger>
                 ))}
-                <Tabs.Indicator />
-              </Tabs.List>
+                <TabsIndicator />
+              </TabsList>
             </Tabs>
           </div>
         ))}
@@ -103,18 +103,18 @@ export const Controlled: Story = {
           Active tab: <span className="font-medium">{activeTab}</span>
         </div>
         <Tabs value={activeTab} onValueChange={(value) => value && setActiveTab(value)}>
-          <Tabs.List>
+          <TabsList>
             {tabOptions.map((option) => (
-              <Tabs.Trigger key={option.value} value={option.value}>
+              <TabsTrigger key={option.value} value={option.value}>
                 {option.label}
-              </Tabs.Trigger>
+              </TabsTrigger>
             ))}
-            <Tabs.Indicator />
-          </Tabs.List>
+            <TabsIndicator />
+          </TabsList>
           {tabOptions.map((option) => (
-            <Tabs.Content key={option.value} value={option.value} className="p-4">
+            <TabsContent key={option.value} value={option.value} className="p-4">
               <div className="text-sm">Content for {option.label}</div>
-            </Tabs.Content>
+            </TabsContent>
           ))}
         </Tabs>
       </div>
@@ -127,23 +127,23 @@ export const DisabledTab: Story = {
     return (
       <div className="w-[400px]">
         <Tabs defaultValue={defaultValue}>
-          <Tabs.List>
-            <Tabs.Trigger value="account">Account</Tabs.Trigger>
-            <Tabs.Trigger value="password" disabled>
+          <TabsList>
+            <TabsTrigger value="account">Account</TabsTrigger>
+            <TabsTrigger value="password" disabled>
               Password
-            </Tabs.Trigger>
-            <Tabs.Trigger value="notifications">Notifications</Tabs.Trigger>
-            <Tabs.Indicator />
-          </Tabs.List>
-          <Tabs.Content value="account" className="p-4">
+            </TabsTrigger>
+            <TabsTrigger value="notifications">Notifications</TabsTrigger>
+            <TabsIndicator />
+          </TabsList>
+          <TabsContent value="account" className="p-4">
             <div className="text-sm">Account content</div>
-          </Tabs.Content>
-          <Tabs.Content value="password" className="p-4">
+          </TabsContent>
+          <TabsContent value="password" className="p-4">
             <div className="text-sm">Password content (disabled)</div>
-          </Tabs.Content>
-          <Tabs.Content value="notifications" className="p-4">
+          </TabsContent>
+          <TabsContent value="notifications" className="p-4">
             <div className="text-sm">Notifications content</div>
-          </Tabs.Content>
+          </TabsContent>
         </Tabs>
       </div>
     );
@@ -162,19 +162,19 @@ export const WithIcons: Story = {
     return (
       <div className="w-[500px]">
         <Tabs defaultValue={defaultValue || "home"}>
-          <Tabs.List>
+          <TabsList>
             {tabsWithIcons.map((tab) => (
-              <Tabs.Trigger key={tab.value} value={tab.value}>
+              <TabsTrigger key={tab.value} value={tab.value}>
                 <tab.icon className="w-4 h-4 mr-2" />
                 {tab.label}
-              </Tabs.Trigger>
+              </TabsTrigger>
             ))}
-            <Tabs.Indicator />
-          </Tabs.List>
+            <TabsIndicator />
+          </TabsList>
           {tabsWithIcons.map((tab) => (
-            <Tabs.Content key={tab.value} value={tab.value} className="p-4">
+            <TabsContent key={tab.value} value={tab.value} className="p-4">
               <div className="text-sm">Content for {tab.label}</div>
-            </Tabs.Content>
+            </TabsContent>
           ))}
         </Tabs>
       </div>
@@ -194,18 +194,18 @@ export const IconsOnly: Story = {
     return (
       <div className="w-[300px]">
         <Tabs defaultValue={defaultValue || "home"}>
-          <Tabs.List>
+          <TabsList>
             {iconTabs.map((tab) => (
-              <Tabs.Trigger key={tab.value} value={tab.value}>
+              <TabsTrigger key={tab.value} value={tab.value}>
                 <tab.icon className="w-4 h-4" />
-              </Tabs.Trigger>
+              </TabsTrigger>
             ))}
-            <Tabs.Indicator />
-          </Tabs.List>
+            <TabsIndicator />
+          </TabsList>
           {iconTabs.map((tab) => (
-            <Tabs.Content key={tab.value} value={tab.value} className="p-4">
+            <TabsContent key={tab.value} value={tab.value} className="p-4">
               <div className="text-sm">Content for {tab.value}</div>
-            </Tabs.Content>
+            </TabsContent>
           ))}
         </Tabs>
       </div>
@@ -245,9 +245,9 @@ export const DynamicTabs: Story = {
           </button>
         </div>
         <Tabs value={activeTab} onValueChange={(value) => value && setActiveTab(value)}>
-          <Tabs.List>
+          <TabsList>
             {tabs.map((tab) => (
-              <Tabs.Trigger key={tab.value} value={tab.value}>
+              <TabsTrigger key={tab.value} value={tab.value}>
                 {tab.label}
                 {tabs.length > 1 && (
                   <button
@@ -260,14 +260,14 @@ export const DynamicTabs: Story = {
                     ×
                   </button>
                 )}
-              </Tabs.Trigger>
+              </TabsTrigger>
             ))}
-            <Tabs.Indicator />
-          </Tabs.List>
+            <TabsIndicator />
+          </TabsList>
           {tabs.map((tab) => (
-            <Tabs.Content key={tab.value} value={tab.value} className="p-4">
+            <TabsContent key={tab.value} value={tab.value} className="p-4">
               <div className="text-sm">Content for {tab.label}</div>
-            </Tabs.Content>
+            </TabsContent>
           ))}
         </Tabs>
       </div>
@@ -280,22 +280,22 @@ export const FullWidth: Story = {
     return (
       <div className="w-full max-w-2xl">
         <Tabs defaultValue={defaultValue}>
-          <Tabs.List>
-            <Tabs.Trigger value="account" className="flex-1">
+          <TabsList>
+            <TabsTrigger value="account" className="flex-1">
               Account
-            </Tabs.Trigger>
-            <Tabs.Trigger value="password" className="flex-1">
+            </TabsTrigger>
+            <TabsTrigger value="password" className="flex-1">
               Password
-            </Tabs.Trigger>
-            <Tabs.Trigger value="notifications" className="flex-1">
+            </TabsTrigger>
+            <TabsTrigger value="notifications" className="flex-1">
               Notifications
-            </Tabs.Trigger>
-            <Tabs.Indicator />
-          </Tabs.List>
+            </TabsTrigger>
+            <TabsIndicator />
+          </TabsList>
           {tabOptions.map((option) => (
-            <Tabs.Content key={option.value} value={option.value} className="p-4">
+            <TabsContent key={option.value} value={option.value} className="p-4">
               <div className="text-sm">Content for {option.label}</div>
-            </Tabs.Content>
+            </TabsContent>
           ))}
         </Tabs>
       </div>
@@ -308,15 +308,15 @@ export const WithComplexContent: Story = {
     return (
       <div className="w-[600px]">
         <Tabs defaultValue={defaultValue}>
-          <Tabs.List>
+          <TabsList>
             {tabOptions.map((option) => (
-              <Tabs.Trigger key={option.value} value={option.value}>
+              <TabsTrigger key={option.value} value={option.value}>
                 {option.label}
-              </Tabs.Trigger>
+              </TabsTrigger>
             ))}
-            <Tabs.Indicator />
-          </Tabs.List>
-          <Tabs.Content value="account" className="p-4">
+            <TabsIndicator />
+          </TabsList>
+          <TabsContent value="account" className="p-4">
             <div className="space-y-4">
               <div>
                 <label className="text-sm font-medium">Username</label>
@@ -327,8 +327,8 @@ export const WithComplexContent: Story = {
                 <input type="email" className="mt-1 w-full px-3 py-2 bg-custom-background-80 rounded" />
               </div>
             </div>
-          </Tabs.Content>
-          <Tabs.Content value="password" className="p-4">
+          </TabsContent>
+          <TabsContent value="password" className="p-4">
             <div className="space-y-4">
               <div>
                 <label className="text-sm font-medium">Current Password</label>
@@ -339,8 +339,8 @@ export const WithComplexContent: Story = {
                 <input type="password" className="mt-1 w-full px-3 py-2 bg-custom-background-80 rounded" />
               </div>
             </div>
-          </Tabs.Content>
-          <Tabs.Content value="notifications" className="p-4">
+          </TabsContent>
+          <TabsContent value="notifications" className="p-4">
             <div className="space-y-3">
               <div className="flex items-center justify-between">
                 <span className="text-sm">Email notifications</span>
@@ -351,7 +351,7 @@ export const WithComplexContent: Story = {
                 <input type="checkbox" />
               </div>
             </div>
-          </Tabs.Content>
+          </TabsContent>
         </Tabs>
       </div>
     );

packages/propel/src/tabs/tabs.tsx

@@ -2,23 +2,6 @@ import * as React from "react";
 import { Tabs as TabsPrimitive } from "@base-ui-components/react/tabs";
 import { cn } from "../utils/classname";
 
-type TabsCompound = React.ForwardRefExoticComponent<
-  React.ComponentProps<typeof TabsPrimitive.Root> & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Root>>
-> & {
-  List: React.ForwardRefExoticComponent<
-    React.ComponentProps<typeof TabsPrimitive.List> & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.List>>
-  >;
-  Trigger: React.ForwardRefExoticComponent<
-    React.ComponentProps<typeof TabsPrimitive.Tab> & { size?: "sm" | "md" | "lg" } & React.RefAttributes<
-        React.ElementRef<typeof TabsPrimitive.Tab>
-      >
-  >;
-  Content: React.ForwardRefExoticComponent<
-    React.ComponentProps<typeof TabsPrimitive.Panel> & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Panel>>
-  >;
-  Indicator: React.ForwardRefExoticComponent<React.ComponentProps<"div"> & React.RefAttributes<HTMLDivElement>>;
-};
-
 const TabsRoot = React.forwardRef(function TabsRoot(
   { className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>,
   ref: React.ForwardedRef<React.ElementRef<typeof TabsPrimitive.Root>>
@@ -104,11 +87,10 @@ const TabsIndicator = React.forwardRef(function TabsIndicator(
   );
 });
 
-export const Tabs = Object.assign(TabsRoot, {
-  List: TabsList,
-  Trigger: TabsTrigger,
-  Content: TabsContent,
-  Indicator: TabsIndicator,
-}) satisfies TabsCompound;
+TabsRoot.displayName = "Tabs";
+TabsList.displayName = "TabsList";
+TabsTrigger.displayName = "TabsTrigger";
+TabsContent.displayName = "TabsContent";
+TabsIndicator.displayName = "TabsIndicator";
 
-export { TabsList, TabsTrigger, TabsContent, TabsIndicator };
+export { TabsRoot as Tabs, TabsList, TabsTrigger, TabsContent, TabsIndicator };

packages/propel/src/toolbar/index.ts

@@ -1,4 +1,4 @@
-export { Toolbar } from "./toolbar";
+export { Toolbar, ToolbarGroup, ToolbarItem, ToolbarSeparator, ToolbarSubmitButton } from "./toolbar";
 export type {
   ToolbarProps,
   ToolbarGroupProps,

packages/propel/src/toolbar/toolbar.stories.tsx

@@ -17,7 +17,7 @@ import {
   Lock,
 } from "lucide-react";
 import { ListLayoutIcon } from "../icons/layouts/list-icon";
-import { Toolbar } from "./toolbar";
+import { Toolbar, ToolbarGroup, ToolbarItem, ToolbarSeparator, ToolbarSubmitButton } from "./toolbar";
 
 const meta = {
   title: "Components/Toolbar",
@@ -40,30 +40,30 @@ export const Default: Story = {
       <div className="p-4 space-y-4">
         <div className="w-96 border rounded">
           <Toolbar>
-            <Toolbar.Group isFirst>
-              <Toolbar.Item icon={Undo} tooltip="Undo" />
-              <Toolbar.Item icon={Redo} tooltip="Redo" />
-            </Toolbar.Group>
-            <Toolbar.Group>
-              <Toolbar.Item icon={Bold} tooltip="Bold" />
-              <Toolbar.Item icon={Italic} tooltip="Italic" />
-              <Toolbar.Item icon={Underline} tooltip="Underline" />
-              <Toolbar.Item icon={Strikethrough} tooltip="Strikethrough" />
-            </Toolbar.Group>
-            <Toolbar.Group>
-              <Toolbar.Item icon={ListLayoutIcon} tooltip="Bullet ListLayoutIcon" />
-              <Toolbar.Item icon={ListOrdered} tooltip="Numbered ListLayoutIcon" />
-              <Toolbar.Item icon={Quote} tooltip="Quote" />
-            </Toolbar.Group>
-            <Toolbar.Group>
-              <Toolbar.Item icon={AlignLeft} tooltip="Align Left" />
-              <Toolbar.Item icon={AlignCenter} tooltip="Align Center" />
-              <Toolbar.Item icon={AlignRight} tooltip="Align Right" />
-            </Toolbar.Group>
-            <Toolbar.Group>
-              <Toolbar.Item icon={Link} tooltip="Link" />
-              <Toolbar.Item icon={Code} tooltip="Code" />
-            </Toolbar.Group>
+            <ToolbarGroup isFirst>
+              <ToolbarItem icon={Undo} tooltip="Undo" />
+              <ToolbarItem icon={Redo} tooltip="Redo" />
+            </ToolbarGroup>
+            <ToolbarGroup>
+              <ToolbarItem icon={Bold} tooltip="Bold" />
+              <ToolbarItem icon={Italic} tooltip="Italic" />
+              <ToolbarItem icon={Underline} tooltip="Underline" />
+              <ToolbarItem icon={Strikethrough} tooltip="Strikethrough" />
+            </ToolbarGroup>
+            <ToolbarGroup>
+              <ToolbarItem icon={ListLayoutIcon} tooltip="Bullet ListLayoutIcon" />
+              <ToolbarItem icon={ListOrdered} tooltip="Numbered ListLayoutIcon" />
+              <ToolbarItem icon={Quote} tooltip="Quote" />
+            </ToolbarGroup>
+            <ToolbarGroup>
+              <ToolbarItem icon={AlignLeft} tooltip="Align Left" />
+              <ToolbarItem icon={AlignCenter} tooltip="Align Center" />
+              <ToolbarItem icon={AlignRight} tooltip="Align Right" />
+            </ToolbarGroup>
+            <ToolbarGroup>
+              <ToolbarItem icon={Link} tooltip="Link" />
+              <ToolbarItem icon={Code} tooltip="Code" />
+            </ToolbarGroup>
           </Toolbar>
         </div>
       </div>
@@ -76,21 +76,21 @@ export const WithActiveStates: Story = {
     return (
       <div className="p-4">
         <Toolbar>
-          <Toolbar.Group isFirst>
-            <Toolbar.Item icon={Bold} tooltip="Bold" shortcut={["Cmd", "B"]} isActive />
-            <Toolbar.Item icon={Italic} tooltip="Italic" shortcut={["Cmd", "I"]} />
-            <Toolbar.Item icon={Underline} tooltip="Underline" shortcut={["Cmd", "U"]} isActive />
-          </Toolbar.Group>
-          <Toolbar.Group>
-            <Toolbar.Item icon={ListLayoutIcon} tooltip="Bullet ListLayoutIcon" />
-            <Toolbar.Item icon={ListOrdered} tooltip="Numbered ListLayoutIcon" isActive />
-            <Toolbar.Item icon={Quote} tooltip="Quote" />
-          </Toolbar.Group>
-          <Toolbar.Group>
-            <Toolbar.Item icon={AlignLeft} tooltip="Align Left" />
-            <Toolbar.Item icon={AlignCenter} tooltip="Align Center" isActive />
-            <Toolbar.Item icon={AlignRight} tooltip="Align Right" />
-          </Toolbar.Group>
+          <ToolbarGroup isFirst>
+            <ToolbarItem icon={Bold} tooltip="Bold" shortcut={["Cmd", "B"]} isActive />
+            <ToolbarItem icon={Italic} tooltip="Italic" shortcut={["Cmd", "I"]} />
+            <ToolbarItem icon={Underline} tooltip="Underline" shortcut={["Cmd", "U"]} isActive />
+          </ToolbarGroup>
+          <ToolbarGroup>
+            <ToolbarItem icon={ListLayoutIcon} tooltip="Bullet ListLayoutIcon" />
+            <ToolbarItem icon={ListOrdered} tooltip="Numbered ListLayoutIcon" isActive />
+            <ToolbarItem icon={Quote} tooltip="Quote" />
+          </ToolbarGroup>
+          <ToolbarGroup>
+            <ToolbarItem icon={AlignLeft} tooltip="Align Left" />
+            <ToolbarItem icon={AlignCenter} tooltip="Align Center" isActive />
+            <ToolbarItem icon={AlignRight} tooltip="Align Right" />
+          </ToolbarGroup>
         </Toolbar>
       </div>
     );
@@ -106,23 +106,23 @@ export const CommentToolbar: Story = {
           <Toolbar>
             {/* Access Specifier */}
             <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded border-[0.5px] border-custom-border-200 p-1">
-              <Toolbar.Item icon={Lock} tooltip="Private" isActive />
-              <Toolbar.Item icon={Globe2} tooltip="Public" />
+              <ToolbarItem icon={Lock} tooltip="Private" isActive />
+              <ToolbarItem icon={Globe2} tooltip="Public" />
             </div>
 
             <div className="flex w-full items-stretch justify-between gap-2 rounded border-[0.5px] border-custom-border-200 p-1">
               <div className="flex items-stretch">
-                <Toolbar.Group isFirst>
-                  <Toolbar.Item icon={Bold} tooltip="Bold" shortcut={["Cmd", "B"]} />
-                  <Toolbar.Item icon={Italic} tooltip="Italic" shortcut={["Cmd", "I"]} />
-                  <Toolbar.Item icon={Code} tooltip="Code" shortcut={["Cmd", "`"]} />
-                </Toolbar.Group>
-                <Toolbar.Group>
-                  <Toolbar.Item icon={ListLayoutIcon} tooltip="Bullet ListLayoutIcon" />
-                  <Toolbar.Item icon={ListOrdered} tooltip="Numbered ListLayoutIcon" />
-                </Toolbar.Group>
+                <ToolbarGroup isFirst>
+                  <ToolbarItem icon={Bold} tooltip="Bold" shortcut={["Cmd", "B"]} />
+                  <ToolbarItem icon={Italic} tooltip="Italic" shortcut={["Cmd", "I"]} />
+                  <ToolbarItem icon={Code} tooltip="Code" shortcut={["Cmd", "`"]} />
+                </ToolbarGroup>
+                <ToolbarGroup>
+                  <ToolbarItem icon={ListLayoutIcon} tooltip="Bullet ListLayoutIcon" />
+                  <ToolbarItem icon={ListOrdered} tooltip="Numbered ListLayoutIcon" />
+                </ToolbarGroup>
               </div>
-              <Toolbar.SubmitButton>Comment</Toolbar.SubmitButton>
+              <ToolbarSubmitButton>Comment</ToolbarSubmitButton>
             </div>
           </Toolbar>
         </div>

packages/propel/src/toolbar/toolbar.tsx

@@ -164,12 +164,5 @@ ToolbarItem.displayName = "ToolbarItem";
 ToolbarSeparator.displayName = "ToolbarSeparator";
 ToolbarSubmitButton.displayName = "ToolbarSubmitButton";
 
-// compound components
-const Toolbar = Object.assign(ToolbarRoot, {
-  Group: ToolbarGroup,
-  Item: ToolbarItem,
-  Separator: ToolbarSeparator,
-  SubmitButton: ToolbarSubmitButton,
-});
 
-export { Toolbar };
+export { ToolbarRoot as Toolbar, ToolbarGroup, ToolbarItem, ToolbarSeparator, ToolbarSubmitButton };