@rokkit/ui 1.0.0-next.125 → 1.0.0-next.127

package/src/types/switch.ts

@@ -0,0 +1,64 @@
+/**
+ * Switch Component Types
+ *
+ * Provides types for the iOS-style Switch component.
+ * Field mapping and data access is handled by ItemProxy.
+ */
+
+import type { ItemFields } from './item-proxy.js'
+
+// =============================================================================
+// Field Mapping Types
+// =============================================================================
+
+/**
+ * Field mapping configuration for switch option data.
+ * Maps custom data field names to the component's expected properties.
+ */
+export type SwitchFields = Pick<ItemFields, 'text' | 'value' | 'icon' | 'disabled' | 'description'>
+
+// =============================================================================
+// Switch Item Types
+// =============================================================================
+
+/**
+ * A switch option — can be any object, primitive, or boolean.
+ * Processed through ItemProxy for field resolution.
+ */
+export type SwitchItem = Record<string, unknown> | string | number | boolean
+
+// =============================================================================
+// Component Props Types
+// =============================================================================
+
+/**
+ * Props for the Switch component
+ */
+export interface SwitchProps {
+	/**
+	 * Exactly two options. First = off/unchecked. Second = on/checked.
+	 * @default [false, true]
+	 */
+	options?: [SwitchItem, SwitchItem]
+
+	/** Field mapping configuration */
+	fields?: SwitchFields
+
+	/** Currently selected value */
+	value?: unknown
+
+	/** Called when the switch changes */
+	onchange?: (value: unknown, item: SwitchItem) => void
+
+	/** Whether to show text labels beside the track */
+	showLabels?: boolean
+
+	/** Size variant */
+	size?: 'sm' | 'md' | 'lg'
+
+	/** Whether the switch is disabled */
+	disabled?: boolean
+
+	/** Additional CSS classes */
+	class?: string
+}

package/src/types/table.ts

@@ -0,0 +1,210 @@
+/**
+ * Table Component Types
+ *
+ * Provides types for the data-driven Table component.
+ * Supports flat tables with sortable columns, row selection, and keyboard navigation.
+ * Field mapping and data access is handled by ItemProxy per cell.
+ */
+
+import { defaultStateIcons } from '@rokkit/core'
+
+// =============================================================================
+// Column Types
+// =============================================================================
+
+/**
+ * Column definition for the Table component.
+ * Can be auto-derived from data or provided explicitly.
+ */
+export interface TableColumn {
+	/** Data key for this column */
+	name: string
+
+	/** Display header text (defaults to name) */
+	label?: string
+
+	/** Data type (auto-derived: 'string', 'number', etc.) */
+	type?: string
+
+	/** Whether this column is sortable — default: true */
+	sortable?: boolean
+
+	/** Current sort direction */
+	sorted?: 'none' | 'ascending' | 'descending'
+
+	/** CSS width (e.g., '200px', '20%') */
+	width?: string
+
+	/** Text alignment */
+	align?: 'left' | 'center' | 'right'
+
+	/** Field mapping — maps ItemProxy slots to data keys */
+	fields?: {
+		text?: string
+		icon?: string
+		badge?: string
+		description?: string
+	}
+
+	/** Value formatter for display */
+	formatter?: (value: unknown, row: Record<string, unknown>) => string
+
+	/** Icon formatter — transforms icon field value to icon class */
+	iconFormatter?: (value: unknown) => string
+
+	/** Named snippet for custom cell rendering */
+	snippet?: string
+}
+
+// =============================================================================
+// Sort Types
+// =============================================================================
+
+/**
+ * Represents the sort state for a single column.
+ */
+export interface SortState {
+	/** Column name */
+	column: string
+
+	/** Sort direction */
+	direction: 'ascending' | 'descending'
+}
+
+// =============================================================================
+// Field Mapping Types
+// =============================================================================
+
+/**
+ * Row-level field mapping configuration.
+ */
+export interface TableFields {
+	/** Field for row value used in selection matching — default: 'id' */
+	value?: string
+
+	/** Field for disabled state — default: 'disabled' */
+	disabled?: string
+}
+
+/**
+ * Default row-level field mapping values.
+ */
+export const defaultTableFields: Required<TableFields> = {
+	value: 'id',
+	disabled: 'disabled'
+}
+
+// =============================================================================
+// Sort Icons
+// =============================================================================
+
+/**
+ * Icons for sort state indicators.
+ */
+export interface TableSortIcons {
+	/** Icon for unsorted column */
+	none?: string
+
+	/** Icon for ascending sort */
+	ascending?: string
+
+	/** Icon for descending sort */
+	descending?: string
+}
+
+/**
+ * Default sort icons from @rokkit/core state icons.
+ */
+export const defaultTableSortIcons: TableSortIcons = {
+	none: defaultStateIcons.sort.none,
+	ascending: defaultStateIcons.sort.ascending,
+	descending: defaultStateIcons.sort.descending
+}
+
+// =============================================================================
+// Snippet Types
+// =============================================================================
+
+/**
+ * Snippet for custom header rendering.
+ * Parameters: columns, sortState
+ */
+export type TableHeaderSnippet = import('svelte').Snippet<[TableColumn[], SortState[]]>
+
+/**
+ * Snippet for custom row rendering.
+ * Parameters: row, columns, index, isSelected
+ */
+export type TableRowSnippet = import('svelte').Snippet<
+	[Record<string, unknown>, TableColumn[], number, boolean]
+>
+
+/**
+ * Snippet for custom cell rendering.
+ * Parameters: value, column, row
+ */
+export type TableCellSnippet = import('svelte').Snippet<
+	[unknown, TableColumn, Record<string, unknown>]
+>
+
+/**
+ * Snippet for empty state.
+ */
+export type TableEmptySnippet = import('svelte').Snippet<[]>
+
+// =============================================================================
+// Component Props
+// =============================================================================
+
+/**
+ * Props for the Table component.
+ */
+export interface TableProps {
+	/** Data array — each object is a row */
+	data?: Record<string, unknown>[]
+
+	/** Column definitions (auto-derived from data if not provided) */
+	columns?: TableColumn[]
+
+	/** Currently selected row value */
+	value?: unknown
+
+	/** Table caption for accessibility */
+	caption?: string
+
+	/** Size variant */
+	size?: 'sm' | 'md' | 'lg'
+
+	/** Enable alternating row colors */
+	striped?: boolean
+
+	/** Whether the entire table is disabled */
+	disabled?: boolean
+
+	/** Row-level field mapping */
+	fields?: TableFields
+
+	/** Called when a row is selected */
+	onselect?: (value: unknown, row: Record<string, unknown>) => void
+
+	/** Called when sort state changes */
+	onsort?: (sortState: SortState[]) => void
+
+	/** Additional CSS classes */
+	class?: string
+
+	/** Sort indicator icons */
+	icons?: TableSortIcons
+
+	/** Custom header snippet */
+	header?: TableHeaderSnippet
+
+	/** Custom row snippet */
+	row?: TableRowSnippet
+
+	/** Custom cell snippet */
+	cell?: TableCellSnippet
+
+	/** Empty state snippet */
+	empty?: TableEmptySnippet
+}

