@devalok/shilp-sutra 0.2.0 → 0.3.0

package/dist/tailwind/index.cjs

@@ -0,0 +1,344 @@
+const r = {
+  /**
+   * Dark mode uses the `.dark` class strategy. If your app uses `darkMode: 'media'`,
+   * set it explicitly in your own tailwind.config — your config takes precedence.
+   */
+  darkMode: "class",
+  theme: {
+    extend: {
+      // Breakpoints must be static values — CSS custom properties cannot be used
+      // in @media queries (compiled at build time). These mirror the tokens in
+      // semantic.css (--breakpoint-sm … --breakpoint-2xl).
+      // Placed inside `extend` so deployer breakpoints are merged, not replaced.
+      screens: {
+        sm: "640px",
+        md: "768px",
+        lg: "1024px",
+        xl: "1280px",
+        "2xl": "1536px"
+      },
+      fontFamily: {
+        sans: ["var(--font-sans)", "system-ui", "sans-serif"],
+        display: ["var(--font-display)", "system-ui", "sans-serif"],
+        body: ["var(--font-body)", "sans-serif"],
+        accent: ["var(--font-accent)", "sans-serif"],
+        mono: ["var(--font-mono)", "monospace"]
+      },
+      fontWeight: {
+        light: "var(--font-weight-light)",
+        regular: "var(--font-weight-regular)",
+        medium: "var(--font-weight-medium)",
+        semibold: "var(--font-weight-semibold)",
+        bold: "var(--font-weight-bold)"
+      },
+      letterSpacing: {
+        "ds-tighter": "var(--tracking-tighter)",
+        "ds-tight": "var(--tracking-tight)",
+        "ds-normal": "var(--tracking-normal)",
+        "ds-wide": "var(--tracking-wide)",
+        "ds-wider": "var(--tracking-wider)",
+        "ds-widest": "var(--tracking-widest)"
+      },
+      lineHeight: {
+        "ds-none": "var(--line-height-none)",
+        "ds-tight": "var(--line-height-tight)",
+        "ds-snug": "var(--line-height-snug)",
+        "ds-normal": "var(--line-height-normal)",
+        "ds-relaxed": "var(--line-height-relaxed)",
+        "ds-loose": "var(--line-height-loose)"
+      },
+      fontSize: {
+        "ds-xs": ["var(--font-size-xs)", { lineHeight: "var(--line-height-relaxed)" }],
+        "ds-sm": ["var(--font-size-sm)", { lineHeight: "var(--line-height-relaxed)" }],
+        "ds-md": ["var(--font-size-md)", { lineHeight: "var(--line-height-relaxed)" }],
+        "ds-base": ["var(--font-size-base)", { lineHeight: "var(--line-height-relaxed)" }],
+        "ds-lg": ["var(--font-size-lg)", { lineHeight: "var(--line-height-normal)" }],
+        "ds-xl": ["var(--font-size-xl)", { lineHeight: "var(--line-height-snug)" }],
+        "ds-2xl": ["var(--font-size-2xl)", { lineHeight: "var(--line-height-snug)" }],
+        "ds-3xl": ["var(--font-size-3xl)", { lineHeight: "var(--line-height-tight)" }],
+        "ds-4xl": ["var(--font-size-4xl)", { lineHeight: "var(--line-height-tight)" }],
+        "ds-5xl": ["var(--font-size-5xl)", { lineHeight: "var(--line-height-tight)" }],
+        "ds-6xl": ["var(--font-size-6xl)", { lineHeight: "var(--line-height-tight)" }]
+      },
+      borderWidth: {
+        "ds-sm": "var(--border-width-sm)",
+        "ds-md": "var(--border-width-md)",
+        "ds-lg": "var(--border-width-lg)",
+        focus: "var(--border-focus-width)"
+      },
+      borderRadius: {
+        "ds-none": "0",
+        "ds-sm": "var(--radius-sm)",
+        "ds-default": "var(--radius-default)",
+        "ds-md": "var(--radius-md)",
+        "ds-lg": "var(--radius-lg)",
+        "ds-xl": "var(--radius-xl)",
+        "ds-2xl": "var(--radius-2xl)",
+        "ds-full": "var(--radius-full)"
+      },
+      spacing: {
+        "ds-01": "var(--spacing-01)",
+        "ds-02": "var(--spacing-02)",
+        "ds-02b": "var(--spacing-02b)",
+        "ds-03": "var(--spacing-03)",
+        "ds-04": "var(--spacing-04)",
+        "ds-05": "var(--spacing-05)",
+        "ds-05b": "var(--spacing-05b)",
+        "ds-06": "var(--spacing-06)",
+        "ds-07": "var(--spacing-07)",
+        "ds-08": "var(--spacing-08)",
+        "ds-09": "var(--spacing-09)",
+        "ds-10": "var(--spacing-10)",
+        "ds-11": "var(--spacing-11)",
+        "ds-12": "var(--spacing-12)",
+        "ds-13": "var(--spacing-13)"
+      },
+      width: {
+        "ds-xs": "var(--size-xs)",
+        "ds-xs-plus": "var(--size-xs-plus)",
+        "ds-sm": "var(--size-sm)",
+        "ds-sm-plus": "var(--size-sm-plus)",
+        "ds-md": "var(--size-md)",
+        "ds-lg": "var(--size-lg)",
+        "ds-xl": "var(--size-xl)",
+        "ico-sm": "var(--icon-sm)",
+        "ico-md": "var(--icon-md)",
+        "ico-lg": "var(--icon-lg)",
+        "ico-xl": "var(--icon-xl)"
+      },
+      height: {
+        "ds-xs": "var(--size-xs)",
+        "ds-xs-plus": "var(--size-xs-plus)",
+        "ds-sm": "var(--size-sm)",
+        "ds-sm-plus": "var(--size-sm-plus)",
+        "ds-md": "var(--size-md)",
+        "ds-lg": "var(--size-lg)",
+        "ds-xl": "var(--size-xl)",
+        "ico-sm": "var(--icon-sm)",
+        "ico-md": "var(--icon-md)",
+        "ico-lg": "var(--icon-lg)",
+        "ico-xl": "var(--icon-xl)"
+      },
+      minHeight: {
+        "ds-xs": "var(--size-xs)",
+        "ds-xs-plus": "var(--size-xs-plus)",
+        "ds-sm": "var(--size-sm)",
+        "ds-sm-plus": "var(--size-sm-plus)",
+        "ds-md": "var(--size-md)",
+        "ds-lg": "var(--size-lg)",
+        "ds-xl": "var(--size-xl)"
+      },
+      maxWidth: {
+        layout: "var(--max-width)",
+        "layout-body": "var(--max-width-body)"
+      },
+      minWidth: {
+        "ds-xs": "var(--size-xs)",
+        "ds-sm": "var(--size-sm)",
+        "ds-md": "var(--size-md)",
+        "ds-lg": "var(--size-lg)",
+        "ds-xl": "var(--size-xl)"
+      },
+      opacity: {
+        "action-hover": "var(--action-hover-opacity)",
+        "action-selected": "var(--action-selected-opacity)",
+        "action-disabled": "var(--action-disabled-opacity)",
+        "action-focus": "var(--action-focus-opacity)",
+        "action-active": "var(--action-active-opacity)"
+      },
+      colors: {
+        "text-interactive": "var(--color-text-interactive)",
+        interactive: "var(--color-interactive)",
+        "interactive-hover": "var(--color-interactive-hover)",
+        "interactive-active": "var(--color-interactive-active)",
+        "interactive-selected": "var(--color-interactive-selected)",
+        "interactive-subtle": "var(--color-interactive-subtle)",
+        accent: "var(--color-accent)",
+        "accent-hover": "var(--color-accent-hover)",
+        "accent-subtle": "var(--color-accent-subtle)",
+        background: "var(--color-background)",
+        "layer-01": "var(--color-layer-01)",
+        "layer-02": "var(--color-layer-02)",
+        "layer-03": "var(--color-layer-03)",
+        overlay: "var(--color-overlay)",
+        field: "var(--color-field)",
+        "field-hover": "var(--color-field-hover)",
+        "text-primary": "var(--color-text-primary)",
+        "text-secondary": "var(--color-text-secondary)",
+        "text-tertiary": "var(--color-text-tertiary)",
+        "text-placeholder": "var(--color-text-placeholder)",
+        "text-helper": "var(--color-text-helper)",
+        "text-disabled": "var(--color-text-disabled)",
+        "text-error": "var(--color-text-error)",
+        "text-success": "var(--color-text-success)",
+        "text-warning": "var(--color-text-warning)",
+        "text-link": "var(--color-text-link)",
+        "text-on-color": "var(--color-text-on-color)",
+        "text-inverse": "var(--color-text-inverse)",
+        "text-brand": "var(--color-text-brand)",
+        "icon-primary": "var(--color-icon-primary)",
+        "icon-secondary": "var(--color-icon-secondary)",
+        "icon-disabled": "var(--color-icon-disabled)",
+        "icon-on-color": "var(--color-icon-on-color)",
+        "icon-interactive": "var(--color-icon-interactive)",
+        border: "var(--color-border-default)",
+        "border-subtle": "var(--color-border-subtle)",
+        "border-strong": "var(--color-border-strong)",
+        "border-interactive": "var(--color-border-interactive)",
+        "border-disabled": "var(--color-border-disabled)",
+        "border-error": "var(--color-border-error)",
+        "border-success": "var(--color-border-success)",
+        "border-warning": "var(--color-border-warning)",
+        focus: "var(--color-focus)",
+        "focus-inset": "var(--color-focus-inset)",
+        success: "var(--color-success)",
+        "success-surface": "var(--color-success-surface)",
+        error: "var(--color-error)",
+        "error-surface": "var(--color-error-surface)",
+        warning: "var(--color-warning)",
+        "warning-surface": "var(--color-warning-surface)",
+        info: "var(--color-info)",
+        "info-surface": "var(--color-info-surface)",
+        "skeleton-base": "var(--color-skeleton-base)",
+        "skeleton-shimmer": "var(--color-skeleton-shimmer)",
+        "category-teal": "var(--color-category-teal)",
+        "category-teal-surface": "var(--color-category-teal-surface)",
+        "category-teal-border": "var(--color-category-teal-border)",
+        "category-teal-text": "var(--color-category-teal-text)",
+        "category-amber": "var(--color-category-amber)",
+        "category-amber-surface": "var(--color-category-amber-surface)",
+        "category-amber-border": "var(--color-category-amber-border)",
+        "category-amber-text": "var(--color-category-amber-text)",
+        "category-slate": "var(--color-category-slate)",
+        "category-slate-surface": "var(--color-category-slate-surface)",
+        "category-slate-border": "var(--color-category-slate-border)",
+        "category-slate-text": "var(--color-category-slate-text)",
+        "category-indigo": "var(--color-category-indigo)",
+        "category-indigo-surface": "var(--color-category-indigo-surface)",
+        "category-indigo-border": "var(--color-category-indigo-border)",
+        "category-indigo-text": "var(--color-category-indigo-text)",
+        "category-cyan": "var(--color-category-cyan)",
+        "category-cyan-surface": "var(--color-category-cyan-surface)",
+        "category-cyan-border": "var(--color-category-cyan-border)",
+        "category-cyan-text": "var(--color-category-cyan-text)",
+        "category-orange": "var(--color-category-orange)",
+        "category-orange-surface": "var(--color-category-orange-surface)",
+        "category-orange-border": "var(--color-category-orange-border)",
+        "category-orange-text": "var(--color-category-orange-text)",
+        "category-emerald": "var(--color-category-emerald)",
+        "category-emerald-surface": "var(--color-category-emerald-surface)",
+        "category-emerald-border": "var(--color-category-emerald-border)",
+        "category-emerald-text": "var(--color-category-emerald-text)",
+        "interactive-disabled": "var(--color-interactive-disabled)",
+        "field-02": "var(--color-field-02)",
+        "field-02-hover": "var(--color-field-02-hover)",
+        "text-on-color-dark": "var(--color-text-on-color-dark)",
+        "text-link-hover": "var(--color-text-link-hover)",
+        "success-border": "var(--color-success-border)",
+        "error-border": "var(--color-error-border)",
+        "warning-border": "var(--color-warning-border)",
+        "info-border": "var(--color-info-border)",
+        "success-text": "var(--color-success-text)",
+        "error-text": "var(--color-error-text)",
+        "warning-text": "var(--color-warning-text)",
+        "info-text": "var(--color-info-text)",
+        divider: "var(--color-divider)",
+        "inset-glow": "var(--color-inset-glow)",
+        "inset-glow-strong": "var(--color-inset-glow-strong)",
+        "inset-glow-subtle": "var(--color-inset-glow-subtle)",
+        "surface-overlay-light": "var(--color-surface-overlay-light)",
+        "surface-overlay-dark": "var(--color-surface-overlay-dark)",
+        "layer-accent-subtle": "var(--color-layer-accent-subtle)",
+        "text-shadow": "var(--color-text-shadow)",
+        "error-hover": "var(--color-error-hover)",
+        "chart-1": "var(--chart-1)",
+        "chart-2": "var(--chart-2)",
+        "chart-3": "var(--chart-3)",
+        "chart-4": "var(--chart-4)",
+        "chart-5": "var(--chart-5)",
+        "chart-6": "var(--chart-6)",
+        "chart-7": "var(--chart-7)",
+        "chart-8": "var(--chart-8)"
+      },
+      keyframes: {
+        ripple: {
+          "0%": { transform: "translate(-50%, -50%) scale(0)", opacity: "1" },
+          "100%": { transform: "translate(-50%, -50%) scale(4)", opacity: "0" }
+        },
+        shake: {
+          "0%": { transform: "translateX(0)" },
+          "10%": { transform: "translateX(-3px)" },
+          "20%": { transform: "translateX(3px)" },
+          "30%": { transform: "translateX(-8px)" },
+          "40%": { transform: "translateX(8px)" },
+          "50%": { transform: "translateX(-5px)" },
+          "60%": { transform: "translateX(3px)" },
+          "70%, 100%": { transform: "translateX(0)" }
+        },
+        "progress-indeterminate": {
+          "0%": { transform: "translateX(-100%)" },
+          "100%": { transform: "translateX(250%)" }
+        },
+        "skeleton-shimmer": {
+          "0%": { backgroundPosition: "-200% 0" },
+          "100%": { backgroundPosition: "200% 0" }
+        },
+        "caret-blink": {
+          "0%,70%,100%": { opacity: "1" },
+          "20%,50%": { opacity: "0" }
+        }
+      },
+      animation: {
+        ripple: "ripple var(--duration-slow-01) linear",
+        "ripple-icon": "ripple var(--duration-moderate-02) linear forwards",
+        shake: "shake 1s var(--ease-productive-standard) infinite",
+        "progress-indeterminate": "progress-indeterminate var(--duration-slow-02) var(--ease-productive-standard) infinite",
+        "skeleton-shimmer": "skeleton-shimmer var(--duration-slow-02) var(--ease-linear) infinite",
+        "caret-blink": "caret-blink 1.25s ease-out infinite"
+      },
+      backgroundImage: {
+        "gradient-brand": "var(--gradient-brand-light)",
+        "gradient-brand-dark": "var(--gradient-brand-dark)"
+      },
+      boxShadow: {
+        "01": "var(--shadow-01)",
+        "02": "var(--shadow-02)",
+        "03": "var(--shadow-03)",
+        "04": "var(--shadow-04)",
+        "05": "var(--shadow-05)",
+        brand: "var(--shadow-brand)"
+      },
+      transitionDuration: {
+        instant: "var(--duration-instant)",
+        "fast-01": "var(--duration-fast-01)",
+        "fast-02": "var(--duration-fast-02)",
+        "moderate-01": "var(--duration-moderate-01)",
+        "moderate-02": "var(--duration-moderate-02)",
+        "slow-01": "var(--duration-slow-01)",
+        "slow-02": "var(--duration-slow-02)"
+      },
+      transitionTimingFunction: {
+        "productive-standard": "var(--ease-productive-standard)",
+        "productive-entrance": "var(--ease-productive-entrance)",
+        "productive-exit": "var(--ease-productive-exit)",
+        "expressive-standard": "var(--ease-expressive-standard)",
+        "expressive-entrance": "var(--ease-expressive-entrance)",
+        "expressive-exit": "var(--ease-expressive-exit)",
+        bounce: "var(--ease-bounce)",
+        linear: "var(--ease-linear)"
+      },
+      zIndex: {
+        base: "var(--z-base)",
+        raised: "var(--z-raised)",
+        dropdown: "var(--z-dropdown)",
+        sticky: "var(--z-sticky)",
+        overlay: "var(--z-overlay)",
+        modal: "var(--z-modal)",
+        toast: "var(--z-toast)",
+        tooltip: "var(--z-tooltip)"
+      }
+    }
+  }
+};
+module.exports = r;
+module.exports.default = module.exports;

