@tomny-dev/uzi 0.5.0 → 0.6.0-pr.60.171.1.16c745f

package/README.md

@@ -129,7 +129,8 @@ In practice, `uzi` should spend its complexity budget on reusable app scaffoldin
 |---|---|
 | `Avatar` | Profile image with fallback states |
 | `Button` | Primary, secondary, outline, ghost variants |
-| `Card` | Surface container with tone/padding control |
+| `Card` | Discrete object container with tone/padding control |
+| `Surface` | Semantic visual grouping with base/subtle/raised/selected hierarchy |
 | `Checkbox` | Checkbox form primitive |
 | `Input` | Text input primitive |
 | `Label` | Form label primitive |
@@ -142,12 +143,13 @@ In practice, `uzi` should spend its complexity budget on reusable app scaffoldin
 | `AppShell` | Responsive layout with collapsible sidebar |
 | `SidebarNav` | Sidebar navigation list |
 | `TopBar` | Composable header shell for brand, nav triggers, and actions |
-| `PageContainer` | Centered responsive page-width container with configurable max width |
+| `PageContainer` | Centered responsive page wrapper with standard horizontal and vertical gutters |
 | `PageHeader` | Page title, eyebrow, description, and action composition |
 | `SectionHeader` | Reusable section title, description, and actions |
 | `EmptyState` | Empty-result/resource state with visual and action slots |
 | `Stack` / `Inline` | Small gap/alignment layout helpers for common composition |
 | `Stat` / `StatGroup` | Domain-agnostic summary value and responsive stat grouping |
+| `Toolbar` / `ToolbarGroup` | Responsive compact filter/action workspace |
 | `ThemeToggleButton` | Reusable light/dark toggle wired to `ThemeProvider` |
 | `ThemeProvider` / `useTheme` | Light/dark + accent palette theming |
 | `ToastProvider` / `useToast` | Radix-backed toast notification system |
@@ -165,6 +167,7 @@ In practice, `uzi` should spend its complexity budget on reusable app scaffoldin
 - [Theming](docs/theming.md) — ThemeProvider, useTheme, accent palettes, CSS overrides
 - [Layout Patterns](docs/guides/layout-patterns.md) — Dashboard, full-width header, center-branded
 - [Application Scaffolding](docs/guides/application-scaffolding.md) — Page containers, headers, empty states, stats, and layout composition
+- [Visual Hierarchy](docs/guides/visual-hierarchy.md) — Surface levels, typography, borders, shadows, and toolbar conventions
 - [Form Patterns](docs/guides/form-patterns.md) — Input, Select, MultiSelect, SegmentedToggle patterns
 
 ## SSR Notes

package/dist/components/card/Card.d.ts

@@ -1,21 +1,22 @@
 /**
- * Lightweight container component used for panels across the app.
+ * Lightweight container for discrete content objects across the app.
  *
  * @remarks
  * Supports tone variants, padding presets, and an optional interactive affordance.
+ * Use Surface for visual grouping that does not represent a discrete object.
  *
  * @param props.as - Semantic element to render (defaults to `div`).
  * @param props.tone - Visual tone variant.
  * @param props.padding - Padding preset.
  * @param props.interactive - Enables hover/focus affordance.
  */
-import type { HTMLAttributes } from "react";
+import type { ComponentPropsWithoutRef } from "react";
 export type CardTone = "default" | "muted" | "contrast";
 export type CardPadding = "none" | "sm" | "md" | "lg";
 type CardElement = "div" | "section" | "article";
