@hilum/ui 3.8.5 → 3.10.0

package/dist/tokens.css

@@ -77,11 +77,14 @@
   --color-surface: var(--surface);
   --color-surface-foreground: var(--surface-foreground);
   --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
   --color-input: var(--input);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
+  --color-hover: var(--hover);
+  --color-active: var(--active);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
   --color-secondary: var(--secondary);
@@ -93,6 +96,25 @@
   --color-warning: var(--warning);
   --color-warning-foreground: var(--warning-foreground);
   --color-ring: var(--ring);
+  --color-checker-a: var(--checker-a);
+  --color-checker-b: var(--checker-b);
+  --color-canvas: var(--canvas);
+  --color-surface-1: var(--surface-1);
+  --color-surface-2: var(--surface-2);
+  --color-surface-3: var(--surface-3);
+  --color-surface-4: var(--surface-4);
+  --color-surface-5: var(--surface-5);
+  --color-surface-6: var(--surface-6);
+  --color-surface-7: var(--surface-7);
+  --color-surface-8: var(--surface-8);
+  --shadow-surface-1: var(--surface-shadow-1);
+  --shadow-surface-2: var(--surface-shadow-2);
+  --shadow-surface-3: var(--surface-shadow-3);
+  --shadow-surface-4: var(--surface-shadow-4);
+  --shadow-surface-5: var(--surface-shadow-5);
+  --shadow-surface-6: var(--surface-shadow-6);
+  --shadow-surface-7: var(--surface-shadow-7);
+  --shadow-surface-8: var(--surface-shadow-8);
 }
 
 :root {
@@ -102,12 +124,15 @@
   --card-foreground: #171717;
   --surface: #fafafa;
   --surface-foreground: #262626;
-  --border: #f5f5f5;
-  --input: #f5f5f5;
+  --border: #e5e5e5;
+  --border-strong: #d4d4d4;
+  --input: #e5e5e5;
   --muted: #fafafa;
   --muted-foreground: #737373;
   --accent: #fdf0ff;
   --accent-foreground: #740092;
+  --hover: rgba(23, 23, 23, 0.05);
+  --active: rgba(23, 23, 23, 0.08);
   --primary: #c100f1;
   --primary-foreground: #ffffff;
   --secondary: #fafafa;
@@ -119,6 +144,25 @@
   --warning: #fff5bf;
   --warning-foreground: #171717;
   --ring: #c100f1;
+  --checker-a: #ffffff;
+  --checker-b: #e5e5e5;
+  --canvas: #f5f5f5;
+  --surface-1: #ffffff;
+  --surface-2: #ffffff;
+  --surface-3: #ffffff;
+  --surface-4: #ffffff;
+  --surface-5: #ffffff;
+  --surface-6: #ffffff;
+  --surface-7: #ffffff;
+  --surface-8: #ffffff;
+  --surface-shadow-1: 0 0 0 1px rgba(0, 0, 0, 0.06);
+  --surface-shadow-2: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06);
+  --surface-shadow-3: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06), 0 6px 6px -3px rgba(0, 0, 0, 0.06);
+  --surface-shadow-4: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06), 0 6px 6px -3px rgba(0, 0, 0, 0.06), 0 12px 12px -6px rgba(0, 0, 0, 0.04);
+  --surface-shadow-5: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06), 0 6px 6px -3px rgba(0, 0, 0, 0.06), 0 12px 12px -6px rgba(0, 0, 0, 0.04), 0 24px 24px -12px rgba(0, 0, 0, 0.04);
+  --surface-shadow-6: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06), 0 6px 6px -3px rgba(0, 0, 0, 0.06), 0 12px 12px -6px rgba(0, 0, 0, 0.04), 0 24px 24px -12px rgba(0, 0, 0, 0.04), 0 24px 24px 2px rgba(0, 0, 0, 0.08);
+  --surface-shadow-7: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06), 0 6px 6px -3px rgba(0, 0, 0, 0.06), 0 12px 12px -6px rgba(0, 0, 0, 0.04), 0 24px 24px -12px rgba(0, 0, 0, 0.04), 0 24px 24px 2px rgba(0, 0, 0, 0.08), 0 32px 40px 4px rgba(0, 0, 0, 0.1);
+  --surface-shadow-8: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06), 0 6px 6px -3px rgba(0, 0, 0, 0.06), 0 12px 12px -6px rgba(0, 0, 0, 0.04), 0 24px 24px -12px rgba(0, 0, 0, 0.04), 0 24px 24px 2px rgba(0, 0, 0, 0.08), 0 32px 40px 4px rgba(0, 0, 0, 0.1), 0 48px 56px 8px rgba(0, 0, 0, 0.12);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -129,12 +173,15 @@
     --card-foreground: #fafafa;
     --surface: #1a1a1a;
     --surface-foreground: #f5f5f5;
