@rokkit/ui 1.3.3 → 1.3.5

package/src/types/table.ts

@@ -1,219 +0,0 @@
-/**
- * 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 ProxyItem from @rokkit/states per cell.
- */
-
-import { DEFAULT_STATE_ICONS } 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 ProxyItem 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: DEFAULT_STATE_ICONS.sort.none,
-	ascending: DEFAULT_STATE_ICONS.sort.ascending,
-	descending: DEFAULT_STATE_ICONS.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 (single-select) */
-	value?: unknown
-
-	/** Currently selected row values (multi-select, bindable) */
-	values?: unknown[]
-
-	/** Selection mode: 'single' (default), 'multi', or false (no selection) */
-	selectable?: 'single' | 'multi' | false
-
-	/** Table caption for accessibility */
-	caption?: string
-
-	/** Size variant */
-	size?: 'sm' | 'md' | 'lg'
-
-	/** Enable alternating row colors */
-	striped?: boolean
-
-	/** Enable responsive card layout on mobile (< 640px) */
-	responsive?: 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

@@ -1,103 +0,0 @@
-/**
- * Tabs Component Types
- *
- * Provides types for the data-driven Tabs component.
- * Field mapping and data access is handled by ProxyItem from @rokkit/states.
- */
-
-import type { Snippet } from 'svelte'
-import type { ProxyItem } from '@rokkit/states'
-
-// =============================================================================
-// Tabs Item Types
-// =============================================================================
-
-/**
- * Generic tab item - can be any object with mapped fields
- */
-export type TabsItem = Record<string, unknown>
-
-// =============================================================================
-// Snippet Types — ProxyItem-based API
-// =============================================================================
-
-/**
- * Snippet type for rendering tab triggers (headers).
- * The component renders the focusable wrapper; the snippet renders the inner content.
- * Navigator handles click selection via data-path — no handlers needed in snippet.
- * Receives the ProxyItem and whether this item is currently selected.
- */
-export type TabsItemSnippet = Snippet<[ProxyItem, boolean]>
-
-/**
- * Snippet type for rendering tab panel content.
- */
-export type TabsPanelSnippet = Snippet<[ProxyItem]>
-
-/**
- * Snippet type for rendering the empty state.
- */
-export type TabsEmptySnippet = Snippet<[]>
-
-// =============================================================================
-// Component Props Types
-// =============================================================================
-
-/**
- * Props for the Tabs component
- */
-export interface TabsProps {
-	/** Array of tab options */
-	options?: TabsItem[]
-
-	/** Field mapping — overrides BASE_FIELDS defaults (text → 'label', value → 'value', …) */
-	fields?: Record<string, string>
-
-	/** 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 — receives the value and the tab's ProxyItem */
-	onchange?: (value: unknown, item: ProxyItem) => void
-
-	/** Called when a tab is selected (fires on every click, including same tab) — receives the value and the tab's ProxyItem */
-	onselect?: (value: unknown, item: ProxyItem) => 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/tilt.ts

@@ -1,28 +0,0 @@
-/**
- * Tilt Component Types
- */
-
-import type { Snippet } from 'svelte'
-
-/**
- * Props for the Tilt component.
- *
- * Wraps content in a container that rotates in response to pointer
- * movement, with optional brightness modulation.
- */
-export interface TiltProps {
-	/** Maximum rotation angle in degrees. Default `10`. */
-	maxRotation?: number
-
-	/** Whether to adjust brightness based on pointer Y position. */
-	setBrightness?: boolean
-
-	/** CSS perspective value in pixels. Default `600`. */
-	perspective?: number
-
-	/** Additional CSS class. */
-	class?: string
-
-	/** Content to tilt. */
-	children?: Snippet
-}

package/src/types/timeline.ts

@@ -1,53 +0,0 @@
-/**
- * Timeline Component Types
- *
- * View-only vertical steps for instructions, changelogs,
- * or process visualization. No interaction.
- */
-
-import type { Snippet } from 'svelte'
-// =============================================================================
-// Field Mapping Types
-// =============================================================================
-
-export interface TimelineFields {
-	label?: string
-	icon?: string
-	subtext?: string
-}
-
-export const defaultTimelineFields: Required<TimelineFields> = {
-	label: 'label',
-	icon: 'icon',
-	subtext: '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

@@ -1,81 +0,0 @@
-/**
- * Toggle Component Types
- *
- * Provides types for the data-driven Toggle component.
- * Field mapping and data access is handled by ProxyItem from @rokkit/states.
- */
-
-import type { Snippet } from 'svelte'
-import type { ProxyItem } from '@rokkit/states'
-
-// =============================================================================
-// Toggle Item Types
-// =============================================================================
-
-/**
- * Generic toggle item — data-driven, so it accepts primitives
- * (string/number) as well as objects with mapped fields.
- */
-export type ToggleItem = string | number | Record<string, unknown>
-
-// =============================================================================
-// Snippet Types
-// =============================================================================
-
-/**
- * Snippet for rendering a toggle option.
- * The component renders the button wrapper; the snippet renders inner content.
- * Receives the ProxyItem and whether this item is currently selected.
- */
-export type ToggleItemSnippet = Snippet<[ProxyItem, boolean]>
-
-// =============================================================================
-// Component Props Types
-// =============================================================================
-
-/**
- * Visual variant of the Toggle.
- * - `'group'` (default) — segmented radio-group rendering, one button per option.
- * - `'button'` — single button that cycles through the options on each click.
- *   The rendered content represents the *next* option (the one you'd switch to),
- *   so users can read the click destination at a glance.
- */
-export type ToggleVariant = 'group' | 'button'
-
-/**
- * Props for the Toggle component
- */
-export interface ToggleProps {
-	/** Visual variant. Default: 'group'. */
-	variant?: ToggleVariant
-
-	/** Array of toggle options (strings, numbers, or objects) */
-	options?: ToggleItem[]
-
-	/** Field mapping — overrides BASE_FIELDS defaults (text → 'label', value → 'value', …) */
-	fields?: Record<string, string>
-
-	/** Currently selected value (bindable) */
-	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
-
-	/** Accessible label for the radiogroup. Default: messages.toggle.label */
-	label?: string
-
-	/** Additional CSS classes */
-	class?: string
-
-	/** Custom snippet for rendering toggle options */
-	item?: ToggleItemSnippet
-}

package/src/types/toolbar.ts

@@ -1,167 +0,0 @@
-/**
- * Toolbar Component Types
- *
- * Provides types for the data-driven Toolbar component.
- * Field mapping and data access is handled by ProxyItem from @rokkit/states.
- */
-
-// =============================================================================
-// Field Mapping Types
-// =============================================================================
-
-/**
- * Field mapping configuration for toolbar data.
- * Maps custom data field names to the component's expected properties.
- */
-export interface ToolbarFields {
-	/** Field for display text/tooltip - default: 'text' */
-	text?: string
-
-	/** Field for the value to emit on click - default: 'value' */
-	value?: string
-
-	/** Field for icon class name - default: 'icon' */
-	icon?: string
-
-	/** Field for disabled state - default: 'disabled' */
-	disabled?: string
-
-	/** Field for active/pressed state - default: 'active' */
-	active?: string
-
-	/** Field for item type (button, toggle, separator, spacer, custom) - default: 'type' */
-	type?: string
-
-	/** Field for custom snippet name - default: 'snippet' */
-	snippet?: string
-
-	/** Field for aria-label override - default: 'label' */
-	label?: string
-
-	/** Field for keyboard shortcut display - default: 'shortcut' */
-	shortcut?: string
-}
-
-/**
- * Default field mapping values
- */
-export const defaultToolbarFields: Required<ToolbarFields> = {
-	text: 'text',
-	value: 'value',
-	icon: 'icon',
-	disabled: 'disabled',
-	active: 'active',
-	type: 'type',
-	snippet: 'snippet',
-	label: 'label',
-	shortcut: 'shortcut'
-}
-
-// =============================================================================
-// Toolbar Item Types
-// =============================================================================
-
-/**
- * Generic toolbar item - can be any object with mapped fields
- */
-export type ToolbarItem = Record<string, unknown>
-
-/**
- * Built-in toolbar item types
- */
-export type ToolbarItemType = 'button' | 'toggle' | 'separator' | 'spacer' | 'custom'
-
-// =============================================================================
-// Snippet Types
-// =============================================================================
-
-/**
- * Handlers passed to custom item snippets
- */
-export interface ToolbarItemHandlers {
-	/** Call to trigger item action */
-	onclick: () => void
-	/** Forward keyboard events for accessibility */
-	onkeydown: (event: KeyboardEvent) => void
-}
-
-/**
- * Snippet type for rendering toolbar items
- */
-export type ToolbarItemSnippet = import('svelte').Snippet<
-	[ToolbarItem, ToolbarFields, ToolbarItemHandlers]
->
-
-// =============================================================================
-// Component Props Types
-// =============================================================================
-
-/**
- * Props for the Toolbar component
- */
-export interface ToolbarProps {
-	/** Array of toolbar items */
-	items?: ToolbarItem[]
-
-	/** Field mapping configuration */
-	fields?: ToolbarFields
-
-	/** Position of toolbar - affects border and sticky positioning */
-	position?: 'top' | 'bottom' | 'left' | 'right'
-
-	/** Size variant */
-	size?: 'sm' | 'md' | 'lg'
-
-	/** Width behaviour: full stretches to container, fit sizes to content */
-	width?: 'full' | 'fit'
-
-	/** Whether toolbar should stick to its position */
-	sticky?: boolean
-
-	/** Compact mode with reduced padding */
-	compact?: boolean
-
-	/** Show dividers between sections */
-	showDividers?: boolean
-
-	/** Whether the entire toolbar is disabled */
-	disabled?: boolean
-
-	/** Called when an item is clicked */
-	onclick?: (value: unknown, item: ToolbarItem) => void
-
-	/** Additional CSS classes */
-	class?: string
-
-	/** Custom snippet for rendering toolbar items */
-	item?: ToolbarItemSnippet
-
-	/** Slot for start section content */
-	start?: import('svelte').Snippet
-
-	/** Slot for center section content */
-	center?: import('svelte').Snippet
-
-	/** Slot for end section content */
-	end?: import('svelte').Snippet
-
-	/** Default slot for children */
-	children?: import('svelte').Snippet
-}
-
-/**
- * Props for the ToolbarGroup component
- */
-export interface ToolbarGroupProps {
-	/** Accessibility label for the group */
-	label?: string
-
-	/** Gap between items in the group */
-	gap?: 'none' | 'sm' | 'md' | 'lg'
-
-	/** Additional CSS classes */
-	class?: string
-
-	/** Group content */
-	children?: import('svelte').Snippet
-}

package/src/types/tooltip.ts

@@ -1,21 +0,0 @@
-import type { Snippet } from 'svelte'
-
-export interface TooltipProps {
-	/** Tooltip text (alternative: use tooltipContent snippet for rich content) */
-	content?: string
-
-	/** Preferred position — auto-flips when the preferred side overflows the viewport */
-	position?: 'top' | 'bottom' | 'left' | 'right'
-
-	/** Show delay in ms (default: 300) */
-	delay?: number
-
-	/** Additional CSS classes on the root wrapper */
-	class?: string
-
-	/** Trigger element(s) */
-	children?: Snippet
-
-	/** Rich tooltip content — overrides the content string */
-	tooltipContent?: Snippet
-}