@dfosco/storyboard-core 4.2.0-beta.4 → 4.2.1

package/src/lib/components/ui/card/index.js

@@ -1,25 +1,25 @@
-import Root from "./card.svelte";
-import Content from "./card-content.svelte";
-import Description from "./card-description.svelte";
-import Footer from "./card-footer.svelte";
-import Header from "./card-header.svelte";
-import Title from "./card-title.svelte";
-import Action from "./card-action.svelte";
+import Root from "./card.jsx";
+import Content from "./card-content.jsx";
+import Description from "./card-description.jsx";
+import Footer from "./card-footer.jsx";
+import Header from "./card-header.jsx";
+import Title from "./card-title.jsx";
+import Action from "./card-action.jsx";
 
 export {
-	Root,
-	Content,
-	Description,
-	Footer,
-	Header,
-	Title,
-	Action,
-	//
-	Root as Card,
-	Content as CardContent,
-	Description as CardDescription,
-	Footer as CardFooter,
-	Header as CardHeader,
-	Title as CardTitle,
-	Action as CardAction,
-};
+Root,
+Content,
+Description,
+Footer,
+Header,
+Title,
+Action,
+//
+Root as Card,
+Content as CardContent,
+Description as CardDescription,
+Footer as CardFooter,
+Header as CardHeader,
+Title as CardTitle,
+Action as CardAction,
+};

package/src/lib/components/ui/checkbox/checkbox.jsx

@@ -0,0 +1,29 @@
+import { forwardRef } from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check, Minus } from "lucide-react";
+import { cn } from "../../../utils/index.js";
+
+const Checkbox = forwardRef(function Checkbox({ className, checked, onCheckedChange, ...props }, ref) {
+return (
+<CheckboxPrimitive.Root
+ref={ref}
+data-slot="checkbox"
+className={cn(
+"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
+className
+)}
+checked={checked}
+onCheckedChange={onCheckedChange}
+{...props}
+>
+<CheckboxPrimitive.Indicator
+data-slot="checkbox-indicator"
+className="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
+>
+{checked === "indeterminate" ? <Minus /> : <Check />}
+</CheckboxPrimitive.Indicator>
+</CheckboxPrimitive.Root>
+);
+});
+
+export default Checkbox;

package/src/lib/components/ui/checkbox/index.js

@@ -1,6 +1,6 @@
-import Root from "./checkbox.svelte";
+import Root from "./checkbox.jsx";
 export {
-	Root,
-	//
-	Root as Checkbox,
-};
+Root,
+//
+Root as Checkbox,
+};

package/src/lib/components/ui/collapsible/collapsible-content.jsx

@@ -0,0 +1,7 @@
+import { forwardRef } from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const CollapsibleContent = forwardRef(function CollapsibleContent({ ...props }, ref) {
+return <CollapsiblePrimitive.Content ref={ref} data-slot="collapsible-content" {...props} />;
+});
+export default CollapsibleContent;

package/src/lib/components/ui/collapsible/collapsible-trigger.jsx

@@ -0,0 +1,7 @@
+import { forwardRef } from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const CollapsibleTrigger = forwardRef(function CollapsibleTrigger({ ...props }, ref) {
+return <CollapsiblePrimitive.Trigger ref={ref} data-slot="collapsible-trigger" {...props} />;
+});
+export default CollapsibleTrigger;

package/src/lib/components/ui/collapsible/collapsible.jsx

@@ -0,0 +1,7 @@
+import { forwardRef } from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = forwardRef(function Collapsible({ ...props }, ref) {
+return <CollapsiblePrimitive.Root ref={ref} data-slot="collapsible" {...props} />;
+});
+export default Collapsible;

package/src/lib/components/ui/collapsible/index.js

