@devalok/shilp-sutra 0.31.0 → 0.33.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Devalok Design & Strategy Studios
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/_chunks/badge-group.js

@@ -1,15 +1,45 @@
 "use client";
-import { jsxs as p, jsx as a } from "react/jsx-runtime";
-import * as S from "react";
-import { cn as b } from "../ui/lib/utils.js";
-import { IconCheck as E, IconX as I } from "@tabler/icons-react";
-import { a as O } from "./vendor-utils.js";
-import { springs as T } from "../ui/lib/motion.js";
-import { S as q } from "./primitives.js";
-import { Icon as C } from "../ui/icon.js";
-import { BadgeIndicator as M } from "../ui/badge-indicator.js";
-import { A as X, m as w } from "./framer.js";
-const _ = O(
+import { jsxs as v, jsx as o } from "react/jsx-runtime";
+import * as R from "react";
+import { cn as a } from "../ui/lib/utils.js";
+import { IconCheck as D, IconX as E } from "@tabler/icons-react";
+import { a as I } from "./vendor-utils.js";
+import { springs as O } from "../ui/lib/motion.js";
+import { S as T } from "./primitives.js";
+import { Icon as N } from "../ui/icon.js";
+import { BadgeIndicator as q } from "../ui/badge-indicator.js";
+import { u as X, A as _, m as F } from "./framer.js";
+const $ = {
+  default: { bg: "bg-surface-raised-hover", fg: "text-surface-fg-muted", border: "border-surface-border-strong", solid: "bg-neutral-5", solidFg: "text-surface-fg" },
+  accent: { bg: "bg-accent-3", fg: "text-accent-11", border: "border-accent-7", solid: "bg-accent-9", solidFg: "text-accent-fg" },
+  error: { bg: "bg-error-3", fg: "text-error-11", border: "border-error-7", solid: "bg-error-9", solidFg: "text-error-fg" },
+  success: { bg: "bg-success-3", fg: "text-success-11", border: "border-success-7", solid: "bg-success-9", solidFg: "text-success-fg" },
+  warning: { bg: "bg-warning-3", fg: "text-warning-11", border: "border-warning-7", solid: "bg-warning-9", solidFg: "text-warning-fg" },
+  info: { bg: "bg-info-3", fg: "text-info-11", border: "border-info-7", solid: "bg-info-9", solidFg: "text-info-fg" },
+  neutral: { bg: "bg-surface-raised-hover", fg: "text-surface-fg-muted", border: "border-surface-border-strong", solid: "bg-neutral-5", solidFg: "text-surface-fg" },
+  teal: { bg: "bg-category-teal-3", fg: "text-category-teal-11", border: "border-category-teal-7", solid: "bg-category-teal-9", solidFg: "text-white" },
+  amber: { bg: "bg-category-amber-3", fg: "text-category-amber-11", border: "border-category-amber-7", solid: "bg-category-amber-9", solidFg: "text-white" },
+  slate: { bg: "bg-category-slate-3", fg: "text-category-slate-11", border: "border-category-slate-7", solid: "bg-category-slate-9", solidFg: "text-white" },
+  indigo: { bg: "bg-category-indigo-3", fg: "text-category-indigo-11", border: "border-category-indigo-7", solid: "bg-category-indigo-9", solidFg: "text-white" },
+  cyan: { bg: "bg-category-cyan-3", fg: "text-category-cyan-11", border: "border-category-cyan-7", solid: "bg-category-cyan-9", solidFg: "text-white" },
+  orange: { bg: "bg-category-orange-3", fg: "text-category-orange-11", border: "border-category-orange-7", solid: "bg-category-orange-9", solidFg: "text-white" },
+  emerald: { bg: "bg-category-emerald-3", fg: "text-category-emerald-11", border: "border-category-emerald-7", solid: "bg-category-emerald-9", solidFg: "text-white" }
+};
+function H(n, d) {
+  if (d === "custom") return "";
+  const e = $[d];
+  switch (n) {
+    case "subtle":
+      return a(e.bg, e.fg, e.border);
+    case "solid":
+      return a(e.solid, e.solidFg, "border-transparent");
+    case "outline":
+      return a("bg-transparent", e.fg, e.border);
+    case "soft":
+      return a(e.bg, e.fg, "border-transparent");
+  }
+}
+const J = I(
   "relative inline-flex items-center rounded-full font-sans font-medium overflow-hidden isolate transition-[color,background-color,border-color,padding] duration-fast-02 ease-productive-standard select-none [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]",
   {
     variants: {
@@ -19,23 +49,6 @@ const _ = O(
         outline: "border",
         soft: "border border-transparent"
       },
-      color: {
-        default: "",
-        accent: "",
-        error: "",
-        success: "",
-        warning: "",
-        info: "",
-        neutral: "",
-        teal: "",
-        amber: "",
-        slate: "",
-        indigo: "",
-        cyan: "",
-        orange: "",
-        emerald: "",
-        custom: ""
-      },
       size: {
         xs: "h-4 px-1.5 text-[10px] gap-1",
         sm: "h-5 px-2 text-ds-xs gap-1",
@@ -43,71 +56,8 @@ const _ = O(
         lg: "h-7 px-3 text-ds-sm gap-1.5"
       }
     },
-    compoundVariants: [
-      // ── subtle × colors ──────────────────────────────────────────
-      { variant: "subtle", color: "default", className: "bg-surface-raised-hover text-surface-fg-muted border-surface-border-strong" },
-      { variant: "subtle", color: "accent", className: "bg-accent-3 text-accent-11 border-accent-7" },
-      { variant: "subtle", color: "error", className: "bg-error-3 text-error-11 border-error-7" },
-      { variant: "subtle", color: "success", className: "bg-success-3 text-success-11 border-success-7" },
-      { variant: "subtle", color: "warning", className: "bg-warning-3 text-warning-11 border-warning-7" },
-      { variant: "subtle", color: "info", className: "bg-info-3 text-info-11 border-info-7" },
-      { variant: "subtle", color: "neutral", className: "bg-surface-raised-hover text-surface-fg-muted border-surface-border-strong" },
-      { variant: "subtle", color: "teal", className: "bg-category-teal-3 text-category-teal-11 border-category-teal-7" },
-      { variant: "subtle", color: "amber", className: "bg-category-amber-3 text-category-amber-11 border-category-amber-7" },
-      { variant: "subtle", color: "slate", className: "bg-category-slate-3 text-category-slate-11 border-category-slate-7" },
-      { variant: "subtle", color: "indigo", className: "bg-category-indigo-3 text-category-indigo-11 border-category-indigo-7" },
-      { variant: "subtle", color: "cyan", className: "bg-category-cyan-3 text-category-cyan-11 border-category-cyan-7" },
-      { variant: "subtle", color: "orange", className: "bg-category-orange-3 text-category-orange-11 border-category-orange-7" },
-      { variant: "subtle", color: "emerald", className: "bg-category-emerald-3 text-category-emerald-11 border-category-emerald-7" },
-      // ── solid × colors ───────────────────────────────────────────
-      { variant: "solid", color: "default", className: "bg-neutral-5 text-surface-fg border-transparent" },
-      { variant: "solid", color: "accent", className: "bg-accent-9 text-accent-fg border-transparent" },
-      { variant: "solid", color: "error", className: "bg-error-9 text-error-fg border-transparent" },
-      { variant: "solid", color: "success", className: "bg-success-9 text-success-fg border-transparent" },
-      { variant: "solid", color: "warning", className: "bg-warning-9 text-warning-fg border-transparent" },
-      { variant: "solid", color: "info", className: "bg-info-9 text-info-fg border-transparent" },
-      { variant: "solid", color: "neutral", className: "bg-neutral-5 text-surface-fg border-transparent" },
-      { variant: "solid", color: "teal", className: "bg-category-teal-9 text-white border-transparent" },
-      { variant: "solid", color: "amber", className: "bg-category-amber-9 text-white border-transparent" },
-      { variant: "solid", color: "slate", className: "bg-category-slate-9 text-white border-transparent" },
-      { variant: "solid", color: "indigo", className: "bg-category-indigo-9 text-white border-transparent" },
-      { variant: "solid", color: "cyan", className: "bg-category-cyan-9 text-white border-transparent" },
-      { variant: "solid", color: "orange", className: "bg-category-orange-9 text-white border-transparent" },
-      { variant: "solid", color: "emerald", className: "bg-category-emerald-9 text-white border-transparent" },
-      // ── outline × colors ─────────────────────────────────────────
-      { variant: "outline", color: "default", className: "bg-transparent text-surface-fg-muted border-surface-border-strong" },
-      { variant: "outline", color: "accent", className: "bg-transparent text-accent-11 border-accent-7" },
-      { variant: "outline", color: "error", className: "bg-transparent text-error-11 border-error-7" },
-      { variant: "outline", color: "success", className: "bg-transparent text-success-11 border-success-7" },
-      { variant: "outline", color: "warning", className: "bg-transparent text-warning-11 border-warning-7" },
-      { variant: "outline", color: "info", className: "bg-transparent text-info-11 border-info-7" },
-      { variant: "outline", color: "neutral", className: "bg-transparent text-surface-fg-muted border-surface-border-strong" },
-      { variant: "outline", color: "teal", className: "bg-transparent text-category-teal-11 border-category-teal-7" },
-      { variant: "outline", color: "amber", className: "bg-transparent text-category-amber-11 border-category-amber-7" },
-      { variant: "outline", color: "slate", className: "bg-transparent text-category-slate-11 border-category-slate-7" },
-      { variant: "outline", color: "indigo", className: "bg-transparent text-category-indigo-11 border-category-indigo-7" },
-      { variant: "outline", color: "cyan", className: "bg-transparent text-category-cyan-11 border-category-cyan-7" },
-      { variant: "outline", color: "orange", className: "bg-transparent text-category-orange-11 border-category-orange-7" },
-      { variant: "outline", color: "emerald", className: "bg-transparent text-category-emerald-11 border-category-emerald-7" },
-      // ── soft × colors ────────────────────────────────────────────
-      { variant: "soft", color: "default", className: "bg-surface-raised-hover text-surface-fg-muted border-transparent" },
-      { variant: "soft", color: "accent", className: "bg-accent-3 text-accent-11 border-transparent" },
-      { variant: "soft", color: "error", className: "bg-error-3 text-error-11 border-transparent" },
-      { variant: "soft", color: "success", className: "bg-success-3 text-success-11 border-transparent" },
-      { variant: "soft", color: "warning", className: "bg-warning-3 text-warning-11 border-transparent" },
-      { variant: "soft", color: "info", className: "bg-info-3 text-info-11 border-transparent" },
-      { variant: "soft", color: "neutral", className: "bg-surface-raised-hover text-surface-fg-muted border-transparent" },
-      { variant: "soft", color: "teal", className: "bg-category-teal-3 text-category-teal-11 border-transparent" },
-      { variant: "soft", color: "amber", className: "bg-category-amber-3 text-category-amber-11 border-transparent" },
-      { variant: "soft", color: "slate", className: "bg-category-slate-3 text-category-slate-11 border-transparent" },
-      { variant: "soft", color: "indigo", className: "bg-category-indigo-3 text-category-indigo-11 border-transparent" },
-      { variant: "soft", color: "cyan", className: "bg-category-cyan-3 text-category-cyan-11 border-transparent" },
-      { variant: "soft", color: "orange", className: "bg-category-orange-3 text-category-orange-11 border-transparent" },
-      { variant: "soft", color: "emerald", className: "bg-category-emerald-3 text-category-emerald-11 border-transparent" }
-    ],
     defaultVariants: {
       variant: "subtle",
-      color: "default",
       size: "md"
     }
   }
@@ -116,140 +66,141 @@ const _ = O(
   sm: "[&>svg]:h-3 [&>svg]:w-3",
   md: "[&>svg]:h-3 [&>svg]:w-3",
   lg: "[&>svg]:h-3.5 [&>svg]:w-3.5"
-}, $ = {
+}, Q = {
   xs: "pl-1",
   sm: "pl-1.5",
   md: "pl-2",
   lg: "pl-2.5"
-}, F = {
+}, U = {
   xs: "pr-0.5",
   sm: "pr-1",
   md: "pr-1",
   lg: "pr-1.5"
-}, B = S.forwardRef(
+}, S = R.forwardRef(
   ({
-    className: c,
-    variant: v,
-    color: f,
-    size: y,
-    asChild: x,
-    startIcon: t,
-    endIcon: o,
-    dot: n,
-    onDismiss: e,
+    className: n,
+    variant: d,
+    color: e,
+    size: x,
+    asChild: h,
+    startIcon: s,
+    endIcon: i,
+    dot: g,
+    onDismiss: t,
     onClick: r,
     selected: l,
-    disabled: u,
-    maxWidth: N,
+    disabled: p,
+    maxWidth: y,
     truncate: A,
     circle: j,
-    children: i,
+    children: b,
     style: G,
-    ...h
+    ...w
   }, K) => {
-    const d = v ?? "subtle", k = f ?? "default", g = y ?? "md", m = x ? q : r && e ? "div" : r ? "button" : "span", V = k === "custom" ? {
-      ...d === "subtle" && {
+    const k = X(), u = d ?? "subtle", C = e ?? "default", f = x ?? "md", m = h ? T : r && t ? "div" : r ? "button" : "span", M = C === "custom" ? {
+      ...u === "subtle" && {
         backgroundColor: "color-mix(in oklch, var(--badge-color) 15%, transparent)",
         color: "var(--badge-color)",
         borderColor: "color-mix(in oklch, var(--badge-color) 40%, transparent)"
       },
-      ...d === "solid" && {
+      ...u === "solid" && {
         backgroundColor: "var(--badge-color)",
         color: "var(--badge-fg-color, white)",
         borderColor: "transparent"
       },
-      ...d === "outline" && {
+      ...u === "outline" && {
         backgroundColor: "transparent",
         color: "var(--badge-color)",
         borderColor: "color-mix(in oklch, var(--badge-color) 50%, transparent)"
       },
-      ...d === "soft" && {
+      ...u === "soft" && {
         backgroundColor: "color-mix(in oklch, var(--badge-color) 12%, transparent)",
         color: "var(--badge-color)",
         borderColor: "transparent"
       }
-    } : void 0, L = r && e ? (s) => {
-      (s.key === "Enter" || s.key === " ") && (s.preventDefault(), u || r(s)), h.onKeyDown?.(s);
-    } : h.onKeyDown, P = !!(n || t || r && l && !t && !n), D = !!(e || o);
-    return /* @__PURE__ */ p(
+    } : void 0, L = r && t ? (c) => {
+      (c.key === "Enter" || c.key === " ") && (c.preventDefault(), p || r(c)), w.onKeyDown?.(c);
+    } : w.onKeyDown, P = !!(g || s || r && l && !s && !g), V = !!(t || i);
+    return /* @__PURE__ */ v(
       m,
       {
         ref: K,
-        className: b(
-          _({ variant: d, color: k, size: g }),
-          P && $[g],
-          D && F[g],
+        className: a(
+          J({ variant: u, size: f }),
+          H(u, C),
+          P && Q[f],
+          V && U[f],
           r && "cursor-pointer hover:brightness-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 transition-[color,background-color,border-color,transform,filter] duration-moderate-01 ease-productive-exit hover:duration-fast-02 hover:ease-productive-entrance active:scale-[0.95] active:brightness-[0.92] active:duration-[0ms]",
           l && "ring-1 ring-current/20 transition-shadow duration-fast-02",
-          u && "opacity-action-disabled pointer-events-none saturate-[0.3]",
+          p && "opacity-action-disabled pointer-events-none saturate-[0.3]",
           j && "justify-center px-0 aspect-square",
-          c
+          n
         ),
-        style: { ...G, ...V, ...N ? { maxWidth: N } : void 0 },
-        onClick: u ? void 0 : r,
+        style: { ...G, ...M, ...y ? { maxWidth: y } : void 0 },
+        onClick: p ? void 0 : r,
         onKeyDown: L,
         ...m === "button" && { type: "button" },
-        ...m === "button" && u ? { disabled: !0 } : {},
+        ...m === "button" && p ? { disabled: !0 } : {},
         ...m === "div" && r ? { role: "button", tabIndex: 0 } : {},
-        ...h,
+        ...w,
         children: [
-          /* @__PURE__ */ a(X, { children: n && /* @__PURE__ */ p(
-            w.span,
+          /* @__PURE__ */ o(_, { children: g && /* @__PURE__ */ v(
+            F.span,
             {
               initial: { scale: 0 },
               animate: { scale: 1 },
               exit: { scale: 0 },
-              transition: T.snappy,
+              transition: O.snappy,
               className: "relative inline-flex h-1.5 w-1.5 shrink-0",
               "aria-hidden": "true",
               children: [
-                /* @__PURE__ */ a(
-                  w.span,
+                /* @__PURE__ */ o(
+                  F.span,
                   {
                     className: "absolute inset-0 rounded-full bg-current",
-                    animate: { scale: [1, 2.5], opacity: [0.35, 0] },
-                    transition: { repeat: 1 / 0, repeatDelay: 0.3, duration: 1.2, ease: [0, 0, 0.58, 1] }
+                    animate: k ? void 0 : { scale: [1, 2.5], opacity: [0.35, 0] },
+                    transition: k ? { duration: 0 } : { repeat: 1 / 0, repeatDelay: 0.3, duration: 1.2, ease: [0, 0, 0.58, 1] }
                   }
                 ),
-                /* @__PURE__ */ a("span", { className: "relative h-1.5 w-1.5 rounded-full bg-current" })
+                /* @__PURE__ */ o("span", { className: "relative h-1.5 w-1.5 rounded-full bg-current" })
               ]
             },
             "dot"
           ) }),
-          r && !t && !n && /* @__PURE__ */ a(
-            w.span,
+          r && !s && !g && /* @__PURE__ */ o(
+            F.span,
             {
               initial: !1,
               animate: l ? { opacity: 1, scale: 1, width: "auto", marginRight: 0 } : { opacity: 0, scale: 0.5, width: 0, marginRight: -4 },
               transition: { type: "tween", duration: 0.15, ease: [0.2, 0, 0.38, 0.9] },
               className: "inline-flex shrink-0 overflow-hidden",
               "aria-hidden": !l,
-              children: /* @__PURE__ */ a(C, { icon: E, size: "xs" })
+              children: /* @__PURE__ */ o(N, { icon: D, size: "xs" })
             }
           ),
-          t && /* @__PURE__ */ a("span", { className: b("shrink-0", z[g]), children: t }),
-          A || N ? /* @__PURE__ */ a(
+          s && /* @__PURE__ */ o("span", { className: a("shrink-0", z[f]), children: s }),
+          A || y ? /* @__PURE__ */ o(
             "span",
             {
               className: "truncate",
-              title: typeof i == "string" ? i : void 0,
-              children: i
+              title: typeof b == "string" ? b : void 0,
+              children: b
             }
-          ) : i,
-          o && /* @__PURE__ */ a("span", { className: b("shrink-0", z[g]), children: o }),
-          e && /* @__PURE__ */ a(
+          ) : b,
+          i && /* @__PURE__ */ o("span", { className: a("shrink-0", z[f]), children: i }),
+          t && /* @__PURE__ */ o(
             "button",
             {
               type: "button",
-              onClick: (s) => {
-                s.stopPropagation(), e();
+              onClick: (c) => {
+                c.stopPropagation(), t();
               },
-              className: b(
+              className: a(
                 "shrink-0 rounded-full text-current/60 hover:text-current hover:bg-current/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-9",
-                g === "xs" ? "p-0 -mr-0.5 min-w-[16px] min-h-[16px]" : "p-px"
+                f === "xs" ? "p-0 -mr-0.5 min-w-[16px] min-h-[16px]" : "p-px"
               ),
-              "aria-label": `Remove ${typeof i == "string" ? i : ""}`.trim() || "Remove",
-              children: /* @__PURE__ */ a(C, { icon: I, size: "xs" })
+              "aria-label": `Remove ${typeof b == "string" ? b : ""}`.trim() || "Remove",
+              children: /* @__PURE__ */ o(N, { icon: E, size: "xs" })
             }
           )
         ]
@@ -257,33 +208,33 @@ const _ = O(
     );
   }
 );
-B.displayName = "Badge";
-const H = Object.assign(B, {
-  Indicator: M,
-  Group: R
-}), J = {
+S.displayName = "Badge";
+const W = Object.assign(S, {
+  Indicator: q,
+  Group: B
+}), Y = {
   tight: "gap-1",
   default: "gap-1.5",
   loose: "gap-2"
 };
-function R({
-  max: c,
-  gap: v = "default",
-  size: f,
-  onOverflowClick: y,
-  className: x,
-  children: t
+function B({
+  max: n,
+  gap: d = "default",
+  size: e,
+  onOverflowClick: x,
+  className: h,
+  children: s
 }) {
-  const o = S.Children.toArray(t), n = o.length, e = c !== void 0 && n > c, r = e ? o.slice(0, c) : o, l = e ? n - c : 0;
-  return /* @__PURE__ */ p("div", { className: b("flex flex-wrap items-center", J[v], x), children: [
+  const i = R.Children.toArray(s), g = i.length, t = n !== void 0 && g > n, r = t ? i.slice(0, n) : i, l = t ? g - n : 0;
+  return /* @__PURE__ */ v("div", { className: a("flex flex-wrap items-center", Y[d], h), children: [
     r,
-    e && /* @__PURE__ */ p(
-      H,
+    t && /* @__PURE__ */ v(
+      W,
       {
         variant: "outline",
         color: "neutral",
-        size: f ?? "sm",
-        onClick: y,
+        size: e ?? "sm",
+        onClick: x,
         children: [
           "+",
           l
@@ -292,9 +243,9 @@ function R({
     )
   ] });
 }
-R.displayName = "BadgeGroup";
+B.displayName = "BadgeGroup";
 export {
-  H as B,
-  R as a,
-  _ as b
+  W as B,
+  B as a,
+  J as b
 };