@a4ui/core 0.2.0 → 0.3.1

package/dist/ui/Spinner.d.ts

@@ -1,7 +1,17 @@
 import { JSX } from 'solid-js';
 interface SpinnerProps {
     class?: string;
+    /** Accessible label announced to screen readers via `aria-label`. Default: `'Loading'`. */
     label?: string;
 }
+/**
+ * Small spinning loading indicator (inline SVG, no primitive). Use for
+ * indeterminate loading states such as button/inline busy states.
+ *
+ * @example
+ * ```tsx
+ * <Spinner label="Saving" />
+ * ```
+ */
 export declare function Spinner(props: SpinnerProps): JSX.Element;
 export {};

package/dist/ui/Stat.d.ts

@@ -1,4 +1,5 @@
 import { JSX } from 'solid-js';
+/** Color scheme applied to a {@link Stat}'s icon badge. */
 export type StatTone = 'primary' | 'success' | 'danger' | 'neutral';
 interface StatProps {
     label: string;
@@ -12,5 +13,16 @@ interface StatProps {
     delay?: number;
     class?: string;
 }
+/**
+ * KPI / stat card showing a label, an animated count-up numeric value, and
+ * an optional tone-colored icon badge. Combines a `solid-motionone` fade-up
+ * entrance (use `delay` to stagger a row of stats) with the `createCountUp`
+ * tween — both automatically disabled under `prefers-reduced-motion`.
+ *
+ * @example
+ * ```tsx
+ * <Stat label="Active users" value={activeUsers()} tone="success" icon={<UsersIcon />} />
+ * ```
+ */
 export declare function Stat(props: StatProps): JSX.Element;
 export {};

package/dist/ui/Switch.d.ts

@@ -1,10 +1,21 @@
 import { JSX } from 'solid-js';
 interface SwitchProps {
+    /** Whether the switch is on. Controlled — pair with `onChange`. */
     checked: boolean;
     onChange: (checked: boolean) => void;
+    /** Optional visible label rendered next to the control. */
     label?: string;
     disabled?: boolean;
     class?: string;
 }
+/**
+ * Accessible on/off switch, built on Kobalte's Switch primitive.
+ *
+ * @example
+ * ```tsx
+ * const [enabled, setEnabled] = createSignal(false)
+ * <Switch checked={enabled()} onChange={setEnabled} label="Enable notifications" />
+ * ```
+ */
 export declare function Switch(props: SwitchProps): JSX.Element;
 export {};

package/dist/ui/Table.d.ts

@@ -2,10 +2,71 @@ import { JSX, ParentProps } from 'solid-js';
 interface TableProps extends ParentProps {
     class?: string;
 }
+/**
+ * Table root — a plain `<table>` wrapped in a horizontal-scroll container.
+ * Compose with {@link TableHead}, {@link TableBody}, {@link TableRow},
+ * {@link TableHeadCell}, and {@link TableCell}.
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <TableHead>
+ *     <TableRow>
+ *       <TableHeadCell>Name</TableHeadCell>
+ *     </TableRow>
+ *   </TableHead>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell>Alfredo</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ * ```
+ */
 export declare function Table(props: TableProps): JSX.Element;
+/**
+ * `<thead>` wrapper with the muted, bottom-bordered header styling.
+ *
+ * @example
+ * ```tsx
+ * <TableHead><TableRow><TableHeadCell>Name</TableHeadCell></TableRow></TableHead>
+ * ```
+ */
 export declare function TableHead(props: TableProps): JSX.Element;
+/**
+ * `<tbody>` wrapper — no default styling beyond passing through `class`.
+ *
+ * @example
+ * ```tsx
+ * <TableBody><TableRow><TableCell>Alfredo</TableCell></TableRow></TableBody>
+ * ```
+ */
 export declare function TableBody(props: TableProps): JSX.Element;
+/**
+ * `<tr>` wrapper — adds the row bottom-border and hover highlight.
+ *
+ * @example
+ * ```tsx
+ * <TableRow><TableCell>Alfredo</TableCell></TableRow>
+ * ```
+ */
 export declare function TableRow(props: TableProps): JSX.Element;
+/**
+ * `<th>` wrapper — small uppercase heading style, use inside {@link TableHead}.
+ *
+ * @example
+ * ```tsx
+ * <TableHeadCell>Name</TableHeadCell>
+ * ```
+ */
 export declare function TableHeadCell(props: TableProps): JSX.Element;
+/**
+ * `<td>` wrapper — standard cell padding and vertical alignment.
+ *
+ * @example
+ * ```tsx
+ * <TableCell>Alfredo</TableCell>
+ * ```
+ */
 export declare function TableCell(props: TableProps): JSX.Element;
 export {};

package/dist/ui/Tabs.d.ts

@@ -1,14 +1,34 @@
 import { JSX } from 'solid-js';
+/** One tab: its unique `value`, trigger `label`, and panel `content`. */
 export interface TabItem {
     value: string;
     label: string;
     content: JSX.Element;
 }
 interface TabsProps {
+    /** Tabs to render, in order — each contributes a trigger and a panel. */
     items: TabItem[];
+    /** Currently selected tab's `value`. Controlled — pair with `onChange`. */
     value: string;
     onChange: (value: string) => void;
     class?: string;
 }
+/**
+ * Accessible tabs, built on Kobalte's Tabs primitive, with a sliding selection
+ * indicator.
+ *
+ * @example
+ * ```tsx
+ * const [tab, setTab] = createSignal('profile')
+ * <Tabs
+ *   value={tab()}
+ *   onChange={setTab}
+ *   items={[
+ *     { value: 'profile', label: 'Profile', content: <ProfilePanel /> },
+ *     { value: 'billing', label: 'Billing', content: <BillingPanel /> },
+ *   ]}
+ * />
+ * ```
+ */
 export declare function Tabs(props: TabsProps): JSX.Element;
 export {};

package/dist/ui/Textarea.d.ts

@@ -1,8 +1,20 @@
 import { JSX } from 'solid-js';
 interface TextareaProps extends Omit<JSX.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onInput'> {
     value: string;
+    /** Called with the new string value on every input event (not the raw DOM event). */
     onInput: (value: string) => void;
     class?: string;
 }
