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

package/src/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/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/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/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/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/lib/components/ui/separator/index.js

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

package/src/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/lib/components/ui/sheet/index.js

@@ -1,34 +1,34 @@
-import Root from "./sheet.svelte";
-import Portal from "./sheet-portal.svelte";
-import Trigger from "./sheet-trigger.svelte";
-import Close from "./sheet-close.svelte";
-import Overlay from "./sheet-overlay.svelte";
-import Content from "./sheet-content.svelte";
-import Header from "./sheet-header.svelte";
-import Footer from "./sheet-footer.svelte";
-import Title from "./sheet-title.svelte";
-import Description from "./sheet-description.svelte";
+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,
-};
+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/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/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 "../../../components/ui/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/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/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/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/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/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/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/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/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/lib/components/ui/textarea/index.js

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

package/src/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/lib/components/ui/toggle/index.js

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

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

@@ -0,0 +1,36 @@
+import { forwardRef } from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cn } from "../../../utils/index.js";
+import { tv } from "tailwind-variants";
+
+export const toggleVariants = tv({
+base: "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+variants: {
+variant: {
+default: "bg-transparent",
+outline: "border-input hover:bg-muted border bg-transparent",
+},
+size: {
+default: "h-8 min-w-8 px-2",
+sm: "h-7 min-w-7 rounded-[min(var(--sb--radius-md),12px)] px-1.5 text-[0.8rem]",
+lg: "h-9 min-w-9 px-2.5",
+},
+},
+defaultVariants: {
+variant: "default",
+size: "default",
+},
+});
+
+const Toggle = forwardRef(function Toggle({ className, variant = "default", size = "default", ...props }, ref) {
+return (
+<TogglePrimitive.Root
+ref={ref}
+data-slot="toggle"
+className={cn(toggleVariants({ variant, size }), className)}
+{...props}
+/>
+);
+});
+
+export default Toggle;

package/src/lib/components/ui/toggle-group/index.js

@@ -1,10 +1,10 @@
-import Root from "./toggle-group.svelte";
-import Item from "./toggle-group-item.svelte";
+import Root from "./toggle-group.jsx";
+import Item from "./toggle-group-item.jsx";
 
 export {
-	Root,
-	Item,
-	//
-	Root as ToggleGroup,
-	Item as ToggleGroupItem,
-};
+Root,
+Item,
+//
+Root as ToggleGroup,
+Item as ToggleGroupItem,
+};

package/src/lib/components/ui/toggle-group/toggle-group-item.jsx

@@ -0,0 +1,29 @@
+import { forwardRef } from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { useToggleGroupCtx } from "./toggle-group.jsx";
+import { cn } from "../../../utils/index.js";
+import { toggleVariants } from "../../../components/ui/toggle/index.js";
+
+const ToggleGroupItem = forwardRef(function ToggleGroupItem({ className, variant, size, ...props }, ref) {
+const ctx = useToggleGroupCtx();
+
+return (
+<ToggleGroupPrimitive.Item
+ref={ref}
+data-slot="toggle-group-item"
+data-variant={ctx.variant || variant}
+data-size={ctx.size || size}
+data-spacing={ctx.spacing}
+className={cn(
+"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+toggleVariants({
+variant: ctx.variant || variant,
+size: ctx.size || size,
+}),
+className
+)}
+{...props}
+/>
+);
+});
+export default ToggleGroupItem;

package/src/lib/components/ui/toggle-group/toggle-group.jsx

@@ -0,0 +1,43 @@
+import { forwardRef, createContext, useContext, useMemo } from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { cn } from "../../../utils/index.js";
+
+export const ToggleGroupContext = createContext({
+variant: "default",
+size: "default",
+spacing: 0,
+orientation: "horizontal",
+});
+
+export function useToggleGroupCtx() {
+return useContext(ToggleGroupContext);
+}
+
+const ToggleGroup = forwardRef(function ToggleGroup(
+{ className, variant = "default", size = "default", spacing = 0, orientation = "horizontal", children, ...props },
+ref
+) {
+const ctx = useMemo(() => ({ variant, size, spacing, orientation }), [variant, size, spacing, orientation]);
+
+return (
+<ToggleGroupContext.Provider value={ctx}>
+<ToggleGroupPrimitive.Root
+ref={ref}
+orientation={orientation}
+data-slot="toggle-group"
+data-variant={variant}
+data-size={size}
+data-spacing={spacing}
+style={{ '--sb--gap': spacing }}
+className={cn(
+"rounded-lg data-[size=sm]:rounded-[min(var(--sb--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--sb--gap))] data-vertical:flex-col data-vertical:items-stretch",
+className
+)}
+{...props}
+>
+{children}
+</ToggleGroupPrimitive.Root>
+</ToggleGroupContext.Provider>
+);
+});
+export default ToggleGroup;

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

