@a4ui/core 0.4.3 → 0.6.0

package/dist/ui/Marquee.d.ts

@@ -0,0 +1,26 @@
+import { JSX, ParentProps } from 'solid-js';
+interface MarqueeProps extends ParentProps {
+    /** Seconds for one full loop of the track. Lower is faster. Defaults to `20`. */
+    speed?: number;
+    /** Pause the scroll while the pointer hovers the strip. Defaults to `true`. */
+    pauseOnHover?: boolean;
+    class?: string;
+}
+/**
+ * A horizontally scrolling strip that loops its children seamlessly. The
+ * children are rendered twice inside a flex track; when the first copy has
+ * scrolled fully out of view the second copy sits exactly where the first
+ * began, so the animation restarts with no visible seam. Honors reduced
+ * motion (the track sits still) and, by default, pauses on hover.
+ *
+ * @example
+ * ```tsx
+ * <Marquee speed={30}>
+ *   <span class="mx-4">A4ui</span>
+ *   <span class="mx-4">SolidJS</span>
+ *   <span class="mx-4">Tailwind</span>
+ * </Marquee>
+ * ```
+ */
+export declare function Marquee(props: MarqueeProps): JSX.Element;
+export {};

package/dist/ui/Mentions.d.ts

@@ -0,0 +1,37 @@
+import { JSX } from 'solid-js';
+export interface MentionOption {
+    value: string;
+    label: string;
+}
+export interface MentionsProps {
+    value: string;
+    /** Called with the new string value on every input (not the raw DOM event). */
+    onChange: (value: string) => void;
+    /** Options offered while typing an `@mention`. */
+    options: MentionOption[];
+    placeholder?: string;
+    class?: string;
+}
+/**
+ * Controlled multi-line text field that shows an autocomplete dropdown while
+ * the user types an `@mention`. On each input, the text before the caret is
+ * checked for a trailing `@query`; matching {@link MentionOption}s (by `label`
+ * or `value`, case-insensitive) are offered in a panel. Selecting one replaces
+ * the `@query` with `@{label} `. Arrow keys move the highlight, Enter accepts,
+ * Escape dismisses.
+ *
+ * @example
+ * ```tsx
+ * const [body, setBody] = createSignal('')
+ * <Mentions
+ *   value={body()}
+ *   onChange={setBody}
+ *   options={[
+ *     { value: 'ada', label: 'Ada Lovelace' },
+ *     { value: 'alan', label: 'Alan Turing' },
+ *   ]}
+ *   placeholder="Write a note, use @ to mention someone"
+ * />
+ * ```
+ */
+export declare function Mentions(props: MentionsProps): JSX.Element;

package/dist/ui/NotificationCenter.d.ts

@@ -0,0 +1,32 @@
+import { JSX } from 'solid-js';
+/** A single entry rendered by {@link NotificationCenter}. */
+export interface NotificationItem {
+    id: string;
+    title: string;
+    description?: string;
+    time?: string;
+    read?: boolean;
+}
+export interface NotificationCenterProps {
+    /** Notifications to display, newest first. */
+    items: NotificationItem[];
+    /** Called with an item's id when its dismiss button is clicked. */
+    onDismiss?: (id: string) => void;
+    /** Called when the "Mark all read" action is clicked. */
+    onMarkAllRead?: () => void;
+    class?: string;
+}
+/**
+ * Bell button that opens a popover listing notifications, with an unread count
+ * badge, per-item dismiss, and a "mark all read" action. Built on {@link Popover}.
+ *
+ * @example
+ * ```tsx
+ * <NotificationCenter
+ *   items={items}
+ *   onDismiss={(id) => remove(id)}
+ *   onMarkAllRead={() => markAll()}
+ * />
+ * ```
+ */
+export declare function NotificationCenter(props: NotificationCenterProps): JSX.Element;

package/dist/ui/Rating.d.ts

