@tomny-dev/uzi 0.1.8 → 0.1.9

package/README.md

@@ -1,103 +1,103 @@
-# @tomny-dev/uzi
-
-Rapid-fire React UI components. Ship faster, build more.
-
-## Install
-
-```bash
-pnpm add @tomny-dev/uzi
-```
-
-## Usage
-
-```tsx
-import { Button, Card, Modal, ThemeProvider, useToast } from "@tomny-dev/uzi";
-```
-
-If you want the packaged component styles, import the exported stylesheet once in your app:
-
-```css
-@import "@tomny-dev/uzi/styles.css";
-```
-
-## Themes
-
-`uzi` ships with built-in light/dark tokens and a small accent palette layer.
-
-```tsx
-"use client";
-
-import { Button, ThemeProvider, useTheme } from "@tomny-dev/uzi";
-
-function ThemeToggle() {
-  const { resolvedTheme, toggleTheme, accent, setAccent } = useTheme();
-
-  return (
-    <div>
-      <Button onClick={toggleTheme}>
-        {resolvedTheme === "dark" ? "Switch to light" : "Switch to dark"}
-      </Button>
-      <Button variant="outline" onClick={() => setAccent(accent === "violet" ? "blue" : "violet")}>
-        Toggle accent
-      </Button>
-    </div>
-  );
-}
-
-export function App() {
-  return (
-    <ThemeProvider defaultTheme="system" defaultAccent="blue">
-      <ThemeToggle />
-    </ThemeProvider>
-  );
-}
-```
-
-Supported themes:
-
-- `light`
-- `dark`
-- `system`
-
-Supported accent palettes:
-
-- `blue`
-- `cyan`
-- `violet`
-- `emerald`
-- `amber`
-- `rose`
-
-## Components
-
-| Component | Description |
-|---|---|
-| `Avatar` | Profile image with fallback states |
-| `Button` | Primary, secondary, outline, ghost variants |
-| `Card` | Surface container with tone/padding control |
-| `Checkbox` | Checkbox form primitive |
-| `Input` | Text input primitive |
-| `Label` | Form label primitive |
-| `Pill` | Inline badge/tag |
-| `Modal` | Accessible overlay dialog |
-| `Dropdown` | Select-style dropdown |
-| `DropdownMenu` | Radix-based action menu primitives |
-| `AppShell` | Responsive layout with collapsible sidebar |
-| `SidebarNav` | Sidebar navigation list |
-| `TopBar` | Composable header shell for brand, nav triggers, and actions |
-| `ThemeToggleButton` | Reusable light/dark toggle wired to `ThemeProvider` |
-| `ThemeProvider` / `useTheme` | Light/dark + accent palette theming |
-| `ToastProvider` / `useToast` | Toast notification system |
-
-`TopBar` supports:
-
-- `brandingLocation="left" | "center"`
-- `isSticky={true | false}`
-- `showThemeToggle`
-- `themeToggleProps`
-
-## Notes
-
-- No Tailwind — components use CSS modules internally
-- `"use client"` is handled by the bundle — no need to wrap imports
-- `react` and `react-dom` are peer dependencies, provided by your app
+# @tomny-dev/uzi
+
+Rapid-fire React UI components. Ship faster, build more.
+
+## Install
+
+```bash
+pnpm add @tomny-dev/uzi
+```
+
+## Usage
+
+```tsx
+import { Button, Card, Modal, ThemeProvider, useToast } from "@tomny-dev/uzi";
+```
+
+If you want the packaged component styles, import the exported stylesheet once in your app:
+
+```css
+@import "@tomny-dev/uzi/styles.css";
+```
+
+## Themes
+
+`uzi` ships with built-in light/dark tokens and a small accent palette layer.
+
+```tsx
+"use client";
+
+import { Button, ThemeProvider, useTheme } from "@tomny-dev/uzi";
+
+function ThemeToggle() {
+  const { resolvedTheme, toggleTheme, accent, setAccent } = useTheme();
+
+  return (
+    <div>
+      <Button onClick={toggleTheme}>
+        {resolvedTheme === "dark" ? "Switch to light" : "Switch to dark"}
+      </Button>
+      <Button variant="outline" onClick={() => setAccent(accent === "violet" ? "blue" : "violet")}>
+        Toggle accent
+      </Button>
+    </div>
+  );
+}
+
+export function App() {
+  return (
+    <ThemeProvider defaultTheme="system" defaultAccent="blue">
+      <ThemeToggle />
+    </ThemeProvider>
+  );
+}
+```
+
+Supported themes:
+
+- `light`
+- `dark`
+- `system`
+
+Supported accent palettes:
+
+- `blue`
+- `cyan`
+- `violet`
+- `emerald`
+- `amber`
+- `rose`
+
+## Components
+
+| Component | Description |
+|---|---|
+| `Avatar` | Profile image with fallback states |
+| `Button` | Primary, secondary, outline, ghost variants |
+| `Card` | Surface container with tone/padding control |
+| `Checkbox` | Checkbox form primitive |
+| `Input` | Text input primitive |
+| `Label` | Form label primitive |
+| `Pill` | Inline badge/tag |
+| `Modal` | Accessible overlay dialog |
+| `Dropdown` | Select-style dropdown |
+| `DropdownMenu` | Radix-based action menu primitives |
+| `AppShell` | Responsive layout with collapsible sidebar |
+| `SidebarNav` | Sidebar navigation list |
+| `TopBar` | Composable header shell for brand, nav triggers, and actions |
+| `ThemeToggleButton` | Reusable light/dark toggle wired to `ThemeProvider` |
+| `ThemeProvider` / `useTheme` | Light/dark + accent palette theming |
+| `ToastProvider` / `useToast` | Toast notification system |
+
+`TopBar` supports:
+
+- `brandingLocation="left" | "center"`
+- `isSticky={true | false}`
+- `showThemeToggle`
+- `themeToggleProps`
+
+## Notes
+
+- No Tailwind — components use CSS modules internally
+- `"use client"` is handled by the bundle — no need to wrap imports
+- `react` and `react-dom` are peer dependencies, provided by your app

