@yuva-devlab/ui 2.2.1 → 3.0.0

package/README.md

@@ -21,7 +21,7 @@
 
 ## Features
 
-- 🎨 **Multi-Brand Theme Architecture** - Seamless brand isolation across OrchestrAI, VitalAI, FinAI, Logs, and Portal.
+- 🎨 **Multi-Brand Theme Architecture** - Seamless brand isolation across OrchestrAI, FinAI, Logs, Portal, and KnowledgeAI.
 - 📐 **Dynamic Theme-Driven Sizing** - Automatic adaptation across brand densities (compact telemetry logs, precision finance tables, athletic kinetic scaling).
 - ⚡ **Pure Platform CSS** - Scoped W3C Cascade Layers (`@layer dl-components, dl-layout, dl-utilities`) and semantic design tokens.
 - 🔤 **Typography Primitives** - First-class `<Heading>` and `<Text>` primitives with semantic decoupling.
@@ -74,7 +74,7 @@ In your application's root stylesheet (e.g. `globals.css` or `app.css`), establi
 @import "@yuva-devlab/ui/styles.css";
 ```
 
-> **Tip:** You can import any theme preset from `@yuva-devlab/tokens/themes/*` (`finai`, `vitalai`, `logs`, `orchestrai`, `portal`).
+> **Tip:** You can import any theme preset from `@yuva-devlab/tokens/themes/*` (`finai`, `logs`, `orchestrai`, `portal`).
 
 ### 2. Render Components & Typography Primitives
 
@@ -172,7 +172,6 @@ DevLab UI supports multi-brand switching at runtime using `data-brand` and `data
 | Brand Key    | Theme Name        | Primary Aesthetic         | Token Import                                |
 | :----------- | :---------------- | :------------------------ | :------------------------------------------ |
 | `finai`      | **FinAI**         | High-Finance Emerald      | `@yuva-devlab/tokens/themes/finai.css`      |
-| `vitalai`    | **VitalAI**       | Athletic Volt Kinetic     | `@yuva-devlab/tokens/themes/vitalai.css`    |
 | `logs`       | **DevLab Logs**   | High-Density Matrix Amber | `@yuva-devlab/tokens/themes/logs.css`       |
 | `orchestrai` | **OrchestrAI**    | Midnight Neon Violet      | `@yuva-devlab/tokens/themes/orchestrai.css` |
 | `portal`     | **DevLab Portal** | Enterprise Modern Indigo  | `@yuva-devlab/tokens/themes/portal.css`     |

package/dist/components/table/table.css

@@ -1,32 +1,52 @@
 .dl-table-wrapper {
   position: relative;
   width: 100%;
-  overflow: auto;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 .dl-table {
   width: 100%;
   caption-side: bottom;
-  font-size: 0.875rem;
+  font-size: var(--text-body, 0.875rem);
   border-collapse: collapse;
 }
+
 .dl-table__head tr {
   border-bottom: 1px solid var(--border);
 }
+
 .dl-table__body tr:last-child {
   border-bottom: none;
 }
-.dl-table__body tr:hover {
-  background-color: color-mix(in oklch, var(--muted) 50%, transparent);
-}
+
 .dl-table__foot {
   border-top: 1px solid var(--border);
   font-weight: 500;
 }
+
 .dl-table__row {
   border-bottom: 1px solid var(--border);
-  transition: background-color 0.1s;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+/* Base subtle row hover */
+.dl-table__body tr:hover {
+  background-color: color-mix(in oklch, var(--muted) 40%, transparent);
+}
+
+/* Theme-Aware Enhanced Row Hover Highlighting */
+.dl-table--hoverable .dl-table__body tr:hover,
+.dl-table--hoverable .dl-table__row:hover,
+.dl-table__row--hoverable:hover {
+  background-color: var(
+    --table-row-hover,
+    color-mix(in oklch, var(--primary) 8%, transparent)
+  );
 }
+
 .dl-table__head-cell {
   height: var(--control-height-md, 2.5rem);
   padding: var(--table-row-padding-y, 0.5rem)
@@ -36,13 +56,15 @@
   color: var(--muted-foreground);
   white-space: nowrap;
 }
+
 .dl-table__cell {
   padding: var(--table-row-padding-y, 0.75rem)
     var(--table-row-padding-x, 0.75rem);
   vertical-align: middle;
 }