@@ -0,0 +1,23 @@
+import { JSX } from 'solid-js';
+export interface RatingProps {
+    /** Currently selected rating, from 0 to `max`. */
+    value: number;
+    /** Called with the new rating when a star is clicked or set via keyboard. */
+    onChange?: (value: number) => void;
+    /** Number of stars to render. Default: 5. */
+    max?: number;
+    /** Render a non-interactive, display-only rating. Default: false. */
+    readonly?: boolean;
+    class?: string;
+}
+/**
+ * Star rating control. In interactive mode each star is a button: click or use
+ * the Left/Right arrow keys to set the rating, and hovering previews it. In
+ * `readonly` mode it renders as a static, labelled row of stars.
+ *
+ * @example
+ * ```tsx
+ * <Rating value={rating()} onChange={setRating} max={5} />
+ * ```
+ */
+export declare function Rating(props: RatingProps): JSX.Element;

package/dist/ui/Result.d.ts

@@ -0,0 +1,31 @@
+import { JSX } from 'solid-js';
+/** Semantic status of a {@link Result}; drives the icon, tint, and optional HTTP number. */
+export type ResultStatus = 'success' | 'error' | 'info' | 'warning' | '404' | '500';
+export interface ResultProps {
+    /** Result status; drives the icon and color. Defaults to `'info'`. */
+    status?: ResultStatus;
+    /** Bold headline describing the outcome. */
+    title: string;
+    /** Optional supporting line under the title. */
+    description?: string;
+    /** Optional action slot (e.g. Buttons) rendered below the text. */
+    actions?: JSX.Element;
+    class?: string;
+}
+/**
+ * Full-status result screen — a large status icon in a tinted circle, a title,
+ * optional description, and an optional actions slot — for terminal states such
+ * as success/error confirmations or HTTP 404/500 pages. For `'404'`/`'500'` the
+ * big HTTP number is shown above the icon.
+ *
+ * @example
+ * ```tsx
+ * <Result
+ *   status="success"
+ *   title="Payment complete"
+ *   description="A receipt has been sent to your email."
+ *   actions={<Button>Back to dashboard</Button>}
+ * />
+ * ```
+ */
+export declare function Result(props: ResultProps): JSX.Element;

package/dist/ui/RingProgress.d.ts

@@ -0,0 +1,23 @@
+import { JSX } from 'solid-js';
+export interface RingProgressProps {
+    value: number;
+    /** Outer diameter of the ring in px. @default 96 */
+    size?: number;
+    /** Stroke width of the track and arc in px. @default 8 */
+    thickness?: number;
+    /** Content centered over the ring. Defaults to the rounded percent. */
+    label?: JSX.Element;
+    class?: string;
+}
+/**
+ * Circular progress indicator drawn with two concentric SVG circles: a muted
+ * track and a primary arc whose length is derived from `value` (0–100). Use for
+ * compact, radial completion feedback where a linear bar would be too wide.
+ *
+ * @example
+ * ```tsx
+ * <RingProgress value={72} />
+ * <RingProgress value={40} size={128} thickness={12} label={<span>4/10</span>} />
+ * ```
+ */
+export declare function RingProgress(props: RingProgressProps): JSX.Element;

package/dist/ui/SpeedDial.d.ts

@@ -0,0 +1,29 @@
+import { JSX } from 'solid-js';
+/** A single action in a {@link SpeedDial} — an icon button with an accessible label. */
+export interface SpeedDialAction {
+    icon: JSX.Element;
+    label: string;
+    onClick: () => void;
+}
+export interface SpeedDialProps {
+    actions: SpeedDialAction[];
+    /** Icon for the main FAB. Defaults to a `Plus` that rotates to an ✕ when open. */
+    icon?: JSX.Element;
+    class?: string;
+}
+/**
+ * A fixed floating action button (FAB) pinned to the bottom-right. Clicking the
+ * main circular button toggles an open state; while open, `actions` fan out
+ * upward as a vertical stack of smaller circular buttons. Selecting an action
+ * runs its `onClick` and closes the dial. Theme-agnostic — colors come from
+ * semantic tokens only.
+ *
+ * @example
+ * ```tsx
+ * <SpeedDial actions={[
+ *   { icon: <Share class="h-5 w-5" />, label: 'Share', onClick: () => share() },
+ *   { icon: <Copy class="h-5 w-5" />, label: 'Copy', onClick: () => copy() },
+ * ]} />
+ * ```
+ */
+export declare function SpeedDial(props: SpeedDialProps): JSX.Element;

