@arcfusionz/arc-primitive-ui 0.0.0

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@arcfusionz/arc-primitive-ui",
+  "version": "0.0.0",
+  "description": "ArcFusion primitive UI components",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/arcfusion-ai/arc-components.git",
+    "directory": "packages/primitive-ui"
+  },
+  "homepage": "https://github.com/arcfusion-ai/arc-components#readme",
+  "bugs": "https://github.com/arcfusion-ai/arc-components/issues",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./theme.css": "./src/styles/theme.css"
+  },
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-hook-form": "^7.46.0"
+  },
+  "devDependencies": {
+    "@hookform/resolvers": "^5.4.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.82.0",
+    "tsdown": "^0.22.12",
+    "typescript": "^5.7.0",
+    "zod": "^4.4.3"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.6.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/styles/theme.css

@@ -0,0 +1,341 @@
+/*
+ * ArcFusion Design Tokens
+ * Source of truth: ArcFusion Brand Toolkit 2026
+ *
+ * Consumers import this AFTER Tailwind:
+ *
+ *   @import "tailwindcss";
+ *   @import "@arcfusionz/arc-primitive-ui/theme.css";
+ *
+ * Two tiers:
+ *   1. Primitive scales   — raw color ramps & font stacks
+ *   2. Semantic aliases   — role-based tokens components use
+ *
+ * `static` emits every token as a CSS variable even when no utility uses
+ * it yet, so consumers (and the Storybook palette docs) can read any token
+ * at runtime via var(--color-*).
+ *
+ * Hexes marked [brand] are locked by the brand book; the remaining steps
+ * extend them into full ramps.
+ */
+
+@theme static {
+  /* ---------------------------------------------------------------------
+   * Typography
+   * Headline: Poppins ("friendly but geometric") · Body/UI: Inter
+   * Formal documents: Noto Serif · Thai pairing: Noto Sans Thai / Sarabun
+   * Note: the brand does not use a monospace family; Tailwind's default
+   * mono token is removed on purpose.
+   * ------------------------------------------------------------------- */
+  --font-sans: "Inter", "Sarabun", ui-sans-serif, system-ui, sans-serif;
+  --font-heading: "Poppins", "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
+  --font-serif: "Noto Serif", Georgia, serif;
+  --font-mono: initial;
+
+  /* ---------------------------------------------------------------------
+   * Radius
+   * The system uses a single 6px radius. Tailwind's default radius scale
+   * is removed so `rounded-md` is the only sized option (`rounded-none`
+   * and `rounded-full` stay available for structural cases).
+   * ------------------------------------------------------------------- */
+  --radius-*: initial;
+  --radius-md: 6px;
+
+  /* ---------------------------------------------------------------------
+   * Motion
+   * AI Loader uses an asymmetric 2.4s ambient rhythm. Processing combines a
+   * variable-speed 3.6s rotation, a strong whole-mark pulse, and a monochrome
+   * currentColor fill. Its satellites fade at peak speed and return as the
+   * rotation eases. The four-point path itself never morphs. Skeleton's wave
+   * crosses a placeholder in 1.6s and rests off-canvas when motion is reduced.
+   * Progress sweeps its indeterminate segment across the track in 1.8s;
+   * reduced motion swaps the sweep for Tailwind's opacity pulse so activity
+   * still reads without positional movement.
+   * `motion-safe` leaves a still frame for reduced-motion users.
+   * ------------------------------------------------------------------- */
+  --animate-ai-loader-rotate: ai-loader-rotate 3.6s infinite;
+  --animate-ai-loader-processing-pulse: ai-loader-processing-pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  --animate-ai-loader-processing-satellite: ai-loader-processing-satellite 3.6s linear infinite;
+  --animate-ai-loader-core: ai-loader-core 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  --animate-ai-loader-facet: ai-loader-facet 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  --animate-ai-loader-spark: ai-loader-spark 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  --animate-ai-loader-text-shimmer: ai-loader-text-shimmer 2s linear infinite;
+  --animate-skeleton-wave: skeleton-wave 1.6s ease-in-out infinite;
+  --animate-progress-indeterminate: progress-indeterminate 1.8s ease-in-out infinite;
+
+  /* ---------------------------------------------------------------------
+   * Primary — Electric Blue (Hero Brand B / Functional actions)
+   * ------------------------------------------------------------------- */
+  --color-primary-50: #f0f5fe;
+  --color-primary-100: #dfeafd;
+  --color-primary-200: #c2d4f9; /* [brand] soft wash — zebra rows, secondary buttons */
+  --color-primary-300: #9bbaf8;
+  --color-primary-400: #699ef7;
+  --color-primary-500: #3b82f6; /* [brand] accessible blue — links, active on dark */
+  --color-primary-600: #1848f3; /* [brand] Electric Blue — primary actions */
+  --color-primary-700: #143ad4;
+  --color-primary-800: #1530ab;
+  --color-primary-900: #172c84;
+  --color-primary-950: #0d1a52;
+
+  /* ---------------------------------------------------------------------
+   * Navy — Hero Brand A (marketing headers, key visuals, dark surfaces)
+   * ------------------------------------------------------------------- */
+  --color-navy-50: #eeeefb;
+  --color-navy-100: #dedef8;
+  --color-navy-200: #c3c3f2;
+  --color-navy-300: #9f9ee9;
+  --color-navy-400: #7b77de;
+  --color-navy-500: #5d54d1;
+  --color-navy-600: #4b3dbf;
+  --color-navy-700: #3c2e9f;
+  --color-navy-800: #2f2280;
+  --color-navy-900: #1d1168;
+  --color-navy-950: #040067; /* [brand] Deep Navy */
+
+  /* ---------------------------------------------------------------------
+   * Slate — The Engineering Grays (blue-tinted; replaces pure black/white)
+   * Brand book defines the scale by name only; hexes extended here.
+   * Slate-50 for table cards · Slate-900 for code blocks.
+   * ------------------------------------------------------------------- */
+  --color-slate-50: #f7f9fc;
+  --color-slate-100: #eff2f8;
+  --color-slate-200: #dee4ef;
+  --color-slate-300: #c3cddf;
+  --color-slate-400: #93a2bd;
+  --color-slate-500: #67789b;
+  --color-slate-600: #4a5878;
+  --color-slate-700: #38445f;
+  --color-slate-800: #253048;
+  --color-slate-900: #111a30;
+  --color-slate-950: #0a101f;
+
+  /* ---------------------------------------------------------------------
+   * Status ramps — brand book shows Success/Error swatches without hexes;
+   * ramps defined here. Warning is an extension for a complete system.
+   * ------------------------------------------------------------------- */
+  --color-success-50: #ebfef2;
+  --color-success-100: #d0fbe0;
+  --color-success-200: #a5f5c6;
+  --color-success-300: #6be9a6;
+  --color-success-400: #30d57f;
+  --color-success-500: #10bf62;
+  --color-success-600: #059b4e;
+  --color-success-700: #077c41;
+  --color-success-800: #0a6236;
+  --color-success-900: #0a502e;
+  --color-success-950: #032d18;
+
+  --color-warning-50: #fffbeb;
+  --color-warning-100: #fef3c7;
+  --color-warning-200: #fde58a;
+  --color-warning-300: #fcd24d;
+  --color-warning-400: #fabe23;
+  --color-warning-500: #f4a80b;
+  --color-warning-600: #d88406;
+  --color-warning-700: #b36209;
+  --color-warning-800: #914d0e;
+  --color-warning-900: #78400f;
+  --color-warning-950: #452103;
+
+  --color-error-50: #fef2f2;
+  --color-error-100: #fee2e1;
+  --color-error-200: #fec9c8;
+  --color-error-300: #fba3a1;
+  --color-error-400: #f76d6a;
+  --color-error-500: #ee4540;
+  --color-error-600: #db2723;
+  --color-error-700: #b81d19;
+  --color-error-800: #981c19;
+  --color-error-900: #7e1f1d;
+  --color-error-950: #440c0b;
+}
+
+@keyframes skeleton-wave {
+  from {
+    translate: -100% 0;
+  }
+  to {
+    translate: 100% 0;
+  }
+}
+
+/* The indeterminate Progress segment is 40% of its track wide; translate is
+   relative to the segment itself, so -100% rests fully off the left edge and
+   250% (100% / 40% width) exits fully off the right. */
+@keyframes progress-indeterminate {
+  from {
+    translate: -100% 0;
+  }
+  to {
+    translate: 250% 0;
+  }
+}
+
+@keyframes ai-loader-rotate {
+  0% {
+    transform: rotate(0deg);
+    animation-timing-function: cubic-bezier(0.45, 0, 0.75, 0.35);
+  }
+  28% {
+    transform: rotate(60deg);
+    animation-timing-function: cubic-bezier(0.15, 0.75, 0.25, 1);
+  }
+  58% {
+    transform: rotate(220deg);
+    animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45);
+  }
+  76% {
+    transform: rotate(276deg);
+    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ai-loader-processing-pulse {
+  0%,
+  100% {
+    opacity: 0.82;
+    transform: scale(0.72);
+  }
+  34% {
+    opacity: 1;
+    transform: scale(1.08);
+  }
+  56% {
+    opacity: 0.9;
+    transform: scale(0.86);
+  }
+  78% {
+    opacity: 1;
+    transform: scale(1.04);
+  }
+}
+
+@keyframes ai-loader-processing-satellite {
+  0%,
+  18%,
+  100% {
+    opacity: 1;
+  }
+  28%,
+  38% {
+    opacity: 0;
+  }
+  58% {
+    opacity: 1;
+  }
+}
+
+@keyframes ai-loader-text-shimmer {
+  0% {
+    background-position:
+      100% 50%,
+      0 0;
+  }
+  100% {
+    background-position:
+      0% 50%,
+      0 0;
+  }
+}
+
+@keyframes ai-loader-core {
+  0%,
+  100% {
+    opacity: 0.95;
+    transform: rotate(0deg) scale(1);
+  }
+  26% {
+    opacity: 0.82;
+    transform: rotate(-8deg) scale(0.82);
+  }
+  56% {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+  }
+  78% {
+    opacity: 0.92;
+    transform: rotate(9deg) scale(0.9);
+  }
+}
+
+@keyframes ai-loader-facet {
+  0%,
+  100% {
+    opacity: 0.15;
+    transform: rotate(45deg) scale(0.75);
+  }
+  36% {
+    opacity: 0.34;
+    transform: rotate(55deg) scale(0.82);
+  }
+  68% {
+    opacity: 0.12;
+    transform: rotate(36deg) scale(0.58);
+  }
+}
+
+@keyframes ai-loader-spark {
+  0%,
+  100% {
+    opacity: 0.45;
+    transform: scale(1);
+  }
+  20% {
+    opacity: 0.18;
+    transform: scale(0.45);
+  }
+  42% {
+    opacity: 0.95;
+    transform: scale(1);
+  }
+  62% {
+    opacity: 0.28;
+    transform: scale(0.62);
+  }
+}
+
+/* -----------------------------------------------------------------------
+ * Semantic tokens — what components actually reference.
+ * --------------------------------------------------------------------- */
+@theme static {
+  --color-background: #ffffff; /* [brand] the "Clean Slate" */
+  --color-foreground: var(--color-slate-900);
+
+  --color-surface: var(--color-slate-50);
+  --color-surface-foreground: var(--color-slate-900);
+
+  --color-muted: var(--color-slate-100);
+  --color-muted-foreground: var(--color-slate-500);
+
+  --color-border: var(--color-slate-200);
+  --color-ring: var(--color-primary-600);
+
+  /* Scrim behind modal surfaces (dialogs, drawers). Carries its own alpha so
+     overlays fade the whole layer via opacity without restating the color. */
+  --color-overlay: color-mix(in oklab, var(--color-slate-950) 50%, transparent);
+
+  --color-primary: var(--color-primary-600);
+  --color-primary-foreground: #ffffff;
+
+  --color-secondary: var(--color-primary-200);
+  --color-secondary-foreground: var(--color-navy-950);
+
+  --color-hero: var(--color-navy-950);
+  --color-hero-foreground: #ffffff;
+
+  --color-success: var(--color-success-600);
+  --color-success-foreground: #ffffff;
+
+  --color-warning: var(--color-warning-600);
+  --color-warning-foreground: #ffffff;
+
+  --color-destructive: var(--color-error-600);
+  --color-destructive-foreground: #ffffff;
+
+  --color-info: var(--color-primary-500);
+  --color-info-foreground: #ffffff;
+}