@@ -1,13 +1,13 @@
-import Root from "./collapsible.svelte";
-import Trigger from "./collapsible-trigger.svelte";
-import Content from "./collapsible-content.svelte";
+import Root from "./collapsible.jsx";
+import Trigger from "./collapsible-trigger.jsx";
+import Content from "./collapsible-content.jsx";
 
 export {
-	Root,
-	Content,
-	Trigger,
-	//
-	Root as Collapsible,
-	Content as CollapsibleContent,
-	Trigger as CollapsibleTrigger,
-};
+Root,
+Content,
+Trigger,
+//
+Root as Collapsible,
+Content as CollapsibleContent,
+Trigger as CollapsibleTrigger,
+};

package/src/lib/components/ui/dialog/dialog-close.jsx

@@ -0,0 +1,7 @@
+import { forwardRef } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+
+const DialogClose = forwardRef(function DialogClose({ type = "button", ...props }, ref) {
+return <DialogPrimitive.Close ref={ref} data-slot="dialog-close" type={type} {...props} />;
+});
+export default DialogClose;

package/src/lib/components/ui/dialog/dialog-content.jsx

@@ -0,0 +1,34 @@
+import { forwardRef } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import DialogOverlay from "./dialog-overlay.jsx";
+import { cn } from "../../../utils/index.js";
+import { Button } from "../../../components/ui/button/index.js";
+import { X } from "lucide-react";
+
+const DialogContent = forwardRef(function DialogContent({ className, children, showCloseButton = true, ...props }, ref) {
+return (
+<DialogPrimitive.Portal>
+<DialogOverlay />
+<DialogPrimitive.Content
+ref={ref}
+data-slot="dialog-content"
+className={cn(
+"font-sans bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+className
+)}
+{...props}
+>
+{children}
+{showCloseButton && (
+<DialogPrimitive.Close asChild data-slot="dialog-close">
+<Button variant="ghost" className="absolute top-2 right-2" size="icon-sm">
+<X />
+<span className="sr-only">Close</span>
+</Button>
+</DialogPrimitive.Close>
+)}
+</DialogPrimitive.Content>
+</DialogPrimitive.Portal>
+);
+});
+export default DialogContent;

package/src/lib/components/ui/dialog/dialog-description.jsx

@@ -0,0 +1,15 @@
+import { forwardRef } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cn } from "../../../utils/index.js";
+
+const DialogDescription = forwardRef(function DialogDescription({ className, ...props }, ref) {
+return (
+<DialogPrimitive.Description
+ref={ref}
+data-slot="dialog-description"
+className={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className)}
+{...props}
+/>
+);
+});
+export default DialogDescription;

package/src/lib/components/ui/dialog/dialog-footer.jsx

