@litelens/design-system 1.0.3

package/dist/chunk-FJE2X4E6.js

@@ -0,0 +1,967 @@
+import { Button } from './chunk-NPDXDIXD.js';
+import { useCopyToClipboard } from './chunk-3ZL7QROP.js';
+import { SplitAndHighlightText } from './chunk-NFJMUQY6.js';
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon, CopyIcon } from './chunk-7YPL4ZPM.js';
+import { cn } from './chunk-QUNCRUSO.js';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Collapsible as Collapsible$1 } from '@base-ui/react/collapsible';
+import { ContextMenu as ContextMenu$1 } from '@base-ui/react/context-menu';
+import { Drawer as Drawer$1 } from '@base-ui/react/drawer';
+import { Select as Select$1 } from '@base-ui/react/select';
+import { Separator as Separator$1 } from '@base-ui/react/separator';
+import { Slider as Slider$1 } from '@base-ui/react/slider';
+import { useTheme } from 'next-themes';
+import { Toaster as Toaster$1 } from 'sonner';
+import { Switch as Switch$1 } from '@base-ui/react/switch';
+import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+
+var CHECKBOX_STATE_CLASSES = {
+  default: "",
+  error: "border-destructive aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+  success: "border-success data-checked:border-success data-checked:bg-success",
+  warning: "border-warning data-checked:border-warning data-checked:bg-warning",
+  loading: "opacity-75 cursor-not-allowed"
+};
+function Checkbox({
+  className,
+  state = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Checkbox$1.Root,
+    {
+      "data-slot": "checkbox",
+      className: cn(
+        "border-input group-has-disabled/field:opacity-50 focus-ring aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary transition-theme peer relative flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-[4px] border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
+        CHECKBOX_STATE_CLASSES[state],
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        Checkbox$1.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
+          children: /* @__PURE__ */ jsx(CheckIcon, {})
+        }
+      )
+    }
+  );
+}
+function Collapsible({ ...props }) {
+  return /* @__PURE__ */ jsx(Collapsible$1.Root, { "data-slot": "collapsible", ...props });
+}
+function CollapsibleTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Collapsible$1.Trigger, { "data-slot": "collapsible-trigger", ...props });
+}
+function CollapsiblePanel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Collapsible$1.Panel,
+    {
+      "data-slot": "collapsible-panel",
+      className: cn(
+        "transition-height h-(--collapsible-panel-height) data-ending-style:h-0 data-starting-style:h-0 overflow-hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ContextMenu({ ...props }) {
+  return /* @__PURE__ */ jsx(ContextMenu$1.Root, { ...props });
+}
+function ContextMenuTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(ContextMenu$1.Trigger, { ...props });
+}
+function ContextMenuPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { ...props });
+}
+function ContextMenuContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(ContextMenu$1.Positioner, { sideOffset: 4, children: /* @__PURE__ */ jsx(
+    ContextMenu$1.Popup,
+    {
+      className: cn(
+        "bg-popover text-popover-foreground ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-overlay min-w-[8rem] rounded-lg p-1 text-sm shadow-md outline-none ring-1 duration-100",
+        className
+      ),
+      ...props
+    }
+  ) }) });
+}
+function ContextMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ContextMenu$1.Item,
+    {
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 transition-theme relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ContextMenuSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ContextMenu$1.Separator,
+    {
+      className: cn("bg-border -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+function Drawer({ ...props }) {
+  return /* @__PURE__ */ jsx(Drawer$1.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(Drawer$1.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerViewport({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Viewport,
+    {
+      "data-slot": "drawer-viewport",
+      className: cn(
+        "z-overlay pointer-events-none fixed inset-0 flex flex-col items-stretch justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerPopup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Popup,
+    {
+      "data-slot": "drawer-popup",
+      className: cn(
+        "bg-background text-foreground data-ending-style:h-0 data-starting-style:h-0 pointer-events-auto flex w-full flex-col border-t shadow-[0_-4px_24px_rgba(0,0,0,0.15)] transition-[height] duration-150 ease-in-out",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Content,
+    {
+      "data-slot": "drawer-content",
+      className: cn("flex min-h-0 flex-1 flex-col overflow-hidden", className),
+      ...props
+    }
+  );
+}
+var Select = Select$1.Root;
+function SelectGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Select$1.Group,
+    {
+      "data-slot": "select-group",
+      className: cn("scroll-my-1 p-1", className),
+      ...props
+    }
+  );
+}
+function SelectValue({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Select$1.Value,
+    {
+      "data-slot": "select-value",
+      className: cn("flex flex-1 text-left", className),
+      ...props
+    }
+  );
+}
+var SELECT_TRIGGER_STATE_CLASSES = {
+  default: "",
+  error: "border-destructive bg-destructive/5 dark:border-destructive/50 dark:bg-destructive/10",
+  success: "border-success bg-success/5 dark:border-success dark:bg-success/5",
+  warning: "border-warning bg-warning/5 dark:border-warning dark:bg-warning/5",
+  loading: "opacity-75 cursor-not-allowed"
+};
+function SelectTrigger({
+  className,
+  size = "default",
+  state = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Select$1.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        "border-input focus-ring aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 transition-theme disabled:bg-input/50 dark:disabled:bg-input/80 flex w-fit select-none items-center justify-between gap-1.5 whitespace-nowrap rounded-lg border bg-transparent py-2 pl-2.5 pr-2 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        SELECT_TRIGGER_STATE_CLASSES[state],
+        "cursor-pointer",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          Select$1.Icon,
+          {
+            render: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  positionerClassName,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
+    Select$1.Positioner,
+    {
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      alignItemWithTrigger,
+      className: cn("z-overlay isolate", positionerClassName),
+      children: /* @__PURE__ */ jsxs(
+        Select$1.Popup,
+        {
+          "data-slot": "select-content",
+          "data-align-trigger": alignItemWithTrigger,
+          className: cn(
+            "max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-overlay relative isolate min-w-36 overflow-y-auto overflow-x-hidden rounded-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none",
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+            /* @__PURE__ */ jsx(Select$1.List, { children }),
+            /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+          ]
+        }
+      )
+    }
+  ) });
+}
+function SelectLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Select$1.GroupLabel,
+    {
+      "data-slot": "select-label",
+      className: cn("text-muted-foreground px-1.5 py-1 text-xs", className),
+      ...props
+    }
+  );
+}
+function SelectItem({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    Select$1.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        "outline-hidden focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-pointer select-none items-center gap-1.5 rounded-md py-1 pl-1.5 pr-8 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Select$1.ItemText, { className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap", children }),
+        /* @__PURE__ */ jsx(
+          Select$1.ItemIndicator,
+          {
+            render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+            children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" })
+          }
+        )
+      ]
+    }
+  );
+}
+function SelectSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Select$1.Separator,
+    {
+      "data-slot": "select-separator",
+      className: cn("bg-border pointer-events-none -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Select$1.ScrollUpArrow,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Select$1.ScrollDownArrow,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+    }
+  );
+}
+function Separator({ className, orientation = "horizontal", ...props }) {
+  return /* @__PURE__ */ jsx(
+    Separator$1,
+    {
+      "data-slot": "separator",
+      orientation,
+      className: cn(
+        "bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch shrink-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}) {
+  const _values = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max];
+  return /* @__PURE__ */ jsx(
+    Slider$1.Root,
+    {
+      className: cn("data-horizontal:w-full data-vertical:h-full", className),
+      "data-slot": "slider",
+      defaultValue,
+      value,
+      min,
+      max,
+      thumbAlignment: "edge",
+      ...props,
+      children: /* @__PURE__ */ jsxs(Slider$1.Control, { className: "data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col relative flex w-full touch-none select-none items-center", children: [
+        /* @__PURE__ */ jsx(
+          Slider$1.Track,
+          {
+            "data-slot": "slider-track",
+            className: "bg-muted data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1 relative grow select-none overflow-hidden rounded-full",
+            children: /* @__PURE__ */ jsx(
+              Slider$1.Indicator,
+              {
+                "data-slot": "slider-range",
+                className: "bg-primary data-horizontal:h-full data-vertical:w-full select-none"
+              }
+            )
+          }
+        ),
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(
+          Slider$1.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            className: "border-ring ring-ring/75 hover:ring-3 focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-hidden active:ring-3 transition-focus relative block size-3 shrink-0 select-none rounded-full border bg-white after:absolute after:-inset-2 disabled:pointer-events-none disabled:opacity-50"
+          },
+          _values[index]
+        ))
+      ] })
+    }
+  );
+}
+var Toaster = ({ ...props }) => {
+  const { theme = "system" } = useTheme();
+  return /* @__PURE__ */ jsx(
+    Toaster$1,
+    {
+      theme,
+      className: "toaster group",
+      icons: {
+        success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-4" }),
+        info: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }),
+        warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" }),
+        error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "text-destructive size-4" }),
+        loading: /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" })
+      },
+      style: {
+        "--normal-bg": "var(--popover)",
+        "--normal-text": "var(--popover-foreground)",
+        "--normal-border": "var(--border)",
+        "--border-radius": "var(--radius)",
+        "--error-bg": "color-mix(in oklch, var(--destructive) 15%, var(--popover))",
+        "--error-text": "var(--foreground)",
+        "--error-border": "var(--destructive)"
+      },
+      toastOptions: {
+        classNames: {
+          toast: "cn-toast"
+        }
+      },
+      ...props
+    }
+  );
+};
+function Switch({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Switch$1.Root,
+    {
+      "data-slot": "switch",
+      "data-size": size,
+      className: cn(
+        "group/switch focus-ring aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50 transition-interactive peer relative inline-flex shrink-0 items-center rounded-full border border-transparent outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-[size=default]:h-[18.4px] data-[size=sm]:h-3.5 data-[size=default]:w-8 data-[size=sm]:w-6",
+        !!props.onCheckedChange && "cursor-pointer",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        Switch$1.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: "bg-background group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3"
+        }
+      )
+    }
+  );
+}
+function Tabs({ className, orientation = "horizontal", ...props }) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Root,
+    {
+      "data-slot": "tabs",
+      "data-orientation": orientation,
+      className: cn(
+        "group/tabs data-horizontal:grid-rows-[auto_1fr] data-vertical:grid-cols-[auto_1fr] grid gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var tabsListVariants = cva(
+  "group/tabs-list relative inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function TabsList({
+  className,
+  variant = "default",
+  indicatorClassName,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Tabs$1.List,
+    {
+      "data-slot": "tabs-list",
+      "data-variant": variant,
+      className: cn(tabsListVariants({ variant }), className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(TabsIndicator, { variant: variant ?? "default", className: indicatorClassName })
+      ]
+    }
+  );
+}
+function TabsTrigger({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Tab,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "text-foreground/60 group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/75 focus-visible:outline-ring has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground transition-interactive relative z-10 inline-flex h-[calc(100%-1px)] flex-1 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent bg-transparent px-1.5 py-0.5 text-sm font-medium focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "data-active:text-foreground dark:data-active:text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsIndicator({ className, variant = "default", ...props }) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Indicator,
+    {
+      "data-slot": "tabs-indicator",
+      className: cn(
+        "transition-interactive pointer-events-none absolute z-0",
+        variant === "line" ? cn(
+          "bg-primary",
+          "group-data-horizontal/tabs:bottom-0 group-data-horizontal/tabs:left-(--active-tab-left) group-data-horizontal/tabs:h-0.5 group-data-horizontal/tabs:w-(--active-tab-width)",
+          "group-data-vertical/tabs:right-0 group-data-vertical/tabs:top-(--active-tab-top) group-data-vertical/tabs:h-(--active-tab-height) group-data-vertical/tabs:w-0.5"
+        ) : "left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width) bg-background dark:border-input dark:bg-input/30 rounded-md border border-transparent shadow-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Panel,
+    {
+      "data-slot": "tabs-content",
+      className: cn(
+        "transition-fade data-ending-style:opacity-0 data-hidden:opacity-0 data-starting-style:opacity-0 group-data-horizontal/tabs:row-start-2 group-data-horizontal/tabs:col-start-1 group-data-vertical/tabs:col-start-2 group-data-vertical/tabs:row-start-1 min-h-0 min-w-0 flex-1 text-sm outline-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var textareaVariants = cva(
+  // base classes shared across all variants:
+  "min-w-0 w-full outline-none transition-theme resize-none placeholder:text-muted-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent border border-input rounded-lg px-2.5 py-1 text-sm min-h-[80px] focus-ring disabled:bg-input/50 disabled:cursor-not-allowed disabled:opacity-50 dark:disabled:bg-input/80",
+        code: (
+          // only textarea-specific classes; the outer container is handled in the component
+          "flex-1 bg-transparent py-2 pl-3 font-mono text-xs text-zinc-200 disabled:cursor-default leading-[1.25rem]"
+        ),
+        yaml: ""
+      },
+      state: {
+        default: "",
+        error: "border-destructive bg-destructive/5 dark:border-destructive/50 dark:bg-destructive/10",
+        success: "border-success bg-success/5 dark:border-success dark:bg-success/5",
+        warning: "border-warning bg-warning/5 dark:border-warning dark:bg-warning/5",
+        loading: "opacity-75 cursor-not-allowed"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      state: "default"
+    }
+  }
+);
+var YC = {
+  bg: "#1e1e1e",
+  lineNum: "#858585",
+  lineNumBorder: "#303030",
+  comment: "#6a9955",
+  key: "#9cdcfe",
+  punct: "#d4d4d4",
+  string: "#ce9178",
+  bool: "#569cd6",
+  number: "#b5cea8",
+  default: "#d4d4d4"
+};
+var BOOLEAN_RE = /^(true|false|yes|no|null|~)$/i;
+var NUMBER_RE = /^-?\d+(\.\d+)?(e[+-]?\d+)?$/i;
+var ScalarValue = ({ raw, searchTerm, absoluteStart, activeMatchCharIdx }) => {
+  const trimmed = raw.trim();
+  const hl = /* @__PURE__ */ jsx(
+    SplitAndHighlightText,
+    {
+      text: raw,
+      term: searchTerm ?? "",
+      absoluteStart,
+      activeMatchCharIdx
+    }
+  );
+  if (!trimmed || /^[|>][+-]?$/.test(trimmed)) return /* @__PURE__ */ jsx("span", { style: { color: YC.punct }, children: hl });
+  if (trimmed.startsWith('"') || trimmed.startsWith("'"))
+    return /* @__PURE__ */ jsx("span", { style: { color: YC.string }, children: hl });
+  if (BOOLEAN_RE.test(trimmed)) return /* @__PURE__ */ jsx("span", { style: { color: YC.bool }, children: hl });
+  if (NUMBER_RE.test(trimmed)) return /* @__PURE__ */ jsx("span", { style: { color: YC.number }, children: hl });
+  return /* @__PURE__ */ jsx("span", { style: { color: YC.default }, children: hl });
+};
+var YamlValue = ({ raw, searchTerm, absoluteStart, activeMatchCharIdx }) => {
+  const trimmed = raw.trim();
+  if (!trimmed) {
+    return /* @__PURE__ */ jsx("span", { style: { color: YC.punct }, children: raw });
+  }
+  const isQuoted = trimmed.startsWith('"') || trimmed.startsWith("'");
+  if (!isQuoted) {
+    const commentIdx = raw.search(/\s+#/);
+    if (commentIdx !== -1) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          ScalarValue,
+          {
+            raw: raw.slice(0, commentIdx),
+            searchTerm,
+            absoluteStart,
+            activeMatchCharIdx
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { style: { color: YC.comment }, children: /* @__PURE__ */ jsx(
+          SplitAndHighlightText,
+          {
+            text: raw.slice(commentIdx),
+            term: searchTerm ?? "",
+            absoluteStart: absoluteStart !== void 0 ? absoluteStart + commentIdx : void 0,
+            activeMatchCharIdx
+          }
+        ) })
+      ] });
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    ScalarValue,
+    {
+      raw,
+      searchTerm,
+      absoluteStart,
+      activeMatchCharIdx
+    }
+  );
+};
+var YamlLine = ({ line, searchTerm, lineStart = 0, activeMatchCharIdx }) => {
+  const trimmed = line.trim();
+  if (!trimmed) {
+    return /* @__PURE__ */ jsx("span", { style: { color: YC.default }, children: " " });
+  }
+  if (trimmed.startsWith("#"))
+    return /* @__PURE__ */ jsx("span", { style: { color: YC.comment }, children: /* @__PURE__ */ jsx(
+      SplitAndHighlightText,
+      {
+        text: line,
+        term: searchTerm ?? "",
+        absoluteStart: lineStart,
+        activeMatchCharIdx
+      }
+    ) });
+  const keyMatch = line.match(/^(\s*)([\w.-]+)(\s*:)(.*)$/);
+  if (keyMatch) {
+    const [, indent, key, colon, rest] = keyMatch;
+    const keyAbsStart = lineStart + indent.length;
+    const restAbsStart = keyAbsStart + key.length + colon.length;
+    return /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsx("span", { style: { color: YC.default }, children: indent }),
+      /* @__PURE__ */ jsx("span", { style: { color: YC.key }, children: /* @__PURE__ */ jsx(
+        SplitAndHighlightText,
+        {
+          text: key,
+          term: searchTerm ?? "",
+          absoluteStart: keyAbsStart,
+          activeMatchCharIdx
+        }
+      ) }),
+      /* @__PURE__ */ jsx("span", { style: { color: YC.punct }, children: colon }),
+      /* @__PURE__ */ jsx(
+        YamlValue,
+        {
+          raw: rest,
+          searchTerm,
+          absoluteStart: restAbsStart,
+          activeMatchCharIdx
+        }
+      )
+    ] });
+  }
+  const arrayMatch = line.match(/^(\s*-\s?)(.*)$/);
+  if (arrayMatch) {
+    const [, prefix, rest] = arrayMatch;
+    return /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsx("span", { style: { color: YC.punct }, children: prefix }),
+      /* @__PURE__ */ jsx(
+        YamlValue,
+        {
+          raw: rest,
+          searchTerm,
+          absoluteStart: lineStart + prefix.length,
+          activeMatchCharIdx
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx("span", { style: { color: YC.default }, children: /* @__PURE__ */ jsx(
+    SplitAndHighlightText,
+    {
+      text: line,
+      term: searchTerm ?? "",
+      absoluteStart: lineStart,
+      activeMatchCharIdx
+    }
+  ) });
+};
+function TextareaYaml({
+  className,
+  value,
+  borderRounded = true,
+  editable = false,
+  onChange,
+  searchTerm,
+  activeMatchCharIdx,
+  "aria-label": ariaLabel = "YAML editor"
+}) {
+  const text = typeof value === "string" ? value : "";
+  const lines = text.split("\n");
+  const gutterWidth = `${String(lines.length).length + 2}ch`;
+  const lineStarts = [];
+  let offset = 0;
+  for (const line of lines) {
+    lineStarts.push(offset);
+    offset += line.length + 1;
+  }
+  const { copiedValue: isCopied, copy } = useCopyToClipboard();
+  const highlightRef = React.useRef(null);
+  const gutterRef = React.useRef(null);
+  const syncScroll = (e) => {
+    const { scrollTop, scrollLeft } = e.currentTarget;
+    if (highlightRef.current) {
+      highlightRef.current.scrollTop = scrollTop;
+      highlightRef.current.scrollLeft = scrollLeft;
+    }
+    if (gutterRef.current) {
+      gutterRef.current.scrollTop = scrollTop;
+    }
+  };
+  const gutterLines = lines.map((_, i) => /* @__PURE__ */ jsx("div", { className: "leading-5", children: i + 1 }, `line-${i}`));
+  const gutterStyle = {
+    color: YC.lineNum,
+    borderRight: `1px solid ${YC.lineNumBorder}`,
+    width: gutterWidth,
+    minWidth: gutterWidth
+  };
+  const highlightRows = lines.map((line, i) => /* @__PURE__ */ jsx("div", { className: "whitespace-pre leading-5", children: /* @__PURE__ */ jsx(
+    YamlLine,
+    {
+      line,
+      searchTerm,
+      lineStart: lineStarts[i],
+      activeMatchCharIdx
+    }
+  ) }, `${i}-${line}`));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative border font-mono text-xs",
+        editable && "h-full",
+        borderRounded && "rounded-md",
+        className
+      ),
+      style: { backgroundColor: YC.bg },
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon-sm",
+            className: "absolute right-1 top-1 z-10",
+            onClick: () => copy(text),
+            "aria-label": "Copy value",
+            children: isCopied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-success h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(CopyIcon, { className: "h-3.5 w-3.5", style: { color: YC.lineNum } })
+          }
+        ),
+        editable ? (
+          // Edit mode: textarea is the scroll source; gutter + highlight sync via onScroll
+          /* @__PURE__ */ jsxs("div", { className: "flex h-full", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: gutterRef,
+                className: "select-none overflow-hidden py-1 pl-2 pr-3 text-right font-mono text-xs leading-5",
+                style: gutterStyle,
+                children: gutterLines
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-hidden", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: highlightRef,
+                  "aria-hidden": true,
+                  className: "pointer-events-none absolute inset-0 overflow-hidden py-1 pl-4 pr-4",
+                  children: highlightRows
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "textarea",
+                {
+                  value,
+                  onChange: onChange ?? (() => {
+                  }),
+                  onScroll: syncScroll,
+                  wrap: "off",
+                  "data-yaml-editor": true,
+                  "aria-label": ariaLabel,
+                  className: "absolute inset-0 h-full w-full resize-none overflow-auto bg-transparent py-1 pl-4 pr-4 font-mono text-xs leading-5 outline-none",
+                  style: { color: "transparent", caretColor: YC.default }
+                }
+              )
+            ] })
+          ] })
+        ) : (
+          // Read-only mode: outer flex container scrolls everything together
+          /* @__PURE__ */ jsxs("div", { className: "flex h-full overflow-auto", "data-yaml-scroll": true, children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "select-none py-1 pl-2 pr-3 text-right font-mono text-xs leading-5",
+                style: gutterStyle,
+                children: gutterLines
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "flex-1 py-1", children: lines.map((line, i) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "whitespace-pre pl-4 pr-4 leading-5 hover:bg-white/5",
+                children: /* @__PURE__ */ jsx(
+                  YamlLine,
+                  {
+                    line,
+                    searchTerm,
+                    lineStart: lineStarts[i],
+                    activeMatchCharIdx
+                  }
+                )
+              },
+              `${i}-${line}`
+            )) })
+          ] })
+        )
+      ]
+    }
+  );
+}
+function TextareaCode({
+  className,
+  value,
+  disabled,
+  borderRounded = true,
+  ...props
+}) {
+  const text = typeof value === "string" ? value : "";
+  const lines = text.split("\n");
+  const { copiedValue: isCopied, copy } = useCopyToClipboard();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative overflow-x-auto border border-zinc-800 bg-zinc-950",
+        borderRounded && "rounded-md",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon-sm",
+            className: "absolute right-1 top-1 z-10",
+            onClick: () => copy(text),
+            "aria-label": "Copy value",
+            children: isCopied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-success h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(CopyIcon, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+          /* @__PURE__ */ jsx("div", { className: "select-none border-r border-zinc-800 py-2", children: lines.map((line, i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "w-10 min-w-10 bg-zinc-950 pr-3 text-right font-mono text-xs leading-5 text-zinc-600",
+              children: i + 1
+            },
+            `${i}-${line}`
+          )) }),
+          disabled ? /* @__PURE__ */ jsx("pre", { className: "flex flex-1 flex-col py-2", children: lines.map((line, i) => /* @__PURE__ */ jsx("span", { className: "flex", children: /* @__PURE__ */ jsx("span", { className: "whitespace-pre pl-3 font-mono text-xs leading-5 text-zinc-200", children: line || " " }) }, `${i}-${line}`)) }) : /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              value,
+              rows: lines.length,
+              wrap: "off",
+              className: cn(textareaVariants({ variant: "code" })),
+              ...props
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function Textarea({
+  className,
+  variant = "default",
+  state = "default",
+  value,
+  borderRounded = true,
+  searchTerm,
+  activeMatchCharIdx,
+  editable,
+  onChange,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  if (variant === "code") {
+    return /* @__PURE__ */ jsx(
+      TextareaCode,
+      {
+        className,
+        value,
+        borderRounded,
+        "aria-label": ariaLabel,
+        ...props
+      }
+    );
+  }
+  if (variant === "yaml") {
+    return /* @__PURE__ */ jsx(
+      TextareaYaml,
+      {
+        className,
+        value,
+        borderRounded,
+        editable,
+        onChange,
+        searchTerm,
+        activeMatchCharIdx,
+        "aria-label": ariaLabel
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      value,
+      "aria-label": ariaLabel,
+      className: cn(
+        textareaVariants({ variant, state }),
+        !borderRounded && "rounded-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { Checkbox, Collapsible, CollapsiblePanel, CollapsibleTrigger, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, Drawer, DrawerContent, DrawerPopup, DrawerPortal, DrawerViewport, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Slider, Switch, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Textarea, Toaster, textareaVariants };