@dryui/ui 3.0.0 → 4.0.1

package/src/collapsible/collapsible-root.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setCollapsibleCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		open?: boolean;
+		disabled?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		disabled = false,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	const uid = $props.id();
+	const contentId = `collapsible-content-${uid}`;
+
+	setCollapsibleCtx({
+		get open() {
+			return open;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get contentId() {
+			return contentId;
+		},
+		toggle() {
+			if (!disabled) {
+				open = !open;
+			}
+		}
+	});
+</script>
+
+<div
+	data-state={open ? 'open' : 'closed'}
+	data-disabled={disabled || undefined}
+	class={className}
+	{...rest}
+>
+	{@render children()}
+</div>

package/src/collapsible/collapsible.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Collapsible',
+	description: 'Expandable/collapsible content panel',
+	category: 'display',
+	tags: ['disclosure', 'collapse', 'expand', 'toggle']
+};

package/src/collapsible/context.svelte.ts

@@ -0,0 +1,10 @@
+import { createContext } from '@dryui/primitives';
+
+interface CollapsibleContext {
+	readonly open: boolean;
+	readonly disabled: boolean;
+	readonly contentId: string;
+	toggle: () => void;
+}
+export const [setCollapsibleCtx, getCollapsibleCtx] =
+	createContext<CollapsibleContext>('collapsible');

package/src/collapsible/index.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+
+export interface CollapsibleRootProps extends HTMLAttributes<HTMLDivElement> {
+	open?: boolean;
+	disabled?: boolean;
+	children: Snippet;
+}
+
+export interface CollapsibleTriggerProps extends HTMLButtonAttributes {
+	children: Snippet;
+}
+
+export interface CollapsibleContentProps extends HTMLAttributes<HTMLDivElement> {
+	children: Snippet;
+}
+
+import CollapsibleRoot from './collapsible-root.svelte';
+import CollapsibleTrigger from './collapsible-button-trigger.svelte';
+import CollapsibleContent from './collapsible-content.svelte';
+
+export const Collapsible: {
+	Root: typeof CollapsibleRoot;
+	Trigger: typeof CollapsibleTrigger;
+	Content: typeof CollapsibleContent;
+} = {
+	Root: CollapsibleRoot,
+	Trigger: CollapsibleTrigger,
+	Content: CollapsibleContent
+};

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

