@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.
- package/dist/index.d.ts +5 -1
- package/dist/index.js +1534 -1375
- package/dist/ui/CalendarHeatmap.d.ts +26 -0
- package/dist/ui/ColorPicker.d.ts +22 -0
- package/dist/ui/Comment.d.ts +42 -0
- package/dist/ui/Portal.d.ts +22 -0
- package/package.json +1 -1
|
@@ -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