@tomny-dev/uzi 0.5.0 → 0.6.0

package/dist/index9.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index9.cjs","names":[],"sources":["../src/components/card/card.module.css"],"sourcesContent":[".card {\n  position: relative;\n  overflow: visible;\n  border-radius: var(--ts-card-radius, 12px);\n  border: 1px solid var(--ts-card-border, var(--border));\n  background: var(--ts-card-bg, var(--panel));\n  color: var(--ts-card-fg, var(--foreground));\n  box-shadow: var(--ts-card-shadow, 0 16px 36px rgba(0, 0, 0, 0.28));\n  padding: var(--ts-card-padding, 16px);\n  transition:\n    transform 140ms ease,\n    box-shadow 140ms ease,\n    border-color 140ms ease,\n    background-color 140ms ease;\n}\n\n.tone-default {\n  --ts-card-bg: var(--panel);\n  --ts-card-border: var(--border);\n  --ts-card-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);\n}\n\n.tone-muted {\n  --ts-card-bg: var(--muted);\n  --ts-card-border: var(--border);\n  --ts-card-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);\n}\n\n.tone-contrast {\n  --ts-card-bg: var(--ts-card-contrast-bg, color-mix(in srgb, var(--background) 60%, black));\n  --ts-card-border: var(--border);\n  --ts-card-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);\n}\n\n.interactive {\n  cursor: default;\n}\n\n.interactive:hover {\n  transform: translateY(-1px);\n  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32);\n  border-color: var(--ts-card-hover-border, color-mix(in srgb, var(--primary) 40%, transparent));\n}\n\n.interactive:focus-within {\n  outline: var(--focus-ring);\n  outline-offset: var(--focus-ring-offset);\n}\n\n.padding-none { --ts-card-padding: 0; }\n.padding-sm   { --ts-card-padding: 10px; }\n.padding-md   { --ts-card-padding: 16px; }\n.padding-lg   { --ts-card-padding: 20px; }\n"],"mappings":""}
+{"version":3,"file":"index9.cjs","names":[],"sources":["../src/components/card/card.module.css"],"sourcesContent":[".card {\n  position: relative;\n  overflow: visible;\n  border-radius: var(--ts-card-radius, var(--uzi-radius-lg, 12px));\n  border: 1px solid var(--ts-card-border, var(--uzi-border-subtle, var(--border)));\n  background: var(--ts-card-bg, var(--uzi-surface-1, var(--panel)));\n  color: var(--ts-card-fg, var(--uzi-text-primary, var(--foreground)));\n  box-shadow: var(--ts-card-shadow, var(--uzi-shadow-none, none));\n  padding: var(--ts-card-padding, 16px);\n  transition:\n    transform 140ms ease,\n    box-shadow 140ms ease,\n    border-color 140ms ease,\n    background-color 140ms ease;\n}\n\n.tone-default {\n  --ts-card-bg: var(--uzi-surface-1, var(--panel));\n  --ts-card-border: var(--uzi-border-subtle, var(--border));\n  --ts-card-shadow: var(--uzi-shadow-none, none);\n}\n\n.tone-muted {\n  --ts-card-bg: var(--uzi-surface-2, var(--muted));\n  --ts-card-border: var(--uzi-border-subtle, var(--border));\n  --ts-card-shadow: var(--uzi-shadow-none, none);\n}\n\n.tone-contrast {\n  --ts-card-bg: var(--ts-card-contrast-bg, color-mix(in srgb, var(--background) 60%, black));\n  --ts-card-border: var(--uzi-border-default, var(--border));\n  --ts-card-shadow: var(--uzi-shadow-lg, 0 18px 50px rgba(0, 0, 0, 0.32));\n}\n\n.interactive {\n  cursor: default;\n}\n\n.interactive:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--uzi-shadow-sm, 0 4px 12px rgba(0, 0, 0, 0.12));\n  border-color: var(--ts-card-hover-border, var(--uzi-border-accent, color-mix(in srgb, var(--primary) 40%, transparent)));\n}\n\n.interactive:focus-within {\n  outline: var(--focus-ring);\n  outline-offset: var(--focus-ring-offset);\n}\n\n.padding-none { --ts-card-padding: 0; }\n.padding-sm   { --ts-card-padding: 10px; }\n.padding-md   { --ts-card-padding: 16px; }\n.padding-lg   { --ts-card-padding: 20px; }\n"],"mappings":""}

