@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.46

package/dist/components/input/color/segment.svelte

@@ -0,0 +1,240 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import type { ColorSegmentProps } from './types';
+
+	let {
+		value = undefined,
+		channel,
+		disabled = false,
+		readonly = false,
+		class: klass = '',
+		onchange,
+		oncommit,
+		onfocusmove,
+	}: ColorSegmentProps = $props();
+
+	let el = $state<HTMLSpanElement>();
+
+	const isHex    = $derived(channel.kind === 'hex');
+	const minWidth = $derived(
+		isHex
+			? 2
+			: Math.max(3, (channel.precision ?? 0) + Math.ceil(Math.log10(Math.abs(channel.max) + 1)) + (channel.suffix?.length ?? 0))
+	);
+
+	// ── Format ──────────────────────────────────────────────────────────
+	function formatValue(v: number | string | undefined): string {
+		if (v === undefined) return '';
+		if (isHex) return String(v).padStart(2, '0').toUpperCase();
+		const num = typeof v === 'string' ? parseFloat(v) : v;
+		if (isNaN(num)) return '';
+		const prec = channel.precision ?? 0;
+		return prec > 0 ? num.toFixed(prec) : String(Math.round(num));
+	}
+
+	// ── Display (when not focused) ───────────────────────────────────────
+	const displayText = $derived.by(() => {
+		const fmt = formatValue(value);
+		if (!fmt) return channel.label;
+		return channel.suffix ? fmt + channel.suffix : fmt;
+	});
+
+	const hasValue = $derived(value !== undefined);
+
+	// ── Sync DOM when not focused ────────────────────────────────────────
+	let isFocused = $state(false);
+
+	$effect(() => {
+		if (!el || isFocused) return;
+		void displayText;
+		untrack(() => {
+			if (el && el.textContent !== displayText) el.textContent = displayText;
+		});
+	});
+
+	// ── Clamp ───────────────────────────────────────────────────────────
+	function clamp(v: number): number {
+		return Math.max(channel.min, Math.min(channel.max, v));
+	}
+
+	// ── Strip suffix and parse el.textContent ────────────────────────────
+	function parseContent(): number | string | undefined {
+		let raw = (el?.textContent ?? '').trim();
+		// Strip suffix if present
+		if (channel.suffix && raw.endsWith(channel.suffix)) {
+			raw = raw.slice(0, -channel.suffix.length).trim();
+		}
+		if (isHex) {
+			return /^[0-9a-fA-F]{1,2}$/.test(raw)
+				? raw.padStart(2, '0').toUpperCase()
+				: undefined;
+		}
+		const n = parseFloat(raw);
+		return isNaN(n) ? undefined : clamp(n);
+	}
+
+	// ── Commit ──────────────────────────────────────────────────────────
+	function commit(ev: Event | null, andAdvance = false) {
+		const parsed = parseContent();
+		if (ev) {
+			onchange?.(parsed);
+			oncommit?.(ev, parsed);
+		} else {
+			onchange?.(parsed);
+		}
+		if (andAdvance) onfocusmove?.(1);
+	}
+
+	// ── Step ────────────────────────────────────────────────────────────
+	function step(dir: 1 | -1, multiplier = 1) {
+		if (isHex) {
+			const cur = typeof value === 'string' ? parseInt(value, 16) : (value as number | undefined) ?? 0;
+			onchange?.(clamp(cur + dir * multiplier).toString(16).padStart(2, '0').toUpperCase());
+		} else {
+			const cur = typeof value === 'number' ? value : parseFloat(String(value ?? channel.min));
+			const prec = channel.precision ?? 0;
+			const inc  = prec > 0 ? Math.pow(10, -prec) : 1;
+			onchange?.(clamp(parseFloat((cur + dir * inc * multiplier).toFixed(prec + 1))));
+		}
+	}
+
+	// ── Focus ───────────────────────────────────────────────────────────
+	function handleFocus() {
+		isFocused = true;
+		if (el) {
+			el.textContent = formatValue(value) || '';
+			// Place caret at end
+			const sel = window.getSelection();
+			if (sel && el.firstChild) {
+				const range = document.createRange();
+				range.selectNodeContents(el);
+				range.collapse(false);
+				sel.removeAllRanges();
+				sel.addRange(range);
+			}
+		}
+	}
+
+	// ── Blur ────────────────────────────────────────────────────────────
+	function handleBlur(ev: FocusEvent) {
+		isFocused = false;
+		commit(ev, false);
+		requestAnimationFrame(() => {
+			if (el && !isFocused) el.textContent = displayText;
+		});
+	}
+
+	// ── Keydown ─────────────────────────────────────────────────────────
+	function handleKeydown(ev: KeyboardEvent) {
+		if (disabled || readonly) return;
+
+		const { key } = ev;
+
+		const isAllowedChar = isHex
+			? /^[0-9a-fA-F]$/i.test(key)
+			: (key >= '0' && key <= '9') || key === '.' || key === '-';
+
+		if (key.length === 1 && !isAllowedChar && !ev.ctrlKey && !ev.metaKey) {
+			ev.preventDefault();
+			return;
+		}
+
+		if (key === 'ArrowUp' || key === 'ArrowDown') {
+			ev.preventDefault();
+			const dir        = key === 'ArrowUp' ? 1 : -1;
+			const multiplier = ev.shiftKey ? 10 : ev.altKey ? 0.1 : 1;
+			step(dir, multiplier);
+			requestAnimationFrame(() => {
+				if (el && isFocused) el.textContent = formatValue(value);
+			});
+			return;
+		}
+
+		if (key === 'ArrowLeft') {
+			const sel = window.getSelection();
+			if (sel?.rangeCount) {
+				const range = sel.getRangeAt(0);
+				if (range.startOffset === 0 && range.collapsed) {
+					ev.preventDefault();
+					commit(ev, false);
+					onfocusmove?.(-1);
+				}
+			}
+			return;
+		}
+
+		if (key === 'ArrowRight') {
+			const sel = window.getSelection();
+			if (sel?.rangeCount && el) {
+				const range = sel.getRangeAt(0);
+				const len   = el.textContent?.length ?? 0;
+				if (range.endOffset === len && range.collapsed) {
+					ev.preventDefault();
+					commit(ev, false);
+					onfocusmove?.(1);
+				}
+			}
+			return;
+		}
+
+		if (key === 'Enter') { ev.preventDefault(); commit(ev, false); return; }
+		if (key === 'Tab')   { commit(ev, false); return; }
+
+		if ((key === 'Backspace' || key === 'Delete') && !el?.textContent?.trim()) {
+			ev.preventDefault();
+			onchange?.(undefined);
+		}
+	}
+
+	// ── Paste ───────────────────────────────────────────────────────────
+	function handlePaste(ev: ClipboardEvent) {
+		ev.preventDefault();
+		const raw     = ev.clipboardData?.getData('text/plain') ?? '';
+		const allowed = isHex
+			? raw.replace(/[^0-9a-fA-F]/gi, '').slice(0, 2)
+			: raw.replace(/[^0-9.\-]/g, '');
+		if (!allowed || !el) return;
+
+		// Insert at cursor via Selection API (no execCommand)
+		const sel = window.getSelection();
+		if (!sel || !sel.rangeCount) {
+			el.textContent = allowed;
+		} else {
+			const range = sel.getRangeAt(0);
+			range.deleteContents();
+			const node = document.createTextNode(allowed);
+			range.insertNode(node);
+			range.setStartAfter(node);
+			range.collapse(true);
+			sel.removeAllRanges();
+			sel.addRange(range);
+		}
+	}
+
+	export function focus() {
+		el?.focus();
+	}
+</script>
+
+<span
+	bind:this={el}
+	role="spinbutton"
+	tabindex={disabled ? -1 : 0}
+	contenteditable={!disabled && !readonly ? 'plaintext-only' : undefined}
+	spellcheck={false}
+	aria-label={channel.label}
+	aria-disabled={disabled}
+	class={[
+		'inline-flex items-center justify-center px-0.5 text-center font-mono tabular-nums text-sm',
+		`min-w-[${minWidth}ch]`,
+		'focus:bg-foreground/10 focus:outline-none focus:rounded-sm',
+		hasValue ? 'text-foreground' : 'text-muted-foreground',
+		disabled && 'cursor-not-allowed opacity-50',
+		klass,
+	].filter(Boolean).join(' ')}
+	onfocus={handleFocus}
+	onblur={handleBlur}
+	oninput={() => {/* filtered in keydown; DOM read on commit */}}
+	onkeydown={handleKeydown}
+	onpaste={handlePaste}
+>{displayText}</span>

