@devalok/shilp-sutra 0.5.0 → 0.6.0

package/dist/shell/sidebar.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import * as g from "react";
+import * as N from "react";
 import { useLink as m } from "./link-context.js";
 import { Sidebar as u, SidebarHeader as S, SidebarSeparator as o, SidebarContent as y, SidebarGroup as w, SidebarGroupLabel as A, SidebarGroupContent as L, SidebarMenu as C, SidebarFooter as M, SidebarMenuItem as j, SidebarMenuButton as k } from "../ui/sidebar.js";
 import { Avatar as G, AvatarImage as F, AvatarFallback as I } from "../ui/avatar.js";
@@ -24,7 +24,7 @@ function R({ item: t, isActive: a }) {
           "aria-label": t.title,
           "aria-current": a ? "page" : void 0,
           children: [
-            /* @__PURE__ */ e(t.icon, { className: "h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }),
+            /* @__PURE__ */ e("span", { className: "[&>svg]:h-ico-md [&>svg]:w-ico-md shrink-0", "aria-hidden": "true", children: t.icon }),
             /* @__PURE__ */ e("span", { className: "text-ds-base", children: t.title })
           ]
         }
@@ -32,7 +32,7 @@ function R({ item: t, isActive: a }) {
     }
   ) });
 }
-const z = g.forwardRef(
+const z = N.forwardRef(
   ({
     currentPath: t = "/",
     user: a,
@@ -43,7 +43,7 @@ const z = g.forwardRef(
     ...f
   }, b) => {
     var c;
-    const N = m(), v = (r, s = !1) => s || r === "/" ? t === r : t.startsWith(r);
+    const v = m(), g = (r, s = !1) => s || r === "/" ? t === r : t.startsWith(r);
     return /* @__PURE__ */ l(
       u,
       {
@@ -75,7 +75,7 @@ const z = g.forwardRef(
                 R,
                 {
                   item: d,
-                  isActive: v(d.href, d.exact)
+                  isActive: g(d.href, d.exact)
                 },
                 d.href
               )) }) })
@@ -84,7 +84,7 @@ const z = g.forwardRef(
           n.length > 0 && /* @__PURE__ */ e(M, { className: "px-ds-06 py-ds-05", children: /* @__PURE__ */ e("div", { className: "flex items-center justify-start gap-ds-03", children: n.map((r, s) => /* @__PURE__ */ l("div", { className: "flex items-center gap-ds-03", children: [
             s > 0 && /* @__PURE__ */ e("div", { className: "h-[16px] w-px bg-border" }),
             /* @__PURE__ */ e(
-              N,
+              v,
               {
                 className: "text-ds-md text-text-placeholder transition-colors hover:text-interactive",
                 href: r.href,

package/dist/ui/alert.d.ts

@@ -2,12 +2,15 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const alertVariants: (props?: ({
+    variant?: "outline" | "filled" | "subtle" | null | undefined;
     color?: "error" | "warning" | "success" | "neutral" | "info" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
  * Props for Alert — an inline message block with a colored icon, optional title, optional body,
  * and an optional dismiss button. Renders with `role="alert"` for screen reader announcements.
  *
+ * **Variants:** `subtle` (default, tinted surface) | `filled` (solid colored bg) | `outline` (transparent bg, colored border)
+ *
  * **Colors:** `info` (default, blue tones) | `success` | `warning` | `error` | `neutral`
  * The matching icon (info circle, checkmark, triangle, alert circle) is auto-selected by color.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../src/ui/alert.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,aAAa;;8EAmBlB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,mFAwBV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../src/ui/alert.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,aAAa;;;8EAuClB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,mFAwBV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/ui/alert.js

@@ -1,53 +1,78 @@
 "use client";
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { IconInfoCircle as i, IconAlertCircle as m, IconAlertTriangle as f, IconCircleCheck as b, IconX as u } from "@tabler/icons-react";
-import * as x from "react";
-import { cva as g } from "class-variance-authority";
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { IconInfoCircle as s, IconAlertCircle as x, IconAlertTriangle as m, IconCircleCheck as u, IconX as f } from "@tabler/icons-react";
+import * as g from "react";
+import { cva as v } from "class-variance-authority";
 import { cn as p } from "./lib/utils.js";
-const h = g(
+const N = v(
   "relative flex gap-ds-04 rounded-ds-lg border p-ds-05",
   {
     variants: {
+      variant: {
+        subtle: "",
+        filled: "",
+        outline: ""
+      },
       color: {
-        info: "bg-info-surface border-info-border text-info-text",
-        success: "bg-success-surface border-success-border text-success-text",
-        warning: "bg-warning-surface border-warning-border text-warning-text",
-        error: "bg-error-surface border-error-border text-error-text",
-        neutral: "bg-layer-02 border-border text-text-primary [&>svg]:text-text-secondary"
+        info: "",
+        success: "",
+        warning: "",
+        error: "",
+        neutral: ""
       }
     },
-    defaultVariants: { color: "info" }
+    compoundVariants: [
+      // subtle (surface bg) — default, matches previous behavior
+      { variant: "subtle", color: "info", className: "bg-info-surface border-info-border text-info-text" },
+      { variant: "subtle", color: "success", className: "bg-success-surface border-success-border text-success-text" },
+      { variant: "subtle", color: "warning", className: "bg-warning-surface border-warning-border text-warning-text" },
+      { variant: "subtle", color: "error", className: "bg-error-surface border-error-border text-error-text" },
+      { variant: "subtle", color: "neutral", className: "bg-layer-02 border-border text-text-primary [&>svg]:text-text-secondary" },
+      // filled (solid bg, white text)
+      { variant: "filled", color: "info", className: "bg-info text-text-on-color border-transparent [&>svg]:text-text-on-color" },
+      { variant: "filled", color: "success", className: "bg-success text-text-on-color border-transparent [&>svg]:text-text-on-color" },
+      { variant: "filled", color: "warning", className: "bg-warning text-text-on-color border-transparent [&>svg]:text-text-on-color" },
+      { variant: "filled", color: "error", className: "bg-error text-text-on-color border-transparent [&>svg]:text-text-on-color" },
+      { variant: "filled", color: "neutral", className: "bg-layer-03 text-text-primary border-transparent [&>svg]:text-text-secondary" },
+      // outline (transparent bg, colored border)
+      { variant: "outline", color: "info", className: "bg-transparent border-info-border text-info-text" },
+      { variant: "outline", color: "success", className: "bg-transparent border-success-border text-success-text" },
+      { variant: "outline", color: "warning", className: "bg-transparent border-warning-border text-warning-text" },
+      { variant: "outline", color: "error", className: "bg-transparent border-error-border text-error-text" },
+      { variant: "outline", color: "neutral", className: "bg-transparent border-border text-text-primary [&>svg]:text-text-secondary" }
+    ],
+    defaultVariants: { variant: "subtle", color: "info" }
   }
-), v = {
-  info: i,
-  success: b,
-  warning: f,
-  error: m,
-  neutral: i
-}, w = x.forwardRef(
-  ({ className: n, color: e = "info", title: o, onDismiss: s, children: c, ...a }, d) => {
-    const l = v[e ?? "info"];
-    return /* @__PURE__ */ t("div", { ref: d, className: p(h({ color: e }), n), role: "alert", ...a, children: [
-      /* @__PURE__ */ r(l, { className: "mt-ds-01 h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }),
-      /* @__PURE__ */ t("div", { className: "flex-1 min-w-0", children: [
-        o && /* @__PURE__ */ r("p", { className: "text-ds-md font-semibold mb-ds-01", children: o }),
-        /* @__PURE__ */ r("div", { className: "text-ds-md opacity-[0.9]", children: c })
+), w = {
+  info: s,
+  success: u,
+  warning: m,
+  error: x,
+  neutral: s
+}, y = g.forwardRef(
+  ({ className: n, variant: c = "subtle", color: e = "info", title: t, onDismiss: o, children: i, ...l }, d) => {
+    const b = w[e ?? "info"];
+    return /* @__PURE__ */ a("div", { ref: d, className: p(N({ variant: c, color: e }), n), role: "alert", ...l, children: [
+      /* @__PURE__ */ r(b, { className: "mt-ds-01 h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }),
+      /* @__PURE__ */ a("div", { className: "flex-1 min-w-0", children: [
+        t && /* @__PURE__ */ r("p", { className: "text-ds-md font-semibold mb-ds-01", children: t }),
+        /* @__PURE__ */ r("div", { className: "text-ds-md opacity-[0.9]", children: i })
       ] }),
-      s && /* @__PURE__ */ r(
+      o && /* @__PURE__ */ r(
         "button",
         {
           type: "button",
-          onClick: s,
+          onClick: o,
           className: "shrink-0 min-h-6 min-w-6 flex items-center justify-center rounded-ds-sm text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus",
           "aria-label": "Dismiss",
-          children: /* @__PURE__ */ r(u, { className: "h-ico-sm w-ico-sm" })
+          children: /* @__PURE__ */ r(f, { className: "h-ico-sm w-ico-sm" })
         }
       )
     ] });
   }
 );
-w.displayName = "Alert";
+y.displayName = "Alert";
 export {
-  w as Alert,
-  h as alertVariants
+  y as Alert,
+  N as alertVariants
 };