@nexub/react 1.0.0 → 1.2.0

package/dist/chunk-4OCXGNP3.js

@@ -0,0 +1,85 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/StatusPill/StatusPill.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var statusPillVariants = cva(
+  "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium select-none",
+  {
+    variants: {
+      tone: {
+        neutral: "bg-[var(--color-neutral-100)] text-[var(--color-neutral-700)] border border-[var(--color-neutral-200)]",
+        info: "bg-[var(--color-semantic-info-default)]/10 text-[var(--color-semantic-info-default)] border border-[var(--color-semantic-info-default)]/20",
+        success: "bg-[var(--color-semantic-success-default)]/10 text-[var(--color-semantic-success-default)] border border-[var(--color-semantic-success-default)]/20",
+        warning: "bg-[var(--color-semantic-warning-default)]/10 text-[var(--color-semantic-warning-default)] border border-[var(--color-semantic-warning-default)]/20",
+        danger: "bg-[var(--color-semantic-error-default)]/10 text-[var(--color-semantic-error-default)] border border-[var(--color-semantic-error-default)]/20",
+        leap: "bg-[var(--color-leap-500)]/10 text-[var(--color-leap-700)] border border-[var(--color-leap-500)]/20",
+        bookub: "bg-[var(--color-bookub-500)]/10 text-[var(--color-bookub-700)] border border-[var(--color-bookub-500)]/20",
+        payub: "bg-[var(--color-payub-500)]/10 text-[var(--color-payub-700)] border border-[var(--color-payub-500)]/20",
+        founderub: "bg-[var(--color-founderub-500)]/10 text-[var(--color-founderub-700)] border border-[var(--color-founderub-500)]/20"
+      }
+    },
+    defaultVariants: {
+      tone: "neutral"
+    }
+  }
+);
+var dotColorMap = {
+  neutral: "bg-[var(--color-neutral-500)]",
+  info: "bg-[var(--color-semantic-info-default)]",
+  success: "bg-[var(--color-semantic-success-default)]",
+  warning: "bg-[var(--color-semantic-warning-default)]",
+  danger: "bg-[var(--color-semantic-error-default)]",
+  leap: "bg-[var(--color-leap-500)]",
+  bookub: "bg-[var(--color-bookub-500)]",
+  payub: "bg-[var(--color-payub-500)]",
+  founderub: "bg-[var(--color-founderub-500)]"
+};
+var pulseTones = ["success", "info"];
+var StatusPill = React.forwardRef(
+  ({ className, tone = "neutral", label, dot = false, ...props }, ref) => {
+    const shouldPulse = dot && pulseTones.includes(tone);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cn(statusPillVariants({ tone }), className),
+        ...props,
+        children: [
+          dot && /* @__PURE__ */ jsxs("span", { className: "relative inline-flex h-2 w-2 shrink-0", children: [
+            shouldPulse && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "animate-ping absolute inline-flex h-full w-full rounded-full opacity-75",
+                  dotColorMap[tone]
+                ),
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "relative inline-flex rounded-full h-2 w-2",
+                  dotColorMap[tone]
+                )
+              }
+            )
+          ] }),
+          label
+        ]
+      }
+    );
+  }
+);
+StatusPill.displayName = "StatusPill";
+
+export {
+  statusPillVariants,
+  StatusPill
+};

package/dist/chunk-52KTX5A7.js

