@a4ui/core 0.4.2 → 0.5.0

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.4.2",
+  "version": "0.5.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",