fancy-ui-react 0.2.0

package/dist/cameleon/skins/aurora/recipes.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Aurora recipes — the full "Core components" set in the library's own voice.
+ * Near-black surfaces, hairline `border-white/10` edges, a violet→blue sweep on
+ * anything primary, and a soft violet bloom instead of a hard shadow.
+ *
+ * Static class literals only (Tailwind JIT-safe). States are attribute-driven:
+ * primitives set `disabled`, `aria-invalid`, `aria-checked` and Tailwind's state
+ * variants (hover, focus, peer-, group-, disabled, aria) do the rest.
+ *
+ * Focus = `ring-2 ring-[#8b7bff]/60`. Error = rose border + ring, text left
+ * readable. The bloom on `.cam-btn` is added by aurora.css.
+ */
+import type { RecipeArgs, RecipeResult, SkinRecipes } from "../../types.js";
+export declare function auroraButton(args: RecipeArgs): RecipeResult;
+export declare const auroraInput: (args: RecipeArgs) => RecipeResult;
+export declare const auroraTextarea: (args: RecipeArgs) => RecipeResult;
+export declare const auroraSelect: (args: RecipeArgs) => RecipeResult;
+export declare const auroraCheckbox: (args: RecipeArgs) => RecipeResult;
+export declare const auroraRadio: (args: RecipeArgs) => RecipeResult;
+export declare const auroraSwitch: (args: RecipeArgs) => RecipeResult;
+export declare const auroraSlider: () => RecipeResult;
+export declare function auroraBadge(args: RecipeArgs): RecipeResult;
+export declare const auroraTooltip: (args: RecipeArgs) => RecipeResult;
+export declare const auroraRecipes: SkinRecipes;

package/dist/cameleon/skins/aurora/recipes.js

