@a4ui/core 0.33.0 → 0.35.0

package/dist/ui/ActivityFeed.d.ts

@@ -0,0 +1,49 @@
+import { JSX } from 'solid-js';
+/** A single audit-trail entry rendered by {@link ActivityFeed}. */
+export interface ActivityItem {
+    id: string;
+    /** Name of the user/system that performed the action. */
+    actor: string;
+    /** What happened, rendered right after `actor` (e.g. `"commented on Invoice #42"`). */
+    action: JSX.Element;
+    /** Leading icon shown when `avatar` is omitted. Defaults to a generic activity icon. */
+    icon?: JSX.Element;
+    /** ISO 8601 timestamp of the event. */
+    timestamp: string;
+    avatar?: string;
+}
+export interface ActivityFeedProps {
+    items: ActivityItem[];
+    class?: string;
+}
+/**
+ * Chronological audit-trail list (newest first), grouped under subtle day
+ * headers (`"Today"` / `"Yesterday"` / a locale date) with a continuous
+ * connector line down the left, in the same spirit as {@link Timeline}. Each
+ * row shows an avatar (or a fallback icon), `"{actor} {action}"`, and a
+ * relative timestamp whose `title` carries the absolute time. Distinct from
+ * {@link TransactionFeed}: this is generic activity/audit history, not a
+ * financial ledger.
+ *
+ * @example
+ * ```tsx
+ * <ActivityFeed
+ *   items={[
+ *     {
+ *       id: '1',
+ *       actor: 'Ada Lovelace',
+ *       action: <>commented on <strong>Invoice #42</strong></>,
+ *       timestamp: '2026-07-21T09:15:00Z',
+ *       avatar: ada.avatarUrl,
+ *     },
+ *     {
+ *       id: '2',
+ *       actor: 'System',
+ *       action: 'archived the project',
+ *       timestamp: '2026-07-20T18:02:00Z',
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function ActivityFeed(props: ActivityFeedProps): JSX.Element;

package/dist/ui/AudioWaveform.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'solid-js';
+export interface AudioWaveformProps {
+    src?: string;
+    peaks?: number[];
+    /** Bar row height in pixels. @default 64 */
+    height?: number;
+    class?: string;
+}
+/**
+ * Waveform of vertical bars driven by an optional hidden `<audio>` element.
+ * Pass `peaks` (numbers in `0..1`) for a real waveform, or omit it for a
+ * deterministic placeholder shape. The played portion (up to
+ * `currentTime / duration`) is highlighted; clicking a bar seeks there. With
+ * no `src`, playback is simulated on a timer for demo purposes.
+ *
+ * @example
+ * ```tsx
+ * <AudioWaveform src="/media/track.mp3" />
+ * <AudioWaveform peaks={[0.2, 0.8, 0.4, 0.9, 0.3]} height={48} />
+ * ```
+ */
+export declare function AudioWaveform(props: AudioWaveformProps): JSX.Element;

package/dist/ui/AvailabilityPicker.d.ts

@@ -0,0 +1,35 @@
+import { JSX } from 'solid-js';
+export interface AvailabilityPickerProps {
+    /** Open slots per date, keyed by local ISO 'YYYY-MM-DD'; each value is a list of 'HH:mm' times. */
+    slotsByDate: Record<string, string[]>;
+    /** Controlled selection; omit to manage selection internally. */
+    value?: {
+        date: string;
+        time: string;
+    };
+    onChange?: (selection: {
+        date: string;
+        time: string;
+    }) => void;
+    /** Label shown near the slots. @default the browser's Intl timezone */
+    timezone?: string;
+    class?: string;
+}
+/**
+ * Booking-style availability picker: a scrollable list of bookable dates on the
+ * left (built from the keys of `slotsByDate`) and a scrollable grid of open
+ * 'HH:mm' slots for the selected date on the right, with a timezone label.
+ * Controlled via `value`/`onChange`, or self-managed when `value` is omitted.
+ * Fully keyboard accessible (native buttons, `aria-pressed` on the current pick).
+ *
+ * @example
+ * ```tsx
+ * const [selection, setSelection] = createSignal<{ date: string; time: string }>()
+ * <AvailabilityPicker
+ *   slotsByDate={{ '2026-07-22': ['09:00', '09:30', '14:00'], '2026-07-23': ['10:00'] }}
+ *   value={selection()}
+ *   onChange={setSelection}
+ * />
+ * ```
+ */
+export declare function AvailabilityPicker(props: AvailabilityPickerProps): JSX.Element;