-    --border: #404040;
-    --input: #262626;
+    --border: #4a4a4a;
+    --border-strong: #5c5c5c;
+    --input: #4a4a4a;
     --muted: #262626;
     --muted-foreground: #a3a3a3;
     --accent: #404040;
     --accent-foreground: #fafafa;
+    --hover: rgba(250, 250, 250, 0.06);
+    --active: rgba(250, 250, 250, 0.1);
     --primary: #c100f1;
     --primary-foreground: #ffffff;
     --secondary: #262626;
@@ -146,6 +193,25 @@
     --warning: #221600;
     --warning-foreground: #fffad0;
     --ring: #c100f1;
+    --checker-a: #4a4a4a;
+    --checker-b: #333333;
+    --canvas: #1c1c1c;
+    --surface-1: #171717;
+    --surface-2: #1f1f1f;
+    --surface-3: #262626;
+    --surface-4: #2b2b2b;
+    --surface-5: #303030;
+    --surface-6: #353535;
+    --surface-7: #3a3a3a;
+    --surface-8: #404040;
+    --surface-shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.08);
+    --surface-shadow-2: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 1px -0.5px rgba(0, 0, 0, 0.24), 0 3px 3px -1.5px rgba(0, 0, 0, 0.24);
+    --surface-shadow-3: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 1px -0.5px rgba(0, 0, 0, 0.24), 0 3px 3px -1.5px rgba(0, 0, 0, 0.24), 0 6px 6px -3px rgba(0, 0, 0, 0.24);
+    --surface-shadow-4: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 1px -0.5px rgba(0, 0, 0, 0.24), 0 3px 3px -1.5px rgba(0, 0, 0, 0.24), 0 6px 6px -3px rgba(0, 0, 0, 0.24), 0 12px 12px -6px rgba(0, 0, 0, 0.16);
+    --surface-shadow-5: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 1px -0.5px rgba(0, 0, 0, 0.24), 0 3px 3px -1.5px rgba(0, 0, 0, 0.24), 0 6px 6px -3px rgba(0, 0, 0, 0.24), 0 12px 12px -6px rgba(0, 0, 0, 0.16), 0 24px 24px -12px rgba(0, 0, 0, 0.16);
+    --surface-shadow-6: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 1px -0.5px rgba(0, 0, 0, 0.24), 0 3px 3px -1.5px rgba(0, 0, 0, 0.24), 0 6px 6px -3px rgba(0, 0, 0, 0.24), 0 12px 12px -6px rgba(0, 0, 0, 0.16), 0 24px 24px -12px rgba(0, 0, 0, 0.16), 0 24px 24px 2px rgba(0, 0, 0, 0.32);
+    --surface-shadow-7: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 1px -0.5px rgba(0, 0, 0, 0.24), 0 3px 3px -1.5px rgba(0, 0, 0, 0.24), 0 6px 6px -3px rgba(0, 0, 0, 0.24), 0 12px 12px -6px rgba(0, 0, 0, 0.16), 0 24px 24px -12px rgba(0, 0, 0, 0.16), 0 24px 24px 2px rgba(0, 0, 0, 0.32), 0 32px 40px 4px rgba(0, 0, 0, 0.4);
+    --surface-shadow-8: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 1px -0.5px rgba(0, 0, 0, 0.24), 0 3px 3px -1.5px rgba(0, 0, 0, 0.24), 0 6px 6px -3px rgba(0, 0, 0, 0.24), 0 12px 12px -6px rgba(0, 0, 0, 0.16), 0 24px 24px -12px rgba(0, 0, 0, 0.16), 0 24px 24px 2px rgba(0, 0, 0, 0.32), 0 32px 40px 4px rgba(0, 0, 0, 0.4), 0 48px 56px 8px rgba(0, 0, 0, 0.4);
   }
 }
 