@@ -0,0 +1,181 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getColorPickerCtx } from './context.svelte.js';
+	import { clamp } from '@dryui/primitives';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 200, height = 150, class: className, style, ...rest }: Props = $props();
+
+	const ctx = getColorPickerCtx();
+
+	let canvasEl = $state<HTMLCanvasElement>();
+	let rootEl = $state<HTMLDivElement>();
+	let isDragging = $state(false);
+
+	$effect(() => {
+		const node = canvasEl;
+		const hue = ctx.hsv.h;
+		if (!node) return;
+
+		const ctx2d = node.getContext('2d');
+		if (!ctx2d) return;
+
+		const w = node.width;
+		const h = node.height;
+		const hueColor = `hsl(${hue}, 100%, 50%)`;
+
+		const hGrad = ctx2d.createLinearGradient(0, 0, w, 0);
+		hGrad.addColorStop(0, '#ffffff');
+		hGrad.addColorStop(1, hueColor);
+		ctx2d.fillStyle = hGrad;
+		ctx2d.fillRect(0, 0, w, h);
+
+		const vGrad = ctx2d.createLinearGradient(0, 0, 0, h);
+		vGrad.addColorStop(0, 'rgba(0, 0, 0, 0)');
+		vGrad.addColorStop(1, 'rgba(0, 0, 0, 1)');
+		ctx2d.fillStyle = vGrad;
+		ctx2d.fillRect(0, 0, w, h);
+	});
+
+	function getPositionFromEvent(e: PointerEvent): { s: number; v: number } {
+		if (!canvasEl) return { s: 0, v: 0 };
+		const rect = canvasEl.getBoundingClientRect();
+		const x = clamp(e.clientX - rect.left, 0, rect.width);
+		const y = clamp(e.clientY - rect.top, 0, rect.height);
+		const s = (x / rect.width) * 100;
+		const v = 100 - (y / rect.height) * 100;
+		return { s, v };
+	}
+
+	const indicatorX = $derived((ctx.hsv.s / 100) * width);
+	const indicatorY = $derived((1 - ctx.hsv.v / 100) * height);
+
+	const valueText = $derived(
+		`Saturation ${Math.round(ctx.hsv.s)}%, Brightness ${Math.round(ctx.hsv.v)}%`
+	);
+
+	$effect(() => {
+		const node = rootEl;
+		if (!node) return;
+
+		function handlePointerDown(e: PointerEvent) {
+			if (ctx.disabled) return;
+			e.preventDefault();
+			isDragging = true;
+			node!.setPointerCapture(e.pointerId);
+			const { s, v } = getPositionFromEvent(e);
+			ctx.setSaturationValue(s, v);
+		}
+
+		function handlePointerMove(e: PointerEvent) {
+			if (!isDragging || ctx.disabled) return;
+			const { s, v } = getPositionFromEvent(e);
+			ctx.setSaturationValue(s, v);
+		}
+
+		function handlePointerUp(e: PointerEvent) {
+			isDragging = false;
+			node!.releasePointerCapture(e.pointerId);
+		}
+
+		function handleKeydown(e: KeyboardEvent) {
+			if (ctx.disabled) return;
+			const step = e.shiftKey ? 10 : 1;
+			if (e.key === 'ArrowRight') ctx.setSaturationValue(ctx.hsv.s + step, ctx.hsv.v);
+			else if (e.key === 'ArrowLeft') ctx.setSaturationValue(ctx.hsv.s - step, ctx.hsv.v);
+			else if (e.key === 'ArrowUp') ctx.setSaturationValue(ctx.hsv.s, ctx.hsv.v + step);
+			else if (e.key === 'ArrowDown') ctx.setSaturationValue(ctx.hsv.s, ctx.hsv.v - step);
+		}
+
+		node.addEventListener('pointerdown', handlePointerDown);
+		node.addEventListener('pointermove', handlePointerMove);
+		node.addEventListener('pointerup', handlePointerUp);
+		node.addEventListener('keydown', handleKeydown);
+		return () => {
+			node.removeEventListener('pointerdown', handlePointerDown);
+			node.removeEventListener('pointermove', handlePointerMove);
+			node.removeEventListener('pointerup', handlePointerUp);
+			node.removeEventListener('keydown', handleKeydown);
+		};
+	});
+
+	$effect(() => {
+		if (!rootEl) return;
+		rootEl.style.cssText = style || '';
+		rootEl.style.setProperty('--_area-w', `${width}px`);
+		rootEl.style.setProperty('--_area-h', `${height}px`);
+		rootEl.style.setProperty('--_ind-left', `${indicatorX}px`);
+		rootEl.style.setProperty('--_ind-top', `${indicatorY}px`);
+		rootEl.style.setProperty('--_ind-color', ctx.hex);
+	});
+</script>
+
+<div
+	bind:this={rootEl}
+	role="slider"
+	aria-label="Color saturation and brightness"
+	aria-valuetext={valueText}
+	aria-disabled={ctx.disabled || undefined}
+	tabindex={ctx.disabled ? -1 : 0}
+	data-cp-area
+	data-disabled={ctx.disabled || undefined}
+	class={className}
+	{...rest}
+>
+	<canvas bind:this={canvasEl} {width} {height} data-cp-area-canvas aria-hidden="true"></canvas>
+	<div aria-hidden="true" data-cp-area-indicator></div>
+</div>
+
+<style>
+	[data-cp-area] {
+		--dry-color-picker-area-width: var(--_area-w, 200px);
+		--dry-color-picker-area-height: var(--_area-h, 150px);
+		--dry-color-picker-indicator-left: var(--_ind-left, 0px);
+		--dry-color-picker-indicator-top: var(--_ind-top, 0px);
+		--dry-color-picker-indicator-color: var(--_ind-color, #ff0000);
+
+		position: relative;
+		display: grid;
+		grid-template-columns: var(--dry-color-picker-area-width);
+		height: var(--dry-color-picker-area-height);
+		border-radius: var(--dry-radius-md);
+		overflow: hidden;
+		cursor: crosshair;
+		touch-action: none;
+	}
+
+	[data-cp-area]:focus-visible {
+		outline: var(--dry-focus-ring);
+		outline-offset: 2px;
+	}
+
+	[data-cp-area][data-disabled] {
+		opacity: var(--dry-state-disabled-opacity);
+		cursor: not-allowed;
+	}
+
+	[data-cp-area-canvas] {
+		display: grid;
+		border-radius: inherit;
+	}
+
+	[data-cp-area-indicator] {
+		position: absolute;
+		left: var(--dry-color-picker-indicator-left);
+		top: var(--dry-color-picker-indicator-top);
+		height: 16px;
+		aspect-ratio: 1;
+		border-radius: 50%;
+		border: 2px solid var(--dry-color-picker-indicator-border, var(--dry-color-bg-overlay, Canvas));
+		box-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);
+		transform: translate(-50%, -50%);
+		pointer-events: none;
+		background: var(--dry-color-picker-indicator-color);
+	}
+</style>