package/dist/ui/Splitter.d.ts

@@ -0,0 +1,32 @@
+import { JSX } from 'solid-js';
+export interface SplitterProps {
+    /** Content of the first pane (left when horizontal, top when vertical). */
+    start: JSX.Element;
+    /** Content of the second pane (right when horizontal, bottom when vertical). */
+    end: JSX.Element;
+    /** Layout axis. `'horizontal'` (default) splits side-by-side with a vertical divider; `'vertical'` stacks the panes with a horizontal divider. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Initial size of the first pane, as a percentage of the container. Defaults to `50`. */
+    initial?: number;
+    /** Minimum size of the first pane, as a percentage. Defaults to `15`. */
+    min?: number;
+    /** Maximum size of the first pane, as a percentage. Defaults to `85`. */
+    max?: number;
+    class?: string;
+}
+/**
+ * Two panes separated by a draggable divider that resizes them. Drag the
+ * divider with a pointer or focus it and use the Arrow keys to nudge the split.
+ * The first pane's size is tracked as a percentage and clamped to `[min, max]`.
+ *
+ * @example
+ * ```tsx
+ * <Splitter
+ *   orientation="horizontal"
+ *   initial={40}
+ *   start={<div class="p-4">Sidebar</div>}
+ *   end={<div class="p-4">Main content</div>}
+ * />
+ * ```
+ */
+export declare function Splitter(props: SplitterProps): JSX.Element;

package/dist/ui/Stepper.d.ts

@@ -0,0 +1,38 @@
+import { JSX } from 'solid-js';
+/** A single step rendered by {@link Stepper}. */
+export interface StepItem {
+    /** Text shown beside the step indicator. */
+    label: string;
+    /** Optional secondary line shown under the label. */
+    description?: string;
+}
+export interface StepperProps {
+    /** Ordered list of steps to display. */
+    steps: StepItem[];
+    /** Index of the currently active step; steps before it are completed. */
+    active: number;
+    /** When provided, indicators become clickable buttons reporting their index. */
+    onStepClick?: (index: number) => void;
+    /** Layout direction. Defaults to `'horizontal'`. */
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+}
+/**
+ * Multi-step progress indicator. Steps before `active` render as completed
+ * (with a check), the `active` step is highlighted with a ring, and later
+ * steps are dimmed. Pass `onStepClick` to let users jump between steps.
+ *
+ * @example
+ * ```tsx
+ * <Stepper
+ *   active={1}
+ *   steps={[
+ *     { label: 'Account', description: 'Your details' },
+ *     { label: 'Shipping' },
+ *     { label: 'Payment' },
+ *   ]}
+ *   onStepClick={setActive}
+ * />
+ * ```
+ */
+export declare function Stepper(props: StepperProps): JSX.Element;

package/dist/ui/TagInput.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'solid-js';
+export interface TagInputProps {
+    /** Current tags (controlled). */
+    value: string[];
+    /** Called with the next tag array whenever tags are added or removed. */
+    onChange: (tags: string[]) => void;
+    placeholder?: string;
+    class?: string;
+}
+/**
+ * Bordered field that turns free text into removable chips. Press Enter or comma
+ * to add the trimmed input as a tag (empty and duplicate values are ignored),
+ * click a chip's `×` to remove it, or press Backspace on an empty input to drop
+ * the last tag. Theme-agnostic — colors come from semantic tokens.
+ *
+ * @example
+ * ```tsx
+ * const [tags, setTags] = createSignal<string[]>(['solid', 'ui'])
+ * <TagInput value={tags()} onChange={setTags} placeholder="Add tag…" />
+ * ```
+ */
+export declare function TagInput(props: TagInputProps): JSX.Element;

