@dfosco/storyboard-core 4.2.0-beta.2 → 4.2.0-beta.21

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>;
+}

package/src/lib/components/ui/dropdown-menu/index.js

@@ -1,54 +1,54 @@
-import Root from "./dropdown-menu.svelte";
-import Sub from "./dropdown-menu-sub.svelte";
-import CheckboxGroup from "./dropdown-menu-checkbox-group.svelte";
-import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
-import Content from "./dropdown-menu-content.svelte";
-import Group from "./dropdown-menu-group.svelte";
-import Item from "./dropdown-menu-item.svelte";
-import Label from "./dropdown-menu-label.svelte";
-import RadioGroup from "./dropdown-menu-radio-group.svelte";
-import RadioItem from "./dropdown-menu-radio-item.svelte";
-import Separator from "./dropdown-menu-separator.svelte";
-import Shortcut from "./dropdown-menu-shortcut.svelte";
-import Trigger from "./dropdown-menu-trigger.svelte";
-import SubContent from "./dropdown-menu-sub-content.svelte";
-import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
-import GroupHeading from "./dropdown-menu-group-heading.svelte";
-import Portal from "./dropdown-menu-portal.svelte";
+import Root from "./dropdown-menu.jsx";
+import Sub from "./dropdown-menu-sub.jsx";
+import CheckboxGroup from "./dropdown-menu-checkbox-group.jsx";
+import CheckboxItem from "./dropdown-menu-checkbox-item.jsx";
+import Content from "./dropdown-menu-content.jsx";
+import Group from "./dropdown-menu-group.jsx";
+import Item from "./dropdown-menu-item.jsx";
+import Label from "./dropdown-menu-label.jsx";
+import RadioGroup from "./dropdown-menu-radio-group.jsx";
+import RadioItem from "./dropdown-menu-radio-item.jsx";
+import Separator from "./dropdown-menu-separator.jsx";
+import Shortcut from "./dropdown-menu-shortcut.jsx";
+import Trigger from "./dropdown-menu-trigger.jsx";
+import SubContent from "./dropdown-menu-sub-content.jsx";
+import SubTrigger from "./dropdown-menu-sub-trigger.jsx";
+import GroupHeading from "./dropdown-menu-group-heading.jsx";
+import Portal from "./dropdown-menu-portal.jsx";
 
 export {
-	CheckboxGroup,
-	CheckboxItem,
-	Content,
-	Portal,
-	Root as DropdownMenu,
-	CheckboxGroup as DropdownMenuCheckboxGroup,
-	CheckboxItem as DropdownMenuCheckboxItem,
-	Content as DropdownMenuContent,
-	Portal as DropdownMenuPortal,
-	Group as DropdownMenuGroup,
-	Item as DropdownMenuItem,
-	Label as DropdownMenuLabel,
-	RadioGroup as DropdownMenuRadioGroup,
-	RadioItem as DropdownMenuRadioItem,
-	Separator as DropdownMenuSeparator,
-	Shortcut as DropdownMenuShortcut,
-	Sub as DropdownMenuSub,
-	SubContent as DropdownMenuSubContent,
-	SubTrigger as DropdownMenuSubTrigger,
-	Trigger as DropdownMenuTrigger,
-	GroupHeading as DropdownMenuGroupHeading,
-	Group,
-	GroupHeading,
-	Item,
-	Label,
-	RadioGroup,
-	RadioItem,
-	Root,
-	Separator,
-	Shortcut,
-	Sub,
-	SubContent,
-	SubTrigger,
-	Trigger,
-};
+CheckboxGroup,
+CheckboxItem,
+Content,
+Portal,
+Root as DropdownMenu,
+CheckboxGroup as DropdownMenuCheckboxGroup,
+CheckboxItem as DropdownMenuCheckboxItem,
+Content as DropdownMenuContent,
+Portal as DropdownMenuPortal,
+Group as DropdownMenuGroup,
+Item as DropdownMenuItem,
+Label as DropdownMenuLabel,
+RadioGroup as DropdownMenuRadioGroup,
+RadioItem as DropdownMenuRadioItem,
+Separator as DropdownMenuSeparator,
+Shortcut as DropdownMenuShortcut,
+Sub as DropdownMenuSub,
+SubContent as DropdownMenuSubContent,
+SubTrigger as DropdownMenuSubTrigger,
+Trigger as DropdownMenuTrigger,
+GroupHeading as DropdownMenuGroupHeading,
+Group,
+GroupHeading,
+Item,
+Label,
+RadioGroup,
+RadioItem,
+Root,
+Separator,
+Shortcut,
+Sub,
+SubContent,
+SubTrigger,
+Trigger,
+};

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

@@ -1,7 +1,7 @@
-import Root from "./input.svelte";
+import Root from "./input.jsx";
 
 export {
-	Root,
-	//
-	Root as Input,
-};
+Root,
+//
+Root as Input,
+};

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

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const Input = forwardRef(function Input({ className, type, "data-slot": dataSlot = "input", ...props }, ref) {
+return (
+<input
+ref={ref}
+data-slot={dataSlot}
+type={type}
+className={cn(
+"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+className
+)}
+{...props}
+/>
+);
+});
+
+export default Input;

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

@@ -1,7 +1,7 @@
-import Root from "./label.svelte";
+import Root from "./label.jsx";
 
 export {
-	Root,
-	//
-	Root as Label,
-};
+Root,
+//
+Root as Label,
+};

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

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cn } from "../../../utils/index.js";
+
+const Label = forwardRef(function Label({ className, ...props }, ref) {
+return (
+<LabelPrimitive.Root
+ref={ref}
+data-slot="label"
+className={cn(
+"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
+className
+)}
+{...props}
+/>
+);
+});
+
+export default Label;