@devalok/shilp-sutra 0.28.0 → 0.29.0

package/dist/_chunks/badge-group.js

@@ -0,0 +1,299 @@
+"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 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 C } from "../ui/icon.js";
+import { BadgeIndicator as q } from "../ui/badge-indicator.js";
+import { A as M, m as w } from "./framer.js";
+const X = 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: {
+      variant: {
+        subtle: "border",
+        solid: "border border-transparent",
+        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",
+        md: "h-6 px-2.5 text-ds-xs gap-1.5",
+        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"
+    }
+  }
+), z = {
+  xs: "[&>svg]:h-2.5 [&>svg]:w-2.5",
+  sm: "[&>svg]:h-3 [&>svg]:w-3",
+  md: "[&>svg]:h-3 [&>svg]:w-3",
+  lg: "[&>svg]:h-3.5 [&>svg]:w-3.5"
+}, _ = {
+  xs: "pl-1",
+  sm: "pl-1.5",
+  md: "pl-2",
+  lg: "pl-2.5"
+}, $ = {
+  xs: "pr-0.5",
+  sm: "pr-1",
+  md: "pr-1",
+  lg: "pr-1.5"
+}, B = S.forwardRef(
+  ({
+    className: c,
+    variant: v,
+    color: f,
+    size: y,
+    asChild: x,
+    startIcon: t,
+    endIcon: o,
+    dot: n,
+    onDismiss: e,
+    onClick: r,
+    selected: l,
+    disabled: u,
+    maxWidth: N,
+    circle: A,
+    children: i,
+    style: j,
+    ...h
+  }, G) => {
+    const d = v ?? "subtle", k = f ?? "default", g = y ?? "md", m = x ? T : r && e ? "div" : r ? "button" : "span", K = k === "custom" ? {
+      ...d === "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" && {
+        backgroundColor: "var(--badge-color)",
+        color: "var(--badge-fg-color, white)",
+        borderColor: "transparent"
+      },
+      ...d === "outline" && {
+        backgroundColor: "transparent",
+        color: "var(--badge-color)",
+        borderColor: "color-mix(in oklch, var(--badge-color) 50%, transparent)"
+      },
+      ...d === "soft" && {
+        backgroundColor: "color-mix(in oklch, var(--badge-color) 12%, transparent)",
+        color: "var(--badge-color)",
+        borderColor: "transparent"
+      }
+    } : void 0, V = r && e ? (s) => {
+      (s.key === "Enter" || s.key === " ") && (s.preventDefault(), u || r(s)), h.onKeyDown?.(s);
+    } : h.onKeyDown, L = !!(n || t || r && l && !t && !n), P = !!(e || o);
+    return /* @__PURE__ */ p(
+      m,
+      {
+        ref: G,
+        className: b(
+          X({ variant: d, color: k, size: g }),
+          L && _[g],
+          P && $[g],
+          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]",
+          A && "justify-center px-0 aspect-square",
+          c
+        ),
+        style: { ...j, ...K, ...N ? { maxWidth: N } : void 0 },
+        onClick: u ? void 0 : r,
+        onKeyDown: V,
+        ...m === "button" && { type: "button" },
+        ...m === "button" && u ? { disabled: !0 } : {},
+        ...m === "div" && r ? { role: "button", tabIndex: 0 } : {},
+        ...h,
+        children: [
+          /* @__PURE__ */ a(M, { children: n && /* @__PURE__ */ p(
+            w.span,
+            {
+              initial: { scale: 0 },
+              animate: { scale: 1 },
+              exit: { scale: 0 },
+              transition: O.snappy,
+              className: "relative inline-flex h-1.5 w-1.5 shrink-0",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ a(
+                  w.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] }
+                  }
+                ),
+                /* @__PURE__ */ a("span", { className: "relative h-1.5 w-1.5 rounded-full bg-current" })
+              ]
+            },
+            "dot"
+          ) }),
+          r && !t && !n && /* @__PURE__ */ a(
+            w.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: D, size: "xs" })
+            }
+          ),
+          t && /* @__PURE__ */ a("span", { className: b("shrink-0", z[g]), children: t }),
+          N ? /* @__PURE__ */ a(
+            "span",
+            {
+              className: "truncate",
+              title: typeof i == "string" ? i : void 0,
+              children: i
+            }
+          ) : i,
+          o && /* @__PURE__ */ a("span", { className: b("shrink-0", z[g]), children: o }),
+          e && /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              onClick: (s) => {
+                s.stopPropagation(), e();
+              },
+              className: b(
+                "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"
+              ),
+              "aria-label": `Remove ${typeof i == "string" ? i : ""}`.trim() || "Remove",
+              children: /* @__PURE__ */ a(C, { icon: E, size: "xs" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+B.displayName = "Badge";
+const F = Object.assign(B, {
+  Indicator: q,
+  Group: R
+}), H = {
+  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
+}) {
+  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", H[v], x), children: [
+    r,
+    e && /* @__PURE__ */ p(
+      F,
+      {
+        variant: "outline",
+        color: "neutral",
+        size: f ?? "sm",
+        onClick: y,
+        children: [
+          "+",
+          l
+        ]
+      }
+    )
+  ] });
+}
+R.displayName = "BadgeGroup";
+export {
+  F as B,
+  R as a,
+  X as b
+};