@yuva-devlab/ui 1.1.0 → 1.3.0

package/dist/styles/preset.css

@@ -1,159 +1,8 @@
 /**
- * Yuva DevLab Design System — Tailwind CSS 4 Preset Bridge
- * 
- * Maps standard design tokens and CSS custom properties to Tailwind utility classes.
- * Can be consumed by downstream applications via:
- * `@import "@yuva-devlab/ui/preset.css";`
+ * @file src/styles/preset.css
+ * @description Backward compatibility bridge for @yuva-devlab/ui.
+ * Directs downstream Tailwind 4 consumers to @yuva-devlab/tokens/preset.css
+ * and imports UI component styles.
  */
-
-@theme inline {
-  /* ── Radii Mappings ──────────────────────────────────────────────────────── */
-  --radius-sm: calc(var(--radius, 0.5rem) - 4px);
-  --radius-md: calc(var(--radius, 0.5rem) - 2px);
-  --radius-lg: var(--radius, 0.5rem);
-  --radius-xl: calc(var(--radius, 0.5rem) + 4px);
-  --radius-2xl: calc(var(--radius, 0.5rem) + 8px);
-  --radius-3xl: calc(var(--radius, 0.5rem) + 12px);
-  --radius-4xl: calc(var(--radius, 0.5rem) + 16px);
-
-  /* ── Semantic Color Tokens ────────────────────────────────────────────────── */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-
-  /* ── Contextual System Colors ────────────────────────────────────────────── */
-  --color-warning: var(--warning);
-  --color-warning-foreground: var(--warning-foreground);
-  --color-overlay: var(--overlay);
-
-  /* ── Navigation & Sidebar ────────────────────────────────────────────────── */
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  /* ── Visual Data Telemetry (Charts) ──────────────────────────────────────── */
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-
-  /* ── Component Control Dimensions ────────────────────────────────────────── */
-  --height-control-xs: var(--control-height-xs, 1.75rem);
-  --height-control-sm: var(--control-height-sm, 2rem);
-  --height-control-md: var(--control-height-md, 2.25rem);
-  --height-control-lg: var(--control-height-lg, 2.5rem);
-  --height-control-xl: var(--control-height-xl, 3rem);
-
-  /* ── Icon Sizing Tokens ──────────────────────────────────────────────────── */
-  --size-icon-xs: var(--icon-xs, 0.875rem);
-  --size-icon-sm: var(--icon-sm, 1rem);
-  --size-icon-md: var(--icon-md, 1.25rem);
-  --size-icon-lg: var(--icon-lg, 1.5rem);
-  --size-icon-xl: var(--icon-xl, 2rem);
-}
-
-/* ── Cybernetic Grid & Graph Topologies ────────────────────────────────────── */
-@utility execution-grid {
-  background-image:
-    linear-gradient(var(--border) 1px, transparent 1px),
-    linear-gradient(90deg, var(--border) 1px, transparent 1px);
-  background-size: 36px 36px;
-  mask-image: linear-gradient(to bottom, black, transparent 72%);
-}
-
-@utility topology-grid {
-  background-image: radial-gradient(
-    circle at center,
-    var(--border) 1px,
-    transparent 1px
-  );
-  background-size: 18px 18px;
-  mask-image: linear-gradient(
-    90deg,
-    transparent,
-    black 15%,
-    black 85%,
-    transparent
-  );
-}
-
-/* ── Live Agent Telemetry Animations ───────────────────────────────────────── */
-@utility animate-agent-pulse {
-  animation: agent-pulse 1.8s ease-in-out infinite;
-}
-
-@utility animate-signal-travel {
-  animation: signal-travel 1.5s linear infinite;
-}
-
-@utility animate-progress-flow {
-  animation: progress-flow 1.8s ease-in-out infinite;
-}
-
-@utility runner-enter {
-  animation: runner-enter 260ms ease-out both;
-}
-
-@keyframes agent-pulse {
-  0%,
-  100% {
-    opacity: 0.55;
-    transform: scale(0.9);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1.15);
-  }
-}
-
-@keyframes signal-travel {
-  from {
-    left: 0;
-  }
-  to {
-    left: calc(100% - 0.5rem);
-  }
-}
-
-@keyframes progress-flow {
-  0%,
-  100% {
-    opacity: 0.55;
-  }
-  50% {
-    opacity: 1;
-  }
-}
-
-@keyframes runner-enter {
-  from {
-    opacity: 0;
-    transform: translateY(6px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
+@import "@yuva-devlab/tokens/preset.css";
+@import "./styles.css";

package/dist/styles/root.css

@@ -0,0 +1 @@
+@import "@yuva-devlab/tokens/root.css";

package/dist/styles/styles.css

@@ -1,6 +1,18 @@
-@import "tailwindcss";
-@import "./preset.css";
+/**
+ * @file src/styles/styles.css
+ * @description Master stylesheet for @yuva-devlab/ui.
+ * Architecture: Tokens (@yuva-devlab/tokens) -> Common Primitives -> Component Styles.
+ * Zero Tailwind dependency. Pure CSS with scoped dl-* classes.
+ */
 
-/* ── Brand Scoped Themes ─────────────────────────────────────────────────── */
-@import "./themes/finai.css";
-@import "./themes/orchestrai.css";
+/* ── 0. Establish Layer Precedence (utilities > dl-components > dl-base) ─── */
+@layer dl-base, dl-components, utilities;
+
+/* ── 1. Design Tokens & Theme Baseline ───────────────────────────────────── */
+@import "@yuva-devlab/tokens/styles.css";
+
+/* ── 2. Common Animations & Primitives ───────────────────────────────────── */
+@import "./common.css";
+
+/* ── 3. Modular Scoped Component Styles ─────────────────────────────────── */
+@import "./components.css";

package/dist/styles/themes/finai.css

@@ -1,114 +1 @@
-/**
- * FinAI Theme Preset — Emerald / Forest Green Palette
- * Modern OKLCH color spaces optimized for trust, clarity, and financial wellness.
- */
-
-:root,
-[data-brand="finai"],
-[data-theme="finai"] {
-  --radius: 0.75rem;
-  --background: oklch(0.985 0.001 247);
-  --foreground: oklch(0.21 0.02 260);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.21 0.02 260);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.21 0.02 260);
-  --primary: oklch(0.63 0.14 156);
-  --primary-foreground: oklch(0.99 0.005 150);
-  --secondary: oklch(0.965 0.003 260);
-  --secondary-foreground: oklch(0.21 0.02 260);
-  --muted: oklch(0.965 0.003 260);
-  --muted-foreground: oklch(0.52 0.015 260);
-  --accent: oklch(0.95 0.03 156);
-  --accent-foreground: oklch(0.35 0.09 156);
-  --destructive: oklch(0.6 0.22 25);
-  --destructive-foreground: oklch(0.99 0.005 0);
-  --warning: oklch(0.75 0.14 80);
-  --warning-foreground: oklch(0.2 0.02 80);
-  --border: oklch(0.92 0.005 260);
-  --input: oklch(0.92 0.005 260);
-  --ring: oklch(0.63 0.14 156);
-  --sidebar: oklch(1 0 0);
-  --sidebar-foreground: oklch(0.21 0.02 260);
-  --sidebar-primary: oklch(0.63 0.14 156);
-  --sidebar-primary-foreground: oklch(0.99 0.005 150);
-  --sidebar-accent: oklch(0.95 0.03 156);
-  --sidebar-accent-foreground: oklch(0.35 0.09 156);
-  --sidebar-border: oklch(0.93 0.005 260);
-  --sidebar-ring: oklch(0.63 0.14 156);
-  --chart-1: oklch(0.63 0.14 156);
-  --chart-2: oklch(0.55 0.02 260);
-  --chart-3: oklch(0.75 0.04 156);
-  --chart-4: oklch(0.7 0.15 60);
-  --chart-5: oklch(0.6 0.18 25);
-
-  /* ── Sizing, Spacing & Layout Tokens ───────────────────────────────────── */
-  --control-height-xs: 1.75rem;
-  --control-height-sm: 2rem;
-  --control-height-md: 2.375rem;
-  --control-height-lg: 2.75rem;
-  --control-height-xl: 3.25rem;
-
-  --icon-xs: 0.75rem;
-  --icon-sm: 0.875rem;
-  --icon-md: 1rem;
-  --icon-lg: 1.25rem;
-  --icon-xl: 1.5rem;
-
-  --space-1: 0.25rem;
-  --space-2: 0.5rem;
-  --space-3: 0.75rem;
-  --space-4: 1rem;
-  --space-5: 1.25rem;
-  --space-6: 1.5rem;
-  --space-8: 2rem;
-  --space-10: 2.5rem;
-
-  --card-padding: var(--space-5);
-  --dialog-padding: var(--space-6);
-  --form-field-gap: var(--space-4);
-  --section-gap: var(--space-6);
-  --table-row-padding-x: var(--space-6);
-  --table-row-padding-y: var(--space-4);
-}
-
-.dark,
-[data-theme="dark"],
-[data-theme="finai-dark"],
-[data-brand="finai"].dark,
-[data-brand="finai"][data-theme="dark"] {
-  --background: oklch(0.16 0.015 260);
-  --foreground: oklch(0.97 0.003 260);
-  --card: oklch(0.2 0.015 260);
-  --card-foreground: oklch(0.97 0.003 260);
-  --popover: oklch(0.2 0.015 260);
-  --popover-foreground: oklch(0.97 0.003 260);
-  --primary: oklch(0.7 0.15 156);
-  --primary-foreground: oklch(0.15 0.02 260);
-  --secondary: oklch(0.25 0.015 260);
-  --secondary-foreground: oklch(0.97 0.003 260);
-  --muted: oklch(0.25 0.015 260);
-  --muted-foreground: oklch(0.7 0.01 260);
-  --accent: oklch(0.3 0.05 156);
-  --accent-foreground: oklch(0.9 0.08 156);
-  --destructive: oklch(0.65 0.2 25);
-  --destructive-foreground: oklch(0.97 0.003 0);
-  --warning: oklch(0.75 0.14 80);
-  --warning-foreground: oklch(0.15 0.02 80);
-  --border: oklch(1 0 0 / 8%);
-  --input: oklch(1 0 0 / 12%);
-  --ring: oklch(0.7 0.15 156);
-  --sidebar: oklch(0.18 0.015 260);
-  --sidebar-foreground: oklch(0.97 0.003 260);
-  --sidebar-primary: oklch(0.7 0.15 156);
-  --sidebar-primary-foreground: oklch(0.15 0.02 260);
-  --sidebar-accent: oklch(0.26 0.03 156);
-  --sidebar-accent-foreground: oklch(0.97 0.003 260);
-  --sidebar-border: oklch(1 0 0 / 8%);
-  --sidebar-ring: oklch(0.7 0.15 156);
-  --chart-1: oklch(0.7 0.15 156);
-  --chart-2: oklch(0.6 0.02 260);
-  --chart-3: oklch(0.8 0.04 156);
-  --chart-4: oklch(0.75 0.15 60);
-  --chart-5: oklch(0.65 0.2 25);
-}
+@import "@yuva-devlab/tokens/themes/finai.css";

package/dist/styles/themes/orchestrai.css

@@ -1,75 +1 @@
-/**
- * OrchestrAI Theme Preset — Terminal Moss & Deep Slate Cybernetic Palette
- * Modern OKLCH color spaces optimized for high-density agent telemetry and execution logs.
- */
-
-[data-brand="orchestrai"],
-[data-theme="orchestrai"],
-[data-brand="orchestrai"].dark,
-[data-brand="orchestrai"][data-theme="dark"] {
-  --radius: 0.5rem;
-  --background: oklch(0.195 0.005 120);
-  --foreground: oklch(0.93 0.012 112);
-  --card: oklch(0.235 0.008 120);
-  --card-foreground: oklch(0.93 0.012 112);
-  --popover: oklch(0.235 0.008 120);
-  --popover-foreground: oklch(0.93 0.012 112);
-  --primary: oklch(0.77 0.12 120);
-  --primary-foreground: oklch(0.195 0.005 120);
-  --secondary: oklch(0.285 0.008 120);
-  --secondary-foreground: oklch(0.91 0.01 112);
-  --muted: oklch(0.31 0.008 120);
-  --muted-foreground: oklch(0.67 0.015 112);
-  --accent: oklch(0.34 0.025 120);
-  --accent-foreground: oklch(0.9 0.015 112);
-  --destructive: oklch(0.61 0.2 27);
-  --destructive-foreground: oklch(0.96 0.01 90);
-  --warning: oklch(0.72 0.13 78);
-  --warning-foreground: oklch(0.2 0.015 78);
-  --border: oklch(0.36 0.009 120);
-  --input: oklch(0.36 0.009 120);
-  --ring: oklch(0.77 0.12 120);
-  --sidebar: oklch(0.215 0.006 120);
-  --sidebar-foreground: oklch(0.89 0.012 112);
-  --sidebar-primary: oklch(0.77 0.12 120);
-  --sidebar-primary-foreground: oklch(0.195 0.005 120);
-  --sidebar-accent: oklch(0.28 0.02 120);
-  --sidebar-accent-foreground: oklch(0.93 0.012 112);
-  --sidebar-border: oklch(0.32 0.008 120);
-  --sidebar-ring: oklch(0.77 0.12 120);
-  --overlay: oklch(0.11 0.004 120);
-  --chart-1: oklch(0.77 0.12 120);
-  --chart-2: oklch(0.65 0.1 190);
-  --chart-3: oklch(0.7 0.13 78);
-  --chart-4: oklch(0.62 0.16 310);
-  --chart-5: oklch(0.72 0.12 40);
-
-  /* ── Sizing, Spacing & Layout Tokens ───────────────────────────────────── */
-  --control-height-xs: 1.75rem;
-  --control-height-sm: 2rem;
-  --control-height-md: 2.25rem;
-  --control-height-lg: 2.5rem;
-  --control-height-xl: 3rem;
-
-  --icon-xs: 0.875rem;
-  --icon-sm: 1rem;
-  --icon-md: 1.25rem;
-  --icon-lg: 1.5rem;
-  --icon-xl: 2rem;
-
-  --space-1: 0.25rem;
-  --space-2: 0.5rem;
-  --space-3: 0.75rem;
-  --space-4: 1rem;
-  --space-5: 1.25rem;
-  --space-6: 1.5rem;
-  --space-8: 2rem;
-  --space-10: 2.5rem;
-
-  --card-padding: var(--space-4);
-  --dialog-padding: var(--space-5);
-  --form-field-gap: var(--space-3);
-  --section-gap: var(--space-5);
-  --table-row-padding-x: var(--space-4);
-  --table-row-padding-y: var(--space-3);
-}
+@import "@yuva-devlab/tokens/themes/orchestrai.css";

package/dist/styles.css

@@ -1,6 +1,18 @@
-@import "tailwindcss";
-@import "./preset.css";
+/**
+ * @file src/styles/styles.css
+ * @description Master stylesheet for @yuva-devlab/ui.
+ * Architecture: Tokens (@yuva-devlab/tokens) -> Common Primitives -> Component Styles.
+ * Zero Tailwind dependency. Pure CSS with scoped dl-* classes.
+ */
 
-/* ── Brand Scoped Themes ─────────────────────────────────────────────────── */
-@import "./themes/finai.css";
-@import "./themes/orchestrai.css";
+/* ── 0. Establish Layer Precedence (utilities > dl-components > dl-base) ─── */
+@layer dl-base, dl-components, utilities;
+
+/* ── 1. Design Tokens & Theme Baseline ───────────────────────────────────── */
+@import "@yuva-devlab/tokens/styles.css";
+
+/* ── 2. Common Animations & Primitives ───────────────────────────────────── */
+@import "./common.css";
+
+/* ── 3. Modular Scoped Component Styles ─────────────────────────────────── */
+@import "./components.css";

package/dist/themes/finai.css

@@ -1,114 +1 @@
-/**
- * FinAI Theme Preset — Emerald / Forest Green Palette
- * Modern OKLCH color spaces optimized for trust, clarity, and financial wellness.
- */
-
-:root,
-[data-brand="finai"],
-[data-theme="finai"] {
-  --radius: 0.75rem;
-  --background: oklch(0.985 0.001 247);
-  --foreground: oklch(0.21 0.02 260);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.21 0.02 260);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.21 0.02 260);
-  --primary: oklch(0.63 0.14 156);
-  --primary-foreground: oklch(0.99 0.005 150);
-  --secondary: oklch(0.965 0.003 260);
-  --secondary-foreground: oklch(0.21 0.02 260);
-  --muted: oklch(0.965 0.003 260);
-  --muted-foreground: oklch(0.52 0.015 260);
-  --accent: oklch(0.95 0.03 156);
-  --accent-foreground: oklch(0.35 0.09 156);
-  --destructive: oklch(0.6 0.22 25);
-  --destructive-foreground: oklch(0.99 0.005 0);
-  --warning: oklch(0.75 0.14 80);
-  --warning-foreground: oklch(0.2 0.02 80);
-  --border: oklch(0.92 0.005 260);
-  --input: oklch(0.92 0.005 260);
-  --ring: oklch(0.63 0.14 156);
-  --sidebar: oklch(1 0 0);
-  --sidebar-foreground: oklch(0.21 0.02 260);
-  --sidebar-primary: oklch(0.63 0.14 156);
-  --sidebar-primary-foreground: oklch(0.99 0.005 150);
-  --sidebar-accent: oklch(0.95 0.03 156);
-  --sidebar-accent-foreground: oklch(0.35 0.09 156);
-  --sidebar-border: oklch(0.93 0.005 260);
-  --sidebar-ring: oklch(0.63 0.14 156);
-  --chart-1: oklch(0.63 0.14 156);
-  --chart-2: oklch(0.55 0.02 260);
-  --chart-3: oklch(0.75 0.04 156);
-  --chart-4: oklch(0.7 0.15 60);
-  --chart-5: oklch(0.6 0.18 25);
-
-  /* ── Sizing, Spacing & Layout Tokens ───────────────────────────────────── */
-  --control-height-xs: 1.75rem;
-  --control-height-sm: 2rem;
-  --control-height-md: 2.375rem;
-  --control-height-lg: 2.75rem;
-  --control-height-xl: 3.25rem;
-
-  --icon-xs: 0.75rem;
-  --icon-sm: 0.875rem;
-  --icon-md: 1rem;
-  --icon-lg: 1.25rem;
-  --icon-xl: 1.5rem;
-
-  --space-1: 0.25rem;
-  --space-2: 0.5rem;
-  --space-3: 0.75rem;
-  --space-4: 1rem;
-  --space-5: 1.25rem;
-  --space-6: 1.5rem;
-  --space-8: 2rem;
-  --space-10: 2.5rem;
-
-  --card-padding: var(--space-5);
-  --dialog-padding: var(--space-6);
-  --form-field-gap: var(--space-4);
-  --section-gap: var(--space-6);
-  --table-row-padding-x: var(--space-6);
-  --table-row-padding-y: var(--space-4);
-}
-
-.dark,
-[data-theme="dark"],
-[data-theme="finai-dark"],
-[data-brand="finai"].dark,
-[data-brand="finai"][data-theme="dark"] {
-  --background: oklch(0.16 0.015 260);
-  --foreground: oklch(0.97 0.003 260);
-  --card: oklch(0.2 0.015 260);
-  --card-foreground: oklch(0.97 0.003 260);
-  --popover: oklch(0.2 0.015 260);
-  --popover-foreground: oklch(0.97 0.003 260);
-  --primary: oklch(0.7 0.15 156);
-  --primary-foreground: oklch(0.15 0.02 260);
-  --secondary: oklch(0.25 0.015 260);
-  --secondary-foreground: oklch(0.97 0.003 260);
-  --muted: oklch(0.25 0.015 260);
-  --muted-foreground: oklch(0.7 0.01 260);
-  --accent: oklch(0.3 0.05 156);
-  --accent-foreground: oklch(0.9 0.08 156);
-  --destructive: oklch(0.65 0.2 25);
-  --destructive-foreground: oklch(0.97 0.003 0);
-  --warning: oklch(0.75 0.14 80);
-  --warning-foreground: oklch(0.15 0.02 80);
-  --border: oklch(1 0 0 / 8%);
-  --input: oklch(1 0 0 / 12%);
-  --ring: oklch(0.7 0.15 156);
-  --sidebar: oklch(0.18 0.015 260);
-  --sidebar-foreground: oklch(0.97 0.003 260);
-  --sidebar-primary: oklch(0.7 0.15 156);
-  --sidebar-primary-foreground: oklch(0.15 0.02 260);
-  --sidebar-accent: oklch(0.26 0.03 156);
-  --sidebar-accent-foreground: oklch(0.97 0.003 260);
-  --sidebar-border: oklch(1 0 0 / 8%);
-  --sidebar-ring: oklch(0.7 0.15 156);
-  --chart-1: oklch(0.7 0.15 156);
-  --chart-2: oklch(0.6 0.02 260);
-  --chart-3: oklch(0.8 0.04 156);
-  --chart-4: oklch(0.75 0.15 60);
-  --chart-5: oklch(0.65 0.2 25);
-}
+@import "@yuva-devlab/tokens/themes/finai.css";

