@devalok/shilp-sutra 0.18.0 → 0.18.2

package/llms.txt

@@ -17,8 +17,8 @@
 **New motion system:**
 - `import { MotionProvider, springs, tweens } from '@devalok/shilp-sutra/motion'`
 - `import { MotionFade, MotionCollapse, MotionSlide, MotionPop, MotionScale, MotionStagger } from '@devalok/shilp-sutra/motion/primitives'`
-- Springs: `springs.bouncy`, `springs.smooth`, `springs.snappy`, `springs.gentle`, `springs.rigid`
-- Tweens: `tweens.fade`, `tweens.standard`, `tweens.gentle`
+- Springs: `springs.snappy`, `springs.smooth`, `springs.bouncy`, `springs.gentle`
+- Tweens: `tweens.fade`, `tweens.colorShift`
 
 **Spinner v2:** New props `state?: 'spinning' | 'success' | 'error'`, `variant?: 'filled' | 'bare'`, `delay?: number`, `onComplete?: () => void`
 
@@ -286,8 +286,8 @@ NOTIFICATION SELECTION GUIDE:
 ## Server-Safe Components (no "use client")
 
 These can be imported directly in Next.js Server Components:
-- UI: Text, Skeleton, Spinner, Stack, Container, Table (and sub-components), Code, VisuallyHidden
-- Composed: ContentCard, EmptyState, PageHeader, LoadingSkeleton, PageSkeletons, PriorityIndicator, StatusBadge
+- UI: Text, Skeleton, Stack, Container, Table (and sub-components), Code, VisuallyHidden
+- Composed: ContentCard, PageHeader, LoadingSkeleton, PageSkeletons, PriorityIndicator
 
 Use per-component imports for server components:
   import { Text } from '@devalok/shilp-sutra/ui/text'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devalok/shilp-sutra",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "description": "Devalok Design System — tokens, components, and patterns for Next.js",
   "license": "MIT",
   "type": "module",
@@ -483,6 +483,11 @@
       "default": "./dist/shell/top-bar.js",
       "types": "./dist/shell/top-bar.d.ts"
     },
+    "./shell/command-registry": {
+      "import": "./dist/shell/command-registry.js",
+      "default": "./dist/shell/command-registry.js",
+      "types": "./dist/shell/command-registry.d.ts"
+    },
     "./hooks": {
       "import": "./dist/hooks/index.js",
       "default": "./dist/hooks/index.js",
@@ -509,6 +514,12 @@
       "default": "./dist/tailwind/index.js",
       "types": "./dist/tailwind/index.d.ts"
     },
+    "./tailwind/preset": {
+      "require": "./dist/tailwind/index.cjs",
+      "import": "./dist/tailwind/preset.js",
+      "default": "./dist/tailwind/preset.js",
+      "types": "./dist/tailwind/preset.d.ts"
+    },
     "./utils": {
       "import": "./dist/ui/lib/utils.js",
       "default": "./dist/ui/lib/utils.js",
@@ -520,6 +531,16 @@
       "default": "./dist/ui/lib/utils.js",
       "types": "./dist/ui/lib/utils.d.ts"
     },
