fancy-ui-react 0.2.0

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

@@ -0,0 +1,63 @@
+"use client";
+const glassMeta = {
+  palette: [
+    { name: "Glass 8%", value: "rgba(255,255,255,0.08)", note: "section card" },
+    { name: "Glass 12%", value: "rgba(255,255,255,0.12)", note: "inner surface" },
+    { name: "Border 25%", value: "rgba(255,255,255,0.25)", note: "hairline edge" },
+    { name: "Blue", value: "#7dd3fc", note: "accent · info" },
+    { name: "Red", value: "#fca5a5", note: "accent · error" },
+    { name: "Yellow", value: "#fde68a", note: "accent · warn" },
+    { name: "Green", value: "#86efac", note: "accent · ok" },
+    { name: "Purple", value: "#c4b5fd", note: "accent · brand" }
+  ],
+  type: [
+    {
+      sample: "Display",
+      spec: "SYSTEM SANS 600 · -0.03EM · CLAMP(48, 8VW, 112)",
+      style: "font-size:60px;font-weight:600;letter-spacing:-0.03em;line-height:1;"
+    },
+    {
+      sample: "Heading — section title",
+      spec: "SYSTEM SANS 600 · 22–30",
+      style: "font-size:28px;font-weight:600;letter-spacing:-0.02em;"
+    },
+    {
+      sample: "Subheading — frosted panel",
+      spec: "SYSTEM SANS 500 · 16–19",
+      style: "font-size:18px;font-weight:500;letter-spacing:-0.01em;"
+    },
+    {
+      sample: "Body — Translucent surfaces float above a deep gradient, softened by blur and bloom.",
+      spec: "SYSTEM SANS 400 · 14–16 · 1.6 LINE",
+      style: "font-size:15px;font-weight:400;line-height:1.6;max-width:52ch;"
+    },
+    {
+      sample: "mono-label — rgba(255,255,255,0.12)",
+      spec: "SF MONO 500 · 10–12 + 0.02EM",
+      style: "font-family:var(--skin-font-mono);font-size:11px;font-weight:500;letter-spacing:0.02em;"
+    }
+  ],
+  specs: {
+    radius: [
+      { size: "12px", label: "tile · input" },
+      { size: "16px", label: "card" },
+      { size: "24px", label: "button · panel" },
+      { size: "999px", label: "pill · badge" }
+    ],
+    border: "1px translucent white (rgba(255,255,255,.25)), hairline on every surface.",
+    shadowRest: "0 2px 12px rgba(0,0,0,.18)",
+    shadowHover: "0 12px 34px rgba(0,0,0,.30) soft bloom",
+    spacing: "4 / 8 / 12 / 16 / 24"
+  },
+  responsive: [
+    { label: "Desktop ≥1024", note: "wide frosted panels · blur + bloom on hover · 2–3 col grids" },
+    { label: "Tablet 720–1023", note: "stacked glass cards · reduced blur radius · 2-col grids" },
+    {
+      label: "Mobile <720",
+      note: "single column · solid-leaning surfaces for legibility · 44px targets"
+    }
+  ]
+};
+export {
+  glassMeta
+};

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

@@ -0,0 +1,24 @@
+/**
+ * Glass recipes — the full "Core components" set, frosted-glass art direction.
+ * Translucent surfaces on a dark/gradient world: light text, `bg-white/10..15`,
+ * `border-white/20..25`, `backdrop-blur-md`, soft shadows and gentle transitions.
+ * 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-white/50` (no hard offset). Error = red-tinted glass
+ * (`border-red-300/50`, `ring-red-400/40`) with text kept readable/white.
+ * A specular top-sheen is added by glass.css via `[data-skin="glass"] .cam-btn`.
+ */
+import type { RecipeArgs, RecipeResult, SkinRecipes } from "../../types.js";
+export declare function glassButton(args: RecipeArgs): RecipeResult;
+export declare const glassInput: (args: RecipeArgs) => RecipeResult;
+export declare const glassTextarea: (args: RecipeArgs) => RecipeResult;
+export declare const glassSelect: (args: RecipeArgs) => RecipeResult;
+export declare const glassCheckbox: (args: RecipeArgs) => RecipeResult;
+export declare const glassRadio: (args: RecipeArgs) => RecipeResult;
+export declare const glassSwitch: (args: RecipeArgs) => RecipeResult;
+export declare const glassSlider: () => RecipeResult;
+export declare function glassBadge(args: RecipeArgs): RecipeResult;
+export declare const glassTooltip: (args: RecipeArgs) => RecipeResult;
+export declare const glassRecipes: SkinRecipes;