+
 .dl-table__caption {
   margin-top: 1rem;
-  font-size: 0.875rem;
+  font-size: var(--text-body-sm, 0.875rem);
   color: var(--muted-foreground);
 }

package/dist/components.css

@@ -5895,32 +5895,52 @@
   .dl-table-wrapper {
     position: relative;
     width: 100%;
-    overflow: auto;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
   }
 
   .dl-table {
     width: 100%;
     caption-side: bottom;
-    font-size: 0.875rem;
+    font-size: var(--text-body, 0.875rem);
     border-collapse: collapse;
   }
+
   .dl-table__head tr {
     border-bottom: 1px solid var(--border);
   }
+
   .dl-table__body tr:last-child {
     border-bottom: none;
   }
-  .dl-table__body tr:hover {
-    background-color: color-mix(in oklch, var(--muted) 50%, transparent);
-  }
+
   .dl-table__foot {
     border-top: 1px solid var(--border);
     font-weight: 500;
   }
+
   .dl-table__row {
     border-bottom: 1px solid var(--border);
-    transition: background-color 0.1s;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+  }
+
+  /* Base subtle row hover */
+  .dl-table__body tr:hover {
+    background-color: color-mix(in oklch, var(--muted) 40%, transparent);
   }
+
+  /* Theme-Aware Enhanced Row Hover Highlighting */
+  .dl-table--hoverable .dl-table__body tr:hover,
+  .dl-table--hoverable .dl-table__row:hover,
+  .dl-table__row--hoverable:hover {
+    background-color: var(
+      --table-row-hover,
+      color-mix(in oklch, var(--primary) 8%, transparent)
+    );
+  }
+
   .dl-table__head-cell {
     height: var(--control-height-md, 2.5rem);
     padding: var(--table-row-padding-y, 0.5rem)
@@ -5930,14 +5950,16 @@
     color: var(--muted-foreground);
     white-space: nowrap;
   }
+
   .dl-table__cell {
     padding: var(--table-row-padding-y, 0.75rem)
       var(--table-row-padding-x, 0.75rem);
     vertical-align: middle;
   }
+
   .dl-table__caption {
     margin-top: 1rem;
-    font-size: 0.875rem;
+    font-size: var(--text-body-sm, 0.875rem);
     color: var(--muted-foreground);
   }
 

package/dist/index.cjs

@@ -2037,7 +2037,18 @@ var import_lucide_react14 = require("lucide-react");
 var React26 = __toESM(require("react"), 1);
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var Table = React26.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "dl-table-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("table", { ref, className: cn("dl-table", className), ...props }) })
+  ({ className, hoverable = false, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "dl-table-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "table",
+    {
+      ref,
+      className: cn(
+        "dl-table",
+        hoverable && "dl-table--hoverable",
+        className
+      ),
+      ...props
+    }
+  ) })
 );
 Table.displayName = "Table";
 var TableHeader = React26.forwardRef(
@@ -2053,7 +2064,18 @@ var TableFooter = React26.forwardRef(
 );
 TableFooter.displayName = "TableFooter";
 var TableRow = React26.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("tr", { ref, className: cn("dl-table__row", className), ...props })
+  ({ className, hoverable, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "tr",
+    {
+      ref,
+      className: cn(
+        "dl-table__row",
+        hoverable && "dl-table__row--hoverable",
+        className
+      ),
+      ...props
+    }
+  )
 );
 TableRow.displayName = "TableRow";
 var TableHead = React26.forwardRef(
@@ -2269,6 +2291,7 @@ function DataTable({
   loading = false,
   emptyState,
   onRowClick,
+  hoverable = false,
   className
 }) {
   const [internalPage, setInternalPage] = React29.useState(1);
@@ -2334,7 +2357,7 @@ function DataTable({
     return typeof val === "string" || typeof val === "number" ? val : index;
   };
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("dl-data-table-container", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "dl-data-table-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Table, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "dl-data-table-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Table, { hoverable: hoverable || Boolean(onRowClick), children: [
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TableRow, { children: columns.map((col) => {
         const isSorted = sortKey === col.key;
         return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
@@ -7023,7 +7046,7 @@ var LegalFooter = React95.forwardRef(
           className: cn("dl-legal-footer dl-legal-footer--sidebar", className),
           ...props,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { children: appName ? `${appName} ${version ?? ""}`.trim() : version ?? "v1.0.0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { children: appName ? `${appName} ${version ?? ""}`.trim() : version ?? "" }),
             /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("span", { children: [
               "\xA9 ",
               currentYear,