package/src/types/tabs.ts

@@ -0,0 +1,124 @@
+/**
+ * Tabs Component Types
+ *
+ * Provides types for the data-driven Tabs component.
+ * Field mapping and data access is handled by ItemProxy.
+ */
+
+import type { ItemFields } from './item-proxy.js'
+
+// =============================================================================
+// Field Mapping Types
+// =============================================================================
+
+/**
+ * Field mapping configuration for tabs data.
+ * Extends standard item fields with a content field for tab panels.
+ */
+export interface TabsFields extends ItemFields {
+	/** Field for tab panel content - default: 'content' */
+	content?: string
+}
+
+// =============================================================================
+// Tabs Item Types
+// =============================================================================
+
+/**
+ * Generic tab item - can be any object with mapped fields
+ */
+export type TabsItem = Record<string, unknown>
+
+// =============================================================================
+// Snippet Types
+// =============================================================================
+
+/**
+ * Handlers passed to custom tab item snippets
+ */
+export interface TabsItemHandlers {
+	/** Call to trigger tab selection */
+	onclick: () => void
+	/** Forward keyboard events for accessibility */
+	onkeydown: (event: KeyboardEvent) => void
+}
+
+/**
+ * Snippet type for rendering tab triggers (headers).
+ */
+export type TabsItemSnippet = import('svelte').Snippet<
+	[TabsItem, TabsFields, TabsItemHandlers, boolean]
+>
+
+/**
+ * Snippet type for rendering tab panel content.
+ */
+export type TabsPanelSnippet = import('svelte').Snippet<[TabsItem, TabsFields]>
+
+/**
+ * Snippet type for rendering the empty state.
+ */
+export type TabsEmptySnippet = import('svelte').Snippet<[]>
+
+// =============================================================================
+// Component Props Types
+// =============================================================================
+
+/**
+ * Props for the Tabs component
+ */
+export interface TabsProps {
+	/** Array of tab options */
+	options?: TabsItem[]
+
+	/** Field mapping configuration */
+	fields?: TabsFields
+
+	/** Currently selected tab value */
+	value?: unknown
+
+	/** Orientation of the tab list */
+	orientation?: 'horizontal' | 'vertical'
+
+	/** Position of the tab list relative to panels */
+	position?: 'before' | 'after'
+
+	/** Alignment of tabs within the tab list */
+	align?: 'start' | 'center' | 'end'
+
+	/** Accessible name for the tab list */
+	name?: string
+
+	/** Whether tabs can be added/removed */
+	editable?: boolean
+
+	/** Placeholder text when no tab is selected */
+	placeholder?: string
+
+	/** Whether the entire tab component is disabled */
+	disabled?: boolean
+
+	/** Additional CSS classes */
+	class?: string
+
+	/** Called when selection changes */
+	onchange?: (value: unknown, item: TabsItem) => void
+
+	/** Called when a tab is selected */
+	onselect?: (value: unknown, item: TabsItem) => void
+
+	/** Called when a new tab is requested (editable mode) */
+	onadd?: () => void
+
+	/** Called when a tab removal is requested (editable mode) */
+	onremove?: (value: unknown) => void
+
+	/** Custom snippet for rendering tab triggers */
+	tabItem?: TabsItemSnippet
+
+	/** Custom snippet for rendering tab panel content */
+	tabPanel?: TabsPanelSnippet
+
+	/** Custom snippet for rendering the empty state */
+	empty?: TabsEmptySnippet
+}