+/**
+ * Controlled multi-line text field — a plain `<textarea>` styled to match
+ * {@link Input}. Any other native textarea attribute (e.g. `rows`, `placeholder`,
+ * `disabled`) is passed through.
+ *
+ * @example
+ * ```tsx
+ * const [bio, setBio] = createSignal('')
+ * <Textarea value={bio()} onInput={setBio} placeholder="Tell us about yourself" />
+ * ```
+ */
 export declare function Textarea(props: TextareaProps): JSX.Element;
 export {};

package/dist/ui/Toast.d.ts

@@ -1,5 +1,17 @@
 import { JSX } from 'solid-js';
+/** Visual/semantic tone of a toast — controls its border/background accent color. */
 export type ToastTone = 'success' | 'error' | 'info';
+/**
+ * Imperative API to show a toast notification from anywhere in the app (event
+ * handlers, mutation `onError`/`onSuccess`, etc.) — no component context
+ * needed. Requires a mounted {@link Toaster} to render into.
+ *
+ * @example
+ * ```tsx
+ * toast.success('Saved', 'Your changes were saved.')
+ * toast.error('Something went wrong')
+ * ```
+ */
 export declare const toast: {
     success: (title: string, description?: string) => void;
     error: (title: string, description?: string) => void;

package/dist/ui/Toggle.d.ts

@@ -1,8 +1,20 @@
 import { JSX, ParentProps } from 'solid-js';
 interface ToggleProps extends ParentProps {
+    /** Whether the toggle is pressed/"on". Controlled — pair with `onChange`. */
     pressed: boolean;
     onChange: (pressed: boolean) => void;
     class?: string;
 }
+/**
+ * Two-state toggle button (e.g. bold/italic, mute, favorite), built on
+ * Kobalte's ToggleButton primitive. `children` is the button's content
+ * (icon and/or text).
+ *
+ * @example
+ * ```tsx
+ * const [pressed, setPressed] = createSignal(false)
+ * <Toggle pressed={pressed()} onChange={setPressed}><StarIcon /></Toggle>
+ * ```
+ */
 export declare function Toggle(props: ToggleProps): JSX.Element;
 export {};

package/dist/ui/ToggleGroup.d.ts

@@ -1,13 +1,33 @@
 import { JSX } from 'solid-js';
+/** One option in a {@link ToggleGroup}: its `value` and visible `label`. */
 export interface ToggleGroupOption {
     value: string;
     label: string;
 }
 interface ToggleGroupProps {
+    /** Currently selected option's `value`, or `null` if none is selected. Controlled — pair with `onChange`. */
     value: string | null;
     onChange: (value: string | null) => void;
+    /** Options to render, in order, as segmented buttons. */
     options: ToggleGroupOption[];
     class?: string;
 }
+/**
+ * Single-select segmented button row, built on Kobalte's ToggleGroup
+ * primitive — for exclusive-choice controls like view mode or alignment.
+ *
+ * @example
+ * ```tsx
+ * const [align, setAlign] = createSignal<string | null>('left')
+ * <ToggleGroup
+ *   value={align()}
+ *   onChange={setAlign}
+ *   options={[
+ *     { value: 'left', label: 'Left' },
+ *     { value: 'center', label: 'Center' },
+ *   ]}
+ * />
+ * ```
+ */
 export declare function ToggleGroup(props: ToggleGroupProps): JSX.Element;
 export {};

package/dist/ui/Tooltip.d.ts

@@ -1,7 +1,20 @@
 import { JSX, ParentProps } from 'solid-js';
 interface TooltipProps extends ParentProps {
+    /** Content shown inside the tooltip popover. */
     content: JSX.Element;
+    /** Applied to the tooltip popover (`KTooltip.Content`), not the trigger. */
     class?: string;
 }
+/**
+ * Hover/focus tooltip, built on Kobalte's Tooltip primitive. `children` is
+ * the trigger element; `content` is rendered in a portal on hover/focus.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Delete this item">
+ *   <IconButton icon={<TrashIcon />} aria-label="Delete" />
+ * </Tooltip>
+ * ```
+ */
 export declare function Tooltip(props: TooltipProps): JSX.Element;
 export {};

package/dist/ui/VirtualList.d.ts

@@ -11,5 +11,19 @@ interface VirtualListProps<T> {
     /** Row renderer. `index` is an accessor so it stays reactive as rows recycle. */
     children: (item: T, index: Accessor<number>) => JSX.Element;
 }
+/**
+ * Virtualized list built on `@tanstack/solid-virtual` — renders only the
+ * visible rows (plus `overscan`) so lists of any length mount and scroll
+ * instantly. The scroll container's height MUST be constrained via `class`
+ * (e.g. `"h-[65vh]"`); virtualization requires a fixed viewport to measure
+ * against.
+ *
+ * @example
+ * ```tsx
+ * <VirtualList each={rows()} estimateSize={40} class="h-[65vh]">
+ *   {(row, index) => <div>{index()}: {row.name}</div>}
+ * </VirtualList>
+ * ```
+ */
 export declare function VirtualList<T>(props: VirtualListProps<T>): JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",
@@ -48,10 +48,14 @@
   "scripts": {
     "build": "vite build",
     "dev": "vite build --watch",
-    "preview": "vite --config vite.preview.config.ts",
-    "preview:build": "vite build --config vite.preview.config.ts",
+    "preview": "node scripts/gen-llms.mjs && vite --config vite.preview.config.ts",
+    "preview:build": "node scripts/gen-llms.mjs && vite build --config vite.preview.config.ts",
+    "gen:llms": "node scripts/gen-llms.mjs",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint src",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "test:unit": "vitest run",
     "test": "playwright test",
     "test:ui": "playwright test --ui",
     "test:report": "playwright show-report",
@@ -70,13 +74,22 @@
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.5",
     "@playwright/test": "^1.61.1",
+    "@solidjs/testing-library": "^0.8.10",
+    "@testing-library/jest-dom": "^6.9.1",
+    "eslint": "^9.39.5",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-solid": "^0.14.5",
+    "jsdom": "^29.1.1",
     "playwright-core": "^1.61.1",
+    "prettier": "^3.9.5",
     "tailwindcss": "^3.4.19",
     "typescript": "^5.6.0",
+    "typescript-eslint": "^8.64.0",
     "vite": "^6.0.0",
     "vite-plugin-dts": "^4.3.0",
-    "vite-plugin-solid": "^2.11.12"
+    "vite-plugin-solid": "^2.11.12",
+    "vitest": "^4.1.10"
   }
 }