package/dist/cameleon/skins/glass/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-2xl border font-medium whitespace-nowrap cursor-pointer select-none backdrop-blur-md transition duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 disabled:pointer-events-none disabled:opacity-40";
+const BTN_SIZE = {
+  sm: "px-4 py-1.5 text-xs",
+  md: "px-5 py-2.5 text-sm",
+  lg: "px-6 py-3 text-base"
+};
+const BTN_VARIANT = {
+  primary: "border-white/25 bg-white/15 text-white shadow-[0_2px_12px_rgba(0,0,0,0.18)] hover:bg-white/25 hover:shadow-[0_12px_34px_rgba(0,0,0,0.30)]",
+  secondary: "border-white/15 bg-white/[0.06] text-white/90 hover:bg-white/15",
+  destructive: "border-red-300/40 bg-red-500/25 text-white hover:bg-red-500/40 focus-visible:ring-red-300/60"
+};
+const BTN_FORCE = {
+  hover: "bg-white/25 shadow-[0_12px_34px_rgba(0,0,0,0.30)]",
+  active: "bg-white/30 shadow-[0_2px_12px_rgba(0,0,0,0.18)]",
+  focus: "ring-2 ring-white/50"
+};
+function glassButton(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-xl border border-white/20 bg-white/10 px-3.5 py-2 text-sm text-white outline-none backdrop-blur-md transition duration-200 ease-out placeholder:text-white/40 hover:bg-white/15 hover:border-white/25 focus:border-white/40 focus:ring-2 focus:ring-white/50 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-white/10 aria-[invalid=true]:border-red-300/50 aria-[invalid=true]:ring-2 aria-[invalid=true]:ring-red-400/40";
+const FIELD_FORCE = {
+  hover: "bg-white/15 border-white/25",
+  active: "bg-white/15",
+  focus: "border-white/40 ring-2 ring-white/50"
+};
+const glassInput = (args) => ({
+  root: `${FIELD_BASE} ${forced(FIELD_FORCE, args.state)}`
+});
+const glassTextarea = (args) => ({
+  root: `${FIELD_BASE} min-h-[80px] leading-relaxed resize-y ${forced(FIELD_FORCE, args.state)}`
+});
+const glassSelect = (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-white/70"
+});
+const CHOICE_ROOT = "inline-flex items-center gap-2 cursor-pointer select-none text-sm text-white 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/25 bg-white/10 backdrop-blur-md transition text-transparent peer-focus-visible:ring-2 peer-focus-visible:ring-white/50 peer-disabled:opacity-40 peer-aria-[invalid=true]:border-red-300/50 peer-aria-[invalid=true]:ring-2 peer-aria-[invalid=true]:ring-red-400/40 peer-data-[invalid=true]:border-red-300/50 peer-data-[invalid=true]:ring-2 peer-data-[invalid=true]:ring-red-400/40";
+const CHOICE_FORCE = {
+  hover: "bg-white/20 border-white/40",
+  focus: "border-white/40 ring-2 ring-white/50"
+};
+const glassCheckbox = (args) => ({
+  root: CHOICE_ROOT,
+  box: `${CHOICE_BOX_BASE} rounded-md peer-checked:bg-white/80 peer-checked:border-white/60 peer-checked:text-black ${forced(CHOICE_FORCE, args.state)}`
+});
+const glassRadio = (args) => ({
+  root: CHOICE_ROOT,
+  box: `${CHOICE_BOX_BASE} rounded-full peer-checked:bg-white/80 peer-checked:border-white/60 ${forced(CHOICE_FORCE, args.state)}`
+});
+const SWITCH_FORCE = {
+  hover: "bg-white/20 border-white/40",
+  focus: "border-white/40 ring-2 ring-white/50"
+};
+const glassSwitch = (args) => ({
+  root: "group inline-flex h-[22px] w-[40px] shrink-0 items-center rounded-full border border-white/25 bg-white/10 p-[2px] cursor-pointer backdrop-blur-md transition-colors aria-[checked=true]:bg-white/40 aria-[checked=true]:border-white/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 disabled:opacity-40 disabled:cursor-not-allowed aria-[invalid=true]:border-red-300/50 aria-[invalid=true]:ring-2 aria-[invalid=true]:ring-red-400/40 " + forced(SWITCH_FORCE, args.state),
+  thumb: "h-[14px] w-[14px] rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.35)] transition-transform group-aria-[checked=true]:translate-x-[18px]"
+});
+const glassSlider = () => ({
+  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 backdrop-blur-md before:content-[''] before:mr-1.5 before:h-[7px] before:w-[7px] before:rounded-full before:shrink-0";
+const BADGE_VARIANT = {
+  default: "border-white/25 bg-white/10 text-white before:bg-white",
+  solid: "border-white/60 bg-white/90 text-black before:bg-black",
+  blue: "border-blue-300/40 bg-blue-400/20 text-blue-100 before:bg-blue-300",
+  red: "border-red-300/40 bg-red-400/20 text-red-100 before:bg-red-300",
+  yellow: "border-yellow-300/40 bg-yellow-400/20 text-yellow-100 before:bg-yellow-300",
+  green: "border-green-300/40 bg-green-400/20 text-green-100 before:bg-green-300",
+  purple: "border-purple-300/40 bg-purple-400/20 text-purple-100 before:bg-purple-300"
+};
+const BADGE_FORCE = {
+  hover: "bg-white/20 shadow-[0_2px_12px_rgba(0,0,0,0.18)]",
+  active: "bg-white/90 text-black before:bg-black",
+  focus: "border-white/40 ring-2 ring-white/50",
+  disabled: "border-white/15 bg-white/[0.04] text-white/40 before:bg-white/40",
+  error: "border-red-300/50 bg-red-400/20 text-red-100 before:bg-red-300"
+};
+function glassBadge(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-white/40 ring-2 ring-white/50",
+  error: "border-red-300/50 bg-red-400/20 text-red-100"
+};
+const TT_BUBBLE = {
+  focus: "border-white/40 ring-2 ring-white/50 opacity-100",
+  error: "border-red-300/50 bg-red-500/70 opacity-100"
+};
+const glassTooltip = (args) => ({
+  root: "relative inline-flex group",
+  trigger: "grid place-items-center h-[26px] w-[26px] rounded-full border border-white/25 bg-white/10 backdrop-blur-md text-white text-[12px] font-semibold cursor-help focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/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-xl border border-white/15 bg-black/70 backdrop-blur-md px-3 py-1.5 text-[12px] font-medium text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100 shadow-[0_10px_30px_rgba(0,0,0,0.4)] " + forced(TT_BUBBLE, args.state)
+});
+const glassRecipes = {
+  button: glassButton,
+  input: glassInput,
+  textarea: glassTextarea,
+  select: glassSelect,
+  checkbox: glassCheckbox,
+  radio: glassRadio,
+  switch: glassSwitch,
+  slider: glassSlider,
+  badge: glassBadge,
+  tooltip: glassTooltip
+};
+export {
+  glassBadge,
+  glassButton,
+  glassCheckbox,
+  glassInput,
+  glassRadio,
+  glassRecipes,
+  glassSelect,
+  glassSlider,
+  glassSwitch,
+  glassTextarea,
+  glassTooltip
+};

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

@@ -0,0 +1,5 @@
+/**
+ * Glass skin tokens — the library's existing premium / frosted direction.
+ * Translucent surfaces over a rich gradient backdrop; light type; soft blooms.
+ */
+export declare const glassTokens: Record<string, string>;

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

@@ -0,0 +1,18 @@
+"use client";
+const glassTokens = {
+  "--skin-page-bg": "radial-gradient(120% 120% at 15% 0%, #312e81 0%, #4c1d95 42%, #831843 100%)",
+  "--skin-page-fg": "#ffffff",
+  "--skin-font-sans": "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
+  "--skin-card": "rgba(255,255,255,0.08)",
+  "--skin-surface": "rgba(255,255,255,0.12)",
+  "--skin-line": "rgba(255,255,255,0.25)",
+  "--skin-font-mono": "ui-monospace, SFMono-Regular, 'SF Mono', monospace",
+  "--skin-blue": "#7dd3fc",
+  "--skin-red": "#fca5a5",
+  "--skin-yellow": "#fde68a",
+  "--skin-green": "#86efac",
+  "--skin-purple": "#c4b5fd"
+};
+export {
+  glassTokens
+};

package/dist/cameleon/skins/retro-os/index.d.ts

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

package/dist/cameleon/skins/retro-os/index.js

@@ -0,0 +1,24 @@
+"use client";
+import { retroOsTokens } from "./tokens.js";
+import { retroOsMeta } from "./meta.js";
+import { retroOsRecipes } from "./recipes.js";
+import { buttonTrailing } from "./ornaments.js";
+/* empty css             */
+const retroOsSkin = {
+  name: "retro-os",
+  label: "Retro OS",
+  colorScheme: "light",
+  tokens: retroOsTokens,
+  meta: retroOsMeta,
+  fonts: [
+    {
+      id: "cam-font-retro-os",
+      href: "https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;900&family=IBM+Plex+Mono:wght@400;500;600;700&family=Silkscreen:wght@400;700&display=swap"
+    }
+  ],
+  recipes: retroOsRecipes,
+  ornaments: { buttonTrailing }
+};
+export {
+  retroOsSkin
+};

package/dist/cameleon/skins/retro-os/meta.d.ts

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

package/dist/cameleon/skins/retro-os/meta.js

@@ -0,0 +1,61 @@
+"use client";
+const retroOsMeta = {
+  palette: [
+    { name: "Bureau", value: "#E5DCC2", note: "hors fenêtre" },
+    { name: "Fenêtre", value: "#F1E9D4", note: "papier + scanlines" },
+    { name: "Panneau", value: "#FAF5E6", note: "menubar · explorer · cartes" },
+    { name: "Surface", value: "#FDFAF0", note: "champ · scène" },
+    { name: "Encre", value: "#191308", note: "texte · bordures" },
+    { name: "Jaune foncé", value: "#7D6414", note: "01 EXP" },
+    { name: "Rouge", value: "#A0442F", note: "02 PROJ" },
+    { name: "Bleu", value: "#3F62A7", note: "03 SKILLS" },
+    { name: "Vert", value: "#3A6B42", note: "04 EDU" },
+    { name: "Jaune doré", value: "#B8912B", note: "05 LANG" }
+  ],
+  type: [
+    {
+      sample: "Rama Herbin",
+      spec: "ARCHIVO 900 · −1.5PX · 44",
+      style: "font-size:40px;font-weight:900;letter-spacing:-1.5px;line-height:1;"
+    },
+    {
+      sample: "TITRE DE FENÊTRE — 12 / 700",
+      spec: "SILKSCREEN 700 CAPS · 10–12 · UI PIXEL",
+      style: "font-family:var(--skin-font-pixel);font-size:12px;font-weight:700;"
+    },
+    {
+      sample: "Entreprise / projet — 16 / 700",
+      spec: "ARCHIVO 700 · 16",
+      style: "font-size:16px;font-weight:700;"
+    },
+    {
+      sample: "Corps — 13 / 400, interligne 1.55. Puces carrées.",
+      spec: "ARCHIVO 400 · 13 · LH 1.55",
+      style: "font-size:13px;font-weight:400;line-height:1.55;max-width:46ch;"
+    },
+    {
+      sample: "DATES — 11 / 600 · STATUT TASKBAR — 12",
+      spec: "IBM PLEX MONO 400–700 · 10.5–12.5 · MÉTA",
+      style: "font-family:var(--skin-font-mono);font-size:11px;font-weight:600;letter-spacing:1px;"
+    }
+  ],
+  specs: {
+    radius: [
+      { size: "8/4px", label: "fenêtre — escalier" },
+      { size: "4px", label: "boutons fenêtre" },
+      { size: "0", label: "tout le reste" }
+    ],
+    border: "2px encre standard · 3px cadre bureau/barres · 1.5px chips · séparateurs 1px pointillé #B8AC8C",
+    shadowRest: "dures, 0 flou — carte/bouton 3×3 · petit bouton 2×2 · bureau 8×8",
+    shadowHover: "soulève −1,−1 + ombre +1 · actif s'enfonce +2,+2 + ombre 0 · fenêtre hover 5×5",
+    spacing: "grille 4 / 8 / 12 / 16 / 20 / 24"
+  },
+  responsive: [
+    { label: "Desktop ≥1024", note: "fenêtres tuilées + taskbar fixe · hover lifts on" },
+    { label: "Tablet 720–1023", note: "fenêtres empilées · menubar sticky · chips wrap" },
+    { label: "Mobile <720", note: "colonne unique · cibles 44px+ · ombres réduites 2×2" }
+  ]
+};
+export {
+  retroOsMeta
+};

package/dist/cameleon/skins/retro-os/ornaments.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Retro OS ornaments as plain functions returning JSX. The Start-button glyph
+ * is a static 2x2 pixel grid (one of the skin's four accents per cell),
+ * unrelated to the button's variant, so unlike Brutal's arrow it does not
+ * need currentColor.
+ */
+import type { ReactNode } from "react";
+import type { RecipeArgs } from "../../types.js";
+export declare function buttonTrailing(_args: RecipeArgs): ReactNode;

package/dist/cameleon/skins/retro-os/ornaments.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+function buttonTrailing(_args) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": "true",
+      style: {
+        display: "inline-grid",
+        gridTemplateColumns: "6px 6px",
+        gridTemplateRows: "6px 6px",
+        gap: "1.5px",
+        padding: "1.5px",
+        background: "#191308",
+        flex: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { background: "#B8912B" } }),
+        /* @__PURE__ */ jsx("span", { style: { background: "#A0442F" } }),
+        /* @__PURE__ */ jsx("span", { style: { background: "#3F62A7" } }),
+        /* @__PURE__ */ jsx("span", { style: { background: "#3A6B42" } })
+      ]
+    }
+  );
+}
+export {
+  buttonTrailing
+};

