@a4ui/core 0.6.0 → 0.8.0

package/dist/ui/CalendarHeatmap.d.ts

@@ -0,0 +1,26 @@
+import { JSX } from 'solid-js';
+/** A single day's activity count, keyed by an ISO `YYYY-MM-DD` date. */
+export interface HeatmapValue {
+    date: string;
+    count: number;
+}
+export interface CalendarHeatmapProps {
+    /** Activity counts to plot; dates outside the visible range are ignored. */
+    values: HeatmapValue[];
+    /** Number of week-columns to show, ending on today. Default 26. */
+    weeks?: number;
+    class?: string;
+}
+/**
+ * GitHub-contributions-style heatmap: a grid of the last `weeks` weeks ending
+ * today, laid out as columns (one per week) of 7 vertically-stacked day-cells
+ * (Sun→Sat). Each cell is shaded by its count into 5 intensity levels and shows
+ * a native tooltip like "3 on 2026-07-10". A "Less … More" legend sits below.
+ * Theme-agnostic (semantic tokens only).
+ *
+ * @example
+ * ```tsx
+ * <CalendarHeatmap values={[{ date: '2026-07-10', count: 3 }]} weeks={26} />
+ * ```
+ */
+export declare function CalendarHeatmap(props: CalendarHeatmapProps): JSX.Element;

package/dist/ui/Clock.d.ts

@@ -0,0 +1,28 @@
+import { JSX } from 'solid-js';
+export interface ClockProps {
+    /** 'digital' (default) or 'analog'. */
+    variant?: 'digital' | 'analog';
+    /** Show the seconds hand / seconds digits. @default true */
+    seconds?: boolean;
+    /** 12-hour clock with AM/PM instead of 24-hour. @default false */
+    hour12?: boolean;
+    /** IANA time zone (e.g. 'America/Hermosillo'); defaults to the local zone. */
+    timeZone?: string;
+    /** Diameter in px for the analog face. @default 160 */
+    size?: number;
+    class?: string;
+}
+/**
+ * Live, self-updating clock. Ticks once per second from a single interval
+ * (started in `onMount`, cleared in `onCleanup`) and renders either a digital
+ * `HH:MM:SS` readout or an analog SVG dial. Pass `timeZone` to show a specific
+ * IANA zone instead of the viewer's local time.
+ *
+ * @example
+ * ```tsx
+ * <Clock />
+ * <Clock variant="analog" size={200} timeZone="America/Hermosillo" />
+ * <Clock hour12 seconds={false} />
+ * ```
+ */
+export declare function Clock(props: ClockProps): JSX.Element;

package/dist/ui/ColorPicker.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'solid-js';
+export interface ColorPickerProps {
+    /** Current color as a `#rrggbb` hex string. */
+    value: string;
+    /** Called with a valid `#rrggbb` hex whenever the user picks a new color. */
+    onChange: (hex: string) => void;
+    /** Preset colors shown as clickable swatches. Defaults to a small palette. */
+    swatches?: string[];
+    class?: string;
+}
+/**
+ * Controlled color picker: a native color well, a hex text field, and a row of
+ * preset swatches. The text field validates against `#rrggbb` and only reports
+ * complete, valid hex values while letting you type freely in between.
+ *
+ * @example
+ * ```tsx
+ * const [color, setColor] = createSignal('#3b82f6')
+ * <ColorPicker value={color()} onChange={setColor} />
+ * ```
+ */
+export declare function ColorPicker(props: ColorPickerProps): JSX.Element;

package/dist/ui/Comment.d.ts

@@ -0,0 +1,42 @@
+import { JSX } from 'solid-js';
+/** A single comment node, optionally carrying its own nested `replies`. */
+export interface CommentData {
+    /** Unique identifier for the comment. */
+    id: string;
+    /** Display name of the comment's author. */
+    author: string;
+    /** Author avatar image URL; falls back to the author's initials. */
+    avatar?: string;
+    /** Human-readable timestamp shown next to the author. */
+    time?: string;
+    /** The comment body. */
+    content: JSX.Element;
+    /** Nested replies, rendered recursively below the comment. */
+    replies?: CommentData[];
+}
+export interface CommentProps {
+    comment: CommentData;
+    /** Renders an actions row (e.g. reply/like) for a given comment. */
+    actions?: (comment: CommentData) => JSX.Element;
+    class?: string;
+}
+/**
+ * Threaded comment layout: a left-aligned {@link Avatar} beside the author,
+ * timestamp, content, and an optional actions row. Any `replies` are rendered
+ * recursively in a left-indented, bordered thread, inheriting the same `actions`.
+ *
+ * @example
+ * ```tsx
+ * <Comment
+ *   comment={{
+ *     id: '1',
+ *     author: 'Jane Doe',
+ *     time: '2h ago',
+ *     content: <p>Great work on this!</p>,
+ *     replies: [{ id: '2', author: 'John Smith', content: <p>Agreed.</p> }],
+ *   }}
+ *   actions={(c) => <button>Reply to {c.author}</button>}
+ * />
+ * ```
+ */
+export declare function Comment(props: CommentProps): JSX.Element;