package/dist/index9.js.map

@@ -1 +1 @@
-{"version":3,"file":"index9.js","names":[],"sources":["../src/components/card/Card.tsx"],"sourcesContent":["/**\n * Lightweight container component used for panels across the app.\n *\n * @remarks\n * Supports tone variants, padding presets, and an optional interactive affordance.\n *\n * @param props.as - Semantic element to render (defaults to `div`).\n * @param props.tone - Visual tone variant.\n * @param props.padding - Padding preset.\n * @param props.interactive - Enables hover/focus affordance.\n */\nimport type { HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./card.module.css\";\n\nexport type CardTone = \"default\" | \"muted\" | \"contrast\";\nexport type CardPadding = \"none\" | \"sm\" | \"md\" | \"lg\";\n\ntype CardElement = \"div\" | \"section\" | \"article\";\n\nexport type CardProps = HTMLAttributes<HTMLElement> & {\n  /** Optional semantic element type. Defaults to `div`. */\n  as?: CardElement;\n  /** Visual tone; drives background/border CSS vars. */\n  tone?: CardTone;\n  /** Padding preset; maps to CSS variables so consumers can override globally. */\n  padding?: CardPadding;\n  /** Adds hover/focus affordance (lift + outline). */\n  interactive?: boolean;\n};\n\nexport function Card({\n  as,\n  tone = \"default\",\n  padding = \"md\",\n  interactive = false,\n  className,\n  children,\n  ...rest\n}: CardProps) {\n  const Component: CardElement = as ?? \"div\";\n  const TONE_CLASS: Record<CardTone, string | null> = { default: null, muted: \"tone-muted\", contrast: \"tone-contrast\" };\n  const PADDING_CLASS: Record<CardPadding, string> = { none: \"padding-none\", sm: \"padding-sm\", md: \"padding-md\", lg: \"padding-lg\" };\n  const classes = cx(\n    styles.card,\n    TONE_CLASS[tone] ? styles[TONE_CLASS[tone]] : null,\n    styles[PADDING_CLASS[padding]],\n    interactive && styles.interactive,\n    className,\n  );\n\n  return (\n    <Component className={classes} {...rest}>\n      {children}\n    </Component>\n  );\n}\n"],"mappings":";;;;AA+BA,SAAgB,KAAK,EACnB,IACA,OAAO,WACP,UAAU,MACV,cAAc,OACd,WACA,UACA,GAAG,QACS;CACZ,MAAM,YAAyB,MAAM;CACrC,MAAM,aAA8C;EAAE,SAAS;EAAM,OAAO;EAAc,UAAU;CAAgB;CAUpH,OACE,oBAAC,WAAD;EAAW,WATG,GACd,oBAAO,MACP,WAAW,QAAQ,oBAAO,WAAW,SAAS,MAC9C,oBAAO;GAJ4C,MAAM;GAAgB,IAAI;GAAc,IAAI;GAAc,IAAI;EAI1G,EAAc,WACrB,eAAe,oBAAO,aACtB,SAIsB;EAAS,GAAI;EAChC;CACQ,CAAA;AAEf"}
+{"version":3,"file":"index9.js","names":[],"sources":["../src/components/card/Card.tsx"],"sourcesContent":["/**\n * Lightweight container for discrete content objects across the app.\n *\n * @remarks\n * Supports tone variants, padding presets, and an optional interactive affordance.\n * Use Surface for visual grouping that does not represent a discrete object.\n *\n * @param props.as - Semantic element to render (defaults to `div`).\n * @param props.tone - Visual tone variant.\n * @param props.padding - Padding preset.\n * @param props.interactive - Enables hover/focus affordance.\n */\nimport type { ComponentPropsWithoutRef, ElementType } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./card.module.css\";\n\nexport type CardTone = \"default\" | \"muted\" | \"contrast\";\nexport type CardPadding = \"none\" | \"sm\" | \"md\" | \"lg\";\n\ntype CardElement = \"div\" | \"section\" | \"article\";\n\ntype CardOwnProps<T extends CardElement> = {\n  /** Optional semantic element type. Defaults to `div`. */\n  as?: T;\n  /** Visual tone; drives background/border CSS vars. */\n  tone?: CardTone;\n  /** Padding preset; maps to CSS variables so consumers can override globally. */\n  padding?: CardPadding;\n  /** Adds hover/focus affordance (lift + outline). */\n  interactive?: boolean;\n};\n\nexport type CardProps<T extends CardElement = \"div\"> =\n  CardOwnProps<T> &\n  Omit<ComponentPropsWithoutRef<T>, keyof CardOwnProps<T>>;\n\nexport function Card<T extends CardElement = \"div\">({\n  as,\n  tone = \"default\",\n  padding = \"md\",\n  interactive = false,\n  className,\n  children,\n  ...rest\n}: CardProps<T>) {\n  const Component = (as ?? \"div\") as ElementType;\n  const TONE_CLASS: Record<CardTone, string | null> = { default: null, muted: \"tone-muted\", contrast: \"tone-contrast\" };\n  const PADDING_CLASS: Record<CardPadding, string> = { none: \"padding-none\", sm: \"padding-sm\", md: \"padding-md\", lg: \"padding-lg\" };\n  const classes = cx(\n    styles.card,\n    TONE_CLASS[tone] ? styles[TONE_CLASS[tone]] : null,\n    styles[PADDING_CLASS[padding]],\n    interactive && styles.interactive,\n    className,\n  );\n\n  return (\n    <Component className={classes} {...rest}>\n      {children}\n    </Component>\n  );\n}\n"],"mappings":";;;;AAoCA,SAAgB,KAAoC,EAClD,IACA,OAAO,WACP,UAAU,MACV,cAAc,OACd,WACA,UACA,GAAG,QACY;CACf,MAAM,YAAa,MAAM;CACzB,MAAM,aAA8C;EAAE,SAAS;EAAM,OAAO;EAAc,UAAU;CAAgB;CAUpH,OACE,oBAAC,WAAD;EAAW,WATG,GACd,oBAAO,MACP,WAAW,QAAQ,oBAAO,WAAW,SAAS,MAC9C,oBAAO;GAJ4C,MAAM;GAAgB,IAAI;GAAc,IAAI;GAAc,IAAI;EAI1G,EAAc,WACrB,eAAe,oBAAO,aACtB,SAIsB;EAAS,GAAI;EAChC;CACQ,CAAA;AAEf"}

