@rokkit/ui 1.3.4 → 1.3.6

package/src/types/item-toggle.ts

@@ -1,52 +0,0 @@
-/**
- * ItemToggle Component Types
- *
- * Renders a compact toggle-group visual inside a data-driven item snippet.
- * Options come from the item's data (via `optionsField`). Each option is a
- * span with `role="radio"` and its own click handler — Navigator defers to
- * these nested interactives via its isNestedInteractive guard.
- *
- * Consumers wire state via `onchange`. ItemToggle does not mutate the item
- * data directly.
- */
-
-import type { ProxyItem } from '@rokkit/states'
-
-export type ItemToggleOption = string | number | boolean | { label?: string; value?: unknown; icon?: string }
-
-export interface ItemToggleProps {
-	/** ProxyItem for the current row. */
-	proxy: ProxyItem
-
-	/**
-	 * Field on the item that holds the currently selected value.
-	 * @default 'value'
-	 */
-	field?: string
-
-	/**
-	 * Field on the item that holds the array of options.
-	 * @default 'options'
-	 */
-	optionsField?: string
-
-	/**
-	 * Called when the user picks an option. Consumers update the item data.
-	 */
-	onchange?: (value: unknown, option: ItemToggleOption, proxy: ProxyItem) => void
-
-	/** Size variant. */
-	size?: 'sm' | 'md' | 'lg'
-
-	/** Render the leading avatar / icon (via ItemContent). @default true */
-	showIcon?: boolean
-
-	/** Render subtext under the label (via ItemContent). @default true */
-	showSubtext?: boolean
-
-	/** Show textual labels beside the option (falls back to option value). @default true */
-	showLabels?: boolean
-
-	/** Optional class on the wrapper span. */
-	class?: string
-}

package/src/types/list.ts