package/dist/ui/CodeEditor.d.ts

@@ -0,0 +1,25 @@
+import { JSX } from 'solid-js';
+export interface CodeEditorProps {
+    value: string;
+    /** Called with the new source string on every input event. */
+    onInput?: (v: string) => void;
+    /** Language used to pick the keyword set for highlighting. Default `'ts'`. */
+    language?: 'ts' | 'js' | 'json' | 'html' | 'css';
+    /** Hides the caret and blocks editing; the overlay still highlights. */
+    readOnly?: boolean;
+    class?: string;
+}
+/**
+ * A minimal code editor: line numbers in a gutter, a transparent textarea for
+ * input, and a `<pre>` overlay underneath it that renders approximate syntax
+ * highlighting from simple regexes (keywords, strings, numbers, comments).
+ * Not a full parser — good for READMEs, config editors, and demo panes, not
+ * a replacement for a real editor component (CodeMirror/Monaco).
+ *
+ * @example
+ * ```tsx
+ * const [src, setSrc] = createSignal('const x: number = 1\n')
+ * <CodeEditor value={src()} onInput={setSrc} language="ts" />
+ * ```
+ */
+export declare function CodeEditor(props: CodeEditorProps): JSX.Element;

package/dist/ui/CouponField.d.ts

@@ -0,0 +1,33 @@
+import { JSX } from 'solid-js';
+export interface CouponFieldProps {
+    /** Validate/apply a coupon code. Resolve with `{ ok: false }` for a rejected
+     * code — do not throw for expected rejections, only for unexpected failures. */
+    onApply: (code: string) => Promise<{
+        ok: boolean;
+        message?: string;
+        discount?: string;
+    }>;
+    placeholder?: string;
+    class?: string;
+}
+/**
+ * Coupon/promo code input with an "Apply" button. Tracks explicit
+ * idle/loading/success/error state: loading shows a spinner and disables the
+ * input, success shows the applied discount with a way to remove it and try
+ * another code, error shows the failure message inline and lets the user retry.
+ * Rejections are read from the resolved `{ ok: false }` result, not caught
+ * exceptions — an unexpected throw from `onApply` propagates uncaught.
+ *
+ * @example
+ * ```tsx
+ * <CouponField
+ *   onApply={async (code) => {
+ *     const res = await api.applyCoupon(code)
+ *     return res.valid
+ *       ? { ok: true, discount: '-$10' }
+ *       : { ok: false, message: 'That code has expired.' }
+ *   }}
+ * />
+ * ```
+ */
+export declare function CouponField(props: CouponFieldProps): JSX.Element;

package/dist/ui/EmojiPicker.d.ts

@@ -0,0 +1,18 @@
+import { JSX } from 'solid-js';
+export interface EmojiPickerProps {
+    /** Called with the emoji character whenever the user picks one. */
+    onSelect: (emoji: string) => void;
+    class?: string;
+}
+/**
+ * A searchable emoji grid with an inline curated dataset (no network fetch),
+ * category tabs that scroll to their section, and a session-only "Recents"
+ * row. Type in the search box to filter by keyword, or click a category icon
+ * to jump the grid to that section.
+ *
+ * @example
+ * ```tsx
+ * <EmojiPicker onSelect={(emoji) => insertAtCursor(emoji)} />
+ * ```
+ */
+export declare function EmojiPicker(props: EmojiPickerProps): JSX.Element;

package/dist/ui/EventScheduler.d.ts