package/dist/style.css

@@ -43,6 +43,28 @@ body {
   --uzi-modal-z-index: 1000;
   --uzi-popover-z-index: 1100;
   --uzi-toast-z-index: 2147483000;
+
+  /* Shared visual hierarchy */
+  --uzi-space-1: 0.25rem;
+  --uzi-space-2: 0.5rem;
+  --uzi-space-3: 0.75rem;
+  --uzi-space-4: 1rem;
+  --uzi-space-5: 1.5rem;
+  --uzi-space-6: 2rem;
+  --uzi-space-7: 3rem;
+  --uzi-radius-sm: 0.375rem;
+  --uzi-radius-md: 0.625rem;
+  --uzi-radius-lg: 0.875rem;
+  --uzi-font-display: clamp(1.875rem, 3vw, 2.5rem);
+  --uzi-font-title: clamp(1.375rem, 2.5vw, 1.875rem);
+  --uzi-font-heading: clamp(1.25rem, 2vw, 1.625rem);
+  --uzi-font-body: 0.9375rem;
+  --uzi-font-small: 0.8125rem;
+  --uzi-font-caption: 0.75rem;
+  --uzi-shadow-none: none;
+  --uzi-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
+  --uzi-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
+  --uzi-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.18);
 }
 
 :root,
@@ -67,6 +89,21 @@ body {
   --input: hsl(214 32% 88%);
   --panel: var(--card);
   --text: var(--foreground);
+  --uzi-surface-canvas: var(--background);
+  --uzi-surface-1: var(--card);
+  --uzi-surface-2: color-mix(in srgb, var(--secondary) 72%, var(--background));
+  --uzi-surface-raised: var(--card);
+  --uzi-surface-selected: color-mix(in srgb, var(--primary) 9%, var(--card));
+  --uzi-text-primary: var(--foreground);
+  --uzi-text-secondary: color-mix(in srgb, var(--foreground) 72%, var(--muted-foreground));
+  --uzi-text-muted: var(--muted-foreground);
+  --uzi-text-disabled: color-mix(in srgb, var(--muted-foreground) 65%, transparent);
+  --uzi-border-subtle: color-mix(in srgb, var(--border) 68%, transparent);
+  --uzi-border-default: var(--border);
+  --uzi-border-strong: color-mix(in srgb, var(--border) 72%, var(--foreground));
+  --uzi-border-accent: color-mix(in srgb, var(--primary) 55%, var(--border));
+  --surface-elevated: var(--uzi-surface-raised);
+  --surface-topbar: color-mix(in srgb, var(--uzi-surface-canvas) 85%, transparent);
 }
 
 :root[data-uzi-theme="dark"],