package/dist/components/input/color/segment.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { ColorSegmentProps } from './types';
+declare const Segment: import("svelte").Component<ColorSegmentProps, {
+    focus: () => void;
+}, "">;
+type Segment = ReturnType<typeof Segment>;
+export default Segment;

package/dist/components/input/color/shared.d.ts

@@ -0,0 +1,23 @@
+import type { ColorFormat, ChannelDef } from './types';
+export declare const COLOR_FN_SPACES: ColorFormat[];
+export interface FormatDef {
+    format: ColorFormat;
+    /** CSS function name, e.g. 'rgb', 'hsl', 'color' */
+    fn: string;
+    /** For color() format — the colorspace argument */
+    colorspace?: string;
+    /** Separator between channels: ' ' (modern) or ', ' (legacy) */
+    sep: ' ' | ', ';
+    channels: ChannelDef[];
+    /** Whether alpha channel is supported */
+    alpha: boolean;
+}
+export declare const FORMAT_DEFS: Record<ColorFormat, FormatDef>;
+export type ChannelValues = Record<string, number | string | undefined>;
+export declare function parseColor(raw: string): {
+    format: ColorFormat;
+    channels: ChannelValues;
+    alpha: number | undefined;
+} | undefined;
+export declare function buildColor(format: ColorFormat, channels: ChannelValues, alpha: number | undefined): string;
+export declare function detectFormat(raw: string): ColorFormat | undefined;