package/dist/ui/Timeline.d.ts

@@ -0,0 +1,36 @@
+import { JSX } from 'solid-js';
+/** Accent applied to a {@link TimelineItem}'s dot on the line. */
+export type TimelineTone = 'default' | 'primary' | 'success' | 'danger';
+/** A single event rendered by {@link Timeline}. */
+export interface TimelineItem {
+    /** Headline for the event (rendered emphasized). */
+    title: string;
+    /** Optional supporting copy shown under the title. */
+    description?: string;
+    /** Optional timestamp / relative time label. */
+    time?: string;
+    /** Accent for the dot on the line. Defaults to `'default'`. */
+    tone?: TimelineTone;
+}
+export interface TimelineProps {
+    items: TimelineItem[];
+    class?: string;
+}
+/**
+ * Vertical timeline of events. A continuous line runs down the left with a
+ * tone-colored dot marking each entry; to the right sit the title, an optional
+ * right-aligned time, and an optional description. The line segment stops at the
+ * last item's dot. Renders as a semantic `<ol>`/`<li>` list.
+ *
+ * @example
+ * ```tsx
+ * <Timeline
+ *   items={[
+ *     { title: 'Order placed', time: '09:24', tone: 'primary' },
+ *     { title: 'Shipped', description: 'Left the warehouse.', time: '11:02', tone: 'success' },
+ *     { title: 'Delayed', description: 'Weather hold.', time: '14:30', tone: 'danger' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function Timeline(props: TimelineProps): JSX.Element;

package/dist/ui/Tour.d.ts

@@ -0,0 +1,35 @@
+import { JSX } from 'solid-js';
+/** A single stop in a {@link Tour}. */
+export interface TourStep {
+    /** CSS selector for the element to highlight. */
+    target: string;
+    title: string;
+    description?: string;
+}
+export interface TourProps {
+    steps: TourStep[];
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Called after the last step's "Done" (in addition to `onOpenChange(false)`). */
+    onFinish?: () => void;
+}
+/**
+ * Guided coachmark tour: walks the user through a sequence of on-page targets,
+ * spotlighting each one and explaining it in a floating tooltip. Theme-agnostic —
+ * the dimmer uses `--background` so it adapts to light/dark automatically.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = createSignal(false)
+ * <Tour
+ *   open={open()}
+ *   onOpenChange={setOpen}
+ *   onFinish={() => markTourSeen()}
+ *   steps={[
+ *     { target: '#new-btn', title: 'Create', description: 'Start a new record here.' },
+ *     { target: '#search', title: 'Search', description: 'Find anything fast.' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function Tour(props: TourProps): JSX.Element;

package/dist/ui/Transfer.d.ts

@@ -0,0 +1,35 @@
+import { JSX } from 'solid-js';
+/** A single option shown in either pane of a {@link Transfer}. */
+export interface TransferItem {
+    value: string;
+    label: string;
+}
+export interface TransferProps {
+    /** Full pool of options; membership in `selected` decides which pane each lands in. */
+    items: TransferItem[];
+    /** Values currently in the right ("selected") pane. */
+    selected: string[];
+    /** Called with the next selected-value array whenever items are moved across. */
+    onChange: (selected: string[]) => void;
+    /** Pane headers, `[availableTitle, selectedTitle]`. Defaults to `['Available', 'Selected']`. */
+    titles?: [string, string];
+    class?: string;
+}
+/**
+ * Dual-list picker: two side-by-side panes let the user shuttle items between
+ * an "available" pool and a "selected" set. Tick rows in either pane, then use
+ * the middle chevrons to move the ticked items across; `onChange` receives the
+ * updated array of selected values.
+ *
+ * @example
+ * ```tsx
+ * const [picked, setPicked] = createSignal<string[]>(['a'])
+ * <Transfer
+ *   items={[{ value: 'a', label: 'Apple' }, { value: 'b', label: 'Banana' }]}
+ *   selected={picked()}
+ *   onChange={setPicked}
+ *   titles={['Fruits', 'Basket']}
+ * />
+ * ```
+ */
+export declare function Transfer(props: TransferProps): JSX.Element;

