@dryui/ui 3.0.0 → 4.0.1

package/src/color-picker/color-picker-input-hue-slider.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { getColorPickerCtx } from './context.svelte.js';
+
+	type Props = Omit<HTMLInputAttributes, 'value' | 'type' | 'min' | 'max' | 'step'>;
+
+	let { class: className, style, ...rest }: Props = $props();
+
+	const ctx = getColorPickerCtx();
+
+	let hue = $derived(ctx.hsv.h);
+
+	function onInput(e: Event) {
+		const target = e.currentTarget as HTMLInputElement;
+		ctx.setHue(Number(target.value));
+	}
+
+	function applyStyles(node: HTMLElement) {
+		$effect(() => {
+			node.style.cssText = style || '';
+		});
+	}
+</script>
+
+<div data-cp-slider-wrapper>
+	<input
+		type="range"
+		min="0"
+		max="360"
+		step="1"
+		value={hue}
+		oninput={onInput}
+		disabled={ctx.disabled}
+		aria-label="Hue"
+		aria-valuemin={0}
+		aria-valuemax={360}
+		aria-valuenow={hue}
+		data-cp-slider
+		data-disabled={ctx.disabled || undefined}
+		class={className}
+		{...rest}
+		use:applyStyles
+	/>
+</div>
+
+<style>
+	[data-cp-slider-wrapper] {
+		display: grid;
+		align-items: center;
+	}
+
+	[data-cp-slider] {
+		--dry-slider-track-height: var(--dry-color-picker-slider-track-height);
+		--dry-slider-thumb-size: var(--dry-color-picker-slider-thumb-size);
+
+		appearance: none;
+		-webkit-appearance: none;
+		cursor: pointer;
+		margin: 0;
+		border-radius: var(--dry-radius-full);
+		height: var(--dry-slider-track-height);
+		padding: 0;
+		border: none;
+		outline: none;
+		background: var(
+			--dry-color-picker-slider-track-bg,
+			linear-gradient(
+				to right,
+				hsl(0 100% 50%),
+				hsl(60 100% 50%),
+				hsl(120 100% 50%),
+				hsl(180 100% 50%),
+				hsl(240 100% 50%),
+				hsl(300 100% 50%),
+				hsl(360 100% 50%)
+			)
+		);
+	}
+
+	[data-cp-slider]::-webkit-slider-runnable-track {
+		height: var(--dry-slider-track-height);
+		border-radius: var(--dry-radius-full);
+	}
+
+	[data-cp-slider]::-moz-range-track {
+		height: var(--dry-slider-track-height);
+		border-radius: var(--dry-radius-full);
+	}
+
+	[data-cp-slider]::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		height: var(--dry-slider-thumb-size);
+		aspect-ratio: 1;
+		border-radius: 50%;
+		background: var(--dry-color-picker-slider-thumb-bg);
+		border: 2px solid var(--dry-color-picker-slider-thumb-border);
+		box-shadow: var(--dry-color-picker-slider-thumb-shadow);
+		margin-top: calc((var(--dry-slider-track-height) - var(--dry-slider-thumb-size)) / 2);
+		transition:
+			transform var(--dry-duration-fast) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
+		cursor: pointer;
+	}
+
+	[data-cp-slider]::-moz-range-thumb {
+		height: var(--dry-slider-thumb-size);
+		aspect-ratio: 1;
+		border-radius: 50%;
+		background: var(--dry-color-picker-slider-thumb-bg);
+		border: 2px solid var(--dry-color-picker-slider-thumb-border);
+		box-shadow: var(--dry-color-picker-slider-thumb-shadow);
+		transition:
+			transform var(--dry-duration-fast) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
+		cursor: pointer;
+	}
+
+	[data-cp-slider]:hover:not([data-disabled])::-webkit-slider-thumb {
+		transform: scale(1.1);
+		box-shadow: var(--dry-color-picker-slider-thumb-shadow-hover);
+	}
+
+	[data-cp-slider]:hover:not([data-disabled])::-moz-range-thumb {
+		transform: scale(1.1);
+		box-shadow: var(--dry-color-picker-slider-thumb-shadow-hover);
+	}
+
+	[data-cp-slider]:active:not([data-disabled])::-webkit-slider-thumb {
+		transform: scale(0.95);
+	}
+
+	[data-cp-slider]:active:not([data-disabled])::-moz-range-thumb {
+		transform: scale(0.95);
+	}
+
+	[data-cp-slider]:focus-visible {
+		outline: var(--dry-focus-ring);
+		outline-offset: 2px;
+	}
+
+	[data-cp-slider][data-disabled] {
+		opacity: var(--dry-state-disabled-opacity);
+		cursor: not-allowed;
+	}
+</style>