+    "./ui/lib/motion": {
+      "import": "./dist/ui/lib/motion.js",
+      "default": "./dist/ui/lib/motion.js",
+      "types": "./dist/ui/lib/motion.d.ts"
+    },
+    "./ui/lib/date-utils": {
+      "import": "./dist/ui/lib/date-utils.js",
+      "default": "./dist/ui/lib/date-utils.js",
+      "types": "./dist/ui/lib/date-utils.d.ts"
+    },
     "./composed/lib/string-utils": {
       "import": "./dist/composed/lib/string-utils.js",
       "default": "./dist/composed/lib/string-utils.js",
@@ -534,18 +555,22 @@
       "import": "./dist/motion/primitives-index.js",
       "default": "./dist/motion/primitives-index.js",
       "types": "./dist/motion/primitives-index.d.ts"
-    }
+    },
+    "./docs/*": "./docs/components/*"
   },
   "files": [
     "dist",
+    "docs/components",
     "fonts",
     "README.md",
     "llms.txt",
     "llms-full.txt"
   ],
   "scripts": {
-    "build": "vite build && pnpm build:tokens && node scripts/fix-dts-primitives.mjs && node scripts/inject-use-client.mjs && node scripts/build-tailwind-cjs.mjs",
+    "build": "vite build && pnpm build:tokens && node scripts/fix-dts-primitives.mjs && node scripts/inject-use-client.mjs && node scripts/build-tailwind-cjs.mjs && pnpm build:docs",
     "build:tokens": "node scripts/copy-tokens.mjs",
+    "build:docs": "node scripts/build-component-docs.mjs",
+    "build:docs:check": "node scripts/build-component-docs.mjs --check",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src/",
     "test": "vitest run",

package/dist/_chunks/avatar.js

@@ -1,52 +0,0 @@
-"use client";
-import { jsxs as p, jsx as l } from "react/jsx-runtime";
-import * as i from "react";
-import { R as n, I as o, F as t } from "./primitives.js";
-import { ag as u } from "./vendor-utils.js";
-import { t as h } from "./motion2.js";
-import { c as r } from "./utils.js";
-import { m as w } from "./motion.js";
-const x = u("relative flex shrink-0 overflow-hidden", {
-  variants: {
-    size: {
-      xs: "h-ds-xs w-ds-xs",
-      sm: "h-ds-sm w-ds-sm",
-      md: "h-ds-md w-ds-md",
-      lg: "h-ds-lg w-ds-lg",
-      xl: "h-ds-xl w-ds-xl"
-    },
-    shape: {
-      circle: "rounded-ds-full",
-      square: "rounded-ds-none",
-      rounded: "rounded-ds-md"
-    }
-  },
-  defaultVariants: { size: "md", shape: "circle" }
-}), g = {
-  online: "bg-success-9",
-  offline: "bg-surface-3",
-  busy: "bg-error-9",
-  away: "bg-warning-9"
-}, b = {
-  online: "Online",
-  offline: "Offline",
-  busy: "Busy",
-  away: "Away"
-}, y = {
-  xs: "h-ds-02b w-ds-02b",
-  sm: "h-[8px] w-[8px]",
-  md: "h-ds-03 w-ds-03",
-  lg: "h-[12px] w-[12px]",
-  xl: "h-ds-04 w-ds-04"
-}, N = i.forwardRef(({ className: s, size: a, shape: e, status: d, children: m, ...c }, f) => p("span", { className: "relative inline-flex shrink-0", children: [l(n, { ref: f, className: r(x({ size: a, shape: e }), s), ...c, children: m }), d && l("span", { className: r("absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-1", g[d], y[a ?? "md"]), role: "img", "aria-label": b[d] })] }));
-N.displayName = n.displayName;
-const v = i.forwardRef(({ className: s, ...a }, e) => l(w.span, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: h.fade, className: "h-full w-full", children: l(o, { ref: e, className: r("aspect-square h-full w-full", s), ...a }) }));
-v.displayName = o.displayName;
-const R = i.forwardRef(({ className: s, ...a }, e) => l(t, { ref: e, className: r("flex h-full w-full items-center justify-center rounded-ds-full bg-accent-2 text-accent-11", s), ...a }));
-R.displayName = t.displayName;
-export {
-  N as A,
-  v as a,
-  R as b,
-  x as c
-};

package/dist/_chunks/button-group.js

@@ -1,27 +0,0 @@
-"use client";
-import { jsx as r } from "react/jsx-runtime";
-import * as o from "react";
-import { c as f } from "./utils.js";
-const l = o.createContext({});
-function h() {
-  return o.useContext(l);
-}
-const p = o.forwardRef(({ className: u, variant: t, color: n, size: e, orientation: i = "horizontal", children: d, ...s }, c) => {
-  const a = o.useMemo(() => ({ variant: t, color: n, size: e }), [t, n, e]);
-  return r(l.Provider, { value: a, children: r("div", { ref: c, role: "group", className: f("inline-flex", i === "horizontal" ? [
-    "flex-row",
-    "[&>*:not(:first-child)]:rounded-l-none",
-    "[&>*:not(:last-child)]:rounded-r-none",
-    "[&>*:not(:first-child)]:-ml-px"
-  ] : [
-    "flex-col",
-    "[&>*:not(:first-child)]:rounded-t-none",
-    "[&>*:not(:last-child)]:rounded-b-none",
-    "[&>*:not(:first-child)]:-mt-px"
-  ], u), ...s, children: d }) });
-});
-p.displayName = "ButtonGroup";
-export {
-  p as B,
-  h as u
-};

package/dist/_chunks/button.js

