@yuva-devlab/ui 1.4.4 → 2.0.0

package/dist/styles/preset.css

@@ -1,8 +1,6 @@
 /**
  * @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.
+ * @description Composite preset importing tokens and UI component styles.
  */
-@import "@yuva-devlab/tokens/preset.css";
+@import "@yuva-devlab/tokens/styles.css";
 @import "./styles.css";

package/dist/styles/styles.css

@@ -1,12 +1,12 @@
 /**
  * @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.
+ * Architecture: Reset -> Tokens -> Components -> Layout -> Utilities.
+ * Governed by W3C Cascade Layers.
  */
 
-/* ── 0. Establish Layer Precedence (utilities > dl-components > dl-base) ─── */
-@layer dl-base, dl-components, utilities;
+/* ── 0. Establish Layer Precedence ───────────────────────────────────────── */
+@layer dl-reset, dl-tokens, dl-components, dl-layout, dl-utilities;
 
 /* ── 1. Design Tokens & Theme Baseline ───────────────────────────────────── */
 @import "@yuva-devlab/tokens/styles.css";
@@ -16,3 +16,6 @@
 
 /* ── 3. Modular Scoped Component Styles ─────────────────────────────────── */
 @import "./components.css";
+
+/* ── 4. Zero-Runtime Platform Utilities ─────────────────────────────────── */
+@import "./utilities.css";

package/dist/styles/utilities.css

