@dreamtree-org/twreact-ui 1.2.1 → 1.3.0

package/dist/tokens/tokens.json

@@ -0,0 +1,373 @@
+{
+  "$description": "Dreamtree design tokens (W3C Design Tokens Community Group format, 2025.10). Source of truth for twreact-ui's CSS variables, the Tailwind 3 preset, the Tailwind 4 theme and DESIGN.md. Products override only a brand file in tokens/brands/. Dark values live in $extensions[\"org.dreamtree.dark\"].",
+  "color": {
+    "$type": "color",
+    "primary": {
+      "50": {
+        "$value": "#eff6ff"
+      },
+      "100": {
+        "$value": "#dbeafe"
+      },
+      "200": {
+        "$value": "#bfdbfe"
+      },
+      "300": {
+        "$value": "#93c5fd"
+      },
+      "400": {
+        "$value": "#60a5fa"
+      },
+      "500": {
+        "$value": "#3b82f6"
+      },
+      "600": {
+        "$value": "#2563eb"
+      },
+      "700": {
+        "$value": "#1d4ed8"
+      },
+      "800": {
+        "$value": "#1e40af"
+      },
+      "900": {
+        "$value": "#1e3a8a"
+      },
+      "950": {
+        "$value": "#172554"
+      },
+      "$description": "The one accent: primary actions, active navigation, current step, progress, links and the focus ring. Default is Tailwind blue, which twreact-ui has always shipped."
+    },
+    "secondary": {
+      "50": {
+        "$value": "#f8fafc"
+      },
+      "100": {
+        "$value": "#f1f5f9"
+      },
+      "200": {
+        "$value": "#e2e8f0"
+      },
+      "300": {
+        "$value": "#cbd5e1"
+      },
+      "400": {
+        "$value": "#94a3b8"
+      },
+      "500": {
+        "$value": "#64748b"
+      },
+      "600": {
+        "$value": "#475569"
+      },
+      "700": {
+        "$value": "#334155"
+      },
+      "800": {
+        "$value": "#1e293b"
+      },
+      "900": {
+        "$value": "#0f172a"
+      },
+      "950": {
+        "$value": "#020617"
+      },
+      "$description": "Neutral slate for secondary buttons, muted text and the default app shell."
+    },
+    "success": {
+      "50": {
+        "$value": "#f0fdf4"
+      },
+      "100": {
+        "$value": "#dcfce7"
+      },
+      "200": {
+        "$value": "#bbf7d0"
+      },
+      "300": {
+        "$value": "#86efac"
+      },
+      "400": {
+        "$value": "#4ade80"
+      },
+      "500": {
+        "$value": "#22c55e"
+      },
+      "600": {
+        "$value": "#16a34a"
+      },
+      "700": {
+        "$value": "#15803d"
+      },
+      "800": {
+        "$value": "#166534"
+      },
+      "900": {
+        "$value": "#14532d"
+      },
+      "950": {
+        "$value": "#052e16"
+      },
+      "$description": "Completed, filed, accepted, healthy. Badges use the 100 fill with 800 text."
+    },
+    "warning": {
+      "50": {
+        "$value": "#fffbeb"
+      },
+      "100": {
+        "$value": "#fef3c7"
+      },
+      "200": {
+        "$value": "#fde68a"
+      },
+      "300": {
+        "$value": "#fcd34d"
+      },
+      "400": {
+        "$value": "#fbbf24"
+      },
+      "500": {
+        "$value": "#f59e0b"
+      },
+      "600": {
+        "$value": "#d97706"
+      },
+      "700": {
+        "$value": "#b45309"
+      },
+      "800": {
+        "$value": "#92400e"
+      },
+      "900": {
+        "$value": "#78350f"
+      },
+      "950": {
+        "$value": "#451a03"
+      },
+      "$description": "Needs attention soon: at risk, pending, in review."
+    },
+    "error": {
+      "50": {
+        "$value": "#fef2f2"
+      },
+      "100": {
+        "$value": "#fee2e2"
+      },
+      "200": {
+        "$value": "#fecaca"
+      },
+      "300": {
+        "$value": "#fca5a5"
+      },
+      "400": {
+        "$value": "#f87171"
+      },
+      "500": {
+        "$value": "#ef4444"
+      },
+      "600": {
+        "$value": "#dc2626"
+      },
+      "700": {
+        "$value": "#b91c1c"
+      },
+      "800": {
+        "$value": "#991b1b"
+      },
+      "900": {
+        "$value": "#7f1d1d"
+      },
+      "950": {
+        "$value": "#450a0a"
+      },
+      "$description": "Errors, overdue and destructive actions only. Never decoration."
+    },
+    "info": {
+      "50": {
+        "$value": "#f0f9ff"
+      },
+      "100": {
+        "$value": "#e0f2fe"
+      },
+      "200": {
+        "$value": "#bae6fd"
+      },
+      "300": {
+        "$value": "#7dd3fc"
+      },
+      "400": {
+        "$value": "#38bdf8"
+      },
+      "500": {
+        "$value": "#0ea5e9"
+      },
+      "600": {
+        "$value": "#0284c7"
+      },
+      "700": {
+        "$value": "#0369a1"
+      },
+      "800": {
+        "$value": "#075985"
+      },
+      "900": {
+        "$value": "#0c4a6e"
+      },
+      "950": {
+        "$value": "#082f49"
+      },
+      "$description": "Informational and scheduled states that are not the brand accent."
+    },
+    "gray": {
+      "50": {
+        "$value": "#f9fafb"
+      },
+      "100": {
+        "$value": "#f3f4f6"
+      },
+      "200": {
+        "$value": "#e5e7eb"
+      },
+      "300": {
+        "$value": "#d1d5db"
+      },
+      "400": {
+        "$value": "#9ca3af"
+      },
+      "500": {
+        "$value": "#6b7280"
+      },
+      "600": {
+        "$value": "#4b5563"
+      },
+      "700": {
+        "$value": "#374151"
+      },
+      "800": {
+        "$value": "#1f2937"
+      },
+      "900": {
+        "$value": "#111827"
+      },
+      "950": {
+        "$value": "#030712"
+      },
+      "$description": "Borders, dividers and quiet fills. Matches Tailwind gray so existing twreact-ui classes keep their look."
+    }
+  },
+  "role": {
+    "$type": "color",
+    "$description": "Semantic surface and text roles. Screens use these (bg-surface, text-foreground, border-line) instead of picking palette steps.",
+    "background": {
+      "$value": "#f8fafc",
+      "$description": "Page background.",
+      "$extensions": {
+        "org.dreamtree.dark": "#0b1120"
+      }
+    },
+    "surface": {
+      "$value": "#ffffff",
+      "$description": "Cards, dialogs, menus.",
+      "$extensions": {
+        "org.dreamtree.dark": "#111827"
+      }
+    },
+    "foreground": {
+      "$value": "#0f172a",
+      "$description": "Body text and titles.",
+      "$extensions": {
+        "org.dreamtree.dark": "#e5e7eb"
+      }
+    },
+    "muted": {
+      "$value": "#475569",
+      "$description": "Subtitles, labels, captions (7.5:1 on white).",
+      "$extensions": {
+        "org.dreamtree.dark": "#94a3b8"
+      }
+    },
+    "line": {
+      "$value": "#e2e8f0",
+      "$description": "Card and divider borders.",
+      "$extensions": {
+        "org.dreamtree.dark": "#1f2937"
+      }
+    },
+    "shell": {
+      "$value": "#0f172a",
+      "$description": "App shell sidebar background.",
+      "$extensions": {
+        "org.dreamtree.dark": "#020617"
+      }
+    },
+    "shell-foreground": {
+      "$value": "#cbd5e1",
+      "$description": "Sidebar text.",
+      "$extensions": {
+        "org.dreamtree.dark": "#cbd5e1"
+      }
+    },
+    "shell-active": {
+      "$value": "#1e293b",
+      "$description": "Active sidebar item fill.",
+      "$extensions": {
+        "org.dreamtree.dark": "#1e293b"
+      }
+    }
+  },
+  "font": {
+    "family": {
+      "$type": "fontFamily",
+      "sans": {
+        "$value": [
+          "Inter",
+          "system-ui",
+          "-apple-system",
+          "Segoe UI",
+          "Roboto",
+          "Arial",
+          "sans-serif"
+        ]
+      },
+      "mono": {
+        "$value": [
+          "JetBrains Mono",
+          "ui-monospace",
+          "SFMono-Regular",
+          "Menlo",
+          "monospace"
+        ]
+      }
+    },
+    "size": {
+      "$type": "dimension",
+      "$description": "Type scale. micro replaces the 1,445 hand-written text-[10px]/text-[11px] found across products.",
+      "micro": {
+        "$value": {
+          "value": 0.6875,
+          "unit": "rem"
+        },
+        "$extensions": {
+          "org.dreamtree.lineHeight": "1rem"
+        }
+      }
+    }
+  },
+  "radius": {
+    "$type": "dimension",
+    "control": {
+      "$value": {
+        "value": 0.5,
+        "unit": "rem"
+      },
+      "$description": "Buttons, inputs, menus."
+    },
+    "card": {
+      "$value": {
+        "value": 0.75,
+        "unit": "rem"
+      },
+      "$description": "Cards and dialogs."
+    }
+  }
+}