@@ -1,113 +0,0 @@
-"use client";
-import { jsx as e, jsxs as C } from "react/jsx-runtime";
-import { ag as K } from "./vendor-utils.js";
-import { IconCheck as L, IconX as O } from "@tabler/icons-react";
-import { S as P, a as Q } from "./primitives.js";
-import * as n from "react";
-import { u as U } from "./button-group.js";
-import { s as Y } from "./motion2.js";
-import { c as a } from "./utils.js";
-import { S as Z } from "./spinner.js";
-import { A as _, m as $ } from "./motion.js";
-const R = K("inline-flex items-center justify-center gap-ds-03 whitespace-nowrap font-sans font-semibold select-none border border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled", {
-  variants: {
-    variant: {
-      solid: "",
-      default: "",
-      // alias → solid
-      outline: "",
-      ghost: "",
-      destructive: "",
-      // alias → solid + error
-      link: "text-info-11 underline-offset-4 hover:underline active:opacity-80"
-    },
-    color: {
-      default: "",
-      error: ""
-    },
-    size: {
-      sm: "h-ds-sm rounded-ds-md px-ds-04 text-ds-sm",
-      md: "h-ds-md rounded-ds-md px-ds-05 text-ds-md",
-      lg: "h-ds-lg rounded-ds-lg px-ds-06 text-ds-base",
-      icon: "h-ds-md w-ds-md rounded-ds-md",
-      // alias → icon-md
-      "icon-sm": "h-ds-sm w-ds-sm rounded-ds-md",
-      "icon-md": "h-ds-md w-ds-md rounded-ds-md",
-      "icon-lg": "h-ds-lg w-ds-lg rounded-ds-lg"
-    }
-  },
-  compoundVariants: [
-    // solid + default (primary)
-    { variant: "solid", color: "default", className: "bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-01 hover:shadow-brand" },
-    // "default" alias → same as solid + default
-    { variant: "default", color: "default", className: "bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-01 hover:shadow-brand" },
-    { variant: "default", color: "error", className: "bg-error-9 text-accent-fg hover:bg-error-9 active:bg-error-9 shadow-01" },
-    // "destructive" alias → solid + error
-    { variant: "destructive", color: "default", className: "bg-error-9 text-accent-fg hover:bg-error-9 active:bg-error-9 shadow-01" },
-    { variant: "destructive", color: "error", className: "bg-error-9 text-accent-fg hover:bg-error-9 active:bg-error-9 shadow-01" },
-    // solid + error
-    { variant: "solid", color: "error", className: "bg-error-9 text-accent-fg hover:bg-error-9 active:bg-error-9 shadow-01" },
-    // outline + default (secondary)
-    { variant: "outline", color: "default", className: "bg-transparent text-accent-11 border-accent-7 hover:bg-accent-2 active:bg-surface-4" },
-    // outline + error (error-ghost)
-    { variant: "outline", color: "error", className: "bg-transparent text-error-11 border border-error-7 hover:bg-error-3 active:bg-error-3" },
-    // ghost + default
-    { variant: "ghost", color: "default", className: "bg-transparent text-surface-fg-muted hover:bg-surface-2 hover:text-surface-fg active:bg-surface-4" },
-    // ghost + error
-    { variant: "ghost", color: "error", className: "bg-transparent text-error-11 hover:bg-error-3 hover:text-error-11 active:bg-error-3" }
-  ],
-  defaultVariants: {
-    variant: "solid",
-    color: "default",
-    size: "md"
-  }
-}), W = {
-  sm: "h-ico-sm w-ico-sm [&>svg]:h-ico-sm [&>svg]:w-ico-sm",
-  md: "h-ico-sm w-ico-sm [&>svg]:h-ico-sm [&>svg]:w-ico-sm",
-  lg: "h-ico-md w-ico-md [&>svg]:h-ico-md [&>svg]:w-ico-md",
-  icon: "h-ico-sm w-ico-sm [&>svg]:h-ico-sm [&>svg]:w-ico-sm",
-  "icon-sm": "h-ico-sm w-ico-sm [&>svg]:h-ico-sm [&>svg]:w-ico-sm",
-  "icon-md": "h-ico-sm w-ico-sm [&>svg]:h-ico-sm [&>svg]:w-ico-sm",
-  "icon-lg": "h-ico-md w-ico-md [&>svg]:h-ico-md [&>svg]:w-ico-md"
-}, ee = {
-  sm: "sm",
-  md: "sm",
-  lg: "md",
-  icon: "sm",
-  "icon-sm": "sm",
-  "icon-md": "sm",
-  "icon-lg": "md"
-}, re = n.forwardRef(({ className: h, variant: A, color: B, size: V, asChild: E = !1, startIcon: b, endIcon: p, loading: F = !1, loadingPosition: d = "start", fullWidth: w = !1, disabled: x, onClick: M, onClickAsync: m, asyncFeedbackDuration: T = 1500, children: c, ...N }, y) => {
-  const u = U(), S = A ?? u.variant, z = B ?? u.color, i = V ?? u.size ?? "md", f = W[i], G = ee[i], [t, l] = n.useState("idle"), j = n.useRef(), o = n.useRef(!0);
-  n.useEffect(() => () => {
-    o.current = !1, clearTimeout(j.current);
-  }, []);
-  const I = (v) => {
-    !m || t !== "idle" || (l("loading"), m(v).then(() => {
-      o.current && l("success");
-    }).catch(() => {
-      o.current && l("error");
-    }).finally(() => {
-      o.current && (j.current = setTimeout(() => {
-        o.current && l("idle");
-      }, T));
-    }));
-  }, k = !!m, r = k ? t === "loading" : F, s = t === "success" || t === "error", g = r ? e(Z, { size: G }) : null;
-  if (E) {
-    const v = {
-      className: a(R({ variant: S, color: z, size: i }), w && "w-full", h),
-      ref: y,
-      disabled: x || r,
-      "aria-busy": r || void 0,
-      ...N
-    };
-    return e(P, { ...v, children: e(Q, { children: c }) });
-  }
-  const X = () => r && d === "start" ? g : b ? e("span", { className: a("inline-flex shrink-0 items-center justify-center", f), children: b }) : null, q = () => r && d === "end" ? g : p ? e("span", { className: a("inline-flex shrink-0 items-center justify-center", f), children: p }) : null, D = () => r && d === "center" ? C("span", { className: "relative inline-flex items-center justify-center", children: [e("span", { className: "invisible", children: c }), e("span", { className: "absolute inset-0 flex items-center justify-center", children: g })] }) : c, H = s ? t === "success" ? "bg-success-9 text-accent-fg border-transparent hover:bg-success-9" : "bg-error-9 text-accent-fg border-transparent hover:bg-error-9" : void 0, J = s ? e(_, { mode: "wait", children: e($.span, { initial: { opacity: 0, scale: 0.5 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.5 }, transition: Y.bouncy, className: a("inline-flex shrink-0 items-center justify-center", f), children: t === "success" ? e(L, { className: "h-full w-full" }) : e(O, { className: "h-full w-full" }) }, t) }) : null;
-  return C("button", { ...N, className: a(R({ variant: S, color: z, size: i }), w && "w-full", !r && !s && "active:scale-[0.97] transition-transform duration-100", H, s && "transition-colors duration-200", h), ref: y, disabled: x || r || s, "aria-busy": r || void 0, onClick: k ? I : M, children: [s ? J : X(), s ? c : D(), s ? null : q()] });
-});
-re.displayName = "Button";
-export {
-  re as B,
-  R as b
-};

