@devalok/shilp-sutra 0.2.0 → 0.2.1

package/dist/tailwind/index.cjs

@@ -0,0 +1,339 @@
+const r = {
+  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: {
+      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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devalok/shilp-sutra",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Devalok Design System — tokens, components, and patterns for Next.js",
   "license": "MIT",
   "type": "module",
@@ -103,7 +103,11 @@
     "./hooks/use-mobile": { "import": "./dist/hooks/use-mobile.js", "types": "./dist/hooks/use-mobile.d.ts" },
     "./hooks/use-toast": { "import": "./dist/hooks/use-toast.js", "types": "./dist/hooks/use-toast.d.ts" },
 
-    "./tailwind": { "import": "./dist/tailwind/index.js", "types": "./dist/tailwind/index.d.ts" },
+    "./tailwind": {
+      "require": "./dist/tailwind/index.cjs",
+      "import": "./dist/tailwind/index.js",
+      "types": "./dist/tailwind/index.d.ts"
+    },
     "./fonts/*": "./fonts/*"
   },
   "files": [
@@ -112,7 +116,7 @@
     "README.md"
   ],
   "scripts": {
-    "build": "vite build && pnpm build:tokens && node scripts/fix-dts-primitives.mjs && node scripts/inject-use-client.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",
     "build:tokens": "node scripts/copy-tokens.mjs",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src/",