@@ -0,0 +1,23 @@
+import { forwardRef } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cn } from "../../../utils/index.js";
+import { Button } from "../../../components/ui/button/index.js";
+
+const DialogFooter = forwardRef(function DialogFooter({ className, children, showCloseButton = false, ...props }, ref) {
+return (
+<div
+ref={ref}
+data-slot="dialog-footer"
+className={cn("bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+{...props}
+>
+{children}
+{showCloseButton && (
+<DialogPrimitive.Close asChild>
+<Button variant="outline">Close</Button>
+</DialogPrimitive.Close>
+)}
+</div>
+);
+});
+export default DialogFooter;

package/src/lib/components/ui/dialog/dialog-header.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const DialogHeader = forwardRef(function DialogHeader({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="dialog-header" className={cn("gap-2 flex flex-col", className)} {...props}>
+{children}
+</div>
+);
+});
+export default DialogHeader;

package/src/lib/components/ui/dialog/dialog-overlay.jsx

@@ -0,0 +1,15 @@
+import { forwardRef } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cn } from "../../../utils/index.js";
+
+const DialogOverlay = forwardRef(function DialogOverlay({ className, ...props }, ref) {
+return (
+<DialogPrimitive.Overlay
+ref={ref}
+data-slot="dialog-overlay"
+className={cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50", className)}
+{...props}
+/>
+);
+});
+export default DialogOverlay;

package/src/lib/components/ui/dialog/dialog-portal.jsx

@@ -0,0 +1,4 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+export default function DialogPortal(props) {
+return <DialogPrimitive.Portal {...props} />;
+}

package/src/lib/components/ui/dialog/dialog-title.jsx

@@ -0,0 +1,15 @@
+import { forwardRef } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cn } from "../../../utils/index.js";
+
+const DialogTitle = forwardRef(function DialogTitle({ className, ...props }, ref) {
+return (
+<DialogPrimitive.Title
+ref={ref}
+data-slot="dialog-title"
+className={cn("text-base leading-none font-medium", className)}
+{...props}
+/>
+);
+});
+export default DialogTitle;

package/src/lib/components/ui/dialog/dialog-trigger.jsx

@@ -0,0 +1,7 @@
+import { forwardRef } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+
+const DialogTrigger = forwardRef(function DialogTrigger({ type = "button", ...props }, ref) {
+return <DialogPrimitive.Trigger ref={ref} data-slot="dialog-trigger" type={type} {...props} />;
+});
+export default DialogTrigger;

package/src/lib/components/ui/dialog/dialog.jsx

@@ -0,0 +1,4 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+export default function Dialog({ children, ...props }) {
+return <DialogPrimitive.Root {...props}>{children}</DialogPrimitive.Root>;
+}

package/src/lib/components/ui/dialog/index.js

@@ -1,34 +1,34 @@
-import Root from "./dialog.svelte";
-import Portal from "./dialog-portal.svelte";
-import Title from "./dialog-title.svelte";
-import Footer from "./dialog-footer.svelte";
-import Header from "./dialog-header.svelte";
-import Overlay from "./dialog-overlay.svelte";
-import Content from "./dialog-content.svelte";
-import Description from "./dialog-description.svelte";
-import Trigger from "./dialog-trigger.svelte";
-import Close from "./dialog-close.svelte";
+import Root from "./dialog.jsx";
+import Portal from "./dialog-portal.jsx";
+import Title from "./dialog-title.jsx";
+import Footer from "./dialog-footer.jsx";
+import Header from "./dialog-header.jsx";
+import Overlay from "./dialog-overlay.jsx";
+import Content from "./dialog-content.jsx";
+import Description from "./dialog-description.jsx";
+import Trigger from "./dialog-trigger.jsx";
+import Close from "./dialog-close.jsx";
 
 export {
-	Root,
-	Title,
-	Portal,
-	Footer,
-	Header,
-	Trigger,
-	Overlay,
-	Content,
-	Description,
-	Close,
-	//
-	Root as Dialog,
-	Title as DialogTitle,
-	Portal as DialogPortal,
-	Footer as DialogFooter,
-	Header as DialogHeader,
-	Trigger as DialogTrigger,
-	Overlay as DialogOverlay,
-	Content as DialogContent,
-	Description as DialogDescription,
-	Close as DialogClose,
-};
+Root,
+Title,
+Portal,
+Footer,
+Header,
+Trigger,
+Overlay,
+Content,
+Description,
+Close,
+//
+Root as Dialog,
+Title as DialogTitle,
+Portal as DialogPortal,
+Footer as DialogFooter,
+Header as DialogHeader,
+Trigger as DialogTrigger,
+Overlay as DialogOverlay,
+Content as DialogContent,
+Description as DialogDescription,
+Close as DialogClose,
+};

package/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.jsx

@@ -0,0 +1,8 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
+// Radix doesn't have a CheckboxGroup — use a plain Group as container
+const DropdownMenuCheckboxGroup = forwardRef(function DropdownMenuCheckboxGroup(props, ref) {
+return <DropdownMenuPrimitive.Group ref={ref} data-slot="dropdown-menu-checkbox-group" {...props} />;
+});
+export default DropdownMenuCheckboxGroup;

package/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.jsx

