@rokkit/ui 1.1.18 → 1.1.19

package/dist/types/floating-navigation.d.ts

@@ -0,0 +1,66 @@
+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/dist/types/frame.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Frame Component Types
+ *
+ * Generic header / body / footer container primitive — used by CodeBlock,
+ * PlotPlugin and other "card-shaped UI block" surfaces. For an interactive
+ * card (link / button) prefer `<Card/>`.
+ */
+import type { Snippet } from 'svelte';
+/**
+ * Props for the Frame component.
+ */
+export interface FrameProps {
+    /** Top slot — title, action chips, status badges, etc. */
+    header?: Snippet;
+    /** Main content. */
+    children?: Snippet;
+    /** Bottom slot — metadata, actions, secondary controls. */
+    footer?: Snippet;
+    /**
+     * When true the body slot has zero padding so the inner artifact
+     * (a chart, a `<pre>`, a table) controls its own padding.
+     */
+    flush?: boolean;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,44 @@
+export * from './button.js';
+export * from './code.js';
+export * from './menu.js';
+export * from './select.js';
+export * from './toolbar.js';
+export * from './tabs.js';
+export * from './toggle.js';
+export * from './switch.js';
+export * from './list.js';
+export * from './tree.js';
+export * from './floating-action.js';
+export * from './palette.js';
+export * from './table.js';
+export * from './tree-table.js';
+export * from './search-filter.js';
+export * from './range.js';
+export * from './timeline.js';
+export * from './floating-navigation.js';
+export * from './upload-target.js';
+export * from './upload-file-status.js';
+export * from './upload-progress.js';
+export * from './tooltip.js';
+export * from './item-content.js';
+export * from './status-list.js';
+export * from './alert-list.js';
+export * from './avatar.js';
+export * from './badge.js';
+export * from './breadcrumbs.js';
+export * from './card.js';
+export * from './carousel.js';
+export * from './connector.js';
+export * from './divider.js';
+export * from './frame.js';
+export * from './message.js';
+export * from './nav-content.js';
+export * from './pill.js';
+export * from './progress-bar.js';
+export * from './rating.js';
+export * from './responsive-grid.js';
+export * from './reveal.js';
+export * from './shine.js';
+export * from './stack.js';
+export * from './stepper.js';
+export * from './tilt.js';

package/dist/types/item-content.d.ts

@@ -0,0 +1,22 @@
+/**
+ * ItemContent Component Types
+ *
+ * Default inner content for List / Menu / Tree / Toolbar items.
+ * Renders avatar/icon, label + subtext, optional badge and shortcut from a
+ * ProxyItem wrapper that exposes field access and reactive state.
+ */
+import type { ProxyItem } from '@rokkit/states';
+/**
+ * Props for the ItemContent component.
+ */
+export interface ItemContentProps {
+    /**
+     * ProxyItem wrapper around the underlying data — exposes `label`,
+     * `get(field)`, and the item's reactive selection / expansion state.
+     */
+    proxy: ProxyItem;
+    /** Render the avatar / icon slot. Default: `true`. */
+    showIcon?: boolean;
+    /** Render the description / subtext line under the label. Default: `true`. */
+    showSubtext?: boolean;
+}

package/dist/types/list.d.ts

@@ -0,0 +1,128 @@
+/**
+ * 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.
+ */
+/**
+ * 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 declare const defaultListFields: Required<Omit<ListFields, 'fields'>>;
+/**
+ * Generic list item - can be any object with mapped fields
+ */
+export type ListItem = Record<string, unknown>;
+/**
+ * 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
+]>;
+/**
+ * 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;
+}
+/**
+ * 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 declare const defaultListStateIcons: ListStateIcons;
+export { getSnippet } from './menu.js';

package/dist/types/menu.d.ts

@@ -0,0 +1,53 @@
+/**
+ * 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';
+/**
+ * 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;
+}
+export interface MenuStateIcons {
+    /** Icon class for open state */
+    opened?: string;
+    /** Icon class for closed state */
+    closed?: string;
+}
+export declare const defaultMenuStateIcons: MenuStateIcons;
+/**
+ * Retrieve a named snippet from a snippets record, with type/null safety.
+ */
+export declare function getSnippet<T>(snippets: Record<string, T | undefined>, name: string | null): T | null;

