@epicbagel/saas-kit 1.4.0 → 1.6.0

package/dist/primitives/message-scroller.cjs

@@ -10,8 +10,8 @@
 
 
 
-var _chunkXABXUP6Lcjs = require('../chunk-XABXUP6L.cjs');
-require('../chunk-L4DH72UF.cjs');
+var _chunk5VMKDVB6cjs = require('../chunk-5VMKDVB6.cjs');
+require('../chunk-JDEXZGIY.cjs');
 require('../chunk-KWLSBTB2.cjs');
 
 
@@ -23,4 +23,4 @@ require('../chunk-KWLSBTB2.cjs');
 
 
 
-exports.MessageScroller = _chunkXABXUP6Lcjs.MessageScroller; exports.MessageScrollerButton = _chunkXABXUP6Lcjs.MessageScrollerButton; exports.MessageScrollerContent = _chunkXABXUP6Lcjs.MessageScrollerContent; exports.MessageScrollerItem = _chunkXABXUP6Lcjs.MessageScrollerItem; exports.MessageScrollerProvider = _chunkXABXUP6Lcjs.MessageScrollerProvider; exports.MessageScrollerViewport = _chunkXABXUP6Lcjs.MessageScrollerViewport; exports.useMessageScroller = _chunkXABXUP6Lcjs.useMessageScroller; exports.useMessageScrollerScrollable = _chunkXABXUP6Lcjs.useMessageScrollerScrollable; exports.useMessageScrollerVisibility = _chunkXABXUP6Lcjs.useMessageScrollerVisibility;
+exports.MessageScroller = _chunk5VMKDVB6cjs.MessageScroller; exports.MessageScrollerButton = _chunk5VMKDVB6cjs.MessageScrollerButton; exports.MessageScrollerContent = _chunk5VMKDVB6cjs.MessageScrollerContent; exports.MessageScrollerItem = _chunk5VMKDVB6cjs.MessageScrollerItem; exports.MessageScrollerProvider = _chunk5VMKDVB6cjs.MessageScrollerProvider; exports.MessageScrollerViewport = _chunk5VMKDVB6cjs.MessageScrollerViewport; exports.useMessageScroller = _chunk5VMKDVB6cjs.useMessageScroller; exports.useMessageScrollerScrollable = _chunk5VMKDVB6cjs.useMessageScrollerScrollable; exports.useMessageScrollerVisibility = _chunk5VMKDVB6cjs.useMessageScrollerVisibility;

package/dist/primitives/message-scroller.js