package/dist/ui/Tree.d.ts

@@ -0,0 +1,41 @@
+import { JSX } from 'solid-js';
+/** A single node in a {@link Tree}; nodes may nest via `children`. */
+export interface TreeNode {
+    /** Unique identifier; used to track expanded state. */
+    id: string;
+    /** Text shown in the node's row. */
+    label: string;
+    /** Optional icon rendered before the label. */
+    icon?: JSX.Element;
+    /** Child nodes revealed when this node is expanded. */
+    children?: TreeNode[];
+}
+export interface TreeProps {
+    nodes: TreeNode[];
+    /** Ids of nodes expanded on first render. */
+    defaultExpanded?: string[];
+    class?: string;
+}
+/**
+ * Accessible, indented tree view. Nodes with children render a chevron that
+ * rotates when expanded; clicking a row toggles its subtree. Expanded state is
+ * tracked internally, seeded from `defaultExpanded`.
+ *
+ * @example
+ * ```tsx
+ * <Tree
+ *   defaultExpanded={['src']}
+ *   nodes={[
+ *     {
+ *       id: 'src',
+ *       label: 'src',
+ *       children: [
+ *         { id: 'index', label: 'index.ts' },
+ *         { id: 'ui', label: 'ui', children: [{ id: 'tree', label: 'Tree.tsx' }] },
+ *       ],
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function Tree(props: TreeProps): JSX.Element;

package/dist/ui/TreeSelect.d.ts

@@ -0,0 +1,40 @@
+import { JSX } from 'solid-js';
+import { TreeNode } from './Tree';
+export interface TreeSelectProps {
+    /** Hierarchical options; the same shape consumed by {@link Tree}. */
+    nodes: TreeNode[];
+    /** Id of the currently selected leaf node. */
+    value?: string;
+    /** Fired when a leaf is picked, with its id and the node itself. */
+    onChange: (value: string, node: TreeNode) => void;
+    /** Text shown when no value is selected. */
+    placeholder?: string;
+    class?: string;
+}
+/**
+ * A dropdown that pairs a {@link Select}-styled trigger with a {@link Tree} in a
+ * popover panel. Clicking a branch toggles its subtree; clicking a leaf calls
+ * `onChange` and closes the panel. The trigger shows the selected leaf's label
+ * (found by walking `nodes`) or a muted `placeholder`. Closes on outside click.
+ *
+ * @example
+ * ```tsx
+ * const [dept, setDept] = createSignal<string>()
+ * <TreeSelect
+ *   placeholder="Pick a team"
+ *   value={dept()}
+ *   onChange={(id) => setDept(id)}
+ *   nodes={[
+ *     {
+ *       id: 'eng',
+ *       label: 'Engineering',
+ *       children: [
+ *         { id: 'fe', label: 'Frontend' },
+ *         { id: 'be', label: 'Backend' },
+ *       ],
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function TreeSelect(props: TreeSelectProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.4.3",
+  "version": "0.6.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",
@@ -60,7 +60,17 @@
     "test:ui": "playwright test --ui",
     "test:a11y": "playwright test a11y --project=desktop",
     "test:report": "playwright show-report",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "prepare": "husky"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{js,mjs,cjs,json,css,md,yml,html}": [
+      "prettier --write"
+    ]
   },
   "peerDependencies": {
     "solid-js": "^1.9.13"
@@ -84,7 +94,9 @@
     "eslint": "^9.39.5",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-solid": "^0.14.5",
+    "husky": "^9.1.7",
     "jsdom": "^29.1.1",
+    "lint-staged": "^16.4.0",
     "playwright-core": "^1.61.1",
     "prettier": "^3.9.5",
     "tailwindcss": "^3.4.19",