package/src/color-picker/color-picker-input.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { getColorPickerCtx } from './context.svelte.js';
+	import { formatRgb, formatHsl, parseColor, isValidHex } from '@dryui/primitives';
+
+	interface Props extends Omit<HTMLInputAttributes, 'value' | 'type'> {
+		format?: 'hex' | 'rgb' | 'hsl';
+	}
+
+	let { format = 'hex', class: className, ...rest }: Props = $props();
+
+	const ctx = getColorPickerCtx();
+
+	let inputValue = $state('');
+	let isFocused = $state(false);
+
+	const displayValue = $derived(
+		format === 'hex' ? ctx.hex : format === 'rgb' ? formatRgb(ctx.rgb) : formatHsl(ctx.hsl)
+	);
+
+	$effect(() => {
+		if (!isFocused) {
+			inputValue = displayValue;
+		}
+	});
+
+	const ariaLabel = $derived(
+		format === 'hex' ? 'Hex color' : format === 'rgb' ? 'RGB color' : 'HSL color'
+	);
+
+	function commit() {
+		const trimmed = inputValue.trim();
+
+		if (format === 'hex') {
+			if (isValidHex(trimmed)) {
+				ctx.setFromHex(trimmed);
+				return;
+			}
+			const withHash = `#${trimmed}`;
+			if (isValidHex(withHash)) {
+				ctx.setFromHex(withHash);
+				return;
+			}
+		} else {
+			const parsed = parseColor(trimmed);
+			if (parsed) {
+				ctx.setFromRgb(parsed);
+				return;
+			}
+		}
+
+		inputValue = displayValue;
+	}
+
+	function onFocus() {
+		isFocused = true;
+		inputValue = displayValue;
+	}
+
+	function onBlur() {
+		isFocused = false;
+		commit();
+	}
+
+	function onKeyDown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			commit();
+			(e.currentTarget as HTMLInputElement).blur();
+		} else if (e.key === 'Escape') {
+			isFocused = false;
+			inputValue = displayValue;
+			(e.currentTarget as HTMLInputElement).blur();
+		}
+	}
+</script>
+
+<input
+	type="text"
+	value={isFocused ? inputValue : displayValue}
+	oninput={(e) => {
+		inputValue = (e.currentTarget as HTMLInputElement).value;
+	}}
+	onfocus={onFocus}
+	onblur={onBlur}
+	onkeydown={onKeyDown}
+	disabled={ctx.disabled}
+	aria-label={ariaLabel}
+	data-cp-input
+	data-format={format}
+	data-disabled={ctx.disabled || undefined}
+	spellcheck={false}
+	autocomplete="off"
+	class={className}
+	{...rest}
+/>
+
+<style>
+	[data-cp-input] {
+		padding: var(--dry-form-control-padding-block) var(--dry-form-control-padding-inline);
+		font-size: var(--dry-form-control-font-size);
+		line-height: var(--dry-type-small-leading);
+		font-family: var(--dry-font-mono);
+		color: var(--dry-form-control-color);
+		background: var(--dry-form-control-bg);
+		border: 1px solid var(--dry-form-control-border);
+		border-radius: var(--dry-form-control-radius);
+		transition:
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
+		box-sizing: border-box;
+		appearance: none;
+	}
+
+	[data-cp-input]:hover:not([data-disabled]) {
+		border-color: var(--dry-form-control-border-hover);
+	}
+
+	[data-cp-input]:focus-visible {
+		outline: var(--dry-focus-ring);
+		outline-offset: -1px;
+		border-color: var(--dry-color-focus-ring);
+	}
+
+	[data-cp-input][data-disabled] {
+		opacity: var(--dry-state-disabled-opacity);
+		cursor: not-allowed;
+	}
+</style>