package/dist/_chunks/card.js

@@ -1,50 +0,0 @@
-"use client";
-import { jsx as s } from "react/jsx-runtime";
-import * as o from "react";
-import { bc as f, bd as h } from "./primitives.js";
-import { s as l, m as v } from "./motion2.js";
-import { c as d } from "./utils.js";
-import { m } from "./motion.js";
-import { ag as N } from "./vendor-utils.js";
-const C = o.forwardRef(({ className: e, error: a, checked: r, defaultChecked: n, onCheckedChange: t, ...i }, b) => {
-  const [u, p] = o.useState(n ?? !1), g = r !== void 0 ? r : u, w = o.useCallback((c) => {
-    r === void 0 && p(c), t == null || t(c);
-  }, [r, t]);
-  return s(f, { className: d("peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-ds-full border-2 border-surface-border-strong shadow-01 transition-colors duration-fast-01 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled data-[state=checked]:border-transparent data-[state=checked]:bg-accent-9 data-[state=unchecked]:bg-surface-border-strong", a && "border-error-7 data-[state=checked]:bg-error-9", e), checked: r, defaultChecked: n, onCheckedChange: w, ...i, ref: b, children: s(h, { asChild: !0, children: s(m.span, { className: "pointer-events-none block h-ico-md w-ico-md rounded-ds-full bg-accent-fg shadow-02 ring-0", animate: { x: g ? 20 : 0 }, transition: l.snappy }) }) });
-});
-C.displayName = f.displayName;
-const y = N("rounded-ds-lg text-surface-fg", {
-  variants: {
-    variant: {
-      default: "bg-surface-1 border border-surface-border shadow-01",
-      elevated: "bg-surface-1 border border-surface-border shadow-02",
-      outline: "bg-transparent border-2 border-surface-border-strong shadow-none",
-      flat: "bg-surface-2 border-none shadow-none"
-    }
-  },
-  defaultVariants: { variant: "default" }
-}), x = o.forwardRef(({ className: e, variant: a, interactive: r, ...n }, t) => {
-  const i = d(y({ variant: a }), r && "hover:shadow-02 hover:border-surface-border-strong cursor-pointer", e);
-  return r ? s(m.div, { ref: t, whileHover: { y: -2 }, whileTap: { scale: 0.98 }, transition: l.snappy, className: i, ...v(n) }) : s("div", { ref: t, className: i, ...n });
-});
-x.displayName = "Card";
-const R = o.forwardRef(({ className: e, ...a }, r) => s("div", { ref: r, className: d("flex flex-col space-y-ds-02b p-ds-06", e), ...a }));
-R.displayName = "CardHeader";
-const k = o.forwardRef(({ className: e, ...a }, r) => s("div", { ref: r, className: d("font-sans font-semibold leading-ds-none tracking-ds-tight text-surface-fg", e), ...a }));
-k.displayName = "CardTitle";
-const T = o.forwardRef(({ className: e, ...a }, r) => s("div", { ref: r, className: d("text-ds-md text-surface-fg-muted", e), ...a }));
-T.displayName = "CardDescription";
-const H = o.forwardRef(({ className: e, ...a }, r) => s("div", { ref: r, className: d("p-ds-06 pt-0", e), ...a }));
-H.displayName = "CardContent";
-const S = o.forwardRef(({ className: e, ...a }, r) => s("div", { ref: r, className: d("flex items-center p-ds-06 pt-0", e), ...a }));
-S.displayName = "CardFooter";
-export {
-  x as C,
-  C as S,
-  R as a,
-  k as b,
-  H as c,
-  T as d,
-  S as e,
-  y as f
-};