@@ -95,9 +132,33 @@ body {
   --border: #1f2937;
   --input: #1f2937;
   --panel: #111827;
+  --text: #e2e8f0;
+  --uzi-surface-canvas: var(--background);
+  --uzi-surface-1: var(--panel);
+  --uzi-surface-2: #152036;
+  --uzi-surface-raised: color-mix(in srgb, var(--panel) 88%, white);
+  --uzi-surface-selected: color-mix(in srgb, var(--primary) 12%, var(--panel));
+  --uzi-text-primary: var(--foreground);
+  --uzi-text-secondary: color-mix(in srgb, var(--foreground) 72%, var(--muted-foreground));
+  --uzi-text-muted: var(--muted-foreground);
+  --uzi-text-disabled: color-mix(in srgb, var(--muted-foreground) 65%, transparent);
+  --uzi-border-subtle: color-mix(in srgb, var(--border) 72%, transparent);
+  --uzi-border-default: var(--border);
+  --uzi-border-strong: color-mix(in srgb, var(--border) 76%, var(--foreground));
+  --uzi-border-accent: color-mix(in srgb, var(--primary) 55%, var(--border));
+  --uzi-shadow-sm:
+    inset 0 1px 0 rgba(255, 255, 255, 0.025),
+    0 1px 2px rgba(0, 0, 0, 0.18),
+    0 4px 12px rgba(0, 0, 0, 0.12);
+  --uzi-shadow-md:
+    inset 0 1px 0 rgba(255, 255, 255, 0.03),
+    0 10px 28px rgba(0, 0, 0, 0.24);
+  --uzi-shadow-lg:
+    inset 0 1px 0 rgba(255, 255, 255, 0.035),
+    0 20px 56px rgba(0, 0, 0, 0.32);
+  /* Preserve the legacy alias value while new components use semantic Uzi tokens. */
   --surface-elevated: #0b1224;
   --surface-topbar: color-mix(in srgb, var(--background, #0b1224) 85%, transparent);
-  --text: #e2e8f0;
 }
 
 :root,
@@ -323,11 +384,11 @@ body {
 .uzi-card-module__card__ZPFTz {
   position: relative;
   overflow: visible;
-  border-radius: var(--ts-card-radius, 12px);
-  border: 1px solid var(--ts-card-border, var(--border));
-  background: var(--ts-card-bg, var(--panel));
-  color: var(--ts-card-fg, var(--foreground));
-  box-shadow: var(--ts-card-shadow, 0 16px 36px rgba(0, 0, 0, 0.28));
+  border-radius: var(--ts-card-radius, var(--uzi-radius-lg, 12px));
+  border: 1px solid var(--ts-card-border, var(--uzi-border-subtle, var(--border)));
+  background: var(--ts-card-bg, var(--uzi-surface-1, var(--panel)));
+  color: var(--ts-card-fg, var(--uzi-text-primary, var(--foreground)));
+  box-shadow: var(--ts-card-shadow, var(--uzi-shadow-none, none));
   padding: var(--ts-card-padding, 16px);
   transition:
     transform 140ms ease,
@@ -337,21 +398,21 @@ body {
 }
 
 .uzi-card-module__tone-default__7Ujf9 {
-  --ts-card-bg: var(--panel);
-  --ts-card-border: var(--border);
-  --ts-card-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
+  --ts-card-bg: var(--uzi-surface-1, var(--panel));
+  --ts-card-border: var(--uzi-border-subtle, var(--border));
+  --ts-card-shadow: var(--uzi-shadow-none, none);
 }
 
 .uzi-card-module__tone-muted__RQy5B {
-  --ts-card-bg: var(--muted);
-  --ts-card-border: var(--border);
-  --ts-card-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
+  --ts-card-bg: var(--uzi-surface-2, var(--muted));
+  --ts-card-border: var(--uzi-border-subtle, var(--border));
+  --ts-card-shadow: var(--uzi-shadow-none, none);
 }
 
 .uzi-card-module__tone-contrast__JpFxL {
   --ts-card-bg: var(--ts-card-contrast-bg, color-mix(in srgb, var(--background) 60%, black));
-  --ts-card-border: var(--border);
-  --ts-card-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
+  --ts-card-border: var(--uzi-border-default, var(--border));
+  --ts-card-shadow: var(--uzi-shadow-lg, 0 18px 50px rgba(0, 0, 0, 0.32));
 }
 
 .uzi-card-module__interactive__zlPML {
@@ -360,8 +421,8 @@ body {
 
 .uzi-card-module__interactive__zlPML:hover {
   transform: translateY(-1px);
-  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32);
-  border-color: var(--ts-card-hover-border, color-mix(in srgb, var(--primary) 40%, transparent));
+  box-shadow: var(--uzi-shadow-sm, 0 4px 12px rgba(0, 0, 0, 0.12));
+  border-color: var(--ts-card-hover-border, var(--uzi-border-accent, color-mix(in srgb, var(--primary) 40%, transparent)));
 }
 
 .uzi-card-module__interactive__zlPML:focus-within {
@@ -373,6 +434,43 @@ body {
 .uzi-card-module__padding-sm__-Ub1s   { --ts-card-padding: 10px; }
 .uzi-card-module__padding-md__kUf46   { --ts-card-padding: 16px; }
 .uzi-card-module__padding-lg__a5mWP   { --ts-card-padding: 20px; }
+.uzi-surface-module__surface__wbqff {
+  min-width: 0;
+  color: var(--uzi-text-primary, var(--foreground));
+}
+
+.uzi-surface-module__level-base__2lWS2 { background: var(--uzi-surface-1, var(--panel)); }
+.uzi-surface-module__level-subtle__njIb4 { background: var(--uzi-surface-2, var(--muted)); }
+
+.uzi-surface-module__level-raised__VT9mt {
+  background: var(--uzi-surface-raised, var(--panel));
+  box-shadow: var(--uzi-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
+}
+
+.uzi-surface-module__level-selected__7z3bI {
+  background: var(--uzi-surface-selected, var(--accent));
+}
+
+.uzi-surface-module__level-selected__7z3bI:not(.uzi-surface-module__bordered__aPP-x) {
+  box-shadow: inset 0 0 0 1px var(--uzi-border-accent, var(--primary));
+}
+
+.uzi-surface-module__bordered__aPP-x {
+  border: 1px solid var(--uzi-border-subtle, var(--border));
+}
+
+.uzi-surface-module__level-selected__7z3bI.uzi-surface-module__bordered__aPP-x {
+  border-color: var(--uzi-border-accent, var(--primary));
+}
+
+.uzi-surface-module__padding-none__swBED { padding: 0; }
+.uzi-surface-module__padding-sm__0qdV8 { padding: var(--uzi-space-2, 0.5rem); }
+.uzi-surface-module__padding-md__Xq3P7 { padding: var(--uzi-space-4, 1rem); }
+.uzi-surface-module__padding-lg__beXmJ { padding: var(--uzi-space-5, 1.5rem); }
+.uzi-surface-module__radius-none__DbXCZ { border-radius: 0; }
+.uzi-surface-module__radius-sm__vMEbI { border-radius: var(--uzi-radius-sm, 0.375rem); }
+.uzi-surface-module__radius-md__cS0Cp { border-radius: var(--uzi-radius-md, 0.625rem); }
+.uzi-surface-module__radius-lg__T6MVA { border-radius: var(--uzi-radius-lg, 0.875rem); }
 .uzi-pill-module__pill__uCKcP {
   display: inline-flex;
   align-items: center;
@@ -1976,37 +2074,37 @@ button.uzi-sidebar-nav-module__item__uMHkJ {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 1.5rem;
+  gap: var(--uzi-space-5, 1.5rem);
 }
 
 .uzi-page-header-module__content__lJh9C {
   min-width: 0;
   display: grid;
-  gap: 0.5rem;
+  gap: var(--uzi-space-2, 0.5rem);
 }
 
 .uzi-page-header-module__eyebrow__xP-Qr {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.5rem;
-  color: var(--muted-foreground);
-  font-size: 0.8125rem;
+  gap: var(--uzi-space-2, 0.5rem);
+  color: var(--uzi-text-secondary, var(--muted-foreground));
+  font-size: var(--uzi-font-small, 0.8125rem);
   font-weight: 600;
 }
 
 .uzi-page-header-module__title__kkZon {
   margin: 0;
-  color: var(--foreground);
-  font-size: clamp(1.75rem, 3vw, 2.5rem);
+  color: var(--uzi-text-primary, var(--foreground));
+  font-size: var(--uzi-font-display, clamp(1.875rem, 3vw, 2.5rem));
   line-height: 1.12;
   letter-spacing: -0.025em;
 }
 
 .uzi-page-header-module__description__zNQ1m {
   max-width: 48rem;
-  color: var(--muted-foreground);
-  font-size: 0.95rem;
+  color: var(--uzi-text-secondary, var(--muted-foreground));
+  font-size: var(--uzi-font-body, 0.9375rem);
   line-height: 1.65;
 }
 
@@ -2033,7 +2131,7 @@ button.uzi-sidebar-nav-module__item__uMHkJ {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
-  gap: 1rem;
+  gap: var(--uzi-space-4, 1rem);
 }
 
 .uzi-section-header-module__content__6prWG {
@@ -2044,16 +2142,16 @@ button.uzi-sidebar-nav-module__item__uMHkJ {
 
 .uzi-section-header-module__title__7ddbh {
   margin: 0;
-  color: var(--foreground);
-  font-size: clamp(1.25rem, 2vw, 1.625rem);
+  color: var(--uzi-text-primary, var(--foreground));
+  font-size: var(--uzi-font-heading, clamp(1.25rem, 2vw, 1.625rem));
   line-height: 1.2;
   letter-spacing: -0.015em;
 }
 
 .uzi-section-header-module__description__T8tck {
   max-width: 44rem;
-  color: var(--muted-foreground);
-  font-size: 0.875rem;
+  color: var(--uzi-text-secondary, var(--muted-foreground));
+  font-size: var(--uzi-font-body, 0.9375rem);
   line-height: 1.6;
 }
 
@@ -2063,7 +2161,7 @@ button.uzi-sidebar-nav-module__item__uMHkJ {
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
-  gap: 0.5rem;
+  gap: var(--uzi-space-2, 0.5rem);
 }
 
 @media (max-width: 40rem) {
@@ -2138,11 +2236,11 @@ button.uzi-sidebar-nav-module__item__uMHkJ {
   flex-wrap: nowrap;
 }
 
-.uzi-layout-primitives-module__gap-xs__e3Tkz { gap: 0.25rem; }
-.uzi-layout-primitives-module__gap-sm__9ng-- { gap: 0.5rem; }
-.uzi-layout-primitives-module__gap-md__tHIwH { gap: 1rem; }
-.uzi-layout-primitives-module__gap-lg__iUm9X { gap: 1.5rem; }
-.uzi-layout-primitives-module__gap-xl__O-6Na { gap: 2rem; }
+.uzi-layout-primitives-module__gap-xs__e3Tkz { gap: var(--uzi-space-1, 0.25rem); }
+.uzi-layout-primitives-module__gap-sm__9ng-- { gap: var(--uzi-space-2, 0.5rem); }
+.uzi-layout-primitives-module__gap-md__tHIwH { gap: var(--uzi-space-4, 1rem); }
+.uzi-layout-primitives-module__gap-lg__iUm9X { gap: var(--uzi-space-5, 1.5rem); }
+.uzi-layout-primitives-module__gap-xl__O-6Na { gap: var(--uzi-space-6, 2rem); }
 .uzi-stat-module__stat__R4Ke6 {
   min-width: 0;
   display: grid;
@@ -2150,29 +2248,27 @@ button.uzi-sidebar-nav-module__item__uMHkJ {
 }
 
 .uzi-stat-module__label__MSJ0Q {
-  color: var(--muted-foreground);
-  font-size: 0.75rem;
+  color: var(--uzi-text-secondary, var(--muted-foreground));
+  font-size: var(--uzi-font-small, 0.8125rem);
   font-weight: 600;
-  letter-spacing: 0.025em;
-  text-transform: uppercase;
 }
 
 .uzi-stat-module__value__nSd-e {
-  color: var(--foreground);
-  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
+  color: var(--uzi-text-primary, var(--foreground));
+  font-size: var(--uzi-font-title, clamp(1.375rem, 2.5vw, 1.875rem));
   font-weight: 700;
   line-height: 1.15;
 }
 
 .uzi-stat-module__detail__eB2As {
-  color: var(--muted-foreground);
-  font-size: 0.8125rem;
+  color: var(--uzi-text-muted, var(--muted-foreground));
+  font-size: var(--uzi-font-small, 0.8125rem);
   line-height: 1.5;
 }
 
 .uzi-stat-module__group__Hb6Bh {
   display: grid;
-  gap: 1rem;
+  gap: var(--uzi-space-4, 1rem);
 }
 
 .uzi-stat-module__columns-1__HYln2 { grid-template-columns: 1fr; }
@@ -2194,6 +2290,80 @@ button.uzi-sidebar-nav-module__item__uMHkJ {
     grid-template-columns: 1fr;
   }
 }
+.uzi-toolbar-module__toolbar__IXW3o {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--uzi-space-2, 0.5rem);
+  border: 1px solid var(--uzi-border-subtle, var(--border));
+  border-radius: var(--uzi-radius-md, 0.625rem);
+  background: var(--uzi-surface-1, var(--panel));
+}
+
+.uzi-toolbar-module__density-compact__qqXRT { padding: var(--uzi-space-2, 0.5rem); }
+
+.uzi-toolbar-module__density-default__rGiHv {
+  padding: var(--uzi-space-3, 0.75rem);
+  gap: var(--uzi-space-3, 0.75rem);
+}
+
+.uzi-toolbar-module__sticky__PxGot {
+  position: sticky;
+  top: var(--uzi-toolbar-sticky-offset, 0);
+  z-index: 20;
+  background: color-mix(in srgb, var(--uzi-surface-1, var(--panel)) 90%, transparent);
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+}
+
+.uzi-toolbar-module__group__Cw0lk {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--uzi-space-2, 0.5rem);
+}
+
+.uzi-toolbar-module__group__Cw0lk + .uzi-toolbar-module__group__Cw0lk {
+  margin-left: var(--uzi-space-1, 0.25rem);
+  padding-left: var(--uzi-space-3, 0.75rem);
+  border-left: 1px solid var(--uzi-border-subtle, var(--border));
+}
+
+.uzi-toolbar-module__grow__8oFpY { flex: 1 1 16rem; }
+
+.uzi-toolbar-module__label__H1fT1 {
+  flex: 0 0 auto;
+  color: var(--uzi-text-secondary, var(--muted-foreground));
+  font-size: var(--uzi-font-small, 0.8125rem);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.uzi-toolbar-module__controls__EOiOk {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--uzi-space-2, 0.5rem);
+}
+
+@media (max-width: 40rem) {
+  .uzi-toolbar-module__toolbar__IXW3o { align-items: stretch; }
+
+  .uzi-toolbar-module__group__Cw0lk,
+  .uzi-toolbar-module__grow__8oFpY { flex: 1 1 100%; }
+
+  .uzi-toolbar-module__group__Cw0lk + .uzi-toolbar-module__group__Cw0lk {
+    margin-left: 0;
+    padding-top: var(--uzi-space-2, 0.5rem);
+    padding-left: 0;
+    border-top: 1px solid var(--uzi-border-subtle, var(--border));
+    border-left: 0;
+  }
+
+  .uzi-toolbar-module__controls__EOiOk { flex: 1 1 auto; }
+}
 .uzi-skeleton-module__skeleton__fula5 {
   background: color-mix(in srgb, var(--muted-foreground) 14%, var(--background));
   animation: uzi-skeleton-module__skeleton-pulse__Yp45W 1.6s ease-in-out infinite;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomny-dev/uzi",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Rapid-fire React UI components. Ship faster, build more.",
   "type": "module",
   "repository": {
@@ -80,7 +80,7 @@
     "typescript": "^5.4.3",
     "vite": "^8.0.0",
     "vite-plugin-css-injected-by-js": "^5.0.1",
-    "vitest": "^4.1.9"
+    "vitest": "^5.0.0"
   },
   "types": "./dist/index.d.ts"
 }