@dfosco/storyboard 0.5.0-alpha.0

package/src/core/lib/components/ui/searchable-list.jsx

@@ -0,0 +1,160 @@
+/**
+ * SearchableList — a filterable list with an auto-focused search input.
+ *
+ * Designed to work inside dropdown menus and popovers. Prevents printable-key
+ * events from bubbling so host menus (e.g. Radix typeahead) don't hijack input.
+ * Navigation keys (arrows, escape, tab) still bubble for menu keyboard nav.
+ *
+ * Usage:
+ *   <SearchableList
+ *     items={items}
+ *     filterFn={(item, query) => item.name.toLowerCase().includes(query)}
+ *     renderItem={(item) => <MenuItem key={item.id}>{item.name}</MenuItem>}
+ *     placeholder="Filter…"
+ *   />
+ */
+import { useState, useRef, useEffect, useMemo, useCallback, forwardRef } from 'react'
+import { Input } from './input/index.js'
+import { cn } from '../../utils/index.js'
+
+/** Keys that should always bubble to the parent menu for navigation. */
+const PASSTHROUGH_KEYS = new Set([
+  'Escape', 'Tab', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight',
+  'Home', 'End', 'Enter', 'PageUp', 'PageDown',
+])
+
+/**
+ * @param {Object} props
+ * @param {Array} props.items - Items to display and filter
+ * @param {(item: any, query: string) => boolean} props.filterFn - Filter predicate (query is pre-lowercased)
+ * @param {(item: any, index: number) => React.ReactNode} props.renderItem - Render each item
+ * @param {string} [props.placeholder='Search…'] - Input placeholder
+ * @param {string} [props.emptyMessage='No results'] - Shown when filter yields no results
+ * @param {string} [props.loadingMessage='Loading…'] - Shown while loading
+ * @param {boolean} [props.loading=false] - Whether items are still loading
+ * @param {React.ReactNode} [props.header] - Slot rendered between input and results (always visible)
+ * @param {boolean} [props.autoFocus=true] - Focus the input on mount
+ * @param {string} [props.className] - Wrapper className
+ * @param {string} [props.listClassName] - Scrollable results area className
+ * @param {React.RefObject} [props.inputRef] - External ref for the input element
+ */
+const SearchableList = forwardRef(function SearchableList(
+  {
+    items = [],
+    filterFn,
+    renderItem,
+    placeholder = 'Search…',
+    emptyMessage = 'No results',
+    loadingMessage = 'Loading…',
+    loading = false,
+    header,
+    autoFocus = true,
+    className,
+    listClassName,
+    inputRef: externalInputRef,
+  },
+  ref,
+) {
+  const [query, setQuery] = useState('')
+  const internalInputRef = useRef(null)
+  const inputRef = externalInputRef || internalInputRef
+  const listRef = useRef(null)
+
+  // Auto-focus the input on mount — double rAF lets the host menu
+  // finish its own focus management before we steal focus.
+  useEffect(() => {
+    if (!autoFocus) return
+    const outer = requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        inputRef.current?.focus()
+      })
+    })
+    return () => cancelAnimationFrame(outer)
+  }, [autoFocus])
+
+  const filteredItems = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    if (!q || !filterFn) return items
+    return items.filter((item) => filterFn(item, q))
+  }, [items, query, filterFn])
+
+  // Handle keyboard navigation between input and list.
+  // Printable keys are suppressed so Radix typeahead doesn't intercept them.
+  const handleKeyDown = useCallback((e) => {
+    // ArrowDown from input → focus first menu item in results
+    if (e.key === 'ArrowDown') {
+      const firstItem = listRef.current?.querySelector('[role="menuitem"]')
+      if (firstItem) {
+        e.preventDefault()
+        e.stopPropagation()
+        firstItem.focus()
+      }
+      return
+    }
+    // Tab from input → focus first menu item (keeps user in the dropdown)
+    if (e.key === 'Tab' && !e.shiftKey) {
+      const firstItem = listRef.current?.querySelector('[role="menuitem"]')
+      if (firstItem) {
+        e.preventDefault()
+        e.stopPropagation()
+        firstItem.focus()
+      }
+      return
+    }
+    if (!PASSTHROUGH_KEYS.has(e.key)) {
+      e.stopPropagation()
+    }
+  }, [])
+
+  // Shift+Tab from any list item → return focus to the input
+  // eslint-disable-next-line react-hooks/preserve-manual-memoization
+  const handleListKeyDown = useCallback((e) => {
+    if (e.key === 'Tab' && e.shiftKey) {
+      e.preventDefault()
+      e.stopPropagation()
+      inputRef.current?.focus()
+    }
+  }, [])
+
+  return (
+    <div ref={ref} className={cn('flex flex-col', className)}>
+      {/* Search input — pinned at top */}
+      <div
+        className="px-2 pt-1 pb-1.5"
+        onKeyDown={handleKeyDown}
+        onPointerDown={(e) => e.stopPropagation()}
+      >
+        <Input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder={placeholder}
+          autoComplete="off"
+          spellCheck={false}
+          className="h-9 text-xs rounded"
+          aria-label={placeholder}
+        />
+      </div>
+
+      {/* Optional header slot (e.g. "Create new…" button) — always visible */}
+      {header}
+
+      {/* Scrollable results area */}
+      <div ref={listRef} className={cn('overflow-y-auto', listClassName)} onKeyDown={handleListKeyDown}>
+        {loading ? (
+          <p className="px-2 py-3 text-xs text-muted-foreground text-center">{loadingMessage}</p>
+        ) : filteredItems.length > 0 ? (
+          filteredItems.map(renderItem)
+        ) : query.trim() ? (
+          <p className="px-2 py-3 text-xs text-muted-foreground text-center">{emptyMessage}</p>
+        ) : items.length === 0 ? (
+          <p className="px-2 py-3 text-xs text-muted-foreground text-center">No items</p>
+        ) : null}
+      </div>
+    </div>
+  )
+})
+
+export { SearchableList }
+export default SearchableList