package/dist/tokens/vars.css

@@ -0,0 +1,98 @@
+:root {
+  --dt-primary-50: 239 246 255;
+  --dt-primary-100: 219 234 254;
+  --dt-primary-200: 191 219 254;
+  --dt-primary-300: 147 197 253;
+  --dt-primary-400: 96 165 250;
+  --dt-primary-500: 59 130 246;
+  --dt-primary-600: 37 99 235;
+  --dt-primary-700: 29 78 216;
+  --dt-primary-800: 30 64 175;
+  --dt-primary-900: 30 58 138;
+  --dt-primary-950: 23 37 84;
+  --dt-secondary-50: 248 250 252;
+  --dt-secondary-100: 241 245 249;
+  --dt-secondary-200: 226 232 240;
+  --dt-secondary-300: 203 213 225;
+  --dt-secondary-400: 148 163 184;
+  --dt-secondary-500: 100 116 139;
+  --dt-secondary-600: 71 85 105;
+  --dt-secondary-700: 51 65 85;
+  --dt-secondary-800: 30 41 59;
+  --dt-secondary-900: 15 23 42;
+  --dt-secondary-950: 2 6 23;
+  --dt-success-50: 240 253 244;
+  --dt-success-100: 220 252 231;
+  --dt-success-200: 187 247 208;
+  --dt-success-300: 134 239 172;
+  --dt-success-400: 74 222 128;
+  --dt-success-500: 34 197 94;
+  --dt-success-600: 22 163 74;
+  --dt-success-700: 21 128 61;
+  --dt-success-800: 22 101 52;
+  --dt-success-900: 20 83 45;
+  --dt-success-950: 5 46 22;
+  --dt-warning-50: 255 251 235;
+  --dt-warning-100: 254 243 199;
+  --dt-warning-200: 253 230 138;
+  --dt-warning-300: 252 211 77;
+  --dt-warning-400: 251 191 36;
+  --dt-warning-500: 245 158 11;
+  --dt-warning-600: 217 119 6;
+  --dt-warning-700: 180 83 9;
+  --dt-warning-800: 146 64 14;
+  --dt-warning-900: 120 53 15;
+  --dt-warning-950: 69 26 3;
+  --dt-error-50: 254 242 242;
+  --dt-error-100: 254 226 226;
+  --dt-error-200: 254 202 202;
+  --dt-error-300: 252 165 165;
+  --dt-error-400: 248 113 113;
+  --dt-error-500: 239 68 68;
+  --dt-error-600: 220 38 38;
+  --dt-error-700: 185 28 28;
+  --dt-error-800: 153 27 27;
+  --dt-error-900: 127 29 29;
+  --dt-error-950: 69 10 10;
+  --dt-info-50: 240 249 255;
+  --dt-info-100: 224 242 254;
+  --dt-info-200: 186 230 253;
+  --dt-info-300: 125 211 252;
+  --dt-info-400: 56 189 248;
+  --dt-info-500: 14 165 233;
+  --dt-info-600: 2 132 199;
+  --dt-info-700: 3 105 161;
+  --dt-info-800: 7 89 133;
+  --dt-info-900: 12 74 110;
+  --dt-info-950: 8 47 73;
+  --dt-gray-50: 249 250 251;
+  --dt-gray-100: 243 244 246;
+  --dt-gray-200: 229 231 235;
+  --dt-gray-300: 209 213 219;
+  --dt-gray-400: 156 163 175;
+  --dt-gray-500: 107 114 128;
+  --dt-gray-600: 75 85 99;
+  --dt-gray-700: 55 65 81;
+  --dt-gray-800: 31 41 55;
+  --dt-gray-900: 17 24 39;
+  --dt-gray-950: 3 7 18;
+  --dt-background: 248 250 252;
+  --dt-surface: 255 255 255;
+  --dt-foreground: 15 23 42;
+  --dt-muted: 71 85 105;
+  --dt-line: 226 232 240;
+  --dt-shell: 15 23 42;
+  --dt-shell-foreground: 203 213 225;
+  --dt-shell-active: 30 41 59;
+}
+
+.dark, [data-theme="dark"] {
+  --dt-background: 11 17 32;
+  --dt-surface: 17 24 39;
+  --dt-foreground: 229 231 235;
+  --dt-muted: 148 163 184;
+  --dt-line: 31 41 55;
+  --dt-shell: 2 6 23;
+  --dt-shell-foreground: 203 213 225;
+  --dt-shell-active: 30 41 59;
+}