package/dist/_chunks/checkbox.js

@@ -1,16 +0,0 @@
-"use client";
-import { jsx as e } from "react/jsx-runtime";
-import { C as a, b as m } from "./primitives.js";
-import { IconMinus as l, IconCheck as f } from "@tabler/icons-react";
-import * as b from "react";
-import { s as u } from "./motion2.js";
-import { c as h } from "./utils.js";
-import { A as p, m as x } from "./motion.js";
-const g = b.forwardRef(({ className: c, error: i, indeterminate: r, checked: s, ...o }, n) => {
-  const t = r ? "indeterminate" : s, d = t === !0 || t === "indeterminate";
-  return e(a, { ref: n, checked: t, className: h("peer flex items-center justify-center h-ico-md w-ico-md shrink-0 rounded-ds-sm", "border border-surface-border-strong", "bg-surface-3", "transition-colors duration-fast-01", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-action-disabled", "data-[state=checked]:bg-accent-9 data-[state=checked]:border-accent-7 data-[state=checked]:text-accent-fg", "data-[state=indeterminate]:bg-accent-9 data-[state=indeterminate]:border-accent-7 data-[state=indeterminate]:text-accent-fg", i && "border-error-7", c), ...o, children: e(p, { children: d && e(m, { forceMount: !0, asChild: !0, children: e(x.span, { className: "flex items-center justify-center text-current", initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0, opacity: 0 }, transition: u.bouncy, children: t === "indeterminate" ? e(l, { className: "h-ico-sm w-ico-sm" }) : e(f, { className: "h-ico-sm w-ico-sm" }) }) }) }) });
-});
-g.displayName = a.displayName;
-export {
-  g as C
-};

package/dist/_chunks/form.js

@@ -1,27 +0,0 @@
-"use client";
-import { jsx as d } from "react/jsx-runtime";
-import * as e from "react";
-import { c as m } from "./utils.js";
-const i = e.createContext({}), u = e.forwardRef(({ className: a, helperTextId: n, state: t = "helper", required: r, children: l, ...s }, o) => {
-  const c = e.useId(), x = n || `${c}-helper`, p = e.useMemo(() => ({ state: t, helperTextId: x, required: r }), [t, x, r]);
-  return d(i.Provider, { value: p, children: d("div", { ref: o, className: m("flex flex-col gap-ds-02", a), ...s, children: l }) });
-});
-u.displayName = "FormField";
-const f = {
-  helper: "text-surface-fg-subtle",
-  error: "text-error-11",
-  warning: "text-warning-11",
-  success: "text-success-11"
-}, F = e.forwardRef(({ className: a, id: n, state: t, ...r }, l) => {
-  const s = e.useContext(i), o = t ?? s.state ?? "helper", c = n ?? s.helperTextId;
-  return d("p", { ref: l, id: c, role: o === "error" ? "alert" : void 0, className: m("text-ds-sm", f[o], a), ...r });
-});
-F.displayName = "FormHelperText";
-function I() {
-  return e.useContext(i);
-}
-export {
-  u as F,
-  F as a,
-  I as u
-};