@rokkit/ui 1.0.0-next.99 → 1.0.1

package/src/components/PaletteManager.svelte

@@ -0,0 +1,360 @@
+<script lang="ts">
+	import type { PaletteManagerProps, PaletteConfig, PaletteManagerIcons } from '../types/palette.js'
+	import { defaultRoles, defaultPresets, defaultPaletteConfig } from '../types/palette.js'
+	import { DEFAULT_STATE_ICONS } from '@rokkit/core'
+	import type { ColorRole, Shades } from '../utils/palette.js'
+	import {
+		getShades,
+		applyPalette,
+		savePalette,
+		loadPalette,
+		isHexColor,
+		getTailwindColorNames
+	} from '../utils/palette.js'
+
+	let {
+		value = $bindable<PaletteConfig>(structuredClone(defaultPaletteConfig)),
+		presets = defaultPresets,
+		custom = $bindable<PaletteConfig[]>([]),
+		storageKey,
+		roles = defaultRoles,
+		icons: userIcons = {} as PaletteManagerIcons,
+		autoApply = true,
+		showPresets = true,
+		showSave = true,
+		compact = false,
+		class: className = '',
+		onchange,
+		onsave,
+		onapply,
+		roleRow: roleRowSnippet
+	}: PaletteManagerProps = $props()
+
+	const icons = $derived({
+		save: DEFAULT_STATE_ICONS.action.save,
+		check: DEFAULT_STATE_ICONS.action.check,
+		presets: DEFAULT_STATE_ICONS.palette.presets,
+		hex: DEFAULT_STATE_ICONS.palette.hex,
+		...userIcons
+	})
+
+	// Available Tailwind colors for the select dropdown
+	const tailwindColorNames = getTailwindColorNames()
+
+	// Track hex input values for each role (for custom hex entry)
+	let hexInputs = $state<Record<string, string>>({})
+
+	// Track which role has hex input visible
+	let showHexInput = $state<Record<string, boolean>>({})
+
+	// Computed shades for each role
+	const roleShades = $derived.by(() => {
+		const shades: Record<string, Shades> = {}
+		for (const role of roles) {
+			const color = value?.mapping[role]
+			if (color) {
+				try {
+					shades[role] = getShades(color)
+				} catch {
+					// Invalid color, use a fallback
+					shades[role] = getShades('gray')
+				}
+			}
+		}
+		return shades
+	})
+
+	// Load saved palette on mount
+	$effect(() => {
+		if (storageKey) {
+			const saved = loadPalette(storageKey)
+			if (saved) {
+				value = { name: 'Saved', mapping: saved }
+				if (autoApply) {
+					applyPalette(saved)
+				}
+			}
+		}
+	})
+
+	/**
+	 * Update a role's color
+	 */
+	function updateRoleColor(role: ColorRole, color: string) {
+		if (!value) {
+			value = structuredClone(defaultPaletteConfig)
+		}
+		value = {
+			...value,
+			mapping: {
+				...value.mapping,
+				[role]: color
+			}
+		}
+		onchange?.(value)
+		if (autoApply) {
+			applyPalette(value.mapping)
+		}
+	}
+
+	/**
+	 * Handle select change for a role
+	 */
+	function handleSelectChange(role: ColorRole, event: Event) {
+		const select = event.target as HTMLSelectElement
+		const color = select.value
+		if (color) {
+			updateRoleColor(role, color)
+		}
+	}
+
+	/**
+	 * Handle hex input change
+	 */
+	function handleHexInput(role: ColorRole, event: Event) {
+		const input = event.target as HTMLInputElement
+		let hex = input.value.trim()
+
+		// Add # if missing
+		if (hex && !hex.startsWith('#')) {
+			hex = `#${hex}`
+		}
+
+		hexInputs[role] = hex
+
+		// Only update if valid hex
+		if (isHexColor(hex)) {
+			updateRoleColor(role, hex)
+		}
+	}
+
+	/**
+	 * Toggle hex input visibility for a role
+	 */
+	function toggleHexInput(role: ColorRole) {
+		showHexInput[role] = !showHexInput[role]
+		if (showHexInput[role]) {
+			// Initialize hex input with current color if it's a hex
+			const current = value?.mapping[role]
+			if (current && isHexColor(current)) {
+				hexInputs[role] = current
+			} else {
+				hexInputs[role] = ''
+			}
+		}
+	}
+
+	/**
+	 * Apply the current palette
+	 */
+	function handleApply() {
+		if (value) {
+			applyPalette(value.mapping)
+			if (storageKey) {
+				savePalette(storageKey, value.mapping)
+			}
+			onapply?.(value)
+		}
+	}
+
+	/**
+	 * Save current palette as custom
+	 */
+	function handleSave() {
+		if (!value) return
+
+		const name = prompt('Enter a name for this palette:', value.name || 'Custom Palette')
+		if (!name) return
+
+		const newPalette: PaletteConfig = {
+			name,
+			mapping: { ...value.mapping }
+		}
+
+		custom = [...custom, newPalette]
+		onsave?.(newPalette)
+	}
+
+	/**
+	 * Load a preset palette
+	 */
+	function loadPreset(preset: { name: string; color: string }) {
+		value = {
+			name: preset.name,
+			mapping: {
+				...value?.mapping,
+				primary: preset.color
+			}
+		}
+		onchange?.(value)
+		if (autoApply) {
+			applyPalette(value.mapping)
+		}
+	}
+
+	/**
+	 * Load a custom palette
+	 */
+	function loadCustomPalette(palette: PaletteConfig) {
+		value = structuredClone(palette)
+		onchange?.(value)
+		if (autoApply) {
+			applyPalette(value.mapping)
+		}
+	}
+
+	/**
+	 * Get the current color for a role
+	 */
+	function getRoleColor(role: ColorRole): string {
+		return value?.mapping[role] || ''
+	}
+
+	/**
+	 * Check if current color is a Tailwind preset
+	 */
+	function isTailwindColor(color: string): boolean {
+		return tailwindColorNames.includes(color.toLowerCase())
+	}
+</script>
+
+{#snippet shadePreview(shades: Shades)}
+	<div data-palette-shades>
+		{#each Object.entries(shades) as [shade, hex] (shade)}
+			<div
+				data-palette-shade
+				data-shade={shade}
+				style="background-color: {hex}"
+				title="{shade}: {hex}"
+			></div>
+		{/each}
+	</div>
+{/snippet}
+
+{#snippet defaultRoleRow(role: ColorRole, currentColor: string, shades: Shades)}
+	<div data-palette-role data-role={role}>
+		<label data-palette-role-label for="palette-{role}">
+			{role.charAt(0).toUpperCase() + role.slice(1)}
+		</label>
+
+		<div data-palette-role-controls>
+			{#if !showHexInput[role]}
+				<select
+					id="palette-{role}"
+					data-palette-color-select
+					value={isTailwindColor(currentColor) ? currentColor : ''}
+					onchange={(e) => handleSelectChange(role, e)}
+				>
+					<option value="" disabled>Select color...</option>
+					{#each tailwindColorNames as color (color)}
+						<option value={color}>{color.charAt(0).toUpperCase() + color.slice(1)}</option>
+					{/each}
+				</select>
+			{:else}
+				<input
+					type="text"
+					data-palette-color-input
+					placeholder="#000000"
+					value={hexInputs[role] || ''}
+					oninput={(e) => handleHexInput(role, e)}
+				/>
+			{/if}
+
+			<button
+				type="button"
+				data-palette-hex-toggle
+				onclick={() => toggleHexInput(role)}
+				title={showHexInput[role] ? 'Select from presets' : 'Enter custom hex'}
+			>
+				{#if showHexInput[role]}
+					<span data-palette-presets-icon class={icons.presets} aria-hidden="true"></span>
+				{:else}
+					<span data-palette-hex-icon class={icons.hex} aria-hidden="true"></span>
+				{/if}
+			</button>
+		</div>
+
+		{@render shadePreview(shades)}
+	</div>
+{/snippet}
+
+<div data-palette-manager data-compact={compact || undefined} class={className || undefined}>
+	{#if showPresets && presets.length > 0}
+		<div data-palette-presets>
+			<span data-palette-presets-label>Presets</span>
+			<div data-palette-presets-list>
+				{#each presets as preset (preset.color)}
+					<button
+						type="button"
+						data-palette-preset
+						data-active={value?.mapping.primary === preset.color || undefined}
+						style="--preset-color: {preset.preview}"
+						onclick={() => loadPreset(preset)}
+						title={preset.name}
+					>
+						<span data-palette-preset-swatch></span>
+						{#if !compact}
+							<span data-palette-preset-name>{preset.name}</span>
+						{/if}
+					</button>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	{#if custom.length > 0}
+		<div data-palette-custom>
+			<span data-palette-custom-label>Custom Palettes</span>
+			<div data-palette-custom-list>
+				{#each custom as palette (palette.name)}
+					<button
+						type="button"
+						data-palette-custom-item
+						data-active={value?.name === palette.name || undefined}
+						onclick={() => loadCustomPalette(palette)}
+					>
+						{palette.name}
+					</button>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	<div data-palette-editor>
+		{#each roles as role (role)}
+			{@const currentColor = getRoleColor(role)}
+			{@const shades = roleShades[role]}
+			{#if shades}
+				{#if roleRowSnippet}
+					{@render roleRowSnippet(role, currentColor, shades, {
+						onColorChange: (color) => updateRoleColor(role, color),
+						onHexInput: (hex) => {
+							hexInputs[role] = hex
+							if (isHexColor(hex)) {
+								updateRoleColor(role, hex)
+							}
+						}
+					})}
+				{:else}
+					{@render defaultRoleRow(role, currentColor, shades)}
+				{/if}
+			{/if}
+		{/each}
+	</div>
+
+	<div data-palette-actions>
+		{#if showSave}
+			<button type="button" data-palette-save onclick={handleSave}>
+				<span data-palette-save-icon class={icons.save} aria-hidden="true"></span>
+				Save as Custom
+			</button>
+		{/if}
+
+		{#if !autoApply}
+			<button type="button" data-palette-apply onclick={handleApply}>
+				<span data-palette-check-icon class={icons.check} aria-hidden="true"></span>
+				Apply
+			</button>
+		{/if}
+	</div>
+</div>

package/src/components/Pill.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+	import { ProxyItem } from '@rokkit/states'
+	import { keyboard } from '@rokkit/actions'
+	import { DEFAULT_STATE_ICONS } from '@rokkit/core'
+
+	interface PillIcons {
+		remove?: string
+	}
+
+	interface PillProps {
+		/** Item data (string or object) */
+		value: unknown
+		/** Custom field mappings */
+		fields?: Record<string, string>
+		/** Show remove button */
+		removable?: boolean
+		/** Disabled state */
+		disabled?: boolean
+		/** Custom icons */
+		icons?: PillIcons
+		/** Called when remove is triggered (click or Delete/Backspace key) */
+		onremove?: (value: unknown) => void
+		/** Custom content snippet */
+		content?: Snippet<[ProxyItem]>
+		/** Additional CSS class */
+		class?: string
+	}
+
+	const {
+		value,
+		fields,
+		removable = false,
+		disabled = false,
+		icons: userIcons = {} as PillIcons,
+		onremove,
+		content,
+		class: className = ''
+	}: PillProps = $props()
+
+	const icons = $derived({ remove: DEFAULT_STATE_ICONS.action.remove, ...userIcons })
+
+	const proxy = $derived(new ProxyItem(value, fields))
+
+	const keyMap = $derived(removable && !disabled ? { remove: ['Delete', 'Backspace'] } : {})
+
+	function handleRemove() {
+		if (!disabled) {
+			onremove?.(value)
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<span
+	data-pill
+	data-pill-disabled={disabled || undefined}
+	class={className || undefined}
+	use:keyboard={keyMap}
+	onremove={handleRemove}
+	tabindex={removable && !disabled ? 0 : undefined}
+>
+	{#if content}
+		{@render content(proxy)}
+	{:else}
+		{#if proxy.get('icon')}
+			<span data-pill-icon class={proxy.get('icon')} aria-hidden="true"></span>
+		{/if}
+		<span data-pill-text>{proxy.label}</span>
+	{/if}
+
+	{#if removable}
+		<button
+			data-pill-remove
+			type="button"
+			aria-label="Remove {proxy.label}"
+			{disabled}
+			onclick={handleRemove}
+		>
+			<span data-pill-remove-icon class={icons.remove} aria-hidden="true"></span>
+		</button>
+	{/if}
+</span>

package/src/components/ProgressBar.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	interface ProgressBarProps {
+		/** Current progress value (null = indeterminate) */
+		value?: number | null
+		/** Maximum value (default: 100) */
+		max?: number
+		/** Additional CSS class */
+		class?: string
+	}
+
+	const { value = null, max = 100, class: className = '' }: ProgressBarProps = $props()
+
+	const indeterminate = $derived(
+		value === null || value === undefined || max === null || max === undefined
+	)
+	const percentage = $derived(
+		indeterminate ? 100 : Math.min(100, Math.max(0, (value! / max!) * 100))
+	)
+</script>
+
+<div
+	data-progress
+	data-indeterminate={indeterminate || undefined}
+	class={className || undefined}
+	role="progressbar"
+	aria-valuenow={indeterminate ? undefined : value}
+	aria-valuemin={0}
+	aria-valuemax={max}
+>
+	<div data-progress-bar style:width="{percentage}%"></div>
+</div>