@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.31

package/dist/utils/colorUtils.d.ts

@@ -4,21 +4,21 @@
  * Components with extra colors extend locally:
  *   export type SpinnerColor = SemanticColor | 'dark';
  */
-export type SemanticColor = "neutral" | "primary" | "success" | "warning" | "danger";
+export type SemanticColor = "mono" | "primary" | "success" | "warning" | "danger";
 /**
  * Background colors for semantic colors.
- * neutral uses neutral-400; others use their base variable.
+ * mono (the gray role) uses mono-400; others use their base variable.
  */
 export declare const semanticBgColors: Record<SemanticColor, string>;
 /**
  * Text colors for semantic colors.
- * neutral uses text-primary; others use their base variable.
+ * mono uses text-primary; others use their base variable.
  */
 export declare const semanticTextColors: Record<SemanticColor, string>;
 /**
  * Spinner border colors for semantic colors.
  * Each value is the atomic pair: border color + transparent top.
- * neutral uses --color-border; others use their base variable.
+ * mono uses --color-border; others use their base variable.
  */
 export declare const semanticSpinnerColors: Record<SemanticColor, string>;
 /** Which text tone reads best on a given background. */
@@ -45,8 +45,8 @@ export declare const relativeLuminance: (color: string) => number;
  * reverse.
  *
  * Returns a theme-agnostic tone — map it to your colors at the call site, e.g.