package/src/color-picker/color-picker-root.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setColorPickerCtx } from './context.svelte.js';
+	import {
+		hexToRgb,
+		rgbToHex,
+		rgbToHsv,
+		hsvToRgb,
+		hsvToHsl,
+		isValidHex,
+		clamp
+	} from '@dryui/primitives';
+	import type { RGB, HSV } from '@dryui/primitives';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		value?: string;
+		alpha?: number;
+		disabled?: boolean;
+		width?: number;
+		areaHeight?: number;
+		children: Snippet;
+	}
+
+	let {
+		value = $bindable('#ff0000'),
+		alpha = $bindable(1),
+		disabled = false,
+		width,
+		areaHeight,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	let internalHsv = $state<HSV>(
+		(() => {
+			const initHex = isValidHex(value) ? value : '#ff0000';
+			return rgbToHsv(hexToRgb(initHex));
+		})()
+	);
+
+	const rgb = $derived(hsvToRgb(internalHsv));
+	const hsl = $derived(hsvToHsl(internalHsv));
+	const hex = $derived(rgbToHex(rgb));
+
+	function updateHsv(hsv: HSV) {
+		internalHsv = hsv;
+		const newHex = rgbToHex(hsvToRgb(hsv));
+		lastSyncedValue = newHex;
+		value = newHex;
+	}
+
+	let lastSyncedValue = value;
+	$effect.pre(() => {
+		if (value !== lastSyncedValue && isValidHex(value)) {
+			lastSyncedValue = value;
+			internalHsv = rgbToHsv(hexToRgb(value));
+		}
+	});
+
+	setColorPickerCtx({
+		get hex() {
+			return hex;
+		},
+		get rgb() {
+			return rgb;
+		},
+		get hsv() {
+			return internalHsv;
+		},
+		get hsl() {
+			return hsl;
+		},
+		get alpha() {
+			return alpha;
+		},
+		get disabled() {
+			return disabled;
+		},
+
+		setFromHsv(hsv: HSV) {
+			updateHsv({
+				h: clamp(Math.round(hsv.h), 0, 360),
+				s: clamp(Math.round(hsv.s), 0, 100),
+				v: clamp(Math.round(hsv.v), 0, 100)
+			});
+		},
+
+		setFromHex(newHex: string) {
+			if (isValidHex(newHex)) {
+				updateHsv(rgbToHsv(hexToRgb(newHex)));
+			}
+		},
+
+		setFromRgb(newRgb: RGB) {
+			updateHsv(rgbToHsv(newRgb));
+		},
+
+		setHue(h: number) {
+			updateHsv({ ...internalHsv, h: clamp(Math.round(h), 0, 360) });
+		},
+
+		setSaturationValue(s: number, v: number) {
+			updateHsv({
+				...internalHsv,
+				s: clamp(Math.round(s), 0, 100),
+				v: clamp(Math.round(v), 0, 100)
+			});
+		},
+
+		setAlpha(a: number) {
+			alpha = clamp(a, 0, 1);
+		}
+	});
+
+	let el = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!el) return;
+		if (width !== undefined) {
+			el.style.setProperty('--dry-color-picker-width', `${width}px`);
+			el.style.setProperty('--dry-color-picker-area-width', `${width}px`);
+		} else {
+			el.style.removeProperty('--dry-color-picker-width');
+			el.style.removeProperty('--dry-color-picker-area-width');
+		}
+		if (areaHeight !== undefined) {
+			el.style.setProperty('--dry-color-picker-area-height', `${areaHeight}px`);
+		} else {
+			el.style.removeProperty('--dry-color-picker-area-height');
+		}
+	});
+</script>
+
+<div
+	bind:this={el}
+	data-color-picker
+	data-disabled={disabled || undefined}
+	class={className}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-color-picker] {
+		--dry-color-picker-width: 220px;
+		--dry-color-picker-area-width: 200px;
+		--dry-color-picker-area-height: 150px;
+		--dry-color-picker-indicator-size: var(--dry-space-4);
+		--dry-color-picker-indicator-border: var(--dry-color-bg-overlay);
+		--dry-color-picker-indicator-shadow:
+			0 0 0 1px color-mix(in srgb, var(--dry-color-text-strong) 30%, transparent),
+			0 2px 4px color-mix(in srgb, var(--dry-color-text-strong) 30%, transparent);
+		--dry-color-picker-slider-track-height: var(--dry-space-2_5);
+		--dry-color-picker-slider-thumb-size: calc(var(--dry-space-4) + var(--dry-space-0_5));
+		--dry-color-picker-slider-thumb-bg: var(--dry-color-bg-overlay);
+		--dry-color-picker-slider-thumb-border: color-mix(
+			in srgb,
+			var(--dry-color-text-strong) 20%,
+			transparent
+		);
+		--dry-color-picker-slider-thumb-shadow: 0 1px 4px
+			color-mix(in srgb, var(--dry-color-text-strong) 30%, transparent);
+		--dry-color-picker-slider-thumb-shadow-hover: 0 2px 6px
+			color-mix(in srgb, var(--dry-color-text-strong) 35%, transparent);
+		--dry-color-picker-swatch-size: var(--dry-space-8);
+		--dry-color-picker-grid-light: var(--dry-color-bg-overlay);
+		--dry-color-picker-grid-dark: color-mix(in srgb, var(--dry-color-text-strong) 8%, transparent);
+		--dry-color-picker-grid-size: var(--dry-space-3);
+		--dry-color-picker-surface-hover: var(--dry-color-bg-raised);
+
+		container-type: inline-size;
+		display: grid;
+		grid-template-columns: var(--dry-color-picker-area-width);
+		gap: var(--dry-space-3);
+	}
+
+	@container (max-width: 180px) {
+		[data-color-picker] {
+			gap: var(--dry-space-2);
+		}
+	}
+</style>