@@ -0,0 +1,41 @@
+import { JSX } from 'solid-js';
+/** A single scheduled event; `start`/`end` are local ISO datetimes ('YYYY-MM-DDTHH:mm'). */
+export interface SchedulerEvent {
+    id: string;
+    title: string;
+    start: string;
+    end: string;
+    tone?: 'primary' | 'accent';
+}
+export interface EventSchedulerProps {
+    events: SchedulerEvent[];
+    /** Day to show (day view) or the week containing it (week view). ISO 'YYYY-MM-DD'. @default today */
+    date?: string;
+    /** @default 'day' */
+    view?: 'day' | 'week';
+    /** First hour band shown (0–23). @default 7 */
+    startHour?: number;
+    /** Last hour band shown, exclusive (0–23). @default 21 */
+    endHour?: number;
+    class?: string;
+}
+/**
+ * Time-grid calendar: one column per visible day, hour bands from `startHour` to
+ * `endHour`, events absolutely positioned by their start/end minutes and split
+ * side-by-side when they overlap. Draws a "now" line through today's column
+ * when it's in view. Read-only positioning (drag-to-create/resize is out of
+ * scope). Scrolls vertically when the hour range is tall.
+ *
+ * @example
+ * ```tsx
+ * <EventScheduler
+ *   view="week"
+ *   date="2026-07-21"
+ *   events={[
+ *     { id: '1', title: 'Standup', start: '2026-07-21T09:00', end: '2026-07-21T09:30', tone: 'primary' },
+ *     { id: '2', title: 'Design review', start: '2026-07-21T09:15', end: '2026-07-21T10:00', tone: 'accent' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function EventScheduler(props: EventSchedulerProps): JSX.Element;

package/dist/ui/FollowingPointer.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'solid-js';
+export interface FollowingPointerProps {
+    label?: JSX.Element;
+    /** Tone of the custom cursor + label chip. @default 'primary' */
+    color?: 'primary' | 'accent';
+    children: JSX.Element;
+    class?: string;
+}
+/**
+ * Wraps `children` in a `relative` container that hides the native cursor
+ * and renders a custom pointer — a small arrow glyph plus a rounded label
+ * chip in the given tone — that follows the mouse within the container.
+ * Hidden until the pointer enters, hidden again on leave. Under
+ * {@link motionReduced}, the native cursor is kept and nothing custom is
+ * rendered. Listeners are cleaned up on unmount.
+ *
+ * @example
+ * ```tsx
+ * <FollowingPointer label="Alex" color="accent">
+ *   <div class="grid h-48 place-items-center rounded-lg border">Hover me</div>
+ * </FollowingPointer>
+ * ```
+ */
+export declare function FollowingPointer(props: FollowingPointerProps): JSX.Element;

package/dist/ui/GanttChart.d.ts