@@ -0,0 +1,119 @@
+'use client';
+import {
+  inputWrapperVariants
+} from "./chunk-CVBAWKNG.js";
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/NumberInput/NumberInput.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var formatValue = (v, precision) => {
+  if (precision !== void 0) return v.toFixed(precision);
+  return String(v);
+};
+var clampValue = (v, min, max) => {
+  let result = v;
+  if (min !== void 0 && result < min) result = min;
+  if (max !== void 0 && result > max) result = max;
+  return result;
+};
+var NumberInput = React.forwardRef(
+  ({
+    className,
+    size = "md",
+    min,
+    max,
+    step = 1,
+    precision,
+    showSteppers = false,
+    value,
+    defaultValue = 0,
+    onChange,
+    invalid,
+    disabled,
+    ...props
+  }, ref) => {
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const controlled = value !== void 0;
+    const currentValue = controlled ? value : internalValue;
+    const commit = (next) => {
+      const clamped = clampValue(next, min, max);
+      if (!controlled) setInternalValue(clamped);
+      onChange?.(clamped);
+    };
+    const handleChange = (e) => {
+      const parsed = parseFloat(e.target.value);
+      if (!isNaN(parsed)) commit(parsed);
+    };
+    const increment = () => commit(currentValue + step);
+    const decrement = () => commit(currentValue - step);
+    const stepperButtonClass = cn(
+      "flex items-center justify-center px-2 self-stretch shrink-0",
+      "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]",
+      "hover:bg-[var(--color-bg-subtle)] transition-colors",
+      "disabled:opacity-50 disabled:pointer-events-none",
+      "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--color-ring-default)]"
+    );
+    return /* @__PURE__ */ jsxs("div", { className: cn(inputWrapperVariants({ size, invalid }), "pr-0 gap-0", className), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: "number",
+          value: formatValue(currentValue, precision),
+          onChange: handleChange,
+          min,
+          max,
+          step,
+          disabled,
+          "aria-invalid": invalid ?? void 0,
+          className: cn(
+            // Wrapper owns ALL focus styling — strip every indicator from the inner input.
+            "flex-1 min-w-0 bg-transparent text-[var(--color-text-primary)]",
+            "border-0 shadow-none",
+            "outline-none focus:outline-none focus-visible:outline-none",
+            "ring-0 focus:ring-0 focus-visible:ring-0",
+            "placeholder:text-[var(--color-text-placeholder)]",
+            "disabled:opacity-50 disabled:cursor-not-allowed",
+            "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+            size === "sm" ? "text-sm" : size === "lg" ? "text-base" : "text-sm"
+          ),
+          ...props
+        }
+      ),
+      showSteppers && /* @__PURE__ */ jsxs("div", { className: "flex flex-col border-l border-[var(--color-border-default)] self-stretch", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            onClick: increment,
+            disabled: disabled || max !== void 0 && currentValue >= max,
+            className: cn(stepperButtonClass, "border-b border-[var(--color-border-default)] text-xs leading-none flex-1"),
+            "aria-label": "Increment",
+            children: "\u25B2"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            onClick: decrement,
+            disabled: disabled || min !== void 0 && currentValue <= min,
+            className: cn(stepperButtonClass, "text-xs leading-none flex-1"),
+            "aria-label": "Decrement",
+            children: "\u25BC"
+          }
+        )
+      ] })
+    ] });
+  }
+);
+NumberInput.displayName = "NumberInput";
+
+export {
+  NumberInput
+};

package/dist/chunk-6AZP6VBM.js

@@ -0,0 +1,62 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/EmptyState/EmptyState.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Root = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-col items-center justify-center gap-4 py-16 text-center",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Root.displayName = "EmptyState.Root";
+var Illustration = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("text-[var(--color-text-muted)]", className),
+      ...props
+    }
+  )
+);
+Illustration.displayName = "EmptyState.Illustration";
+var Title = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h3",
+    {
+      ref,
+      className: cn("text-lg font-semibold text-[var(--color-text-primary)]", className),
+      ...props
+    }
+  )
+);
+Title.displayName = "EmptyState.Title";
+var Description = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    ref,
+    className: cn("max-w-sm text-sm text-[var(--color-text-muted)]", className),
+    ...props
+  }
+));
+Description.displayName = "EmptyState.Description";
+var Actions = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-2", className), ...props })
+);
+Actions.displayName = "EmptyState.Actions";
+var EmptyState = { Root, Illustration, Title, Description, Actions };
+
+export {
+  EmptyState
+};

package/dist/chunk-6Y734SXN.js

