@craftzbay/ui 0.8.0 → 0.9.0

package/README.md

@@ -4,9 +4,9 @@ A refined-minimal Tailwind v4 + React design system. Production-grade
 primitives — Button through DataGrid — plus composed patterns
 (authentication, app shell, settings, etc.).
 
-- **Showcase:** [design.runestonetechnologies.com](https://design.runestonetechnologies.com)
-- **Components catalog:** [design.runestonetechnologies.com#catalog](https://design.runestonetechnologies.com#catalog)
-- **Docs:** [design.runestonetechnologies.com#docs](https://design.runestonetechnologies.com#docs)
+- **Showcase:** [components.runestonetechnologies.com](https://components.runestonetechnologies.com)
+- **Components:** [components.runestonetechnologies.com#components](https://components.runestonetechnologies.com#components)
+- **Templates:** [components.runestonetechnologies.com#templates](https://components.runestonetechnologies.com#templates)
 
 > **Aesthetic direction:** Linear / Vercel / Stripe Dashboard / Notion / Raycast.
 > Neutral-dominant, one accent, hairline borders, generous whitespace, fast quiet
@@ -31,12 +31,19 @@ Peer dependencies: `react@>=18`, `react-dom@>=18`.
 
 ## Local development
 
+This package lives in the [`craftzbay-ui`](https://github.com/craftzbay/craftzbay-ui)
+monorepo (`packages/ui`). The showcase site is a separate workspace
+(`apps/site`) that consumes this package's source directly. From the repo root:
+
 ```bash
 pnpm install
-pnpm dev           # Vite showcase at localhost:5173
-pnpm build:lib     # Build library → dist-lib/
+pnpm dev           # showcase site (apps/site) — edits to this package hot-reload
+pnpm build:lib     # build this library → packages/ui/dist-lib/
 ```
 
+Inside `packages/ui` itself, `pnpm build` produces the distributable bundle and
+`pnpm test` runs the component tests.
+
 ## Tech stack
 
 - **Tailwind CSS v4** — tokens defined in `@theme` in `src/styles/globals.css`
@@ -128,16 +135,14 @@ docs/
 ### Typography
 - [Kbd](./src/components/ui/Kbd.tsx) — keyboard shortcut indicator
 
-## Patterns (composed layouts)
+## Blocks (page templates)
 
-- [Authentication](./src/components/patterns/Authentication.tsx) — sign-in, sign-up, forgot, magic-link
-- [AppShell + Dashboard](./src/components/patterns/AppShell.tsx) — sidebar + topnav shell, 4 stat cards + chart + activity table
-- [Settings](./src/components/patterns/Settings.tsx) — sub-nav + 5 sections
-- [DataTablePage](./src/components/patterns/DataTablePage.tsx) — filter / search / bulk actions / pagination
-- [RecordDetail](./src/components/patterns/RecordDetail.tsx) — header + tabs + side panel
-- [Onboarding](./src/components/patterns/Onboarding.tsx) — 4-step stepper flow
-- [Pricing](./src/components/patterns/Pricing.tsx) — 3-tier comparison
-- [FirstRunEmpty](./src/components/patterns/FirstRunEmpty.tsx) — hero + 3 next-step cards
+Whole-page compositions — dashboard, settings, auth, pricing, data table,
+record detail, onboarding, first-run — are **not** shipped as importable
+components. They live in the showcase as copy-paste **blocks**: complete pages
+assembled from the primitives above, with the full source on the page. Read it,
+copy it, adapt it — no opaque `<Dashboard />` import. Browse them under
+**Templates** in the [showcase](https://components.runestonetechnologies.com/#templates).
 
 ## Documentation
 
@@ -154,4 +159,4 @@ docs/
 3. Every interactive element ships with: default, hover, focus-visible, active,
    disabled, loading, and (where applicable) error / success states.
 4. Forward refs correctly; set `displayName`.
-5. Run `pnpm typecheck && pnpm lint` before opening a PR.
+5. Run `pnpm typecheck && pnpm test` before opening a PR.

package/dist-lib/components/ui/Chart.d.ts

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
 /**
- * Tiny, dependency-free chart primitives for inline dashboards. For complex
- * visualisations reach for a charting library (Recharts, visx). These suffice
- * for sparklines, KPI cards, and at-a-glance trends.
+ * Tiny, dependency-free chart primitives for inline dashboards — sparklines,
+ * KPI cards, at-a-glance trends. For heavy interactive visualisations reach for
+ * a charting library. These render as responsive SVG (the line/area stretch to
+ * the container width; strokes stay crisp via non-scaling-stroke).
  */
 export interface ChartPoint {
     x: string | number;
@@ -10,14 +11,16 @@ export interface ChartPoint {
 }
 export interface ChartProps {
     data: ChartPoint[];
-    /** Defaults to 24px height per point + 60px padding. */
+    /** Drawing height in px. */
     height?: number;
     /** Defaults to fluid 100%. */
     width?: number | string;
     /** Tooltip / label rendered above the chart. */
     caption?: ReactNode;
+    /** Faint horizontal gridlines. Default true. */
+    grid?: boolean;
     className?: string;
 }
-export declare function LineChart({ data, height, width, caption, className }: ChartProps): import("react/jsx-runtime").JSX.Element;
-export declare function AreaChart({ data, height, width, caption, className }: ChartProps): import("react/jsx-runtime").JSX.Element;
-export declare function BarChart({ data, height, width, caption, className }: ChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function LineChart({ data, height, width, caption, grid, className }: ChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function AreaChart(props: ChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function BarChart({ data, height, width, caption, grid, className }: ChartProps): import("react/jsx-runtime").JSX.Element;

package/dist-lib/components/ui/DesignSystemProvider.d.ts

@@ -5,15 +5,12 @@ import { HTMLAttributes, ReactNode } from 'react';
  * design system default.
  *
  * @example
- *   <DesignSystemProvider tokens={{ 'color-accent': '#ff5555', 'radius-md': '10px' }}>
+ *   <DesignSystemProvider tokens={{ accent: '#ff5555', 'radius-md': '10px' }}>
  *     <App />
  *   </DesignSystemProvider>
  *
- * @example Multiple brands in one app
- *   <DesignSystemProvider tokens={edgelogBrand}>
- *     <Card>...</Card>
- *   </DesignSystemProvider>
- *   <DesignSystemProvider tokens={geregeBrand}>
+ * @example Swap in one of the built-in accent presets
+ *   <DesignSystemProvider tokens={brandPresets.violet}>
  *     <Card>...</Card>
  *   </DesignSystemProvider>
  */
@@ -26,35 +23,64 @@ export interface DesignSystemProviderProps extends HTMLAttributes<HTMLDivElement
 }
 export declare function DesignSystemProvider({ tokens, className, children, style, ...props }: DesignSystemProviderProps): import("react/jsx-runtime").JSX.Element;
 /**
- * Built-in brand presets — drop-in starters showing how a token override
- * map is shaped. Consumers can fork or replace any value.
+ * Built-in accent presets — swap the system's single accent colour without
+ * touching anything else.
+ *
+ * These override the *semantic* tokens the utilities resolve to. globals.css
+ * maps the accent utilities with `@theme inline` (e.g. `bg-accent` →
+ * `var(--accent)`, `bg-accent-soft` → `var(--accent-subtle)`), so the override
+ * must target `--accent` / `--accent-subtle` / `--accent-subtle-foreground` /
+ * `--ring` — NOT `--color-accent` (which `inline` never emits). The hover/
+ * active steps (`--color-accent-700/800`) come from the raw palette and are
+ * overridden directly. `default` is the built-in graphite-indigo.
  */
 export declare const brandPresets: {
+    /** The library default — graphite indigo. */
     readonly default: BrandTokens;
-    /** Cool indigo accent, slightly rounder corners. */
-    readonly edgelog: {
-        readonly 'color-accent': "oklch(0.55 0.18 250)";
-        readonly 'color-accent-700': "oklch(0.46 0.16 250)";
-        readonly 'color-accent-800': "oklch(0.38 0.14 250)";
-        readonly 'color-accent-soft': "oklch(0.95 0.04 250)";
-        readonly 'radius-md': "8px";
-        readonly 'radius-lg': "12px";
+    /** Blue. */
+    readonly blue: {
+        readonly accent: "oklch(0.55 0.16 250)";
+        readonly 'color-accent-700': "oklch(0.47 0.16 250)";
+        readonly 'color-accent-800': "oklch(0.39 0.14 250)";
+        readonly 'accent-subtle': "oklch(0.95 0.04 250)";
+        readonly 'accent-subtle-foreground': "oklch(0.45 0.15 250)";
+        readonly ring: "oklch(0.62 0.16 250)";
+    };
+    /** Violet. */
+    readonly violet: {
+        readonly accent: "oklch(0.53 0.20 295)";
+        readonly 'color-accent-700': "oklch(0.45 0.18 295)";
+        readonly 'color-accent-800': "oklch(0.38 0.16 295)";
+        readonly 'accent-subtle': "oklch(0.95 0.04 295)";
+        readonly 'accent-subtle-foreground': "oklch(0.45 0.18 295)";
+        readonly ring: "oklch(0.60 0.20 295)";
+    };
+    /** Emerald. */
+    readonly emerald: {
+        readonly accent: "oklch(0.55 0.13 160)";
+        readonly 'color-accent-700': "oklch(0.47 0.13 160)";
+        readonly 'color-accent-800': "oklch(0.39 0.12 160)";
+        readonly 'accent-subtle': "oklch(0.95 0.04 160)";
+        readonly 'accent-subtle-foreground': "oklch(0.42 0.12 160)";
+        readonly ring: "oklch(0.60 0.13 160)";
     };
-    /** Warm copper accent, tighter geometry. */
-    readonly gerege: {
-        readonly 'color-accent': "oklch(0.62 0.16 45)";
-        readonly 'color-accent-700': "oklch(0.54 0.16 45)";
-        readonly 'color-accent-800': "oklch(0.46 0.14 45)";
-        readonly 'color-accent-soft': "oklch(0.95 0.04 45)";
-        readonly 'radius-md': "4px";
-        readonly 'radius-lg': "6px";
+    /** Rose. */
+    readonly rose: {
+        readonly accent: "oklch(0.57 0.19 12)";
+        readonly 'color-accent-700': "oklch(0.49 0.18 12)";
+        readonly 'color-accent-800': "oklch(0.41 0.16 12)";
+        readonly 'accent-subtle': "oklch(0.95 0.035 12)";
+        readonly 'accent-subtle-foreground': "oklch(0.48 0.18 12)";
+        readonly ring: "oklch(0.62 0.19 12)";
     };
-    /** Forest green accent. */
-    readonly forest: {
-        readonly 'color-accent': "oklch(0.55 0.14 155)";
-        readonly 'color-accent-700': "oklch(0.47 0.14 155)";
-        readonly 'color-accent-800': "oklch(0.39 0.12 155)";
-        readonly 'color-accent-soft': "oklch(0.95 0.04 155)";
+    /** Amber. */
+    readonly amber: {
+        readonly accent: "oklch(0.62 0.14 65)";
+        readonly 'color-accent-700': "oklch(0.54 0.13 65)";
+        readonly 'color-accent-800': "oklch(0.46 0.12 65)";
+        readonly 'accent-subtle': "oklch(0.95 0.05 75)";
+        readonly 'accent-subtle-foreground': "oklch(0.48 0.12 65)";
+        readonly ring: "oklch(0.66 0.14 65)";
     };
 };
 export type BrandName = keyof typeof brandPresets;

package/dist-lib/components/ui/Icon.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { default as dynamicIconImports } from 'lucide-react/dynamicIconImports';
+import { LucideProps } from 'lucide-react';
+/** Every lucide icon name, kebab-case — e.g. `calendar`, `chevrons-up-down`. */
+export type IconName = keyof typeof dynamicIconImports;
+/** All available icon names (useful for pickers and docs). */
+export declare const iconNames: IconName[];
+export interface IconProps extends Omit<LucideProps, 'ref'> {
+    /** Lucide icon name in kebab-case, e.g. `name="calendar"`. Autocompletes. */
+    name: IconName;
+    /**
+     * Shown while the icon chunk loads (first use only — icons are cached).
+     * Defaults to an invisible square so layout doesn't shift.
+     */
+    fallback?: ReactNode;
+}
+/**
+ * Name-addressed lucide icon. Use when the icon is dynamic (data-driven
+ * nav items, user-configurable dashboards) or when importing components for
+ * every icon is friction.
+ *
+ * Each icon is code-split and loaded on first use, so referencing the full
+ * lucide set costs nothing up front — `<Icon name="rocket" />` ships only
+ * the rocket.
+ *
+ * @example
+ *   <Icon name="calendar" className="size-4" />
+ *   <Icon name="chevrons-up-down" size={16} strokeWidth={1.5} />
+ *
+ * @do Use `size-4` (16px) inline with text, `size-5` (20px) inside buttons.
+ * @dont Reach for this in hot lists with hundreds of distinct icons on first
+ *       paint — statically imported icons from `Icons` skip the lazy hop.
+ */
+export declare function Icon({ name, fallback, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist-lib/components/ui/Toast.d.ts

@@ -13,6 +13,26 @@ export declare const ToastTitle: import('react').ForwardRefExoticComponent<Omit<
 export declare const ToastDescription: import('react').ForwardRefExoticComponent<Omit<ToastPrimitive.ToastDescriptionProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export declare const ToastAction: import('react').ForwardRefExoticComponent<Omit<ToastPrimitive.ToastActionProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 export declare const ToastClose: import('react').ForwardRefExoticComponent<Omit<ToastPrimitive.ToastCloseProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * Drop-in host that connects the `useToast()` queue to the Radix primitives.
+ * Mount it once near your app root — then `useToast().push({...})` (or the
+ * standalone `toast()`) from anywhere renders here. Self-contained: it brings
+ * its own ToastProvider + Viewport, so no other Toast wiring is needed.
+ *
+ * @example
+ *   function App() {
+ *     return (
+ *       <>
+ *         <Routes />
+ *         <Toaster />
+ *       </>
+ *     );
+ *   }
+ */
+export declare function Toaster(): import("react/jsx-runtime").JSX.Element;
+export declare namespace Toaster {
+    var displayName: string;
+}
 export {};
 /**
  * @example

package/dist-lib/icons/index.d.ts

@@ -1,11 +1,88 @@
 /**
- * Curated re-exports from `lucide-react`. Components should import icons from
- * here, never directly from `lucide-react`, so the design system can swap
+ * Curated re-exports from lucide-react. Components should import icons from
+ * here, never directly from 'lucide-react', so the design system can swap
  * icon sets later if needed and so unused icons stay tree-shakable.
  *
+ * Icons are imported via their per-module paths (not the package barrel) on
+ * purpose: <Icon name="…"> lazy-loads arbitrary icons through
+ * lucide-react/dynamicIconImports, and if the barrel were in the static module
+ * graph, Rollup would co-locate every dynamically imported icon into the
+ * barrel's chunk — inlining the entire icon set instead of code-splitting it.
+ * (Type-only imports from 'lucide-react' are fine — they erase at build time.)
+ *
  * Defaults applied at the call site:
  *   - 16px for inline-with-text usage
  *   - 20px for use inside buttons
  *   - strokeWidth 1.5
  */
-export { AlertCircle, AlertTriangle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpDown, AtSign, BarChart3, Bell, Bookmark, Calendar, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsUpDown, Circle, Copy, CornerDownLeft, CreditCard, Download, Edit2, Ellipsis, Eye, EyeOff, Filter, Folder, GripVertical, Home, Inbox, LayoutGrid, Lock, LogOut, HelpCircle, Info, Link2, Loader2, Mail, Menu, Minus, MoreHorizontal, Package, Plug, Plus, Search, Sparkles, Settings, Sun, Moon, Trash2, Upload, User, Users, X, XCircle, ExternalLink, type LucideIcon, type LucideProps, } from 'lucide-react';
+export { default as AlertCircle } from 'lucide-react/dist/esm/icons/alert-circle.js';
+export { default as AlertTriangle } from 'lucide-react/dist/esm/icons/alert-triangle.js';
+export { default as ArrowDown } from 'lucide-react/dist/esm/icons/arrow-down.js';
+export { default as ArrowLeft } from 'lucide-react/dist/esm/icons/arrow-left.js';
+export { default as ArrowRight } from 'lucide-react/dist/esm/icons/arrow-right.js';
+export { default as ArrowUp } from 'lucide-react/dist/esm/icons/arrow-up.js';
+export { default as ArrowUpDown } from 'lucide-react/dist/esm/icons/arrow-up-down.js';
+export { default as AtSign } from 'lucide-react/dist/esm/icons/at-sign.js';
+export { default as BarChart3 } from 'lucide-react/dist/esm/icons/bar-chart-3.js';
+export { default as Bell } from 'lucide-react/dist/esm/icons/bell.js';
+export { default as Bookmark } from 'lucide-react/dist/esm/icons/bookmark.js';
+export { default as Calendar } from 'lucide-react/dist/esm/icons/calendar.js';
+export { default as Check } from 'lucide-react/dist/esm/icons/check.js';
+export { default as CheckCircle2 } from 'lucide-react/dist/esm/icons/check-circle-2.js';
+export { default as ChevronDown } from 'lucide-react/dist/esm/icons/chevron-down.js';
+export { default as ChevronLeft } from 'lucide-react/dist/esm/icons/chevron-left.js';
+export { default as ChevronRight } from 'lucide-react/dist/esm/icons/chevron-right.js';
+export { default as ChevronUp } from 'lucide-react/dist/esm/icons/chevron-up.js';
+export { default as ChevronsLeft } from 'lucide-react/dist/esm/icons/chevrons-left.js';
+export { default as ChevronsRight } from 'lucide-react/dist/esm/icons/chevrons-right.js';
+export { default as ChevronsUpDown } from 'lucide-react/dist/esm/icons/chevrons-up-down.js';
+export { default as Circle } from 'lucide-react/dist/esm/icons/circle.js';
+export { default as Copy } from 'lucide-react/dist/esm/icons/copy.js';
+export { default as CornerDownLeft } from 'lucide-react/dist/esm/icons/corner-down-left.js';
+export { default as CreditCard } from 'lucide-react/dist/esm/icons/credit-card.js';
+export { default as Download } from 'lucide-react/dist/esm/icons/download.js';
+export { default as Edit2 } from 'lucide-react/dist/esm/icons/edit-2.js';
+export { default as Ellipsis } from 'lucide-react/dist/esm/icons/ellipsis.js';
+export { default as ExternalLink } from 'lucide-react/dist/esm/icons/external-link.js';
+export { default as Eye } from 'lucide-react/dist/esm/icons/eye.js';
+export { default as EyeOff } from 'lucide-react/dist/esm/icons/eye-off.js';
+export { default as File } from 'lucide-react/dist/esm/icons/file.js';
+export { default as FileText } from 'lucide-react/dist/esm/icons/file-text.js';
+export { default as Filter } from 'lucide-react/dist/esm/icons/filter.js';
+export { default as Folder } from 'lucide-react/dist/esm/icons/folder.js';
+export { default as FolderOpen } from 'lucide-react/dist/esm/icons/folder-open.js';
+export { default as Github } from 'lucide-react/dist/esm/icons/github.js';
+export { default as GripVertical } from 'lucide-react/dist/esm/icons/grip-vertical.js';
+export { default as Heart } from 'lucide-react/dist/esm/icons/heart.js';
+export { default as HelpCircle } from 'lucide-react/dist/esm/icons/help-circle.js';
+export { default as Home } from 'lucide-react/dist/esm/icons/home.js';
+export { default as Inbox } from 'lucide-react/dist/esm/icons/inbox.js';
+export { default as Info } from 'lucide-react/dist/esm/icons/info.js';
+export { default as LayoutGrid } from 'lucide-react/dist/esm/icons/layout-grid.js';
+export { default as Link2 } from 'lucide-react/dist/esm/icons/link-2.js';
+export { default as Loader2 } from 'lucide-react/dist/esm/icons/loader-2.js';
+export { default as Lock } from 'lucide-react/dist/esm/icons/lock.js';
+export { default as LogOut } from 'lucide-react/dist/esm/icons/log-out.js';
+export { default as Mail } from 'lucide-react/dist/esm/icons/mail.js';
+export { default as Menu } from 'lucide-react/dist/esm/icons/menu.js';
+export { default as Minus } from 'lucide-react/dist/esm/icons/minus.js';
+export { default as Moon } from 'lucide-react/dist/esm/icons/moon.js';
+export { default as MoreHorizontal } from 'lucide-react/dist/esm/icons/more-horizontal.js';
+export { default as Package } from 'lucide-react/dist/esm/icons/package.js';
+export { default as Pencil } from 'lucide-react/dist/esm/icons/pencil.js';
+export { default as Plug } from 'lucide-react/dist/esm/icons/plug.js';
+export { default as Plus } from 'lucide-react/dist/esm/icons/plus.js';
+export { default as Search } from 'lucide-react/dist/esm/icons/search.js';
+export { default as Settings } from 'lucide-react/dist/esm/icons/settings.js';
+export { default as ShoppingCart } from 'lucide-react/dist/esm/icons/shopping-cart.js';
+export { default as Sparkles } from 'lucide-react/dist/esm/icons/sparkles.js';
+export { default as Star } from 'lucide-react/dist/esm/icons/star.js';
+export { default as Sun } from 'lucide-react/dist/esm/icons/sun.js';
+export { default as Trash2 } from 'lucide-react/dist/esm/icons/trash-2.js';
+export { default as Upload } from 'lucide-react/dist/esm/icons/upload.js';
+export { default as User } from 'lucide-react/dist/esm/icons/user.js';
+export { default as Users } from 'lucide-react/dist/esm/icons/users.js';
+export { default as X } from 'lucide-react/dist/esm/icons/x.js';
+export { default as XCircle } from 'lucide-react/dist/esm/icons/x-circle.js';
+export { default as Zap } from 'lucide-react/dist/esm/icons/zap.js';
+export type { LucideIcon, LucideProps } from 'lucide-react';