@@ -1,200 +0,0 @@
-/**
- * List Component Types
- *
- * Provides types for the data-driven List component.
- * Supports navigation links, button items, and grouped items with collapsible sections.
- * Field mapping and data access is handled by ProxyItem from @rokkit/states.
- */
-
-import { DEFAULT_STATE_ICONS } from '@rokkit/core'
-
-// =============================================================================
-// Field Mapping Types
-// =============================================================================
-
-/**
- * Field mapping configuration for list data.
- */
-export interface ListFields {
-	/** Field for display text - default: 'text' */
-	text?: string
-
-	/** Field for the value to use for selection matching - default: 'value' */
-	value?: string
-
-	/** Field for navigation URL (renders as <a>) - default: 'href' */
-	href?: string
-
-	/** Field for icon class name - default: 'icon' */
-	icon?: string
-
-	/** Field for secondary descriptive text - default: 'description' */
-	description?: string
-
-	/** Field for aria-label override - default: 'label' */
-	label?: string
-
-	/** Field for disabled state - default: 'disabled' */
-	disabled?: string
-
-	/** Field for children array (for grouping) - default: 'children' */
-	children?: string
-
-	/** Field for custom snippet name - default: 'snippet' */
-	snippet?: string
-
-	/** Field for badge/indicator content - default: 'badge' */
-	badge?: string
-
-	/** Field for tooltip text (HTML title attribute) - default: 'title' */
-	title?: string
-
-	/** Nested field mapping for children - default: inherits parent */
-	fields?: ListFields
-}
-
-/**
- * Default field mapping values
- */
-export const defaultListFields: Required<Omit<ListFields, 'fields'>> = {
-	text: 'text',
-	value: 'value',
-	href: 'href',
-	icon: 'icon',
-	description: 'description',
-	label: 'label',
-	disabled: 'disabled',
-	children: 'children',
-	snippet: 'snippet',
-	badge: 'badge',
-	title: 'title'
-}
-
-// =============================================================================
-// List Item Types
-// =============================================================================
-
-/**
- * Generic list item - can be any object with mapped fields
- */
-export type ListItem = Record<string, unknown>
-
-// =============================================================================
-// Snippet Types
-// =============================================================================
-
-/**
- * Handlers passed to custom item snippets
- */
-export interface ListItemHandlers {
-	/** Call to trigger item selection (for button items) */
-	onclick: () => void
-	/** Forward keyboard events for accessibility */
-	onkeydown: (event: KeyboardEvent) => void
-}
-
-/**
- * Snippet type for rendering list items.
- * Parameters: item, fields, handlers, isActive
- */
-export type ListItemSnippet = import('svelte').Snippet<
-	[ListItem, ListFields, ListItemHandlers, boolean]
->
-
-/**
- * Snippet type for rendering group labels
- * Parameters: item (group), fields, toggleExpanded, isExpanded
- */
-export type ListGroupLabelSnippet = import('svelte').Snippet<
-	[ListItem, ListFields, () => void, boolean]
->
-
-// =============================================================================
-// Component Props Types
-// =============================================================================
-
-/**
- * Props for the List component
- */
-export interface ListProps {
-	/** Array of list items or groups */
-	items?: ListItem[]
-
-	/** Field mapping configuration */
-	fields?: ListFields
-
-	/** Currently selected value (for highlighting button items) */
-	value?: unknown
-
-	/** Size variant */
-	size?: 'sm' | 'md' | 'lg'
-
-	/** Whether the entire list is disabled */
-	disabled?: boolean
-
-	/** Whether groups can be collapsed */
-	collapsible?: boolean
-
-	/** Enable multiple item selection (Ctrl+click toggle, Shift+click range) */
-	multiselect?: boolean
-
-	/** Which groups are expanded (bindable) - keyed by group value/text */
-	expanded?: Record<string, boolean>
-
-	/** Selected items array (bindable) - populated in multiselect mode */
-	selected?: unknown[]
-
-	/** Active item value - List looks up item by this value to highlight it */
-	active?: unknown
-
-	/** Called when a button item is selected */
-	onselect?: (value: unknown, item: ListItem) => void
-
-	/** Called when selected items change in multiselect mode */
-	onselectedchange?: (selected: unknown[]) => void
-
-	/** Called when expanded state changes (for bindable expanded) */
-	onexpandedchange?: (expanded: Record<string, boolean>) => void
-
-	/** Additional CSS classes */
-	class?: string
-
-	/** Icons for list group states (expand/collapse arrow) */
-	icons?: ListStateIcons
-
-	/** Custom snippet for rendering list items */
-	item?: ListItemSnippet
-
-	/** Custom snippet for rendering group labels/headers */
-	groupLabel?: ListGroupLabelSnippet
-}
-
-// =============================================================================
-// State Icons
-// =============================================================================
-
-/**
- * Icons configuration for list collapsible group states.
- * Keys match the naming convention in @rokkit/core DEFAULT_STATE_ICONS.
- */
-export interface ListStateIcons {
-	/** Icon class for expanded group */
-	opened?: string
-	/** Icon class for collapsed group */
-	closed?: string
-}
-
-/**
- * Default state icons — uses semantic names from @rokkit/core
- * that get resolved to actual icon classes via UnoCSS shortcuts.
- */
-export const defaultListStateIcons: ListStateIcons = {
-	opened: DEFAULT_STATE_ICONS.accordion.opened,
-	closed: DEFAULT_STATE_ICONS.accordion.closed
-}
-
-// =============================================================================
-// Helper Functions
-// =============================================================================
-
-export { getSnippet } from './menu.js'

package/src/types/lock-mode.ts

@@ -1,16 +0,0 @@
-import type { Snippet } from 'svelte'
-
-/** The color mode a region can be locked to. */
-export type LockedMode = 'dark' | 'light'
-
-/** Props for the LockMode component. */
-export interface LockModeProps {
-	/** Color mode to pin this subtree to, regardless of the document mode. */
-	mode: LockedMode
-
-	/** Content rendered inside the locked region. */
-	children: Snippet
-
-	/** Additional CSS class. */
-	class?: string
-}

package/src/types/menu.ts