package/src/color-picker/color-picker-swatch.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getColorPickerCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		color?: string;
+	}
+
+	let { color, class: className, style, ...rest }: Props = $props();
+
+	const ctx = getColorPickerCtx();
+
+	const displayColor = $derived(color ?? ctx.hex);
+	const displayAlpha = $derived(color ? 1 : ctx.alpha);
+
+	let el = $state<HTMLDivElement>();
+
+	$effect(() => {
+		const node = el;
+		if (!node) return;
+
+		function handleClick() {
+			if (color && !ctx.disabled) ctx.setFromHex(color);
+		}
+		function handleKeydown(e: KeyboardEvent) {
+			if (color && !ctx.disabled && (e.key === 'Enter' || e.key === ' ')) {
+				e.preventDefault();
+				ctx.setFromHex(color);
+			}
+		}
+		node.addEventListener('click', handleClick);
+		node.addEventListener('keydown', handleKeydown);
+		return () => {
+			node.removeEventListener('click', handleClick);
+			node.removeEventListener('keydown', handleKeydown);
+		};
+	});
+
+	$effect(() => {
+		if (!el) return;
+		el.style.cssText = style || '';
+		el.style.setProperty('--_swatch-color', displayColor);
+		el.style.setProperty('--_swatch-opacity', String(displayAlpha));
+	});
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+	bind:this={el}
+	role={color ? 'button' : 'img'}
+	tabindex={color && !ctx.disabled ? 0 : undefined}
+	aria-label={color ? `Select color ${color}` : 'Current color'}
+	data-cp-swatch
+	data-interactive={color ? '' : undefined}
+	data-disabled={ctx.disabled || undefined}
+	class={className}
+	{...rest}
+></div>
+
+<style>
+	[data-cp-swatch] {
+		--dry-swatch-color: var(--_swatch-color, #ff0000);
+		--dry-swatch-opacity: var(--_swatch-opacity, 1);
+
+		height: var(--dry-color-picker-swatch-size);
+		aspect-ratio: 1;
+		border-radius: var(--dry-radius-md);
+		border: 1px solid var(--dry-color-stroke-weak);
+		cursor: default;
+		position: relative;
+		overflow: hidden;
+	}
+
+	[data-cp-swatch]::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background: repeating-conic-gradient(
+				var(--dry-color-picker-grid-light) 0% 25%,
+				var(--dry-color-picker-grid-dark) 0% 50%
+			)
+			0 0 / var(--dry-color-picker-grid-size) var(--dry-color-picker-grid-size);
+		border-radius: inherit;
+	}
+
+	[data-cp-swatch]::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background: var(--dry-swatch-color);
+		opacity: var(--dry-swatch-opacity);
+		border-radius: inherit;
+	}
+
+	[data-cp-swatch][data-interactive] {
+		cursor: pointer;
+	}
+
+	[data-cp-swatch][data-interactive]:hover:not([data-disabled]) {
+		border-color: var(--dry-color-stroke-strong);
+		transform: scale(1.05);
+		transition:
+			transform var(--dry-duration-fast) var(--dry-ease-default),
+			border-color var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-cp-swatch][data-interactive]:focus-visible {
+		outline: var(--dry-focus-ring);
+		outline-offset: 2px;
+	}
+
+	[data-cp-swatch][data-interactive][data-disabled] {
+		opacity: var(--dry-state-disabled-opacity);
+		cursor: not-allowed;
+	}
+</style>