package/dist/types/blocks.d.ts

@@ -0,0 +1,109 @@
+import type { ElementType, ReactNode } from 'react';
+import type { BaseComponentProps } from './index';
+/** Semantic tone shared by StatCard and StatusPill. */
+export type Tone = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+export interface AppShellNavItem {
+    id: string;
+    label: string;
+    href?: string;
+    icon?: ReactNode;
+    active?: boolean;
+    /** Small count badge, e.g. pending approvals. Hidden when 0 or undefined. */
+    count?: number;
+    /** Optional group heading the item sits under. */
+    group?: string;
+    onClick?: () => void;
+}
+export interface AppShellProps extends BaseComponentProps {
+    /** Product mark shown at the top of the sidebar and in the mobile top bar. */
+    brand: ReactNode;
+    nav: AppShellNavItem[];
+    /** Pinned to the bottom of the sidebar (user menu, workspace switcher). */
+    sidebarFooter?: ReactNode;
+    /** Content for the right side of the top bar (search, notifications, avatar). */
+    topbar?: ReactNode;
+    /** Title shown in the mobile top bar. */
+    pageTitle?: string;
+    /** Element used for nav links, e.g. Next.js `Link`. Defaults to `a`. */
+    linkAs?: ElementType;
+    children?: ReactNode;
+}
+export interface PageHeaderProps extends BaseComponentProps {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    /** Buttons on the right. Keep one primary action per page. */
+    actions?: ReactNode;
+    /** Back link for detail pages. */
+    back?: {
+        href: string;
+        label: string;
+    };
+    linkAs?: ElementType;
+}
+export interface StatCardChange {
+    value: number;
+    /** e.g. "vs last week". */
+    period?: string;
+    unit?: '%' | '';
+    /** Whether an increase is good (green). Defaults to true. */
+    goodWhenUp?: boolean;
+}
+export interface StatCardProps extends BaseComponentProps {
+    label: ReactNode;
+    value: ReactNode;
+    icon?: ReactNode;
+    tone?: Tone;
+    change?: StatCardChange;
+    /** Shows a skeleton instead of the value. */
+    loading?: boolean;
+}
+export type StatusTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'muted';
+export interface StatusPillProps extends BaseComponentProps {
+    /** Look the status up in `map`. Unknown statuses render humanized ("in_review" → "In review"), never raw. */
+    status?: string;
+    map?: Record<string, {
+        label: string;
+        tone: StatusTone;
+        icon?: ReactNode;
+    }>;
+    /** Used when no `status`/`map` is given. Accepts a status tone or a semantic tone. */
+    tone?: StatusTone | Tone;
+    icon?: ReactNode;
+    children?: ReactNode;
+}
+export interface EmptyStateProps extends BaseComponentProps {
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    /** Primary or outlined button that resolves the empty state. */
+    action?: ReactNode;
+    compact?: boolean;
+}
+export interface ErrorStateProps extends BaseComponentProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    onRetry?: () => void;
+    retryLabel?: string;
+}
+export interface LoadingStateProps extends BaseComponentProps {
+    /** Shape of the skeleton; match the content that will replace it. */
+    variant?: 'table' | 'cards' | 'stats' | 'detail';
+    rows?: number;
+    /** Screen-reader text. */
+    label?: string;
+}
+export interface ConfirmDialogProps extends BaseComponentProps {
+    isOpen: boolean;
+    /** The action as a question: "Remove Kiran from Diwali buyers?" */
+    title: string;
+    /** One line saying what will happen. */
+    description?: ReactNode;
+    /** Named with the verb ("Remove"), never "OK". */
+    confirmLabel: string;
+    cancelLabel?: string;
+    destructive?: boolean;
+    loading?: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+//# sourceMappingURL=blocks.d.ts.map

package/dist/types/blocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../../src/types/blocks.ts"],"names":[],"mappings":"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"}

package/dist/types/index.d.ts

@@ -815,4 +815,5 @@ export interface EmitterConfig {
     resolve: (value?: any) => void;
     reject: (reason?: any) => void;
 }
+export * from './blocks';
 //# sourceMappingURL=index.d.ts.map