package/dist/components/input/color/shared.js

@@ -0,0 +1,349 @@
+// ── Color space names used inside color() ──────────────────────────────────
+export const COLOR_FN_SPACES = [
+    'display-p3',
+    'srgb',
+    'srgb-linear',
+    'a98-rgb',
+    'prophoto-rgb',
+    'rec2020',
+    'xyz-d50',
+    'xyz-d65'
+];
+export const FORMAT_DEFS = {
+    named: {
+        format: 'named',
+        fn: '',
+        sep: ' ',
+        channels: [{ id: 'name', label: 'Color name', kind: 'text', min: 0, max: 0 }],
+        alpha: false
+    },
+    hex: {
+        format: 'hex',
+        fn: '#',
+        sep: ' ',
+        channels: [
+            { id: 'r', label: 'Red', kind: 'hex', min: 0, max: 255 },
+            { id: 'g', label: 'Green', kind: 'hex', min: 0, max: 255 },
+            { id: 'b', label: 'Blue', kind: 'hex', min: 0, max: 255 }
+        ],
+        alpha: true
+    },
+    rgb: {
+        format: 'rgb',
+        fn: 'rgb',
+        sep: ', ',
+        channels: [
+            { id: 'r', label: 'Red', kind: 'integer', min: 0, max: 255 },
+            { id: 'g', label: 'Green', kind: 'integer', min: 0, max: 255 },
+            { id: 'b', label: 'Blue', kind: 'integer', min: 0, max: 255 }
+        ],
+        alpha: true
+    },
+    hsl: {
+        format: 'hsl',
+        fn: 'hsl',
+        sep: ' ',
+        channels: [
+            { id: 'h', label: 'Hue', kind: 'angle', min: 0, max: 360, precision: 1, suffix: 'deg' },
+            {
+                id: 's',
+                label: 'Saturation',
+                kind: 'percent',
+                min: 0,
+                max: 100,
+                precision: 1,
+                suffix: '%'
+            },
+            { id: 'l', label: 'Lightness', kind: 'percent', min: 0, max: 100, precision: 1, suffix: '%' }
+        ],
+        alpha: true
+    },
+    hwb: {
+        format: 'hwb',
+        fn: 'hwb',
+        sep: ' ',
+        channels: [
+            { id: 'h', label: 'Hue', kind: 'angle', min: 0, max: 360, precision: 1, suffix: 'deg' },
+            { id: 'w', label: 'White', kind: 'percent', min: 0, max: 100, precision: 1, suffix: '%' },
+            { id: 'b', label: 'Blackness', kind: 'percent', min: 0, max: 100, precision: 1, suffix: '%' }
+        ],
+        alpha: true
+    },
+    lab: {
+        format: 'lab',
+        fn: 'lab',
+        sep: ' ',
+        channels: [
+            { id: 'l', label: 'Lightness', kind: 'float', min: 0, max: 100, precision: 2 },
+            { id: 'a', label: 'a', kind: 'float', min: -125, max: 125, precision: 2 },
+            { id: 'b', label: 'b', kind: 'float', min: -125, max: 125, precision: 2 }
+        ],
+        alpha: true
+    },
+    lch: {
+        format: 'lch',
+        fn: 'lch',
+        sep: ' ',
+        channels: [
+            { id: 'l', label: 'Lightness', kind: 'float', min: 0, max: 100, precision: 2 },
+            { id: 'c', label: 'Chroma', kind: 'float', min: 0, max: 150, precision: 2 },
+            { id: 'h', label: 'Hue', kind: 'angle', min: 0, max: 360, precision: 1, suffix: 'deg' }
+        ],
+        alpha: true
+    },
+    oklab: {
+        format: 'oklab',
+        fn: 'oklab',
+        sep: ' ',
+        channels: [
+            { id: 'l', label: 'Lightness', kind: 'float', min: 0, max: 1, precision: 3 },
+            { id: 'a', label: 'a', kind: 'float', min: -0.4, max: 0.4, precision: 3 },
+            { id: 'b', label: 'b', kind: 'float', min: -0.4, max: 0.4, precision: 3 }
+        ],
+        alpha: true
+    },
+    oklch: {
+        format: 'oklch',
+        fn: 'oklch',
+        sep: ' ',
+        channels: [
+            { id: 'l', label: 'Lightness', kind: 'float', min: 0, max: 1, precision: 3 },
+            { id: 'c', label: 'Chroma', kind: 'float', min: 0, max: 0.4, precision: 3 },
+            { id: 'h', label: 'Hue', kind: 'angle', min: 0, max: 360, precision: 1, suffix: 'deg' }
+        ],
+        alpha: true
+    },
+    'display-p3': {
+        format: 'display-p3',
+        fn: 'color',
+        colorspace: 'display-p3',
+        sep: ' ',
+        channels: [
+            { id: 'r', label: 'Red', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'g', label: 'Green', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'b', label: 'Blue', kind: 'float', min: 0, max: 1, precision: 4 }
+        ],
+        alpha: true
+    },
+    srgb: {
+        format: 'srgb',
+        fn: 'color',
+        colorspace: 'srgb',
+        sep: ' ',
+        channels: [
+            { id: 'r', label: 'Red', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'g', label: 'Green', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'b', label: 'Blue', kind: 'float', min: 0, max: 1, precision: 4 }
+        ],
+        alpha: true
+    },
+    'srgb-linear': {
+        format: 'srgb-linear',
+        fn: 'color',
+        colorspace: 'srgb-linear',
+        sep: ' ',
+        channels: [
+            { id: 'r', label: 'Red', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'g', label: 'Green', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'b', label: 'Blue', kind: 'float', min: 0, max: 1, precision: 4 }
+        ],
+        alpha: true
+    },
+    'a98-rgb': {
+        format: 'a98-rgb',
+        fn: 'color',
+        colorspace: 'a98-rgb',
+        sep: ' ',
+        channels: [
+            { id: 'r', label: 'Red', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'g', label: 'Green', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'b', label: 'Blue', kind: 'float', min: 0, max: 1, precision: 4 }
+        ],
+        alpha: true
+    },
+    'prophoto-rgb': {
+        format: 'prophoto-rgb',
+        fn: 'color',
+        colorspace: 'prophoto-rgb',
+        sep: ' ',
+        channels: [
+            { id: 'r', label: 'Red', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'g', label: 'Green', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'b', label: 'Blue', kind: 'float', min: 0, max: 1, precision: 4 }
+        ],
+        alpha: true
+    },
+    rec2020: {
+        format: 'rec2020',
+        fn: 'color',
+        colorspace: 'rec2020',
+        sep: ' ',
+        channels: [
+            { id: 'r', label: 'Red', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'g', label: 'Green', kind: 'float', min: 0, max: 1, precision: 4 },
+            { id: 'b', label: 'Blue', kind: 'float', min: 0, max: 1, precision: 4 }
+        ],
+        alpha: true
+    },
+    'xyz-d50': {
+        format: 'xyz-d50',
+        fn: 'color',
+        colorspace: 'xyz-d50',
+        sep: ' ',
+        channels: [
+            { id: 'x', label: 'X', kind: 'float', min: -0.5, max: 1.5, precision: 4 },
+            { id: 'y', label: 'Y', kind: 'float', min: -0.5, max: 1.5, precision: 4 },
+            { id: 'z', label: 'Z', kind: 'float', min: -0.5, max: 1.5, precision: 4 }
+        ],
+        alpha: true
+    },
+    'xyz-d65': {
+        format: 'xyz-d65',
+        fn: 'color',
+        colorspace: 'xyz-d65',
+        sep: ' ',
+        channels: [
+            { id: 'x', label: 'X', kind: 'float', min: -0.5, max: 1.5, precision: 4 },
+            { id: 'y', label: 'Y', kind: 'float', min: -0.5, max: 1.5, precision: 4 },
+            { id: 'z', label: 'Z', kind: 'float', min: -0.5, max: 1.5, precision: 4 }
+        ],
+        alpha: true
+    }
+};
+// ── Parse a CSS color string → { format, channels, alpha } ────────────────
+export function parseColor(raw) {
+    const s = raw.trim();
+    if (!s)
+        return undefined;
+    // Named color — single word, only letters (e.g. red, cornflowerblue, transparent)
+    if (/^[a-zA-Z]+$/.test(s)) {
+        return { format: 'named', channels: { name: s }, alpha: undefined };
+    }
+    // Hex 6 or 8
+    const hex8 = s.match(/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})?$/);
+    if (hex8) {
+        return {
+            format: 'hex',
+            channels: { r: hex8[1].toUpperCase(), g: hex8[2].toUpperCase(), b: hex8[3].toUpperCase() },
+            alpha: hex8[4] ? parseInt(hex8[4], 16) / 255 : undefined
+        };
+    }
+    // Short hex 3 or 4
+    const hex3 = s.match(/^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])?$/);
+    if (hex3) {
+        return {
+            format: 'hex',
+            channels: {
+                r: (hex3[1] + hex3[1]).toUpperCase(),
+                g: (hex3[2] + hex3[2]).toUpperCase(),
+                b: (hex3[3] + hex3[3]).toUpperCase()
+            },
+            alpha: hex3[4] ? parseInt(hex3[4] + hex3[4], 16) / 255 : undefined
+        };
+    }
+    // Functional
+    const fnM = s.match(/^([a-z-]+)\((.+)\)$/i);
+    if (!fnM)
+        return undefined;
+    const fn = fnM[1].toLowerCase();
+    const body = fnM[2];
+    // color(colorspace …)
+    if (fn === 'color') {
+        const spaceIdx = body.search(/\s/);
+        const cs = (spaceIdx > 0 ? body.slice(0, spaceIdx) : body).toLowerCase();
+        if (!(cs in FORMAT_DEFS))
+            return undefined;
+        const rest = spaceIdx > 0 ? body.slice(spaceIdx + 1) : '';
+        const vals = parseChannelArgs(rest, true);
+        const def = FORMAT_DEFS[cs];
+        const channels = {};
+        def.channels.forEach((ch, i) => {
+            channels[ch.id] = vals[i];
+        });
+        return { format: cs, channels, alpha: vals[def.channels.length] };
+    }
+    // Named fn
+    const fmtEntry = Object.values(FORMAT_DEFS).find((f) => f.fn === fn && !f.colorspace);
+    if (!fmtEntry)
+        return undefined;
+    const vals = parseChannelArgs(body, false);
+    const channels = {};
+    fmtEntry.channels.forEach((ch, i) => {
+        channels[ch.id] = vals[i];
+    });
+    return {
+        format: fmtEntry.format,
+        channels,
+        alpha: vals[fmtEntry.channels.length]
+    };
+}
+function parseChannelArgs(body, spaceSep) {
+    const slashIdx = body.lastIndexOf('/');
+    let main = body;
+    let alphaStr;
+    if (slashIdx !== -1) {
+        main = body.slice(0, slashIdx).trim();
+        alphaStr = body.slice(slashIdx + 1).trim();
+    }
+    const tokens = main
+        .split(spaceSep ? /\s+/ : /[\s,]+/)
+        .map((t) => t.trim())
+        .filter(Boolean)
+        .map(parseChannelValue);
+    if (alphaStr !== undefined)
+        tokens.push(parseChannelValue(alphaStr));
+    return tokens;
+}
+function parseChannelValue(t) {
+    if (t.toLowerCase() === 'none')
+        return undefined;
+    if (t.endsWith('%'))
+        return parseFloat(t);
+    const n = parseFloat(t.replace(/deg|grad|rad|turn$/i, ''));
+    return isNaN(n) ? undefined : n;
+}
+// ── Build a CSS color string from format + channels ────────────────────────
+export function buildColor(format, channels, alpha) {
+    const def = FORMAT_DEFS[format];
+    if (!def)
+        return '';
+    if (format === 'named') {
+        return String(channels['name'] ?? '');
+    }
+    if (format === 'hex') {
+        const r = channels['r'] ?? '00';
+        const g = channels['g'] ?? '00';
+        const b = channels['b'] ?? '00';
+        const a = alpha !== undefined
+            ? Math.round(alpha * 255)
+                .toString(16)
+                .padStart(2, '0')
+            : '';
+        return `#${r}${g}${b}${a}`;
+    }
+    const vals = def.channels.map((ch) => {
+        const v = channels[ch.id];
+        if (v === undefined)
+            return 'none';
+        const precision = ch.precision ?? 0;
+        const num = precision > 0
+            ? (typeof v === 'number' ? v : parseFloat(String(v))).toFixed(precision)
+            : String(Math.round(typeof v === 'number' ? v : parseFloat(String(v))));
+        return ch.suffix ? num + ch.suffix : num;
+    });
+    const alphaStr = alpha !== undefined ? ` / ${alpha.toFixed(2)}` : '';
+    if (def.colorspace) {
+        return `color(${def.colorspace} ${vals.join(' ')}${alphaStr})`;
+    }
+    const sep = def.sep;
+    // Legacy rgb/hsl with commas — put alpha inside as rgba/hsla
+    if (sep === ', ' && alpha !== undefined) {
+        vals.push(alpha.toFixed(2));
+        return `${def.fn}(${vals.join(sep)})`;
+    }
+    return `${def.fn}(${vals.join(sep)}${alphaStr})`;
+}
+// ── Detect format from a raw string ───────────────────────────────────────
+export function detectFormat(raw) {
+    return parseColor(raw)?.format;
+}

package/dist/components/input/color/swatch.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn } from '../../../utils';
+	import { InputBond } from '../bond.svelte';
+	import { Swatch } from '../../swatch';
+
+	const bond = InputBond.get();
+
+	let {
+		class: klass = '',
+		...restProps
+	}: {
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	const colorValue = $derived(String(bond?.state?.props?.value ?? ''));
+</script>
+
+<Swatch
+	color={colorValue}
+	class={cn('my-1 h-[calc(100%-8px)] max-h-6 aspect-square rounded-sm', klass)}
+	{...restProps}
+/>

package/dist/components/input/color/swatch.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Swatch } from '../../swatch';
+type $$ComponentProps = {
+    class?: string;
+    [key: string]: unknown;
+};
+declare const Swatch: import("svelte").Component<$$ComponentProps, {}, "">;
+type Swatch = ReturnType<typeof Swatch>;
+export default Swatch;