package/src/core/lib/components/ui/select/index.js

@@ -0,0 +1,37 @@
+import Root from "./select.jsx";
+import Group from "./select-group.jsx";
+import Label from "./select-label.jsx";
+import Item from "./select-item.jsx";
+import Content from "./select-content.jsx";
+import Trigger from "./select-trigger.jsx";
+import Separator from "./select-separator.jsx";
+import ScrollDownButton from "./select-scroll-down-button.jsx";
+import ScrollUpButton from "./select-scroll-up-button.jsx";
+import GroupHeading from "./select-group-heading.jsx";
+import Portal from "./select-portal.jsx";
+
+export {
+Root,
+Group,
+Label,
+Item,
+Content,
+Trigger,
+Separator,
+ScrollDownButton,
+ScrollUpButton,
+GroupHeading,
+Portal,
+//
+Root as Select,
+Group as SelectGroup,
+Label as SelectLabel,
+Item as SelectItem,
+Content as SelectContent,
+Trigger as SelectTrigger,
+Separator as SelectSeparator,
+ScrollDownButton as SelectScrollDownButton,
+ScrollUpButton as SelectScrollUpButton,
+GroupHeading as SelectGroupHeading,
+Portal as SelectPortal,
+};

package/src/core/lib/components/ui/select/select-content.jsx

@@ -0,0 +1,30 @@
+import { forwardRef } from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import SelectScrollUpButton from "./select-scroll-up-button.jsx";
+import SelectScrollDownButton from "./select-scroll-down-button.jsx";
+import { cn } from "../../../utils/index.js";
+
+const SelectContent = forwardRef(function SelectContent({ className, children, sideOffset = 4, position = "popper", ...props }, ref) {
+return (
+<SelectPrimitive.Portal>
+<SelectPrimitive.Content
+ref={ref}
+data-slot="select-content"
+sideOffset={sideOffset}
+position={position}
+className={cn(
+"bg-popover text-popover-foreground 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 min-w-36 rounded-lg shadow-md ring-1 duration-100 relative isolate z-50 overflow-x-hidden overflow-y-auto",
+className
+)}
+{...props}
+>
+<SelectScrollUpButton />
+<SelectPrimitive.Viewport className="w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1">
+{children}
+</SelectPrimitive.Viewport>
+<SelectScrollDownButton />
+</SelectPrimitive.Content>
+</SelectPrimitive.Portal>
+);
+});
+export default SelectContent;

package/src/core/lib/components/ui/select/select-group-heading.jsx

@@ -0,0 +1,17 @@
+import { forwardRef } from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { cn } from "../../../utils/index.js";
+
+const SelectGroupHeading = forwardRef(function SelectGroupHeading({ className, children, ...props }, ref) {
+return (
+<SelectPrimitive.Label
+ref={ref}
+data-slot="select-group-heading"
+className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+{...props}
+>
+{children}
+</SelectPrimitive.Label>
+);
+});
+export default SelectGroupHeading;

package/src/core/lib/components/ui/select/select-group.jsx

@@ -0,0 +1,15 @@
+import { forwardRef } from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { cn } from "../../../utils/index.js";
+
+const SelectGroup = forwardRef(function SelectGroup({ className, ...props }, ref) {
+return (
+<SelectPrimitive.Group
+ref={ref}
+data-slot="select-group"
+className={cn("scroll-my-1 p-1", className)}
+{...props}
+/>
+);
+});
+export default SelectGroup;