package/dist/types/message.d.ts

@@ -0,0 +1,42 @@
+/**
+ * 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/dist/types/nav-content.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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/dist/types/palette.d.ts

@@ -0,0 +1,98 @@
+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 declare const defaultRoles: ColorRole[];
+/**
+ * Default palette presets using Tailwind colors
+ */
+export declare const defaultPresets: PalettePreset[];
+/**
+ * Default palette configuration
+ */
+export declare const defaultPaletteConfig: PaletteConfig;

package/dist/types/pill.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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/dist/types/progress-bar.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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;
+}

package/dist/types/range.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Range Component Types
+ *
+ * Custom slider with single or dual-handle modes,
+ * tick marks, drag interaction, and keyboard support.
+ */
+/**
+ * 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;
+}

package/dist/types/rating.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Rating Component Types
+ */
+/**
+ * Icon overrides for the Rating component.
+ */
+export interface RatingIcons {
+    /** Icon class for a filled star. */
+    filled?: string;
+    /** Icon class for an empty star. */
+    empty?: string;
+    /** Icon class for a half-filled star. */
+    half?: string;
+}
+/**
+ * Props for the Rating component.
+ */
+export interface RatingProps {
+    /** Current rating value (bindable). */
+    value?: number;
+    /** Maximum number of stars. Default `5`. */
+    max?: number;
+    /** Disabled state. */
+    disabled?: boolean;
+    /** Accessible label for the surrounding radio group. */
+    label?: string;
+    /** Custom icon overrides. */
+    icons?: RatingIcons;
+    /** Called when the value changes. */
+    onchange?: (value: number) => void;
+    /** Additional CSS class. */
+    class?: string;
+}

package/dist/types/responsive-grid.d.ts

@@ -0,0 +1,19 @@
+/**
+ * ResponsiveGrid Component Types
+ */
+import type { Snippet } from 'svelte';
+/**
+ * Props for the ResponsiveGrid component.
+ */
+export interface ResponsiveGridProps {
+    /** Minimum column width — CSS length value. */
+    minWidth?: string;
+    /** Gap between cells — CSS length value. */
+    gap?: string;
+    /** Maximum number of columns. */
+    maxCols?: number;
+    /** Grid children. */
+    children: Snippet;
+    /** Additional CSS class. */
+    class?: string;
+}

package/dist/types/reveal.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Reveal Component Types
+ */
+import type { Snippet } from 'svelte';
+/** Slide direction for the reveal animation. */
+export type RevealDirection = 'up' | 'down' | 'left' | 'right' | 'none';
+/**
+ * Props for the Reveal component.
+ *
+ * Wraps the `reveal` action so children animate in once they intersect the
+ * viewport.
+ */
+export interface RevealProps {
+    /** Slide direction. Default `'up'`. */
+    direction?: RevealDirection;
+    /** Slide distance — CSS length value. Default `'1.5rem'`. */
+    distance?: string;
+    /** Transition duration in milliseconds. Default `600`. */
+    duration?: number;
+    /** Delay before animation starts in milliseconds. Default `0`. */
+    delay?: number;
+    /**
+     * Delay increment per direct child in milliseconds — used for staggered
+     * reveals. Default `0`.
+     */
+    stagger?: number;
+    /** Animate only on first intersection. Default `true`. */
+    once?: boolean;
+    /** IntersectionObserver threshold (0–1). Default `0.1`. */
+    threshold?: number;
+    /** CSS easing function. */
+    easing?: string;
+    /** Additional CSS class. */
+    class?: string;
+    /** Content to reveal. */
+    children?: Snippet;
+}