package/src/types/timeline.ts

@@ -0,0 +1,51 @@
+/**
+ * Timeline Component Types
+ *
+ * View-only vertical steps for instructions, changelogs,
+ * or process visualization. No interaction.
+ */
+
+import type { Snippet } from 'svelte'
+import type { ItemFields } from './item-proxy.js'
+
+// =============================================================================
+// Field Mapping Types
+// =============================================================================
+
+export type TimelineFields = Pick<ItemFields, 'text' | 'icon' | 'description'>
+
+export const defaultTimelineFields: Required<TimelineFields> = {
+	text: 'text',
+	icon: 'icon',
+	description: 'description'
+}
+
+// =============================================================================
+// Component Props Types
+// =============================================================================
+
+export interface TimelineIcons {
+	/** Icon class for completed state (default: i-lucide:check) */
+	completed?: string
+}
+
+export const defaultTimelineIcons: Required<TimelineIcons> = {
+	completed: 'i-lucide:check'
+}
+
+export interface TimelineProps {
+	/** Array of timeline items */
+	items?: Record<string, unknown>[]
+
+	/** Field mapping configuration */
+	fields?: TimelineFields
+
+	/** Custom icons */
+	icons?: TimelineIcons
+
+	/** Additional CSS class */
+	class?: string
+
+	/** Custom content snippet for each item: (item, index) */
+	content?: Snippet<[Record<string, unknown>, number]>
+}

package/src/types/toggle.ts

@@ -0,0 +1,109 @@
+/**
+ * Toggle Component Types
+ *
+ * Provides types for the data-driven Toggle component.
+ * Field mapping and data access is handled by ItemProxy.
+ */
+
+// =============================================================================
+// Field Mapping Types
+// =============================================================================
+
+/**
+ * Field mapping configuration for toggle data.
+ * Maps custom data field names to the component's expected properties.
+ */
+export interface ToggleFields {
+	/** Field for display text - default: 'text' */
+	text?: string
+
+	/** Field for the value to emit on select - default: 'value' */
+	value?: string
+
+	/** Field for icon class name - default: 'icon' */
+	icon?: string
+
+	/** Field for disabled state - default: 'disabled' */
+	disabled?: string
+
+	/** Field for tooltip/description text - default: 'description' */
+	description?: string
+}
+
+/**
+ * Default field mapping values
+ */
+export const defaultToggleFields: Required<ToggleFields> = {
+	text: 'text',
+	value: 'value',
+	icon: 'icon',
+	disabled: 'disabled',
+	description: 'description'
+}
+
+// =============================================================================
+// Toggle Item Types
+// =============================================================================
+
+/**
+ * Generic toggle item - can be any object with mapped fields
+ */
+export type ToggleItem = Record<string, unknown>
+
+// =============================================================================
+// Snippet Types
+// =============================================================================
+
+/**
+ * Handlers passed to custom item snippets
+ */
+export interface ToggleItemHandlers {
+	/** Call to trigger item selection */
+	onclick: () => void
+	/** Forward keyboard events for accessibility */
+	onkeydown: (event: KeyboardEvent) => void
+}
+
+/**
+ * Snippet type for rendering toggle items.
+ * Fourth parameter is whether the item is currently selected.
+ */
+export type ToggleItemSnippet = import('svelte').Snippet<
+	[ToggleItem, ToggleFields, ToggleItemHandlers, boolean]
+>
+
+// =============================================================================
+// Component Props Types
+// =============================================================================
+
+/**
+ * Props for the Toggle component
+ */
+export interface ToggleProps {
+	/** Array of toggle options */
+	options?: ToggleItem[]
+
+	/** Field mapping configuration */
+	fields?: ToggleFields
+
+	/** Currently selected value */
+	value?: unknown
+
+	/** Called when selection changes */
+	onchange?: (value: unknown, item: ToggleItem) => void
+
+	/** Whether to show text labels alongside icons */
+	showLabels?: boolean
+
+	/** Size variant */
+	size?: 'sm' | 'md' | 'lg'
+
+	/** Whether the entire toggle is disabled */
+	disabled?: boolean
+
+	/** Additional CSS classes */
+	class?: string
+
+	/** Custom snippet for rendering toggle items */
+	item?: ToggleItemSnippet
+}