@@ -0,0 +1,124 @@
+"use client";
+const forced = (map, state) => state && map[state] || "";
+const BTN_BASE = "relative inline-flex items-center justify-center gap-2 rounded-[10px] border font-semibold whitespace-nowrap cursor-pointer select-none transition duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#8b7bff]/60 disabled:pointer-events-none disabled:opacity-40";
+const BTN_SIZE = {
+  sm: "px-3.5 py-1.5 text-xs",
+  md: "px-[18px] py-2.5 text-sm",
+  lg: "px-6 py-3 text-base"
+};
+const BTN_VARIANT = {
+  primary: "border-transparent bg-[linear-gradient(100deg,#7c3aed,#3b82f6)] text-white shadow-[0_2px_16px_rgba(124,58,237,0.35)] hover:shadow-[0_10px_34px_rgba(91,140,255,0.45)] hover:brightness-110",
+  secondary: "border-white/12 bg-white/[0.04] text-[#e6e9ef] hover:border-white/25 hover:bg-white/[0.08]",
+  destructive: "border-rose-400/40 bg-rose-500/20 text-rose-100 hover:bg-rose-500/35 focus-visible:ring-rose-400/60"
+};
+const BTN_FORCE = {
+  hover: "shadow-[0_10px_34px_rgba(91,140,255,0.45)] brightness-110",
+  active: "brightness-95 shadow-[0_2px_16px_rgba(124,58,237,0.35)]",
+  focus: "ring-2 ring-[#8b7bff]/60"
+};
+function auroraButton(args) {
+  const size = BTN_SIZE[args.size ?? "md"] ?? BTN_SIZE.md;
+  const variant = BTN_VARIANT[args.variant ?? "primary"] ?? BTN_VARIANT.primary;
+  return { root: `${BTN_BASE} ${size} ${variant} ${forced(BTN_FORCE, args.state)}`, label: "" };
+}
+const FIELD_BASE = "w-full rounded-[10px] border border-white/10 bg-white/[0.03] px-3.5 py-2 text-sm text-[#e6e9ef] outline-none transition duration-200 ease-out placeholder:text-[#6b7280] hover:border-white/20 hover:bg-white/[0.05] focus:border-[#8b7bff]/70 focus:ring-2 focus:ring-[#8b7bff]/40 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-white/[0.03] aria-[invalid=true]:border-rose-400/60 aria-[invalid=true]:ring-2 aria-[invalid=true]:ring-rose-400/30";
+const FIELD_FORCE = {
+  hover: "border-white/20 bg-white/[0.05]",
+  active: "bg-white/[0.05]",
+  focus: "border-[#8b7bff]/70 ring-2 ring-[#8b7bff]/40"
+};
+const auroraInput = (args) => ({
+  root: `${FIELD_BASE} ${forced(FIELD_FORCE, args.state)}`
+});
+const auroraTextarea = (args) => ({
+  root: `${FIELD_BASE} min-h-[80px] leading-relaxed resize-y ${forced(FIELD_FORCE, args.state)}`
+});
+const auroraSelect = (args) => ({
+  root: "relative inline-block w-full",
+  field: `${FIELD_BASE} appearance-none pr-9 cursor-pointer ${forced(FIELD_FORCE, args.state)}`,
+  chevron: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[#9aa3b2]"
+});
+const CHOICE_ROOT = "inline-flex items-center gap-2 cursor-pointer select-none text-sm text-[#e6e9ef] has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50";
+const CHOICE_BOX_BASE = "grid place-items-center h-[18px] w-[18px] shrink-0 border border-white/20 bg-white/[0.03] transition text-transparent peer-focus-visible:ring-2 peer-focus-visible:ring-[#8b7bff]/50 peer-disabled:opacity-40 peer-aria-[invalid=true]:border-rose-400/60 peer-aria-[invalid=true]:ring-2 peer-aria-[invalid=true]:ring-rose-400/30 peer-data-[invalid=true]:border-rose-400/60 peer-data-[invalid=true]:ring-2 peer-data-[invalid=true]:ring-rose-400/30";
+const CHOICE_FORCE = {
+  hover: "border-white/35 bg-white/[0.07]",
+  focus: "border-[#8b7bff]/70 ring-2 ring-[#8b7bff]/40"
+};
+const auroraCheckbox = (args) => ({
+  root: CHOICE_ROOT,
+  box: `${CHOICE_BOX_BASE} rounded-[5px] peer-checked:border-transparent peer-checked:bg-[linear-gradient(100deg,#7c3aed,#3b82f6)] peer-checked:text-white ` + forced(CHOICE_FORCE, args.state)
+});
+const auroraRadio = (args) => ({
+  root: CHOICE_ROOT,
+  box: `${CHOICE_BOX_BASE} rounded-full peer-checked:border-transparent peer-checked:bg-[linear-gradient(100deg,#7c3aed,#3b82f6)] ` + forced(CHOICE_FORCE, args.state)
+});
+const SWITCH_FORCE = {
+  hover: "border-white/35",
+  focus: "border-[#8b7bff]/70 ring-2 ring-[#8b7bff]/40"
+};
+const auroraSwitch = (args) => ({
+  root: "group inline-flex h-[22px] w-[40px] shrink-0 items-center rounded-full border border-white/15 bg-white/[0.06] p-[2px] cursor-pointer transition-colors aria-[checked=true]:border-transparent aria-[checked=true]:bg-[linear-gradient(100deg,#7c3aed,#3b82f6)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#8b7bff]/50 disabled:opacity-40 disabled:cursor-not-allowed aria-[invalid=true]:border-rose-400/60 aria-[invalid=true]:ring-2 aria-[invalid=true]:ring-rose-400/30 " + forced(SWITCH_FORCE, args.state),
+  thumb: "h-[14px] w-[14px] rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.5)] transition-transform group-aria-[checked=true]:translate-x-[18px]"
+});
+const auroraSlider = () => ({
+  root: "cam-range w-[160px] cursor-pointer appearance-none bg-transparent disabled:cursor-not-allowed disabled:opacity-50"
+});
+const BADGE_BASE = "inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium before:content-[''] before:mr-1.5 before:h-[7px] before:w-[7px] before:rounded-full before:shrink-0";
+const BADGE_VARIANT = {
+  default: "border-white/12 bg-white/[0.05] text-[#c3cadf] before:bg-[#8b7bff]",
+  solid: "border-transparent bg-[#f8fafc] text-[#0a0a0e] before:bg-[#0a0a0e]",
+  blue: "border-[#5b8cff]/30 bg-[#5b8cff]/15 text-[#bfd4ff] before:bg-[#5b8cff]",
+  red: "border-rose-400/30 bg-rose-400/15 text-rose-200 before:bg-rose-400",
+  yellow: "border-amber-400/30 bg-amber-400/15 text-amber-200 before:bg-amber-400",
+  green: "border-emerald-400/30 bg-emerald-400/15 text-emerald-200 before:bg-emerald-400",
+  purple: "border-[#8b7bff]/30 bg-[#8b7bff]/15 text-[#d3ccff] before:bg-[#8b7bff]"
+};
+const BADGE_FORCE = {
+  hover: "border-white/25 bg-white/[0.09]",
+  active: "border-transparent bg-[#f8fafc] text-[#0a0a0e] before:bg-[#0a0a0e]",
+  focus: "border-[#8b7bff]/70 ring-2 ring-[#8b7bff]/40",
+  disabled: "border-white/8 bg-white/[0.02] text-[#6b7280] before:bg-[#6b7280]",
+  error: "border-rose-400/40 bg-rose-400/15 text-rose-200 before:bg-rose-400"
+};
+function auroraBadge(args) {
+  const variant = BADGE_VARIANT[args.variant ?? "default"] ?? BADGE_VARIANT.default;
+  return { root: `${BADGE_BASE} ${variant} ${forced(BADGE_FORCE, args.state)}` };
+}
+const TT_TRIGGER = {
+  focus: "border-[#8b7bff]/70 ring-2 ring-[#8b7bff]/40",
+  error: "border-rose-400/60 bg-rose-400/15 text-rose-200"
+};
+const TT_BUBBLE = {
+  focus: "border-[#8b7bff]/50 opacity-100",
+  error: "border-rose-400/50 bg-rose-950/90 opacity-100"
+};
+const auroraTooltip = (args) => ({
+  root: "relative inline-flex group",
+  trigger: "grid place-items-center h-[26px] w-[26px] rounded-full border border-white/15 bg-white/[0.05] text-[#e6e9ef] text-[12px] font-semibold cursor-help focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#8b7bff]/50 " + forced(TT_TRIGGER, args.state),
+  bubble: "pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-[10px] border border-white/10 bg-[#12121c] px-3 py-1.5 text-[12px] font-medium text-[#e6e9ef] opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100 shadow-[0_10px_30px_rgba(0,0,0,0.6)] " + forced(TT_BUBBLE, args.state)
+});
+const auroraRecipes = {
+  button: auroraButton,
+  input: auroraInput,
+  textarea: auroraTextarea,
+  select: auroraSelect,
+  checkbox: auroraCheckbox,
+  radio: auroraRadio,
+  switch: auroraSwitch,
+  slider: auroraSlider,
+  badge: auroraBadge,
+  tooltip: auroraTooltip
+};
+export {
+  auroraBadge,
+  auroraButton,
+  auroraCheckbox,
+  auroraInput,
+  auroraRadio,
+  auroraRecipes,
+  auroraSelect,
+  auroraSlider,
+  auroraSwitch,
+  auroraTextarea,
+  auroraTooltip
+};

package/dist/cameleon/skins/aurora/tokens.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Aurora skin tokens — the library's own art direction, the one the landing
+ * page wore before it became skinnable. Near-black canvas, violet→blue accent
+ * sweep, hairline borders, soft bloom on anything interactive.
+ */
+export declare const auroraTokens: Record<string, string>;

package/dist/cameleon/skins/aurora/tokens.js

@@ -0,0 +1,18 @@
+"use client";
+const auroraTokens = {
+  "--skin-page-bg": "#050508",
+  "--skin-page-fg": "#f8fafc",
+  "--skin-font-sans": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  "--skin-font-mono": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace",
+  "--skin-card": "#0d0d14",
+  "--skin-surface": "#12121c",
+  "--skin-line": "rgba(255,255,255,0.10)",
+  "--skin-blue": "#5b8cff",
+  "--skin-red": "#fb7185",
+  "--skin-yellow": "#fbbf24",
+  "--skin-green": "#34d399",
+  "--skin-purple": "#8b7bff"
+};
+export {
+  auroraTokens
+};

package/dist/cameleon/skins/brutal/index.d.ts

@@ -0,0 +1,2 @@
+import type { Skin } from "../../types.js";
+export declare const brutalSkin: Skin;

package/dist/cameleon/skins/brutal/index.js

@@ -0,0 +1,35 @@
+"use client";
+import { brutalTokens } from "./tokens.js";
+import { brutalMeta } from "./meta.js";
+import { brutalTooltip, brutalBadge, brutalSlider, brutalSwitch, brutalRadio, brutalCheckbox, brutalSelect, brutalTextarea, brutalInput, brutalButton } from "./recipes.js";
+import { buttonTrailing } from "./ornaments.js";
+/* empty css           */
+const brutalSkin = {
+  name: "brutal",
+  label: "Brutal",
+  colorScheme: "light",
+  tokens: brutalTokens,
+  meta: brutalMeta,
+  fonts: [
+    {
+      id: "cam-font-brutal",
+      href: "https://fonts.googleapis.com/css2?family=Archivo:wght@400..900&family=Space+Mono:wght@400;700&display=swap"
+    }
+  ],
+  recipes: {
+    button: brutalButton,
+    input: brutalInput,
+    textarea: brutalTextarea,
+    select: brutalSelect,
+    checkbox: brutalCheckbox,
+    radio: brutalRadio,
+    switch: brutalSwitch,
+    slider: brutalSlider,
+    badge: brutalBadge,
+    tooltip: brutalTooltip
+  },
+  ornaments: { buttonTrailing }
+};
+export {
+  brutalSkin
+};

package/dist/cameleon/skins/brutal/meta.d.ts

@@ -0,0 +1,3 @@
+import type { SkinMeta } from "../../types.js";
+/** Brutal design metadata — the exact values from the design reference. */
+export declare const brutalMeta: SkinMeta;

package/dist/cameleon/skins/brutal/meta.js

@@ -0,0 +1,73 @@
+"use client";
+const brutalMeta = {
+  palette: [
+    { name: "Paper", value: "#F4EEE0", note: "page · sidebar · header" },
+    { name: "Card", value: "#FBF7EB", note: "cards · pills · search" },
+    { name: "Surface", value: "#FFFCF2", note: "inline code chip" },
+    { name: "Ink", value: "#141414", note: "text · borders · code bg" },
+    { name: "Blue", value: "#1B6EF3", note: "active nav · link · focus" },
+    { name: "Blue 700", value: "#144FB0", note: "link hover" },
+    { name: "Red", value: "#E5372B", note: "category dot · step 02" },
+    { name: "Yellow", value: "#F5B40C", note: "CTA strip · press flash" },
+    { name: "Green", value: "#12A147", note: "category dot · tile" },
+    { name: "Purple", value: "#8E55E9", note: "category dot · lede" }
+  ],
+  type: [
+    {
+      sample: "Display",
+      spec: "ARCHIVO 900 · -0.035EM · CLAMP(38, 5VW, 56)",
+      style: "font-size:56px;font-weight:900;letter-spacing:-0.035em;line-height:0.98;"
+    },
+    {
+      sample: "Heading — section title",
+      spec: "ARCHIVO 850 · -0.015EM · CLAMP(19, 2VW, 23)",
+      style: "font-size:23px;font-weight:850;letter-spacing:-0.015em;"
+    },
+    {
+      sample: "Card head — Svelte 5 native",
+      spec: "ARCHIVO 800 · 14.5",
+      style: "font-size:14.5px;font-weight:800;"
+    },
+    {
+      sample: "Nav item — Introduction",
+      spec: "ARCHIVO 600 · 13.5 · ACTIVE 750",
+      style: "font-size:13.5px;font-weight:600;"
+    },
+    {
+      sample: "Lede — 50+ animated, interactive components you can drop into any page.",
+      spec: "ARCHIVO 500 · CLAMP(15, 1.4VW, 18) · LH 1.55",
+      style: "font-size:18px;font-weight:500;line-height:1.55;max-width:56ch;"
+    },
+    {
+      sample: "MONO LABEL — GETTING STARTED",
+      spec: "SPACE MONO 700 CAPS · 7.5–12 + 0.1EM",
+      style: "font-family:var(--skin-font-mono);font-size:10px;font-weight:700;letter-spacing:0.1em;"
+    }
+  ],
+  specs: {
+    radius: [
+      { size: "3px", label: "marker" },
+      { size: "5px", label: "chip" },
+      { size: "7px", label: "tile" },
+      { size: "9px", label: "nav" },
+      { size: "10px", label: "code" },
+      { size: "12px", label: "card" },
+      { size: "999px", label: "pill" }
+    ],
+    border: "1.5px solid ink everywhere · 1.3px inline chips · 1px 8px markers.",
+    shadowRest: "0 8px 16px rgba(60,50,20,.07) soft ambient — never a hard offset at rest",
+    shadowHover: "3–4px hard offset 0 ink + translate(-1,-1) / (-2,-2), hover only",
+    spacing: "3 / 4 / 6 / 8 / 10 / 12 / 14 / 18 / 20 / 32 / 38 / 40"
+  },
+  responsive: [
+    {
+      label: "Desktop ≥1180",
+      note: "sidebar 264px + rail 200px · full breadcrumb · hover lifts on"
+    },
+    { label: "Tablet 768–1179", note: "sidebar + rail hidden · compact header · 28px FU tile" },
+    { label: "Mobile <768", note: "search pill + language button hidden · 44px+ tap targets" }
+  ]
+};
+export {
+  brutalMeta
+};

package/dist/cameleon/skins/brutal/ornaments.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Brutal ornaments as plain functions returning JSX. currentColor makes the
+ * arrow track the button's per-variant text color.
+ */
+import type { ReactNode } from "react";
+import type { RecipeArgs } from "../../types.js";
+export declare function buttonTrailing(_args: RecipeArgs): ReactNode;

package/dist/cameleon/skins/brutal/ornaments.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+function buttonTrailing(_args) {
+  return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 14 14", "aria-hidden": "true", style: { display: "block", flex: "none" }, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M3 11 L11 3 M4.5 3 L11 3 L11 9.5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.9",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+export {
+  buttonTrailing
+};

package/dist/cameleon/skins/brutal/recipes.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Brutal recipes — the full "Core components" set from the design system.
+ * Static class literals only (Tailwind JIT-safe). States are attribute-driven
+ * for real interaction (disabled/aria-invalid/aria-checked + hover/focus/peer/
+ * group variants); the /skins state-matrix additionally FORCES hover/active/focus
+ * statically via `args.state` (see the FORCE maps below + `demoState` on the
+ * primitives). Real interaction still works; forced classes are additive.
+ *
+ * Design tokens: paper #F4EEE0, card #FBF7EB, surface #FFFCF2, ink #141414,
+ * accents blue #1B6EF3 / red #E5372B / yellow #F5B40C / green #12A147 / purple
+ * #8E55E9. Focus ring 0 0 0 3px rgba(27,110,243,.35). Error ring rgba(229,55,43,.28).
+ */
+import type { RecipeArgs, RecipeResult } from "../../types.js";
+export declare function brutalButton(args: RecipeArgs): RecipeResult;
+export declare const brutalInput: (args: RecipeArgs) => RecipeResult;
+export declare const brutalTextarea: (args: RecipeArgs) => RecipeResult;
+export declare const brutalSelect: (args: RecipeArgs) => RecipeResult;
+export declare const brutalCheckbox: (args: RecipeArgs) => RecipeResult;
+export declare const brutalRadio: (args: RecipeArgs) => RecipeResult;
+export declare const brutalSwitch: (args: RecipeArgs) => RecipeResult;
+export declare const brutalSlider: () => RecipeResult;
+export declare function brutalBadge(args: RecipeArgs): RecipeResult;
+export declare function brutalTooltip(args: RecipeArgs): RecipeResult;

package/dist/cameleon/skins/brutal/recipes.js

@@ -0,0 +1,113 @@
+"use client";
+const forced = (map, state) => state && map[state] || "";
+const BTN_BASE = "inline-flex items-center justify-center gap-[7px] rounded-full border-[1.5px] font-extrabold tracking-[-0.01em] whitespace-nowrap cursor-pointer select-none transition-[transform,box-shadow] duration-150 ease-out hover:-translate-x-0.5 hover:-translate-y-0.5 active:translate-x-0 active:translate-y-0 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[rgba(27,110,243,0.45)] disabled:pointer-events-none disabled:cursor-not-allowed";
+const BTN_SIZE = {
+  sm: "px-[13px] py-[6px] text-[11px]",
+  md: "px-[18px] py-[9px] text-[12.5px]",
+  lg: "px-[22px] py-[11px] text-[14px]"
+};
+const BTN_VARIANT = {
+  primary: "border-[#141414] bg-[#141414] text-[#F4EEE0] shadow-[0_4px_10px_rgba(60,50,20,0.1)] hover:shadow-[4px_4px_0_#141414] active:bg-black active:shadow-[0_1px_0_#141414] disabled:border-[rgba(20,20,20,0.25)] disabled:bg-[rgba(20,20,20,0.22)] disabled:text-[rgba(20,20,20,0.4)] disabled:shadow-none",
+  secondary: "border-[#141414] bg-[#FFFCF2] text-[#141414] shadow-[0_4px_10px_rgba(60,50,20,0.1)] hover:shadow-[4px_4px_0_#141414] active:shadow-[0_1px_0_#141414] disabled:opacity-50 disabled:shadow-none",
+  destructive: "border-[#141414] bg-[#E5372B] text-white shadow-[0_4px_10px_rgba(60,50,20,0.1)] hover:shadow-[4px_4px_0_#141414] active:shadow-[0_1px_0_#141414] disabled:opacity-50 disabled:shadow-none"
+};
+const BTN_FORCE = {
+  hover: "-translate-x-0.5 -translate-y-0.5 shadow-[4px_4px_0_#141414]",
+  active: "bg-black shadow-[0_1px_0_#141414]",
+  focus: "border-[#1B6EF3] ring-[3px] ring-[rgba(27,110,243,0.45)]"
+};
+function brutalButton(args) {
+  const size = BTN_SIZE[args.size ?? "md"] ?? BTN_SIZE.md;
+  const variant = BTN_VARIANT[args.variant ?? "primary"] ?? BTN_VARIANT.primary;
+  return { root: `${BTN_BASE} ${size} ${variant} ${forced(BTN_FORCE, args.state)}`, label: "" };
+}
+const FIELD_BASE = "w-full rounded-lg border-[1.5px] border-[#141414] bg-[#FFFCF2] px-[11px] py-2 text-[12px] font-semibold text-[#141414] outline-none transition-[box-shadow,border-color,background] duration-150 placeholder:text-[#141414]/40 hover:bg-white hover:shadow-[0_3px_8px_rgba(60,50,20,0.12)] focus:border-[#1B6EF3] focus:shadow-[0_0_0_3px_rgba(27,110,243,0.35)] disabled:bg-[#EAE3D2] disabled:text-[#141414]/40 disabled:border-[#141414]/30 disabled:shadow-none disabled:cursor-not-allowed aria-[invalid=true]:border-[#E5372B] aria-[invalid=true]:shadow-[0_0_0_3px_rgba(229,55,43,0.28)]";
+const FIELD_FORCE = {
+  hover: "bg-white shadow-[0_3px_8px_rgba(60,50,20,0.12)]",
+  active: "bg-white",
+  focus: "border-[#1B6EF3] shadow-[0_0_0_3px_rgba(27,110,243,0.35)]"
+};
+const brutalInput = (args) => ({
+  root: `${FIELD_BASE} ${forced(FIELD_FORCE, args.state)}`
+});
+const brutalTextarea = (args) => ({
+  root: `${FIELD_BASE} min-h-[80px] leading-relaxed resize-y ${forced(FIELD_FORCE, args.state)}`
+});
+const brutalSelect = (args) => ({
+  root: "relative inline-block w-full",
+  field: `${FIELD_BASE} appearance-none pr-9 cursor-pointer ${forced(FIELD_FORCE, args.state)}`,
+  chevron: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[#141414]"
+});
+const CHOICE_ROOT = "inline-flex items-center gap-2 cursor-pointer select-none text-[12px] font-semibold text-[#141414] has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60";
+const CHOICE_BOX_BASE = "grid place-items-center h-[18px] w-[18px] shrink-0 border-[1.5px] border-[#141414] bg-[#FFFCF2] transition-colors text-transparent peer-focus-visible:shadow-[0_0_0_3px_rgba(27,110,243,0.35)] peer-disabled:bg-[#EAE3D2] peer-disabled:border-[#141414]/30 peer-aria-[invalid=true]:border-[#E5372B] peer-aria-[invalid=true]:shadow-[0_0_0_3px_rgba(229,55,43,0.28)] peer-data-[invalid=true]:border-[#E5372B] peer-data-[invalid=true]:shadow-[0_0_0_3px_rgba(229,55,43,0.28)]";
+const CHOICE_FORCE = {
+  hover: "shadow-[2px_2px_0_rgba(20,20,20,0.3)]",
+  focus: "border-[#1B6EF3] shadow-[0_0_0_3px_rgba(27,110,243,0.35)]"
+};
+const brutalCheckbox = (args) => ({
+  root: CHOICE_ROOT,
+  box: `${CHOICE_BOX_BASE} rounded-[4px] peer-checked:bg-[#141414] peer-checked:text-[#FFFCF2] ${forced(CHOICE_FORCE, args.state)}`
+});
+const brutalRadio = (args) => ({
+  root: CHOICE_ROOT,
+  box: `${CHOICE_BOX_BASE} rounded-full peer-checked:bg-[#141414] ${forced(CHOICE_FORCE, args.state)}`
+});
+const SWITCH_FORCE = {
+  hover: "shadow-[2px_2px_0_rgba(20,20,20,0.3)]",
+  focus: "border-[#1B6EF3] shadow-[0_0_0_3px_rgba(27,110,243,0.35)]"
+};
+const brutalSwitch = (args) => ({
+  root: "group inline-flex h-[22px] w-[40px] shrink-0 items-center rounded-full border-[1.5px] border-[#141414] bg-[#FFFCF2] p-[2px] cursor-pointer transition-colors aria-[checked=true]:bg-[#1B6EF3] focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_rgba(27,110,243,0.35)] disabled:bg-[#EAE3D2] disabled:cursor-not-allowed aria-[invalid=true]:border-[#E5372B] aria-[invalid=true]:shadow-[0_0_0_3px_rgba(229,55,43,0.28)] " + forced(SWITCH_FORCE, args.state),
+  thumb: "h-[14px] w-[14px] rounded-full border-[1.5px] border-[#141414] bg-white transition-transform group-aria-[checked=true]:translate-x-[18px]"
+});
+const brutalSlider = () => ({
+  root: "cam-range w-[160px] cursor-pointer appearance-none bg-transparent disabled:cursor-not-allowed disabled:opacity-50"
+});
+const BADGE_BASE = "inline-flex items-center rounded-full border-[1.5px] px-[10px] py-[3px] text-[11px] font-bold before:content-[''] before:mr-[6px] before:h-[7px] before:w-[7px] before:rounded-full before:shrink-0";
+const BADGE_VARIANT = {
+  default: "border-[#141414] bg-[#FFFCF2] text-[#141414] before:bg-[#141414]",
+  solid: "border-[#141414] bg-[#141414] text-[#F4EEE0] before:bg-[#F4EEE0]",
+  blue: "border-[#1B6EF3] bg-[#FFFCF2] text-[#1B6EF3] before:bg-[#1B6EF3]",
+  red: "border-[#E5372B] bg-[#FFFCF2] text-[#E5372B] before:bg-[#E5372B]",
+  yellow: "border-[#F5B40C] bg-[#FFFCF2] text-[#9A7100] before:bg-[#F5B40C]",
+  green: "border-[#12A147] bg-[#FFFCF2] text-[#12A147] before:bg-[#12A147]",
+  purple: "border-[#8E55E9] bg-[#FFFCF2] text-[#6E35C8] before:bg-[#8E55E9]"
+};
+const BADGE_FORCE = {
+  hover: "shadow-[2px_2px_0_rgba(20,20,20,0.3)]",
+  active: "bg-[#141414] text-[#F4EEE0] before:bg-[#F4EEE0]",
+  focus: "border-[#1B6EF3] shadow-[0_0_0_3px_rgba(27,110,243,0.35)]",
+  disabled: "border-[rgba(20,20,20,0.3)] bg-[#EAE3D2] text-[rgba(20,20,20,0.4)] before:bg-[rgba(20,20,20,0.3)]",
+  error: "border-[#E5372B] bg-[#FDECEA] text-[#C42B20] before:bg-[#E5372B]"
+};
+function brutalBadge(args) {
+  const variant = BADGE_VARIANT[args.variant ?? "default"] ?? BADGE_VARIANT.default;
+  return { root: `${BADGE_BASE} ${variant} ${forced(BADGE_FORCE, args.state)}` };
+}
+const TT_TRIGGER = {
+  focus: "border-[#1B6EF3] bg-[#FFFCF2] text-[#1B6EF3] shadow-[0_0_0_3px_rgba(27,110,243,0.3)]",
+  error: "border-[#E5372B] bg-[#FFFCF2] text-[#E5372B]"
+};
+const TT_BUBBLE = {
+  focus: "border-[#1B6EF3] shadow-[0_0_0_3px_rgba(27,110,243,0.35)]",
+  error: "bg-[#E5372B] border-[#E5372B]"
+};
+function brutalTooltip(args) {
+  return {
+    root: "relative inline-flex group",
+    trigger: "grid place-items-center h-[26px] w-[26px] rounded-full border-[1.5px] border-[#141414] bg-[#1B6EF3] text-white text-[12px] font-bold cursor-help focus-visible:outline-none focus-visible:shadow-[0_0_0_3px_rgba(27,110,243,0.35)] " + forced(TT_TRIGGER, args.state),
+    bubble: "pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-lg border-[1.5px] border-[#141414] bg-[#141414] px-3 py-1.5 text-[12px] font-semibold text-[#F4EEE0] opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100 shadow-[0_10px_18px_rgba(60,50,20,0.15)] " + forced(TT_BUBBLE, args.state)
+  };
+}
+export {
+  brutalBadge,
+  brutalButton,
+  brutalCheckbox,
+  brutalInput,
+  brutalRadio,
+  brutalSelect,
+  brutalSlider,
+  brutalSwitch,
+  brutalTextarea,
+  brutalTooltip
+};

package/dist/cameleon/skins/brutal/tokens.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Brutal skin tokens — "Swiss Grid × Playful Brutalism × Editorial".
+ * Every value is transcribed from the in-repo design reference
+ * (vendor/design-refs/brutal/FancyUI-Intro-CV-Style.dc.html) — do not eyeball
+ * or round these; the docs skin is calibrated against that file pixel for pixel.
+ * Paper palette, ink borders, five flat accents, Archivo + Space Mono.
+ */
+export declare const brutalTokens: Record<string, string>;

package/dist/cameleon/skins/brutal/tokens.js

@@ -0,0 +1,23 @@
+"use client";
+const brutalTokens = {
+  "--skin-page-bg": "#F4EEE0",
+  "--skin-page-fg": "#141414",
+  "--skin-paper": "#F4EEE0",
+  "--skin-card": "#FBF7EB",
+  "--skin-surface": "#FFFCF2",
+  "--skin-ink": "#141414",
+  "--skin-line": "#141414",
+  "--skin-blue": "#1B6EF3",
+  // Darker blue, used by the reference for `a:hover` only — the single shade
+  // of an accent in the whole system, hence the numeric suffix.
+  "--skin-blue-700": "#144FB0",
+  "--skin-red": "#E5372B",
+  "--skin-yellow": "#F5B40C",
+  "--skin-green": "#12A147",
+  "--skin-purple": "#8E55E9",
+  "--skin-font-sans": "'Archivo', Helvetica, Arial, sans-serif",
+  "--skin-font-mono": "'Space Mono', monospace"
+};
+export {
+  brutalTokens
+};

package/dist/cameleon/skins/default.d.ts

@@ -0,0 +1,2 @@
+import type { Skin } from "../types.js";
+export declare const defaultSkin: Skin;

package/dist/cameleon/skins/default.js

@@ -0,0 +1,79 @@
+"use client";
+const meta = {
+  palette: [
+    { name: "Background", value: "#ffffff", note: "page" },
+    { name: "Foreground", value: "#0a0a0a", note: "text" },
+    { name: "Border", value: "#d4d4d4", note: "lines" },
+    { name: "Accent", value: "#171717", note: "primary" }
+  ],
+  type: [
+    { sample: "Heading", spec: "SYSTEM SANS · 600", style: "font-size:28px;font-weight:600;" },
+    { sample: "Body text", spec: "SYSTEM SANS · 400", style: "font-size:14px;font-weight:400;" }
+  ],
+  specs: {
+    radius: [
+      { size: "6px", label: "md" },
+      { size: "9999px", label: "pill" }
+    ],
+    border: "1px solid neutral-300",
+    shadowRest: "none",
+    shadowHover: "none",
+    spacing: "4 / 8 / 12 / 16 / 24"
+  },
+  responsive: [{ label: "All", note: "fluid single column" }]
+};
+const FIELD = "w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 outline-none transition focus:border-neutral-500 focus:ring-2 focus:ring-neutral-300 disabled:opacity-50 disabled:cursor-not-allowed aria-[invalid=true]:border-red-500 aria-[invalid=true]:ring-red-200";
+const CHOICE_ROOT = "inline-flex items-center gap-2 cursor-pointer select-none text-sm text-neutral-900";
+const CHOICE_BOX = "grid place-items-center h-[18px] w-[18px] shrink-0 border border-neutral-400 bg-white transition text-transparent peer-focus-visible:ring-2 peer-focus-visible:ring-neutral-300 peer-disabled:opacity-40 peer-aria-[invalid=true]:border-red-500 peer-data-[invalid=true]:border-red-500";
+const button = (args) => ({
+  root: "cam-btn inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium cursor-pointer transition-colors border-neutral-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 disabled:pointer-events-none disabled:opacity-50 " + (args.variant === "destructive" ? "bg-red-600 text-white hover:bg-red-500" : args.variant === "secondary" ? "bg-white text-neutral-900 hover:bg-neutral-100" : "bg-neutral-900 text-white hover:bg-neutral-700"),
+  label: ""
+});
+const badge = (args) => ({
+  root: "inline-flex items-center rounded-full border border-neutral-300 bg-white px-2.5 py-0.5 text-xs font-medium text-neutral-700 before:content-[''] before:mr-1.5 before:h-[7px] before:w-[7px] before:rounded-full before:bg-neutral-400"
+});
+const defaultSkin = {
+  name: "default",
+  label: "Default",
+  colorScheme: "light",
+  meta,
+  tokens: {
+    "--skin-page-bg": "#ffffff",
+    "--skin-page-fg": "#0a0a0a",
+    "--skin-font-sans": "ui-sans-serif, system-ui, -apple-system, sans-serif"
+  },
+  recipes: {
+    button,
+    badge,
+    input: () => ({ root: FIELD }),
+    textarea: () => ({ root: `${FIELD} min-h-[80px] resize-y` }),
+    select: () => ({
+      root: "relative inline-block w-full",
+      field: `${FIELD} appearance-none pr-9 cursor-pointer`,
+      chevron: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-neutral-500"
+    }),
+    checkbox: () => ({
+      root: CHOICE_ROOT,
+      box: `${CHOICE_BOX} rounded peer-checked:bg-neutral-900 peer-checked:text-white`
+    }),
+    radio: () => ({
+      root: CHOICE_ROOT,
+      box: `${CHOICE_BOX} rounded-full peer-checked:bg-neutral-900`
+    }),
+    switch: () => ({
+      root: "group inline-flex h-[22px] w-[40px] shrink-0 items-center rounded-full border border-neutral-300 bg-neutral-200 p-[2px] cursor-pointer transition-colors aria-[checked=true]:bg-neutral-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 disabled:opacity-50",
+      thumb: "h-[14px] w-[14px] rounded-full bg-white shadow transition-transform group-aria-[checked=true]:translate-x-[18px]"
+    }),
+    slider: () => ({
+      root: "cam-range w-[160px] cursor-pointer appearance-none bg-transparent disabled:opacity-50"
+    }),
+    tooltip: () => ({
+      root: "relative inline-flex group",
+      trigger: "grid place-items-center h-[26px] w-[26px] rounded-full border border-neutral-300 bg-neutral-900 text-white text-xs font-bold cursor-help",
+      bubble: "pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-md bg-neutral-900 px-3 py-1.5 text-xs text-white opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100"
+    })
+  }
+};
+export {
+  defaultSkin
+};

package/dist/cameleon/skins/glass/index.d.ts

@@ -0,0 +1,2 @@
+import type { Skin } from "../../types.js";
+export declare const glassSkin: Skin;

package/dist/cameleon/skins/glass/index.js

@@ -0,0 +1,16 @@
+"use client";
+import { glassTokens } from "./tokens.js";
+import { glassMeta } from "./meta.js";
+import { glassRecipes } from "./recipes.js";
+/* empty css          */
+const glassSkin = {
+  name: "glass",
+  label: "Glass",
+  colorScheme: "dark",
+  tokens: glassTokens,
+  meta: glassMeta,
+  recipes: glassRecipes
+};
+export {
+  glassSkin
+};

package/dist/cameleon/skins/glass/meta.d.ts

@@ -0,0 +1,3 @@
+import type { SkinMeta } from "../../types.js";
+/** Glass design metadata — frosted translucent surfaces on a purple gradient world. */
+export declare const glassMeta: SkinMeta;