@@ -0,0 +1,51 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Container/Container.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var containerVariants = cva("mx-auto w-full", {
+  variants: {
+    size: {
+      sm: "max-w-[var(--container-sm,640px)]",
+      md: "max-w-[var(--container-md,768px)]",
+      lg: "max-w-[var(--container-lg,1024px)]",
+      xl: "max-w-[var(--container-xl,1280px)]",
+      "2xl": "max-w-[var(--container-2xl,1536px)]",
+      nexub: "max-w-[var(--container-nexub,1440px)]",
+      prose: "max-w-[var(--container-prose,65ch)]"
+    },
+    paddingX: {
+      true: "px-4 sm:px-6 lg:px-8",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    size: "xl",
+    paddingX: true
+  }
+});
+var Container = React.forwardRef(
+  ({ size, paddingX = true, asChild = false, className, children, ...rest }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(containerVariants({ size, paddingX }), className),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+
+export {
+  containerVariants,
+  Container
+};

package/dist/chunk-7B4FS7VQ.js

@@ -0,0 +1,150 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/Select/Select.tsx
+import * as React from "react";
+import * as RadixSelect from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Root2 = RadixSelect.Root;
+var Group2 = RadixSelect.Group;
+var Value2 = RadixSelect.Value;
+var Trigger2 = React.forwardRef(
+  ({ className, children, invalid, ...props }, ref) => /* @__PURE__ */ jsxs(
+    RadixSelect.Trigger,
+    {
+      ref,
+      className: cn(
+        "flex h-9 w-full items-center justify-between rounded-md border border-[var(--color-border-input)] bg-[var(--color-bg-default)] px-3 py-2 text-sm",
+        // Border shifts to ring color on focus; ring is a semi-transparent halo.
+        "placeholder:text-[var(--color-text-muted)] focus:outline-none focus:border-[var(--color-ring-default)] focus:ring-2 focus:ring-[color-mix(in_srgb,var(--color-ring-default)_25%,transparent)]",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        invalid && "border-[var(--color-semantic-error-default)] focus:border-[var(--color-semantic-error-default)] focus:ring-[color-mix(in_srgb,var(--color-semantic-error-default)_25%,transparent)]",
+        "[&>span]:line-clamp-1",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(RadixSelect.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { size: "sm", className: "opacity-50", "aria-hidden": "true" }) })
+      ]
+    }
+  )
+);
+Trigger2.displayName = "Select.Trigger";
+var ScrollUpButton2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixSelect.ScrollUpButton,
+    {
+      ref,
+      className: cn("flex cursor-default items-center justify-center py-1", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronUp, { size: "sm", "aria-hidden": "true" })
+    }
+  )
+);
+ScrollUpButton2.displayName = "Select.ScrollUpButton";
+var ScrollDownButton2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixSelect.ScrollDownButton,
+    {
+      ref,
+      className: cn("flex cursor-default items-center justify-center py-1", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronDown, { size: "sm", "aria-hidden": "true" })
+    }
+  )
+);
+ScrollDownButton2.displayName = "Select.ScrollDownButton";
+var Content2 = React.forwardRef(
+  ({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(RadixSelect.Portal, { children: /* @__PURE__ */ jsxs(
+    RadixSelect.Content,
+    {
+      ref,
+      className: cn(
+        "relative z-[var(--z-popover)] max-h-96 min-w-32 overflow-hidden rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] shadow-md",
+        "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=top]:slide-in-from-bottom-2",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 w-[var(--radix-select-trigger-width)]",
+        className
+      ),
+      position,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ScrollUpButton2, {}),
+        /* @__PURE__ */ jsx(
+          RadixSelect.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(ScrollDownButton2, {})
+      ]
+    }
+  ) })
+);
+Content2.displayName = "Select.Content";
+var Label2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixSelect.Label,
+    {
+      ref,
+      className: cn("px-2 py-1.5 text-xs font-semibold text-[var(--color-text-muted)]", className),
+      ...props
+    }
+  )
+);
+Label2.displayName = "Select.Label";
+var Item2 = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    RadixSelect.Item,
+    {
+      ref,
+      className: cn(
+        "relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none",
+        "focus:bg-[var(--color-bg-subtle)] focus:text-[var(--color-text-primary)]",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(RadixSelect.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: "xs", "aria-hidden": "true" }) }) }),
+        /* @__PURE__ */ jsx(RadixSelect.ItemText, { children })
+      ]
+    }
+  )
+);
+Item2.displayName = "Select.Item";
+var Separator2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixSelect.Separator,
+    {
+      ref,
+      className: cn("-mx-1 my-1 h-px bg-[var(--color-border-default)]", className),
+      ...props
+    }
+  )
+);
+Separator2.displayName = "Select.Separator";
+var Select = {
+  Root: Root2,
+  Group: Group2,
+  Value: Value2,
+  Trigger: Trigger2,
+  ScrollUpButton: ScrollUpButton2,
+  ScrollDownButton: ScrollDownButton2,
+  Content: Content2,
+  Label: Label2,
+  Item: Item2,
+  Separator: Separator2
+};
+
+export {
+  Select
+};

package/dist/chunk-7W2YDJ5W.js

