@epicbagel/saas-kit 1.5.0 → 1.6.0

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,

package/dist/primitives/tag-input.cjs

@@ -11,7 +11,7 @@ var _chunkPQUSJEXLcjs = require('../chunk-PQUSJEXL.cjs');
 var _chunkI6GUOEBOcjs = require('../chunk-I6GUOEBO.cjs');
 
 
-var _chunkL4DH72UFcjs = require('../chunk-L4DH72UF.cjs');
+var _chunkJDEXZGIYcjs = require('../chunk-JDEXZGIY.cjs');
 require('../chunk-KWLSBTB2.cjs');
 
 // src/primitives/tag-input.tsx
@@ -48,7 +48,7 @@ function TagInput({
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex flex-wrap gap-2", children: value.map((tag) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkI6GUOEBOcjs.Badge, { variant: "secondary", className: "text-sm", children: [
       tag,
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkL4DH72UFcjs.Button,
+        _chunkJDEXZGIYcjs.Button,
         {
           variant: "ghost",
           size: "sm",
@@ -72,7 +72,7 @@ function TagInput({
         }
       ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkL4DH72UFcjs.Button,
+        _chunkJDEXZGIYcjs.Button,
         {
           type: "button",
           variant: "outline",

package/dist/primitives/tag-input.js

@@ -11,7 +11,7 @@ import {
 } from "../chunk-D4ZL2OEQ.js";
 import {
   Button
-} from "../chunk-HQRWRRZJ.js";
+} from "../chunk-W326GKML.js";
 import "../chunk-G6SRSWXB.js";
 
 // src/primitives/tag-input.tsx

package/dist/primitives/voice-dictation-button.cjs

@@ -2,9 +2,9 @@
 "use client";
 
 
-var _chunkEOUO3OROcjs = require('../chunk-EOUO3ORO.cjs');
-require('../chunk-L4DH72UF.cjs');
+var _chunkLKPM6DQPcjs = require('../chunk-LKPM6DQP.cjs');
+require('../chunk-JDEXZGIY.cjs');
 require('../chunk-KWLSBTB2.cjs');
 
 
-exports.VoiceDictationButton = _chunkEOUO3OROcjs.VoiceDictationButton;
+exports.VoiceDictationButton = _chunkLKPM6DQPcjs.VoiceDictationButton;

package/dist/primitives/voice-dictation-button.js

@@ -2,8 +2,8 @@
 "use client";
 import {
   VoiceDictationButton
-} from "../chunk-HAC32ALJ.js";
-import "../chunk-HQRWRRZJ.js";
+} from "../chunk-TI57GAQP.js";
+import "../chunk-W326GKML.js";
 import "../chunk-G6SRSWXB.js";
 export {
   VoiceDictationButton

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicbagel/saas-kit",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Accessible React primitives, layout components and design tokens for SaaS apps, built on Radix UI and Tailwind CSS v4.",
   "license": "MIT",
   "keywords": [
@@ -920,6 +920,16 @@
         "default": "./dist/primitives/scroll-area.cjs"
       }
     },
+    "./primitives/search-input": {
+      "import": {
+        "types": "./dist/primitives/search-input.d.ts",
+        "default": "./dist/primitives/search-input.js"
+      },
+      "require": {
+        "types": "./dist/primitives/search-input.d.cts",
+        "default": "./dist/primitives/search-input.cjs"
+      }
+    },
     "./primitives/section-header": {
       "import": {
         "types": "./dist/primitives/section-header.d.ts",