@iamfiro/design 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,58 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type IconTileTone, type Space, type TextTone } from '../../primitives';
+import './Stat.css';
+export type StatSize = 'sm' | 'md' | 'lg';
+export type StatLayout = 'stacked' | 'inline';
+export interface StatProps {
+    /** What is measured: "소요 시간", "오류". */
+    label: ReactNode;
+    /** The number, already formatted ("1:52", "₩85,000"). */
+    value: ReactNode;
+    /** The whole the value is part of; shown muted after a slash ("/ 2:55"). */
+    total?: ReactNode;
+    /** Unit after the value, muted ("초", "건"). */
+    unit?: ReactNode;
+    /** Usually a `<Delta>`; sits after the value. */
+    delta?: ReactNode;
+    /** Small gray line under the value (stacked only). */
+    caption?: ReactNode;
+    /** stacked: overline label above a large number (metric strips, KPI cards) · inline: one line, "시간 1:52 / 2:55". */
+    layout?: StatLayout;
+    size?: StatSize;
+    /** Color of the value, e.g. danger when there are errors. */
+    tone?: TextTone;
+    /** A soft gray panel (radius 12, compact padding) around the stat — standalone count tiles ("완료 137"). */
+    tile?: boolean;
+    /** Small glyph before the label, set in a tone-colored IconTile square. */
+    icon?: ReactNode;
+    /** Color of the icon square. */
+    iconTone?: IconTileTone;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * One number with its label: a muted label, a bold value, an optional muted "/ total" or unit and a
+ * delta slot. Assembled from Stack / Inline / Text only.
+ */
+export declare function Stat(props: StatProps): import("react").JSX.Element;
+export interface StatGroupProps {
+    /** Stats (or any cells), left to right. */
+    children: ReactNode;
+    /** Space between cells; the divider sits in the middle of it. */
+    gap?: Space;
+    /** Cells never get narrower than this (px); when they don't fit, the row wraps. */
+    minItemWidth?: number;
+    /** Cells share the width equally (default) or keep their own width. */
+    fill?: boolean;
+    /** Faint vertical lines between cells. Never drawn at the start of a line, also after wrapping. */
+    dividers?: boolean;
+    'aria-label'?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A row of Stats with faint dividers (Separator) between them that wraps on narrow screens.
+ * Each cell carries the divider on its left edge, inside the gap; the row clips its own left edge, so
+ * the divider of whichever cell starts a line — first cell or after a wrap — is cut away.
+ */
+export declare function StatGroup({ children, gap, minItemWidth, fill, dividers, 'aria-label': ariaLabel, className, style }: StatGroupProps): import("react").JSX.Element;

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

@@ -0,0 +1,61 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type StatusIconStatus } from '../../primitives';
+import './StepList.css';
+export type StepListStatus = StatusIconStatus;
+export type StepListSize = 'sm' | 'md' | 'lg';
+export type StepListDensity = 'compact' | 'default' | 'comfortable';
+/**
+ * status: StatusIcon (dashed circle while pending) · number: every step shows its number, the
+ * outline taking the status colour · status-number: StatusIcon, but pending steps show their number.
+ */
+export type StepListMarker = 'status' | 'number' | 'status-number';
+/** default: one gray line · progress: segments below finished steps fill in blue, top to bottom · none */
+export type StepListConnector = 'default' | 'progress' | 'none';
+export interface StepListStep {
+    id: string;
+    status: StepListStatus;
+    title: ReactNode;
+    /** Gray text under the title. Inline code chips (`Text variant="code"`) fit here. */
+    description?: ReactNode;
+    /** Trailing text on the title line, e.g. a duration ("1.9초"). */
+    meta?: ReactNode;
+    /** Anything under the description: an inline Collapsible, a warning line, a FileChip. */
+    children?: ReactNode;
+    /** This step's marker: one of the marker modes, or your own node (an IconTile, an Avatar). */
+    marker?: StepListMarker | ReactNode;
+    /** The number in numbered markers. Defaults to the position (from `start`). */
+    number?: number | string;
+    /** With `status="active"`: 0–100 fills the blue ring instead of spinning. */
+    progress?: number;
+}
+export interface StepListProps {
+    /** The steps as data. Or compose `StepListItem` children instead. */
+    steps?: StepListStep[];
+    children?: ReactNode;
+    /** Marker for every step (a step's own `marker` wins). */
+    marker?: StepListMarker;
+    connector?: StepListConnector;
+    /** sm 16px · md 18px · lg 22px markers, with matching title and description type. */
+    size?: StepListSize;
+    /** Space between steps: compact 12 · default 20 · comfortable 32. */
+    density?: StepListDensity;
+    /** First number for numbered markers. */
+    start?: number;
+    'aria-label'?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface StepListItemProps extends Omit<StepListStep, 'id'> {
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A read-only vertical timeline of steps: a status marker per step joined by a thin connector,
+ * the title with a trailing meta (duration), a gray description and room for nested content.
+ * Status changes cross-fade the marker (StatusIcon) and, with `connector="progress"`, fill the
+ * line down to the next step. Renders an `ol`; the active step gets `aria-current="step"`.
+ * For a checklist the user ticks off, use ProgressTracker.
+ */
+export declare function StepList({ steps, children, marker, connector, size, density, start, 'aria-label': ariaLabel, className, style, }: StepListProps): import("react").JSX.Element;
+/** One step of a StepList, for composing by hand instead of passing `steps`. */
+export declare function StepListItem({ status, title, description, meta, children, marker: markerProp, number: numberProp, progress, className, style, }: StepListItemProps): import("react").JSX.Element;

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

@@ -0,0 +1,39 @@
+import type { CSSProperties, ReactNode } from 'react';
+import './Table.css';
+export interface TableColumn<Row> {
+    key: string;
+    header: ReactNode;
+    /** Node before the header text (a ColorDot for a series column). */
+    headerLeading?: ReactNode;
+    /** Cell content; defaults to `row[key]`. */
+    render?: (row: Row, index: number) => ReactNode;
+    /** Node before the cell content (an icon in the first column). */
+    leading?: (row: Row, index: number) => ReactNode;
+    width?: number | string;
+    /** Defaults to `end` for numeric columns, `start` otherwise. */
+    align?: 'start' | 'center' | 'end';
+    /** Tabular figures for number columns (right-aligned unless `align` says otherwise). */
+    numeric?: boolean;
+}
+export interface TableProps<Row> {
+    columns: TableColumn<Row>[];
+    rows: Row[];
+    /** Stable key per row; defaults to the index. Also what `selectedKey` matches. */
+    rowKey?: (row: Row, index: number) => string | number;
+    density?: 'compact' | 'default';
+    /** Alternate row fills (instead of lines between rows). */
+    striped?: boolean;
+    /** Header look: small gray label, or uppercase overline. */
+    headerVariant?: 'label' | 'overline';
+    /** Key of the highlighted row (soft gray fill). `null` = none. */
+    selectedKey?: string | number | null;
+    /** Rows become clickable (hover fill, Enter/Space from the keyboard). */
+    onRowClick?: (row: Row, index: number) => void;
+    /** Shown when there are no rows (e.g. an <EmptyState>). */
+    empty?: ReactNode;
+    caption?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/** A data table without grid lines: header in small gray type, rows separated by soft fills. */
+export declare function Table<Row extends object>({ columns, rows, rowKey, density, striped, headerVariant, selectedKey, onRowClick, empty, caption, className, style, }: TableProps<Row>): import("react").JSX.Element;

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

@@ -0,0 +1,47 @@
+import { type ReactNode } from 'react';
+import './Tabs.css';
+export interface TabsProps {
+    value?: string;
+    /** Defaults to the first enabled tab. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** auto: arrow keys select as they move · manual: arrows move focus, Enter/Space select (for heavy panels). */
+    activation?: 'auto' | 'manual';
+    children: ReactNode;
+    className?: string;
+}
+/** Tabs that switch between panels. Compose TabList + Tab + TabPanel. */
+export declare function Tabs({ value: valueProp, defaultValue, onValueChange, activation, children, className }: TabsProps): import("react").JSX.Element;
+export declare namespace Tabs {
+    var List: typeof TabList;
+    var Tab: typeof import("./Tabs").Tab;
+    var Panel: typeof TabPanel;
+}
+export interface TabListProps {
+    children: ReactNode;
+    /** underline: a line under the selected tab · pill: a white chip on a gray track. */
+    variant?: 'underline' | 'pill';
+    size?: 'sm' | 'md';
+    /** Stretch tabs to fill the row. */
+    fitted?: boolean;
+    'aria-label'?: string;
+    className?: string;
+}
+export declare function TabList({ children, variant, size, fitted, 'aria-label': ariaLabel, className }: TabListProps): import("react").JSX.Element;
+export interface TabProps {
+    value: string;
+    children: ReactNode;
+    icon?: ReactNode;
+    /** A small number after the label. */
+    count?: number;
+    disabled?: boolean;
+}
+export declare function Tab({ value, children, icon, count, disabled }: TabProps): import("react").JSX.Element;
+export interface TabPanelProps {
+    value: string;
+    children: ReactNode;
+    /** Keep the panel in the DOM while hidden (preserves form state / scroll). */
+    keepMounted?: boolean;
+    className?: string;
+}
+export declare function TabPanel({ value, children, keepMounted, className }: TabPanelProps): import("react").JSX.Element | null;

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

@@ -0,0 +1,46 @@
+import { type ReactNode } from 'react';
+import './TagInput.css';
+export type TagRejectReason = 'duplicate' | 'invalid' | 'max';
+export interface TagInputProps {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (tags: string[]) => void;
+    /** Keys that turn the typed text into a tag: 'Enter', 'Tab', or single characters like ',' ';' ' '.
+     *  Pasted text is split on the characters (and on line breaks / tabs when 'Enter' / 'Tab' are listed). */
+    delimiters?: string[];
+    /** true = ok · false or a message = not ok. Rejected (field shakes) unless `allowInvalid`. */
+    validate?: (tag: string, tags: string[]) => boolean | string;
+    /** Keep tags that fail `validate`, shown in the danger tone (e.g. a mistyped e-mail recipient). */
+    allowInvalid?: boolean;
+    /** Duplicates (ignoring case and surrounding spaces) are rejected and the existing tag shakes. */
+    allowDuplicates?: boolean;
+    /** Normalises text before it becomes a tag (e.g. strip '#', lowercase). Trimmed first. */
+    transform?: (text: string) => string;
+    /** Most tags allowed; further adds shake the field. */
+    max?: number;
+    /** Optional list shown under the field while typing. ↓ picks one; Enter alone still adds what you typed. */
+    suggestions?: string[];
+    /** Called for every rejected tag, with the `validate` message when there is one. */
+    onReject?: (text: string, reason: TagRejectReason, message?: string) => void;
+    /** Double-click (or Enter on a highlighted tag) edits it in place (default on). */
+    editable?: boolean;
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    invalid?: boolean;
+    leading?: ReactNode;
+    /** Submits each tag as a separate `name` field. */
+    name?: string;
+    id?: string;
+    className?: string;
+    maxHeight?: number;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+}
+/**
+ * Free-text tags inside one input field. Enter / comma / Tab add, pasting splits, Backspace on an
+ * empty field first highlights the last tag and only the second press deletes it. ← → walk the tags,
+ * a double-click edits one. Keys pressed while the IME is composing (한글) are left alone.
+ */
+export declare function TagInput({ value: valueProp, defaultValue, onValueChange, delimiters, validate, allowInvalid, allowDuplicates, transform, max, suggestions, onReject, editable, placeholder, size, disabled, invalid, leading, name, id, className, maxHeight, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, }: TagInputProps): import("react").JSX.Element;

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

@@ -0,0 +1,43 @@
+import '../Select/Select.css';
+import '../Calendar/DatePicker.css';
+import './TimePicker.css';
+export interface TimePickerProps {
+    /** 'HH:mm' (24h), or null when empty. */
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (time: string | null) => void;
+    /** 12 = "오후 2:30" with an 오전·오후 column · 24 = "14:30". */
+    hourCycle?: 12 | 24;
+    /** Minutes between choices: the minute column (default 5) or the list rows (default 30). */
+    minuteStep?: number;
+    /** Earliest / latest selectable time, 'HH:mm'. */
+    min?: string;
+    max?: string;
+    /** Extra times to block ('HH:mm' → true = blocked), e.g. lunch or booked slots. */
+    isTimeDisabled?: (time: string) => boolean;
+    /** columns: scrollable 시 · 분 (· 오전/오후) columns · list: one row per slot, for scheduling. */
+    mode?: 'columns' | 'list';
+    /** List mode: shows each row's length from this time ("1시간 30분"), for an end-time field. */
+    durationFrom?: string;
+    /** How the time is written in the field when it isn't being edited. */
+    formatValue?: (time: string) => string;
+    placeholder?: string;
+    /** Show an × to clear the value. */
+    clearable?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    invalid?: boolean;
+    align?: 'start' | 'end';
+    /** Submits the 'HH:mm' value under this name. */
+    name?: string;
+    id?: string;
+    className?: string;
+    maxHeight?: number;
+    'aria-label'?: string;
+}
+/**
+ * A time field you can type into ("14:30", "오후 2시 반", "930") or pick from a popover.
+ * Columns mode: ↑↓ change the focused column, ←→ / Tab move between columns, Enter confirms,
+ * Esc puts the old time back. List mode: ↑↓ walk the slots while you keep typing, Enter picks.
+ */
+export declare function TimePicker({ value: valueProp, defaultValue, onValueChange, hourCycle, mode, minuteStep, min, max, isTimeDisabled, durationFrom, formatValue, placeholder, clearable, size, disabled, invalid, align, name, id, className, maxHeight, 'aria-label': ariaLabel, }: TimePickerProps): import("react").JSX.Element;

package/lib/types/components/TimePicker/time.d.ts

@@ -0,0 +1,15 @@
+/** Small time-of-day helpers. Values are 'HH:mm' strings (24h, zero padded). */
+/** 'HH:mm' → minutes since midnight. */
+export declare const timeToMinutes: (t: string) => number;
+/** Minutes since midnight → 'HH:mm'. */
+export declare const minutesToTime: (n: number) => string;
+export declare const isTimeString: (t: string) => boolean;
+/** 'HH:mm' → "오후 2:30" (12h) or "14:30" (24h). */
+export declare function formatTime(t: string, hourCycle?: 12 | 24): string;
+/** 90 → "1시간 30분", 30 → "30분", 120 → "2시간". */
+export declare function formatDuration(minutes: number): string;
+/**
+ * Reads what people type for a time: "14:30", "1430", "930", "2:30pm", "오후 2:30", "오후 2시 30분",
+ * "2시 반", "14시", "정오", "자정". Without 오전/오후 the hour is read as 24h. Returns 'HH:mm' or null.
+ */
+export declare function parseTimeInput(text: string): string | null;

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

@@ -0,0 +1,154 @@
+import { type CSSProperties, type MouseEvent, type ReactElement, type ReactNode, type Ref } from 'react';
+import './Timeline.css';
+export type TimelineTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger';
+export interface TimelineMarker {
+    /** Where the vertical line sits, in domain units. */
+    value: number;
+    tone?: TimelineTone;
+    /** dashed: a target or plan · solid: an estimate or an event. */
+    line?: 'solid' | 'dashed';
+    /** A chip under the rows, e.g. "계획 2:55". */
+    label?: ReactNode;
+    /** Which way the chip grows from the line. `left` / `right` keep neighbouring chips apart. */
+    labelSide?: 'center' | 'left' | 'right';
+    /** The other edge of a shaded band between this value and `band` (e.g. the expected overrun). */
+    band?: number;
+}
+/** A dependency: a dashed curve from the end of bar `from` to the start of bar `to` (TimelineBar `id`s). */
+export interface TimelineLink {
+    from: string;
+    to: string;
+    tone?: TimelineTone;
+}
+export type TimelineDensity = 'compact' | 'default' | 'comfortable';
+export interface TimelineProps {
+    /** Start of the domain (seconds, minutes, any number). Negative values make a relative axis (−25m … 0). */
+    min?: number;
+    /** End of the domain. Leave room after the longest bar for its trailing label. */
+    max: number;
+    /** Distance between ticks. Defaults to a round step that gives about six ticks. */
+    step?: number;
+    /** Exact tick values instead of `step`. */
+    ticks?: number[];
+    /** Ruler and tooltip text for a value: `formatClock` for m:ss, `formatOffset('m')` for −25m, `(v) => \`${v}s\`` for seconds. */
+    formatTick?: (value: number) => string;
+    /** Faint vertical lines under every tick. */
+    grid?: boolean;
+    /** A "now" line with a dot on the ruler, running through every row. */
+    now?: number;
+    /** A small accent chip on the ruler at `now` ("지금") instead of the dot. The tick at `now` gives way to it. */
+    nowLabel?: ReactNode;
+    /** Draw the now line through the rows. Turn off to keep only the ruler chip. */
+    nowLine?: boolean;
+    /** Vertical marker lines with optional bands and bottom chips. */
+    markers?: TimelineMarker[];
+    /** Dashed curved connectors between bars on different rows, keyed by TimelineBar `id`. */
+    links?: TimelineLink[];
+    /** Width of the label column on the left (px). 0 = no label column. */
+    labelWidth?: number;
+    /** Heading above the label column, level with the ruler. */
+    labelHeader?: ReactNode;
+    /**
+     * Something that fills the whole label column instead of per-row labels — usually a TreeView with the
+     * same row height (`rowHeight={TREE_ROW_HEIGHT.default}`, `animated={false}`). Rows still draw their
+     * selected background behind it.
+     */
+    aside?: ReactNode;
+    /** Row height: compact 28px · default 36px · comfortable 56px (lanes with two-line labels). */
+    density?: TimelineDensity;
+    /** Overrides the density's row height (px), e.g. to match TREE_ROW_HEIGHT. */
+    rowHeight?: number;
+    'aria-label'?: string;
+    className?: string;
+    style?: CSSProperties;
+    /** TimelineRow elements. */
+    children?: ReactNode;
+}
+/**
+ * A time axis: maps a numeric domain to x-positions, draws a tick ruler with faint gridlines,
+ * and lays out TimelineRows (a label column plus a track). A `now` line and vertical `markers`
+ * run through every row. Everything is positioned in percentages, so it resizes without measuring.
+ */
+export declare function Timeline({ min, max, step, ticks, formatTick, grid, now, nowLabel, nowLine, markers, links, labelWidth, labelHeader, aside, density, rowHeight, 'aria-label': ariaLabel, className, style, children, }: TimelineProps): import("react").JSX.Element;
+export interface TimelineRowProps {
+    /** The left column: a step name, or any content (icon + text, a status mark). */
+    label?: ReactNode;
+    /** A tile before the name: `IconTile` or `Avatar`. Turns the label into the two-line layout. */
+    leading?: ReactNode;
+    /** Muted second line under the name; truncates. */
+    description?: ReactNode;
+    /** Inline status after the name, e.g. `<Badge size="sm">대기</Badge>`. */
+    badge?: ReactNode;
+    /** Hidden children count at the right of the label: a number shows "+5" in a small grey Badge. */
+    count?: number | ReactNode;
+    /** Indent of the label for nested rows (one step = 16px), e.g. child spans in a waterfall. */
+    depth?: number;
+    /** Future or skipped rows: grey and faded. */
+    faded?: boolean;
+    /** A soft accent background across the whole row, label column included. */
+    selected?: boolean;
+    /** Makes the row selectable: click anywhere on it (bars included), or Enter / Space when focused. */
+    onSelect?: () => void;
+    /** TimelineBar elements, drawn over each other in the track. */
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/** One row: the label cell on the left, the track (bars) on the right. */
+export declare function TimelineRow({ label, leading, description, badge, count, depth, faded, selected, onSelect, children, className, style }: TimelineRowProps): import("react").JSX.Element;
+export type TimelineBarVariant = 'fill' | 'outline' | 'pending';
+export type TimelineBarTone = 'neutral' | 'accent' | 'purple' | 'teal' | 'success' | 'warning' | 'danger';
+/** One consecutive coloured part of a segmented bar, in domain units. */
+export interface TimelineBarSegment {
+    start: number;
+    end: number;
+    tone?: TimelineBarTone;
+}
+export interface TimelineBarProps {
+    start: number;
+    end: number;
+    /** Names the bar for Timeline `links`. */
+    id?: string;
+    /** fill: a soft tinted bar (actual) · outline: a dashed frame (planned) · pending: a grey placeholder (not started). */
+    variant?: TimelineBarVariant;
+    /** Defaults to neutral for `outline`, accent otherwise. */
+    tone?: TimelineBarTone;
+    /** Bar thickness: sm 10px · md 16px · lg 20px · xl 32px (the default for bars with content). An outline frames a fill of the same size. */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Content inside the bar — a short text that truncates. Makes a large rounded bar with ink in the tone colour. */
+    children?: ReactNode;
+    /** Before the text inside the bar, usually an `IconStack`. */
+    leading?: ReactNode;
+    /** Trailing slot inside the bar, e.g. `<Badge as="button">확인 필요</Badge>` (drawn white). Stays clickable. */
+    action?: ReactNode;
+    /** Consecutive coloured parts inside the bar; pair with `variant="outline"` for a framed capsule. */
+    segments?: TimelineBarSegment[];
+    /** The part of the bar after this value is drawn in `overTone` (time past the plan). */
+    limit?: number;
+    overTone?: TimelineBarTone;
+    /** Still in progress: a shimmer sweeps through the bar and its leading edge glows. Content bars fade in from the left to a solid edge. */
+    running?: boolean;
+    /** Text after the bar: "0:52", "6.9s · 128KB", a Spinner, a Badge. */
+    label?: ReactNode;
+    /** Where the label starts (domain units). Defaults to `end`; pass the plan end so it clears the plan frame. */
+    labelAt?: number;
+    /** Hover / focus bubble (the shared Tooltip). Makes the bar focusable. */
+    tooltip?: ReactNode;
+    /** Makes the bar a button. The click also bubbles to a selectable row. */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Wraps the bar's focusable target, e.g. `(target) => <Popover trigger={target}>…</Popover>`.
+     * The wrapper is stretched over the bar, so the popover anchors to it. Makes the bar a button.
+     */
+    renderTarget?: (target: ReactElement) => ReactNode;
+    /** The bar's root element (positioned over the track), for your own floating UI. */
+    ref?: Ref<HTMLSpanElement>;
+    /** Read by screen readers. Defaults to the text content and "start – end" in the ruler format. */
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * A range on the track. Position and width slide when values change, and the bar
+ * wipes in from its start on mount. Several bars in one row stack (plan frame + actual fill).
+ */
+export declare function TimelineBar({ start, end, variant, tone, size, children, leading, action, segments, limit, overTone, running, label, labelAt, tooltip, onClick, renderTarget, ref, 'aria-label': ariaLabel, className, }: TimelineBarProps): import("react").JSX.Element;

package/lib/types/components/Timeline/scale.d.ts

@@ -0,0 +1,22 @@
+export interface TimelineScale {
+    min: number;
+    max: number;
+    /** A value as a 0–100 position along the track (clamped). */
+    pct: (value: number) => number;
+    /** The ruler's tick format, reused for tooltips and screen-reader text. */
+    formatValue: (value: number) => string;
+}
+export declare const TimelineScaleContext: import("react").Context<TimelineScale | null>;
+/** The scale of the nearest Timeline: map your own values to track positions (custom marks). */
+export declare function useTimelineScale(): TimelineScale;
+/** Seconds as a clock: 52 → "0:52", 175 → "2:55", 3725 → "1:02:05". */
+export declare function formatClock(seconds: number): string;
+/** A round tick step that gives about `count` ticks over `span` (1 · 2 · 5 × 10ⁿ). */
+export declare function niceStep(span: number, count: number): number;
+/** Tick values from the first multiple of `step` at or after `min` up to `max`. */
+export declare function buildTicks(min: number, max: number, step: number): number[];
+/**
+ * Signed offsets from a reference point, for relative axes: `formatOffset('m')` gives
+ * −25 → "−25m", 5 → "+5m", 0 → `zero` ("0" by default). Uses a real minus sign.
+ */
+export declare function formatOffset(unit?: string, zero?: string): (value: number) => string;

package/lib/types/components/Toast/Toaster.d.ts

@@ -0,0 +1,19 @@
+import './Toast.css';
+export type ToasterPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface ToasterProps {
+    position?: ToasterPosition;
+    /** Toasts kept visible in the stack; older ones fade out behind. */
+    visibleToasts?: number;
+    /** Default auto-dismiss time in ms. */
+    duration?: number;
+    /** Space between toasts when the stack is spread out. */
+    gap?: number;
+    /** Always show the stack spread out instead of only on hover. */
+    expand?: boolean;
+    className?: string;
+}
+/**
+ * Renders the toasts from `toast()`. Mount once near the root.
+ * Collapsed, newer toasts cover older ones that peek out behind; hover spreads them out.
+ */
+export declare function Toaster({ position, visibleToasts, duration, gap, expand, className }: ToasterProps): import("react").ReactPortal | null;

package/lib/types/components/Toast/index.d.ts

@@ -0,0 +1,4 @@
+export { toast } from './store';
+export type { ToastAction, ToastContent, ToastData, ToastOptions, ToastType } from './store';
+export { Toaster } from './Toaster';
+export type { ToasterPosition, ToasterProps } from './Toaster';

package/lib/types/components/Toast/store.d.ts

@@ -0,0 +1,75 @@
+import type { ReactNode } from 'react';
+export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info' | 'loading';
+export interface ToastAction {
+    label: ReactNode;
+    onClick: () => void;
+}
+export interface ToastOptions {
+    /** Reuse an id to replace that toast in place (it animates to the new state). */
+    id?: string;
+    type?: ToastType;
+    description?: ReactNode;
+    action?: ToastAction;
+    /** ms before auto-dismiss; `Infinity` keeps it. Loading toasts never auto-dismiss. */
+    duration?: number;
+    /** Overrides the type's icon. */
+    icon?: ReactNode;
+    /** Hide the × button. */
+    closable?: boolean;
+    /** Runs once when the toast leaves (timeout, ×, action or `dismiss`). */
+    onDismiss?: () => void;
+}
+export interface ToastData extends ToastOptions {
+    id: string;
+    type: ToastType;
+    title: ReactNode;
+    /** Bumped on every update so the toast can animate the change and restart its timer. */
+    version: number;
+    exiting?: boolean;
+    /** Set by `toast.undo`: ⌘/Ctrl+Z runs its action. */
+    undoable?: boolean;
+}
+/** Text for one state of `toast.promise`: a title, or a title with a description. */
+export type ToastContent = ReactNode | {
+    title: ReactNode;
+    description?: ReactNode;
+};
+export declare const subscribe: (listener: () => void) => () => void;
+export declare const getToasts: () => ToastData[];
+/** Exit animation length; keep in sync with the CSS transition. */
+export declare const EXIT_MS = 320;
+declare function update(id: string, patch: Partial<Omit<ToastData, 'id' | 'version'>>): void;
+/** Plays the exit animation, then removes. No id dismisses every toast. */
+declare function dismiss(id?: string): void;
+/**
+ * Shows a loading toast that turns into success or error when `promise` settles.
+ * Each state may be a function of the result / error.
+ */
+declare function promise<T>(task: Promise<T>, states: {
+    loading: ToastContent;
+    success: ToastContent | ((value: T) => ToastContent);
+    error: ToastContent | ((error: unknown) => ToastContent);
+}, options?: Omit<ToastOptions, 'type'>): Promise<T>;
+/**
+ * Undo instead of a confirm dialog: do the action right away, then offer "실행 취소".
+ * `onCommit` runs only if the toast leaves without being undone — do the permanent part
+ * (server delete, emptying trash) there. ⌘/Ctrl+Z also undoes the newest one.
+ */
+declare function undo(title: ReactNode, { onUndo, onCommit, undoLabel, ...options }: Omit<ToastOptions, 'action' | 'onDismiss'> & {
+    onUndo: () => void;
+    onCommit?: () => void;
+    undoLabel?: ReactNode;
+}): string;
+/** `toast('저장했어요')`, `toast.success(...)`, `toast.loading(...)` → id, `toast.update(id, …)`. */
+export declare const toast: ((title: ReactNode, options?: ToastOptions) => string) & {
+    success: (title: ReactNode, options?: Omit<ToastOptions, "type">) => string;
+    error: (title: ReactNode, options?: Omit<ToastOptions, "type">) => string;
+    warning: (title: ReactNode, options?: Omit<ToastOptions, "type">) => string;
+    info: (title: ReactNode, options?: Omit<ToastOptions, "type">) => string;
+    loading: (title: ReactNode, options?: Omit<ToastOptions, "type">) => string;
+    update: typeof update;
+    dismiss: typeof dismiss;
+    promise: typeof promise;
+    undo: typeof undo;
+};
+export {};

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

@@ -0,0 +1,28 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { type SelectionProps, type SelectionValue } from '../../hooks';
+import './ToggleGroup.css';
+export type ToggleGroupVariant = 'soft' | 'ghost';
+export type ToggleGroupSize = 'sm' | 'md' | 'lg';
+export type ToggleGroupProps<V extends SelectionValue> = SelectionProps<V> & {
+    /** soft: gray track, selected item in white · ghost: text only, selected gets a gray fill */
+    variant?: ToggleGroupVariant;
+    size?: ToggleGroupSize;
+    orientation?: 'horizontal' | 'vertical';
+    disabled?: boolean;
+    className?: string;
+    'aria-label'?: string;
+    children: ReactNode;
+};
+/**
+ * A set of toggle buttons. `type="single"` behaves like radio buttons (arrow keys move,
+ * Space/Enter selects); `type="multiple"` lets each item be pressed on its own.
+ */
+export declare function ToggleGroup<V extends SelectionValue>(props: ToggleGroupProps<V>): import("react").JSX.Element;
+export declare namespace ToggleGroup {
+    var Item: typeof ToggleGroupItem;
+}
+export interface ToggleGroupItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+    value: SelectionValue;
+    icon?: ReactNode;
+}
+export declare function ToggleGroupItem({ value, icon, children, disabled, className, onClick, ...rest }: ToggleGroupItemProps): import("react").JSX.Element;