@@ -1,3 +1,3 @@
-export { default as Root } from "./tooltip.svelte";
-export { default as Trigger } from "./tooltip-trigger.svelte";
-export { default as Content } from "./tooltip-content.svelte";
+export { default as Root } from "./tooltip.jsx";
+export { default as Trigger } from "./tooltip-trigger.jsx";
+export { default as Content } from "./tooltip-content.jsx";

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

@@ -0,0 +1,21 @@
+import { forwardRef } from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "../../../utils/index.js";
+
+const TooltipContent = forwardRef(function TooltipContent({ className, sideOffset = 8, ...props }, ref) {
+return (
+<TooltipPrimitive.Portal>
+<TooltipPrimitive.Content
+ref={ref}
+data-slot="tooltip-content"
+sideOffset={sideOffset}
+className={cn(
+"font-sans bg-slate-700 text-white text-xs px-2.5 py-1.5 rounded-lg shadow-lg z-[10001] animate-in fade-in-0 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",
+className
+)}
+{...props}
+/>
+</TooltipPrimitive.Portal>
+);
+});
+export default TooltipContent;

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

@@ -0,0 +1,23 @@
+import { forwardRef } from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+const TooltipTrigger = forwardRef(function TooltipTrigger({ asChild, children, ...props }, ref) {
+if (asChild) {
+return (
+<TooltipPrimitive.Trigger ref={ref} asChild {...props}>
+{children}
+</TooltipPrimitive.Trigger>
+);
+}
+return (
+<TooltipPrimitive.Trigger ref={ref} asChild {...props}>
+<span
+tabIndex={-1}
+style={{ display: "inline-flex" }}
+>
+{children}
+</span>
+</TooltipPrimitive.Trigger>
+);
+});
+export default TooltipTrigger;

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

@@ -0,0 +1,11 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+export default function Tooltip({ children, ...props }) {
+return (
+<TooltipPrimitive.Provider delayDuration={50}>
+<TooltipPrimitive.Root {...props}>
+{children}
+</TooltipPrimitive.Root>
+</TooltipPrimitive.Provider>
+);
+}

package/src/lib/components/ui/trigger-button/index.js

@@ -1,6 +1,6 @@
-import Root from "./trigger-button.svelte";
+import Root from "./trigger-button.jsx";
 
 export {
-  Root,
-  Root as TriggerButton,
+Root,
+Root as TriggerButton,
 };

package/src/lib/components/ui/trigger-button/trigger-button.css

@@ -0,0 +1,38 @@
+[data-trigger-button] {
+  display: inline-flex;
+  position: relative;
+}
+[data-trigger-button] [data-slot="button-wrapper"] {
+  --sb--sc-border-color: var(--sb--trigger-border, var(--color-slate-400));
+  --sb--sc-border-width: var(--sb--trigger-border-width, 3px);
+}
+/* Accent-colored border/gap on focus — follows the superellipse shape */
+[data-trigger-button] [data-slot="button-wrapper"]:has([data-slot="button"]:focus-visible) {
+  --sb--sc-border-color: hsl(212 92% 45%);
+}
+[data-trigger-button] [data-slot="button"] {
+  background-color: var(--sb--trigger-bg, var(--color-slate-100));
+  color: var(--sb--trigger-text, var(--color-slate-600));
+}
+[data-trigger-button] [data-slot="button"]:hover,
+[data-trigger-button] [data-slot="button"]:focus-visible,
+[data-trigger-button] [data-slot="button"][aria-expanded="true"],
+[data-trigger-button][data-active] [data-slot="button"] {
+  background-color: var(--sb--trigger-bg-hover, var(--color-slate-300));
+}
+
+/* Inactive: disabled-looking, no interaction */
+[data-trigger-button][data-inactive] {
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+/* Dimmed: reduced visibility, interactive on hover/focus */
+[data-trigger-button][data-dimmed] {
+  opacity: 0.3;
+  transition: opacity 200ms;
+}
+[data-trigger-button][data-dimmed]:hover,
+[data-trigger-button][data-dimmed]:focus-within {
+  opacity: 1;
+}