- * `tone === "dark" ? "var(--color-neutral-950)" : "var(--color-neutral-50)"`
- * (the neutral scale is theme-stable, so the decision holds in light and dark).
+ * `tone === "dark" ? "var(--color-mono-950)" : "var(--color-mono-50)"`
+ * (the mono scale is theme-stable, so the decision holds in light and dark).
  */
 export declare const contrastTone: (bg: string | string[], options?: {
     threshold?: number;

package/dist/utils/colorUtils.js

@@ -6,10 +6,10 @@
  */
 /**
  * Background colors for semantic colors.
- * neutral uses neutral-400; others use their base variable.
+ * mono (the gray role) uses mono-400; others use their base variable.
  */
 const semanticBgColors = {
-    neutral: "bg-[var(--color-neutral-400)]",
+    mono: "bg-[var(--color-mono-400)]",
     primary: "bg-[var(--color-primary)]",
     success: "bg-[var(--color-success)]",
     warning: "bg-[var(--color-warning)]",
@@ -17,10 +17,10 @@ const semanticBgColors = {
 };
 /**
  * Text colors for semantic colors.
- * neutral uses text-primary; others use their base variable.
+ * mono uses text-primary; others use their base variable.
  */
 const semanticTextColors = {
-    neutral: "text-[var(--color-text-primary)]",
+    mono: "text-[var(--color-text-primary)]",
     primary: "text-[var(--color-primary)]",
     success: "text-[var(--color-success)]",
     warning: "text-[var(--color-warning)]",
@@ -29,10 +29,10 @@ const semanticTextColors = {
 /**
  * Spinner border colors for semantic colors.
  * Each value is the atomic pair: border color + transparent top.
- * neutral uses --color-border; others use their base variable.
+ * mono uses --color-border; others use their base variable.
  */
 const semanticSpinnerColors = {
-    neutral: "border-[var(--color-border)] border-t-transparent",
+    mono: "border-[var(--color-border)] border-t-transparent",
     primary: "border-[var(--color-primary)] border-t-transparent",
     success: "border-[var(--color-success)] border-t-transparent",
     warning: "border-[var(--color-warning)] border-t-transparent",
@@ -75,8 +75,8 @@ const relativeLuminance = (color) => {
  * reverse.
  *
  * Returns a theme-agnostic tone — map it to your colors at the call site, e.g.
- * `tone === "dark" ? "var(--color-neutral-950)" : "var(--color-neutral-50)"`
- * (the neutral scale is theme-stable, so the decision holds in light and dark).
+ * `tone === "dark" ? "var(--color-mono-950)" : "var(--color-mono-50)"`
+ * (the mono scale is theme-stable, so the decision holds in light and dark).
  */
 const contrastTone = (bg, options = {}) => {
     const { threshold = 0.179 } = options;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flikk/ui",
-  "version": "1.0.0-beta.30",
+  "version": "1.0.0-beta.31",
   "description": "A modern React component library built with TypeScript, Tailwind CSS v4, and Framer Motion. Follows the shadcn philosophy with complete className override support.",
   "type": "module",
   "packageManager": "yarn@1.22.22",
@@ -9,6 +9,7 @@
   "types": "dist/index.d.ts",
   "sideEffects": [
     "./dist/styles.css",
+    "./dist/themes/*.css",
     "./src/global.scss",
     "./src/theme-plugin.css"
   ],
@@ -68,6 +69,7 @@
     "./tailwind.preset.cjs": "./tailwind.preset.cjs",
     "./shadcn-compat.css": "./dist/shadcn-compat.css",
     "./theme.css": "./dist/theme.css",
+    "./themes/*": "./dist/themes/*",
     "./registry.json": "./dist/registry.json",
     "./generative.schema.json": "./dist/generative.schema.json",
     "./tools.json": "./dist/tools.json",
@@ -85,12 +87,13 @@
   "scripts": {
     "test": "vitest run",
     "test:watch": "vitest",
-    "build": "node scripts/audit-use-client.mjs && rollup -c && npm run build:css && npm run build:assets && npm run build:copy-css && npm run build:registry && npm run build:generative",
+    "build": "rimraf dist && node scripts/audit-use-client.mjs && rollup -c && npm run build:css && npm run build:assets && npm run build:copy-css && npm run build:registry && npm run build:generative",
     "build:assets": "cp -r public/bg dist/bg",
     "build:registry": "FLIKK_REGISTRY_OUT=dist/registry.json packages/mcp/node_modules/.bin/tsx packages/mcp/scripts/extract.ts",
     "build:generative": "packages/mcp/node_modules/.bin/tsx packages/mcp/scripts/generative.ts",
     "build:inventory": "packages/mcp/node_modules/.bin/tsx packages/mcp/scripts/generateInventory.ts",
-    "build:copy-css": "cp src/shadcn-compat.css dist/shadcn-compat.css && cp src/theme-plugin.css dist/theme.css",
+    "build:figma-tokens": "packages/mcp/node_modules/.bin/tsx packages/mcp/scripts/figma-tokens.ts",
+    "build:copy-css": "cp src/shadcn-compat.css dist/shadcn-compat.css && cp src/theme-plugin.css dist/theme.css && mkdir -p dist/themes && cp -r src/themes/. dist/themes/",
     "build:css": "tailwindcss -m -i ./src/tailwind-config.css -o ./dist/styles.css",
     "analyze": "ANALYZE=true rollup -c && open stats.html",
     "watch": "rollup -c -w",
@@ -128,7 +131,7 @@
     "npm": ">=10.0.0"
   },
   "peerDependencies": {
-    "@heroicons/react": ">=2.0.0",
+    "@phosphor-icons/react": ">=2.1.0",
     "@react-three/drei": ">=10.0.0",
     "@react-three/fiber": ">=9.0.0",
     "motion": ">=12.0.0",
@@ -167,7 +170,7 @@
     "@chromatic-com/storybook": "^5.0.0",
     "@emotion/is-prop-valid": "^1.4.0",
     "@eslint/js": "^9",
-    "@heroicons/react": "^2.2.0",
+    "@phosphor-icons/react": "^2.1.10",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
     "@rollup/plugin-commonjs": "^29.0.0",
@@ -208,7 +211,7 @@
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^16.1.0",
     "remark-gfm": "^4.0.1",
-    "rimraf": "^5.0.0",
+    "rimraf": "^6.1.3",
     "rollup": "^4.57.1",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "rollup-plugin-visualizer": "^7.0.1",

package/src/global.scss

@@ -398,12 +398,12 @@
     --ui-scrollbar-thumb-active: rgb(209 213 219);
   }
 
-  .scrollbar-thumb-\[var\(--color-neutral-300\)\] {
-    --ui-scrollbar-thumb-active: var(--color-neutral-300);
+  .scrollbar-thumb-\[var\(--color-mono-300\)\] {
+    --ui-scrollbar-thumb-active: var(--color-mono-300);
   }
 
-  .scrollbar-track-\[var\(--color-neutral-100\)\] {
-    --ui-scrollbar-track-active: var(--color-neutral-100);
+  .scrollbar-track-\[var\(--color-mono-100\)\] {
+    --ui-scrollbar-track-active: var(--color-mono-100);
   }
 
   .scrollbar-track-transparent {
@@ -885,6 +885,17 @@ body {
   }
 }
 
+/* InputOTP caret blink — CSS so the blink costs zero per-frame JS
+   (a motion keyframe loop would tick rAF the whole time the field is focused) */
+@keyframes flik-caret-blink {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
 /* Heatmap flicker animation */
 @keyframes flicker {
   0% {