@refraction-ui/react 0.13.0 → 0.14.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.cjs +3616 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +23 -0
- package/dist/index.d.ts +23 -0
- package/dist/index.js +3581 -3
- package/dist/index.js.map +1 -1
- package/dist/internal/audio-room/index.d.ts +91 -0
- package/dist/internal/call-controls/index.d.ts +83 -0
- package/dist/internal/checklist/index.d.ts +84 -0
- package/dist/internal/editor-status-bar/index.d.ts +70 -0
- package/dist/internal/editor-tabs/index.d.ts +68 -0
- package/dist/internal/floating-reactions/index.d.ts +98 -0
- package/dist/internal/flow-editor/index.d.ts +91 -0
- package/dist/internal/graph-view/index.d.ts +107 -0
- package/dist/internal/infinite-canvas/index.d.ts +74 -0
- package/dist/internal/live-captions/index.d.ts +59 -0
- package/dist/internal/live-cursors/index.d.ts +65 -0
- package/dist/internal/live-transcript/index.d.ts +73 -0
- package/dist/internal/mini-map/index.d.ts +81 -0
- package/dist/internal/pre-call-lobby/index.d.ts +97 -0
- package/dist/internal/radial-gauge/index.d.ts +120 -0
- package/dist/internal/rating-scale/index.d.ts +76 -0
- package/dist/internal/react-audio-room/index.d.ts +39 -0
- package/dist/internal/react-call-controls/index.d.ts +44 -0
- package/dist/internal/react-checklist/index.d.ts +27 -0
- package/dist/internal/react-editor-status-bar/index.d.ts +43 -0
- package/dist/internal/react-editor-tabs/index.d.ts +25 -0
- package/dist/internal/react-floating-reactions/index.d.ts +65 -0
- package/dist/internal/react-flow-editor/index.d.ts +35 -0
- package/dist/internal/react-graph-view/index.d.ts +25 -0
- package/dist/internal/react-infinite-canvas/index.d.ts +40 -0
- package/dist/internal/react-live-captions/index.d.ts +29 -0
- package/dist/internal/react-live-cursors/index.d.ts +42 -0
- package/dist/internal/react-live-transcript/index.d.ts +22 -0
- package/dist/internal/react-mini-map/index.d.ts +35 -0
- package/dist/internal/react-pre-call-lobby/index.d.ts +47 -0
- package/dist/internal/react-radial-gauge/index.d.ts +43 -0
- package/dist/internal/react-rating-scale/index.d.ts +38 -0
- package/dist/internal/react-sticky-note/index.d.ts +39 -0
- package/dist/internal/react-terminal/index.d.ts +39 -0
- package/dist/internal/react-test-results/index.d.ts +21 -0
- package/dist/internal/react-timeline/index.d.ts +35 -0
- package/dist/internal/react-video-grid/index.d.ts +33 -0
- package/dist/internal/react-video-tile/index.d.ts +41 -0
- package/dist/internal/react-wizard/index.d.ts +59 -0
- package/dist/internal/sticky-note/index.d.ts +49 -0
- package/dist/internal/terminal/index.d.ts +65 -0
- package/dist/internal/test-results/index.d.ts +97 -0
- package/dist/internal/timeline/index.d.ts +111 -0
- package/dist/internal/video-grid/index.d.ts +83 -0
- package/dist/internal/video-tile/index.d.ts +88 -0
- package/dist/internal/wizard/index.d.ts +148 -0
- package/package.json +24 -1
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { RatingScalePoint, RatingScaleSize } from '../rating-scale/index.js';
|
|
3
|
+
export { RatingScalePoint, RatingScaleSize } from '../rating-scale/index.js';
|
|
4
|
+
|
|
5
|
+
interface RatingScaleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
6
|
+
/** Controlled selected value. */
|
|
7
|
+
value?: number;
|
|
8
|
+
/** Initial value for uncontrolled usage. */
|
|
9
|
+
defaultValue?: number;
|
|
10
|
+
/** Called with the newly selected value. */
|
|
11
|
+
onValueChange?: (value: number) => void;
|
|
12
|
+
/** Number of points (1..count). Ignored when `points` is provided. */
|
|
13
|
+
count?: number;
|
|
14
|
+
/** Explicit points with accessible labels. */
|
|
15
|
+
points?: RatingScalePoint[];
|
|
16
|
+
/** Label shown before the scale (the low end). */
|
|
17
|
+
minLabel?: React.ReactNode;
|
|
18
|
+
/** Label shown after the scale (the high end). */
|
|
19
|
+
maxLabel?: React.ReactNode;
|
|
20
|
+
/** Visual size. */
|
|
21
|
+
size?: RatingScaleSize;
|
|
22
|
+
/** Disables the whole scale. */
|
|
23
|
+
disabled?: boolean;
|
|
24
|
+
/** Accessible name for the group. */
|
|
25
|
+
'aria-label'?: string;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* RatingScale — a single-select ordinal rating / Likert control.
|
|
29
|
+
*
|
|
30
|
+
* Renders `role="radiogroup"`; each point is a `role="radio"` button with
|
|
31
|
+
* roving tabindex and arrow/Home/End keyboard navigation (clamped at the
|
|
32
|
+
* ends — ordinal scales don't wrap). Supports controlled (`value`) and
|
|
33
|
+
* uncontrolled (`defaultValue`) usage. Logic, point resolution, and styles
|
|
34
|
+
* come from the headless `@refraction-ui/rating-scale` core.
|
|
35
|
+
*/
|
|
36
|
+
declare const RatingScale: React.ForwardRefExoticComponent<RatingScaleProps & React.RefAttributes<HTMLDivElement>>;
|
|
37
|
+
|
|
38
|
+
export { RatingScale, type RatingScaleProps };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { StickyNoteColor } from '../sticky-note/index.js';
|
|
3
|
+
export { STICKY_NOTE_COLORS, StickyNoteColor, nextStickyColor } from '../sticky-note/index.js';
|
|
4
|
+
|
|
5
|
+
interface StickyNoteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content' | 'onSelect'> {
|
|
6
|
+
/** Color of the sticky note. */
|
|
7
|
+
color?: StickyNoteColor;
|
|
8
|
+
/** Text content of the note. */
|
|
9
|
+
text?: string;
|
|
10
|
+
/** Called when the text changes (makes text editable via a textarea). */
|
|
11
|
+
onTextChange?: (value: string) => void;
|
|
12
|
+
/** Optional author name shown in the note footer. */
|
|
13
|
+
author?: string;
|
|
14
|
+
/** Absolute x position in pixels (for board/canvas placement). */
|
|
15
|
+
x?: number;
|
|
16
|
+
/** Absolute y position in pixels (for board/canvas placement). */
|
|
17
|
+
y?: number;
|
|
18
|
+
/** Whether the note can be dragged. Requires `onMove` to receive updates. */
|
|
19
|
+
draggable?: boolean;
|
|
20
|
+
/** Called with the new `{ x, y }` position after a drag completes. */
|
|
21
|
+
onMove?: (position: {
|
|
22
|
+
x: number;
|
|
23
|
+
y: number;
|
|
24
|
+
}) => void;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* StickyNote — a draggable colored note for whiteboard / canvas surfaces.
|
|
28
|
+
*
|
|
29
|
+
* - `color` selects the soft-tint palette (yellow, pink, blue, green, purple, orange).
|
|
30
|
+
* - `text` + `onTextChange` switch to an editable textarea; without `onTextChange` the
|
|
31
|
+
* text is static.
|
|
32
|
+
* - `x` / `y` absolutely position the note; pair with `draggable` + `onMove` for
|
|
33
|
+
* drag-to-reposition. Drag is implemented via pointer events and is SSR-safe (no
|
|
34
|
+
* handlers attach until the component mounts on the client).
|
|
35
|
+
* - Forwards the ref to the outer `<div>`.
|
|
36
|
+
*/
|
|
37
|
+
declare const StickyNote: React.ForwardRefExoticComponent<StickyNoteProps & React.RefAttributes<HTMLDivElement>>;
|
|
38
|
+
|
|
39
|
+
export { StickyNote, type StickyNoteProps };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { TerminalLine } from '../terminal/index.js';
|
|
3
|
+
export { TerminalLine, TerminalLineKind } from '../terminal/index.js';
|
|
4
|
+
|
|
5
|
+
/** Height cap for the scrollable terminal surface. */
|
|
6
|
+
type TerminalMaxHeight = 'sm' | 'md' | 'lg' | 'none';
|
|
7
|
+
interface TerminalProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
8
|
+
/** Lines to render in order. Each line's `kind` determines its styling. */
|
|
9
|
+
lines: TerminalLine[];
|
|
10
|
+
/**
|
|
11
|
+
* Prompt symbol prepended to `command` lines.
|
|
12
|
+
* @default '$'
|
|
13
|
+
*/
|
|
14
|
+
promptSymbol?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Maximum height of the scroll region before it becomes scrollable.
|
|
17
|
+
* @default 'md'
|
|
18
|
+
*/
|
|
19
|
+
maxHeight?: TerminalMaxHeight;
|
|
20
|
+
/** Accessible label for the live region (e.g. `'Run output'`). */
|
|
21
|
+
'aria-label'?: string;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Terminal — a read-only output console panel.
|
|
25
|
+
*
|
|
26
|
+
* Renders a monospaced scroll region (`role="log"`, `aria-live="polite"`) with
|
|
27
|
+
* each line styled by its semantic kind:
|
|
28
|
+
* - `command` — foreground bold, prefixed with the prompt symbol
|
|
29
|
+
* - `stdout` — foreground
|
|
30
|
+
* - `stderr` — destructive (error token)
|
|
31
|
+
* - `info` — muted-foreground
|
|
32
|
+
* - `success` — emerald / success token
|
|
33
|
+
*
|
|
34
|
+
* This is a presentational component — it has no internal state and does not
|
|
35
|
+
* handle keyboard input (v1). Pass new lines from the parent to stream output.
|
|
36
|
+
*/
|
|
37
|
+
declare const Terminal: React.ForwardRefExoticComponent<TerminalProps & React.RefAttributes<HTMLDivElement>>;
|
|
38
|
+
|
|
39
|
+
export { Terminal, type TerminalMaxHeight, type TerminalProps };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { TestResultData } from '../test-results/index.js';
|
|
3
|
+
export { TestResultData, TestStatus } from '../test-results/index.js';
|
|
4
|
+
|
|
5
|
+
interface TestResultsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'results'> {
|
|
6
|
+
/** Array of test case results to display. */
|
|
7
|
+
results: TestResultData[];
|
|
8
|
+
/** When true, renders a summary bar showing "{passed}/{total} passed". */
|
|
9
|
+
showSummary?: boolean;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* TestResults — displays a list of test case results with pass/fail/skip
|
|
13
|
+
* status, optional expected/actual diff for failures, and an optional summary
|
|
14
|
+
* bar.
|
|
15
|
+
*
|
|
16
|
+
* Renders `role="list"` on the container; each row has `role="listitem"`.
|
|
17
|
+
* Logic and styles come from the headless `@refraction-ui/test-results` core.
|
|
18
|
+
*/
|
|
19
|
+
declare const TestResults: React.ForwardRefExoticComponent<TestResultsProps & React.RefAttributes<HTMLDivElement>>;
|
|
20
|
+
|
|
21
|
+
export { TestResults, type TestResultsProps };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { TimelineItemData, TimelineOrientation } from '../timeline/index.js';
|
|
3
|
+
export { TimelineItemData, TimelineItemStatus, TimelineOrientation } from '../timeline/index.js';
|
|
4
|
+
|
|
5
|
+
interface TimelineItemProps {
|
|
6
|
+
/** The normalised item data. */
|
|
7
|
+
item: Required<TimelineItemData>;
|
|
8
|
+
/** Orientation inherited from the parent Timeline. */
|
|
9
|
+
orientation: TimelineOrientation;
|
|
10
|
+
/** True when this is the last item (hides the trailing connector). */
|
|
11
|
+
isLast: boolean;
|
|
12
|
+
}
|
|
13
|
+
/** A single event entry inside a Timeline. */
|
|
14
|
+
declare const TimelineItem: React.ForwardRefExoticComponent<TimelineItemProps & React.RefAttributes<HTMLLIElement>>;
|
|
15
|
+
interface TimelineProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {
|
|
16
|
+
/** Ordered list of events to render. */
|
|
17
|
+
items: TimelineItemData[];
|
|
18
|
+
/** Layout direction. Defaults to `'vertical'`. */
|
|
19
|
+
orientation?: TimelineOrientation;
|
|
20
|
+
/**
|
|
21
|
+
* Optional render-prop override for a single item.
|
|
22
|
+
* Receives the normalised item and its index; return a React node.
|
|
23
|
+
*/
|
|
24
|
+
renderItem?: (item: Required<TimelineItemData>, index: number, isLast: boolean) => React.ReactNode;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Timeline — a time-ordered list of events with a marker rail.
|
|
28
|
+
*
|
|
29
|
+
* Renders `role="list"`; each item carries `role="listitem"`.
|
|
30
|
+
* Supports vertical (default) and horizontal orientations.
|
|
31
|
+
* Pass `renderItem` to take full control of individual entries.
|
|
32
|
+
*/
|
|
33
|
+
declare const Timeline: React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<HTMLUListElement>>;
|
|
34
|
+
|
|
35
|
+
export { Timeline, TimelineItem, type TimelineItemProps, type TimelineProps };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { VideoGridLayout } from '../video-grid/index.js';
|
|
3
|
+
export { VideoGridLayout } from '../video-grid/index.js';
|
|
4
|
+
import { VideoTileData } from '../react-video-tile/index.js';
|
|
5
|
+
export { VideoTileData } from '../react-video-tile/index.js';
|
|
6
|
+
|
|
7
|
+
interface VideoGridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
|
|
8
|
+
/** List of participant data to render as tiles. */
|
|
9
|
+
participants: VideoTileData[];
|
|
10
|
+
/**
|
|
11
|
+
* Grid layout mode.
|
|
12
|
+
* - 'auto' — grid unless ≤1 participant (falls back to speaker)
|
|
13
|
+
* - 'grid' — always uniform CSS grid
|
|
14
|
+
* - 'speaker' — spotlight for `spotlightId` (or first participant) + filmstrip
|
|
15
|
+
*/
|
|
16
|
+
layout?: VideoGridLayout;
|
|
17
|
+
/**
|
|
18
|
+
* Participant `id` to spotlight in speaker view.
|
|
19
|
+
* Falls back to the first participant when omitted.
|
|
20
|
+
*/
|
|
21
|
+
spotlightId?: string;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* VideoGrid — adaptive participant grid for easyloops meetings.
|
|
25
|
+
*
|
|
26
|
+
* Composes `<VideoTile>` tiles in a responsive CSS grid (1→6 columns based on
|
|
27
|
+
* participant count) or a speaker-view layout (spotlight + filmstrip). The
|
|
28
|
+
* column math lives in the headless `@refraction-ui/video-grid` core so it is
|
|
29
|
+
* shared with the Astro adapter.
|
|
30
|
+
*/
|
|
31
|
+
declare const VideoGrid: React.ForwardRefExoticComponent<VideoGridProps & React.RefAttributes<HTMLDivElement>>;
|
|
32
|
+
|
|
33
|
+
export { VideoGrid, type VideoGridProps };
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { VideoTileMicState } from '../video-tile/index.js';
|
|
3
|
+
export { VideoTileData, VideoTileMicState } from '../video-tile/index.js';
|
|
4
|
+
|
|
5
|
+
interface VideoTileProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content' | 'color'> {
|
|
6
|
+
/** Participant display name — shown in the name chip and used for initials. */
|
|
7
|
+
name: string;
|
|
8
|
+
/** Current microphone state. Defaults to 'on'. */
|
|
9
|
+
micState?: VideoTileMicState;
|
|
10
|
+
/** Whether the participant is actively speaking. Adds an emerald ring. */
|
|
11
|
+
speaking?: boolean;
|
|
12
|
+
/** Whether the tile is pinned in the grid. Adds a primary ring. */
|
|
13
|
+
pinned?: boolean;
|
|
14
|
+
/** URL of the participant's avatar image, used in the fallback circle. */
|
|
15
|
+
avatarUrl?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Media slot — pass a `<video>` element (or any ReactNode) to render as the
|
|
18
|
+
* tile's background media layer. When omitted, an avatar fallback is shown.
|
|
19
|
+
*/
|
|
20
|
+
mediaSlot?: React.ReactNode;
|
|
21
|
+
/** Optional emoji/reaction badge rendered at the top-right of the tile. */
|
|
22
|
+
reaction?: React.ReactNode;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* VideoTile — a single participant tile for a video meeting grid.
|
|
26
|
+
*
|
|
27
|
+
* Renders a `role="group"` container with an aspect-video aspect ratio.
|
|
28
|
+
* If a `mediaSlot` is provided it fills the tile; otherwise an avatar fallback
|
|
29
|
+
* with initials is centred on a muted background.
|
|
30
|
+
*
|
|
31
|
+
* Overlays:
|
|
32
|
+
* - Name chip (bottom-left) with optional mic-muted indicator
|
|
33
|
+
* - Speaking ring (emerald) when `speaking` is true
|
|
34
|
+
* - Pinned ring (primary) when `pinned` is true
|
|
35
|
+
* - Reaction badge (top-right) when `reaction` is provided
|
|
36
|
+
*
|
|
37
|
+
* Logic and styles come from the headless `@refraction-ui/video-tile` core.
|
|
38
|
+
*/
|
|
39
|
+
declare const VideoTile: React.ForwardRefExoticComponent<VideoTileProps & React.RefAttributes<HTMLDivElement>>;
|
|
40
|
+
|
|
41
|
+
export { VideoTile, type VideoTileProps };
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { WizardStep, WizardOrientation } from '../wizard/index.js';
|
|
3
|
+
export { WizardOrientation, WizardStep } from '../wizard/index.js';
|
|
4
|
+
|
|
5
|
+
interface WizardContextValue {
|
|
6
|
+
currentIndex: number;
|
|
7
|
+
steps: WizardStep[];
|
|
8
|
+
orientation: WizardOrientation;
|
|
9
|
+
}
|
|
10
|
+
interface WizardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
|
|
11
|
+
/** Step definitions for the rail. */
|
|
12
|
+
steps: WizardStep[];
|
|
13
|
+
/** Controlled current step index (0-based). */
|
|
14
|
+
step?: number;
|
|
15
|
+
/** Initial step index for uncontrolled usage. */
|
|
16
|
+
defaultStep?: number;
|
|
17
|
+
/** Called when the current step changes (Back/Next). */
|
|
18
|
+
onStepChange?: (index: number) => void;
|
|
19
|
+
/** Called when the user completes the final step. */
|
|
20
|
+
onComplete?: () => void;
|
|
21
|
+
/** Orientation of the step rail. Default `'vertical'`. */
|
|
22
|
+
orientation?: WizardOrientation;
|
|
23
|
+
/** Label for the Next button. */
|
|
24
|
+
nextLabel?: React.ReactNode;
|
|
25
|
+
/** Label for the Back button. */
|
|
26
|
+
backLabel?: React.ReactNode;
|
|
27
|
+
/** Label for the button on the final step. */
|
|
28
|
+
completeLabel?: React.ReactNode;
|
|
29
|
+
/** Label for the Skip button (shown on optional steps only). */
|
|
30
|
+
skipLabel?: React.ReactNode;
|
|
31
|
+
/**
|
|
32
|
+
* Content for the active step. Either pass a render prop that receives the
|
|
33
|
+
* current step index, or plain children shown for every step.
|
|
34
|
+
*/
|
|
35
|
+
children?: React.ReactNode | ((currentIndex: number) => React.ReactNode);
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Wizard — a multi-step flow orchestration component.
|
|
39
|
+
*
|
|
40
|
+
* Renders a step rail (vertical by default) alongside the active step content
|
|
41
|
+
* and a footer with Back / Skip (optional steps) / Next-or-Complete actions.
|
|
42
|
+
* Supports controlled (`step` / `onStepChange`) and uncontrolled
|
|
43
|
+
* (`defaultStep`) usage. Logic and styles come from the headless
|
|
44
|
+
* `@refraction-ui/wizard` core.
|
|
45
|
+
*
|
|
46
|
+
* @example
|
|
47
|
+
* ```tsx
|
|
48
|
+
* <Wizard steps={steps} onComplete={handleComplete}>
|
|
49
|
+
* {(index) => <StepContent stepIndex={index} />}
|
|
50
|
+
* </Wizard>
|
|
51
|
+
* ```
|
|
52
|
+
*/
|
|
53
|
+
declare const Wizard: React.ForwardRefExoticComponent<WizardProps & React.RefAttributes<HTMLDivElement>>;
|
|
54
|
+
/**
|
|
55
|
+
* Access wizard state from within a child component rendered inside `<Wizard>`.
|
|
56
|
+
*/
|
|
57
|
+
declare function useWizard(): WizardContextValue;
|
|
58
|
+
|
|
59
|
+
export { Wizard, type WizardProps, useWizard };
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/** The available color variants for a sticky note. */
|
|
2
|
+
type StickyNoteColor = 'yellow' | 'pink' | 'blue' | 'green' | 'purple' | 'orange';
|
|
3
|
+
/** Ordered list of all sticky note colors — used for cycling and iteration. */
|
|
4
|
+
declare const STICKY_NOTE_COLORS: StickyNoteColor[];
|
|
5
|
+
/**
|
|
6
|
+
* Returns the next color in the cycle. Wraps from the last color back to the
|
|
7
|
+
* first. Useful for "add note" flows that auto-assign colors in sequence.
|
|
8
|
+
*/
|
|
9
|
+
declare function nextStickyColor(color: StickyNoteColor): StickyNoteColor;
|
|
10
|
+
interface CreateStickyNoteOptions {
|
|
11
|
+
/** Color of the note. */
|
|
12
|
+
color: StickyNoteColor;
|
|
13
|
+
}
|
|
14
|
+
interface StickyNoteAPI {
|
|
15
|
+
/** Data attributes for styling hooks; spread onto the note container. */
|
|
16
|
+
dataAttributes: {
|
|
17
|
+
'data-color': StickyNoteColor;
|
|
18
|
+
};
|
|
19
|
+
/** ARIA props for the note container. */
|
|
20
|
+
ariaProps: {
|
|
21
|
+
role: 'group';
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Build the framework-agnostic props for a sticky note container.
|
|
26
|
+
*
|
|
27
|
+
* Returns `role="group"` plus the `data-color` attribute that adapters use
|
|
28
|
+
* as a styling hook. Logic is pure and SSR-safe — no Math.random, no Date.
|
|
29
|
+
*/
|
|
30
|
+
declare function createStickyNote(options: CreateStickyNoteOptions): StickyNoteAPI;
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Note container with color variant.
|
|
34
|
+
*
|
|
35
|
+
* Sticky notes are intrinsically colorful — an approved exception to the
|
|
36
|
+
* semantic-token-only rule. Each color maps to a soft tint background with a
|
|
37
|
+
* readable dark text.
|
|
38
|
+
*/
|
|
39
|
+
declare const stickyNoteVariants: (props?: ({
|
|
40
|
+
color?: "yellow" | "pink" | "blue" | "green" | "purple" | "orange" | undefined;
|
|
41
|
+
} & {
|
|
42
|
+
className?: string;
|
|
43
|
+
}) | undefined) => string;
|
|
44
|
+
/** Class for the editable/static text area inside the note. */
|
|
45
|
+
declare const stickyNoteTextClass = "flex-1 w-full resize-none bg-transparent text-sm leading-relaxed placeholder:opacity-60 outline-none";
|
|
46
|
+
/** Class for the author chip rendered in the note footer. */
|
|
47
|
+
declare const stickyNoteAuthorClass = "mt-auto text-xs font-medium opacity-70 truncate";
|
|
48
|
+
|
|
49
|
+
export { type CreateStickyNoteOptions, STICKY_NOTE_COLORS, type StickyNoteAPI, type StickyNoteColor, createStickyNote, nextStickyColor, stickyNoteAuthorClass, stickyNoteTextClass, stickyNoteVariants };
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
/** The semantic kind of a terminal output line. */
|
|
2
|
+
type TerminalLineKind = 'command' | 'stdout' | 'stderr' | 'info' | 'success';
|
|
3
|
+
/** A single line displayed in the terminal output panel. */
|
|
4
|
+
interface TerminalLine {
|
|
5
|
+
/** Optional stable key for list rendering. */
|
|
6
|
+
id?: string;
|
|
7
|
+
/** Semantic kind — drives styling and screen-reader announcements. */
|
|
8
|
+
kind: TerminalLineKind;
|
|
9
|
+
/** Text content of the line. */
|
|
10
|
+
text: string;
|
|
11
|
+
}
|
|
12
|
+
interface TerminalAPI {
|
|
13
|
+
/**
|
|
14
|
+
* ARIA attributes to spread on the terminal container element.
|
|
15
|
+
* - `role="log"` semantics: assistive technologies announce appended content.
|
|
16
|
+
* - `aria-live="polite"` so new output does not interrupt the user mid-action.
|
|
17
|
+
*/
|
|
18
|
+
ariaProps: {
|
|
19
|
+
role: 'log';
|
|
20
|
+
'aria-live': 'polite';
|
|
21
|
+
'aria-label'?: string;
|
|
22
|
+
};
|
|
23
|
+
/** Data attributes for styling hooks. */
|
|
24
|
+
dataAttributes: Record<string, string>;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Build the prompt string shown before a command line.
|
|
28
|
+
*
|
|
29
|
+
* @param promptSymbol - The shell prompt character(s), e.g. `'$'` or `'❯'`.
|
|
30
|
+
* @param command - The command text that follows the prompt.
|
|
31
|
+
* @returns The formatted prompt string, e.g. `'$ python solution.py'`.
|
|
32
|
+
*/
|
|
33
|
+
declare function formatPrompt(promptSymbol: string, command: string): string;
|
|
34
|
+
/**
|
|
35
|
+
* Build the framework-agnostic ARIA and data props for a terminal output panel.
|
|
36
|
+
*
|
|
37
|
+
* Returns `role="log"` (live region semantics for streaming output) plus data
|
|
38
|
+
* attributes; adapters spread these onto their scroll container.
|
|
39
|
+
*/
|
|
40
|
+
declare function createTerminal(options?: {
|
|
41
|
+
label?: string;
|
|
42
|
+
}): TerminalAPI;
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* The outer scroll container — a dark monospaced surface that houses all
|
|
46
|
+
* terminal lines. Uses semantic card tokens so it inherits the active theme.
|
|
47
|
+
*/
|
|
48
|
+
declare const terminalVariants: (props?: ({
|
|
49
|
+
maxHeight?: "sm" | "md" | "lg" | "none" | undefined;
|
|
50
|
+
} & {
|
|
51
|
+
className?: string;
|
|
52
|
+
}) | undefined) => string;
|
|
53
|
+
/**
|
|
54
|
+
* A single terminal line. The `kind` variant maps each semantic category to
|
|
55
|
+
* the appropriate semantic token class — no raw color values inline.
|
|
56
|
+
*/
|
|
57
|
+
declare const terminalLineVariants: (props?: ({
|
|
58
|
+
kind?: "command" | "stdout" | "stderr" | "info" | "success" | undefined;
|
|
59
|
+
} & {
|
|
60
|
+
className?: string;
|
|
61
|
+
}) | undefined) => string;
|
|
62
|
+
/** The prompt symbol (`$`, `❯`, …) preceding a command line. */
|
|
63
|
+
declare const terminalPromptClass = "select-none mr-2 text-muted-foreground";
|
|
64
|
+
|
|
65
|
+
export { type TerminalAPI, type TerminalLine, type TerminalLineKind, createTerminal, formatPrompt, terminalLineVariants, terminalPromptClass, terminalVariants };
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { AccessibilityProps } from '../shared/index.js';
|
|
2
|
+
|
|
3
|
+
/** The execution status of a single test case. */
|
|
4
|
+
type TestStatus = 'pass' | 'fail' | 'skip';
|
|
5
|
+
/** Data for a single test case result. */
|
|
6
|
+
interface TestResultData {
|
|
7
|
+
/** Unique identifier for the test. */
|
|
8
|
+
id: string;
|
|
9
|
+
/** Human-readable test name. */
|
|
10
|
+
name: string;
|
|
11
|
+
/** Execution status. */
|
|
12
|
+
status: TestStatus;
|
|
13
|
+
/** How long the test took to run, in milliseconds. */
|
|
14
|
+
durationMs?: number;
|
|
15
|
+
/** Expected value (shown in diff when the test fails). */
|
|
16
|
+
expected?: string;
|
|
17
|
+
/** Actual value received (shown in diff when the test fails). */
|
|
18
|
+
actual?: string;
|
|
19
|
+
/** Optional message — error message on failure, skip reason, etc. */
|
|
20
|
+
message?: string;
|
|
21
|
+
}
|
|
22
|
+
/** Aggregate counts derived from a list of test results. */
|
|
23
|
+
interface TestSummary {
|
|
24
|
+
total: number;
|
|
25
|
+
passed: number;
|
|
26
|
+
failed: number;
|
|
27
|
+
skipped: number;
|
|
28
|
+
/** True when every test passed (failed === 0 and skipped === 0). */
|
|
29
|
+
allPassed: boolean;
|
|
30
|
+
}
|
|
31
|
+
interface TestResultsAPI {
|
|
32
|
+
/** ARIA attributes to spread on the list container (`role="list"`). */
|
|
33
|
+
ariaProps: Partial<AccessibilityProps>;
|
|
34
|
+
/** Data attributes for styling hooks. */
|
|
35
|
+
dataAttributes: Record<string, string>;
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Compute aggregate summary counts from a list of {@link TestResultData}.
|
|
39
|
+
*
|
|
40
|
+
* Pure function — no side effects, safe to call during SSR.
|
|
41
|
+
*/
|
|
42
|
+
declare function summarizeTests(results: TestResultData[]): TestSummary;
|
|
43
|
+
/**
|
|
44
|
+
* Build the framework-agnostic container props for a test results list.
|
|
45
|
+
*
|
|
46
|
+
* Returns `role="list"` plus data attributes that adapters spread onto their
|
|
47
|
+
* container element. The adapter is responsible for rendering individual items
|
|
48
|
+
* with `role="listitem"`.
|
|
49
|
+
*/
|
|
50
|
+
declare function createTestResults(): TestResultsAPI;
|
|
51
|
+
|
|
52
|
+
/** Outer container that wraps the summary bar and the test row list. */
|
|
53
|
+
declare const testResultsContainerVariants: (props?: ({} & {
|
|
54
|
+
className?: string;
|
|
55
|
+
}) | undefined) => string;
|
|
56
|
+
/**
|
|
57
|
+
* Summary bar ("2 / 3 passed").
|
|
58
|
+
*
|
|
59
|
+
* The `outcome` variant maps to a semantic color token so the bar turns green
|
|
60
|
+
* when everything passes, red when there are failures.
|
|
61
|
+
*/
|
|
62
|
+
declare const testResultsSummaryVariants: (props?: ({
|
|
63
|
+
outcome?: "pass" | "fail" | "skip" | undefined;
|
|
64
|
+
} & {
|
|
65
|
+
className?: string;
|
|
66
|
+
}) | undefined) => string;
|
|
67
|
+
/** A single test row in the list. */
|
|
68
|
+
declare const testRowVariants: (props?: ({
|
|
69
|
+
status?: "pass" | "fail" | "skip" | undefined;
|
|
70
|
+
} & {
|
|
71
|
+
className?: string;
|
|
72
|
+
}) | undefined) => string;
|
|
73
|
+
/** Status icon / badge inside a test row (the PASS / FAIL / SKIP pill). */
|
|
74
|
+
declare const testStatusBadgeVariants: (props?: ({
|
|
75
|
+
status?: "pass" | "fail" | "skip" | undefined;
|
|
76
|
+
} & {
|
|
77
|
+
className?: string;
|
|
78
|
+
}) | undefined) => string;
|
|
79
|
+
/** Test name text inside a row. */
|
|
80
|
+
declare const testNameClass = "font-medium text-foreground";
|
|
81
|
+
/** Duration text ("12 ms") inside a row. */
|
|
82
|
+
declare const testDurationClass = "text-xs text-muted-foreground";
|
|
83
|
+
/**
|
|
84
|
+
* Expected / actual diff block shown beneath a failing test row.
|
|
85
|
+
*
|
|
86
|
+
* The `side` variant sets the left-border accent color to distinguish the two
|
|
87
|
+
* sides of the diff.
|
|
88
|
+
*/
|
|
89
|
+
declare const testDiffBlockVariants: (props?: ({
|
|
90
|
+
side?: "expected" | "actual" | undefined;
|
|
91
|
+
} & {
|
|
92
|
+
className?: string;
|
|
93
|
+
}) | undefined) => string;
|
|
94
|
+
/** Error / skip message text beneath a test row. */
|
|
95
|
+
declare const testMessageClass = "text-xs text-muted-foreground italic";
|
|
96
|
+
|
|
97
|
+
export { type TestResultData, type TestResultsAPI, type TestStatus, type TestSummary, createTestResults, summarizeTests, testDiffBlockVariants, testDurationClass, testMessageClass, testNameClass, testResultsContainerVariants, testResultsSummaryVariants, testRowVariants, testStatusBadgeVariants };
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import { AccessibilityProps } from '../shared/index.js';
|
|
2
|
+
|
|
3
|
+
/** Layout orientation of the timeline. */
|
|
4
|
+
type TimelineOrientation = 'vertical' | 'horizontal';
|
|
5
|
+
/** Visual status of a single timeline item. */
|
|
6
|
+
type TimelineItemStatus = 'done' | 'current' | 'upcoming' | 'default';
|
|
7
|
+
/** Data describing a single event in the timeline. */
|
|
8
|
+
interface TimelineItemData {
|
|
9
|
+
/** Unique identifier for the item. */
|
|
10
|
+
id: string;
|
|
11
|
+
/** Primary label shown beside the marker. */
|
|
12
|
+
title: string;
|
|
13
|
+
/** Optional timestamp / date string shown near the marker. */
|
|
14
|
+
time?: string;
|
|
15
|
+
/** Additional detail text rendered below the title. */
|
|
16
|
+
description?: string;
|
|
17
|
+
/** Visual status of this item. Defaults to `'default'` when omitted. */
|
|
18
|
+
status?: TimelineItemStatus;
|
|
19
|
+
}
|
|
20
|
+
interface TimelineProps {
|
|
21
|
+
/** Ordered list of events to display. */
|
|
22
|
+
items: TimelineItemData[];
|
|
23
|
+
/** Layout direction. */
|
|
24
|
+
orientation?: TimelineOrientation;
|
|
25
|
+
}
|
|
26
|
+
interface TimelineAPI {
|
|
27
|
+
/** ARIA attributes to spread on the list container (`role="list"`). */
|
|
28
|
+
ariaProps: Partial<AccessibilityProps>;
|
|
29
|
+
/** Data attributes for styling hooks. */
|
|
30
|
+
dataAttributes: Record<string, string>;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Build the framework-agnostic container props for a timeline.
|
|
34
|
+
*
|
|
35
|
+
* Returns `role="list"` (the items carry `role="listitem"`) plus a
|
|
36
|
+
* `data-orientation` attribute. The function is JSX-free so it can run in
|
|
37
|
+
* any environment including server-side Node and Astro SSR.
|
|
38
|
+
*/
|
|
39
|
+
declare function createTimeline(props?: Pick<TimelineProps, 'orientation'>): TimelineAPI;
|
|
40
|
+
/**
|
|
41
|
+
* Accessibility props for a single timeline item.
|
|
42
|
+
*
|
|
43
|
+
* Every item gets `role="listitem"` regardless of status so screen readers
|
|
44
|
+
* announce the full list correctly.
|
|
45
|
+
*/
|
|
46
|
+
declare function getTimelineItemAria(): Partial<AccessibilityProps>;
|
|
47
|
+
/**
|
|
48
|
+
* Normalise a raw list of timeline items so every entry has an explicit
|
|
49
|
+
* `status`. Items without a status receive `'default'`.
|
|
50
|
+
*
|
|
51
|
+
* This is the single source of truth shared by every adapter — call it once
|
|
52
|
+
* at render time and iterate over the result.
|
|
53
|
+
*/
|
|
54
|
+
declare function resolveTimelineItems(items: TimelineItemData[]): Required<TimelineItemData>[];
|
|
55
|
+
|
|
56
|
+
/**
|
|
57
|
+
* Outer rail / list container.
|
|
58
|
+
*
|
|
59
|
+
* Vertical: a single column; horizontal: a row so items sit side-by-side.
|
|
60
|
+
*/
|
|
61
|
+
declare const timelineVariants: (props?: ({
|
|
62
|
+
orientation?: "vertical" | "horizontal" | undefined;
|
|
63
|
+
} & {
|
|
64
|
+
className?: string;
|
|
65
|
+
}) | undefined) => string;
|
|
66
|
+
/**
|
|
67
|
+
* A single event row / column.
|
|
68
|
+
*
|
|
69
|
+
* In vertical mode items stack with a left gutter for the marker + connector.
|
|
70
|
+
* In horizontal mode each item takes equal width and the connector runs above.
|
|
71
|
+
*/
|
|
72
|
+
declare const timelineItemVariants: (props?: ({
|
|
73
|
+
orientation?: "vertical" | "horizontal" | undefined;
|
|
74
|
+
} & {
|
|
75
|
+
className?: string;
|
|
76
|
+
}) | undefined) => string;
|
|
77
|
+
/**
|
|
78
|
+
* The marker / dot that represents the event on the rail.
|
|
79
|
+
*
|
|
80
|
+
* Status variants map directly to semantic token colours so theming is
|
|
81
|
+
* handled at the design-token level, not inline.
|
|
82
|
+
*/
|
|
83
|
+
declare const timelineMarkerVariants: (props?: ({
|
|
84
|
+
status?: "done" | "current" | "upcoming" | "default" | undefined;
|
|
85
|
+
} & {
|
|
86
|
+
className?: string;
|
|
87
|
+
}) | undefined) => string;
|
|
88
|
+
/**
|
|
89
|
+
* The connector line drawn between adjacent markers.
|
|
90
|
+
*
|
|
91
|
+
* Vertical: a thin vertical stripe anchored to the left gutter.
|
|
92
|
+
* Horizontal: a thin horizontal stripe anchored above the content row.
|
|
93
|
+
* The last item hides its connector so the rail terminates cleanly.
|
|
94
|
+
*/
|
|
95
|
+
declare const timelineConnectorVariants: (props?: ({
|
|
96
|
+
orientation?: "vertical" | "horizontal" | undefined;
|
|
97
|
+
} & {
|
|
98
|
+
className?: string;
|
|
99
|
+
}) | undefined) => string;
|
|
100
|
+
/** Wrapper that holds the marker + connector in the gutter column/row. */
|
|
101
|
+
declare const timelineGutterClass = "relative flex flex-col items-center";
|
|
102
|
+
/** Time / date label rendered near the marker. */
|
|
103
|
+
declare const timelineTimeClass = "text-xs text-muted-foreground tabular-nums";
|
|
104
|
+
/** Primary event title. */
|
|
105
|
+
declare const timelineTitleClass = "text-sm font-medium text-foreground leading-snug";
|
|
106
|
+
/** Secondary description text. */
|
|
107
|
+
declare const timelineDescriptionClass = "mt-0.5 text-xs text-muted-foreground leading-relaxed";
|
|
108
|
+
/** Content block (title + description) next to or below the marker. */
|
|
109
|
+
declare const timelineContentClass = "flex flex-col min-w-0";
|
|
110
|
+
|
|
111
|
+
export { type TimelineAPI, type TimelineItemData, type TimelineItemStatus, type TimelineOrientation, type TimelineProps, createTimeline, getTimelineItemAria, resolveTimelineItems, timelineConnectorVariants, timelineContentClass, timelineDescriptionClass, timelineGutterClass, timelineItemVariants, timelineMarkerVariants, timelineTimeClass, timelineTitleClass, timelineVariants };
|