@@ -156,12 +222,15 @@
   --card-foreground: #fafafa;
   --surface: #1a1a1a;
   --surface-foreground: #f5f5f5;
-  --border: #404040;
-  --input: #262626;
+  --border: #4a4a4a;
+  --border-strong: #5c5c5c;
+  --input: #4a4a4a;
   --muted: #262626;
   --muted-foreground: #a3a3a3;
   --accent: #404040;
   --accent-foreground: #fafafa;
+  --hover: rgba(250, 250, 250, 0.06);
+  --active: rgba(250, 250, 250, 0.1);
   --primary: #c100f1;
   --primary-foreground: #ffffff;
   --secondary: #262626;
@@ -173,6 +242,25 @@
   --warning: #221600;
   --warning-foreground: #fffad0;
   --ring: #c100f1;
+  --checker-a: #4a4a4a;
+  --checker-b: #333333;
+  --canvas: #1c1c1c;
+  --surface-1: #171717;
+  --surface-2: #1f1f1f;
+  --surface-3: #262626;
+  --surface-4: #2b2b2b;
+  --surface-5: #303030;
+  --surface-6: #353535;
+  --surface-7: #3a3a3a;
+  --surface-8: #404040;
+  --surface-shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.08);
+  --surface-shadow-2: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 1px -0.5px rgba(0, 0, 0, 0.24), 0 3px 3px -1.5px rgba(0, 0, 0, 0.24);
+  --surface-shadow-3: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 1px -0.5px rgba(0, 0, 0, 0.24), 0 3px 3px -1.5px rgba(0, 0, 0, 0.24), 0 6px 6px -3px rgba(0, 0, 0, 0.24);
+  --surface-shadow-4: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 1px -0.5px rgba(0, 0, 0, 0.24), 0 3px 3px -1.5px rgba(0, 0, 0, 0.24), 0 6px 6px -3px rgba(0, 0, 0, 0.24), 0 12px 12px -6px rgba(0, 0, 0, 0.16);
+  --surface-shadow-5: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 1px -0.5px rgba(0, 0, 0, 0.24), 0 3px 3px -1.5px rgba(0, 0, 0, 0.24), 0 6px 6px -3px rgba(0, 0, 0, 0.24), 0 12px 12px -6px rgba(0, 0, 0, 0.16), 0 24px 24px -12px rgba(0, 0, 0, 0.16);
+  --surface-shadow-6: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 1px -0.5px rgba(0, 0, 0, 0.24), 0 3px 3px -1.5px rgba(0, 0, 0, 0.24), 0 6px 6px -3px rgba(0, 0, 0, 0.24), 0 12px 12px -6px rgba(0, 0, 0, 0.16), 0 24px 24px -12px rgba(0, 0, 0, 0.16), 0 24px 24px 2px rgba(0, 0, 0, 0.32);
+  --surface-shadow-7: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 1px -0.5px rgba(0, 0, 0, 0.24), 0 3px 3px -1.5px rgba(0, 0, 0, 0.24), 0 6px 6px -3px rgba(0, 0, 0, 0.24), 0 12px 12px -6px rgba(0, 0, 0, 0.16), 0 24px 24px -12px rgba(0, 0, 0, 0.16), 0 24px 24px 2px rgba(0, 0, 0, 0.32), 0 32px 40px 4px rgba(0, 0, 0, 0.4);
+  --surface-shadow-8: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 1px -0.5px rgba(0, 0, 0, 0.24), 0 3px 3px -1.5px rgba(0, 0, 0, 0.24), 0 6px 6px -3px rgba(0, 0, 0, 0.24), 0 12px 12px -6px rgba(0, 0, 0, 0.16), 0 24px 24px -12px rgba(0, 0, 0, 0.16), 0 24px 24px 2px rgba(0, 0, 0, 0.32), 0 32px 40px 4px rgba(0, 0, 0, 0.4), 0 48px 56px 8px rgba(0, 0, 0, 0.4);
 }
 
 [data-theme="mid"] {
@@ -183,11 +271,14 @@
   --surface: #525252;
   --surface-foreground: #fafafa;
   --border: #a3a3a3;
-  --input: #404040;
+  --border-strong: #bdbdbd;
+  --input: #a3a3a3;
   --muted: #525252;
   --muted-foreground: #e5e5e5;
   --accent: #404040;
   --accent-foreground: #fafafa;
+  --hover: rgba(255, 255, 255, 0.08);
+  --active: rgba(255, 255, 255, 0.13);
   --primary: #c100f1;
   --primary-foreground: #ffffff;
   --secondary: #525252;
@@ -199,8 +290,52 @@
   --warning: #fff5bf;
   --warning-foreground: #171717;
   --ring: #c100f1;
+  --checker-a: #8a8a8a;
+  --checker-b: #6b6b6b;
+  --canvas: #636363;
+  --surface-1: #737373;
+  --surface-2: #6b6b6b;
+  --surface-3: #636363;
+  --surface-4: #5b5b5b;
+  --surface-5: #525252;
+  --surface-6: #4d4d4d;
+  --surface-7: #474747;
+  --surface-8: #404040;
+  --surface-shadow-1: 0 0 0 1px rgba(0, 0, 0, 0.14);
+  --surface-shadow-2: 0 0 0 1px rgba(0, 0, 0, 0.14), 0 1px 1px -0.5px rgba(0, 0, 0, 0.15), 0 3px 3px -1.5px rgba(0, 0, 0, 0.15);
+  --surface-shadow-3: 0 0 0 1px rgba(0, 0, 0, 0.14), 0 1px 1px -0.5px rgba(0, 0, 0, 0.15), 0 3px 3px -1.5px rgba(0, 0, 0, 0.15), 0 6px 6px -3px rgba(0, 0, 0, 0.15);
+  --surface-shadow-4: 0 0 0 1px rgba(0, 0, 0, 0.14), 0 1px 1px -0.5px rgba(0, 0, 0, 0.15), 0 3px 3px -1.5px rgba(0, 0, 0, 0.15), 0 6px 6px -3px rgba(0, 0, 0, 0.15), 0 12px 12px -6px rgba(0, 0, 0, 0.1);
+  --surface-shadow-5: 0 0 0 1px rgba(0, 0, 0, 0.14), 0 1px 1px -0.5px rgba(0, 0, 0, 0.15), 0 3px 3px -1.5px rgba(0, 0, 0, 0.15), 0 6px 6px -3px rgba(0, 0, 0, 0.15), 0 12px 12px -6px rgba(0, 0, 0, 0.1), 0 24px 24px -12px rgba(0, 0, 0, 0.1);
+  --surface-shadow-6: 0 0 0 1px rgba(0, 0, 0, 0.14), 0 1px 1px -0.5px rgba(0, 0, 0, 0.15), 0 3px 3px -1.5px rgba(0, 0, 0, 0.15), 0 6px 6px -3px rgba(0, 0, 0, 0.15), 0 12px 12px -6px rgba(0, 0, 0, 0.1), 0 24px 24px -12px rgba(0, 0, 0, 0.1), 0 24px 24px 2px rgba(0, 0, 0, 0.2);
+  --surface-shadow-7: 0 0 0 1px rgba(0, 0, 0, 0.14), 0 1px 1px -0.5px rgba(0, 0, 0, 0.15), 0 3px 3px -1.5px rgba(0, 0, 0, 0.15), 0 6px 6px -3px rgba(0, 0, 0, 0.15), 0 12px 12px -6px rgba(0, 0, 0, 0.1), 0 24px 24px -12px rgba(0, 0, 0, 0.1), 0 24px 24px 2px rgba(0, 0, 0, 0.2), 0 32px 40px 4px rgba(0, 0, 0, 0.25);
+  --surface-shadow-8: 0 0 0 1px rgba(0, 0, 0, 0.14), 0 1px 1px -0.5px rgba(0, 0, 0, 0.15), 0 3px 3px -1.5px rgba(0, 0, 0, 0.15), 0 6px 6px -3px rgba(0, 0, 0, 0.15), 0 12px 12px -6px rgba(0, 0, 0, 0.1), 0 24px 24px -12px rgba(0, 0, 0, 0.1), 0 24px 24px 2px rgba(0, 0, 0, 0.2), 0 32px 40px 4px rgba(0, 0, 0, 0.25), 0 48px 56px 8px rgba(0, 0, 0, 0.3);
 }
 