package/dist/index.cjs

@@ -59,7 +59,10 @@ __export(index_exports, {
   Modal: () => Modal,
   ModalOverlay: () => ModalOverlay,
   Pill: () => Pill,
+  Progress: () => Progress,
+  Select: () => Select,
   SidebarNav: () => SidebarNav,
+  Skeleton: () => Skeleton,
   ThemeProvider: () => ThemeProvider,
   ThemeToggleButton: () => ThemeToggleButton,
   ToastProvider: () => ToastProvider,
@@ -1364,6 +1367,81 @@ function SidebarNavEntry({
     }
   );
 }
+
+// src/components/skeleton/Skeleton.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function Skeleton({
+  width,
+  height,
+  radius = "md",
+  className,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "div",
+    {
+      className: cx("skeleton", `radius-${radius}`, className),
+      style: { width, height, ...style },
+      "aria-hidden": "true",
+      ...rest
+    }
+  );
+}
+
+// src/components/progress/Progress.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function Progress({
+  value,
+  tone = "default",
+  className,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
+  const clamped = Math.max(0, Math.min(100, value));
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "div",
+    {
+      className: cx("track", className),
+      role: "progressbar",
+      "aria-valuenow": clamped,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": ariaLabel,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "div",
+        {
+          className: cx("fill", `tone-${tone}`),
+          style: { width: `${clamped}%` }
+        }
+      )
+    }
+  );
+}
+
+// src/components/select/Select.tsx
+var React4 = __toESM(require("react"), 1);
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var Select = React4.forwardRef(
+  ({ options, value, onChange, placeholder, className, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      "select",
+      {
+        ref,
+        value,
+        onChange: (e) => onChange(e.target.value),
+        className: cx("select", className),
+        ...rest,
+        children: [
+          placeholder ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: "", disabled: true, children: placeholder }) : null,
+          options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+        ]
+      }
+    );
+  }
+);
+Select.displayName = "Select";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -1394,7 +1472,10 @@ function SidebarNavEntry({
   Modal,
   ModalOverlay,
   Pill,
+  Progress,
+  Select,
   SidebarNav,
+  Skeleton,
   ThemeProvider,
   ThemeToggleButton,
   ToastProvider,