@iamfiro/design 0.0.0-stage → 0.3.0

package/lib/types/components/FunnelChart/FunnelChart.d.ts

@@ -0,0 +1,38 @@
+import { type CSSProperties } from 'react';
+import { type FunnelCalculateFrom, type FunnelStep } from './funnel';
+import './FunnelChart.css';
+export interface FunnelChartProps {
+    /** Steps in order (방문 → 가입 → …). Values below 0 count as 0. */
+    data: FunnelStep[];
+    /** horizontal: a row per step, widths follow the value · vertical: a column per step, heights follow the value. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Conversion shown on each step: share of the first step, or of the step before it. */
+    calculateFrom?: FunnelCalculateFrom;
+    /** Bar colour (CSS variable or any color). */
+    color?: string;
+    /** Steps walk down the single-hue `--chart-seq-*` ramp instead of one colour. */
+    gradient?: boolean;
+    /** The lost part between steps as a hatched, soft area. */
+    showDropOff?: boolean;
+    /** Plot height in px (vertical). */
+    height?: number;
+    /** Bar thickness in px (horizontal). */
+    barSize?: number;
+    formatValue?: (value: number, step: FunnelStep) => string;
+    formatPercent?: (ratio: number) => string;
+    /** Small key under the plot: 전환 (solid) · 이탈 (hatched). */
+    legend?: boolean;
+    /** Highlighted step (controlled). */
+    activeIndex?: number | null;
+    defaultActiveIndex?: number | null;
+    onActiveIndexChange?: (index: number | null) => void;
+    'aria-label'?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A conversion funnel: one bar per step sized by its value, the step's conversion beside it and the
+ * drop-off since the step before as a hatched soft area. Bars grow in one after another and morph
+ * when the data changes; hover, touch or arrow keys show a Card with value, conversion and drop-off.
+ */
+export declare function FunnelChart({ data, orientation, calculateFrom, color, gradient, showDropOff, height, barSize, formatValue, formatPercent, legend, activeIndex, defaultActiveIndex, onActiveIndexChange, 'aria-label': ariaLabel, className, style, }: FunnelChartProps): import("react").JSX.Element;

package/lib/types/components/FunnelChart/funnel.d.ts

@@ -0,0 +1,25 @@
+export interface FunnelStep {
+    key: string;
+    label: string;
+    value: number;
+    /** CSS variable (`--chart-2`) or any color. Overrides the chart `color` / `gradient` for this step. */
+    color?: string;
+}
+export type FunnelCalculateFrom = 'first' | 'previous';
+export interface FunnelStepStats extends FunnelStep {
+    /** Share of the first step's value (1 for the first step). */
+    fromFirst: number;
+    /** Share of the previous step's value (1 for the first step). */
+    fromPrevious: number;
+    /** The ratio picked by `calculateFrom`. */
+    conversion: number;
+    /** How many were lost since the previous step (0 for the first step). */
+    drop: number;
+    /** `drop` as a share of the previous step. */
+    dropRate: number;
+}
+export declare function funnelStats(data: FunnelStep[], calculateFrom: FunnelCalculateFrom): FunnelStepStats[];
+/** A rect with only the right corners rounded (horizontal bars grow from the left). Same command list for any size, so `d` can morph. */
+export declare function hBarPath(x: number, y: number, w: number, h: number, r: number): string;
+/** Rough rendered width of a label: wide glyphs (Hangul, CJK) ~13px, others ~7.5px at the label roles. */
+export declare const estimateTextWidth: (text: string) => number;

package/lib/types/components/Highlight/Highlight.d.ts

@@ -0,0 +1,35 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import './Highlight.css';
+export type HighlightTone = 'warning' | 'accent' | 'danger';
+export interface HighlightProps {
+    /** The marked text (or a MaskedText). */
+    children: ReactNode;
+    tone?: HighlightTone;
+    /** Body of the annotation callout. Without it the highlight is a plain mark. */
+    note?: ReactNode;
+    /** Overline title of the callout ("확인 필요"), in the tone color. */
+    noteTitle?: ReactNode;
+    /** Icon before the title. Defaults per tone (warning triangle, danger circle, accent info). */
+    noteIcon?: ReactNode;
+    /** Small line under the body, usually a Badge naming the source. */
+    noteFooter?: ReactNode;
+    /** hover: opens on hover (with intent delay) or keyboard focus, press toggles ·
+     *  always: the callout stays open, pinned to the text. */
+    openOn?: 'hover' | 'always';
+    /** Controlled open state (hover mode). */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Callout width in px. */
+    noteWidth?: number;
+    align?: 'start' | 'center' | 'end';
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Inline text on a soft tone background. With `note` it anchors an annotation callout (a Popover)
+ * — icon + overline title in the tone color, body, optional footer chip. The mark is focusable and
+ * `aria-describedby` points at an always-present copy of the note, so the description is read
+ * whether or not the callout is open.
+ */
+export declare function Highlight({ children, tone, note, noteTitle, noteIcon, noteFooter, openOn, open: openProp, defaultOpen, onOpenChange, noteWidth, align, className, style, }: HighlightProps): import("react").JSX.Element;

package/lib/types/components/HoverCard/HoverCard.d.ts

@@ -0,0 +1,47 @@
+import { type ReactNode } from 'react';
+export interface HoverCardMetaItem {
+    /** A 14px icon (e.g. `<Star size={14} />`). */
+    icon?: ReactNode;
+    label: ReactNode;
+}
+export interface HoverCardProps {
+    /** What you hover: a name, a link, a repo chip. */
+    trigger: ReactNode;
+    /** Media across the top (a link preview image in `AspectRatio`). */
+    media?: ReactNode;
+    /** Avatar · IconTile · logo before the title. */
+    leading?: ReactNode;
+    title?: ReactNode;
+    /** One muted line under the title (role, handle, domain). */
+    subtitle?: ReactNode;
+    /** A few muted lines; clamped to three. */
+    description?: ReactNode;
+    /** A row of small facts — items with an icon, or your own nodes. */
+    meta?: HoverCardMetaItem[] | ReactNode;
+    /** Free content below the structured part. */
+    children?: ReactNode;
+    /** Buttons at the bottom (Follow, Open). */
+    actions?: ReactNode;
+    /** Placeholder shapes while the preview loads. */
+    loading?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    align?: 'start' | 'center' | 'end';
+    /** Card width in px (or any CSS width). */
+    width?: number | string;
+    /**
+     * Touch has no hover. tap: the first tap opens the card instead of activating the trigger (a
+     * second tap goes through). none: taps behave as usual and the card is mouse / keyboard only.
+     */
+    touch?: 'tap' | 'none';
+    /** Name of the card; defaults to `title` when it's text. */
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * A rich preview that appears while resting on a name, link or reference — built on
+ * `Popover openOn="hover"`: opens after the hover intent delay, survives a short grace period on
+ * the way to the card, opens at once on keyboard focus, and on touch opens with the first tap.
+ */
+export declare function HoverCard({ trigger, media, leading, title, subtitle, description, meta, children, actions, loading, open: openProp, defaultOpen, onOpenChange, align, width, touch, 'aria-label': ariaLabel, className, }: HoverCardProps): import("react").JSX.Element;

package/lib/types/components/InlineDiff/InlineDiff.d.ts

@@ -0,0 +1,36 @@
+import { type CSSProperties } from 'react';
+import { type TextVariant } from '../../primitives';
+import type { DiffDecisions, DiffSegment } from './diff';
+import { type DiffReview } from './useDiffReview';
+import './InlineDiff.css';
+export interface InlineDiffProps {
+    /** Tracked changes as segments: `{ type: 'equal' | 'insert' | 'delete', text, changeId? }`. */
+    changes?: DiffSegment[];
+    /** Or two strings, diffed word by word (when `changes` is not given). */
+    before?: string;
+    after?: string;
+    /**
+     * Shared review state from `useDiffReview` — pass it when a toolbar outside shows the remaining
+     * count, prev / next or 모두 수락. The diff then reads its segments and decisions from it.
+     */
+    review?: DiffReview;
+    /** Each change can be pressed to accept or reject it. Default: true with `review`, otherwise false. */
+    reviewable?: boolean;
+    /** Controlled decisions per change id (without `review`). */
+    decisions?: DiffDecisions;
+    defaultDecisions?: DiffDecisions;
+    onDecisionsChange?: (decisions: DiffDecisions) => void;
+    /** Type role of the text. */
+    variant?: TextVariant;
+    as?: 'p' | 'div' | 'span';
+    'aria-label'?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Text with inline tracked changes: deletions struck through in red, insertions in green, each on a
+ * soft tint, as real `<del>` / `<ins>` with screen-reader labels. With `reviewable` every change opens
+ * a small accept / reject popover; an accepted change collapses to the new text, a rejected one to
+ * the old text. Arrow keys move between changes (roving tabindex), Enter opens the popover.
+ */
+export declare function InlineDiff({ changes, before, after, review: external, reviewable, decisions, defaultDecisions, onDecisionsChange, variant, as, 'aria-label': ariaLabel, className, style, }: InlineDiffProps): import("react").JSX.Element;

package/lib/types/components/InlineDiff/diff.d.ts

@@ -0,0 +1,42 @@
+export type DiffSegmentType = 'equal' | 'insert' | 'delete';
+/** One run of text in a tracked-changes paragraph. */
+export interface DiffSegment {
+    type: DiffSegmentType;
+    text: string;
+    /**
+     * Groups a delete + insert pair into one change ("18" → "21"). Optional: adjacent insert / delete
+     * segments without an id are grouped automatically.
+     */
+    changeId?: string;
+}
+/** A segment after grouping (`resolveDiffSegments`): every insert / delete has a `changeId`. */
+export type ResolvedDiffSegment = DiffSegment;
+export type DiffDecision = 'accepted' | 'rejected';
+/** Decision per change id. A change that isn't in the map is still pending. */
+export type DiffDecisions = Record<string, DiffDecision>;
+/** One reviewable change: the text it removes and the text it adds. */
+export interface DiffChange {
+    id: string;
+    deleted: string;
+    inserted: string;
+}
+export declare function tokenizeWords(text: string): string[];
+/**
+ * A word-level diff of two strings (longest common subsequence over word tokens). Whitespace is
+ * kept exactly; a lone space between two changes is folded into them, and each run of changes
+ * becomes one delete followed by one insert, so "stayed flat at 2." → "fell to" reads as a single
+ * replacement instead of word-by-word confetti.
+ */
+export declare function diffWords(before: string, after: string): DiffSegment[];
+/**
+ * Gives every insert / delete a `changeId`. Segments keep an id they already have; one without an
+ * id joins the change right before it when the two are adjacent, otherwise it starts a new one.
+ */
+export declare function resolveDiffSegments(segments: DiffSegment[]): ResolvedDiffSegment[];
+/** The changes in reading order, with the text each one removes and adds. */
+export declare function listDiffChanges(segments: ResolvedDiffSegment[]): DiffChange[];
+/**
+ * The text with decisions applied: accepted changes read as the new text, rejected ones as the old
+ * text, and pending ones as `pending` says (default: the new text).
+ */
+export declare function applyDiffDecisions(segments: DiffSegment[], decisions: DiffDecisions, pending?: 'before' | 'after'): string;

package/lib/types/components/InlineDiff/useDiffReview.d.ts

@@ -0,0 +1,57 @@
+import { type DiffChange, type DiffDecision, type DiffDecisions, type DiffSegment, type ResolvedDiffSegment } from './diff';
+export interface DiffReviewOptions {
+    /** The tracked changes as segments. */
+    changes?: DiffSegment[];
+    /** Or two strings, diffed word by word (used when `changes` is not given). */
+    before?: string;
+    after?: string;
+    /** Controlled decisions per change id. */
+    decisions?: DiffDecisions;
+    defaultDecisions?: DiffDecisions;
+    onDecisionsChange?: (decisions: DiffDecisions) => void;
+    /** After accepting or rejecting a change, move to the next pending one. Default true. */
+    advance?: boolean;
+}
+export interface DiffReview {
+    /** Segments with every insert / delete grouped under a `changeId`. */
+    segments: ResolvedDiffSegment[];
+    /** The changes in reading order. */
+    changes: DiffChange[];
+    decisions: DiffDecisions;
+    /** Pending (undecided) changes. */
+    remaining: number;
+    total: number;
+    /** The focused change, or null before any navigation. */
+    current: string | null;
+    /** Position of `current` among all changes, or -1. */
+    currentIndex: number;
+    /** The text with decisions applied (pending changes read as the new text). */
+    text: string;
+    /** Bumps on every navigation (`next`, `prev`, `goTo`, advancing) so a view can scroll to `current`. */
+    navToken: number;
+    getDecision: (id: string) => DiffDecision | 'pending';
+    /** Makes a change current without scrolling (a press or focus on it). */
+    setCurrent: (id: string | null) => void;
+    /** Makes a change current and scrolls it into view. */
+    goTo: (id: string) => void;
+    /** Next / previous pending change (all changes once none are pending), wrapping around. */
+    next: () => void;
+    prev: () => void;
+    /** null puts the change back to pending. */
+    decide: (id: string, decision: DiffDecision | null) => void;
+    /** Accept / reject a change; defaults to the current one. */
+    accept: (id?: string) => void;
+    reject: (id?: string) => void;
+    /** Every pending change; decided ones are left alone. */
+    acceptAll: () => void;
+    rejectAll: () => void;
+    setDecisions: (decisions: DiffDecisions) => void;
+    /** Everything back to pending. */
+    reset: () => void;
+}
+/**
+ * Review state for tracked changes: decisions (controlled or not), the current change and
+ * navigation. Pass the result to `<InlineDiff review>` and build a toolbar from the same object
+ * (remaining count, prev / next, 모두 거절 / 모두 수락).
+ */
+export declare function useDiffReview({ changes: input, before, after, decisions: decisionsProp, defaultDecisions, onDecisionsChange, advance, }?: DiffReviewOptions): DiffReview;

package/lib/types/components/Kanban/Kanban.d.ts

@@ -0,0 +1,64 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type KanbanCardProps } from './KanbanCard';
+import { type KanbanItem, type KanbanMove, type KanbanValue } from './move';
+import './Kanban.css';
+export interface KanbanColumn {
+    id: string;
+    title: ReactNode;
+    /** Plain name for screen-reader announcements when `title` isn't a string. */
+    label?: string;
+    description?: ReactNode;
+    /** Small dot before the title: a CSS variable name (`--chart-1`) or a color. */
+    color?: string;
+    /** WIP limit. The count turns orange at the limit and red past it. */
+    limit?: number;
+    /** block: a full column refuses cards from other columns · warn (default): only shows it. */
+    limitMode?: 'warn' | 'block';
+}
+export interface KanbanCardState {
+    /** The floating copy that follows the pointer. */
+    dragging: boolean;
+    /** Picked up with the keyboard and moving with the arrow keys. */
+    lifted: boolean;
+}
+export interface KanbanBoardProps<T extends KanbanItem = KanbanItem & KanbanCardProps> {
+    columns: KanbanColumn[];
+    value?: KanbanValue<T>;
+    defaultValue?: KanbanValue<T>;
+    /** Called once when a move is committed (pointer release, Space / Enter), never while previewing. */
+    onValueChange?: (next: KanbanValue<T>, move: KanbanMove<T>) => void;
+    /**
+     * Whether a card may go to a place. Return a string to refuse with a reason — it's shown in the
+     * column while the card hovers over it. Moves inside the same column are always allowed.
+     */
+    canMove?: (move: KanbanMove<T>) => boolean | string;
+    /** Card face. Defaults to `<KanbanCard {...item} />`. */
+    renderCard?: (item: T, state: KanbanCardState) => ReactNode;
+    /** Click, or Enter on a focused card. */
+    onCardOpen?: (item: T) => void;
+    /** Shows "카드 추가" at the bottom of each column; Enter adds and keeps the field open for the next one. */
+    onCardAdd?: (columnId: string, title: string) => void;
+    /** Trailing buttons or a menu in each column header. */
+    columnActions?: (column: KanbanColumn) => ReactNode;
+    /** Name of a card in announcements. Defaults to a string `title`, else the id. */
+    getItemLabel?: (item: T) => string;
+    /** Column width in px. */
+    columnWidth?: number;
+    /** Shown in an empty column. */
+    emptyLabel?: ReactNode;
+    'aria-label'?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A board of columns whose cards move by drag or keyboard.
+ *
+ * - Pointer: a press past `TIMING.dragThreshold` (touch: a `TIMING.longPress` hold) lifts a floating
+ *   copy; a gap opens where it would land and the other cards slide aside. Release commits and the
+ *   copy flies into its slot; Esc or a refusing column sends it home. Near a scroll edge the board and
+ *   the column scroll faster the closer the pointer gets.
+ * - Keyboard: arrows move focus, Space lifts, arrows move the card, Space / Enter drops, Esc cancels.
+ *   Every step is announced.
+ * - Every layout change (preview, commit, cancel) animates from the old position (FLIP).
+ */
+export declare function KanbanBoard<T extends KanbanItem = KanbanItem & KanbanCardProps>({ columns, value: valueProp, defaultValue, onValueChange, canMove, renderCard, onCardOpen, onCardAdd, columnActions, getItemLabel, columnWidth, emptyLabel, 'aria-label': ariaLabel, className, style, }: KanbanBoardProps<T>): import("react").JSX.Element;

package/lib/types/components/Kanban/KanbanCard.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+import { type Tone } from '../../primitives';
+export interface KanbanLabel {
+    label: ReactNode;
+    tone?: Tone;
+}
+export interface KanbanCardProps {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Small status / category badges above the title. */
+    labels?: KanbanLabel[];
+    /** People on the card, shown as overlapping avatars at the bottom right. */
+    assignees?: string[];
+    /** Due date text ("10월 28일"). */
+    due?: ReactNode;
+    /** warning: due soon · danger: overdue. */
+    dueTone?: 'default' | 'warning' | 'danger';
+    /** Checklist progress; turns green when everything is done. */
+    checklist?: {
+        done: number;
+        total: number;
+    };
+    comments?: number;
+    attachments?: number;
+    /** Anything else for the bottom row. */
+    meta?: ReactNode;
+    /** The card is the floating copy under the pointer. */
+    dragging?: boolean;
+}
+/**
+ * The default card face for KanbanBoard: labels, title, a clamped description and a bottom row of
+ * facts (due date · checklist · comments · files) with assignees on the right. Assembled from
+ * Card / Stack / Inline / Text / Badge only.
+ */
+export declare function KanbanCard({ title, description, labels, assignees, due, dueTone, checklist, comments, attachments, meta, dragging, }: KanbanCardProps): import("react").JSX.Element;

package/lib/types/components/Kanban/move.d.ts

@@ -0,0 +1,25 @@
+export interface KanbanItem {
+    id: string;
+}
+/** Column id → its cards, top to bottom. */
+export type KanbanValue<T extends KanbanItem = KanbanItem> = Record<string, T[]>;
+export interface KanbanPosition {
+    columnId: string;
+    /** Index in the column with the moved card taken out. */
+    index: number;
+}
+export interface KanbanMove<T extends KanbanItem = KanbanItem> {
+    item: T;
+    from: KanbanPosition;
+    to: KanbanPosition;
+}
+/** The board with one card moved to `to` (index counted without the card). */
+export declare function moveKanbanItem<T extends KanbanItem>(value: KanbanValue<T>, id: string, to: KanbanPosition): KanbanValue<T>;
+/** The card with this id and where it is. */
+export declare function locateKanbanItem<T extends KanbanItem>(value: KanbanValue<T>, id: string): {
+    item: T;
+    position: {
+        columnId: string;
+        index: number;
+    };
+} | null;

package/lib/types/components/LineChart/LineChart.d.ts

@@ -0,0 +1,85 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type ChartRow, type ChartSeries, type ChartTone } from '../Chart/chart';
+import './LineChart.css';
+export type LineSeries = ChartSeries;
+export type LineChartRow = ChartRow;
+/** A highlighted x range behind the plot, from row index `from` to row index `to`. */
+export interface LineChartBand {
+    from: number;
+    to: number;
+    /** Soft fill. Defaults to `warning`. */
+    tone?: ChartTone;
+}
+/** A dashed horizontal line at `value` (threshold, target). */
+export interface LineChartReferenceLine {
+    value: number;
+    /** Small text at the right end, above the line. */
+    label?: string;
+    /** Line and label color. Defaults to `neutral`. */
+    tone?: ChartTone;
+}
+export interface LineChartProps {
+    data: LineChartRow[];
+    /** Field used for the x axis (a label per row, e.g. '3월 6일'). */
+    xKey: string;
+    series: LineSeries[];
+    /** Plot height in px (axis labels included). */
+    height?: number;
+    /** linear: straight segments · smooth: monotone curve that never overshoots the data. */
+    curve?: 'linear' | 'smooth';
+    /** Fill under each line: `true`/`'gradient'` fades downward, `'solid'` is one flat soft tint. */
+    area?: boolean | 'gradient' | 'solid';
+    /**
+     * Pile the series on top of each other: `stacked` adds the values, `percent` scales every row to
+     * 100% (y axis 0–1, tooltip shows shares). Missing values count as 0 in a stack.
+     */
+    stack?: 'stacked' | 'percent';
+    /** Draw straight across `null` gaps instead of breaking the line. */
+    connectNulls?: boolean;
+    /** Footer row with the sum of the row. Defaults to on for stacks. */
+    showTotal?: boolean;
+    /** Number of y-axis labels, 0 included. */
+    yTickCount?: number;
+    /** Force the top of the y axis; otherwise a round number above the largest value. */
+    yMax?: number;
+    /** Exact y-axis values (e.g. `[0, 12, 24]`); overrides `yTickCount` and `yMax`. */
+    yTicks?: number[];
+    /** auto: evenly spaced labels · edges: only the first and last row (e.g. '96초 전' … '지금'). */
+    xTicks?: 'auto' | 'edges';
+    /** Highlighted x ranges behind the plot. */
+    bands?: LineChartBand[];
+    /** Dashed horizontal lines (thresholds, targets). */
+    referenceLines?: LineChartReferenceLine[];
+    /** A dot on the last point of each line; `'pulse'` adds a repeating ring (live data). */
+    endDot?: boolean | 'pulse';
+    /**
+     * Each data change appends a row and drops the oldest (sliding window): the plot slides left by one
+     * step instead of morphing. A number sets the slide in ms — pass the update interval for a continuous scroll.
+     */
+    streaming?: boolean | number;
+    /** Value in the tooltip. Defaults to `1,234`. */
+    formatValue?: (value: number, series: LineSeries) => string;
+    /** Y-axis labels. Defaults to compact Korean (`6천`, `1.2만`), or `45%` for `stack="percent"`. */
+    formatAxisValue?: (value: number) => string;
+    /** X-axis labels. Defaults to the raw `xKey` value. */
+    formatX?: (row: LineChartRow, index: number) => string;
+    /** Tooltip heading. Defaults to `formatX`. */
+    formatTitle?: (row: LineChartRow, index: number) => ReactNode;
+    /** Tooltip row order: biggest value first, the order of `series`, or `reverse` (top of a stack first; the default for stacks). */
+    tooltipSort?: 'value' | 'series' | 'reverse';
+    /** Legend under the plot. Hovering an entry highlights its line. */
+    legend?: boolean;
+    /** Highlighted row (controlled). `null` = nothing highlighted. */
+    activeIndex?: number | null;
+    defaultActiveIndex?: number | null;
+    onActiveIndexChange?: (index: number | null) => void;
+    /** Accessible name of the chart. */
+    'aria-label'?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A multi-series line (or area) chart. Hover, touch or arrow keys move a guide across the rows; a
+ * raised Card follows it with every series' value, flipping sides near the right edge.
+ */
+export declare function LineChart({ data, xKey, series, height, curve, area, stack, connectNulls, showTotal, yTickCount, yMax, yTicks, xTicks, bands, referenceLines, endDot, streaming, formatValue, formatAxisValue, formatX, formatTitle, tooltipSort, legend, activeIndex, defaultActiveIndex, onActiveIndexChange, 'aria-label': ariaLabel, className, style, }: LineChartProps): import("react").JSX.Element;

package/lib/types/components/List/List.d.ts

@@ -0,0 +1,62 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import './List.css';
+export interface ListProps {
+    children: ReactNode;
+    /** plain: rows on the page · inset: rows grouped on a white card. */
+    variant?: 'plain' | 'inset';
+    density?: 'compact' | 'default' | 'comfortable';
+    /** A heading above the rows (e.g. "멤버 6명"). */
+    label?: ReactNode;
+    /** Rows rise in when added (and fold away when a row is `leaving`). For lists that change while you look. */
+    animated?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+}
+/** Rows of people, files, settings… separated by spacing, never by lines. */
+export declare function List({ children, variant, density, label, animated, className, style, 'aria-label': ariaLabel }: ListProps): import("react").JSX.Element;
+export declare namespace List {
+    var Item: typeof ListItem;
+}
+export interface ListItemProps {
+    /** Main line. */
+    title: ReactNode;
+    /** Second line in gray. */
+    description?: ReactNode;
+    /** Avatar, icon or thumbnail on the left. */
+    leading?: ReactNode;
+    /** Small gray text on the right (time, size, count). */
+    meta?: ReactNode;
+    /** Controls on the right: buttons, a switch, a badge, a menu. */
+    trailing?: ReactNode;
+    /** Makes the whole row a link. */
+    href?: string;
+    /** Makes the whole row a button (Enter / Space work too). */
+    onClick?: () => void;
+    /** Shows a › at the end of clickable rows that open something. */
+    chevron?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    /** Where the leading / trailing parts sit when the text runs to several lines. */
+    align?: 'center' | 'start';
+    /** Folds the row to zero height (play this, then unmount). Content below slides up. */
+    leaving?: boolean;
+    /**
+     * default: a selected row gets the gray fill · raised: a selected row becomes a white card
+     * with a soft lift — for lists on a soft gray panel (the list side of a SplitView).
+     */
+    variant?: 'default' | 'raised';
+    /**
+     * 0–1: a soft fill grows behind the row's content from the left (a job's progress inside its row).
+     * The width animates as it changes. Say the progress in the text too; the fill is decorative.
+     */
+    progress?: number;
+    /** Color of the `progress` fill. */
+    progressTone?: 'accent' | 'success' | 'warning' | 'danger' | 'neutral';
+    className?: string;
+}
+/**
+ * One row. With `href` / `onClick` the whole row is pressable; controls in `trailing`
+ * still work on their own and don't trigger the row.
+ */
+export declare function ListItem({ title, description, leading, meta, trailing, href, onClick, chevron, selected, disabled, align, leaving, variant, progress, progressTone, className, }: ListItemProps): import("react").JSX.Element;

package/lib/types/components/Listbox/Listbox.d.ts

@@ -0,0 +1,60 @@
+import { type CSSProperties, type ReactNode, type RefObject } from 'react';
+import { type FloatingOptions } from '../../hooks';
+import './Listbox.css';
+/** One choice in a Select / Combobox. */
+export interface ListOption<V extends string = string> {
+    value: V;
+    label: string;
+    description?: ReactNode;
+    icon?: ReactNode;
+    /** Short muted text at the right end of the row (a dial code, a count). */
+    meta?: ReactNode;
+    disabled?: boolean;
+    /** Options sharing a group name are listed under one heading (keep them adjacent). */
+    group?: string;
+    /** Extra terms the Combobox filter matches on (aliases, English names, …). */
+    keywords?: string[];
+}
+export interface OptionState {
+    active: boolean;
+    selected: boolean;
+    disabled: boolean;
+}
+/** A trailing row that is not a value, e.g. "'foo' 추가". */
+export interface ListAction {
+    label: ReactNode;
+    icon?: ReactNode;
+    onSelect: () => void;
+}
+export declare const optionId: (listId: string, index: number) => string;
+type Navigable = {
+    disabled?: boolean;
+};
+export declare function nextEnabled(items: Navigable[], from: number, dir: 1 | -1): number;
+export declare const firstEnabled: (items: Navigable[]) => number;
+export declare function lastEnabled(items: Navigable[]): number;
+export interface ListboxPopoverProps extends FloatingOptions {
+    anchorRef: RefObject<HTMLElement | null>;
+    /** Playing the exit animation (see usePresence); the panel ignores the pointer meanwhile. */
+    closing?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+export declare const ListboxPopover: import("react").ForwardRefExoticComponent<ListboxPopoverProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface ListboxProps<V extends string> {
+    id: string;
+    options: ListOption<V>[];
+    activeIndex: number;
+    isSelected: (value: V) => boolean;
+    onSelect: (option: ListOption<V>) => void;
+    onActiveChange: (index: number) => void;
+    multiple?: boolean;
+    renderOption?: (option: ListOption<V>, state: OptionState) => ReactNode;
+    /** Shown when there are no options and no action. */
+    emptyText?: ReactNode;
+    action?: ListAction;
+    style?: CSSProperties;
+    'aria-label'?: string;
+}
+export declare function Listbox<V extends string>({ id, options, activeIndex, isSelected, onSelect, onActiveChange, multiple, renderOption, emptyText, action, style, 'aria-label': ariaLabel, }: ListboxProps<V>): import("react").JSX.Element;
+export {};

package/lib/types/components/Marker/Marker.d.ts

@@ -0,0 +1,28 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type DateInput, type Tone } from '../../primitives';
+import './Marker.css';
+export type MarkerTone = Tone;
+export interface MarkerProps {
+    /** A 16px icon that says what happened (UserPlus, GitMerge, Pin). */
+    icon?: ReactNode;
+    /** Icon colour. neutral (muted, like the text) for most events; a status colour when the event carries one (merged = success). */
+    tone?: MarkerTone;
+    /** What happened, in one muted line. `Link variant="inherit"` for references (#482). */
+    children: ReactNode;
+    /** When it happened; a short relative time after the text with the full date on hover. */
+    date?: DateInput;
+    /**
+     * Width of the icon column in px, with the icon centred in it. Pass a `Comment`'s `avatarSize`
+     * so the icon sits under the avatars and the text lines up with the messages.
+     */
+    gutter?: number;
+    /** Slide up and fade in when it mounts — for an event that just arrived in a live thread. */
+    appear?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * One line in a thread that marks something that happened rather than something someone said:
+ * a member joined, a PR was merged, a message was pinned. Muted text after a small icon.
+ */
+export declare function Marker({ icon, tone, children, date, gutter, appear, className, style }: MarkerProps): import("react").JSX.Element;