@rokkit/ui 1.0.0-next.99 → 1.0.1

package/src/types/floating-navigation.ts

@@ -0,0 +1,80 @@
+import type { Snippet } from 'svelte'
+
+/**
+ * Position on the screen edge
+ */
+export type FloatingNavigationPosition = 'left' | 'right' | 'top' | 'bottom'
+
+/**
+ * Size variant
+ */
+export type FloatingNavigationSize = 'sm' | 'md' | 'lg'
+
+/**
+ * A single navigation item
+ */
+export type FloatingNavigationItem = Record<string, unknown>
+
+/**
+ * Custom snippet for rendering a navigation item
+ */
+export type FloatingNavigationItemSnippet = Snippet<
+	[item: FloatingNavigationItem, proxy: { text: string; icon: string; active: boolean }]
+>
+
+/**
+ * Icons for the FloatingNavigation pin button
+ */
+export interface FloatingNavigationIcons {
+	/** Icon for pin action */
+	pin?: string
+	/** Icon for unpin action */
+	unpin?: string
+}
+
+/**
+ * Props for the FloatingNavigation component
+ */
+export interface FloatingNavigationProps {
+	/** Navigation items (data-driven) */
+	items?: FloatingNavigationItem[]
+
+	/** Field mapping configuration */
+	fields?: Record<string, string>
+
+	/** Custom icons for pin/unpin */
+	icons?: FloatingNavigationIcons
+
+	/** Active item value (bindable) */
+	value?: unknown
+
+	/** Screen edge to anchor to */
+	position?: FloatingNavigationPosition
+
+	/** Whether nav is pinned open (bindable) */
+	pinned?: boolean
+
+	/** Auto-track active section via IntersectionObserver */
+	observe?: boolean
+
+	/** IntersectionObserver config */
+	observerOptions?: IntersectionObserverInit
+
+	/** Size variant */
+	size?: FloatingNavigationSize
+
+	/** Accessible label */
+	label?: string
+
+	/** Called when an item is selected */
+	onselect?: (value: unknown, item: FloatingNavigationItem) => void
+
+	/** Called when pin state changes */
+	onpinchange?: (pinned: boolean) => void
+
+	/** Custom snippet for rendering items */
+	item?: FloatingNavigationItemSnippet
+
+	/** Additional CSS classes */
+	class?: string
+}

package/src/types/index.ts

@@ -0,0 +1,58 @@
+// Button Types
+export * from './button.js'
+
+// Code Types
+export * from './code.js'
+
+// Menu Types
+export * from './menu.js'
+
+// Select Types
+export * from './select.js'
+
+// Toolbar Types
+export * from './toolbar.js'
+
+// Tabs Types
+export * from './tabs.js'
+
+// Toggle Types
+export * from './toggle.js'
+
+// Switch Types
+export * from './switch.js'
+
+// List Types
+export * from './list.js'
+
+// Tree Types
+export * from './tree.js'
+
+// Floating Action Types
+export * from './floating-action.js'
+
+// Palette Types
+export * from './palette.js'
+
+// Table Types
+export * from './table.js'
+
+// SearchFilter Types
+export * from './search-filter.js'
+
+// Range Types
+export * from './range.js'
+
+// Timeline Types
+export * from './timeline.js'
+
+// FloatingNavigation Types
+export * from './floating-navigation.js'
+
+// Upload Types
+export * from './upload-target.js'
+export * from './upload-file-status.js'
+export * from './upload-progress.js'
+
+// Tooltip Types
+export * from './tooltip.js'

package/src/types/list.ts

@@ -0,0 +1,200 @@
+/**
+ * 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/menu.ts

@@ -0,0 +1,95 @@
+/**
+ * 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/palette.ts

@@ -0,0 +1,160 @@
+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/range.ts

@@ -0,0 +1,51 @@
+/**
+ * Range Component Types
+ *
+ * Custom slider with single or dual-handle modes,
+ * tick marks, drag interaction, and keyboard support.
+ */
+
+// =============================================================================
+// Component Props Types
+// =============================================================================
+
+/**
+ * Props for the Range component
+ */
+export interface RangeProps {
+	/** Current value in single mode (bindable) */
+	value?: number
+
+	/** Lower bound value in range mode (bindable) */
+	lower?: number
+
+	/** Upper bound value in range mode (bindable) */
+	upper?: number
+
+	/** Minimum value (default: 0) */
+	min?: number
+
+	/** Maximum value (default: 100) */
+	max?: number
+
+	/** Step increment (default: 1, 0 = continuous) */
+	step?: number
+
+	/** Whether to show dual handles for range selection */
+	range?: boolean
+
+	/** Number of tick divisions (default: 0 = no ticks) */
+	ticks?: number
+
+	/** Show label every N ticks (default: 0 = show all) */
+	labelSkip?: number
+
+	/** Disabled state */
+	disabled?: boolean
+
+	/** Called when value changes */
+	onchange?: (value: number | [number, number]) => void
+
+	/** Additional CSS class */
+	class?: string
+}