package/src/color-picker/color-picker.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'ColorPicker',
+	description: 'Color selection with area, hue/alpha sliders, and eyedropper',
+	category: 'input',
+	tags: ['form', 'color', 'picker', 'palette']
+};

package/src/color-picker/context.svelte.ts

@@ -0,0 +1,19 @@
+import { createContext } from '@dryui/primitives';
+import type { RGB, HSV, HSL } from '@dryui/primitives';
+
+export interface ColorPickerContext {
+	readonly hex: string;
+	readonly rgb: RGB;
+	readonly hsv: HSV;
+	readonly hsl: HSL;
+	readonly alpha: number;
+	readonly disabled: boolean;
+	setFromHsv: (hsv: HSV) => void;
+	setFromHex: (hex: string) => void;
+	setFromRgb: (rgb: RGB) => void;
+	setHue: (h: number) => void;
+	setSaturationValue: (s: number, v: number) => void;
+	setAlpha: (a: number) => void;
+}
+export const [setColorPickerCtx, getColorPickerCtx] =
+	createContext<ColorPickerContext>('color-picker');

package/src/color-picker/index.ts

@@ -0,0 +1,45 @@
+export type {
+	ColorPickerAreaProps,
+	ColorPickerHueSliderProps,
+	ColorPickerAlphaSliderProps,
+	ColorPickerInputProps,
+	ColorPickerSwatchProps,
+	ColorPickerEyeDropperProps,
+	ColorPickerChannelInputProps
+} from '@dryui/primitives';
+
+import type { ColorPickerRootProps as PrimitiveColorPickerRootProps } from '@dryui/primitives';
+
+export interface ColorPickerRootProps extends PrimitiveColorPickerRootProps {
+	width?: number;
+	areaHeight?: number;
+}
+
+import ColorPickerRoot from './color-picker-root.svelte';
+import ColorPickerArea from './color-picker-area.svelte';
+import ColorPickerHueSlider from './color-picker-input-hue-slider.svelte';
+import ColorPickerAlphaSlider from './color-picker-input-alpha-slider.svelte';
+import ColorPickerInput from './color-picker-input.svelte';
+import ColorPickerSwatch from './color-picker-swatch.svelte';
+import ColorPickerEyeDropper from './color-picker-button-eyedropper.svelte';
+import ColorPickerChannelInput from './color-picker-channel-input.svelte';
+
+export const ColorPicker: {
+	Root: typeof ColorPickerRoot;
+	Area: typeof ColorPickerArea;
+	HueSlider: typeof ColorPickerHueSlider;
+	AlphaSlider: typeof ColorPickerAlphaSlider;
+	Input: typeof ColorPickerInput;
+	Swatch: typeof ColorPickerSwatch;
+	EyeDropper: typeof ColorPickerEyeDropper;
+	ChannelInput: typeof ColorPickerChannelInput;
+} = {
+	Root: ColorPickerRoot,
+	Area: ColorPickerArea,
+	HueSlider: ColorPickerHueSlider,
+	AlphaSlider: ColorPickerAlphaSlider,
+	Input: ColorPickerInput,
+	Swatch: ColorPickerSwatch,
+	EyeDropper: ColorPickerEyeDropper,
+	ChannelInput: ColorPickerChannelInput
+};