@@ -0,0 +1,37 @@
+import { JSX } from 'solid-js';
+/** A single bar rendered by {@link GanttChart}. */
+export interface GanttTask {
+    id: string;
+    name: string;
+    /** ISO date, `'YYYY-MM-DD'`. */
+    start: string;
+    /** ISO date, `'YYYY-MM-DD'`. */
+    end: string;
+    /** Ids of tasks that must finish before this one starts; drawn as elbow connectors. */
+    dependencies?: string[];
+    /** Bar color. Defaults to `'primary'`. */
+    tone?: 'primary' | 'accent';
+}
+export interface GanttChartProps {
+    tasks: GanttTask[];
+    class?: string;
+}
+/**
+ * Read-only Gantt chart: a header row of date ticks over a proportional time
+ * axis, one row per task with a colored bar spanning `start`–`end`, elbow
+ * connectors for `dependencies`, and a "today" marker when today falls
+ * within the overall range. Horizontal scroll kicks in when the range is
+ * wide relative to the container.
+ *
+ * @example
+ * ```tsx
+ * <GanttChart
+ *   tasks={[
+ *     { id: 'design', name: 'Design', start: '2026-01-05', end: '2026-01-16', tone: 'accent' },
+ *     { id: 'build', name: 'Build', start: '2026-01-19', end: '2026-02-06', dependencies: ['design'] },
+ *     { id: 'launch', name: 'Launch', start: '2026-02-09', end: '2026-02-10', dependencies: ['build'] },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function GanttChart(props: GanttChartProps): JSX.Element;

package/dist/ui/InteractiveMap.d.ts

@@ -0,0 +1,50 @@
+import { JSX } from 'solid-js';
+export interface MapMarker {
+    lat: number;
+    lng: number;
+    label?: string;
+    id?: string;
+}
+export interface InteractiveMapProps {
+    /** Initial view center. Also acts as a recenter trigger: passing a new
+     * `{ lat, lng }` after mount pans the view there (e.g. a "use my
+     * location" button) without fighting the user's own drag/zoom in between.
+     * @default { lat: 0, lng: 0 } */
+    center?: {
+        lat: number;
+        lng: number;
+    };
+    /** Initial integer zoom level, clamped to `[2, 18]`. Synced the same way
+     * as `center` when it changes after mount. @default 3 */
+    zoom?: number;
+    /** Pins rendered on top of the tiles, projected to their pixel position. */
+    markers?: MapMarker[];
+    /** Tile URL template with `{z}`/`{x}`/`{y}` placeholders.
+     * @default 'https://tile.openstreetmap.org/{z}/{x}/{y}.png' */
+    tileUrl?: string;
+    /** Height of the map, in px. @default 400 */
+    height?: number;
+    /** Fires with the lat/lng under the pointer on a click (drags don't count). */
+    onClick?: (coord: {
+        lat: number;
+        lng: number;
+    }) => void;
+    class?: string;
+}
+/**
+ * A slippy tile map built directly on Web Mercator math — no map SDK. Pan by
+ * dragging, zoom with the +/- buttons or the wheel (zoom keeps the point
+ * under the cursor fixed), place `markers`, and get the lat/lng of a click
+ * via `onClick`. Recomputes its tile grid on resize (`ResizeObserver`).
+ *
+ * @example
+ * ```tsx
+ * <InteractiveMap
+ *   center={{ lat: 48.8584, lng: 2.2945 }}
+ *   zoom={13}
+ *   markers={[{ lat: 48.8584, lng: 2.2945, label: 'Eiffel Tower' }]}
+ *   onClick={(coord) => console.log('clicked', coord)}
+ * />
+ * ```
+ */
+export declare function InteractiveMap(props: InteractiveMapProps): JSX.Element;

package/dist/ui/JsonViewer.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'solid-js';
+export interface JsonViewerProps {
+    /** The value to render — object, array, or a primitive at the root. */
+    data: unknown;
+    /** Expand every object/array node on first render. Defaults to `false`. */
+    defaultExpanded?: boolean;
+    class?: string;
+}
+/**
+ * Collapsible, indented JSON tree. Objects/arrays are expandable nodes (chevron
+ * + key + a `{…}` / `[…]` summary with child count); primitives render as
+ * `key: value` with the value tinted by type. Expanded state is tracked
+ * internally by path, seeded fully-open when `defaultExpanded` is set. An
+ * optional search box highlights keys/values that match.
+ *
+ * @example
+ * ```tsx
+ * <JsonViewer
+ *   defaultExpanded
+ *   data={{ user: { id: 1, name: 'Ada', active: true, tags: ['admin', 'core'] } }}
+ * />
+ * ```
+ */
+export declare function JsonViewer(props: JsonViewerProps): JSX.Element;

package/dist/ui/Kanban.d.ts