package/dist/themes/orchestrai.css

@@ -1,75 +1 @@
-/**
- * OrchestrAI Theme Preset — Terminal Moss & Deep Slate Cybernetic Palette
- * Modern OKLCH color spaces optimized for high-density agent telemetry and execution logs.
- */
-
-[data-brand="orchestrai"],
-[data-theme="orchestrai"],
-[data-brand="orchestrai"].dark,
-[data-brand="orchestrai"][data-theme="dark"] {
-  --radius: 0.5rem;
-  --background: oklch(0.195 0.005 120);
-  --foreground: oklch(0.93 0.012 112);
-  --card: oklch(0.235 0.008 120);
-  --card-foreground: oklch(0.93 0.012 112);
-  --popover: oklch(0.235 0.008 120);
-  --popover-foreground: oklch(0.93 0.012 112);
-  --primary: oklch(0.77 0.12 120);
-  --primary-foreground: oklch(0.195 0.005 120);
-  --secondary: oklch(0.285 0.008 120);
-  --secondary-foreground: oklch(0.91 0.01 112);
-  --muted: oklch(0.31 0.008 120);
-  --muted-foreground: oklch(0.67 0.015 112);
-  --accent: oklch(0.34 0.025 120);
-  --accent-foreground: oklch(0.9 0.015 112);
-  --destructive: oklch(0.61 0.2 27);
-  --destructive-foreground: oklch(0.96 0.01 90);
-  --warning: oklch(0.72 0.13 78);
-  --warning-foreground: oklch(0.2 0.015 78);
-  --border: oklch(0.36 0.009 120);
-  --input: oklch(0.36 0.009 120);
-  --ring: oklch(0.77 0.12 120);
-  --sidebar: oklch(0.215 0.006 120);
-  --sidebar-foreground: oklch(0.89 0.012 112);
-  --sidebar-primary: oklch(0.77 0.12 120);
-  --sidebar-primary-foreground: oklch(0.195 0.005 120);
-  --sidebar-accent: oklch(0.28 0.02 120);
-  --sidebar-accent-foreground: oklch(0.93 0.012 112);
-  --sidebar-border: oklch(0.32 0.008 120);
-  --sidebar-ring: oklch(0.77 0.12 120);
-  --overlay: oklch(0.11 0.004 120);
-  --chart-1: oklch(0.77 0.12 120);
-  --chart-2: oklch(0.65 0.1 190);
-  --chart-3: oklch(0.7 0.13 78);
-  --chart-4: oklch(0.62 0.16 310);
-  --chart-5: oklch(0.72 0.12 40);
-
-  /* ── Sizing, Spacing & Layout Tokens ───────────────────────────────────── */
-  --control-height-xs: 1.75rem;
-  --control-height-sm: 2rem;
-  --control-height-md: 2.25rem;
-  --control-height-lg: 2.5rem;
-  --control-height-xl: 3rem;
-
-  --icon-xs: 0.875rem;
-  --icon-sm: 1rem;
-  --icon-md: 1.25rem;
-  --icon-lg: 1.5rem;
-  --icon-xl: 2rem;
-
-  --space-1: 0.25rem;
-  --space-2: 0.5rem;
-  --space-3: 0.75rem;
-  --space-4: 1rem;
-  --space-5: 1.25rem;
-  --space-6: 1.5rem;
-  --space-8: 2rem;
-  --space-10: 2.5rem;
-
-  --card-padding: var(--space-4);
-  --dialog-padding: var(--space-5);
-  --form-field-gap: var(--space-3);
-  --section-gap: var(--space-5);
-  --table-row-padding-x: var(--space-4);
-  --table-row-padding-y: var(--space-3);
-}
+@import "@yuva-devlab/tokens/themes/orchestrai.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuva-devlab/ui",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -22,7 +22,11 @@
     "./preset.css": "./dist/preset.css",
     "./themes/finai.css": "./dist/themes/finai.css",
     "./themes/orchestrai.css": "./dist/themes/orchestrai.css",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./root.css": "./dist/root.css",
+    "./common.css": "./dist/common.css",
+    "./components/*": "./dist/components/*",
+    "./components.css": "./dist/components.css"
   },
   "files": [
     "dist"
@@ -65,12 +69,13 @@
     "react-hook-form": "^7.71.2",
     "react-resizable-panels": "^4.6.5",
     "recharts": "^2.15.4",
-    "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "vaul": "^1.1.2",
-    "zod": "^3.25.76"
+    "zod": "^3.25.76",
+    "@yuva-devlab/tokens": "1.1.0"
   },
   "devDependencies": {
+    "@storybook/react": "^8.6.14",
     "@types/react": "^19.2.6",
     "@types/react-dom": "^19.2.6",
     "react": "^19.2.0",
@@ -80,7 +85,8 @@
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "sonner": "^2.0.0"
   },
   "scripts": {
     "build": "tsup",