@@ -1,95 +0,0 @@
-/**
- * Menu Component Types
- *
- * The new Menu uses the same Wrapper + Navigator stack as List.
- * Trigger action manages open/close. Dropdown content is identical to List.
- */
-
-import type { ProxyItem } from '@rokkit/states'
-import { DEFAULT_STATE_ICONS } from '@rokkit/core'
-
-// =============================================================================
-// Component Props Types
-// =============================================================================
-
-/**
- * Props for the Menu component.
- * Content props (items, fields, value, size, disabled, collapsible, icons, onselect, class, snippets)
- * are identical to List. Additional props: label, icon, showArrow, align, direction.
- */
-export interface MenuProps {
-	/** Array of items (same as List: supports groups, separators, nested children) */
-	items?: unknown[]
-
-	/** Field mapping — overrides BASE_FIELDS defaults (label → 'label', value → 'value', …) */
-	fields?: Record<string, string>
-
-	/** Current active value (highlights matching item) */
-	value?: unknown
-
-	/** Size variant */
-	size?: 'sm' | 'md' | 'lg'
-
-	/** Whether the entire menu is disabled */
-	disabled?: boolean
-
-	/** Whether groups are collapsible (same as List) */
-	collapsible?: boolean
-
-	/** Trigger button label text */
-	label?: string
-
-	/** Trigger button icon class */
-	icon?: string
-
-	/** Whether to show dropdown arrow indicator on trigger */
-	showArrow?: boolean
-
-	/** Dropdown alignment relative to trigger */
-	align?: 'start' | 'end'
-
-	/** Dropdown direction */
-	direction?: 'up' | 'down'
-
-	/** Icons for expand/collapse states */
-	icons?: MenuStateIcons
-
-	/** Called when a leaf item is selected */
-	onselect?: (value: unknown, proxy: ProxyItem) => void
-
-	/** Additional CSS classes */
-	class?: string
-}
-
-// =============================================================================
-// State Icons
-// =============================================================================
-
-export interface MenuStateIcons {
-	/** Icon class for open state */
-	opened?: string
-	/** Icon class for closed state */
-	closed?: string
-}
-
-export const defaultMenuStateIcons: MenuStateIcons = {
-	opened: DEFAULT_STATE_ICONS.selector.opened,
-	closed: DEFAULT_STATE_ICONS.selector.closed
-}
-
-// =============================================================================
-// Snippet Utilities
-// =============================================================================
-
-/**
- * Retrieve a named snippet from a snippets record, with type/null safety.
- */
-export function getSnippet<T>(
-	snippets: Record<string, T | undefined>,
-	name: string | null
-): T | null {
-	if (name === null) return null
-	const snippet = snippets[name]
-	if (snippet !== undefined && typeof snippet === 'function') return snippet
-	return null
-}

package/src/types/message.ts

@@ -1,54 +0,0 @@
-/**
- * Message Component Types
- */
-
-import type { Snippet } from 'svelte'
-
-/** Semantic message type — drives color treatment and the default icon. */
-export type MessageType = 'error' | 'info' | 'success' | 'warning'
-
-/**
- * Icon overrides for the Message component, keyed by message type.
- */
-export interface MessageIcons {
-	error?: string
-	info?: string
-	success?: string
-	warning?: string
-}
-
-/**
- * Props for the Message component.
- */
-export interface MessageProps {
-	/** Message type — controls color and the default icon. */
-	type?: MessageType
-
-	/** Icon class overrides per type. */
-	icons?: MessageIcons
-
-	/** Text content (shorthand). `children` takes precedence when both provided. */
-	text?: string
-
-	/** Show a dismiss button. */
-	dismissible?: boolean
-
-	/**
-	 * Auto-dismiss after N milliseconds. Defaults to `4000` when not
-	 * `dismissible`, otherwise persistent (no auto-dismiss). Pass `0`
-	 * to disable auto-dismissal explicitly.
-	 */
-	timeout?: number
-
-	/** Optional action buttons snippet. */
-	actions?: Snippet
-
-	/** Rich content (takes precedence over `text`). */
-	children?: Snippet
-
-	/** Called when dismissed — via button click or timeout. */
-	ondismiss?: () => void
-
-	/** Additional CSS class. */
-	class?: string
-}