@@ -0,0 +1,49 @@
+import { JSX } from 'solid-js';
+/** A single card on a {@link Kanban} board. */
+export interface KanbanCard {
+    /** Stable unique id (used for drag tracking + list keying). */
+    id: string;
+    /** Card body — usually a title/label. */
+    title: JSX.Element;
+    /** Optional trailing badge (e.g. priority, assignee initials). */
+    badge?: JSX.Element;
+}
+/** A column of a {@link Kanban} board. */
+export interface KanbanColumn {
+    /** Stable unique id. */
+    id: string;
+    /** Column heading. */
+    title: string;
+    /** Cards in the column, top to bottom. */
+    cards: KanbanCard[];
+    /** Optional WIP limit — the count badge switches to a warning tone past it. */
+    limit?: number;
+}
+export interface KanbanProps {
+    /** Columns, in display order left to right. */
+    columns: KanbanColumn[];
+    /** Called with the full new columns array after any drag (reorder or move). */
+    onChange?: (columns: KanbanColumn[]) => void;
+    class?: string;
+}
+/**
+ * Horizontal Kanban board: glass column panels holding vertical lists of
+ * draggable cards. Drag a card by its grip handle to reorder it within a
+ * column or drop it into another column — a dashed placeholder marks the
+ * drop slot and a floating clone follows the pointer, the same pointer-events
+ * idiom as {@link Sortable} extended to track which column's list the
+ * pointer is currently over. Works controlled (pass `columns` sourced from
+ * your own state + `onChange` to write it back) or uncontrolled (pass
+ * `columns` once and just read the final layout from `onChange`).
+ *
+ * @example
+ * ```tsx
+ * const [columns, setColumns] = createSignal<KanbanColumn[]>([
+ *   { id: 'todo', title: 'To do', cards: [{ id: '1', title: 'Write spec' }] },
+ *   { id: 'doing', title: 'Doing', cards: [], limit: 2 },
+ *   { id: 'done', title: 'Done', cards: [] },
+ * ])
+ * <Kanban columns={columns()} onChange={setColumns} />
+ * ```
+ */
+export declare function Kanban(props: KanbanProps): JSX.Element;

package/dist/ui/Lamp.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'solid-js';
+export interface LampProps {
+    children?: JSX.Element;
+    class?: string;
+}
+/**
+ * Hero/section backdrop: a spotlight beam fanning down from the top center —
+ * two symmetric blurred gradient cones (`--primary` / `--accent`) plus a
+ * bright thin source line — over a dark base, with `children` centered in
+ * the illuminated area below. Grows/brightens in on mount via Motion
+ * (opacity + scale); static under {@link motionReduced}. Self-contained
+ * (`relative overflow-hidden`); size it with `class` (e.g. `min-h-[28rem]`).
+ *
+ * @example
+ * ```tsx
+ * <Lamp class="min-h-[28rem]">
+ *   <h1 class="text-4xl font-semibold text-foreground">Build in the light</h1>
+ *   <p class="mt-4 text-muted-foreground">A hero backdrop with a spotlight glow.</p>
+ * </Lamp>
+ * ```
+ */
+export declare function Lamp(props: LampProps): JSX.Element;

package/dist/ui/Lightbox.d.ts