package/dist/ui/Countdown.d.ts

@@ -9,7 +9,8 @@ export interface CountdownProps {
 /**
  * Live countdown to `props.to`, shown as four cells (Days / Hours / Mins /
  * Secs). Updates every second and calls `props.onComplete` once when it hits
- * zero. Hours, minutes, and seconds are zero-padded to two digits.
+ * zero. Each digit rolls like an old flip clock as it changes. Hours, minutes,
+ * and seconds are zero-padded to two digits.
  *
  * @example
  * ```tsx

package/dist/ui/Portal.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'solid-js';
+/** Props for {@link Portal}. */
+export interface PortalProps {
+    /** Where to mount. Defaults to `document.body`. */
+    mount?: Node;
+    /** Use a Shadow DOM root for the portal container. */
+    useShadow?: boolean;
+    children: JSX.Element;
+}
+/**
+ * Renders its children into a different place in the DOM (by default
+ * `document.body`), so overlays aren't clipped by an ancestor's `overflow` or
+ * transformed stacking context. Built on Solid's `Portal`.
+ *
+ * @example
+ * ```tsx
+ * <Portal>
+ *   <div class="fixed inset-0 grid place-items-center">Floating layer</div>
+ * </Portal>
+ * ```
+ */
+export declare function Portal(props: PortalProps): JSX.Element;

package/dist/ui/Sortable.d.ts

@@ -0,0 +1,33 @@
+import { JSX } from 'solid-js';
+export interface SortableProps<T> {
+    /** The items to render, in current order. */
+    items: T[];
+    /** Stable unique key for an item (used for drag tracking + list keying). */
+    itemKey: (item: T) => string;
+    /** Render an item's content (the grip handle is added automatically to its left). */
+    children: (item: T) => JSX.Element;
+    /** Called with the new order after a drop. */
+    onReorder: (items: T[]) => void;
+    /** Disable dragging. */
+    disabled?: boolean;
+    class?: string;
+}
+/**
+ * Vertical list whose rows reorder by dragging a grip handle. Pointer-events
+ * driven (works with mouse and touch): the grabbed row leaves behind a dashed
+ * placeholder while a floating clone follows the pointer, and other rows shift
+ * live as the pointer crosses their midpoint. `onReorder` fires once on drop
+ * with the final order.
+ *
+ * @example
+ * ```tsx
+ * <Sortable
+ *   items={fields()}
+ *   itemKey={(f) => f.id}
+ *   onReorder={setFields}
+ * >
+ *   {(field) => <span>{field.label}</span>}
+ * </Sortable>
+ * ```
+ */
+export declare function Sortable<T>(props: SortableProps<T>): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",
@@ -40,13 +40,18 @@
       "import": "./dist/index.js"
     },
     "./preset": "./preset.js",
-    "./styles.css": "./dist/styles.css"
+    "./styles.css": "./dist/styles.css",
+    "./elements": {
+      "import": "./dist/elements.js"
+    },
+    "./elements.css": "./dist/elements.css"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "vite build",
+    "build": "vite build && npm run build:elements",
+    "build:elements": "vite build --config vite.elements.config.ts && node scripts/build-elements-css.mjs",
     "dev": "vite build --watch",
     "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",
@@ -99,6 +104,7 @@
     "lint-staged": "^16.4.0",
     "playwright-core": "^1.61.1",
     "prettier": "^3.9.5",
+    "solid-element": "^1.9.2",
     "tailwindcss": "^3.4.19",
     "typescript": "^5.6.0",
     "typescript-eslint": "^8.64.0",

package/preset.js

@@ -14,7 +14,9 @@
 //     content: ['./src/**/*.{ts,tsx}', './node_modules/@a4ui/core/dist/**/*.js'],
 //   }
 
-import plugin from 'tailwindcss/plugin'
+// Explicit .js extension so the preset resolves under strict Node ESM (used by
+// our elements-css build), not just bundlers.
+import plugin from 'tailwindcss/plugin.js'
 
 // Frosted "space glass" surfaces. addComponents so they tree-shake like any
 // utility (emitted only when the class is found in scanned content — a4ui's own