package/dist/cameleon/skins/retro-os/recipes.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Retro-OS recipes — the full "Core components" set in a late-90s desktop-OS art
+ * direction: hard square corners (`rounded-none`), thick 2px ink borders, and
+ * zero-blur block shadows that make every control feel like a physical chip.
+ * Motion is a tactile press: hover LIFTS the control (nudge up-left, shadow grows
+ * a pixel), active SINKS it (nudge down-right, shadow collapses to none).
+ *
+ * Static class literals only (Tailwind JIT-safe). Live states are attribute-driven
+ * (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 overrides.
+ *
+ * Palette: desk #F1E9D4, panel #FAF5E6, inner card #FDFAF0, ink #191308,
+ * muted #5C5340, blue #3F62A7, red #A0442F, gold #B8912B, green #3A6B42,
+ * dark-yellow #7D6414, tints yellow-fill #ECD77F / yellow-pale #F7EFD2.
+ * Grammar: border-2 #191308 square; shadow rest 3x3 (sm 2x2), zero blur.
+ * hover = lift (-1px,-1px, shadow +1px); active = sink (+2px,+2px, shadow-none).
+ * disabled = dashed #B8AC8C border + bg #F1E9D4 + text #B8AC8C + shadow-none.
+ * error = border/text #A0442F + bg #F8E8DC. field focus = bg #FAF5E6 + shadow 3x3.
+ * non-field focus = outline-2 offset-2 #3F62A7 (blue). Fonts via CSS vars:
+ * pixel = Silkscreen, mono = IBM Plex Mono, sans = Archivo.
+ */
+import type { RecipeArgs, RecipeResult, SkinRecipes } from "../../types.js";
+export declare function retroOsButton(args: RecipeArgs): RecipeResult;
+export declare const retroOsInput: (args: RecipeArgs) => RecipeResult;
+export declare const retroOsTextarea: (args: RecipeArgs) => RecipeResult;
+export declare const retroOsSelect: (args: RecipeArgs) => RecipeResult;
+export declare const retroOsCheckbox: (args: RecipeArgs) => RecipeResult;
+export declare const retroOsRadio: (args: RecipeArgs) => RecipeResult;
+export declare const retroOsSwitch: (args: RecipeArgs) => RecipeResult;
+export declare const retroOsSlider: () => RecipeResult;
+export declare function retroOsBadge(args: RecipeArgs): RecipeResult;
+export declare function retroOsTooltip(args: RecipeArgs): RecipeResult;
+export declare const retroOsRecipes: SkinRecipes;

package/dist/cameleon/skins/retro-os/recipes.js

@@ -0,0 +1,126 @@
+"use client";
+const forced = (map, state) => state && map[state] || "";
+const BTN_BASE = "inline-flex items-center justify-center gap-2 rounded-none border-2 border-[#191308] whitespace-nowrap font-[family-name:var(--skin-font-pixel)] font-bold cursor-pointer select-none transition-[transform,box-shadow,background-color] duration-100 hover:-translate-x-px hover:-translate-y-px active:translate-x-[2px] active:translate-y-[2px] active:shadow-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#3F62A7] disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-dashed disabled:border-[#B8AC8C] disabled:bg-[#F1E9D4] disabled:text-[#B8AC8C] disabled:shadow-none";
+const BTN_SIZE = {
+  sm: "px-[14px] py-[6px] text-[10px] shadow-[2px_2px_0_#191308] hover:shadow-[3px_3px_0_#191308]",
+  md: "px-4 py-[7px] text-[11px] shadow-[3px_3px_0_#191308] hover:shadow-[4px_4px_0_#191308]",
+  lg: "px-5 py-[9px] text-[12px] shadow-[3px_3px_0_#191308] hover:shadow-[4px_4px_0_#191308]"
+};
+const BTN_VARIANT = {
+  primary: "bg-[#ECD77F] text-[#191308]",
+  secondary: "bg-[#FAF5E6] text-[#191308]",
+  destructive: "bg-[#A0442F] text-[#FAF5E6]"
+};
+const BTN_FORCE = {
+  hover: "-translate-x-px -translate-y-px shadow-[4px_4px_0_#191308]",
+  active: "translate-x-[2px] translate-y-[2px] shadow-none",
+  focus: "outline outline-2 outline-offset-2 outline-[#3F62A7]"
+};
+function retroOsButton(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-none border-2 border-[#191308] bg-[#FDFAF0] px-3 py-[9px] font-[family-name:var(--skin-font-mono)] text-[12.5px] text-[#191308] caret-[#191308] outline-none placeholder:text-[#5C5340] transition-[background-color,box-shadow] duration-100 hover:bg-[#F7EFD2] focus:bg-[#FAF5E6] focus:shadow-[3px_3px_0_#191308] disabled:cursor-not-allowed disabled:border-dashed disabled:border-[#B8AC8C] disabled:bg-[#F1E9D4] disabled:text-[#B8AC8C] disabled:shadow-none aria-[invalid=true]:border-[#A0442F] aria-[invalid=true]:bg-[#F8E8DC] aria-[invalid=true]:text-[#A0442F]";
+const FIELD_FORCE = {
+  hover: "bg-[#F7EFD2]",
+  active: "bg-[#FAF5E6]",
+  focus: "bg-[#FAF5E6] shadow-[3px_3px_0_#191308]"
+};
+const retroOsInput = (args) => ({
+  root: `${FIELD_BASE} ${forced(FIELD_FORCE, args.state)}`
+});
+const retroOsTextarea = (args) => ({
+  root: `${FIELD_BASE} min-h-[80px] leading-relaxed resize-y ${forced(FIELD_FORCE, args.state)}`
+});
+const retroOsSelect = (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-[#191308]"
+});
+const CHOICE_ROOT = "inline-flex items-center gap-[10px] cursor-pointer select-none text-[13px] text-[#191308] has-[:disabled]:cursor-not-allowed has-[:disabled]:text-[#B8AC8C]";
+const CHOICE_BOX_BASE = "grid place-items-center h-[18px] w-[18px] shrink-0 border-2 border-[#191308] bg-[#FDFAF0] transition-colors text-transparent peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[#3F62A7] peer-disabled:border-dashed peer-disabled:border-[#B8AC8C] peer-disabled:bg-[#F1E9D4] peer-aria-[invalid=true]:border-[#A0442F] peer-aria-[invalid=true]:bg-[#F8E8DC] peer-data-[invalid=true]:border-[#A0442F] peer-data-[invalid=true]:bg-[#F8E8DC]";
+const CHOICE_FORCE = {
+  hover: "shadow-[2px_2px_0_#191308]",
+  focus: "outline outline-2 outline-offset-2 outline-[#3F62A7]"
+};
+const retroOsCheckbox = (args) => ({
+  root: CHOICE_ROOT,
+  box: `${CHOICE_BOX_BASE} rounded-none peer-checked:bg-[#191308] peer-checked:text-[#FAF5E6] ${forced(CHOICE_FORCE, args.state)}`
+});
+const retroOsRadio = (args) => ({
+  root: CHOICE_ROOT,
+  box: `${CHOICE_BOX_BASE} rounded-full peer-checked:bg-[#191308] peer-checked:shadow-[inset_0_0_0_3px_#FAF5E6] ${forced(CHOICE_FORCE, args.state)}`
+});
+const SWITCH_FORCE = {
+  hover: "shadow-[2px_2px_0_#191308]",
+  focus: "outline outline-2 outline-offset-2 outline-[#3F62A7]"
+};
+const retroOsSwitch = (args) => ({
+  root: "group inline-flex h-[22px] w-[42px] shrink-0 items-center rounded-none border-2 border-[#191308] bg-[#F1E9D4] p-px cursor-pointer transition-colors aria-[checked=true]:bg-[#3A6B42] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#3F62A7] disabled:cursor-not-allowed disabled:border-dashed disabled:border-[#B8AC8C] disabled:bg-[#F1E9D4] disabled:shadow-none aria-[invalid=true]:border-[#A0442F] aria-[invalid=true]:bg-[#F8E8DC] " + forced(SWITCH_FORCE, args.state),
+  thumb: "h-[14px] w-[14px] rounded-none border-2 border-[#191308] bg-[#FAF5E6] transition-transform group-aria-[checked=true]:translate-x-[22px]"
+});
+const retroOsSlider = () => ({
+  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-none border-2 border-[#191308] px-[7px] py-px font-[family-name:var(--skin-font-mono)] text-[10.5px] font-bold";
+const BADGE_VARIANT = {
+  default: "bg-[#FDFAF0] text-[#191308]",
+  solid: "bg-[#191308] text-[#FAF5E6]",
+  blue: "bg-[#3F62A7] text-[#FAF5E6]",
+  red: "bg-[#A0442F] text-[#FAF5E6]",
+  yellow: "bg-[#B8912B] text-[#191308]",
+  green: "bg-[#3A6B42] text-[#FAF5E6]",
+  purple: "bg-[#7D6414] text-[#FAF5E6]"
+};
+const BADGE_FORCE = {
+  hover: "bg-[#ECD77F] text-[#191308]",
+  active: "bg-[#191308] text-[#FAF5E6]",
+  focus: "outline outline-2 outline-offset-2 outline-[#3F62A7]",
+  disabled: "border-dashed border-[#B8AC8C] bg-[#F1E9D4] text-[#B8AC8C]",
+  error: "border-[#A0442F] bg-[#F8E8DC] text-[#A0442F]"
+};
+function retroOsBadge(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: "outline outline-2 outline-offset-2 outline-[#3F62A7]",
+  error: "bg-[#A0442F] text-[#FAF5E6]"
+};
+const TT_BUBBLE = {
+  focus: "outline outline-2 outline-offset-2 outline-[#3F62A7]",
+  error: "bg-[#A0442F] after:border-t-[#A0442F]"
+};
+function retroOsTooltip(args) {
+  return {
+    root: "relative inline-flex group",
+    trigger: "grid place-items-center h-[22px] w-[22px] rounded-none border-2 border-[#191308] bg-[#ECD77F] text-[#191308] text-[11px] font-bold font-[family-name:var(--skin-font-pixel)] cursor-help focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#3F62A7] " + forced(TT_TRIGGER, args.state),
+    bubble: "pointer-events-none absolute bottom-full left-1/2 mb-[9px] -translate-x-1/2 whitespace-nowrap rounded-none border-2 border-[#191308] bg-[#191308] px-[10px] py-[5px] font-[family-name:var(--skin-font-mono)] text-[11px] text-[#FAF5E6] opacity-0 transition-opacity duration-100 group-hover:opacity-100 group-focus-within:opacity-100 after:content-[''] after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 after:border-x-[6px] after:border-x-transparent after:border-t-[7px] after:border-t-[#191308] " + forced(TT_BUBBLE, args.state)
+  };
+}
+const retroOsRecipes = {
+  button: retroOsButton,
+  input: retroOsInput,
+  textarea: retroOsTextarea,
+  select: retroOsSelect,
+  checkbox: retroOsCheckbox,
+  radio: retroOsRadio,
+  switch: retroOsSwitch,
+  slider: retroOsSlider,
+  badge: retroOsBadge,
+  tooltip: retroOsTooltip
+};
+export {
+  retroOsBadge,
+  retroOsButton,
+  retroOsCheckbox,
+  retroOsInput,
+  retroOsRadio,
+  retroOsRecipes,
+  retroOsSelect,
+  retroOsSlider,
+  retroOsSwitch,
+  retroOsTextarea,
+  retroOsTooltip
+};

package/dist/cameleon/skins/retro-os/tokens.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Retro OS skin tokens — "hard-shadow desktop chrome" palette.
+ * Desk/panel/card paper stack, ink borders, five flat accents, Archivo +
+ * IBM Plex Mono + Silkscreen.
+ *
+ * Paper stack note: the desk (#E5DCC2) is the surface OUTSIDE the window; the
+ * window itself is #F1E9D4 (--skin-page-bg / --skin-paper), panels are #FAF5E6
+ * (--skin-card) and inputs/stages are #FDFAF0 (--skin-surface).
+ *
+ * Accent mapping note: the design has exactly five accents and no purple.
+ * --skin-yellow carries the gold accent #B8912B (the lighter #ECD77F is a
+ * fill tint, not an accent, and lives in per-skin CSS instead of tokens).
+ * --skin-purple is filled by the dark-yellow #7D6414 stand-in so consumers
+ * of the shared five-accent contract still get a fifth distinct color.
+ */
+export declare const retroOsTokens: Record<string, string>;

package/dist/cameleon/skins/retro-os/tokens.js

@@ -0,0 +1,23 @@
+"use client";
+const retroOsTokens = {
+  "--skin-desk": "#E5DCC2",
+  "--skin-page-bg": "#F1E9D4",
+  "--skin-page-fg": "#191308",
+  "--skin-paper": "#F1E9D4",
+  "--skin-card": "#FAF5E6",
+  "--skin-surface": "#FDFAF0",
+  "--skin-ink": "#191308",
+  "--skin-line": "#191308",
+  "--skin-muted": "#5C5340",
+  "--skin-blue": "#3F62A7",
+  "--skin-red": "#A0442F",
+  "--skin-yellow": "#B8912B",
+  "--skin-green": "#3A6B42",
+  "--skin-purple": "#7D6414",
+  "--skin-font-sans": "'Archivo', ui-sans-serif, system-ui, sans-serif",
+  "--skin-font-mono": "'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace",
+  "--skin-font-pixel": "'Silkscreen', 'IBM Plex Mono', monospace"
+};
+export {
+  retroOsTokens
+};

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

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

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

@@ -0,0 +1,24 @@
+"use client";
+import { terminalTokens } from "./tokens.js";
+import { terminalRecipes } from "./recipes.js";
+import { terminalMeta } from "./meta.js";
+import { buttonTrailing } from "./ornaments.js";
+/* empty css             */
+const terminalSkin = {
+  name: "terminal",
+  label: "Terminal",
+  colorScheme: "dark",
+  tokens: terminalTokens,
+  fonts: [
+    {
+      id: "cam-font-terminal",
+      href: "https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"
+    }
+  ],
+  recipes: terminalRecipes,
+  ornaments: { buttonTrailing },
+  meta: terminalMeta
+};
+export {
+  terminalSkin
+};

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

@@ -0,0 +1,3 @@
+import type { SkinMeta } from "../../types.js";
+/** Terminal design metadata — CRT green-on-black, monospace everywhere. */
+export declare const terminalMeta: SkinMeta;