@@ -0,0 +1,41 @@
+import { JSX } from 'solid-js';
+/** One image in a {@link Lightbox}. */
+export interface LightboxImage {
+    src: string;
+    alt?: string;
+    /** Smaller image used in the thumbnail grid/strip; falls back to `src`. */
+    thumb?: string;
+}
+export interface LightboxProps {
+    images: LightboxImage[];
+    /** Controlled overlay open state. When set, wins over internal state — pair with `onOpenChange`. */
+    open?: boolean;
+    /** Controlled active image index (clamped to the images array). When set, wins over internal state — pair with `onIndexChange`. */
+    index?: number;
+    onOpenChange?: (open: boolean) => void;
+    onIndexChange?: (index: number) => void;
+    /** Show the thumbnail strip at the bottom of the overlay. @default true */
+    showThumbnails?: boolean;
+    class?: string;
+}
+/**
+ * Responsive thumbnail grid (`thumb || src`) that opens into a full-screen
+ * viewer on click: the active image centered, prev/next chevrons, a close
+ * button, an alt-text caption, a zoom toggle, and (by default) a thumbnail
+ * strip with the active image highlighted. Navigate with the arrow keys or
+ * Escape, click the backdrop to close. Works controlled
+ * (`open`/`index` + `onOpenChange`/`onIndexChange`) or uncontrolled. Body
+ * scroll locks while open, like `Modal`; the zoom transition is skipped
+ * under `prefers-reduced-motion` but stays fully functional.
+ *
+ * @example
+ * ```tsx
+ * <Lightbox
+ *   images={[
+ *     { src: '/photos/1-full.jpg', thumb: '/photos/1-thumb.jpg', alt: 'Sunset over the bay' },
+ *     { src: '/photos/2-full.jpg', thumb: '/photos/2-thumb.jpg', alt: 'Mountain trail' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function Lightbox(props: LightboxProps): JSX.Element;

package/dist/ui/LocationPicker.d.ts

@@ -0,0 +1,25 @@
+import { JSX } from 'solid-js';
+export interface LocationValue {
+    lat: number;
+    lng: number;
+    label?: string;
+}
+export interface LocationPickerProps {
+    /** Controlled value. Omit to let the component manage its own state. */
+    value?: LocationValue;
+    /** Fires with the full value whenever the label, the pin, or geolocation changes it. */
+    onChange?: (v: LocationValue) => void;
+    class?: string;
+}
+/**
+ * Text label + compact map field for picking a location: click or drag the
+ * map to drop the pin (no geocoding — the label is a free-text tag the caller
+ * attaches to the coordinates), or use the "use my location" button.
+ *
+ * @example
+ * ```tsx
+ * const [place, setPlace] = createSignal<LocationValue>({ lat: 48.8584, lng: 2.2945, label: 'Eiffel Tower' })
+ * <LocationPicker value={place()} onChange={setPlace} />
+ * ```
+ */
+export declare function LocationPicker(props: LocationPickerProps): JSX.Element;

package/dist/ui/MaskedInput.d.ts

@@ -0,0 +1,26 @@
+import { JSX } from 'solid-js';
+export interface MaskedInputProps {
+    /** `#` = digit slot, `A` = letter slot, any other char is a literal, e.g. `'(###) ###-####'`. */
+    mask: string;
+    /** Controlled raw value (just the entered #/A characters, no literals). */
+    value?: string;
+    /** Called with `(raw, formatted)` on every accepted keystroke or paste. */
+    onInput?: (raw: string, formatted: string) => void;
+    placeholder?: string;
+    class?: string;
+    'aria-label'?: string;
+}
+/**
+ * Format-as-you-type input over a real `<input>`. `mask` uses `#` for a digit
+ * slot and `A` for a letter slot; any other character is a literal inserted
+ * automatically as the user reaches it. Characters that don't fit the next
+ * slot are rejected, and pasted text is normalized by re-extracting only its
+ * valid #/A characters. Controlled (`value`) or uncontrolled.
+ *
+ * @example
+ * ```tsx
+ * const [phone, setPhone] = createSignal('')
+ * <MaskedInput mask="(###) ###-####" value={phone()} onInput={setPhone} placeholder="(555) 123-4567" />
+ * ```
+ */
+export declare function MaskedInput(props: MaskedInputProps): JSX.Element;

package/dist/ui/OnboardingChecklist.d.ts