@@ -0,0 +1,137 @@
+/**
+ * @file src/styles/utilities.css
+ * @description Platform Utility Layer (@layer dl-utilities).
+ * Provides semantic, accessibility, icon, and text utilities.
+ */
+
+@layer dl-utilities {
+  /* ── Accessibility ─────────────────────────────────────────────────────── */
+  .dl-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .dl-not-sr-only {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+
+  /* ── Text Clamping & Truncation ────────────────────────────────────────── */
+  .dl-truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .dl-line-clamp-1 {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .dl-line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .dl-line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  /* ── Typography & Alignment ────────────────────────────────────────────── */
+  .dl-text-left {
+    text-align: left;
+  }
+
+  .dl-text-center {
+    text-align: center;
+  }
+
+  .dl-text-right {
+    text-align: right;
+  }
+
+  .dl-whitespace-nowrap {
+    white-space: nowrap;
+  }
+
+  /* ── Standard Icon Dimensions ──────────────────────────────────────────── */
+  .dl-icon-xs {
+    width: var(--icon-xs, 0.875rem);
+    height: var(--icon-xs, 0.875rem);
+    flex-shrink: 0;
+  }
+
+  .dl-icon-sm {
+    width: var(--icon-sm, 1rem);
+    height: var(--icon-sm, 1rem);
+    flex-shrink: 0;
+  }
+
+  .dl-icon-md {
+    width: var(--icon-md, 1.25rem);
+    height: var(--icon-md, 1.25rem);
+    flex-shrink: 0;
+  }
+
+  .dl-icon-lg {
+    width: var(--icon-lg, 1.5rem);
+    height: var(--icon-lg, 1.5rem);
+    flex-shrink: 0;
+  }
+
+  .dl-icon-xl {
+    width: var(--icon-xl, 2rem);
+    height: var(--icon-xl, 2rem);
+    flex-shrink: 0;
+  }
+
+  /* ── Containment & Overflow ────────────────────────────────────────────── */
+  .dl-overflow-hidden {
+    overflow: hidden;
+  }
+
+  .dl-overflow-auto {
+    overflow: auto;
+  }
+
+  .dl-overflow-x-auto {
+    overflow-x: auto;
+  }
+
+  .dl-overflow-y-auto {
+    overflow-y: auto;
+  }
+
+  /* ── Interaction ───────────────────────────────────────────────────────── */
+  .dl-cursor-pointer {
+    cursor: pointer;
+  }
+
+  .dl-cursor-not-allowed {
+    cursor: not-allowed;
+  }
+
+  .dl-select-none {
+    user-select: none;
+  }
+}

package/dist/styles.css

@@ -1,12 +1,12 @@
 /**
  * @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.
+ * Architecture: Reset -> Tokens -> Components -> Layout -> Utilities.
+ * Governed by W3C Cascade Layers.
  */
 
-/* ── 0. Establish Layer Precedence (utilities > dl-components > dl-base) ─── */
-@layer dl-base, dl-components, utilities;
+/* ── 0. Establish Layer Precedence ───────────────────────────────────────── */
+@layer dl-reset, dl-tokens, dl-components, dl-layout, dl-utilities;
 
 /* ── 1. Design Tokens & Theme Baseline ───────────────────────────────────── */
 @import "@yuva-devlab/tokens/styles.css";
@@ -16,3 +16,6 @@
 
 /* ── 3. Modular Scoped Component Styles ─────────────────────────────────── */
 @import "./components.css";
+
+/* ── 4. Zero-Runtime Platform Utilities ─────────────────────────────────── */
+@import "./utilities.css";

package/dist/utilities.css

@@ -0,0 +1,137 @@
+/**
+ * @file src/styles/utilities.css
+ * @description Platform Utility Layer (@layer dl-utilities).
+ * Provides semantic, accessibility, icon, and text utilities.
+ */
+
+@layer dl-utilities {
+  /* ── Accessibility ─────────────────────────────────────────────────────── */
+  .dl-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .dl-not-sr-only {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+
+  /* ── Text Clamping & Truncation ────────────────────────────────────────── */
+  .dl-truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .dl-line-clamp-1 {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .dl-line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .dl-line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  /* ── Typography & Alignment ────────────────────────────────────────────── */
+  .dl-text-left {
+    text-align: left;
+  }
+
+  .dl-text-center {
+    text-align: center;
+  }
+
+  .dl-text-right {
+    text-align: right;
+  }
+
+  .dl-whitespace-nowrap {
+    white-space: nowrap;
+  }
+
+  /* ── Standard Icon Dimensions ──────────────────────────────────────────── */
+  .dl-icon-xs {
+    width: var(--icon-xs, 0.875rem);
+    height: var(--icon-xs, 0.875rem);
+    flex-shrink: 0;
+  }
+
+  .dl-icon-sm {
+    width: var(--icon-sm, 1rem);
+    height: var(--icon-sm, 1rem);
+    flex-shrink: 0;
+  }
+
+  .dl-icon-md {
+    width: var(--icon-md, 1.25rem);
+    height: var(--icon-md, 1.25rem);
+    flex-shrink: 0;
+  }
+
+  .dl-icon-lg {
+    width: var(--icon-lg, 1.5rem);
+    height: var(--icon-lg, 1.5rem);
+    flex-shrink: 0;
+  }
+
+  .dl-icon-xl {
+    width: var(--icon-xl, 2rem);
+    height: var(--icon-xl, 2rem);
+    flex-shrink: 0;
+  }
+
+  /* ── Containment & Overflow ────────────────────────────────────────────── */
+  .dl-overflow-hidden {
+    overflow: hidden;
+  }
+
+  .dl-overflow-auto {
+    overflow: auto;
+  }
+
+  .dl-overflow-x-auto {
+    overflow-x: auto;
+  }
+
+  .dl-overflow-y-auto {
+    overflow-y: auto;
+  }
+
+  /* ── Interaction ───────────────────────────────────────────────────────── */
+  .dl-cursor-pointer {
+    cursor: pointer;
+  }
+
+  .dl-cursor-not-allowed {
+    cursor: not-allowed;
+  }
+
+  .dl-select-none {
+    user-select: none;
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yuva-devlab/ui",
-  "version": "1.4.4",
-  "description": "Production-ready, accessible React 19 component library built on Radix UI and Tailwind CSS 4 design tokens for Yuva DevLab",
+  "version": "2.0.0",
+  "description": "Production-ready, accessible React 19 component library built on Radix UI and semantic design tokens for Yuva DevLab",
   "repository": {
     "type": "git",
     "url": "https://github.com/yuvadevlab/devlab-shared.git",
@@ -16,7 +16,6 @@
     "ui",
     "components",
     "radix-ui",
-    "tailwindcss",
     "design-system",
     "devlab"
   ],
@@ -45,7 +44,8 @@
     "./root.css": "./dist/root.css",
     "./common.css": "./dist/common.css",
     "./components/*": "./dist/components/*",
-    "./components.css": "./dist/components.css"
+    "./components.css": "./dist/components.css",
+    "./utilities.css": "./dist/utilities.css"
   },
   "files": [
     "dist"
@@ -88,10 +88,9 @@
     "react-hook-form": "^7.71.2",
     "react-resizable-panels": "^4.6.5",
     "recharts": "^2.15.4",
-    "tailwind-merge": "^3.5.0",
     "vaul": "^1.1.2",
     "zod": "^3.25.76",
-    "@yuva-devlab/tokens": "1.3.1"
+    "@yuva-devlab/tokens": "2.0.0"
   },
   "devDependencies": {
     "@storybook/react": "^8.6.14",