@@ -10,8 +10,8 @@ import {
   useMessageScroller,
   useMessageScrollerScrollable,
   useMessageScrollerVisibility
-} from "../chunk-GFG2R5BZ.js";
-import "../chunk-HQRWRRZJ.js";
+} from "../chunk-2V7AVB2U.js";
+import "../chunk-W326GKML.js";
 import "../chunk-G6SRSWXB.js";
 export {
   MessageScroller,

package/dist/primitives/message.cjs

@@ -6,7 +6,11 @@
 
 
 
-var _chunk2AU7ZRGXcjs = require('../chunk-2AU7ZRGX.cjs');
+
+
+var _chunkNWDPH2Z7cjs = require('../chunk-NWDPH2Z7.cjs');
+require('../chunk-U2NES7VR.cjs');
+require('../chunk-JDEXZGIY.cjs');
 require('../chunk-KWLSBTB2.cjs');
 
 
@@ -15,4 +19,6 @@ require('../chunk-KWLSBTB2.cjs');
 
 
 
-exports.Message = _chunk2AU7ZRGXcjs.Message; exports.MessageAvatar = _chunk2AU7ZRGXcjs.MessageAvatar; exports.MessageContent = _chunk2AU7ZRGXcjs.MessageContent; exports.MessageFooter = _chunk2AU7ZRGXcjs.MessageFooter; exports.MessageGroup = _chunk2AU7ZRGXcjs.MessageGroup; exports.MessageHeader = _chunk2AU7ZRGXcjs.MessageHeader;
+
+
+exports.Message = _chunkNWDPH2Z7cjs.Message; exports.MessageAction = _chunkNWDPH2Z7cjs.MessageAction; exports.MessageActions = _chunkNWDPH2Z7cjs.MessageActions; exports.MessageAvatar = _chunkNWDPH2Z7cjs.MessageAvatar; exports.MessageContent = _chunkNWDPH2Z7cjs.MessageContent; exports.MessageFooter = _chunkNWDPH2Z7cjs.MessageFooter; exports.MessageGroup = _chunkNWDPH2Z7cjs.MessageGroup; exports.MessageHeader = _chunkNWDPH2Z7cjs.MessageHeader;

package/dist/primitives/message.d.cts

@@ -1,5 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import { ButtonProps } from './button.cjs';
+import { TooltipContent } from './tooltip.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '@radix-ui/react-tooltip';
 
 declare function MessageGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function Message({ className, align, ...props }: React.ComponentProps<"div"> & {
@@ -9,5 +14,34 @@ declare function MessageAvatar({ className, ...props }: React.ComponentProps<"di
 declare function MessageContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function MessageHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function MessageFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * A row of `MessageAction`s under a message: copy, then any others (a thumbs
+ * up or down). It sits at the message's side, the start of a turn from the
+ * other party and the end of one aligned to the end, and collapses when it
+ * holds nothing.
+ */
+declare function MessageActions({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+type MessageActionProps = Omit<ButtonProps, "size" | "aria-label"> & {
+    /** What the action does: its tooltip, and its accessible name when it is text. */
+    tooltip: React.ReactNode;
+    /** The accessible name, for a `tooltip` that isn't plain text. */
+    label?: string;
+    /** Which side of the button the tooltip opens on. Defaults to `"bottom"`. */
+    side?: React.ComponentPropsWithoutRef<typeof TooltipContent>["side"];
+};
+/**
+ * One action in a `MessageActions` row: an icon-only ghost button (pass the
+ * icon as its child) with a tooltip and an accessible name. It is 2rem
+ * square, and 2.75rem on a touch screen, where the tooltip can't show on
+ * hover, so a finger has the kit's usual target.
+ */
+declare const MessageAction: React.ForwardRefExoticComponent<Omit<ButtonProps, "aria-label" | "size"> & {
+    /** What the action does: its tooltip, and its accessible name when it is text. */
+    tooltip: React.ReactNode;
+    /** The accessible name, for a `tooltip` that isn't plain text. */
+    label?: string;
+    /** Which side of the button the tooltip opens on. Defaults to `"bottom"`. */
+    side?: React.ComponentPropsWithoutRef<typeof TooltipContent>["side"];
+} & React.RefAttributes<HTMLButtonElement>>;
 
-export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };
+export { Message, MessageAction, type MessageActionProps, MessageActions, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };

package/dist/primitives/message.d.ts

@@ -1,5 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import { ButtonProps } from './button.js';
+import { TooltipContent } from './tooltip.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '@radix-ui/react-tooltip';
 
 declare function MessageGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function Message({ className, align, ...props }: React.ComponentProps<"div"> & {
@@ -9,5 +14,34 @@ declare function MessageAvatar({ className, ...props }: React.ComponentProps<"di
 declare function MessageContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function MessageHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function MessageFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * A row of `MessageAction`s under a message: copy, then any others (a thumbs
+ * up or down). It sits at the message's side, the start of a turn from the
+ * other party and the end of one aligned to the end, and collapses when it
+ * holds nothing.
+ */
+declare function MessageActions({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+type MessageActionProps = Omit<ButtonProps, "size" | "aria-label"> & {
+    /** What the action does: its tooltip, and its accessible name when it is text. */
+    tooltip: React.ReactNode;
+    /** The accessible name, for a `tooltip` that isn't plain text. */
+    label?: string;
+    /** Which side of the button the tooltip opens on. Defaults to `"bottom"`. */
+    side?: React.ComponentPropsWithoutRef<typeof TooltipContent>["side"];
+};
+/**
+ * One action in a `MessageActions` row: an icon-only ghost button (pass the
+ * icon as its child) with a tooltip and an accessible name. It is 2rem
+ * square, and 2.75rem on a touch screen, where the tooltip can't show on
+ * hover, so a finger has the kit's usual target.
+ */
+declare const MessageAction: React.ForwardRefExoticComponent<Omit<ButtonProps, "aria-label" | "size"> & {
+    /** What the action does: its tooltip, and its accessible name when it is text. */
+    tooltip: React.ReactNode;
+    /** The accessible name, for a `tooltip` that isn't plain text. */
+    label?: string;
+    /** Which side of the button the tooltip opens on. Defaults to `"bottom"`. */
+    side?: React.ComponentPropsWithoutRef<typeof TooltipContent>["side"];
+} & React.RefAttributes<HTMLButtonElement>>;
 
-export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };
+export { Message, MessageAction, type MessageActionProps, MessageActions, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };

package/dist/primitives/message.js

@@ -1,15 +1,21 @@
 "use client";
 import {
   Message,
+  MessageAction,
+  MessageActions,
   MessageAvatar,
   MessageContent,
   MessageFooter,
   MessageGroup,
   MessageHeader
-} from "../chunk-JZOBIPFC.js";
+} from "../chunk-H4XH2PPU.js";
+import "../chunk-ZRLUUZHK.js";
+import "../chunk-W326GKML.js";
 import "../chunk-G6SRSWXB.js";
 export {
   Message,
+  MessageAction,
+  MessageActions,
   MessageAvatar,
   MessageContent,
   MessageFooter,

package/dist/primitives/page-header-actions.cjs

@@ -2,10 +2,10 @@
 "use client";
 
 
-var _chunkWQJKUKBLcjs = require('../chunk-WQJKUKBL.cjs');
+var _chunk6YXKFVZUcjs = require('../chunk-6YXKFVZU.cjs');
 require('../chunk-ZAITUDYD.cjs');
-require('../chunk-L4DH72UF.cjs');
+require('../chunk-JDEXZGIY.cjs');
 require('../chunk-KWLSBTB2.cjs');
 
 
-exports.PageHeaderActions = _chunkWQJKUKBLcjs.PageHeaderActions;
+exports.PageHeaderActions = _chunk6YXKFVZUcjs.PageHeaderActions;

package/dist/primitives/page-header-actions.js

@@ -2,9 +2,9 @@
 "use client";
 import {
   PageHeaderActions
-} from "../chunk-QNZYQLNP.js";
+} from "../chunk-6S6GD43V.js";
 import "../chunk-V4LE2HWP.js";
-import "../chunk-HQRWRRZJ.js";
+import "../chunk-W326GKML.js";
 import "../chunk-G6SRSWXB.js";
 export {
   PageHeaderActions

package/dist/primitives/quick-filters.cjs

@@ -2,9 +2,9 @@
 "use client";
 
 
-var _chunkPNWNU6JWcjs = require('../chunk-PNWNU6JW.cjs');
-require('../chunk-L4DH72UF.cjs');
+var _chunkEUFV25KLcjs = require('../chunk-EUFV25KL.cjs');
+require('../chunk-JDEXZGIY.cjs');
 require('../chunk-KWLSBTB2.cjs');
 
 
-exports.QuickFilters = _chunkPNWNU6JWcjs.QuickFilters;
+exports.QuickFilters = _chunkEUFV25KLcjs.QuickFilters;

package/dist/primitives/quick-filters.js

@@ -2,8 +2,8 @@
 "use client";
 import {
   QuickFilters
-} from "../chunk-LI5EOSQG.js";
-import "../chunk-HQRWRRZJ.js";
+} from "../chunk-43UMPZWD.js";
+import "../chunk-W326GKML.js";
 import "../chunk-G6SRSWXB.js";
 export {
   QuickFilters

package/dist/primitives/resource-list.cjs

@@ -2,15 +2,15 @@
 "use client";
 
 
-var _chunkIH3COANJcjs = require('../chunk-IH3COANJ.cjs');
-require('../chunk-PNWNU6JW.cjs');
-require('../chunk-FNDBM67K.cjs');
-require('../chunk-SGW4FWBX.cjs');
+var _chunkQTWJQQDHcjs = require('../chunk-QTWJQQDH.cjs');
+require('../chunk-EUFV25KL.cjs');
+require('../chunk-7YCKII7G.cjs');
+require('../chunk-CRTH5GJ5.cjs');
 require('../chunk-PPX2VPGI.cjs');
 require('../chunk-WNXVGUBF.cjs');
 require('../chunk-IQZLUT2Y.cjs');
 require('../chunk-LELBCBDT.cjs');
-require('../chunk-R5L4CM6V.cjs');
+require('../chunk-VOTCYG3F.cjs');
 require('../chunk-U2NES7VR.cjs');
 require('../chunk-JH4GAGOQ.cjs');
 require('../chunk-YYFVG5A6.cjs');
@@ -20,9 +20,9 @@ require('../chunk-PQUSJEXL.cjs');
 require('../chunk-VGTINL5Q.cjs');
 require('../chunk-I6GUOEBO.cjs');
 require('../chunk-VBPPFC7X.cjs');
-require('../chunk-L4DH72UF.cjs');
+require('../chunk-JDEXZGIY.cjs');
 require('../chunk-R35FT53G.cjs');
 require('../chunk-KWLSBTB2.cjs');
 
 
-exports.ResourceList = _chunkIH3COANJcjs.ResourceList;
+exports.ResourceList = _chunkQTWJQQDHcjs.ResourceList;

package/dist/primitives/resource-list.js

@@ -2,15 +2,15 @@
 "use client";
 import {
   ResourceList
-} from "../chunk-HRLP4BHJ.js";
-import "../chunk-LI5EOSQG.js";
-import "../chunk-J3GQXM37.js";
-import "../chunk-MLHNYRFX.js";
+} from "../chunk-JN6JOSZG.js";
+import "../chunk-43UMPZWD.js";
+import "../chunk-EEHIMPD7.js";
+import "../chunk-KNKV25WS.js";
 import "../chunk-G76JANB4.js";
 import "../chunk-YG7FBJRM.js";
 import "../chunk-E2TQMDO7.js";
 import "../chunk-H2O6NMLZ.js";
-import "../chunk-RRRD5EUI.js";
+import "../chunk-H2CCBRVG.js";
 import "../chunk-ZRLUUZHK.js";
 import "../chunk-OICAYRVH.js";
 import "../chunk-62UTAG2C.js";
@@ -20,7 +20,7 @@ import "../chunk-QMA3WVB7.js";
 import "../chunk-H7TETFLB.js";
 import "../chunk-D4ZL2OEQ.js";
 import "../chunk-YEW65ASC.js";
-import "../chunk-HQRWRRZJ.js";
+import "../chunk-W326GKML.js";
 import "../chunk-PIU5SSUV.js";
 import "../chunk-G6SRSWXB.js";
 export {

package/dist/primitives/search-input.cjs

@@ -0,0 +1,101 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+"use client";
+
+
+var _chunkVMXKT67Ecjs = require('../chunk-VMXKT67E.cjs');
+
+
+
+
+
+var _chunk7LDJAXRXcjs = require('../chunk-7LDJAXRX.cjs');
+require('../chunk-2HV2KKOE.cjs');
+require('../chunk-PQUSJEXL.cjs');
+require('../chunk-JDEXZGIY.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/search-input.tsx
+var _react = require('react');
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('react/jsx-runtime');
+var SearchInput = _react.forwardRef.call(void 0, function SearchInput2({
+  label,
+  value,
+  onValueChange,
+  loading = false,
+  loadingLabel = "Searching\u2026",
+  clearLabel = "Clear search",
+  controlSize = "default",
+  placeholder = label,
+  disabled = false,
+  readOnly = false,
+  className,
+  onKeyDown,
+  ...inputProps
+}, ref) {
+  const inputRef = _react.useRef.call(void 0, null);
+  _react.useImperativeHandle.call(void 0, ref, () => inputRef.current);
+  const canClear = value.length > 0 && !disabled && !readOnly;
+  const clear = () => {
+    if (!canClear) return;
+    onValueChange("");
+    _optionalChain([inputRef, 'access', _ => _.current, 'optionalAccess', _2 => _2.focus, 'call', _3 => _3()]);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _chunk7LDJAXRXcjs.InputGroup,
+    {
+      "data-slot": "search-input",
+      "data-disabled": disabled || void 0,
+      "aria-busy": loading || void 0,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "w-full rounded-full border-0 bg-muted px-1 shadow-none dark:bg-muted",
+        "has-[[data-slot=input-group-control]:focus-visible]:ring-2",
+        controlSize === "lg" ? "h-[48px]" : "h-[44px]",
+        disabled ? "opacity-60" : "hover:bg-muted/80",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7LDJAXRXcjs.InputGroupAddon, { align: "inline-start", className: "shrink-0 pl-3", children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVMXKT67Ecjs.Spinner, { "aria-label": loadingLabel, className: "size-5" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Search, { "aria-hidden": true, className: "size-5" }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunk7LDJAXRXcjs.InputGroupInput,
+          {
+            ...inputProps,
+            ref: inputRef,
+            type: "search",
+            "aria-label": label,
+            value,
+            placeholder,
+            disabled,
+            readOnly,
+            onChange: (event) => onValueChange(event.target.value),
+            onKeyDown: (event) => {
+              _optionalChain([onKeyDown, 'optionalCall', _4 => _4(event)]);
+              if (event.defaultPrevented || event.nativeEvent.isComposing || event.key !== "Escape" || !canClear) return;
+              event.preventDefault();
+              event.stopPropagation();
+              clear();
+            },
+            className: "h-full rounded-none pe-3 [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden"
+          }
+        ),
+        value.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7LDJAXRXcjs.InputGroupAddon, { align: "inline-end", className: "shrink-0 p-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunk7LDJAXRXcjs.InputGroupButton,
+          {
+            size: "icon-sm",
+            shape: "circle",
+            "aria-label": clearLabel,
+            disabled: disabled || readOnly,
+            onClick: clear,
+            className: "size-[44px] shrink-0",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { "aria-hidden": true })
+          }
+        ) })
+      ]
+    }
+  );
+});
+
+
+exports.SearchInput = SearchInput;

package/dist/primitives/search-input.d.cts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { InputHTMLAttributes } from 'react';
+
+interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "size"> {
+    /** Accessible name, also used as the placeholder unless one is supplied. */
+    label: string;
+    value: string;
+    onValueChange: (value: string) => void;
+    /** Replaces the search icon with an accessible loading indicator. */
+    loading?: boolean;
+    loadingLabel?: string;
+    clearLabel?: string;
+    /** Fixed pixel heights keep touch targets usable with any root font size. */
+    controlSize?: "default" | "lg";
+}
+/**
+ * A full-width search field on a quiet, rounded surface. The clear control
+ * and Escape clear its controlled value while keeping focus in the input.
+ * Fetching, debouncing and result ownership remain with the caller.
+ */
+declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { SearchInput, type SearchInputProps };

package/dist/primitives/search-input.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { InputHTMLAttributes } from 'react';
+
+interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "size"> {
+    /** Accessible name, also used as the placeholder unless one is supplied. */
+    label: string;
+    value: string;
+    onValueChange: (value: string) => void;
+    /** Replaces the search icon with an accessible loading indicator. */
+    loading?: boolean;
+    loadingLabel?: string;
+    clearLabel?: string;
+    /** Fixed pixel heights keep touch targets usable with any root font size. */
+    controlSize?: "default" | "lg";
+}
+/**
+ * A full-width search field on a quiet, rounded surface. The clear control
+ * and Escape clear its controlled value while keeping focus in the input.
+ * Fetching, debouncing and result ownership remain with the caller.
+ */
+declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { SearchInput, type SearchInputProps };

package/dist/primitives/search-input.js

@@ -0,0 +1,101 @@
+"use client";
+"use client";
+import {
+  Spinner
+} from "../chunk-QZBPZLAB.js";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput
+} from "../chunk-QTPPNK6F.js";
+import "../chunk-6FC65AZQ.js";
+import "../chunk-QMA3WVB7.js";
+import "../chunk-W326GKML.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/search-input.tsx
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { Search, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SearchInput = forwardRef(function SearchInput2({
+  label,
+  value,
+  onValueChange,
+  loading = false,
+  loadingLabel = "Searching\u2026",
+  clearLabel = "Clear search",
+  controlSize = "default",
+  placeholder = label,
+  disabled = false,
+  readOnly = false,
+  className,
+  onKeyDown,
+  ...inputProps
+}, ref) {
+  const inputRef = useRef(null);
+  useImperativeHandle(ref, () => inputRef.current);
+  const canClear = value.length > 0 && !disabled && !readOnly;
+  const clear = () => {
+    if (!canClear) return;
+    onValueChange("");
+    inputRef.current?.focus();
+  };
+  return /* @__PURE__ */ jsxs(
+    InputGroup,
+    {
+      "data-slot": "search-input",
+      "data-disabled": disabled || void 0,
+      "aria-busy": loading || void 0,
+      className: cn(
+        "w-full rounded-full border-0 bg-muted px-1 shadow-none dark:bg-muted",
+        "has-[[data-slot=input-group-control]:focus-visible]:ring-2",
+        controlSize === "lg" ? "h-[48px]" : "h-[44px]",
+        disabled ? "opacity-60" : "hover:bg-muted/80",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", className: "shrink-0 pl-3", children: loading ? /* @__PURE__ */ jsx(Spinner, { "aria-label": loadingLabel, className: "size-5" }) : /* @__PURE__ */ jsx(Search, { "aria-hidden": true, className: "size-5" }) }),
+        /* @__PURE__ */ jsx(
+          InputGroupInput,
+          {
+            ...inputProps,
+            ref: inputRef,
+            type: "search",
+            "aria-label": label,
+            value,
+            placeholder,
+            disabled,
+            readOnly,
+            onChange: (event) => onValueChange(event.target.value),
+            onKeyDown: (event) => {
+              onKeyDown?.(event);
+              if (event.defaultPrevented || event.nativeEvent.isComposing || event.key !== "Escape" || !canClear) return;
+              event.preventDefault();
+              event.stopPropagation();
+              clear();
+            },
+            className: "h-full rounded-none pe-3 [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden"
+          }
+        ),
+        value.length > 0 && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", className: "shrink-0 p-0", children: /* @__PURE__ */ jsx(
+          InputGroupButton,
+          {
+            size: "icon-sm",
+            shape: "circle",
+            "aria-label": clearLabel,
+            disabled: disabled || readOnly,
+            onClick: clear,
+            className: "size-[44px] shrink-0",
+            children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
+          }
+        ) })
+      ]
+    }
+  );
+});
+export {
+  SearchInput
+};

package/dist/primitives/spinner.cjs

@@ -1,23 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+var _chunkVMXKT67Ecjs = require('../chunk-VMXKT67E.cjs');
+require('../chunk-KWLSBTB2.cjs');
 
-// src/primitives/spinner.tsx
-var _lucidereact = require('lucide-react');
-var _jsxruntime = require('react/jsx-runtime');
-function Spinner({ className, ...props }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _lucidereact.Loader2,
-    {
-      "data-slot": "spinner",
-      role: "status",
-      "aria-label": "Loading",
-      className: _chunkKWLSBTB2cjs.cn.call(void 0, "size-4 animate-spin", className),
-      ...props
-    }
-  );
-}
 
-
-exports.Spinner = Spinner;
+exports.Spinner = _chunkVMXKT67Ecjs.Spinner;

package/dist/primitives/spinner.js

@@ -1,23 +1,8 @@
 "use client";
 import {
-  cn
-} from "../chunk-G6SRSWXB.js";
-
-// src/primitives/spinner.tsx
-import { Loader2 } from "lucide-react";
-import { jsx } from "react/jsx-runtime";
-function Spinner({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Loader2,
-    {
-      "data-slot": "spinner",
-      role: "status",
-      "aria-label": "Loading",
-      className: cn("size-4 animate-spin", className),
-      ...props
-    }
-  );
-}
+  Spinner
+} from "../chunk-QZBPZLAB.js";
+import "../chunk-G6SRSWXB.js";
 export {
   Spinner
 };

package/dist/primitives/split-action-button.cjs

@@ -9,7 +9,7 @@
 var _chunkZAITUDYDcjs = require('../chunk-ZAITUDYD.cjs');
 
 
-var _chunkL4DH72UFcjs = require('../chunk-L4DH72UF.cjs');
+var _chunkJDEXZGIYcjs = require('../chunk-JDEXZGIY.cjs');
 
 
 var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
@@ -35,7 +35,7 @@ var SplitActionButton = _react.forwardRef.call(void 0, function SplitActionButto
 }, ref) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref, className: _chunkKWLSBTB2cjs.cn.call(void 0, "inline-flex items-stretch", className), children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkL4DH72UFcjs.Button,
+      _chunkJDEXZGIYcjs.Button,
       {
         size,
         variant,
@@ -53,7 +53,7 @@ var SplitActionButton = _react.forwardRef.call(void 0, function SplitActionButto
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkZAITUDYDcjs.DropdownMenu, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZAITUDYDcjs.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkL4DH72UFcjs.Button,
+        _chunkJDEXZGIYcjs.Button,
         {
           size,
           variant,

package/dist/primitives/split-action-button.js

@@ -9,7 +9,7 @@ import {
 } from "../chunk-V4LE2HWP.js";
 import {
   Button
-} from "../chunk-HQRWRRZJ.js";
+} from "../chunk-W326GKML.js";
 import {
   cn
 } from "../chunk-G6SRSWXB.js";

package/dist/primitives/suggestion.cjs

@@ -2,10 +2,10 @@
 
 
 
-var _chunkSUB4BAYEcjs = require('../chunk-SUB4BAYE.cjs');
-require('../chunk-L4DH72UF.cjs');
+var _chunkM4V7OJNFcjs = require('../chunk-M4V7OJNF.cjs');
+require('../chunk-JDEXZGIY.cjs');
 require('../chunk-KWLSBTB2.cjs');
 
 
 
-exports.Suggestion = _chunkSUB4BAYEcjs.Suggestion; exports.Suggestions = _chunkSUB4BAYEcjs.Suggestions;
+exports.Suggestion = _chunkM4V7OJNFcjs.Suggestion; exports.Suggestions = _chunkM4V7OJNFcjs.Suggestions;

package/dist/primitives/suggestion.js

@@ -2,8 +2,8 @@
 import {
   Suggestion,
   Suggestions
-} from "../chunk-THWIJG5C.js";
-import "../chunk-HQRWRRZJ.js";
+} from "../chunk-IJG2B3Y2.js";
+import "../chunk-W326GKML.js";
 import "../chunk-G6SRSWXB.js";
 export {
   Suggestion,