@@ -0,0 +1,30 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, Minus } from "lucide-react";
+import { cn } from "../../../utils/index.js";
+
+const DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem({ className, children, checked, ...props }, ref) {
+return (
+<DropdownMenuPrimitive.CheckboxItem
+ref={ref}
+data-slot="dropdown-menu-checkbox-item"
+className={cn(
+"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-[4px] py-2 pr-8 pl-2.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+className
+)}
+checked={checked}
+{...props}
+>
+<span
+className="absolute right-2 flex items-center justify-center pointer-events-none"
+data-slot="dropdown-menu-checkbox-item-indicator"
+>
+<DropdownMenuPrimitive.ItemIndicator>
+{checked === "indeterminate" ? <Minus /> : <Check />}
+</DropdownMenuPrimitive.ItemIndicator>
+</span>
+{children}
+</DropdownMenuPrimitive.CheckboxItem>
+);
+});
+export default DropdownMenuCheckboxItem;

package/src/lib/components/ui/dropdown-menu/dropdown-menu-content.jsx

@@ -0,0 +1,22 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "../../../utils/index.js";
+
+const DropdownMenuContent = forwardRef(function DropdownMenuContent({ className, sideOffset = 8, align = "start", ...props }, ref) {
+return (
+<DropdownMenuPrimitive.Portal>
+<DropdownMenuPrimitive.Content
+ref={ref}
+data-slot="dropdown-menu-content"
+sideOffset={sideOffset}
+align={align}
+className={cn(
+"font-sans data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 z-[10000] bg-popover border-3 border-border text-popover-foreground fill-popover-foreground min-w-40 rounded-xl p-2 shadow-xl duration-100 overflow-x-hidden overflow-y-auto",
+className
+)}
+{...props}
+/>
+</DropdownMenuPrimitive.Portal>
+);
+});
+export default DropdownMenuContent;

package/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.jsx