package/src/types/nav-content.ts

@@ -1,31 +0,0 @@
-/**
- * NavContent Component Types
- */
-
-import type { Snippet } from 'svelte'
-
-/** Layout orientation. */
-export type NavContentOrientation = 'horizontal' | 'vertical'
-
-/**
- * Props for the NavContent component.
- */
-export interface NavContentProps {
-	/** Layout orientation. */
-	orientation?: NavContentOrientation
-
-	/** Nav panel width (horizontal) or height (vertical) — CSS length value. */
-	navSize?: string
-
-	/** Collapse the nav panel on small screens. */
-	collapsible?: boolean
-
-	/** Nav panel snippet. */
-	nav: Snippet
-
-	/** Content panel snippet. */
-	content: Snippet
-
-	/** Additional CSS class. */
-	class?: string
-}

package/src/types/palette.ts

@@ -1,160 +0,0 @@
-import type { Snippet } from 'svelte'
-import type { ColorRole, Shades } from '../utils/palette.js'
-
-/**
- * Configuration for a complete color palette
- */
-export interface PaletteConfig {
-	/** Name of the palette (e.g., "Vibrant", "Ocean", "Custom 1") */
-	name: string
-	/** Mapping of color roles to Tailwind color names or hex values */
-	mapping: Partial<Record<ColorRole, string>>
-}
-
-/**
- * A preset palette (built-in)
- */
-export interface PalettePreset {
-	/** Display name */
-	name: string
-	/** Tailwind color name */
-	color: string
-	/** Preview hex color (usually the 500 shade) */
-	preview: string
-}
-
-/**
- * Icons for the PaletteManager component
- */
-export interface PaletteManagerIcons {
-	/** Icon for the save button */
-	save?: string
-	/** Icon for the apply/check button */
-	check?: string
-	/** Icon for the presets toggle */
-	presets?: string
-	/** Icon for the hex input toggle */
-	hex?: string
-}
-
-/**
- * Props for the PaletteManager component
- */
-export interface PaletteManagerProps {
-	/** Current palette configuration (bindable) */
-	value?: PaletteConfig
-
-	/** Built-in preset palettes */
-	presets?: PalettePreset[]
-
-	/** User-saved custom palettes */
-	custom?: PaletteConfig[]
-
-	/** localStorage key for persistence */
-	storageKey?: string
-
-	/** Roles to show in the editor */
-	roles?: ColorRole[]
-
-	/** Custom icons */
-	icons?: PaletteManagerIcons
-
-	/** Auto-apply changes in real-time */
-	autoApply?: boolean
-
-	/** Show preset selector */
-	showPresets?: boolean
-
-	/** Show save button */
-	showSave?: boolean
-
-	/** Compact mode (fewer controls) */
-	compact?: boolean
-
-	/** Additional CSS classes */
-	class?: string
-
-	/** Called when palette changes */
-	onchange?: (palette: PaletteConfig) => void
-
-	/** Called when user saves a custom palette */
-	onsave?: (palette: PaletteConfig) => void
-
-	/** Called when palette is applied */
-	onapply?: (palette: PaletteConfig) => void
-
-	/** Custom snippet for rendering a color role row */
-	roleRow?: PaletteRoleRowSnippet
-}
-
-/**
- * Handlers passed to custom role row snippet
- */
-export interface PaletteRoleRowHandlers {
-	onColorChange: (color: string) => void
-	onHexInput: (hex: string) => void
-}
-
-/**
- * Custom snippet for rendering a palette role row
- */
-export type PaletteRoleRowSnippet = Snippet<
-	[role: ColorRole, currentColor: string, shades: Shades, handlers: PaletteRoleRowHandlers]
->
-
-/**
- * Default color roles to display
- */
-export const defaultRoles: ColorRole[] = [
-	'primary',
-	'secondary',
-	'accent',
-	'surface',
-	'success',
-	'warning',
-	'danger',
-	'info'
-]
-
-/**
- * Default palette presets using Tailwind colors
- */
-export const defaultPresets: PalettePreset[] = [
-	{ name: 'Slate', color: 'slate', preview: '#64748b' },
-	{ name: 'Gray', color: 'gray', preview: '#6b7280' },
-	{ name: 'Zinc', color: 'zinc', preview: '#71717a' },
-	{ name: 'Red', color: 'red', preview: '#ef4444' },
-	{ name: 'Orange', color: 'orange', preview: '#f97316' },
-	{ name: 'Amber', color: 'amber', preview: '#f59e0b' },
-	{ name: 'Yellow', color: 'yellow', preview: '#eab308' },
-	{ name: 'Lime', color: 'lime', preview: '#84cc16' },
-	{ name: 'Green', color: 'green', preview: '#22c55e' },
-	{ name: 'Emerald', color: 'emerald', preview: '#10b981' },
-	{ name: 'Teal', color: 'teal', preview: '#14b8a6' },
-	{ name: 'Cyan', color: 'cyan', preview: '#06b6d4' },
-	{ name: 'Sky', color: 'sky', preview: '#0ea5e9' },
-	{ name: 'Blue', color: 'blue', preview: '#3b82f6' },
-	{ name: 'Indigo', color: 'indigo', preview: '#6366f1' },
-	{ name: 'Violet', color: 'violet', preview: '#8b5cf6' },
-	{ name: 'Purple', color: 'purple', preview: '#a855f7' },
-	{ name: 'Fuchsia', color: 'fuchsia', preview: '#d946ef' },
-	{ name: 'Pink', color: 'pink', preview: '#ec4899' },
-	{ name: 'Rose', color: 'rose', preview: '#f43f5e' }
-]
-
-/**
- * Default palette configuration
- */
-export const defaultPaletteConfig: PaletteConfig = {
-	name: 'Default',
-	mapping: {
-		primary: 'orange',
-		secondary: 'pink',
-		accent: 'sky',
-		surface: 'slate',
-		success: 'green',
-		warning: 'amber',
-		danger: 'red',
-		info: 'cyan'
-	}
-}

