fancy-ui-svelte 0.9.1 → 0.11.0

package/README.md

@@ -1,3 +1,7 @@
+<p align="center">
+  <img src=".github/logo.png" alt="FancyUI" width="88" height="88" />
+</p>
+
 # fancy-ui
 
 Beautiful animation and UI components for **Svelte 5**.
@@ -5,7 +9,7 @@ Beautiful animation and UI components for **Svelte 5**.
 ![Svelte 5](https://img.shields.io/badge/Svelte-5-FF3E00?logo=svelte&logoColor=white)
 ![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4-06B6D4?logo=tailwindcss&logoColor=white)
 ![TypeScript](https://img.shields.io/badge/TypeScript-5-3178C6?logo=typescript&logoColor=white)
-![Components](https://img.shields.io/badge/Components-61-8B5CF6)
+![Components](https://img.shields.io/badge/Components-133-8B5CF6)
 ![MIT License](https://img.shields.io/badge/License-MIT-green)
 
 <p align="center">
@@ -32,107 +36,10 @@ Beautiful animation and UI components for **Svelte 5**.
 - **Svelte 5 Runes** &mdash; Built with `$state`, `$derived`, `$effect`, and `$props`
 - **Tailwind CSS 4** &mdash; Utility-first styling with theme tokens
 - **TypeScript** &mdash; Fully typed props and events
-- **61 Components** &mdash; Buttons, text animations, backgrounds, effects, and more
+- **133 Components** &mdash; Core primitives (forms, navigation, overlays) alongside buttons, text animations, backgrounds and effects
 - **Dark Mode** &mdash; All components support light and dark themes
-- **Tested** &mdash; 600+ unit tests with Vitest and Testing Library
-
-## Components
-
-### Buttons
-
-| Component              | Description                              | Demo                                                                       |
-| ---------------------- | ---------------------------------------- | -------------------------------------------------------------------------- |
-| RainbowButton          | Animated rainbow gradient border effect  | [Demo](https://fancy-ui.rama.app/docs/components/rainbow-button)           |
-| RippleButton           | Ripple click effect                      | [Demo](https://fancy-ui.rama.app/docs/components/ripple-button)            |
-| ShimmerButton          | Rotating conic-gradient shimmer border   | [Demo](https://fancy-ui.rama.app/docs/components/shimmer-button)           |
-| GradientButton         | Rotating conic-gradient rainbow border   | [Demo](https://fancy-ui.rama.app/docs/components/gradient-button)          |
-| InteractiveHoverButton | Hover effect revealing alternate content | [Demo](https://fancy-ui.rama.app/docs/components/interactive-hover-button) |
-
-### Cards
-
-| Component           | Description                                                         | Demo                                                                    |
-| ------------------- | ------------------------------------------------------------------- | ----------------------------------------------------------------------- |
-| AppleCardCarousel   | Horizontal card carousel with spring-animated full-screen expansion | [Demo](https://fancy-ui.rama.app/docs/components/apple-card-carousel)   |
-| Card3D              | 3D tilt card with mouse tracking                                    | [Demo](https://fancy-ui.rama.app/docs/components/card-3d)               |
-| CardSpotlight       | Spotlight effect following mouse                                    | [Demo](https://fancy-ui.rama.app/docs/components/card-spotlight)        |
-| DirectionAwareHover | Overlay slides in from mouse entry direction                        | [Demo](https://fancy-ui.rama.app/docs/components/direction-aware-hover) |
-| FlipCard            | Two-sided card with flip animation                                  | [Demo](https://fancy-ui.rama.app/docs/components/flip-card)             |
-| GlareCard           | Glare reflection effect on hover                                    | [Demo](https://fancy-ui.rama.app/docs/components/glare-card)            |
-| TextRevealCard      | Text reveal on hover                                                | [Demo](https://fancy-ui.rama.app/docs/components/text-reveal-card)      |
-
-### Text & Typography
-
-| Component          | Description                                                                    | Demo                                                                   |
-| ------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------- |
-| BlurReveal         | Scroll-triggered blur-to-clear reveal                                          | [Demo](https://fancy-ui.rama.app/docs/components/blur-reveal)          |
-| BoxReveal          | Sliding colored box reveal animation                                           | [Demo](https://fancy-ui.rama.app/docs/components/box-reveal)           |
-| ColourfulText      | Per-character color animation                                                  | [Demo](https://fancy-ui.rama.app/docs/components/colourful-text)       |
-| ContainerTextFlip  | Text flipping inside a container                                               | [Demo](https://fancy-ui.rama.app/docs/components/container-text-flip)  |
-| DisplacementText   | 3D text with WebGL displacement that follows the cursor using Three.js shaders | [Demo](https://fancy-ui.rama.app/docs/components/displacement-text)    |
-| EditorialEngine    | Live magazine layout with multi-column text flowing around draggable orbs      | [Demo](https://fancy-ui.rama.app/docs/components/editorial-engine)     |
-| FlipWords          | Cycling word animation with per-letter effects                                 | [Demo](https://fancy-ui.rama.app/docs/components/flip-words)           |
-| HyperText          | Character scramble on hover                                                    | [Demo](https://fancy-ui.rama.app/docs/components/hyper-text)           |
-| LetterPullup       | Staggered letter pull-up animation                                             | [Demo](https://fancy-ui.rama.app/docs/components/letter-pullup)        |
-| LineReveal         | Staggered line-by-line text reveal                                             | [Demo](https://fancy-ui.rama.app/docs/components/line-reveal)          |
-| LineShadowText     | Text with animated line shadow                                                 | [Demo](https://fancy-ui.rama.app/docs/components/line-shadow-text)     |
-| LiquidText         | Big text that liquefies along the cursor's path via a WebGL fluid solver       | [Demo](https://fancy-ui.rama.app/docs/components/liquid-text)          |
-| NumberTicker       | Animated number counter with easing                                            | [Demo](https://fancy-ui.rama.app/docs/components/number-ticker)        |
-| SparklesText       | Animated SVG sparkle stars overlay                                             | [Demo](https://fancy-ui.rama.app/docs/components/sparkles-text)        |
-| TerminalText       | Terminal-style text streamer with blinking cursor and glitch effect            | [Demo](https://fancy-ui.rama.app/docs/components/terminal-text)        |
-| TextGenerateEffect | Word-by-word text generation effect                                            | [Demo](https://fancy-ui.rama.app/docs/components/text-generate-effect) |
-
-### Backgrounds
-
-| Component              | Description                                                                 | Demo                                                                       |
-| ---------------------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
-| FallingStarsBg         | Canvas 3D starfield with motion trails                                      | [Demo](https://fancy-ui.rama.app/docs/components/bg-falling-stars)         |
-| FlickeringGrid         | Canvas grid with flickering opacity                                         | [Demo](https://fancy-ui.rama.app/docs/components/flickering-grid)          |
-| InteractiveGridPattern | SVG grid with hover highlights                                              | [Demo](https://fancy-ui.rama.app/docs/components/interactive-grid-pattern) |
-| MatrixRain             | Canvas-based falling glyph rain with configurable color, speed, and density | [Demo](https://fancy-ui.rama.app/docs/components/matrix-rain)              |
-| StarsBackground        | Starfield with parallax mouse tracking                                      | [Demo](https://fancy-ui.rama.app/docs/components/bg-stars)                 |
-
-### Effects & Animations
-
-| Component        | Description                                                    | Demo                                                                 |
-| ---------------- | -------------------------------------------------------------- | -------------------------------------------------------------------- |
-| AnimatedBeam     | SVG beams connecting elements                                  | [Demo](https://fancy-ui.rama.app/docs/components/animated-beam)      |
-| BorderBeam       | Beam effect traveling around borders                           | [Demo](https://fancy-ui.rama.app/docs/components/border-beam)        |
-| Confetti         | Configurable confetti burst                                    | [Demo](https://fancy-ui.rama.app/docs/components/confetti)           |
-| FluidCursor      | WebGL fluid simulation following cursor                        | [Demo](https://fancy-ui.rama.app/docs/components/fluid-cursor)       |
-| FrostedGlass     | Frosted glass surface with organic turbulence-noise refraction | [Demo](https://fancy-ui.rama.app/docs/components/frosted-glass)      |
-| GlowBorder       | Animated glowing border with gradients                         | [Demo](https://fancy-ui.rama.app/docs/components/glow-border)        |
-| GlowingEffect    | Glowing highlight on hover                                     | [Demo](https://fancy-ui.rama.app/docs/components/glowing-effect)     |
-| ImageTrailCursor | Cursor-following image trail (8 variants)                      | [Demo](https://fancy-ui.rama.app/docs/components/image-trail-cursor) |
-| LiquidGlass      | Liquid glass morphism effect                                   | [Demo](https://fancy-ui.rama.app/docs/components/liquid-glass)       |
-| Meteors          | Animated meteor shower effect                                  | [Demo](https://fancy-ui.rama.app/docs/components/meteors)            |
-| NeonBorder       | Dual-color neon glow border                                    | [Demo](https://fancy-ui.rama.app/docs/components/neon-border)        |
-| Ripple           | Expanding ripple rings                                         | [Demo](https://fancy-ui.rama.app/docs/components/ripple)             |
-| SmoothCursor     | Smooth lagging cursor follower                                 | [Demo](https://fancy-ui.rama.app/docs/components/smooth-cursor)      |
-| Sparkles         | Particle sparkle canvas                                        | [Demo](https://fancy-ui.rama.app/docs/components/sparkles)           |
-| TracingBeam      | Scroll-driven tracing beam                                     | [Demo](https://fancy-ui.rama.app/docs/components/tracing-beam)       |
-
-### Layout
-
-| Component       | Description                                   | Demo                                                               |
-| --------------- | --------------------------------------------- | ------------------------------------------------------------------ |
-| BentoGrid       | Bento-style responsive grid layout            | [Demo](https://fancy-ui.rama.app/docs/components/bento-grid)       |
-| Book            | 3D book flip animation                        | [Demo](https://fancy-ui.rama.app/docs/components/book)             |
-| ContainerScroll | 3D scroll perspective container               | [Demo](https://fancy-ui.rama.app/docs/components/container-scroll) |
-| Focus           | Focus-expand card layout                      | [Demo](https://fancy-ui.rama.app/docs/components/focus)            |
-| Marquee         | Infinite scrolling for text, images, or cards | [Demo](https://fancy-ui.rama.app/docs/components/marquee)          |
-
-### Navigation & Display
-
-| Component            | Description                                                             | Demo                                                                    |
-| -------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------- |
-| AnimatedTestimonials | Testimonial carousel with smooth slide animations and optional autoplay | [Demo](https://fancy-ui.rama.app/docs/components/animated-testimonials) |
-| AnimatedTooltip      | Avatar row with mouse-following tooltips                                | [Demo](https://fancy-ui.rama.app/docs/components/animated-tooltip)      |
-| Compare              | Before/after image comparison slider                                    | [Demo](https://fancy-ui.rama.app/docs/components/compare)               |
-| Dock                 | Icon dock where items magnify as the cursor approaches                  | [Demo](https://fancy-ui.rama.app/docs/components/dock)                  |
-| LineHoverLink        | Link with 11 animated underline hover effects, pure CSS                 | [Demo](https://fancy-ui.rama.app/docs/components/line-hover-link)       |
-| LogoCloud            | Marquee, grid, and icon logo layouts                                    | [Demo](https://fancy-ui.rama.app/docs/components/logo-cloud)            |
-| NoiseReveal          | WebGL image reveal with a Perlin-noise dissolve mask                    | [Demo](https://fancy-ui.rama.app/docs/components/noise-reveal)          |
-| Timeline             | Vertical timeline with scroll-driven progress                           | [Demo](https://fancy-ui.rama.app/docs/components/timeline)              |
+- **Opt-in Sound** &mdash; Eleven synthesised interface cues, a `SoundToggle` switch and a `soundFeedback` action; silent until the user turns it on
+- **Tested** &mdash; 2,900+ unit tests with Vitest and Testing Library
 
 ## Quick Start
 
@@ -245,7 +152,7 @@ Component tests are colocated with their component (see `RainbowButton.test.ts`
 
 ## Contributing
 
-Contributions are welcome! 61 components and counting — PRs for new components, bug fixes, and improvements are appreciated.
+Contributions are welcome! 133 components and counting — PRs for new components, bug fixes, and improvements are appreciated.
 
 ### Adding a new component
 

package/dist/cameleon/FancyProvider.svelte

@@ -0,0 +1,63 @@
+<script lang="ts" module>
+	export interface FancyProviderProps {
+		/** The active skin. Changing it re-flows the whole subtree live. */
+		skin: Skin;
+		/** Scope `.dark` to this subtree for skins whose colorScheme is "dark". */
+		manageColorScheme?: boolean;
+		class?: string;
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { browser } from "$app/environment";
+	import { cn } from "../utils.js";
+	import type { Skin } from "./types.js";
+	import { setSkinContext } from "./context.js";
+	import "./cameleon.css";
+
+	let {
+		skin,
+		manageColorScheme = false,
+		class: className = "",
+		children,
+	}: FancyProviderProps = $props();
+
+	// Getter, not a plain value — this is what makes a live skin switch reactive.
+	setSkinContext({
+		get skin() {
+			return skin;
+		},
+	});
+
+	// Skin tokens as scoped inline CSS variables. Overriding these var names on
+	// this element re-flows every utility that reads them, for THIS subtree only.
+	// The provider never touches <html>, so it can't fight the global theme store.
+	const styleVars = $derived(
+		Object.entries(skin.tokens)
+			.map(([k, v]) => `${k}:${v}`)
+			.join(";")
+	);
+
+	// Inject skin webfonts once (deduped by id), client-only so SSR stays clean.
+	$effect(() => {
+		if (!browser || !skin.fonts) return;
+		for (const font of skin.fonts) {
+			if (document.getElementById(font.id)) continue;
+			const link = document.createElement("link");
+			link.id = font.id;
+			link.rel = "stylesheet";
+			link.href = font.href;
+			document.head.appendChild(link);
+		}
+	});
+</script>
+
+<div
+	data-skin={skin.name}
+	class={cn("cameleon-root", manageColorScheme && skin.colorScheme === "dark" && "dark", className)}
+	style={styleVars}
+>
+	{@render children?.()}
+</div>

package/dist/cameleon/FancyProvider.svelte.d.ts

@@ -0,0 +1,14 @@
+export interface FancyProviderProps {
+    /** The active skin. Changing it re-flows the whole subtree live. */
+    skin: Skin;
+    /** Scope `.dark` to this subtree for skins whose colorScheme is "dark". */
+    manageColorScheme?: boolean;
+    class?: string;
+    children?: Snippet;
+}
+import type { Snippet } from "svelte";
+import type { Skin } from "./types.js";
+import "./cameleon.css";
+declare const FancyProvider: import("svelte").Component<FancyProviderProps, {}, "">;
+type FancyProvider = ReturnType<typeof FancyProvider>;
+export default FancyProvider;

package/dist/cameleon/cameleon.css

@@ -0,0 +1,27 @@
+/**
+ * Base styles for the Cameleon provider root. The skin's tokens are set as
+ * inline CSS variables on the same element; these rules consume them so the
+ * whole "world" (page background, text color, base font) changes per skin.
+ */
+.cameleon-root {
+	background: var(--skin-page-bg, transparent);
+	color: var(--skin-page-fg, inherit);
+	font-family: var(--skin-font-sans, inherit);
+	-webkit-font-smoothing: antialiased;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.cameleon-root * {
+		transition-duration: 0.01ms !important;
+		animation-duration: 0.01ms !important;
+	}
+}
+
+/* Skin-agnostic error affordance for the native range slider: the per-skin
+   .cam-range CSS styles the track/thumb but not the invalid state, so give
+   <Slider error> a consistent red outline driven by the skin's red token. */
+.cam-range[aria-invalid="true"] {
+	outline: 2px solid var(--skin-red, #e5372b);
+	outline-offset: 3px;
+	border-radius: 2px;
+}

package/dist/cameleon/context.d.ts

@@ -0,0 +1,14 @@
+import type { Skin } from "./types.js";
+/**
+ * The context value is a GETTER object, not the skin itself. This is what makes
+ * a live skin switch reactive: consumers read `ctx.skin` inside a `$derived`, so
+ * changing the provider's `skin` prop re-runs their recipe resolution. (Same
+ * pattern as src/lib/fancy-ui/dock/Dock.svelte and card-3d — a plain value would
+ * be captured once and never update.)
+ */
+export interface SkinContext {
+    readonly skin: Skin;
+}
+export declare function setSkinContext(ctx: SkinContext): void;
+/** Read the active skin. Falls back to the default skin with no provider. */
+export declare function useSkin(): SkinContext;

package/dist/cameleon/context.js

@@ -0,0 +1,15 @@
+import { getContext, setContext } from "svelte";
+import { defaultSkin } from "./skins/default.js";
+const SKIN_KEY = Symbol("cameleon-skin");
+export function setSkinContext(ctx) {
+    setContext(SKIN_KEY, ctx);
+}
+const FALLBACK = {
+    get skin() {
+        return defaultSkin;
+    },
+};
+/** Read the active skin. Falls back to the default skin with no provider. */
+export function useSkin() {
+    return getContext(SKIN_KEY) ?? FALLBACK;
+}

package/dist/cameleon/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Cameleon Engine — multi-skin UI primitives for fancy-ui.
+ *
+ * Same component API, radically different art directions ("skins"): each skin
+ * carries tokens (CSS custom properties), recipes (pure functions returning
+ * class strings per primitive), optional ornaments and per-skin CSS.
+ *
+ * Published as `fancy-ui-svelte/cameleon` (with the retro-os component kit at
+ * `fancy-ui-svelte/cameleon/retro-kit`). Consumers wrap a subtree:
+ *
+ *   import { FancyProvider, Button, brutalSkin } from "fancy-ui-svelte/cameleon";
+ *   <FancyProvider skin={brutalSkin}> ... </FancyProvider>
+ */
+export { default as FancyProvider, type FancyProviderProps } from "./FancyProvider.svelte";
+export { useSkin, setSkinContext, type SkinContext } from "./context.js";
+export type { Skin, SkinRecipes, SkinOrnaments, SkinFont, SkinMeta, RecipeFn, RecipeArgs, RecipeResult, PartState, } from "./types.js";
+export * from "./primitives/index.js";
+export { defaultSkin } from "./skins/default.js";
+export { auroraSkin } from "./skins/aurora/index.js";
+export { brutalSkin } from "./skins/brutal/index.js";
+export { glassSkin } from "./skins/glass/index.js";
+export { terminalSkin } from "./skins/terminal/index.js";
+export { retroOsSkin } from "./skins/retro-os/index.js";

package/dist/cameleon/index.js

@@ -0,0 +1,22 @@
+/**
+ * Cameleon Engine — multi-skin UI primitives for fancy-ui.
+ *
+ * Same component API, radically different art directions ("skins"): each skin
+ * carries tokens (CSS custom properties), recipes (pure functions returning
+ * class strings per primitive), optional ornaments and per-skin CSS.
+ *
+ * Published as `fancy-ui-svelte/cameleon` (with the retro-os component kit at
+ * `fancy-ui-svelte/cameleon/retro-kit`). Consumers wrap a subtree:
+ *
+ *   import { FancyProvider, Button, brutalSkin } from "fancy-ui-svelte/cameleon";
+ *   <FancyProvider skin={brutalSkin}> ... </FancyProvider>
+ */
+export { default as FancyProvider } from "./FancyProvider.svelte";
+export { useSkin, setSkinContext } from "./context.js";
+export * from "./primitives/index.js";
+export { defaultSkin } from "./skins/default.js";
+export { auroraSkin } from "./skins/aurora/index.js";
+export { brutalSkin } from "./skins/brutal/index.js";
+export { glassSkin } from "./skins/glass/index.js";
+export { terminalSkin } from "./skins/terminal/index.js";
+export { retroOsSkin } from "./skins/retro-os/index.js";

package/dist/cameleon/primitives/Badge.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { PartState } from "../types.js";
+	export interface BadgeProps {
+		variant?: "default" | "solid" | "blue" | "red" | "yellow" | "green" | "purple";
+		/** Force a visual state for the /skins state matrix. */
+		demoState?: PartState;
+		class?: string;
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { useSkin } from "../context.js";
+
+	let { variant = "default", demoState, class: className, children }: BadgeProps = $props();
+
+	const ctx = useSkin();
+	const parts = $derived(ctx.skin.recipes.badge({ variant, state: demoState }));
+</script>
+
+<span class={cn(parts.root, className)}>{@render children?.()}</span>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+import type { PartState } from "../types.js";
+export interface BadgeProps {
+    variant?: "default" | "solid" | "blue" | "red" | "yellow" | "green" | "purple";
+    /** Force a visual state for the /skins state matrix. */
+    demoState?: PartState;
+    class?: string;
+    children?: Snippet;
+}
+declare const Badge: import("svelte").Component<BadgeProps, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/cameleon/primitives/Button.svelte

@@ -0,0 +1,60 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	export interface ButtonProps extends Omit<HTMLButtonAttributes, "class"> {
+		variant?: "primary" | "secondary" | "destructive";
+		size?: "sm" | "md" | "lg";
+		loading?: boolean;
+		/** Force a visual state for the /skins state matrix (non-interactive). */
+		demoState?: "hover" | "active" | "focus";
+		class?: string;
+		children?: Snippet;
+		ref?: HTMLButtonElement | null;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { useSkin } from "../context.js";
+	import type { RecipeArgs } from "../types.js";
+
+	let {
+		variant = "primary",
+		size = "md",
+		loading = false,
+		disabled = false,
+		type = "button",
+		demoState,
+		class: className,
+		children,
+		ref = $bindable(null),
+		...rest
+	}: ButtonProps = $props();
+
+	const ctx = useSkin();
+	const args = $derived<RecipeArgs>({
+		variant,
+		size,
+		state: demoState ?? (loading ? "loading" : disabled ? "disabled" : "default"),
+	});
+	// Re-runs whenever the active skin changes → live art-direction swap.
+	const parts = $derived(ctx.skin.recipes.button(args));
+	const trailing = $derived(ctx.skin.ornaments?.buttonTrailing);
+</script>
+
+<button
+	bind:this={ref}
+	{type}
+	class={cn("cam-btn", parts.root, className)}
+	disabled={disabled || loading}
+	data-variant={variant}
+	{...rest}
+>
+	{#if parts.label !== undefined}
+		<span class={parts.label}>{@render children?.()}</span>
+	{:else}
+		{@render children?.()}
+	{/if}
+	{#if trailing}{@render trailing(args)}{/if}
+</button>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+export interface ButtonProps extends Omit<HTMLButtonAttributes, "class"> {
+    variant?: "primary" | "secondary" | "destructive";
+    size?: "sm" | "md" | "lg";
+    loading?: boolean;
+    /** Force a visual state for the /skins state matrix (non-interactive). */
+    demoState?: "hover" | "active" | "focus";
+    class?: string;
+    children?: Snippet;
+    ref?: HTMLButtonElement | null;
+}
+declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/cameleon/primitives/Checkbox.svelte

@@ -0,0 +1,56 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import type { PartState } from "../types.js";
+	export interface CheckboxProps extends Omit<HTMLInputAttributes, "class" | "type"> {
+		checked?: boolean;
+		error?: boolean;
+		demoState?: PartState;
+		class?: string;
+		children?: Snippet;
+		ref?: HTMLInputElement | null;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { useSkin } from "../context.js";
+
+	let {
+		checked = $bindable(false),
+		error = false,
+		demoState,
+		class: className,
+		children,
+		ref = $bindable(null),
+		...rest
+	}: CheckboxProps = $props();
+
+	const ctx = useSkin();
+	const parts = $derived(ctx.skin.recipes.checkbox({ state: demoState }));
+</script>
+
+<label class={cn(parts.root, className)}>
+	<input
+		type="checkbox"
+		class="peer sr-only"
+		bind:this={ref}
+		bind:checked
+		aria-invalid={error}
+		{...rest}
+	/>
+	<span class={parts.box}>
+		<svg
+			width="12"
+			height="12"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="3.5"
+			aria-hidden="true"
+		>
+			<path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round" />
+		</svg>
+	</span>
+	{#if children}{@render children()}{/if}
+</label>

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

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

package/dist/cameleon/primitives/Input.svelte

@@ -0,0 +1,37 @@
+<script lang="ts" module>
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import type { PartState } from "../types.js";
+	export interface InputProps extends Omit<HTMLInputAttributes, "class"> {
+		error?: boolean;
+		/** Force a visual state for the /skins state matrix. */
+		demoState?: PartState;
+		class?: string;
+		value?: string;
+		ref?: HTMLInputElement | 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
+	}: InputProps = $props();
+
+	const ctx = useSkin();
+	const parts = $derived(ctx.skin.recipes.input({ state: demoState }));
+</script>
+
+<input
+	bind:this={ref}
+	bind:value
+	class={cn(parts.root, className)}
+	aria-invalid={error}
+	{...rest}
+/>

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

@@ -0,0 +1,13 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { PartState } from "../types.js";
+export interface InputProps extends Omit<HTMLInputAttributes, "class"> {
+    error?: boolean;
+    /** Force a visual state for the /skins state matrix. */
+    demoState?: PartState;
+    class?: string;
+    value?: string;
+    ref?: HTMLInputElement | null;
+}
+declare const Input: import("svelte").Component<InputProps, {}, "ref" | "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/cameleon/primitives/Radio.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import type { PartState } from "../types.js";
+	export interface RadioProps extends Omit<HTMLInputAttributes, "class" | "type"> {
+		group?: string;
+		value?: string;
+		error?: boolean;
+		demoState?: PartState;
+		class?: string;
+		children?: Snippet;
+		ref?: HTMLInputElement | null;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+	import { useSkin } from "../context.js";
+
+	let {
+		group = $bindable(),
+		value,
+		name,
+		error = false,
+		demoState,
+		class: className,
+		children,
+		ref = $bindable(null),
+		...rest
+	}: RadioProps = $props();
+
+	const ctx = useSkin();
+	const parts = $derived(ctx.skin.recipes.radio({ state: demoState }));
+</script>
+
+<label class={cn(parts.root, className)}>
+	<!-- radio invalidity belongs on the group, not the input; drive the demo
+	     error visual off a data-attribute so we don't misuse aria-invalid.
+	     name defaults to the group so same-group radios stay mutually exclusive
+	     natively even when the parent doesn't share a bound group variable. -->
+	<input
+		type="radio"
+		class="peer sr-only"
+		bind:this={ref}
+		bind:group
+		name={name ?? group}
+		{value}
+		data-invalid={error ? "true" : undefined}
+		{...rest}
+	/>
+	<span class={parts.box}></span>
+	{#if children}{@render children()}{/if}
+</label>

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

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