@@ -0,0 +1,16 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "../../../utils/index.js";
+
+const DropdownMenuGroupHeading = forwardRef(function DropdownMenuGroupHeading({ className, inset, ...props }, ref) {
+return (
+<DropdownMenuPrimitive.Label
+ref={ref}
+data-slot="dropdown-menu-group-heading"
+data-inset={inset}
+className={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8", className)}
+{...props}
+/>
+);
+});
+export default DropdownMenuGroupHeading;

package/src/lib/components/ui/dropdown-menu/dropdown-menu-group.jsx

@@ -0,0 +1,7 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
+const DropdownMenuGroup = forwardRef(function DropdownMenuGroup(props, ref) {
+return <DropdownMenuPrimitive.Group ref={ref} data-slot="dropdown-menu-group" {...props} />;
+});
+export default DropdownMenuGroup;

package/src/lib/components/ui/dropdown-menu/dropdown-menu-item.jsx

@@ -0,0 +1,20 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "../../../utils/index.js";
+
+const DropdownMenuItem = forwardRef(function DropdownMenuItem({ className, inset, variant = "default", ...props }, ref) {
+return (
+<DropdownMenuPrimitive.Item
+ref={ref}
+data-slot="dropdown-menu-item"
+data-inset={inset}
+data-variant={variant}
+className={cn(
+"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-[4px] px-2.5 py-2 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+className
+)}
+{...props}
+/>
+);
+});
+export default DropdownMenuItem;

package/src/lib/components/ui/dropdown-menu/dropdown-menu-label.jsx

@@ -0,0 +1,17 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const DropdownMenuLabel = forwardRef(function DropdownMenuLabel({ className, inset, children, ...props }, ref) {
+return (
+<div
+ref={ref}
+data-slot="dropdown-menu-label"
+data-inset={inset}
+className={cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7 data-[inset]:pl-8", className)}
+{...props}
+>
+{children}
+</div>
+);
+});
+export default DropdownMenuLabel;

package/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.jsx

@@ -0,0 +1,4 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+export default function DropdownMenuPortal(props) {
+return <DropdownMenuPrimitive.Portal {...props} />;
+}

package/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.jsx

@@ -0,0 +1,7 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
+const DropdownMenuRadioGroup = forwardRef(function DropdownMenuRadioGroup(props, ref) {
+return <DropdownMenuPrimitive.RadioGroup ref={ref} data-slot="dropdown-menu-radio-group" {...props} />;
+});
+export default DropdownMenuRadioGroup;

package/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.jsx

@@ -0,0 +1,29 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check } from "lucide-react";
+import { cn } from "../../../utils/index.js";
+
+const DropdownMenuRadioItem = forwardRef(function DropdownMenuRadioItem({ className, children, ...props }, ref) {
+return (
+<DropdownMenuPrimitive.RadioItem
+ref={ref}
+data-slot="dropdown-menu-radio-item"
+className={cn(
+"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+className
+)}
+{...props}
+>
+<span
+className="absolute right-2 flex items-center justify-center pointer-events-none"
+data-slot="dropdown-menu-radio-item-indicator"
+>
+<DropdownMenuPrimitive.ItemIndicator>
+<Check />
+</DropdownMenuPrimitive.ItemIndicator>
+</span>
+{children}
+</DropdownMenuPrimitive.RadioItem>
+);
+});
+export default DropdownMenuRadioItem;

package/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.jsx

@@ -0,0 +1,15 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "../../../utils/index.js";
+
+const DropdownMenuSeparator = forwardRef(function DropdownMenuSeparator({ className, ...props }, ref) {
+return (
+<DropdownMenuPrimitive.Separator
+ref={ref}
+data-slot="dropdown-menu-separator"
+className={cn("bg-border -mx-1.5 my-1 h-px", className)}
+{...props}
+/>
+);
+});
+export default DropdownMenuSeparator;

package/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.jsx

@@ -0,0 +1,16 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const DropdownMenuShortcut = forwardRef(function DropdownMenuShortcut({ className, children, ...props }, ref) {
+return (
+<span
+ref={ref}
+data-slot="dropdown-menu-shortcut"
+className={cn("text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
+{...props}
+>
+{children}
+</span>
+);
+});
+export default DropdownMenuShortcut;

package/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.jsx

@@ -0,0 +1,15 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "../../../utils/index.js";
+
+const DropdownMenuSubContent = forwardRef(function DropdownMenuSubContent({ className, ...props }, ref) {
+return (
+<DropdownMenuPrimitive.SubContent
+ref={ref}
+data-slot="dropdown-menu-sub-content"
+className={cn("font-sans data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[10000] bg-popover border-3 border-border text-popover-foreground fill-popover-foreground min-w-[96px] rounded-xl p-2 shadow-xl duration-100 w-auto", className)}
+{...props}
+/>
+);
+});
+export default DropdownMenuSubContent;

package/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.jsx

@@ -0,0 +1,23 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../../../utils/index.js";
+
+const DropdownMenuSubTrigger = forwardRef(function DropdownMenuSubTrigger({ className, inset, children, ...props }, ref) {
+return (
+<DropdownMenuPrimitive.SubTrigger
+ref={ref}
+data-slot="dropdown-menu-sub-trigger"
+data-inset={inset}
+className={cn(
+"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-2.5 py-2 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+className
+)}
+{...props}
+>
+{children}
+<ChevronRight className="ml-auto" />
+</DropdownMenuPrimitive.SubTrigger>
+);
+});
+export default DropdownMenuSubTrigger;

package/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.jsx

@@ -0,0 +1,4 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+export default function DropdownMenuSub({ children, ...props }) {
+return <DropdownMenuPrimitive.Sub {...props}>{children}</DropdownMenuPrimitive.Sub>;
+}

package/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.jsx

@@ -0,0 +1,7 @@
+import { forwardRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
+const DropdownMenuTrigger = forwardRef(function DropdownMenuTrigger({ children, ...props }, ref) {
+return <DropdownMenuPrimitive.Trigger ref={ref} asChild {...props}>{children}</DropdownMenuPrimitive.Trigger>;
+});
+export default DropdownMenuTrigger;

package/src/lib/components/ui/dropdown-menu/dropdown-menu.jsx

@@ -0,0 +1,4 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+export default function DropdownMenu({ children, ...props }) {
+return <DropdownMenuPrimitive.Root {...props}>{children}</DropdownMenuPrimitive.Root>;
+}