+:root {
+  --density-control-height: 32px;
+  --density-input-height: 40px;
+  --density-row-height: 36px;
+  --density-text: 14px;
+  --density-label: 12px;
+  --density-menu-item-height: 40px;
+  --density-menu-text: 14px;
+  --density-padding-x: 12px;
+  --density-radius: 8px;
+}
+[data-density="compact"] {
+  --density-control-height: 24px;
+  --density-input-height: 24px;
+  --density-row-height: 28px;
+  --density-text: 12px;
+  --density-label: 11px;
+  --density-menu-item-height: 28px;
+  --density-menu-text: 13px;
+  --density-padding-x: 8px;
+  --density-radius: 5px;
+}
+
+@custom-variant compact (&:where([data-density="compact"], [data-density="compact"] *));
+
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *, .dark, .dark *));
 
 @utility display-xl {
@@ -275,6 +410,13 @@
   text-wrap: pretty;
 }
 
+@utility caption-sm {
+  font-family: var(--font-sans);
+  font-size: 0.6875rem;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
 @utility caption-xs {
   font-family: var(--font-sans);
   font-size: 0.625rem;
@@ -354,17 +496,19 @@
   50% { opacity: 1; transform: translateY(-1px) scale(1); }
 }
 
-*,
-::before,
-::after {
-  box-sizing: border-box;
-  border-color: var(--border);
-}
+@layer base {
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+    border-color: var(--border);
+  }
 
-html,
-body {
-  background-color: var(--background);
-  color: var(--foreground);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  html,
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 }

package/dist/tokens.d.ts

@@ -51,12 +51,15 @@ declare const tokens: {
             readonly cardForeground: "#171717";
             readonly surface: "#fafafa";
             readonly surfaceForeground: "#262626";
-            readonly border: "#f5f5f5";
-            readonly input: "#f5f5f5";
+            readonly border: "#e5e5e5";
+            readonly borderStrong: "#d4d4d4";
+            readonly input: "#e5e5e5";
             readonly muted: "#fafafa";
             readonly mutedForeground: "#737373";
             readonly accent: "#fdf0ff";
             readonly accentForeground: "#740092";
+            readonly hover: "rgba(23, 23, 23, 0.05)";
+            readonly active: "rgba(23, 23, 23, 0.08)";
             readonly primary: "#c100f1";
             readonly primaryForeground: "#ffffff";
             readonly secondary: "#fafafa";
@@ -68,6 +71,9 @@ declare const tokens: {
             readonly warning: "#fff5bf";
             readonly warningForeground: "#171717";
             readonly ring: "#c100f1";
+            readonly checkerA: "#ffffff";
+            readonly checkerB: "#e5e5e5";
+            readonly canvas: "#f5f5f5";
         };
         readonly mid: {
             readonly background: "#737373";
@@ -77,11 +83,14 @@ declare const tokens: {
             readonly surface: "#525252";
             readonly surfaceForeground: "#fafafa";
             readonly border: "#a3a3a3";
-            readonly input: "#404040";
+            readonly borderStrong: "#bdbdbd";
+            readonly input: "#a3a3a3";
             readonly muted: "#525252";
             readonly mutedForeground: "#e5e5e5";
             readonly accent: "#404040";
             readonly accentForeground: "#fafafa";
+            readonly hover: "rgba(255, 255, 255, 0.08)";
+            readonly active: "rgba(255, 255, 255, 0.13)";
             readonly primary: "#c100f1";
             readonly primaryForeground: "#ffffff";
             readonly secondary: "#525252";
@@ -93,6 +102,9 @@ declare const tokens: {
             readonly warning: "#fff5bf";
             readonly warningForeground: "#171717";
             readonly ring: "#c100f1";
+            readonly checkerA: "#8a8a8a";
+            readonly checkerB: "#6b6b6b";
+            readonly canvas: "#636363";
         };
         readonly dark: {
             readonly background: "#171717";
@@ -101,12 +113,15 @@ declare const tokens: {
             readonly cardForeground: "#fafafa";
             readonly surface: "#1a1a1a";
             readonly surfaceForeground: "#f5f5f5";
-            readonly border: "#404040";
-            readonly input: "#262626";
+            readonly border: "#4a4a4a";
+            readonly borderStrong: "#5c5c5c";
+            readonly input: "#4a4a4a";
             readonly muted: "#262626";
             readonly mutedForeground: "#a3a3a3";
             readonly accent: "#404040";
             readonly accentForeground: "#fafafa";
+            readonly hover: "rgba(250, 250, 250, 0.06)";
+            readonly active: "rgba(250, 250, 250, 0.1)";
             readonly primary: "#c100f1";
             readonly primaryForeground: "#ffffff";
             readonly secondary: "#262626";
@@ -118,6 +133,23 @@ declare const tokens: {
             readonly warning: "#221600";
             readonly warningForeground: "#fffad0";
             readonly ring: "#c100f1";
+            readonly checkerA: "#4a4a4a";
+            readonly checkerB: "#333333";
+            readonly canvas: "#1c1c1c";
+        };
+    };
+    readonly surfaces: {
+        readonly light: {
+            readonly bg: readonly ["#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff"];
+            readonly shadow: string[];
+        };
+        readonly mid: {
+            readonly bg: readonly ["#737373", "#6b6b6b", "#636363", "#5b5b5b", "#525252", "#4d4d4d", "#474747", "#404040"];
+            readonly shadow: string[];
+        };
+        readonly dark: {
+            readonly bg: readonly ["#171717", "#1f1f1f", "#262626", "#2b2b2b", "#303030", "#353535", "#3a3a3a", "#404040"];
+            readonly shadow: string[];
         };
     };
     readonly fontFamily: {
@@ -190,6 +222,14 @@ declare const tokens: {
             readonly lineHeight: "1.625";
             readonly textWrap: "pretty";
         };
+        /** 11px — dense metadata (table sub-lines, chips, editor hints). Use instead of text-[11px]. */
+        readonly "caption-sm": {
+            readonly family: "sans";
+            readonly size: "0.6875rem";
+            readonly weight: 400;
+            readonly lineHeight: "1.5";
+        };
+        /** 10px — the floor. Use instead of text-[10px]; keep to non-essential metadata. */
         readonly "caption-xs": {
             readonly family: "sans";
             readonly size: "0.625rem";
@@ -245,6 +285,30 @@ declare const tokens: {
         readonly xl: "calc(0.5rem + 4px)";
         readonly full: "9999px";
     };
+    readonly density: {
+        readonly default: {
+            readonly controlHeight: "32px";
+            readonly inputHeight: "40px";
+            readonly rowHeight: "36px";
+            readonly text: "14px";
+            readonly label: "12px";
+            readonly menuItemHeight: "40px";
+            readonly menuText: "14px";
+            readonly paddingX: "12px";
+            readonly radius: "8px";
+        };
+        readonly compact: {
+            readonly controlHeight: "24px";
+            readonly inputHeight: "24px";
+            readonly rowHeight: "28px";
+            readonly text: "12px";
+            readonly label: "11px";
+            readonly menuItemHeight: "28px";
+            readonly menuText: "13px";
+            readonly paddingX: "8px";
+            readonly radius: "5px";
+        };
+    };
     readonly zIndex: {
         readonly dropdown: 40;
         readonly sticky: 50;

package/dist/tokens.js

@@ -1,3 +1,3 @@
-export { tokens } from './chunk-RI6QJR2L.js';
+export { tokens } from './chunk-R576DV2A.js';
 //# sourceMappingURL=tokens.js.map
 //# sourceMappingURL=tokens.js.map

package/llms.txt

@@ -5,10 +5,10 @@
 ## Key Facts
 
 - Package name: `@hilum/ui`
-- Package version: 3.8.5
-- Component modules: 104
-- Atom components: 73
-- Molecule components: 31
+- Package version: 3.9.0
+- Component modules: 111
+- Atom components: 77
+- Molecule components: 34
 - Docs site: https://ui.hilum.dev
 - Source repository: https://git-codecommit.us-east-1.amazonaws.com/v1/repos/hilum-ui
 - Machine-readable docs index: https://ui.hilum.dev/catalog.json
@@ -172,6 +172,13 @@ Primary exports:
 - Toggle (/atoms/toggle/) — Two-state press button for toolbars and filter controls.
 - Tooltip (/atoms/tooltip/) — Brief label that appears on hover or focus to clarify an element.
 - URL Redirect Prompt (/molecules/url-redirect-prompt/) — Redirect recommendation callout shown when an editable URL handle changes. Composes: Callout · Switch.
+- Contextual Save Bar (/molecules/contextual-save-bar/) — Unsaved-changes bar with Save and Discard for edit screens, with ⌘S and unload guarding. Composes: Button · Icon.
+- Date Text (/atoms/date-text/) — Locale-aware dates and relative times, plus Intl helpers for money, numbers and plurals.
+- Resource Item (/molecules/resource-item/) — Primary/secondary text hierarchy for resource table cells and full-row mobile list items. Composes: Stacked List · Table.
+- Search Input (/atoms/search-input/) — Search field with leading icon, clear button, Escape-to-clear and loading state. Composes: Input · Spinner.
+- Filter Bar (/molecules/filter-bar/) — List toolbar with search, filters, clear action and trailing actions; responsive. Composes: Search Input · Select · Button.
+- Rating (/atoms/rating/) — Read-only star rating with partial stars, or an accessible radio-group input.
+- Code Block (/atoms/code-block/) — Styled scrollable pre with language label and copy-to-clipboard.
 
 ## Structured Data
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hilum/ui",
-  "version": "3.8.5",
+  "version": "3.10.0",
   "private": false,
   "description": "Hilum UI — design system primitives (Button, Input, Dialog, Combobox, …) + tokens + fonts + icons",
   "license": "MIT",
@@ -18,24 +18,25 @@
   ],
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
     "./icons": {
-      "import": "./dist/icons.js",
-      "types": "./dist/icons.d.ts"
+      "types": "./dist/icons.d.ts",
+      "import": "./dist/icons.js"
     },
     "./tokens": {
-      "import": "./dist/tokens.js",
-      "types": "./dist/tokens.d.ts"
+      "types": "./dist/tokens.d.ts",
+      "import": "./dist/tokens.js"
     },
     "./tokens.css": "./dist/tokens.css",
     "./fonts.css": "./dist/fonts.css",
     "./fonts/*": "./dist/fonts/*",
     "./create-theme": {
-      "import": "./dist/create-theme.js",
-      "types": "./dist/create-theme.d.ts"
-    }
+      "types": "./dist/create-theme.d.ts",
+      "import": "./dist/create-theme.js"
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "dist",

package/src/components/accordion.tsx

@@ -364,7 +364,7 @@ const AccordionGroup = forwardRef<HTMLDivElement, AccordionGroupProps>((props, r
           <AnimatePresence>
             {focusRect && (
               <motion.div
-                className={`absolute ${shape.focusRing} pointer-events-none z-20 border border-[#6B97FF]`}
+                className={`absolute ${shape.focusRing} pointer-events-none z-20 border-2 border-ring`}
                 initial={false}
                 animate={{
                   left: focusRect.left - 2,
@@ -626,7 +626,7 @@ const AccordionTrigger = forwardRef<HTMLButtonElement, AccordionTriggerProps>(
             className={cn(
               `relative z-10 flex items-center gap-2.5 ${shape.item} px-3 py-2 w-full cursor-pointer outline-none select-none`,
               !groupCtx?.grouped &&
-                "focus-visible:ring-1 focus-visible:ring-[#6B97FF] focus-visible:ring-offset-0",
+                "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0",
               className,
             )}
             {...(props as React.ComponentProps<typeof AccordionPrimitive.Trigger>)}

package/src/components/account-menu.tsx

@@ -71,7 +71,7 @@ const AccountMenuItem = React.forwardRef<
       "group",
       destructive
         ? "text-destructive focus:bg-destructive/10 focus:text-destructive"
-        : "text-foreground focus:bg-muted focus:text-foreground",
+        : "text-foreground focus:bg-active focus:text-foreground",
       "data-[disabled]:opacity-40",
       "[&_svg:not([class*='size-'])]:size-4",
       className,

package/src/components/alert-dialog.tsx

@@ -143,7 +143,113 @@ const AlertDialogCancel = React.forwardRef<
 ));
 AlertDialogCancel.displayName = "AlertDialogCancel";
 
+/* ─────────────────────── ConfirmDialog ─────────────────────── */
+
+interface ConfirmDialogProps {
+  /** Element that opens the dialog (e.g. a "Delete" Button). Optional when controlled. */
+  trigger?: React.ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  confirmLabel?: React.ReactNode;
+  cancelLabel?: React.ReactNode;
+  /** Red confirm button for irreversible actions (delete, cancel order). */
+  destructive?: boolean;
+  /**
+   * Runs on confirm. If it returns a promise the confirm button shows a
+   * pending state and the dialog stays open until it resolves; a rejection
+   * keeps the dialog open so the caller can surface the error (e.g. toast).
+   */
+  onConfirm: () => void | Promise<unknown>;
+  /** Extra content between the description and the footer. */
+  children?: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * One-call confirmation dialog — replaces hand-built "Delete X" dialogs.
+ *
+ *   <ConfirmDialog
+ *     trigger={<Button variant="destructive">Delete</Button>}
+ *     title="Delete product?"
+ *     description="This can't be undone."
+ *     confirmLabel="Delete product"
+ *     destructive
+ *     onConfirm={() => deleteProduct(id)}
+ *   />
+ */
+function ConfirmDialog({
+  trigger,
+  open: openProp,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  destructive = false,
+  onConfirm,
+  children,
+  className,
+}: ConfirmDialogProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+  const [pending, setPending] = React.useState(false);
+  const open = openProp ?? uncontrolledOpen;
+  const setOpen = (next: boolean) => {
+    if (pending && !next) return;
+    if (openProp === undefined) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  };
+
+  const handleConfirm = async (event: React.MouseEvent) => {
+    event.preventDefault();
+    const result = onConfirm();
+    if (result && typeof (result as Promise<unknown>).then === "function") {
+      setPending(true);
+      try {
+        await result;
+        setPending(false);
+        if (openProp === undefined) setUncontrolledOpen(false);
+        onOpenChange?.(false);
+      } catch {
+        setPending(false);
+      }
+      return;
+    }
+    setOpen(false);
+  };
+
+  return (
+    <AlertDialogRoot open={open} onOpenChange={setOpen}>
+      {trigger && <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger>}
+      <AlertDialogContent className={className}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          {description && <AlertDialogDescription>{description}</AlertDialogDescription>}
+        </AlertDialogHeader>
+        {children}
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={pending}>{cancelLabel}</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleConfirm}
+            disabled={pending}
+            aria-busy={pending || undefined}
+            className={cn(
+              destructive &&
+                "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80",
+            )}
+          >
+            {confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialogRoot>
+  );
+}
+ConfirmDialog.displayName = "ConfirmDialog";
+
 export {
+  ConfirmDialog,
   AlertDialogRoot as AlertDialog,
   AlertDialogTrigger,
   AlertDialogPortal,
@@ -156,3 +262,4 @@ export {
   AlertDialogAction,
   AlertDialogCancel,
 };
+export type { ConfirmDialogProps };