@craftzbay/ui 0.7.1 → 0.8.1

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/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