-export type CardProps = HTMLAttributes<HTMLElement> & {
+type CardOwnProps<T extends CardElement> = {
     /** Optional semantic element type. Defaults to `div`. */
-    as?: CardElement;
+    as?: T;
     /** Visual tone; drives background/border CSS vars. */
     tone?: CardTone;
     /** Padding preset; maps to CSS variables so consumers can override globally. */
@@ -23,6 +24,7 @@ export type CardProps = HTMLAttributes<HTMLElement> & {
     /** Adds hover/focus affordance (lift + outline). */
     interactive?: boolean;
 };
-export declare function Card({ as, tone, padding, interactive, className, children, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
+export type CardProps<T extends CardElement = "div"> = CardOwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof CardOwnProps<T>>;
+export declare function Card<T extends CardElement = "div">({ as, tone, padding, interactive, className, children, ...rest }: CardProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Card.d.ts.map

package/dist/components/card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtD,KAAK,WAAW,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;AAEjD,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACpD,yDAAyD;IACzD,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,sDAAsD;IACtD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,gFAAgF;IAChF,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,wBAAgB,IAAI,CAAC,EACnB,EAAE,EACF,IAAgB,EAChB,OAAc,EACd,WAAmB,EACnB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,SAAS,2CAiBX"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,EAAE,wBAAwB,EAAe,MAAM,OAAO,CAAC;AAInE,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtD,KAAK,WAAW,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;AAEjD,KAAK,YAAY,CAAC,CAAC,SAAS,WAAW,IAAI;IACzC,yDAAyD;IACzD,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,sDAAsD;IACtD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,gFAAgF;IAChF,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IACjD,YAAY,CAAC,CAAC,CAAC,GACf,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAE3D,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EAClD,EAAE,EACF,IAAgB,EAChB,OAAc,EACd,WAAmB,EACnB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,SAAS,CAAC,CAAC,CAAC,2CAiBd"}

package/dist/components/page-container/PageContainer.d.ts

@@ -1,9 +1,10 @@
 import type { HTMLAttributes } from "react";
 export type PageContainerWidth = "sm" | "md" | "lg" | "xl" | "full";
+/** Standard page container with responsive horizontal and vertical gutters. */
 export type PageContainerProps = HTMLAttributes<HTMLDivElement> & {
     /** Maximum content width. Defaults to `lg`. */
     maxWidth?: PageContainerWidth;
-    /** Removes the responsive horizontal gutters. */
+    /** Removes only the responsive horizontal gutters; standard vertical page spacing remains. */
     bleed?: boolean;
 };
 export declare function PageContainer({ maxWidth, bleed, className, children, ...rest }: PageContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/page-container/PageContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageContainer.d.ts","sourceRoot":"","sources":["../../../src/components/page-container/PageContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEpE,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAChE,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,iDAAiD;IACjD,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAUF,wBAAgB,aAAa,CAAC,EAC5B,QAAe,EACf,KAAa,EACb,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,kBAAkB,2CASpB"}
+{"version":3,"file":"PageContainer.d.ts","sourceRoot":"","sources":["../../../src/components/page-container/PageContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEpE,+EAA+E;AAC/E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAChE,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,8FAA8F;IAC9F,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAUF,wBAAgB,aAAa,CAAC,EAC5B,QAAe,EACf,KAAa,EACb,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,kBAAkB,2CASpB"}

package/dist/components/surface/Surface.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentPropsWithoutRef } from "react";
+export type SurfaceLevel = "base" | "subtle" | "raised" | "selected";
+export type SurfacePadding = "none" | "sm" | "md" | "lg";
+export type SurfaceRadius = "none" | "sm" | "md" | "lg";
+type SurfaceElement = "div" | "section" | "article" | "aside";
+type SurfaceOwnProps<T extends SurfaceElement> = {
+    as?: T;
+    level?: SurfaceLevel;
+    padding?: SurfacePadding;
+    radius?: SurfaceRadius;
+    bordered?: boolean;
+};
+export type SurfaceProps<T extends SurfaceElement = "div"> = SurfaceOwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof SurfaceOwnProps<T>>;
+export declare function Surface<T extends SurfaceElement = "div">({ as, level, padding, radius, bordered, className, children, ...rest }: SurfaceProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Surface.d.ts.map

package/dist/components/surface/Surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Surface.d.ts","sourceRoot":"","sources":["../../../src/components/surface/Surface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAe,MAAM,OAAO,CAAC;AAInE,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;AACrE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD,KAAK,cAAc,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE9D,KAAK,eAAe,CAAC,CAAC,SAAS,cAAc,IAAI;IAC/C,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,IACvD,eAAe,CAAC,CAAC,CAAC,GAClB,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;AAE9D,wBAAgB,OAAO,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,EAAE,EACxD,EAAE,EACF,KAAc,EACd,OAAc,EACd,MAAa,EACb,QAAgB,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,YAAY,CAAC,CAAC,CAAC,2CAkBjB"}

package/dist/components/toolbar/Toolbar.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type ToolbarDensity = "compact" | "default";
+export type ToolbarProps = HTMLAttributes<HTMLDivElement> & {
+    density?: ToolbarDensity;
+    sticky?: boolean;
+};
+export declare function Toolbar({ density, sticky, role, className, children, ...rest }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+export type ToolbarGroupProps = HTMLAttributes<HTMLDivElement> & {
+    label?: ReactNode;
+    grow?: boolean;
+};
+export declare function ToolbarGroup({ label, grow, role, "aria-label": ariaLabel, className, children, ...rest }: ToolbarGroupProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Toolbar.d.ts.map

package/dist/components/toolbar/Toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAEnD,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC1D,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,OAAmB,EACnB,MAAc,EACd,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,YAAY,2CAUd;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAY,EACZ,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAenB"}

package/dist/index.cjs

@@ -5,37 +5,39 @@ const require_cx = require("./index4.cjs");
 const require_Button = require("./index6.cjs");
 const require_Avatar = require("./index8.cjs");
 const require_Card = require("./index10.cjs");
-const require_Pill = require("./index12.cjs");
-const require_Modal = require("./index14.cjs");
-const require_Alert = require("./index16.cjs");
-const require_ToastContext = require("./index18.cjs");
-const require_Input = require("./index20.cjs");
-const require_Label = require("./index22.cjs");
-const require_Checkbox = require("./index24.cjs");
-const require_MultiSelect = require("./index26.cjs");
-const require_Select = require("./index28.cjs");
-const require_Dropdown = require("./index29.cjs");
-const require_DropdownMenu = require("./index31.cjs");
-const require_ThemeProvider = require("./index33.cjs");
-const require_ThemeToggleButton = require("./index35.cjs");
-const require_TopBar = require("./index37.cjs");
-const require_AppShell = require("./index39.cjs");
-const require_SidebarNav = require("./index41.cjs");
-const require_PageContainer = require("./index43.cjs");
-const require_PageHeader = require("./index45.cjs");
-const require_SectionHeader = require("./index47.cjs");
-const require_EmptyState = require("./index49.cjs");
-const require_LayoutPrimitives = require("./index51.cjs");
-const require_Stat = require("./index53.cjs");
-const require_Skeleton = require("./index55.cjs");
-const require_Progress = require("./index57.cjs");
-const require_SegmentedToggle = require("./index59.cjs");
-const require_AuthCard = require("./index61.cjs");
-const require_AuthPages = require("./index63.cjs");
-const require_DataTable = require("./index65.cjs");
-const require_SettingsPage = require("./index67.cjs");
-const require_ErrorPage = require("./index69.cjs");
-const require_EmptyStatePage = require("./index71.cjs");
+const require_Surface = require("./index12.cjs");
+const require_Pill = require("./index14.cjs");
+const require_Modal = require("./index16.cjs");
+const require_Alert = require("./index18.cjs");
+const require_ToastContext = require("./index20.cjs");
+const require_Input = require("./index22.cjs");
+const require_Label = require("./index24.cjs");
+const require_Checkbox = require("./index26.cjs");
+const require_MultiSelect = require("./index28.cjs");
+const require_Select = require("./index30.cjs");
+const require_Dropdown = require("./index31.cjs");
+const require_DropdownMenu = require("./index33.cjs");
+const require_ThemeProvider = require("./index35.cjs");
+const require_ThemeToggleButton = require("./index37.cjs");
+const require_TopBar = require("./index39.cjs");
+const require_AppShell = require("./index41.cjs");
+const require_SidebarNav = require("./index43.cjs");
+const require_PageContainer = require("./index45.cjs");
+const require_PageHeader = require("./index47.cjs");
+const require_SectionHeader = require("./index49.cjs");
+const require_EmptyState = require("./index51.cjs");
+const require_LayoutPrimitives = require("./index53.cjs");
+const require_Stat = require("./index55.cjs");
+const require_Toolbar = require("./index57.cjs");
+const require_Skeleton = require("./index59.cjs");
+const require_Progress = require("./index61.cjs");
+const require_SegmentedToggle = require("./index63.cjs");
+const require_AuthCard = require("./index65.cjs");
+const require_AuthPages = require("./index67.cjs");
+const require_DataTable = require("./index69.cjs");
+const require_SettingsPage = require("./index71.cjs");
+const require_ErrorPage = require("./index73.cjs");
+const require_EmptyStatePage = require("./index75.cjs");
 exports.Alert = require_Alert.Alert;
 exports.AppShell = require_AppShell.AppShell;
 exports.AuthCard = require_AuthCard.AuthCard;
@@ -88,9 +90,12 @@ exports.Skeleton = require_Skeleton.Skeleton;
 exports.Stack = require_LayoutPrimitives.Stack;
 exports.Stat = require_Stat.Stat;
 exports.StatGroup = require_Stat.StatGroup;
+exports.Surface = require_Surface.Surface;
 exports.ThemeProvider = require_ThemeProvider.ThemeProvider;
 exports.ThemeToggleButton = require_ThemeToggleButton.ThemeToggleButton;
 exports.ToastProvider = require_ToastContext.ToastProvider;
+exports.Toolbar = require_Toolbar.Toolbar;
+exports.ToolbarGroup = require_Toolbar.ToolbarGroup;
 exports.TopBar = require_TopBar.TopBar;
 exports.cx = require_cx.cx;
 exports.useTheme = require_ThemeProvider.useTheme;

package/dist/index.d.ts

@@ -5,6 +5,8 @@ export type { AvatarProps, AvatarSize } from "./components/avatar/Avatar";
 export { Avatar, AvatarFallback, AvatarImage } from "./components/avatar/Avatar";
 export type { CardProps, CardPadding, CardTone } from "./components/card/Card";
 export { Card } from "./components/card/Card";
+export type { SurfaceLevel, SurfacePadding, SurfaceProps, SurfaceRadius, } from "./components/surface/Surface";
+export { Surface } from "./components/surface/Surface";
 export type { PillProps, PillSize, PillTone } from "./components/pill/Pill";
 export { Pill } from "./components/pill/Pill";
 export type { ModalOverlayProps, ModalProps, ModalSize } from "./components/modal/Modal";
@@ -42,6 +44,8 @@ export type { InlineAlign, InlineJustify, InlineProps, LayoutGap, StackProps, }
 export { Inline, Stack } from "./components/layout-primitives/LayoutPrimitives";
 export type { StatGroupProps, StatProps } from "./components/stat/Stat";
 export { Stat, StatGroup } from "./components/stat/Stat";
+export type { ToolbarDensity, ToolbarGroupProps, ToolbarProps } from "./components/toolbar/Toolbar";
+export { Toolbar, ToolbarGroup } from "./components/toolbar/Toolbar";
 export type { ThemeToggleButtonProps } from "./components/theme-toggle-button/ThemeToggleButton";
 export { ThemeToggleButton } from "./components/theme-toggle-button/ThemeToggleButton";
 export type { UziAccent, UziResolvedTheme, UziTheme } from "./theme/ThemeProvider";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,mBAAmB,CAAC;AAG3B,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACzF,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEpD,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEjF,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAG9C,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACzF,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG/D,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC1E,YAAY,EACV,KAAK,EACL,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,SAAS,GACV,MAAM,0BAA0B,CAAC;AAGlC,YAAY,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,YAAY,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,YAAY,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AACjG,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AACpF,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D,OAAO,EACL,YAAY,EACZ,wBAAwB,EACxB,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,EACtB,mBAAmB,GACpB,MAAM,yCAAyC,CAAC;AAGjD,YAAY,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE3D,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAC9G,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AAEjE,YAAY,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AACxG,OAAO,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAE1E,YAAY,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACnG,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AAEjE,YAAY,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAC/G,OAAO,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAE1E,YAAY,EACV,sBAAsB,EACtB,eAAe,EACf,cAAc,GACf,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AAEjE,YAAY,EACV,WAAW,EACX,aAAa,EACb,WAAW,EACX,SAAS,EACT,UAAU,GACX,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,iDAAiD,CAAC;AAEhF,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEzD,YAAY,EAAE,sBAAsB,EAAE,MAAM,oDAAoD,CAAC;AACjG,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAGvF,YAAY,EAAE,SAAS,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGhE,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAGhC,YAAY,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAG1D,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEpD,YAAY,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AACjH,OAAO,EAAE,eAAe,EAAE,MAAM,+CAA+C,CAAC;AAGhF,YAAY,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAG3D,YAAY,EACV,eAAe,EACf,eAAe,EACf,uBAAuB,GACxB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAG/F,YAAY,EACV,MAAM,EACN,cAAc,EACd,kBAAkB,EAClB,aAAa,GACd,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAG9D,YAAY,EACV,iBAAiB,EACjB,eAAe,GAChB,MAAM,yCAAyC,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAGvE,YAAY,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAG7F,YAAY,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,8CAA8C,CAAC;AAC/G,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -4,35 +4,37 @@ import { cx } from "./index3.js";
 import { Button } from "./index5.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./index7.js";
 import { Card } from "./index9.js";
-import { Pill } from "./index11.js";
-import { Modal, ModalOverlay } from "./index13.js";
-import { Alert } from "./index15.js";
-import { ToastProvider, useToast } from "./index17.js";
-import { Input } from "./index19.js";
-import { Label } from "./index21.js";
-import { Checkbox } from "./index23.js";
-import { MultiSelect } from "./index25.js";
-import { Select } from "./index27.js";
-import { Dropdown } from "./index28.js";
-import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./index30.js";
-import { ThemeProvider, useTheme } from "./index32.js";
-import { ThemeToggleButton } from "./index34.js";
-import { TopBar } from "./index36.js";
-import { AppShell } from "./index38.js";
-import { SidebarNav } from "./index40.js";
-import { PageContainer } from "./index42.js";
-import { PageHeader } from "./index44.js";
-import { SectionHeader } from "./index46.js";
-import { EmptyState } from "./index48.js";
-import { Inline, Stack } from "./index50.js";
-import { Stat, StatGroup } from "./index52.js";
-import { Skeleton } from "./index54.js";
-import { Progress } from "./index56.js";
-import { SegmentedToggle } from "./index58.js";
-import { AuthCard } from "./index60.js";
-import { ForgotPasswordPage, SignInPage, SignUpPage } from "./index62.js";
-import { DataTable } from "./index64.js";
-import { SettingsPage } from "./index66.js";
-import { ErrorPage, MaintenancePage, NotFoundPage } from "./index68.js";
-import { EmptyStatePage } from "./index70.js";
-export { Alert, AppShell, AuthCard, Avatar, AvatarFallback, AvatarImage, Button, Card, Checkbox, DataTable, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStatePage, ErrorPage, ForgotPasswordPage, Inline, Input, Label, MaintenancePage, Modal, ModalOverlay, MultiSelect, NotFoundPage, PageContainer, PageHeader, Pill, Progress, SectionHeader, SegmentedToggle, Select, SettingsPage, SidebarNav, SignInPage, SignUpPage, Skeleton, Stack, Stat, StatGroup, ThemeProvider, ThemeToggleButton, ToastProvider, TopBar, cx, useTheme, useToast };
+import { Surface } from "./index11.js";
+import { Pill } from "./index13.js";
+import { Modal, ModalOverlay } from "./index15.js";
+import { Alert } from "./index17.js";
+import { ToastProvider, useToast } from "./index19.js";
+import { Input } from "./index21.js";
+import { Label } from "./index23.js";
+import { Checkbox } from "./index25.js";
+import { MultiSelect } from "./index27.js";
+import { Select } from "./index29.js";
+import { Dropdown } from "./index30.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./index32.js";
+import { ThemeProvider, useTheme } from "./index34.js";
+import { ThemeToggleButton } from "./index36.js";
+import { TopBar } from "./index38.js";
+import { AppShell } from "./index40.js";
+import { SidebarNav } from "./index42.js";
+import { PageContainer } from "./index44.js";
+import { PageHeader } from "./index46.js";
+import { SectionHeader } from "./index48.js";
+import { EmptyState } from "./index50.js";
+import { Inline, Stack } from "./index52.js";
+import { Stat, StatGroup } from "./index54.js";
+import { Toolbar, ToolbarGroup } from "./index56.js";
+import { Skeleton } from "./index58.js";
+import { Progress } from "./index60.js";
+import { SegmentedToggle } from "./index62.js";
+import { AuthCard } from "./index64.js";
+import { ForgotPasswordPage, SignInPage, SignUpPage } from "./index66.js";
+import { DataTable } from "./index68.js";
+import { SettingsPage } from "./index70.js";
+import { ErrorPage, MaintenancePage, NotFoundPage } from "./index72.js";
+import { EmptyStatePage } from "./index74.js";
+export { Alert, AppShell, AuthCard, Avatar, AvatarFallback, AvatarImage, Button, Card, Checkbox, DataTable, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStatePage, ErrorPage, ForgotPasswordPage, Inline, Input, Label, MaintenancePage, Modal, ModalOverlay, MultiSelect, NotFoundPage, PageContainer, PageHeader, Pill, Progress, SectionHeader, SegmentedToggle, Select, SettingsPage, SidebarNav, SignInPage, SignUpPage, Skeleton, Stack, Stat, StatGroup, Surface, ThemeProvider, ThemeToggleButton, ToastProvider, Toolbar, ToolbarGroup, TopBar, cx, useTheme, useToast };

package/dist/index10.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index10.cjs","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,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EAAW,WATG,WAAA,GACd,oBAAA,QAAO,MACP,WAAW,QAAQ,oBAAA,QAAO,WAAW,SAAS,MAC9C,oBAAA,QAAO;GAJ4C,MAAM;GAAgB,IAAI;GAAc,IAAI;GAAc,IAAI;EAI1G,EAAc,WACrB,eAAe,oBAAA,QAAO,aACtB,SAIsB;EAAS,GAAI;EAChC;CACQ,CAAA;AAEf"}
+{"version":3,"file":"index10.cjs","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,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EAAW,WATG,WAAA,GACd,oBAAA,QAAO,MACP,WAAW,QAAQ,oBAAA,QAAO,WAAW,SAAS,MAC9C,oBAAA,QAAO;GAJ4C,MAAM;GAAgB,IAAI;GAAc,IAAI;GAAc,IAAI;EAI1G,EAAc,WACrB,eAAe,oBAAA,QAAO,aACtB,SAIsB;EAAS,GAAI;EAChC;CACQ,CAAA;AAEf"}

package/dist/index10.js

@@ -1,19 +1,23 @@
-//#region src/components/pill/pill.module.css
-var pill = "uzi-pill-module__pill__uCKcP";
-var icon = "uzi-pill-module__icon__KQ8zg";
-var content = "uzi-pill-module__content__T7AG1";
-var pill_module_default = {
-	pill,
-	"size-sm": "uzi-pill-module__size-sm__JANOQ",
-	"size-md": "uzi-pill-module__size-md__fdsqR",
-	"tone-success": "uzi-pill-module__tone-success__kW2Kf",
-	"tone-warning": "uzi-pill-module__tone-warning__Rc5-s",
-	"tone-info": "uzi-pill-module__tone-info__0vQrj",
-	"tone-danger": "uzi-pill-module__tone-danger__gzNOa",
-	icon,
-	content
+//#region src/components/surface/surface.module.css
+var surface = "uzi-surface-module__surface__wbqff";
+var bordered = "uzi-surface-module__bordered__aPP-x";
+var surface_module_default = {
+	surface,
+	"level-base": "uzi-surface-module__level-base__2lWS2",
+	"level-subtle": "uzi-surface-module__level-subtle__njIb4",
+	"level-raised": "uzi-surface-module__level-raised__VT9mt",
+	"level-selected": "uzi-surface-module__level-selected__7z3bI",
+	bordered,
+	"padding-none": "uzi-surface-module__padding-none__swBED",
+	"padding-sm": "uzi-surface-module__padding-sm__0qdV8",
+	"padding-md": "uzi-surface-module__padding-md__Xq3P7",
+	"padding-lg": "uzi-surface-module__padding-lg__beXmJ",
+	"radius-none": "uzi-surface-module__radius-none__DbXCZ",
+	"radius-sm": "uzi-surface-module__radius-sm__vMEbI",
+	"radius-md": "uzi-surface-module__radius-md__cS0Cp",
+	"radius-lg": "uzi-surface-module__radius-lg__T6MVA"
 };
 //#endregion
-export { content, pill_module_default as default, icon, pill };
+export { bordered, surface_module_default as default, surface };
 
 //# sourceMappingURL=index10.js.map

package/dist/index10.js.map

@@ -1 +1 @@
-{"version":3,"file":"index10.js","names":[],"sources":["../src/components/pill/pill.module.css"],"sourcesContent":[".pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border-radius: 999px;\n  border: 1px solid var(--ts-pill-border, var(--border));\n  background: var(--ts-pill-bg, color-mix(in srgb, var(--foreground) 4%, transparent));\n  color: var(--ts-pill-fg, var(--muted-foreground));\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  line-height: 1.2;\n  white-space: nowrap;\n}\n\n.size-sm {\n  padding: 3px 8px;\n  font-size: 11px;\n}\n\n.size-md {\n  padding: 4px 10px;\n}\n\n.tone-success {\n  color: var(--success);\n  border-color: color-mix(in srgb, var(--success) 45%, transparent);\n  background: color-mix(in srgb, var(--success) 12%, transparent);\n}\n\n.tone-warning {\n  color: var(--warning);\n  border-color: color-mix(in srgb, var(--warning) 45%, transparent);\n  background: color-mix(in srgb, var(--warning) 12%, transparent);\n}\n\n.tone-info {\n  color: var(--primary);\n  border-color: color-mix(in srgb, var(--primary) 50%, transparent);\n  background: color-mix(in srgb, var(--primary) 12%, transparent);\n}\n\n.tone-danger {\n  color: var(--destructive);\n  border-color: color-mix(in srgb, var(--destructive) 45%, transparent);\n  background: color-mix(in srgb, var(--destructive) 12%, transparent);\n}\n\n.icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n}\n\n.content {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n"],"mappings":""}
+{"version":3,"file":"index10.js","names":[],"sources":["../src/components/surface/surface.module.css"],"sourcesContent":[".surface {\n  min-width: 0;\n  color: var(--uzi-text-primary, var(--foreground));\n}\n\n.level-base { background: var(--uzi-surface-1, var(--panel)); }\n.level-subtle { background: var(--uzi-surface-2, var(--muted)); }\n\n.level-raised {\n  background: var(--uzi-surface-raised, var(--panel));\n  box-shadow: var(--uzi-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));\n}\n\n.level-selected {\n  background: var(--uzi-surface-selected, var(--accent));\n}\n\n.level-selected:not(.bordered) {\n  box-shadow: inset 0 0 0 1px var(--uzi-border-accent, var(--primary));\n}\n\n.bordered {\n  border: 1px solid var(--uzi-border-subtle, var(--border));\n}\n\n.level-selected.bordered {\n  border-color: var(--uzi-border-accent, var(--primary));\n}\n\n.padding-none { padding: 0; }\n.padding-sm { padding: var(--uzi-space-2, 0.5rem); }\n.padding-md { padding: var(--uzi-space-4, 1rem); }\n.padding-lg { padding: var(--uzi-space-5, 1.5rem); }\n.radius-none { border-radius: 0; }\n.radius-sm { border-radius: var(--uzi-radius-sm, 0.375rem); }\n.radius-md { border-radius: var(--uzi-radius-md, 0.625rem); }\n.radius-lg { border-radius: var(--uzi-radius-lg, 0.875rem); }\n"],"mappings":""}

package/dist/index11.cjs

@@ -1,22 +1,25 @@
-//#region src/components/pill/pill.module.css
-var pill = "uzi-pill-module__pill__uCKcP";
-var icon = "uzi-pill-module__icon__KQ8zg";
-var content = "uzi-pill-module__content__T7AG1";
-var pill_module_default = {
-	pill,
-	"size-sm": "uzi-pill-module__size-sm__JANOQ",
-	"size-md": "uzi-pill-module__size-md__fdsqR",
-	"tone-success": "uzi-pill-module__tone-success__kW2Kf",
-	"tone-warning": "uzi-pill-module__tone-warning__Rc5-s",
-	"tone-info": "uzi-pill-module__tone-info__0vQrj",
-	"tone-danger": "uzi-pill-module__tone-danger__gzNOa",
-	icon,
-	content
+//#region src/components/surface/surface.module.css
+var surface = "uzi-surface-module__surface__wbqff";
+var bordered = "uzi-surface-module__bordered__aPP-x";
+var surface_module_default = {
+	surface,
+	"level-base": "uzi-surface-module__level-base__2lWS2",
+	"level-subtle": "uzi-surface-module__level-subtle__njIb4",
+	"level-raised": "uzi-surface-module__level-raised__VT9mt",
+	"level-selected": "uzi-surface-module__level-selected__7z3bI",
+	bordered,
+	"padding-none": "uzi-surface-module__padding-none__swBED",
+	"padding-sm": "uzi-surface-module__padding-sm__0qdV8",
+	"padding-md": "uzi-surface-module__padding-md__Xq3P7",
+	"padding-lg": "uzi-surface-module__padding-lg__beXmJ",
+	"radius-none": "uzi-surface-module__radius-none__DbXCZ",
+	"radius-sm": "uzi-surface-module__radius-sm__vMEbI",
+	"radius-md": "uzi-surface-module__radius-md__cS0Cp",
+	"radius-lg": "uzi-surface-module__radius-lg__T6MVA"
 };
 //#endregion
-exports.content = content;
-exports.default = pill_module_default;
-exports.icon = icon;
-exports.pill = pill;
+exports.bordered = bordered;
+exports.default = surface_module_default;
+exports.surface = surface;
 
 //# sourceMappingURL=index11.cjs.map

package/dist/index11.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index11.cjs","names":[],"sources":["../src/components/pill/pill.module.css"],"sourcesContent":[".pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border-radius: 999px;\n  border: 1px solid var(--ts-pill-border, var(--border));\n  background: var(--ts-pill-bg, color-mix(in srgb, var(--foreground) 4%, transparent));\n  color: var(--ts-pill-fg, var(--muted-foreground));\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  line-height: 1.2;\n  white-space: nowrap;\n}\n\n.size-sm {\n  padding: 3px 8px;\n  font-size: 11px;\n}\n\n.size-md {\n  padding: 4px 10px;\n}\n\n.tone-success {\n  color: var(--success);\n  border-color: color-mix(in srgb, var(--success) 45%, transparent);\n  background: color-mix(in srgb, var(--success) 12%, transparent);\n}\n\n.tone-warning {\n  color: var(--warning);\n  border-color: color-mix(in srgb, var(--warning) 45%, transparent);\n  background: color-mix(in srgb, var(--warning) 12%, transparent);\n}\n\n.tone-info {\n  color: var(--primary);\n  border-color: color-mix(in srgb, var(--primary) 50%, transparent);\n  background: color-mix(in srgb, var(--primary) 12%, transparent);\n}\n\n.tone-danger {\n  color: var(--destructive);\n  border-color: color-mix(in srgb, var(--destructive) 45%, transparent);\n  background: color-mix(in srgb, var(--destructive) 12%, transparent);\n}\n\n.icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n}\n\n.content {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n"],"mappings":""}
+{"version":3,"file":"index11.cjs","names":[],"sources":["../src/components/surface/surface.module.css"],"sourcesContent":[".surface {\n  min-width: 0;\n  color: var(--uzi-text-primary, var(--foreground));\n}\n\n.level-base { background: var(--uzi-surface-1, var(--panel)); }\n.level-subtle { background: var(--uzi-surface-2, var(--muted)); }\n\n.level-raised {\n  background: var(--uzi-surface-raised, var(--panel));\n  box-shadow: var(--uzi-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));\n}\n\n.level-selected {\n  background: var(--uzi-surface-selected, var(--accent));\n}\n\n.level-selected:not(.bordered) {\n  box-shadow: inset 0 0 0 1px var(--uzi-border-accent, var(--primary));\n}\n\n.bordered {\n  border: 1px solid var(--uzi-border-subtle, var(--border));\n}\n\n.level-selected.bordered {\n  border-color: var(--uzi-border-accent, var(--primary));\n}\n\n.padding-none { padding: 0; }\n.padding-sm { padding: var(--uzi-space-2, 0.5rem); }\n.padding-md { padding: var(--uzi-space-4, 1rem); }\n.padding-lg { padding: var(--uzi-space-5, 1.5rem); }\n.radius-none { border-radius: 0; }\n.radius-sm { border-radius: var(--uzi-radius-sm, 0.375rem); }\n.radius-md { border-radius: var(--uzi-radius-md, 0.625rem); }\n.radius-lg { border-radius: var(--uzi-radius-lg, 0.875rem); }\n"],"mappings":""}

package/dist/index11.js

@@ -1,22 +1,15 @@
 import { cx } from "./index3.js";
-import pill_module_default from "./index10.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/pill/Pill.tsx
-function Pill({ as, tone = "neutral", size = "md", icon, className, children, ...rest }) {
-	return /* @__PURE__ */ jsxs(as ?? "span", {
-		className: cx(pill_module_default.pill, pill_module_default[`tone-${tone}`], pill_module_default[`size-${size}`], className),
+import surface_module_default from "./index10.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/surface/Surface.tsx
+function Surface({ as, level = "base", padding = "md", radius = "md", bordered = false, className, children, ...rest }) {
+	return /* @__PURE__ */ jsx(as ?? "div", {
+		className: cx(surface_module_default.surface, surface_module_default[`level-${level}`], surface_module_default[`padding-${padding}`], surface_module_default[`radius-${radius}`], bordered && surface_module_default.bordered, className),
 		...rest,
-		children: [icon ? /* @__PURE__ */ jsx("span", {
-			className: pill_module_default.icon,
-			"aria-hidden": "true",
-			children: icon
-		}) : null, /* @__PURE__ */ jsx("span", {
-			className: pill_module_default.content,
-			children
-		})]
+		children
 	});
 }
 //#endregion
-export { Pill };
+export { Surface };
 
 //# sourceMappingURL=index11.js.map

package/dist/index11.js.map

@@ -1 +1 @@
-{"version":3,"file":"index11.js","names":[],"sources":["../src/components/pill/Pill.tsx"],"sourcesContent":["/**\n * Compact label component for status chips and tags.\n *\n * @remarks\n * Supports tone and size presets, and can render any inline element.\n *\n * @param props.as - Element to render (defaults to `span`).\n * @param props.tone - Visual tone variant.\n * @param props.size - Size preset.\n * @param props.icon - Optional leading icon.\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./pill.module.css\";\n\nexport type PillTone = \"neutral\" | \"success\" | \"warning\" | \"info\" | \"danger\";\nexport type PillSize = \"sm\" | \"md\";\n\ntype PillElement = \"span\" | \"div\" | \"button\";\n\nexport type PillProps = HTMLAttributes<HTMLElement> & {\n  /** Optional rendered element; defaults to `span`. */\n  as?: PillElement;\n  /** Visual tone; adjusts color and border. */\n  tone?: PillTone;\n  /** Size preset. */\n  size?: PillSize;\n  /** Leading icon node (not focusable). */\n  icon?: ReactNode;\n};\n\nexport function Pill({\n  as,\n  tone = \"neutral\",\n  size = \"md\",\n  icon,\n  className,\n  children,\n  ...rest\n}: PillProps) {\n  const Component: PillElement = as ?? \"span\";\n  const classes = cx(styles.pill, styles[`tone-${tone}`], styles[`size-${size}`], className);\n\n  return (\n    <Component className={classes} {...rest}>\n      {icon ? (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon}\n        </span>\n      ) : null}\n      <span className={styles.content}>{children}</span>\n    </Component>\n  );\n}\n"],"mappings":";;;;AA+BA,SAAgB,KAAK,EACnB,IACA,OAAO,WACP,OAAO,MACP,MACA,WACA,UACA,GAAG,QACS;CAIZ,OACE,qBAJ6B,MAAM,QAInC;EAAW,WAHG,GAAG,oBAAO,MAAM,oBAAO,QAAQ,SAAS,oBAAO,QAAQ,SAAS,SAGxD;EAAS,GAAI;YAAnC,CACG,OACC,oBAAC,QAAD;GAAM,WAAW,oBAAO;GAAM,eAAY;aACvC;EACG,CAAA,IACJ,MACJ,oBAAC,QAAD;GAAM,WAAW,oBAAO;GAAU;EAAe,CAAA,CACxC;;AAEf"}
+{"version":3,"file":"index11.js","names":[],"sources":["../src/components/surface/Surface.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ElementType } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./surface.module.css\";\n\nexport type SurfaceLevel = \"base\" | \"subtle\" | \"raised\" | \"selected\";\nexport type SurfacePadding = \"none\" | \"sm\" | \"md\" | \"lg\";\nexport type SurfaceRadius = \"none\" | \"sm\" | \"md\" | \"lg\";\n\ntype SurfaceElement = \"div\" | \"section\" | \"article\" | \"aside\";\n\ntype SurfaceOwnProps<T extends SurfaceElement> = {\n  as?: T;\n  level?: SurfaceLevel;\n  padding?: SurfacePadding;\n  radius?: SurfaceRadius;\n  bordered?: boolean;\n};\n\nexport type SurfaceProps<T extends SurfaceElement = \"div\"> =\n  SurfaceOwnProps<T> &\n  Omit<ComponentPropsWithoutRef<T>, keyof SurfaceOwnProps<T>>;\n\nexport function Surface<T extends SurfaceElement = \"div\">({\n  as,\n  level = \"base\",\n  padding = \"md\",\n  radius = \"md\",\n  bordered = false,\n  className,\n  children,\n  ...rest\n}: SurfaceProps<T>) {\n  const Component = (as ?? \"div\") as ElementType;\n\n  return (\n    <Component\n      className={cx(\n        styles.surface,\n        styles[`level-${level}`],\n        styles[`padding-${padding}`],\n        styles[`radius-${radius}`],\n        bordered && styles.bordered,\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n}\n"],"mappings":";;;;AAsBA,SAAgB,QAA0C,EACxD,IACA,QAAQ,QACR,UAAU,MACV,SAAS,MACT,WAAW,OACX,WACA,UACA,GAAG,QACe;CAGlB,OACE,oBAHiB,MAAM,OAGvB;EACE,WAAW,GACT,uBAAO,SACP,uBAAO,SAAS,UAChB,uBAAO,WAAW,YAClB,uBAAO,UAAU,WACjB,YAAY,uBAAO,UACnB,SACF;EACA,GAAI;EAEH;CACQ,CAAA;AAEf"}

package/dist/index12.cjs

@@ -1,22 +1,15 @@
 const require_cx = require("./index4.cjs");
-const require_pill_module = require("./index11.cjs");
+const require_surface_module = require("./index11.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/components/pill/Pill.tsx
-function Pill({ as, tone = "neutral", size = "md", icon, className, children, ...rest }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(as ?? "span", {
-		className: require_cx.cx(require_pill_module.default.pill, require_pill_module.default[`tone-${tone}`], require_pill_module.default[`size-${size}`], className),
+//#region src/components/surface/Surface.tsx
+function Surface({ as, level = "base", padding = "md", radius = "md", bordered = false, className, children, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(as ?? "div", {
+		className: require_cx.cx(require_surface_module.default.surface, require_surface_module.default[`level-${level}`], require_surface_module.default[`padding-${padding}`], require_surface_module.default[`radius-${radius}`], bordered && require_surface_module.default.bordered, className),
 		...rest,
-		children: [icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: require_pill_module.default.icon,
-			"aria-hidden": "true",
-			children: icon
-		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: require_pill_module.default.content,
-			children
-		})]
+		children
 	});
 }
 //#endregion
-exports.Pill = Pill;
+exports.Surface = Surface;
 
 //# sourceMappingURL=index12.cjs.map

package/dist/index12.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index12.cjs","names":[],"sources":["../src/components/pill/Pill.tsx"],"sourcesContent":["/**\n * Compact label component for status chips and tags.\n *\n * @remarks\n * Supports tone and size presets, and can render any inline element.\n *\n * @param props.as - Element to render (defaults to `span`).\n * @param props.tone - Visual tone variant.\n * @param props.size - Size preset.\n * @param props.icon - Optional leading icon.\n */\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./pill.module.css\";\n\nexport type PillTone = \"neutral\" | \"success\" | \"warning\" | \"info\" | \"danger\";\nexport type PillSize = \"sm\" | \"md\";\n\ntype PillElement = \"span\" | \"div\" | \"button\";\n\nexport type PillProps = HTMLAttributes<HTMLElement> & {\n  /** Optional rendered element; defaults to `span`. */\n  as?: PillElement;\n  /** Visual tone; adjusts color and border. */\n  tone?: PillTone;\n  /** Size preset. */\n  size?: PillSize;\n  /** Leading icon node (not focusable). */\n  icon?: ReactNode;\n};\n\nexport function Pill({\n  as,\n  tone = \"neutral\",\n  size = \"md\",\n  icon,\n  className,\n  children,\n  ...rest\n}: PillProps) {\n  const Component: PillElement = as ?? \"span\";\n  const classes = cx(styles.pill, styles[`tone-${tone}`], styles[`size-${size}`], className);\n\n  return (\n    <Component className={classes} {...rest}>\n      {icon ? (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon}\n        </span>\n      ) : null}\n      <span className={styles.content}>{children}</span>\n    </Component>\n  );\n}\n"],"mappings":";;;;AA+BA,SAAgB,KAAK,EACnB,IACA,OAAO,WACP,OAAO,MACP,MACA,WACA,UACA,GAAG,QACS;CAIZ,OACE,iBAAA,GAAA,kBAAA,KAAA,CAJ6B,MAAM,QAInC;EAAW,WAHG,WAAA,GAAG,oBAAA,QAAO,MAAM,oBAAA,QAAO,QAAQ,SAAS,oBAAA,QAAO,QAAQ,SAAS,SAGxD;EAAS,GAAI;YAAnC,CACG,OACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAW,oBAAA,QAAO;GAAM,eAAY;aACvC;EACG,CAAA,IACJ,MACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAW,oBAAA,QAAO;GAAU;EAAe,CAAA,CACxC;;AAEf"}
+{"version":3,"file":"index12.cjs","names":[],"sources":["../src/components/surface/Surface.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ElementType } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./surface.module.css\";\n\nexport type SurfaceLevel = \"base\" | \"subtle\" | \"raised\" | \"selected\";\nexport type SurfacePadding = \"none\" | \"sm\" | \"md\" | \"lg\";\nexport type SurfaceRadius = \"none\" | \"sm\" | \"md\" | \"lg\";\n\ntype SurfaceElement = \"div\" | \"section\" | \"article\" | \"aside\";\n\ntype SurfaceOwnProps<T extends SurfaceElement> = {\n  as?: T;\n  level?: SurfaceLevel;\n  padding?: SurfacePadding;\n  radius?: SurfaceRadius;\n  bordered?: boolean;\n};\n\nexport type SurfaceProps<T extends SurfaceElement = \"div\"> =\n  SurfaceOwnProps<T> &\n  Omit<ComponentPropsWithoutRef<T>, keyof SurfaceOwnProps<T>>;\n\nexport function Surface<T extends SurfaceElement = \"div\">({\n  as,\n  level = \"base\",\n  padding = \"md\",\n  radius = \"md\",\n  bordered = false,\n  className,\n  children,\n  ...rest\n}: SurfaceProps<T>) {\n  const Component = (as ?? \"div\") as ElementType;\n\n  return (\n    <Component\n      className={cx(\n        styles.surface,\n        styles[`level-${level}`],\n        styles[`padding-${padding}`],\n        styles[`radius-${radius}`],\n        bordered && styles.bordered,\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n}\n"],"mappings":";;;;AAsBA,SAAgB,QAA0C,EACxD,IACA,QAAQ,QACR,UAAU,MACV,SAAS,MACT,WAAW,OACX,WACA,UACA,GAAG,QACe;CAGlB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAHiB,MAAM,OAGvB;EACE,WAAW,WAAA,GACT,uBAAA,QAAO,SACP,uBAAA,QAAO,SAAS,UAChB,uBAAA,QAAO,WAAW,YAClB,uBAAA,QAAO,UAAU,WACjB,YAAY,uBAAA,QAAO,UACnB,SACF;EACA,GAAI;EAEH;CACQ,CAAA;AAEf"}