package/src/types/pill.ts

@@ -1,43 +0,0 @@
-/**
- * Pill Component Types
- */
-
-import type { Snippet } from 'svelte'
-import type { ProxyItem } from '@rokkit/states'
-
-/**
- * Icon overrides for the Pill component.
- */
-export interface PillIcons {
-	/** Icon class for the remove button. */
-	remove?: string
-}
-
-/**
- * Props for the Pill component.
- */
-export interface PillProps {
-	/** Item data — primitive (string / number) or an object. */
-	value: unknown
-
-	/** Custom field mappings used by the internal `ProxyItem`. */
-	fields?: Record<string, string>
-
-	/** Show the remove button (and enable Delete / Backspace shortcuts). */
-	removable?: boolean
-
-	/** Disabled state. */
-	disabled?: boolean
-
-	/** Custom icon overrides. */
-	icons?: PillIcons
-
-	/** Called when remove is triggered — via click or Delete / Backspace. */
-	onremove?: (value: unknown) => void
-
-	/** Custom content snippet — receives the pill's `ProxyItem`. */
-	content?: Snippet<[ProxyItem]>
-
-	/** Additional CSS class. */
-	class?: string
-}

package/src/types/progress-bar.ts

@@ -1,19 +0,0 @@
-/**
- * ProgressBar Component Types
- */
-
-/**
- * Props for the ProgressBar component.
- *
- * Pass `value = null` (or omit it) to render in indeterminate state.
- */
-export interface ProgressBarProps {
-	/** Current progress value. `null` (or undefined) renders indeterminate. */
-	value?: number | null
-
-	/** Maximum value. Default `100`. */
-	max?: number
-
-	/** Additional CSS class. */
-	class?: string
-}