@@ -0,0 +1,128 @@
+'use client';
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/NavigationMenu/NavigationMenu.tsx
+import * as React from "react";
+import * as RadixNav from "@radix-ui/react-navigation-menu";
+import { ChevronDown } from "@nexub/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Root2 = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    RadixNav.Root,
+    {
+      ref,
+      className: cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Viewport2, {})
+      ]
+    }
+  )
+);
+Root2.displayName = "NavigationMenu.Root";
+var List2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixNav.List,
+    {
+      ref,
+      className: cn("group flex flex-1 list-none items-center justify-center gap-1", className),
+      ...props
+    }
+  )
+);
+List2.displayName = "NavigationMenu.List";
+var Item2 = RadixNav.Item;
+var Trigger2 = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    RadixNav.Trigger,
+    {
+      ref,
+      className: cn(
+        "group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors",
+        "hover:bg-[var(--color-bg-subtle)] hover:text-[var(--color-text-primary)] focus:bg-[var(--color-bg-subtle)] focus:text-[var(--color-text-primary)] focus:outline-none",
+        "data-[active]:bg-[var(--color-bg-subtle)]/50 data-[state=open]:bg-[var(--color-bg-subtle)]/50",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            size: "xs",
+            className: "relative ml-1 transition duration-300 group-data-[state=open]:rotate-180",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  )
+);
+Trigger2.displayName = "NavigationMenu.Trigger";
+var Content2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixNav.Content,
+    {
+      ref,
+      className: cn(
+        "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Content2.displayName = "NavigationMenu.Content";
+var Link2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixNav.Link,
+    {
+      ref,
+      className: cn(
+        "block select-none rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-[var(--color-bg-subtle)] hover:text-[var(--color-text-primary)] focus:bg-[var(--color-bg-subtle)] focus:text-[var(--color-text-primary)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Link2.displayName = "NavigationMenu.Link";
+var Viewport2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-full flex justify-center", children: /* @__PURE__ */ jsx(
+    RadixNav.Viewport,
+    {
+      ref,
+      className: cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      ),
+      ...props
+    }
+  ) })
+);
+Viewport2.displayName = "NavigationMenu.Viewport";
+var Indicator2 = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    RadixNav.Indicator,
+    {
+      ref,
+      className: cn(
+        "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=visible]:animate-in data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-[var(--color-border-default)] shadow-md" })
+    }
+  )
+);
+Indicator2.displayName = "NavigationMenu.Indicator";
+var NavigationMenu = { Root: Root2, List: List2, Item: Item2, Trigger: Trigger2, Content: Content2, Link: Link2, Viewport: Viewport2, Indicator: Indicator2 };
+
+export {
+  NavigationMenu
+};

package/dist/chunk-A7L75YXY.js

@@ -0,0 +1,61 @@
+'use client';
+import {
+  Input
+} from "./chunk-CVBAWKNG.js";
+import {
+  cn
+} from "./chunk-AT6RPKU3.js";
+
+// src/components/SearchInput/SearchInput.tsx
+import * as React from "react";
+import { Search, X } from "@nexub/icons";
+import { jsx } from "react/jsx-runtime";
+var SearchInput = React.forwardRef(
+  ({ value, defaultValue: _defaultValue, onChange, onClear, className, ...props }, ref) => {
+    const [internalValue, setInternalValue] = React.useState(
+      _defaultValue ?? ""
+    );
+    const controlled = value !== void 0;
+    const currentValue = controlled ? String(value) : internalValue;
+    const hasValue = currentValue.length > 0;
+    const handleChange = (e) => {
+      if (!controlled) setInternalValue(e.target.value);
+      onChange?.(e);
+    };
+    const handleClear = () => {
+      if (!controlled) setInternalValue("");
+      onClear?.();
+    };
+    const clearButton = hasValue ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleClear,
+        "aria-label": "Clear search",
+        className: cn(
+          "shrink-0 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--color-ring-default)] rounded"
+        ),
+        children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4", "aria-hidden": "true" })
+      }
+    ) : null;
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        type: "search",
+        value: controlled ? value : internalValue,
+        onChange: handleChange,
+        className,
+        leadingIcon: /* @__PURE__ */ jsx(Search, { className: "h-4 w-4", "aria-hidden": "true" }),
+        trailingIcon: clearButton ?? void 0,
+        ...props
+      }
+    );
+  }
+);
+SearchInput.displayName = "SearchInput";
+
+export {
+  SearchInput
+};

package/dist/chunk-ADO2DB6Q.js

@@ -0,0 +1 @@
+'use client';

package/dist/chunk-AT6RPKU3.js

@@ -0,0 +1,12 @@
+'use client';
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export {
+  cn
+};