@veevarts/design-system 2.10.0 → 2.12.0

package/dist/index.js

@@ -10434,29 +10434,30 @@ const $f = {
   searchLabel: a,
   searchPlaceholder: r,
   searchIcon: i,
-  children: s,
-  trailing: l,
-  searchWidth: o = "md",
-  className: c,
-  "data-testid": d = "admin-toolbar"
+  searchClearable: s = !1,
+  children: l,
+  trailing: o,
+  searchWidth: c = "md",
+  className: d,
+  "data-testid": f = "admin-toolbar"
 }) => {
-  const { ref: f, width: m } = Ot(), g = m > 0 && !Xt(m, Sf);
+  const { ref: m, width: g } = Ot(), h = g > 0 && !Xt(g, Sf);
   return /* @__PURE__ */ u(
     "div",
     {
-      ref: f,
+      ref: m,
       role: "search",
-      "data-testid": d,
+      "data-testid": f,
       "data-variant": "framed",
-      "data-size": g ? "narrow" : "wide",
-      className: p(Ke.base, g && Ke.narrow, c),
+      "data-size": h ? "narrow" : "wide",
+      className: p(Ke.base, h && Ke.narrow, d),
       children: [
-        s,
+        l,
         /* @__PURE__ */ n(
           "div",
           {
-            "data-testid": `${d}-search-slot`,
-            className: g ? Ke.searchNarrow : Ke.searchWide,
+            "data-testid": `${f}-search-slot`,
+            className: h ? Ke.searchNarrow : Ke.searchWide,
             children: /* @__PURE__ */ n(
               Ce,
               {
@@ -10465,20 +10466,22 @@ const $f = {
                 placeholder: r ?? a,
                 value: e,
                 onValueChange: t,
+                isClearable: s,
+                onClear: s ? () => t("") : void 0,
                 startContent: /* @__PURE__ */ n(
                   "span",
                   {
                     "aria-hidden": "true",
-                    "data-testid": `${d}-search-icon`,
+                    "data-testid": `${f}-search-icon`,
                     className: Ke.icon,
                     children: i ?? /* @__PURE__ */ n(T, { icon: "lucide:search" })
                   }
                 ),
-                "data-testid": `${d}-search`,
+                "data-testid": `${f}-search`,
                 variant: "bordered",
                 radius: "none",
                 classNames: {
-                  base: g ? Ke.inputBaseNarrow : o === "lg" ? Ke.inputBaseLg : Ke.inputBaseMd,
+                  base: h ? Ke.inputBaseNarrow : c === "lg" ? Ke.inputBaseLg : Ke.inputBaseMd,
                   inputWrapper: Ke.inputWrapper,
                   innerWrapper: Ke.innerWrapper,
                   input: Ke.input
@@ -10487,7 +10490,7 @@ const $f = {
             )
           }
         ),
-        l
+        o
       ]
     }
   );
@@ -10497,13 +10500,14 @@ const $f = {
   searchLabel: a,
   searchPlaceholder: r,
   searchIcon: i,
-  children: s,
-  trailing: l,
-  searchWidth: o = "md",
-  variant: c = "default",
-  className: d,
-  "data-testid": f = "admin-toolbar"
-}) => c === "framed" ? /* @__PURE__ */ n(
+  searchClearable: s = !1,
+  children: l,
+  trailing: o,
+  searchWidth: c = "md",
+  variant: d = "default",
+  className: f,
+  "data-testid": m = "admin-toolbar"
+}) => d === "framed" ? /* @__PURE__ */ n(
   Af,
   {
     searchValue: e,
@@ -10511,13 +10515,14 @@ const $f = {
     searchLabel: a,
     searchPlaceholder: r,
     searchIcon: i,
-    trailing: l,
-    searchWidth: o,
-    className: d,
-    "data-testid": f,
-    children: s
-  }
-) : /* @__PURE__ */ u("div", { role: "search", "data-testid": f, className: p("flex flex-wrap items-center gap-3 mb-4", d), children: [
+    searchClearable: s,
+    trailing: o,
+    searchWidth: c,
+    className: f,
+    "data-testid": m,
+    children: l
+  }
+) : /* @__PURE__ */ u("div", { role: "search", "data-testid": m, className: p("flex flex-wrap items-center gap-3 mb-4", f), children: [
   /* @__PURE__ */ n(
     Ce,
     {
@@ -10526,12 +10531,14 @@ const $f = {
       placeholder: r ?? a,
       value: e,
       onValueChange: t,
+      isClearable: s,
+      onClear: s ? () => t("") : void 0,
       startContent: i ? /* @__PURE__ */ n("span", { "aria-hidden": "true", className: "flex text-acct-muted", children: i }) : void 0,
-      "data-testid": `${f}-search`,
+      "data-testid": `${m}-search`,
       variant: "bordered",
       radius: "none",
       classNames: {
-        base: $f[o],
+        base: $f[c],
         inputWrapper: [
           "h-10 min-h-10 !h-10 rounded-[11px] border border-acct-border bg-acct-surface px-3",
           "data-[hover=true]:border-acct-rust-border",
@@ -10541,8 +10548,8 @@ const $f = {
       }
     }
   ),
-  s,
-  l ? /* @__PURE__ */ n("div", { className: "ml-auto", children: l }) : null
+  l,
+  o ? /* @__PURE__ */ n("div", { className: "ml-auto", children: o }) : null
 ] });
 Df.displayName = "AdminToolbar";
 const Ef = "ml-0.5 inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold text-primary-foreground", Ff = "ml-0.5 inline-flex min-w-[1.125rem] items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold text-primary-foreground", Lf = "h-9 gap-1.5 rounded-full border border-gray-200 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 data-[pressed=true]:bg-gray-50", _f = W.forwardRef(
@@ -11628,7 +11635,9 @@ mh.displayName = "ModalShellFooter";
 const fh = {
   2: "sm:grid-cols-2",
   3: "sm:grid-cols-3",
-  4: "sm:grid-cols-4"
+  4: "sm:grid-cols-4",
+  5: "sm:grid-cols-5",
+  6: "sm:grid-cols-6"
 }, hh = {
   1: "grid-cols-1",
   2: "grid-cols-2"

package/dist/patterns/AdminToolbar/AdminToolbar.d.ts

@@ -8,6 +8,8 @@ export interface AdminToolbarProps {
     searchPlaceholder?: string;
     /** Leading glyph inside the search box. */
     searchIcon?: React.ReactNode;
+    /** Shows a clear button inside the search box while it holds text. Off by default. */
+    searchClearable?: boolean;
     /** Filters, sort pickers, a toggle — laid out after the search box. */
     children?: React.ReactNode;
     /** Pushed to the far right, for a primary action. */

package/dist/patterns/TileSelect/TileSelect.d.ts

@@ -93,9 +93,10 @@ export interface TileSelectProps {
     moreLabel?: string;
     /**
      * Grid columns on >= sm. Default `3`. Mobile collapses to 2.
+     * `5` and `6` keep a full method set on one row on a wide surface.
      * Ignored by `variant="compact"`, which is a single strip.
      */
-    columnsDesktop?: 2 | 3 | 4;
+    columnsDesktop?: 2 | 3 | 4 | 5 | 6;
     columnsMobile?: 1 | 2;
     className?: string;
     'data-testid'?: string;

package/dist/patterns/grid-columns.d.ts

@@ -6,5 +6,5 @@
  * The literal Tailwind classes must stay spelled out (not interpolated) so
  * the JIT scanner keeps generating them.
  */
-export declare const GRID_DESKTOP_COLS: Record<2 | 3 | 4, string>;
+export declare const GRID_DESKTOP_COLS: Record<2 | 3 | 4 | 5 | 6, string>;
 export declare const GRID_MOBILE_COLS: Record<1 | 2, string>;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "2.10.0",
+    "version": "2.12.0",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",