@a4ui/core 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,26 @@
1
+ import { JSX } from 'solid-js';
2
+ /** A single day's activity count, keyed by an ISO `YYYY-MM-DD` date. */
3
+ export interface HeatmapValue {
4
+ date: string;
5
+ count: number;
6
+ }
7
+ export interface CalendarHeatmapProps {
8
+ /** Activity counts to plot; dates outside the visible range are ignored. */
9
+ values: HeatmapValue[];
10
+ /** Number of week-columns to show, ending on today. Default 26. */
11
+ weeks?: number;
12
+ class?: string;
13
+ }
14
+ /**
15
+ * GitHub-contributions-style heatmap: a grid of the last `weeks` weeks ending
16
+ * today, laid out as columns (one per week) of 7 vertically-stacked day-cells
17
+ * (Sun→Sat). Each cell is shaded by its count into 5 intensity levels and shows
18
+ * a native tooltip like "3 on 2026-07-10". A "Less … More" legend sits below.
19
+ * Theme-agnostic (semantic tokens only).
20
+ *
21
+ * @example
22
+ * ```tsx
23
+ * <CalendarHeatmap values={[{ date: '2026-07-10', count: 3 }]} weeks={26} />
24
+ * ```
25
+ */
26
+ export declare function CalendarHeatmap(props: CalendarHeatmapProps): JSX.Element;
@@ -0,0 +1,22 @@
1
+ import { JSX } from 'solid-js';
2
+ export interface ColorPickerProps {
3
+ /** Current color as a `#rrggbb` hex string. */
4
+ value: string;
5
+ /** Called with a valid `#rrggbb` hex whenever the user picks a new color. */
6
+ onChange: (hex: string) => void;
7
+ /** Preset colors shown as clickable swatches. Defaults to a small palette. */
8
+ swatches?: string[];
9
+ class?: string;
10
+ }
11
+ /**
12
+ * Controlled color picker: a native color well, a hex text field, and a row of
13
+ * preset swatches. The text field validates against `#rrggbb` and only reports
14
+ * complete, valid hex values while letting you type freely in between.
15
+ *
16
+ * @example
17
+ * ```tsx
18
+ * const [color, setColor] = createSignal('#3b82f6')
19
+ * <ColorPicker value={color()} onChange={setColor} />
20
+ * ```
21
+ */
22
+ export declare function ColorPicker(props: ColorPickerProps): JSX.Element;
@@ -0,0 +1,42 @@
1
+ import { JSX } from 'solid-js';
2
+ /** A single comment node, optionally carrying its own nested `replies`. */
3
+ export interface CommentData {
4
+ /** Unique identifier for the comment. */
5
+ id: string;
6
+ /** Display name of the comment's author. */
7
+ author: string;
8
+ /** Author avatar image URL; falls back to the author's initials. */
9
+ avatar?: string;
10
+ /** Human-readable timestamp shown next to the author. */
11
+ time?: string;
12
+ /** The comment body. */
13
+ content: JSX.Element;
14
+ /** Nested replies, rendered recursively below the comment. */
15
+ replies?: CommentData[];
16
+ }
17
+ export interface CommentProps {
18
+ comment: CommentData;
19
+ /** Renders an actions row (e.g. reply/like) for a given comment. */
20
+ actions?: (comment: CommentData) => JSX.Element;
21
+ class?: string;
22
+ }
23
+ /**
24
+ * Threaded comment layout: a left-aligned {@link Avatar} beside the author,
25
+ * timestamp, content, and an optional actions row. Any `replies` are rendered
26
+ * recursively in a left-indented, bordered thread, inheriting the same `actions`.
27
+ *
28
+ * @example
29
+ * ```tsx
30
+ * <Comment
31
+ * comment={{
32
+ * id: '1',
33
+ * author: 'Jane Doe',
34
+ * time: '2h ago',
35
+ * content: <p>Great work on this!</p>,
36
+ * replies: [{ id: '2', author: 'John Smith', content: <p>Agreed.</p> }],
37
+ * }}
38
+ * actions={(c) => <button>Reply to {c.author}</button>}
39
+ * />
40
+ * ```
41
+ */
42
+ export declare function Comment(props: CommentProps): JSX.Element;
@@ -0,0 +1,22 @@
1
+ import { JSX } from 'solid-js';
2
+ /** Props for {@link Portal}. */
3
+ export interface PortalProps {
4
+ /** Where to mount. Defaults to `document.body`. */
5
+ mount?: Node;
6
+ /** Use a Shadow DOM root for the portal container. */
7
+ useShadow?: boolean;
8
+ children: JSX.Element;
9
+ }
10
+ /**
11
+ * Renders its children into a different place in the DOM (by default
12
+ * `document.body`), so overlays aren't clipped by an ancestor's `overflow` or
13
+ * transformed stacking context. Built on Solid's `Portal`.
14
+ *
15
+ * @example
16
+ * ```tsx
17
+ * <Portal>
18
+ * <div class="fixed inset-0 grid place-items-center">Floating layer</div>
19
+ * </Portal>
20
+ * ```
21
+ */
22
+ export declare function Portal(props: PortalProps): JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@a4ui/core",
3
- "version": "0.6.0",
3
+ "version": "0.7.0",
4
4
  "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
5
5
  "type": "module",
6
6
  "license": "MIT",