package/src/core/lib/components/ui/select/select-item.jsx

@@ -0,0 +1,26 @@
+import { forwardRef } from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check } from "lucide-react";
+import { cn } from "../../../utils/index.js";
+
+const SelectItem = forwardRef(function SelectItem({ className, children, ...props }, ref) {
+return (
+<SelectPrimitive.Item
+ref={ref}
+data-slot="select-item"
+className={cn(
+"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 focus:bg-accent data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground focus:text-accent-foreground relative flex w-full 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 end-2 flex size-3.5 items-center justify-center">
+<SelectPrimitive.ItemIndicator>
+<Check className="cn-select-item-indicator-icon" />
+</SelectPrimitive.ItemIndicator>
+</span>
+<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+</SelectPrimitive.Item>
+);
+});
+export default SelectItem;

package/src/core/lib/components/ui/select/select-label.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const SelectLabel = forwardRef(function SelectLabel({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="select-label" className={cn("text-muted-foreground px-1.5 py-1 text-xs", className)} {...props}>
+{children}
+</div>
+);
+});
+export default SelectLabel;

package/src/core/lib/components/ui/select/select-portal.jsx

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

package/src/core/lib/components/ui/select/select-scroll-down-button.jsx

@@ -0,0 +1,18 @@
+import { forwardRef } from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../../utils/index.js";
+
+const SelectScrollDownButton = forwardRef(function SelectScrollDownButton({ className, ...props }, ref) {
+return (
+<SelectPrimitive.ScrollDownButton
+ref={ref}
+data-slot="select-scroll-down-button"
+className={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full", className)}
+{...props}
+>
+<ChevronDown />
+</SelectPrimitive.ScrollDownButton>
+);
+});
+export default SelectScrollDownButton;

package/src/core/lib/components/ui/select/select-scroll-up-button.jsx

@@ -0,0 +1,18 @@
+import { forwardRef } from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { ChevronUp } from "lucide-react";
+import { cn } from "../../../utils/index.js";
+
+const SelectScrollUpButton = forwardRef(function SelectScrollUpButton({ className, ...props }, ref) {
+return (
+<SelectPrimitive.ScrollUpButton
+ref={ref}
+data-slot="select-scroll-up-button"
+className={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full", className)}
+{...props}
+>
+<ChevronUp />
+</SelectPrimitive.ScrollUpButton>
+);
+});
+export default SelectScrollUpButton;

package/src/core/lib/components/ui/select/select-separator.jsx

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

package/src/core/lib/components/ui/select/select-trigger.jsx

@@ -0,0 +1,25 @@
+import { forwardRef } from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../../utils/index.js";
+
+const SelectTrigger = forwardRef(function SelectTrigger({ className, children, size = "default", ...props }, ref) {
+return (
+<SelectPrimitive.Trigger
+ref={ref}
+data-slot="select-trigger"
+data-size={size}
+className={cn(
+"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 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 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--sb--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+className
+)}
+{...props}
+>
+{children}
+<SelectPrimitive.Icon asChild>
+<ChevronDown className="text-muted-foreground size-4 pointer-events-none" />
+</SelectPrimitive.Icon>
+</SelectPrimitive.Trigger>
+);
+});
+export default SelectTrigger;

package/src/core/lib/components/ui/select/select.jsx

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

package/src/core/lib/components/ui/separator/index.js

@@ -0,0 +1,7 @@
+import Root from "./separator.jsx";
+
+export {
+Root,
+//
+Root as Separator,
+};

package/src/core/lib/components/ui/separator/separator.jsx

@@ -0,0 +1,22 @@
+import { forwardRef } from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "../../../utils/index.js";
+
+const Separator = forwardRef(function Separator({ className, orientation = "horizontal", decorative = true, "data-slot": dataSlot = "separator", ...props }, ref) {
+return (
+<SeparatorPrimitive.Root
+ref={ref}
+data-slot={dataSlot}
+decorative={decorative}
+orientation={orientation}
+className={cn(
+"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
+"data-[orientation=vertical]:h-full",
+className
+)}
+{...props}
+/>
+);
+});
+
+export default Separator;

package/src/core/lib/components/ui/sheet/index.js

@@ -0,0 +1,34 @@
+import Root from "./sheet.jsx";
+import Portal from "./sheet-portal.jsx";
+import Trigger from "./sheet-trigger.jsx";
+import Close from "./sheet-close.jsx";
+import Overlay from "./sheet-overlay.jsx";
+import Content from "./sheet-content.jsx";
+import Header from "./sheet-header.jsx";
+import Footer from "./sheet-footer.jsx";
+import Title from "./sheet-title.jsx";
+import Description from "./sheet-description.jsx";
+
+export {
+Root,
+Close,
+Trigger,
+Portal,
+Overlay,
+Content,
+Header,
+Footer,
+Title,
+Description,
+//
+Root as Sheet,
+Close as SheetClose,
+Trigger as SheetTrigger,
+Portal as SheetPortal,
+Overlay as SheetOverlay,
+Content as SheetContent,
+Header as SheetHeader,
+Footer as SheetFooter,
+Title as SheetTitle,
+Description as SheetDescription,
+};

package/src/core/lib/components/ui/sheet/sheet-close.jsx

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

package/src/core/lib/components/ui/sheet/sheet-content.jsx

@@ -0,0 +1,35 @@
+import { forwardRef } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import SheetOverlay from "./sheet-overlay.jsx";
+import { cn } from "../../../utils/index.js";
+import { Button } from "../button/index.js";
+import { X } from "lucide-react";
+
+const SheetContent = forwardRef(function SheetContent({ className, side = "right", showCloseButton = true, children, ...props }, ref) {
+return (
+<DialogPrimitive.Portal>
+<SheetOverlay />
+<DialogPrimitive.Content
+ref={ref}
+data-slot="sheet-content"
+data-side={side}
+className={cn(
+"bg-background fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[side=bottom]:data-[state=open]:slide-in-from-bottom-10 data-[side=left]:data-[state=open]:slide-in-from-left-10 data-[side=right]:data-[state=open]:slide-in-from-right-10 data-[side=top]:data-[state=open]:slide-in-from-top-10 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[side=bottom]:data-[state=closed]:slide-out-to-bottom-10 data-[side=left]:data-[state=closed]:slide-out-to-left-10 data-[side=right]:data-[state=closed]:slide-out-to-right-10 data-[side=top]:data-[state=closed]:slide-out-to-top-10",
+className
+)}
+{...props}
+>
+{children}
+{showCloseButton && (
+<DialogPrimitive.Close asChild data-slot="sheet-close">
+<Button variant="ghost" className="absolute top-3 right-3" size="icon-sm">
+<X />
+<span className="sr-only">Close</span>
+</Button>
+</DialogPrimitive.Close>
+)}
+</DialogPrimitive.Content>
+</DialogPrimitive.Portal>
+);
+});
+export default SheetContent;

package/src/core/lib/components/ui/sheet/sheet-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 SheetDescription = forwardRef(function SheetDescription({ className, ...props }, ref) {
+return (
+<DialogPrimitive.Description
+ref={ref}
+data-slot="sheet-description"
+className={cn("text-muted-foreground text-sm", className)}
+{...props}
+/>
+);
+});
+export default SheetDescription;

package/src/core/lib/components/ui/sheet/sheet-footer.jsx

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

package/src/core/lib/components/ui/sheet/sheet-header.jsx

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

package/src/core/lib/components/ui/sheet/sheet-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 SheetOverlay = forwardRef(function SheetOverlay({ className, ...props }, ref) {
+return (
+<DialogPrimitive.Overlay
+ref={ref}
+data-slot="sheet-overlay"
+className={cn("bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
+{...props}
+/>
+);
+});
+export default SheetOverlay;

package/src/core/lib/components/ui/sheet/sheet-portal.jsx

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

package/src/core/lib/components/ui/sheet/sheet-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 SheetTitle = forwardRef(function SheetTitle({ className, ...props }, ref) {
+return (
+<DialogPrimitive.Title
+ref={ref}
+data-slot="sheet-title"
+className={cn("text-foreground text-base font-medium", className)}
+{...props}
+/>
+);
+});
+export default SheetTitle;

package/src/core/lib/components/ui/sheet/sheet-trigger.jsx

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

package/src/core/lib/components/ui/sheet/sheet.jsx

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

package/src/core/lib/components/ui/textarea/index.js

@@ -0,0 +1,7 @@
+import Root from "./textarea.jsx";
+
+export {
+Root,
+//
+Root as Textarea,
+};

package/src/core/lib/components/ui/textarea/textarea.jsx

@@ -0,0 +1,18 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const Textarea = forwardRef(function Textarea({ className, "data-slot": dataSlot = "textarea", ...props }, ref) {
+return (
+<textarea
+ref={ref}
+data-slot={dataSlot}
+className={cn(
+"border-input dark:bg-input/30 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 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
+className
+)}
+{...props}
+/>
+);
+});
+
+export default Textarea;

package/src/core/lib/components/ui/toggle/index.js

@@ -0,0 +1,8 @@
+import Root, { toggleVariants } from "./toggle.jsx";
+
+export {
+toggleVariants,
+Root,
+//
+Root as Toggle,
+};