@prototyperco/ui 0.5.0-alpha.0

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@prototyperco/ui",
+  "version": "0.5.0-alpha.0",
+  "description": "Composable, design-first React component library built on Base UI primitives",
+  "license": "MIT",
+  "author": "Protochase, Inc.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wavyrai/prototyper-ui.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://prototyper.ai",
+  "bugs": {
+    "url": "https://github.com/wavyrai/prototyper-ui/issues"
+  },
+  "keywords": [
+    "prototyper-ui",
+    "react",
+    "components",
+    "ui",
+    "base-ui",
+    "design-system"
+  ],
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./tokens.css": "./src/prototyper-tokens.css",
+    "./components/*": "./src/components/*"
+  },
+  "files": [
+    "dist",
+    "src/prototyper-tokens.css",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.511.0",
+    "react-resizable-panels": "^4.7.2",
+    "tailwind-merge": "^3.3.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.1.1",
+    "@prototyperco/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "lint": "eslint src/",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}

package/src/prototyper-tokens.css

@@ -0,0 +1,535 @@
+/* ========== PROTOTYPER UI TOKENS START ========== */
+
+/* ============================================
+   TAILWIND THEME REGISTRATION
+   All tokens registered here generate utilities:
+   --color-* → bg-*, text-*, border-*
+   --shadow-* → shadow-*
+   --ease-* → ease-*
+   --radius-* → rounded-*
+   --animate-* → animate-*
+   ============================================ */
+
+@theme {
+  /* --- Font families --- */
+  --font-sans: var(--font-geist-sans);
+  --font-heading: var(--font-overpass);
+  --font-mono: var(--font-geist-mono);
+  --font-pixel: var(--font-geist-pixel-square);
+
+  /* --- Radius scale --- */
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  /* --- Base colors --- */
+  --color-background: oklch(var(--background));
+  --color-foreground: oklch(var(--foreground));
+  --color-border: oklch(var(--border));
+  --color-border-light: oklch(var(--border-light));
+  --color-border-dark: oklch(var(--border-dark));
+  --color-input: oklch(var(--input));
+  --color-ring: oklch(var(--ring));
+
+  /* --- Primary --- */
+  --color-primary: oklch(var(--primary));
+  --color-primary-foreground: oklch(var(--primary-foreground));
+  --color-primary-light: oklch(var(--primary-light));
+  --color-primary-middle: oklch(var(--primary-middle));
+  --color-primary-dark: oklch(var(--primary-dark));
+
+  /* --- Secondary --- */
+  --color-secondary: oklch(var(--secondary));
+  --color-secondary-foreground: oklch(var(--secondary-foreground));
+
+  /* --- Muted --- */
+  --color-muted: oklch(var(--muted));
+  --color-muted-foreground: oklch(var(--muted-foreground));
+
+  /* --- Accent --- */
+  --color-accent: oklch(var(--accent));
+  --color-accent-foreground: oklch(var(--accent-foreground));
+
+  /* --- Destructive --- */
+  --color-destructive: oklch(var(--destructive));
+  --color-destructive-foreground: oklch(var(--destructive-foreground));
+
+  /* --- Status --- */
+  --color-success: oklch(var(--success));
+  --color-success-foreground: oklch(var(--success-foreground));
+  --color-warning: oklch(var(--warning));
+  --color-warning-foreground: oklch(var(--warning-foreground));
+  --color-info: oklch(var(--info));
+  --color-info-foreground: oklch(var(--info-foreground));
+
+  /* --- Surfaces --- */
+  --color-popover: oklch(var(--popover));
+  --color-popover-foreground: oklch(var(--popover-foreground));
+  --color-card: oklch(var(--card));
+  --color-card-foreground: oklch(var(--card-foreground));
+  --color-surface: oklch(var(--surface));
+  --color-surface-foreground: oklch(var(--surface-foreground));
+  --color-surface-secondary: var(--surface-secondary);
+  --color-surface-tertiary: var(--surface-tertiary);
+  --color-overlay: oklch(var(--overlay));
+  --color-overlay-foreground: oklch(var(--overlay-foreground));
+  --color-machine-bg: oklch(var(--machine-bg));
+  --color-machine-panel: oklch(var(--machine-panel));
+  --color-machine-panel-raised: oklch(var(--machine-panel-raised));
+  --color-machine-fg: oklch(var(--machine-fg));
+  --color-machine-fg-muted: oklch(var(--machine-fg-muted));
+  --color-machine-fg-subtle: oklch(var(--machine-fg-subtle));
+  --color-machine-border: oklch(var(--machine-border));
+  --color-machine-rule: oklch(var(--machine-rule));
+  --color-machine-inverse: oklch(var(--machine-inverse));
+  --color-machine-inverse-fg: oklch(var(--machine-inverse-fg));
+
+  /* --- Field --- */
+  --color-field-background: oklch(var(--field-background));
+  --color-field-border: var(--field-border);
+  --color-field-border-hover: var(--field-border-hover);
+  --color-field-border-focus: var(--field-border-focus);
+  --color-field-border-invalid: var(--field-border-invalid);
+
+  /* --- Derived interaction colors (auto-adapt in dark mode) --- */
+  --color-primary-hover: var(--primary-hover);
+  --color-destructive-hover: var(--destructive-hover);
+  --color-success-hover: var(--success-hover);
+  --color-warning-hover: var(--warning-hover);
+  --color-accent-hover: var(--accent-hover);
+  --color-primary-soft: var(--primary-soft);
+  --color-primary-soft-hover: var(--primary-soft-hover);
+  --color-destructive-soft: var(--destructive-soft);
+  --color-destructive-soft-hover: var(--destructive-soft-hover);
+
+  /* --- Shadows (3 semantic tiers, mode-adaptive via .dark override) --- */
+  --shadow-surface:
+    0 2px 4px 0 oklch(0% 0 0 / 0.04), 0 1px 2px 0 oklch(0% 0 0 / 0.06),
+    0 0 0 1px oklch(0% 0 0 / 0.04);
+  --shadow-field:
+    0 1px 2px 0 oklch(0% 0 0 / 0.05), 0 0 0 1px oklch(0% 0 0 / 0.04);
+  --shadow-overlay:
+    0 8px 30px oklch(0% 0 0 / 0.12), 0 2px 8px oklch(0% 0 0 / 0.06),
+    0 0 0 1px oklch(0% 0 0 / 0.06);
+  --shadow-tooltip:
+    0 2px 8px oklch(0% 0 0 / 0.12), 0 1px 3px oklch(0% 0 0 / 0.08);
+  --shadow-inset-track:
+    inset 0 1px 2px oklch(0% 0 0 / 0.06), inset 0 0 0 1px oklch(0% 0 0 / 0.04);
+
+  /* --- Easing scale --- */
+  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+  --ease-out-fluid: cubic-bezier(0.32, 0.72, 0, 1);
+  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+
+  /* --- Keyframe animations --- */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-progress-indeterminate: progress-indeterminate 1.8s ease-in-out
+    infinite;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+    from {
+      height: var(--accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+  @keyframes progress-indeterminate {
+    0% {
+      transform: translateX(-100%) scaleX(0.4);
+    }
+    50% {
+      transform: translateX(30%) scaleX(0.6);
+    }
+    100% {
+      transform: translateX(200%) scaleX(0.4);
+    }
+  }
+}
+
+/* ============================================
+   COLOR TOKENS — Light Mode (OKLCH)
+   ============================================ */
+
+:root {
+  /* Font overrides — must be outside @theme to beat Tailwind's unlayered defaults */
+  --font-sans: var(--font-geist-sans);
+  --font-heading: var(--font-overpass);
+
+  /* Base */
+  --background: 100% 0 0;
+  --foreground: 14.05% 0.004 285.8;
+  --radius: 0.5rem;
+
+  /* Cards & Popovers */
+  --card: 98.48% 0 0;
+  --card-foreground: 14.05% 0.004 285.8;
+  --popover: 100% 0 0;
+  --popover-foreground: 14.05% 0.004 285.8;
+
+  /* Primary ramp — metallic zinc */
+  --primary: 44% 0.017 286;
+  --primary-light: 87% 0.006 286;
+  --primary-middle: 55% 0.016 286;
+  --primary-dark: 37% 0.016 286;
+  --primary-foreground: 100% 0 0;
+
+  /* Secondary */
+  --secondary: 97% 0.003 265;
+  --secondary-foreground: 21% 0.006 286;
+
+  /* Muted */
+  --muted: 96.76% 0 0;
+  --muted-foreground: 55.19% 0.014 285.9;
+
+  /* Accent */
+  --accent: 96.76% 0 0;
+  --accent-foreground: 21.03% 0.006 285.9;
+
+  /* Destructive */
+  --destructive: 63.68% 0.208 25.3;
+  --destructive-foreground: 98.43% 0 0;
+
+  /* Status */
+  --success: 72.05% 0.192 149.5;
+  --success-foreground: 100% 0 0;
+  --warning: 76.97% 0.165 70.6;
+  --warning-foreground: 0% 0 0;
+  --info: 62.61% 0.186 259.6;
+  --info-foreground: 100% 0 0;
+
+  /* Borders & Input */
+  --border: 91.97% 0.004 286.3;
+  --border-light: 96.01% 0 0;
+  --border-dark: 79.59% 0.011 286.2;
+  --input: 91.97% 0.004 286.3;
+  --ring: 44% 0.017 286;
+
+  /* Surfaces */
+  --surface: 98.48% 0 0;
+  --surface-foreground: 14.05% 0.004 285.8;
+  --surface-secondary: color-mix(
+    in oklab,
+    oklch(var(--surface)) 94%,
+    oklch(var(--surface-foreground)) 6%
+  );
+  --surface-tertiary: color-mix(
+    in oklab,
+    oklch(var(--surface)) 88%,
+    oklch(var(--surface-foreground)) 12%
+  );
+  --overlay: 100% 0 0;
+  --overlay-foreground: 14.05% 0.004 285.8;
+
+  /* Field */
+  --field-background: 100% 0 0;
+  --field-border: oklch(0% 0 0 / 0.12);
+  --field-border-hover: oklch(0% 0 0 / 0.22);
+  --field-border-focus: oklch(0% 0 0 / 0.35);
+  --field-border-invalid: oklch(var(--destructive));
+  --machine-bg: 2.8% 0 0;
+  --machine-panel: 4.4% 0 0;
+  --machine-panel-raised: 7.2% 0 0;
+  --machine-fg: 98% 0 0;
+  --machine-fg-muted: 88% 0 0;
+  --machine-fg-subtle: 72% 0 0;
+  --machine-border: 100% 0 0 / 0.22;
+  --machine-rule: 100% 0 0 / 0.3;
+  --machine-inverse: 96% 0 0;
+  --machine-inverse-fg: 8% 0 0;
+  --machine-font-size-base: 0.95rem;
+  --machine-line-height-base: 1.7;
+  --machine-heading-weight: 640;
+  --machine-code-size: 0.84rem;
+  --machine-content-max: 76ch;
+  --machine-section-gap: 2.5rem;
+  --machine-block-gap: 1rem;
+  --machine-rail-offset: clamp(0.9rem, 2vw, 1.45rem);
+
+  /* Derived: semantic hover (90% base + 10% paired foreground) */
+  --primary-hover: color-mix(
+    in oklab,
+    oklch(var(--primary)) 90%,
+    oklch(var(--primary-foreground)) 10%
+  );
+  --destructive-hover: color-mix(
+    in oklab,
+    oklch(var(--destructive)) 90%,
+    oklch(var(--destructive-foreground)) 10%
+  );
+  --success-hover: color-mix(
+    in oklab,
+    oklch(var(--success)) 90%,
+    oklch(var(--success-foreground)) 10%
+  );
+  --warning-hover: color-mix(
+    in oklab,
+    oklch(var(--warning)) 90%,
+    oklch(var(--warning-foreground)) 10%
+  );
+
+  /* Derived: neutral hover (92% base + 8% paired foreground) */
+  --accent-hover: color-mix(
+    in oklab,
+    oklch(var(--accent)) 92%,
+    oklch(var(--accent-foreground)) 8%
+  );
+
+  /* Derived: soft variants (color on transparent) */
+  --primary-soft: color-mix(in oklab, oklch(var(--primary)) 15%, transparent);
+  --primary-soft-hover: color-mix(
+    in oklab,
+    oklch(var(--primary)) 20%,
+    transparent
+  );
+  --destructive-soft: color-mix(
+    in oklab,
+    oklch(var(--destructive)) 15%,
+    transparent
+  );
+  --destructive-soft-hover: color-mix(
+    in oklab,
+    oklch(var(--destructive)) 20%,
+    transparent
+  );
+}
+
+/* ============================================
+   COLOR TOKENS — Dark Mode (OKLCH)
+   ============================================ */
+
+.dark {
+  /* Base */
+  --background: 14.05% 0.004 285.8;
+  --foreground: 98.48% 0 0;
+
+  /* Cards & Popovers */
+  --card: 16.3% 0.006 285.7;
+  --card-foreground: 98.48% 0 0;
+  --popover: 14.05% 0.004 285.8;
+  --popover-foreground: 98.48% 0 0;
+
+  /* Primary ramp — metallic zinc (brighter for dark bg) */
+  --primary: 55% 0.016 286;
+  --primary-light: 87% 0.006 286;
+  --primary-middle: 71% 0.015 286;
+  --primary-dark: 44% 0.017 286;
+  --primary-foreground: 100% 0 0;
+
+  /* Secondary */
+  --secondary: 27% 0.006 286;
+  --secondary-foreground: 97% 0.003 265;
+
+  /* Muted */
+  --muted: 27.41% 0.006 286;
+  --muted-foreground: 71.19% 0.013 286.1;
+
+  /* Accent */
+  --accent: 27.41% 0.006 286;
+  --accent-foreground: 98.48% 0 0;
+
+  /* Destructive */
+  --destructive: 58% 0.16 25.7;
+  --destructive-foreground: 98.43% 0 0;
+
+  /* Status */
+  --success: 79.99% 0.182 151.8;
+  --success-foreground: 38.98% 0.089 152.7;
+  --warning: 86.11% 0.173 92;
+  --warning-foreground: 42.36% 0.091 56.8;
+  --info: 62.61% 0.186 259.6;
+  --info-foreground: 38.14% 0.136 265.3;
+
+  /* Borders & Input */
+  --border: 31.51% 0.007 286;
+  --border-light: 37.27% 0.008 286;
+  --border-dark: 23.37% 0.004 286.1;
+  --input: 27.41% 0.006 286;
+  --ring: 55% 0.016 286;
+
+  /* Surfaces */
+  --surface: 16.3% 0.006 285.7;
+  --surface-foreground: 98.48% 0 0;
+  --surface-secondary: color-mix(
+    in oklab,
+    oklch(var(--surface)) 94%,
+    oklch(var(--surface-foreground)) 6%
+  );
+  --surface-tertiary: color-mix(
+    in oklab,
+    oklch(var(--surface)) 88%,
+    oklch(var(--surface-foreground)) 12%
+  );
+  --overlay: 19.5% 0.008 285.7;
+  --overlay-foreground: 98.48% 0 0;
+
+  /* Field */
+  --field-background: 16.3% 0.006 285.7;
+  --field-border: oklch(100% 0 0 / 0.12);
+  --field-border-hover: oklch(100% 0 0 / 0.22);
+  --field-border-focus: oklch(100% 0 0 / 0.35);
+  --field-border-invalid: oklch(var(--destructive));
+  --machine-bg: 2.8% 0 0;
+  --machine-panel: 4.4% 0 0;
+  --machine-panel-raised: 7.2% 0 0;
+  --machine-fg: 98% 0 0;
+  --machine-fg-muted: 88% 0 0;
+  --machine-fg-subtle: 72% 0 0;
+  --machine-border: 100% 0 0 / 0.22;
+  --machine-rule: 100% 0 0 / 0.3;
+  --machine-inverse: 96% 0 0;
+  --machine-inverse-fg: 8% 0 0;
+  --machine-font-size-base: 0.95rem;
+  --machine-line-height-base: 1.7;
+  --machine-heading-weight: 640;
+  --machine-code-size: 0.84rem;
+  --machine-content-max: 76ch;
+  --machine-section-gap: 2.5rem;
+  --machine-block-gap: 1rem;
+  --machine-rail-offset: clamp(0.9rem, 2vw, 1.45rem);
+
+  /* Dark mode shadows — reduced, tonal contrast provides depth */
+  --shadow-surface: none;
+  --shadow-field: none;
+  --shadow-overlay:
+    0 0 0 1px oklch(100% 0 0 / 0.08), 0 8px 30px oklch(0% 0 0 / 0.35);
+  --shadow-tooltip:
+    0 0 0 1px oklch(100% 0 0 / 0.1), 0 4px 16px oklch(0% 0 0 / 0.4);
+  --shadow-inset-track:
+    inset 0 1px 2px oklch(0% 0 0 / 0.12), inset 0 0 0 1px oklch(100% 0 0 / 0.06);
+}
+
+/* ============================================
+   CSS UTILITIES — Consistency Layer
+   Every component references these instead of
+   reimplementing focus/disabled/invalid patterns.
+   ============================================ */
+
+/* Focus ring for buttons, toggles, links, interactive elements */
+@utility focus-ring {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 2px;
+}
+
+/* Focus ring for form field groups — sits on border, no offset */
+@utility focus-field-ring {
+  outline: 2px solid var(--color-ring);
+  outline-offset: -1px;
+}
+
+/* Invalid field outline — destructive border + ring on focus */
+@utility invalid-field-ring {
+  outline: 2px solid var(--color-destructive);
+  outline-offset: -1px;
+}
+
+/* Disabled state — universal across all components */
+@utility status-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+/* Pending/loading state — non-interactive but visually unchanged */
+@utility status-pending {
+  pointer-events: none;
+}
+
+/* Remove tap highlight on mobile */
+@utility no-highlight {
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Inset track depth for slider/progress/meter tracks */
+@utility shadow-inset-track {
+  box-shadow: var(--shadow-inset-track);
+}
+
+/* Hide scrollbar while keeping scroll functionality */
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* ============================================
+   CUSTOM VARIANTS
+   ============================================ */
+
+/* Motion reduction — respects prefers-reduced-motion */
+@custom-variant motion-reduce (@media (prefers-reduced-motion: reduce));
+@custom-variant motion-safe (@media (prefers-reduced-motion: no-preference));
+
+/* Hover gating — only applies hover styles on devices that support hover */
+@custom-variant hover-only (@media (hover: hover));
+
+/* ============================================
+   BASE STYLES
+   ============================================ */
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
+    font-synthesis-weight: none;
+    text-rendering: optimizeLegibility;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-heading);
+    letter-spacing: -0.02em;
+  }
+}
+
+/* --- Inline code --- */
+.prose :not(pre) > code {
+  border: 1px solid oklch(var(--border));
+  background: transparent;
+  padding: 0.125rem 0.25rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.875em;
+}
+
+/* --- Prose headings — visual rhythm --- */
+.prose h1 {
+  @apply text-3xl font-bold tracking-tight mt-12 mb-4;
+}
+
+.prose h2 {
+  @apply text-2xl font-semibold tracking-tight mt-12 mb-4;
+}
+
+.prose h3 {
+  @apply text-xl font-semibold mt-8 mb-3;
+}
+
+.prose h4 {
+  @apply text-base font-medium mt-6 mb-2;
+}
+
+/* ========== PROTOTYPER UI TOKENS END ========== */