@@ -0,0 +1,51 @@
+import { JSX } from 'solid-js';
+/** A single step in an {@link OnboardingChecklist}. */
+export interface OnboardingStep {
+    /** Stable identifier, used as the toggle key and `For` item key. */
+    id: string;
+    title: JSX.Element;
+    /** Optional detail shown when the step is expanded. */
+    description?: JSX.Element;
+    /** Whether the step is complete. */
+    done?: boolean;
+    /** Optional call-to-action rendered alongside the description. */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+export interface OnboardingChecklistProps {
+    steps: OnboardingStep[];
+    /** Called with the step id and its next `done` state when the indicator is toggled. */
+    onToggle?: (id: string, done: boolean) => void;
+    /** Heading shown above the progress summary. Defaults to `'Getting started'`. */
+    title?: JSX.Element;
+    class?: string;
+}
+/**
+ * Card-shaped onboarding/setup checklist: a header with a completion ring and
+ * "{done} of {total} complete" summary, followed by expandable steps. Each
+ * step has a clickable check indicator (toggles `done` via `onToggle`), a
+ * title, and an optional description + CTA revealed on expand. Completion is
+ * controlled by the caller; expansion is local UI state (one step open at a time).
+ *
+ * @example
+ * ```tsx
+ * const [steps, setSteps] = createSignal<OnboardingStep[]>([
+ *   { id: 'profile', title: 'Complete your profile', done: true },
+ *   {
+ *     id: 'invite',
+ *     title: 'Invite a teammate',
+ *     description: 'Collaborate faster by adding at least one teammate.',
+ *     action: { label: 'Invite', onClick: () => openInviteDialog() },
+ *   },
+ * ])
+ * <OnboardingChecklist
+ *   steps={steps()}
+ *   onToggle={(id, done) =>
+ *     setSteps((prev) => prev.map((s) => (s.id === id ? { ...s, done } : s)))
+ *   }
+ * />
+ * ```
+ */
+export declare function OnboardingChecklist(props: OnboardingChecklistProps): JSX.Element;

package/dist/ui/OtpInput.d.ts

@@ -0,0 +1,29 @@
+import { JSX } from 'solid-js';
+export interface OtpInputProps {
+    /** Number of single-character boxes. @default 6 */
+    length?: number;
+    /** Controlled value; when provided, the group renders it and the parent owns state. */
+    value?: string;
+    /** Called with the full joined value on every box change (both typing and deletion). */
+    onInput?: (value: string) => void;
+    /** Called once with the full value when every box is filled. */
+    onComplete?: (value: string) => void;
+    /** Restrict input to digits and switch the mobile keyboard to numeric. */
+    numeric?: boolean;
+    class?: string;
+    'aria-label'?: string;
+}
+/**
+ * Segmented one-time-passcode input: one `<input maxlength=1>` per character.
+ * Typing advances focus to the next box, Backspace on an empty box moves back
+ * and clears the previous one, arrow keys move focus, and pasting a string
+ * distributes its characters across boxes starting at the focused index.
+ * Works controlled (pass `value`) or uncontrolled.
+ *
+ * @example
+ * ```tsx
+ * const [code, setCode] = createSignal('')
+ * <OtpInput length={6} value={code()} onInput={setCode} numeric onComplete={verify} />
+ * ```
+ */
+export declare function OtpInput(props: OtpInputProps): JSX.Element;

package/dist/ui/PivotTable.d.ts

@@ -0,0 +1,37 @@
+import { JSX } from 'solid-js';
+/** A single record fed into {@link PivotTable}. */
+export interface PivotDatum {
+    [key: string]: string | number;
+}
+export interface PivotTableProps {
+    data: PivotDatum[];
+    /** Field whose unique values become row headers. */
+    rowField: string;
+    /** Field whose unique values become column headers. */
+    columnField: string;
+    /** Numeric field aggregated into each cell. */
+    valueField: string;
+    /** Aggregation applied per (row, column) bucket. Defaults to 'sum'. */
+    aggregate?: 'sum' | 'count' | 'avg';
+    class?: string;
+}
+/**
+ * Cross-tab table: crosses the unique values of `rowField` and `columnField`,
+ * aggregating `valueField` into each cell (default `'sum'`), plus row/column
+ * totals.
+ *
+ * @example
+ * ```tsx
+ * <PivotTable
+ *   data={[
+ *     { region: 'West', product: 'Widget', revenue: 100 },
+ *     { region: 'West', product: 'Gadget', revenue: 50 },
+ *     { region: 'East', product: 'Widget', revenue: 75 },
+ *   ]}
+ *   rowField="region"
+ *   columnField="product"
+ *   valueField="revenue"
+ * />
+ * ```
+ */
+export declare function PivotTable(props: PivotTableProps): JSX.Element;