package/src/color-picker/color-picker-button-eyedropper.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getColorPickerCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		children?: Snippet;
+	}
+
+	let { children, ...rest }: Props = $props();
+
+	const ctx = getColorPickerCtx();
+
+	const isSupported = $derived(typeof window !== 'undefined' && 'EyeDropper' in window);
+
+	async function handleClick() {
+		if (!isSupported || ctx.disabled) return;
+
+		try {
+			// @ts-expect-error EyeDropper API not yet in standard TS lib
+			const eyeDropper = new window.EyeDropper();
+			const result = await eyeDropper.open();
+			if (result?.sRGBHex) {
+				ctx.setFromHex(result.sRGBHex);
+			}
+		} catch {
+			// User cancelled or error
+		}
+	}
+</script>
+
+{#if isSupported}
+	<Button
+		variant="outline"
+		size="icon-sm"
+		type="button"
+		aria-label="Pick color from screen"
+		disabled={ctx.disabled}
+		onclick={handleClick}
+		{...rest}
+	>
+		{#if children}
+			{@render children()}
+		{:else}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+				><path
+					d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3l8 8M3 9l8 8m-8-8 1.5 1.5M11 17l-1 4-4 1 1-4"
+				/></svg
+			>
+		{/if}
+	</Button>
+{/if}

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

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { getColorPickerCtx } from './context.svelte.js';
+
+	interface Props extends Omit<HTMLInputAttributes, 'value' | 'type' | 'min' | 'max'> {
+		channel: 'h' | 's' | 'v';
+	}
+
+	let { channel, class: className, ...rest }: Props = $props();
+
+	const ctx = getColorPickerCtx();
+
+	const config = {
+		h: { min: 0, max: 360, label: 'Hue' },
+		s: { min: 0, max: 100, label: 'Saturation' },
+		v: { min: 0, max: 100, label: 'Brightness' }
+	} as const;
+
+	const cfg = $derived(config[channel]);
+	const value = $derived(ctx.hsv[channel]);
+
+	function onInput(e: Event) {
+		const target = e.currentTarget as HTMLInputElement;
+		const num = Number(target.value);
+		if (Number.isNaN(num)) return;
+		const clamped = Math.max(cfg.min, Math.min(cfg.max, Math.round(num)));
+
+		if (channel === 'h') {
+			ctx.setHue(clamped);
+		} else {
+			const newS = channel === 's' ? clamped : ctx.hsv.s;
+			const newV = channel === 'v' ? clamped : ctx.hsv.v;
+			ctx.setSaturationValue(newS, newV);
+		}
+	}
+</script>
+
+<input
+	type="number"
+	min={cfg.min}
+	max={cfg.max}
+	step={1}
+	{value}
+	oninput={onInput}
+	disabled={ctx.disabled}
+	aria-label={cfg.label}
+	data-cp-input
+	data-channel={channel}
+	data-disabled={ctx.disabled || undefined}
+	class={className}
+	{...rest}
+/>
+
+<style>
+	[data-cp-input] {
+		padding: var(--dry-space-2) var(--dry-space-3);
+		font-size: var(--dry-type-small-size);
+		line-height: var(--dry-type-small-leading);
+		font-family: var(--dry-font-mono);
+		color: var(--dry-color-text-strong);
+		background: var(--dry-color-bg-raised);
+		border: 1px solid var(--dry-color-stroke-strong);
+		border-radius: var(--dry-radius-md);
+		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-color-stroke-strong);
+	}
+
+	[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-input-alpha-slider.svelte

@@ -0,0 +1,144 @@
+<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();
+
+	const alphaPercent = $derived(Math.round(ctx.alpha * 100));
+
+	function onInput(e: Event) {
+		const target = e.currentTarget as HTMLInputElement;
+		ctx.setAlpha(Number(target.value) / 100);
+	}
+
+	const rgbStr = $derived(`${ctx.rgb.r}, ${ctx.rgb.g}, ${ctx.rgb.b}`);
+
+	function applyStyles(node: HTMLElement) {
+		$effect(() => {
+			node.style.cssText = style || '';
+			node.style.setProperty('--_alpha-rgb', rgbStr);
+		});
+	}
+</script>
+
+<div data-cp-slider-wrapper>
+	<input
+		type="range"
+		min="0"
+		max="100"
+		step="1"
+		value={alphaPercent}
+		oninput={onInput}
+		disabled={ctx.disabled}
+		aria-label="Opacity"
+		aria-valuemin={0}
+		aria-valuemax={100}
+		aria-valuenow={alphaPercent}
+		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-alpha-rgb: var(--_alpha-rgb, 255, 0, 0);
+		--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:
+			linear-gradient(to right, rgba(var(--dry-alpha-rgb), 0), rgba(var(--dry-alpha-rgb), 1)),
+			repeating-conic-gradient(
+					color-mix(in srgb, var(--dry-color-text-strong) 12%, transparent) 0% 25%,
+					var(--dry-color-bg-overlay) 0% 50%
+				)
+				0 0 / 12px 12px;
+	}
+
+	[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>