@devalok/shilp-sutra 0.27.2 → 0.29.0

package/dist/ui/button-processing.d.ts

@@ -0,0 +1,15 @@
+"use client";
+export type ProcessingSpeed = 'ambient' | 'working' | 'urgent';
+export interface ProcessingOverlayProps {
+    active: boolean;
+    speed: ProcessingSpeed;
+    /** Resolved color name — maps to CSS token `--color-{name}-9` */
+    color: string;
+}
+/**
+ * Internal overlay component for button processing state.
+ * Renders marching ants (SVG dashed rect with animated stroke-dashoffset).
+ * Not exported from the barrel — used only by Button.
+ */
+export declare function ProcessingOverlay({ active, speed, color }: ProcessingOverlayProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=button-processing.d.ts.map

package/dist/ui/button-processing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-processing.d.ts","sourceRoot":"","sources":["../../src/ui/button-processing.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;AAE9D,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,EAAE,eAAe,CAAA;IACtB,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAA;CACd;AAwBD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,sBAAsB,2CA6EjF"}

package/dist/ui/button-processing.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import * as e from "react";
+import { A as k, m as w } from "../_chunks/framer.js";
+const v = {
+  accent: "var(--color-accent-11)",
+  error: "var(--color-error-11)",
+  success: "var(--color-success-11)",
+  warning: "var(--color-warning-11)",
+  neutral: "var(--color-surface-fg)"
+}, C = {
+  ambient: 3,
+  working: 2,
+  urgent: 1
+};
+function N({ active: t, speed: d, color: r }) {
+  const n = v[r] ?? v.accent, s = D(), x = C[d], l = e.useRef(null), [u, R] = e.useState(8), [f, E] = e.useState({ array: "8 6", cycle: 14 });
+  return e.useEffect(() => {
+    const o = l.current?.closest("span")?.previousElementSibling;
+    if (!o) return;
+    const b = getComputedStyle(o), M = parseFloat(b.borderRadius) || 8, p = o.offsetWidth - 2, h = o.offsetHeight - 2, a = Math.min(M, h / 2, p / 2);
+    R(a);
+    const m = 2 * (p - 2 * a) + 2 * (h - 2 * a) + 2 * Math.PI * a, c = 8, P = c + 6, y = Math.round(m / P), S = (m - y * c) / y, g = Math.max(2, S);
+    E({ array: `${c} ${g.toFixed(1)}`, cycle: c + g });
+  }, [t]), /* @__PURE__ */ i(k, { children: t && /* @__PURE__ */ i(
+    w.span,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 0.2 },
+      "aria-hidden": "true",
+      className: "absolute inset-0 pointer-events-none",
+      children: /* @__PURE__ */ i(
+        "svg",
+        {
+          className: "absolute inset-0 w-full h-full",
+          style: { overflow: "visible" },
+          children: /* @__PURE__ */ i(
+            w.rect,
+            {
+              ref: l,
+              x: "1",
+              y: "1",
+              width: "calc(100% - 2px)",
+              height: "calc(100% - 2px)",
+              rx: u,
+              ry: u,
+              fill: "none",
+              stroke: n,
+              strokeWidth: "2",
+              strokeDasharray: f.array,
+              style: { transition: "stroke 0.3s ease" },
+              animate: s ? {} : { strokeDashoffset: [0, -f.cycle] },
+              transition: s ? {} : {
+                duration: x,
+                ease: "linear",
+                repeat: 1 / 0
+              }
+            }
+          )
+        }
+      )
+    },
+    "processing-ants"
+  ) });
+}
+function D() {
+  const [t, d] = e.useState(() => typeof window > "u" ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+  return e.useEffect(() => {
+    const r = window.matchMedia("(prefers-reduced-motion: reduce)"), n = (s) => d(s.matches);
+    return r.addEventListener("change", n), () => r.removeEventListener("change", n);
+  }, []), t;
+}
+export {
+  N as ProcessingOverlay
+};

package/dist/ui/button.d.ts

@@ -2,21 +2,31 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 export declare const buttonVariants: (props?: ({
-    variant?: "link" | "outline" | "default" | "solid" | "destructive" | "ghost" | null | undefined;
-    color?: "default" | "error" | null | undefined;
-    size?: "xs" | "sm" | "md" | "icon" | "lg" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
+    variant?: "link" | "outline" | "default" | "solid" | "soft" | "ghost" | "destructive" | null | undefined;
+    color?: "default" | "accent" | "success" | "error" | "warning" | "neutral" | null | undefined;
+    weight?: "normal" | "semibold" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "icon" | "compact-xs" | "compact-sm" | "compact-md" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
  * Props for Button — the primary action component with a two-axis variant system,
- * 6 size options, icon slots, and a built-in loading state.
+ * multiple size options, icon slots, and a built-in loading state.
  *
  * **Two axes:**
- * - `variant` controls **visual style**: `"solid"` (default, filled brand) | `"outline"` (bordered) |
- *   `"ghost"` (transparent, for toolbars) | `"link"` (underline, inline text actions)
- * - `color` controls **semantic intent**: `"default"` (brand interactive) | `"error"` (destructive)
+ * - `variant` controls **visual style**: `"solid"` (default, filled) | `"soft"` (tinted bg) |
+ *   `"outline"` (bordered) | `"ghost"` (transparent, for toolbars) | `"link"` (underline, inline)
+ * - `color` controls **semantic intent**: `"accent"` (default, brand) | `"error"` (destructive) |
+ *   `"success"` | `"warning"` | `"neutral"` (subdued)
  *
- * **Sizes:** `sm` | `md` (default) | `lg` for text buttons;
- * `icon-sm` | `icon-md` | `icon-lg` for square icon-only buttons (prefer `IconButton` for icon-only).
+ * **Sizes:** `xs` | `sm` | `md` (default) | `lg` for text buttons;
+ * `compact-xs` | `compact-sm` | `compact-md` for height-less inline buttons;
+ * `icon` | `icon-xs` | `icon-sm` | `icon-md` | `icon-lg` for square icon-only buttons.
+ *
+ * **Shape:** `"default"` uses per-size border-radius; `"pill"` applies `rounded-full`.
+ *
+ * **Weight:** `"semibold"` (default) | `"normal"` for lighter labels.
+ *
+ * **Note:** `ghost` + `accent` renders with neutral styling for backward compat —
+ * most ghost buttons are toolbar/icon actions where neutral is expected.
  *
  * **Loading:** When `loading={true}` the button is disabled and aria-busy is set.
  * Use `loadingPosition` to control where the spinner appears.
@@ -26,34 +36,37 @@ export declare const buttonVariants: (props?: ({
  * <Button onClick={handleSave}>Save changes</Button>
  *
  * @example
- * // Destructive delete with confirmation icon and loading state:
- * <Button variant="solid" color="error" startIcon={<IconTrash />} loading={isDeleting}>
- *   Delete project
+ * // Soft success feedback:
+ * <Button variant="soft" color="success" startIcon={<Icon icon={IconCheck} />}>
+ *   Approved
  * </Button>
  *
  * @example
- * // Ghost toolbar action (compact icon-adjacent button):
- * <Button variant="ghost" size="sm" startIcon={<IconEdit />}>
- *   Edit
+ * // Destructive delete with loading state:
+ * <Button variant="solid" color="error" startIcon={<Icon icon={IconTrash} />} loading={isDeleting}>
+ *   Delete project
  * </Button>
  *
  * @example
- * // Full-width form submit with centered loading spinner:
- * <Button fullWidth loading={isPending} loadingPosition="center">
- *   Sign in
+ * // Compact pill tag:
+ * <Button variant="soft" color="warning" size="compact-sm" shape="pill">
+ *   Overdue
  * </Button>
  *
  * @example
- * // Link variant for inline text actions (renders as a <button>):
- * <Button variant="link" onClick={openTerms}>View terms of service</Button>
- * // These are just a few ways — feel free to combine props creatively!
+ * // Ghost toolbar action:
+ * <Button variant="ghost" size="sm" startIcon={<Icon icon={IconEdit} />}>
+ *   Edit
+ * </Button>
  */
 export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
-    /** Icon element rendered before children */
-    startIcon?: React.ReactNode;
-    /** Icon element rendered after children */
-    endIcon?: React.ReactNode;
+    /** Button shape — 'pill' applies rounded-full for chip/tag-like buttons */
+    shape?: 'default' | 'pill';
+    /** Icon element rendered before children — use <Icon icon={...} /> */
+    startIcon?: React.ReactElement | null;
+    /** Icon element rendered after children — use <Icon icon={...} /> */
+    endIcon?: React.ReactElement | null;
     /** Show loading spinner and disable button */
     loading?: boolean;
     /** Where to render the spinner: replaces startIcon, endIcon, or centers over children */
@@ -69,6 +82,18 @@ export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonE
     onClickAsync?: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
     /** How long (ms) to show the success/error state before reverting. Default: 1500 */
     asyncFeedbackDuration?: number;
+    /**
+     * Show processing animation — animated border/glow while content stays visible.
+     * `true` = "working" speed. Semantic speeds:
+     * - `"ambient"` (3s) — background sync, file upload
+     * - `"working"` (2s) — standard API call, generation
+     * - `"urgent"` (1s) — retry, nearly done
+     */
+    processing?: boolean | 'ambient' | 'working' | 'urgent';
+    /** Override processing animation color. Defaults to button's own color. */
+    processingColor?: 'accent' | 'error' | 'success' | 'warning' | 'neutral';
+    /** Disable button during processing. Default: true. Set false for cancel-by-click patterns. */
+    processingDisabled?: boolean;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button };

package/dist/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,eAAO,MAAM,cAAc;;;;8EAsD1B,CAAA;AA4BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,EAClE,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yFAAyF;IACzF,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAC5C,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACxE,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B;AAED,QAAA,MAAM,MAAM,uFA8KX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,eAAO,MAAM,cAAc;;;;;8EAsG1B,CAAA;AAoDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,EAClE,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC1B,sEAAsE;IACtE,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACrC,qEAAqE;IACrE,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACnC,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yFAAyF;IACzF,eAAe,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAC5C,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACxE,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAE9B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;IAEvD,2EAA2E;IAC3E,eAAe,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;IAExE,+FAA+F;IAC/F,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,QAAA,MAAM,MAAM,uFAkRX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}