package/dist/tailwind/preset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CAkV3B,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CAuV3B,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/tailwind/preset.js

@@ -1,17 +1,22 @@
 const r = {
+  /**
+   * Dark mode uses the `.dark` class strategy. If your app uses `darkMode: 'media'`,
+   * set it explicitly in your own tailwind.config — your config takes precedence.
+   */
   darkMode: "class",
   theme: {
-    // Breakpoints must be static values — CSS custom properties cannot be used
-    // in @media queries (compiled at build time). These mirror the tokens in
-    // semantic.css (--breakpoint-sm … --breakpoint-2xl).
-    screens: {
-      sm: "640px",
-      md: "768px",
-      lg: "1024px",
-      xl: "1280px",
-      "2xl": "1536px"
-    },
     extend: {
+      // Breakpoints must be static values — CSS custom properties cannot be used
+      // in @media queries (compiled at build time). These mirror the tokens in
+      // semantic.css (--breakpoint-sm … --breakpoint-2xl).
+      // Placed inside `extend` so deployer breakpoints are merged, not replaced.
+      screens: {
+        sm: "640px",
+        md: "768px",
+        lg: "1024px",
+        xl: "1280px",
+        "2xl": "1536px"
+      },
       fontFamily: {
         sans: ["var(--font-sans)", "system-ui", "sans-serif"],
         display: ["var(--font-display)", "system-ui", "sans-serif"],

package/dist/tokens/index.css

@@ -1,3 +1,4 @@
 @import './primitives.css';
 @import './semantic.css';
+@import './typography.css';
 @import './typography-semantic.css';

package/dist/tokens/semantic.css

@@ -2,9 +2,9 @@
   color-scheme: light;
 
   /* Font families — override these with next/font CSS variables */
-  --font-sans:    "Google Sans", system-ui, sans-serif;
-  --font-display: "Google Sans", system-ui, sans-serif;
-  --font-body:    "Google Sans", system-ui, sans-serif;
+  --font-sans:    "Inter", system-ui, sans-serif;
+  --font-display: "Inter", system-ui, sans-serif;
+  --font-body:    "Inter", system-ui, sans-serif;
   --font-accent:  Ranade, sans-serif;
   --font-mono:    "SF Mono", "Fira Code", monospace;
 

package/dist/tokens/typography.css

@@ -8,17 +8,17 @@
 
 /* ── Font Faces ─────────────────────────────────────────────────── */
 
-/* Google Sans (primary UI font) — Variable font: supports weights 100-900 */
+/* Inter (primary UI font) — Variable font: supports weights 100-900 */
 @font-face {
-  font-family: 'Google Sans';
-  src: url('../../fonts/GoogleSans-Variable.ttf') format('truetype');
+  font-family: 'Inter';
+  src: url('../../fonts/Inter-Variable.woff2') format('woff2');
   font-weight: 100 900;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
-  font-family: 'Google Sans';
-  src: url('../../fonts/GoogleSans-Italic-Variable.ttf') format('truetype');
+  font-family: 'Inter';
+  src: url('../../fonts/Inter-Italic-Variable.woff2') format('woff2');
   font-weight: 100 900;
   font-style: italic;
   font-display: swap;
@@ -27,13 +27,13 @@
 /* Ranade (accent — brand moments, hero headings, special callouts) */
 @font-face {
   font-family: 'Ranade';
-  src: url('../../fonts/Ranade-Variable.ttf') format('truetype');
+  src: url('../../fonts/Ranade-Variable.woff2') format('woff2');
   font-weight: 100 900;
   font-display: swap;
 }
 @font-face {
   font-family: 'Ranade';
-  src: url('../../fonts/Ranade-VariableItalic.ttf') format('truetype');
+  src: url('../../fonts/Ranade-VariableItalic.woff2') format('woff2');
   font-weight: 100 900;
   font-style: italic;
   font-display: swap;

package/dist/ui/alert.d.ts

@@ -2,14 +2,14 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const alertVariants: (props?: ({
-    variant?: "error" | "warning" | "success" | "info" | "neutral" | null | undefined;
+    color?: "error" | "warning" | "success" | "info" | "neutral" | 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:** `info` (default, blue tones) | `success` | `warning` | `error` | `neutral`
- * The matching icon (info circle, checkmark, triangle, alert circle) is auto-selected by variant.
+ * **Colors:** `info` (default, blue tones) | `success` | `warning` | `error` | `neutral`
+ * The matching icon (info circle, checkmark, triangle, alert circle) is auto-selected by color.
  *
  * **Alert vs Banner:** Alert is inline (inside page content). Banner is a full-width notification
  * strip rendered at the top of a page/section (see `<Banner>`).
@@ -18,25 +18,25 @@ declare const alertVariants: (props?: ({
  *
  * @example
  * // Informational tip inside a settings form:
- * <Alert title="Tip" variant="info">
+ * <Alert title="Tip" color="info">
  *   Changes take effect after you save and reload the page.
  * </Alert>
  *
  * @example
  * // Error feedback after a failed API call (dismissible):
- * <Alert variant="error" title="Save failed" onDismiss={() => setError(null)}>
+ * <Alert color="error" title="Save failed" onDismiss={() => setError(null)}>
  *   Your changes could not be saved. Please try again.
  * </Alert>
  *
  * @example
  * // Success confirmation after publishing:
- * <Alert variant="success" title="Published!">
+ * <Alert color="success" title="Published!">
  *   Your post is now live and visible to all subscribers.
  * </Alert>
  *
  * @example
  * // Neutral inline note (no colored intent):
- * <Alert variant="neutral">This field is auto-populated from your profile.</Alert>
+ * <Alert color="neutral">This field is auto-populated from your profile.</Alert>
  * // These are just a few ways — feel free to combine props creatively!
  */
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {

package/dist/ui/alert.js

@@ -4,11 +4,11 @@ import { IconInfoCircle as i, IconAlertCircle as m, IconAlertTriangle as f, Icon
 import * as x from "react";
 import { cva as g } from "class-variance-authority";
 import { cn as p } from "./lib/utils.js";
-const v = g(
+const h = g(
   "relative flex gap-ds-04 rounded-ds-lg border p-ds-05",
   {
     variants: {
-      variant: {
+      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",
@@ -16,29 +16,29 @@ const v = g(
         neutral: "bg-layer-02 border-border text-text-primary [&>svg]:text-text-secondary"
       }
     },
-    defaultVariants: { variant: "info" }
+    defaultVariants: { color: "info" }
   }
-), h = {
+), v = {
   info: i,
   success: b,
   warning: f,
   error: m,
   neutral: i
 }, w = x.forwardRef(
-  ({ className: n, variant: e = "info", title: o, onDismiss: s, children: a, ...c }, d) => {
-    const l = h[e ?? "info"];
-    return /* @__PURE__ */ t("div", { ref: d, className: p(v({ variant: e }), n), role: "alert", ...c, children: [
+  ({ 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: a })
+        /* @__PURE__ */ r("div", { className: "text-ds-md opacity-[0.9]", children: c })
       ] }),
       s && /* @__PURE__ */ r(
         "button",
         {
           type: "button",
           onClick: s,
-          className: "shrink-0 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",
+          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" })
         }
@@ -49,5 +49,5 @@ const v = g(
 w.displayName = "Alert";
 export {
   w as Alert,
-  v as alertVariants
+  h as alertVariants
 };

package/dist/ui/autocomplete.d.ts

@@ -21,7 +21,7 @@ type AutocompleteOption = {
  * <Autocomplete
  *   options={[{ value: 'mumbai', label: 'Mumbai' }, { value: 'delhi', label: 'Delhi' }]}
  *   value={selectedCity}
- *   onChange={(opt) => setSelectedCity(opt)}
+ *   onValueChange={(opt) => setSelectedCity(opt)}
  *   placeholder="Search cities..."
  * />
  *
@@ -29,7 +29,7 @@ type AutocompleteOption = {
  * // Employee name lookup with custom empty text:
  * <Autocomplete
  *   options={employees.map(e => ({ value: e.id, label: e.fullName }))}
- *   onChange={(opt) => setAssignee(opt.value)}
+ *   onValueChange={(opt) => setAssignee(opt.value)}
  *   emptyText="No employees found"
  *   placeholder="Search employees..."
  * />
@@ -38,7 +38,7 @@ type AutocompleteOption = {
 type AutocompleteProps = {
     options: AutocompleteOption[];
     value?: AutocompleteOption | null;
-    onChange?: (option: AutocompleteOption) => void;
+    onValueChange?: (option: AutocompleteOption) => void;
     placeholder?: string;
     emptyText?: string;
     disabled?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../src/ui/autocomplete.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAC7B,KAAK,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAA;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,QAAA,MAAM,YAAY,4FAyKjB,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../src/ui/autocomplete.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAC7B,KAAK,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAA;IACjC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAA;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,QAAA,MAAM,YAAY,4FAyKjB,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,CAAA"}

package/dist/ui/autocomplete.js

@@ -6,7 +6,7 @@ const T = t.forwardRef(
   ({
     options: x,
     value: o,
-    onChange: u,
+    onValueChange: u,
     placeholder: D,
     emptyText: I = "No options",
     disabled: h,

package/dist/ui/badge.d.ts

@@ -2,15 +2,18 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const badgeVariants: (props?: ({
-    variant?: "accent" | "error" | "warning" | "success" | "cyan" | "indigo" | "orange" | "teal" | "solid" | "info" | "neutral" | "brand" | "amber" | "slate" | "emerald" | null | undefined;
+    variant?: "solid" | "outline" | "subtle" | null | undefined;
+    color?: "accent" | "default" | "error" | "warning" | "success" | "cyan" | "indigo" | "orange" | "teal" | "info" | "brand" | "amber" | "slate" | "emerald" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
- * Props for Badge — a compact inline label with 15 semantic + categorical variants, an optional
+ * Props for Badge — a compact inline label with a two-axis variant system, an optional
  * leading dot indicator, and a dismissible close button.
  *
- * **15 variants:** `neutral` (default) | `solid` (brand fill) | `info` | `success` | `error` |
- * `warning` | `brand` | `accent` | `teal` | `amber` | `slate` | `indigo` | `cyan` | `orange` | `emerald`
+ * **Two axes:**
+ * - `variant` controls **visual style**: `"subtle"` (default, surface bg) | `"solid"` (filled) | `"outline"` (border only)
+ * - `color` controls **semantic intent/category**: `"default"` | `"info"` | `"success"` | `"error"` |
+ *   `"warning"` | `"brand"` | `"accent"` | `"teal"` | `"amber"` | `"slate"` | `"indigo"` | `"cyan"` | `"orange"` | `"emerald"`
  *
  * **Comparison with Chip:** Badge is a pure display label (no onClick, no delete handler).
  * Chip (`<Chip>`) is interactive — use Chip when users can click or dismiss the tag.
@@ -20,7 +23,7 @@ declare const badgeVariants: (props?: ({
  *
  * @example
  * // Status badge in a table cell:
- * <Badge variant="success">Active</Badge>
+ * <Badge color="success">Active</Badge>
  *
  * @example
  * // Notification count with dot indicator (solid fill for high contrast):
@@ -28,11 +31,11 @@ declare const badgeVariants: (props?: ({
  *
  * @example
  * // Dismissible category filter (e.g. in a filter bar):
- * <Badge variant="teal" onDismiss={() => removeFilter('teal')}>Teal team</Badge>
+ * <Badge color="teal" onDismiss={() => removeFilter('teal')}>Teal team</Badge>
  *
  * @example
  * // Error badge for a failed job in a pipeline view:
- * <Badge variant="error" size="lg">Build failed</Badge>
+ * <Badge color="error" size="lg">Build failed</Badge>
  * // These are just a few ways — feel free to combine props creatively!
  */
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {

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

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/ui/badge.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,aAAa;;;8EA+ClB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAC3C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,oFAwBV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/ui/badge.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,aAAa;;;;8EAoFlB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAC3C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,oFAwBV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}