fancy-ui-svelte 0.9.1 → 0.11.0

package/dist/cameleon/primitives/Select.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLSelectAttributes } from "svelte/elements";
+	import type { PartState } from "../types.js";
+	export interface SelectProps extends Omit<HTMLSelectAttributes, "class"> {
+		error?: boolean;
+		demoState?: PartState;
+		class?: string;
+		value?: string;
+		children?: Snippet;
+		ref?: HTMLSelectElement | null;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { useSkin } from "../context.js";
+
+	let {
+		error = false,
+		demoState,
+		class: className,
+		value = $bindable(""),
+		children,
+		ref = $bindable(null),
+		...rest
+	}: SelectProps = $props();
+
+	const ctx = useSkin();
+	const parts = $derived(ctx.skin.recipes.select({ state: demoState }));
+</script>
+
+<div class={cn(parts.root, className)}>
+	<select bind:this={ref} bind:value class={parts.field} aria-invalid={error} {...rest}>
+		{@render children?.()}
+	</select>
+	<span class={parts.chevron} aria-hidden="true">
+		<svg
+			width="14"
+			height="14"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2.5"
+		>
+			<path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
+		</svg>
+	</span>
+</div>

package/dist/cameleon/primitives/Select.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+import type { HTMLSelectAttributes } from "svelte/elements";
+import type { PartState } from "../types.js";
+export interface SelectProps extends Omit<HTMLSelectAttributes, "class"> {
+    error?: boolean;
+    demoState?: PartState;
+    class?: string;
+    value?: string;
+    children?: Snippet;
+    ref?: HTMLSelectElement | null;
+}
+declare const Select: import("svelte").Component<SelectProps, {}, "ref" | "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/cameleon/primitives/Slider.svelte

@@ -0,0 +1,34 @@
+<script lang="ts" module>
+	import type { HTMLInputAttributes } from "svelte/elements";
+	export interface SliderProps extends Omit<HTMLInputAttributes, "class" | "type"> {
+		error?: boolean;
+		class?: string;
+		value?: number;
+		ref?: HTMLInputElement | null;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { useSkin } from "../context.js";
+
+	let {
+		error = false,
+		class: className,
+		value = $bindable(50),
+		ref = $bindable(null),
+		...rest
+	}: SliderProps = $props();
+
+	const ctx = useSkin();
+	const parts = $derived(ctx.skin.recipes.slider({ state: error ? "error" : undefined }));
+</script>
+
+<input
+	type="range"
+	bind:this={ref}
+	bind:value
+	class={cn(parts.root, className)}
+	aria-invalid={error || undefined}
+	{...rest}
+/>

package/dist/cameleon/primitives/Slider.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+export interface SliderProps extends Omit<HTMLInputAttributes, "class" | "type"> {
+    error?: boolean;
+    class?: string;
+    value?: number;
+    ref?: HTMLInputElement | null;
+}
+declare const Slider: import("svelte").Component<SliderProps, {}, "ref" | "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/cameleon/primitives/Switch.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" module>
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import type { PartState } from "../types.js";
+	export interface SwitchProps extends Omit<HTMLButtonAttributes, "class" | "onclick"> {
+		checked?: boolean;
+		error?: boolean;
+		demoState?: PartState;
+		class?: string;
+		ref?: HTMLButtonElement | null;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { useSkin } from "../context.js";
+
+	let {
+		checked = $bindable(false),
+		error = false,
+		disabled = false,
+		demoState,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: SwitchProps = $props();
+
+	const ctx = useSkin();
+	const parts = $derived(ctx.skin.recipes.switch({ state: demoState }));
+</script>
+
+<button
+	bind:this={ref}
+	type="button"
+	role="switch"
+	aria-checked={checked}
+	aria-invalid={error}
+	{disabled}
+	onclick={() => (checked = !checked)}
+	class={cn(parts.root, className)}
+	{...rest}
+>
+	<span class={parts.thumb}></span>
+</button>

package/dist/cameleon/primitives/Switch.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLButtonAttributes } from "svelte/elements";
+import type { PartState } from "../types.js";
+export interface SwitchProps extends Omit<HTMLButtonAttributes, "class" | "onclick"> {
+    checked?: boolean;
+    error?: boolean;
+    demoState?: PartState;
+    class?: string;
+    ref?: HTMLButtonElement | null;
+}
+declare const Switch: import("svelte").Component<SwitchProps, {}, "ref" | "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/cameleon/primitives/Textarea.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+	import type { PartState } from "../types.js";
+	export interface TextareaProps extends Omit<HTMLTextareaAttributes, "class"> {
+		error?: boolean;
+		demoState?: PartState;
+		class?: string;
+		value?: string;
+		ref?: HTMLTextAreaElement | null;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { useSkin } from "../context.js";
+
+	let {
+		error = false,
+		demoState,
+		class: className,
+		value = $bindable(""),
+		ref = $bindable(null),
+		...rest
+	}: TextareaProps = $props();
+
+	const ctx = useSkin();
+	const parts = $derived(ctx.skin.recipes.textarea({ state: demoState }));
+</script>
+
+<textarea
+	bind:this={ref}
+	bind:value
+	class={cn(parts.root, className)}
+	aria-invalid={error}
+	{...rest}
+></textarea>

package/dist/cameleon/primitives/Textarea.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLTextareaAttributes } from "svelte/elements";
+import type { PartState } from "../types.js";
+export interface TextareaProps extends Omit<HTMLTextareaAttributes, "class"> {
+    error?: boolean;
+    demoState?: PartState;
+    class?: string;
+    value?: string;
+    ref?: HTMLTextAreaElement | null;
+}
+declare const Textarea: import("svelte").Component<TextareaProps, {}, "ref" | "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/cameleon/primitives/Tooltip.svelte

@@ -0,0 +1,32 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { PartState } from "../types.js";
+	export interface TooltipProps {
+		/** Text shown in the bubble on hover / keyboard focus. */
+		content: string;
+		/** Force a visual state (focus / error) for the /skins state matrix. */
+		demoState?: PartState;
+		/** Force the bubble visible (state matrix). */
+		demoOpen?: boolean;
+		class?: string;
+		/** Trigger contents; defaults to a "?" glyph. */
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { useSkin } from "../context.js";
+
+	let { content, demoState, demoOpen = false, class: className, children }: TooltipProps = $props();
+
+	const ctx = useSkin();
+	const parts = $derived(ctx.skin.recipes.tooltip({ state: demoState }));
+</script>
+
+<span class={cn(parts.root, className)}>
+	<button type="button" class={parts.trigger} aria-label={content}>
+		{#if children}{@render children()}{:else}?{/if}
+	</button>
+	<span role="tooltip" class={cn(parts.bubble, demoOpen && "opacity-100")}>{content}</span>
+</span>

package/dist/cameleon/primitives/Tooltip.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { PartState } from "../types.js";
+export interface TooltipProps {
+    /** Text shown in the bubble on hover / keyboard focus. */
+    content: string;
+    /** Force a visual state (focus / error) for the /skins state matrix. */
+    demoState?: PartState;
+    /** Force the bubble visible (state matrix). */
+    demoOpen?: boolean;
+    class?: string;
+    /** Trigger contents; defaults to a "?" glyph. */
+    children?: Snippet;
+}
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/cameleon/primitives/index.d.ts

@@ -0,0 +1,10 @@
+export { default as Button, type ButtonProps } from "./Button.svelte";
+export { default as Input, type InputProps } from "./Input.svelte";
+export { default as Textarea, type TextareaProps } from "./Textarea.svelte";
+export { default as Select, type SelectProps } from "./Select.svelte";
+export { default as Checkbox, type CheckboxProps } from "./Checkbox.svelte";
+export { default as Radio, type RadioProps } from "./Radio.svelte";
+export { default as Switch, type SwitchProps } from "./Switch.svelte";
+export { default as Slider, type SliderProps } from "./Slider.svelte";
+export { default as Badge, type BadgeProps } from "./Badge.svelte";
+export { default as Tooltip, type TooltipProps } from "./Tooltip.svelte";

package/dist/cameleon/primitives/index.js

@@ -0,0 +1,10 @@
+export { default as Button } from "./Button.svelte";
+export { default as Input } from "./Input.svelte";
+export { default as Textarea } from "./Textarea.svelte";
+export { default as Select } from "./Select.svelte";
+export { default as Checkbox } from "./Checkbox.svelte";
+export { default as Radio } from "./Radio.svelte";
+export { default as Switch } from "./Switch.svelte";
+export { default as Slider } from "./Slider.svelte";
+export { default as Badge } from "./Badge.svelte";
+export { default as Tooltip } from "./Tooltip.svelte";

package/dist/cameleon/skins/aurora/aurora.css

@@ -0,0 +1,41 @@
+/* Aurora skin — native range slider: hairline track, violet-swept thumb. The
+   recipes cover everything a class can express; only the pseudo-elements the
+   browser owns need to live here. Scoped by data-skin. */
+[data-skin="aurora"] .cam-range {
+	height: 20px;
+}
+[data-skin="aurora"] .cam-range::-webkit-slider-runnable-track {
+	height: 4px;
+	background: rgba(255, 255, 255, 0.1);
+	border-radius: 999px;
+}
+[data-skin="aurora"] .cam-range::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	appearance: none;
+	height: 16px;
+	width: 16px;
+	margin-top: -6px;
+	background: linear-gradient(100deg, #7c3aed, #3b82f6);
+	border: 1px solid rgba(255, 255, 255, 0.25);
+	border-radius: 50%;
+	box-shadow: 0 2px 10px rgba(124, 58, 237, 0.5);
+}
+[data-skin="aurora"] .cam-range:focus-visible::-webkit-slider-thumb {
+	box-shadow: 0 0 0 4px rgba(139, 123, 255, 0.4);
+}
+[data-skin="aurora"] .cam-range::-moz-range-track {
+	height: 4px;
+	background: rgba(255, 255, 255, 0.1);
+	border-radius: 999px;
+}
+[data-skin="aurora"] .cam-range::-moz-range-thumb {
+	height: 16px;
+	width: 16px;
+	background: linear-gradient(100deg, #7c3aed, #3b82f6);
+	border: 1px solid rgba(255, 255, 255, 0.25);
+	border-radius: 50%;
+	box-shadow: 0 2px 10px rgba(124, 58, 237, 0.5);
+}
+[data-skin="aurora"] .cam-range:focus-visible::-moz-range-thumb {
+	box-shadow: 0 0 0 4px rgba(139, 123, 255, 0.4);
+}

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

@@ -0,0 +1,3 @@
+import type { Skin } from "../../types.js";
+import "./aurora.css";
+export declare const auroraSkin: Skin;

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

@@ -0,0 +1,12 @@
+import { auroraTokens } from "./tokens.js";
+import { auroraMeta } from "./meta.js";
+import { auroraRecipes } from "./recipes.js";
+import "./aurora.css";
+export const auroraSkin = {
+    name: "aurora",
+    label: "Aurora",
+    colorScheme: "dark",
+    tokens: auroraTokens,
+    meta: auroraMeta,
+    recipes: auroraRecipes,
+};

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

@@ -0,0 +1,3 @@
+import type { SkinMeta } from "../../types.js";
+/** Aurora design metadata — near-black canvas, violet→blue sweep, hairline edges. */
+export declare const auroraMeta: SkinMeta;

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

@@ -0,0 +1,58 @@
+/** Aurora design metadata — near-black canvas, violet→blue sweep, hairline edges. */
+export const auroraMeta = {
+    palette: [
+        { name: "Canvas", value: "#050508", note: "page" },
+        { name: "Card", value: "#0d0d14", note: "section card" },
+        { name: "Surface", value: "#12121c", note: "inner surface" },
+        { name: "Line 10%", value: "rgba(255,255,255,0.10)", note: "hairline edge" },
+        { name: "Purple", value: "#8b7bff", note: "accent · brand" },
+        { name: "Blue", value: "#5b8cff", note: "accent · info" },
+        { name: "Red", value: "#fb7185", note: "accent · error" },
+        { name: "Yellow", value: "#fbbf24", note: "accent · warn" },
+        { name: "Green", value: "#34d399", note: "accent · ok" },
+    ],
+    type: [
+        {
+            sample: "Display",
+            spec: "SYSTEM SANS 700 · -0.03EM · CLAMP(44, 7VW, 92)",
+            style: "font-size:60px;font-weight:700;letter-spacing:-0.03em;line-height:1.05;",
+        },
+        {
+            sample: "Heading — section title",
+            spec: "SYSTEM SANS 600 · 24–34",
+            style: "font-size:30px;font-weight:600;letter-spacing:-0.02em;",
+        },
+        {
+            sample: "Subheading — panel label",
+            spec: "SYSTEM SANS 500 · 15–18",
+            style: "font-size:17px;font-weight:500;letter-spacing:-0.01em;",
+        },
+        {
+            sample: "Body — A near-black field, one violet accent, and nothing else competing for attention.",
+            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 — #8b7bff",
+            spec: "SF MONO 500 · 10–12 + 0.08EM",
+            style: "font-family:var(--skin-font-mono);font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;",
+        },
+    ],
+    specs: {
+        radius: [
+            { size: "10px", label: "button · input" },
+            { size: "14px", label: "card" },
+            { size: "20px", label: "panel" },
+            { size: "999px", label: "pill · badge" },
+        ],
+        border: "1px hairline white at 8–12% opacity; brightens to 25% on hover.",
+        shadowRest: "0 2px 16px rgba(124,58,237,.35) — violet bloom, not a drop shadow",
+        shadowHover: "0 10px 34px rgba(91,140,255,.45)",
+        spacing: "4 / 8 / 14 / 18 / 24",
+    },
+    responsive: [
+        { label: "Desktop ≥1024", note: "1440 max width · 3-col panels · full bloom and glow" },
+        { label: "Tablet 720–1023", note: "2-col panels · bloom radius halved · nav collapses" },
+        { label: "Mobile <720", note: "single column · glow dropped for contrast · 44px targets" },
+    ],
+};

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,163 @@
+const forced = (map, state) => (state && map[state]) || "";
+// The signature violet→blue sweep is `bg-[linear-gradient(100deg,#7c3aed,#3b82f6)]`.
+// It is written out in full at every use site on purpose: Tailwind v4 scans raw
+// source text, so hoisting it into a const and interpolating would leave the JIT
+// staring at `${SWEEP}` and the class would never be generated.
+/* ---- Button ------------------------------------------------------------- */
+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",
+};
+export 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: "" };
+}
+/* ---- Text fields (input / textarea / select) ---------------------------- */
+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",
+};
+export const auroraInput = (args) => ({
+    root: `${FIELD_BASE} ${forced(FIELD_FORCE, args.state)}`,
+});
+export const auroraTextarea = (args) => ({
+    root: `${FIELD_BASE} min-h-[80px] leading-relaxed resize-y ${forced(FIELD_FORCE, args.state)}`,
+});
+export 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]",
+});
+/* ---- Checkbox / Radio (native input + custom box) ----------------------- */
+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",
+};
+export 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),
+});
+export 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),
+});
+/* ---- Switch (button role=switch) ---------------------------------------- */
+const SWITCH_FORCE = {
+    hover: "border-white/35",
+    focus: "border-[#8b7bff]/70 ring-2 ring-[#8b7bff]/40",
+};
+export 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]",
+});
+/* ---- Slider (native range; thumb/track in aurora.css via .cam-range) ----- */
+export const auroraSlider = () => ({
+    root: "cam-range w-[160px] cursor-pointer appearance-none bg-transparent disabled:cursor-not-allowed disabled:opacity-50",
+});
+/* ---- Badge -------------------------------------------------------------- */
+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",
+};
+export function auroraBadge(args) {
+    const variant = BADGE_VARIANT[args.variant ?? "default"] ??
+        BADGE_VARIANT.default;
+    return { root: `${BADGE_BASE} ${variant} ${forced(BADGE_FORCE, args.state)}` };
+}
+/* ---- Tooltip ------------------------------------------------------------ */
+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",
+};
+export 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),
+});
+/* ---- Skin registry ------------------------------------------------------ */
+export const auroraRecipes = {
+    button: auroraButton,
+    input: auroraInput,
+    textarea: auroraTextarea,
+    select: auroraSelect,
+    checkbox: auroraCheckbox,
+    radio: auroraRadio,
+    switch: auroraSwitch,
+    slider: auroraSlider,
+    badge: auroraBadge,
+    tooltip: 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,19 @@
+/**
+ * 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 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",
+};