@iamfiro/design 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,70 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type ButtonProps, type ButtonVariant, type TooltipSide } from '../../primitives';
+import './Toolbar.css';
+export type ToolbarSize = 'sm' | 'md';
+export type ToolbarVariant = 'plain' | 'floating';
+export interface ToolbarProps {
+    children: ReactNode;
+    /** Name of the toolbar ("서식"). Or use `aria-labelledby`. */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /** horizontal: ←→ move · vertical: ↑↓ move. */
+    orientation?: 'horizontal' | 'vertical';
+    /** plain: no surface, just spacing · floating: white surface lifted by a shadow (no border). */
+    variant?: ToolbarVariant;
+    /** Size of the ToolbarButtons inside (match ToggleGroup `size` yourself). */
+    size?: ToolbarSize;
+    /** Arrow keys wrap from the last item to the first and back. */
+    loop?: boolean;
+    /**
+     * Buttons that don't fit move into a "더보기" menu at the end (horizontal only). The toolbar then
+     * fills its parent's width. Only ToolbarButtons and ToolbarSeparators collapse, from the end.
+     */
+    overflow?: boolean;
+    /** Label of the overflow menu button. */
+    overflowLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A WAI-ARIA toolbar: one tab stop for the whole bar, then arrow keys (and Home/End) move
+ * between its buttons, toggle buttons, ToggleGroups and menu triggers. Focus is remembered, so
+ * tabbing back in lands on the last used control.
+ */
+export declare function Toolbar({ children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, orientation, variant, size, loop, overflow, overflowLabel, className, style, }: ToolbarProps): import("react").JSX.Element;
+export declare namespace Toolbar {
+    var Button: import("react").ForwardRefExoticComponent<ToolbarButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    var Separator: typeof ToolbarSeparator;
+    var Spacer: typeof ToolbarSpacer;
+}
+export interface ToolbarButtonProps extends Omit<ButtonProps, 'size' | 'variant' | 'iconOnly' | 'shortcut'> {
+    /** What the button does ("굵게"). Accessible name of an icon-only button, the tooltip and the overflow menu row. */
+    label: string;
+    /** ghost by default; a primary action at the end of the bar can be 'primary'. */
+    variant?: ButtonVariant;
+    /** Makes it a toggle button (aria-pressed) — controlled. */
+    pressed?: boolean;
+    /** Makes it a toggle button — uncontrolled start. */
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    /** Keyboard hint shown in the tooltip and the overflow menu, e.g. ['mod', 'B']. Add `hotkey` to also listen for it. */
+    shortcut?: string[];
+    /** Tooltip with `label` + shortcut. On by default for icon-only buttons; pass content to override, false to turn off. */
+    tooltip?: boolean | ReactNode;
+    tooltipSide?: TooltipSide;
+    /**
+     * May move into the overflow menu when space runs out (Toolbar `overflow`). Turn off for
+     * buttons whose action isn't their own click, like a DropdownMenu trigger.
+     */
+    collapsible?: boolean;
+}
+/**
+ * A ghost Button sized by the Toolbar. Icon-only buttons get their `label` as the accessible name
+ * and as a tooltip with the shortcut keys. With `pressed`/`defaultPressed` it toggles, and the
+ * pressed fill grows in like a ToggleGroup item.
+ */
+export declare const ToolbarButton: import("react").ForwardRefExoticComponent<ToolbarButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** A short line between groups of a Toolbar, across its direction. Collapses with its neighbours. */
+export declare function ToolbarSeparator(): import("react").JSX.Element;
+/** Pushes the items after it to the far end of the Toolbar. */
+export declare function ToolbarSpacer(): import("react").JSX.Element;

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

@@ -0,0 +1,43 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import '../Chart/Chart.css';
+import './Tracker.css';
+/** success: up · warning: degraded · danger: outage · neutral: a deployment or maintenance · empty: no data. */
+export type TrackerTone = 'success' | 'warning' | 'danger' | 'neutral' | 'accent' | 'empty';
+export type TrackerSize = 'sm' | 'md' | 'lg';
+export interface TrackerBlock {
+    key: string;
+    tone?: TrackerTone;
+    /** Block color instead of `tone`: a CSS variable (`--chart-3`) or any color. */
+    color?: string;
+    /** Tooltip title, usually the date ("10월 25일"). */
+    tooltip?: ReactNode;
+    /** Status name in the tooltip row. Defaults to the tone's name ("정상", "장애"…). */
+    status?: ReactNode;
+    /** Value on the right of the tooltip row ("99.2%", "3분"). */
+    value?: ReactNode;
+}
+export interface TrackerProps {
+    /** One block per period, oldest first. */
+    data: TrackerBlock[];
+    /** Block height preset: 24 · 32 · 40 px. */
+    size?: TrackerSize;
+    /** Block height in px, overriding `size`. */
+    height?: number;
+    /** fill: blocks shrink or grow to fill the width · fixed: blocks keep their width (6 · 8 · 10 px). */
+    layout?: 'fill' | 'fixed';
+    /** Value card on hover / keyboard focus. */
+    tooltip?: boolean;
+    activeIndex?: number | null;
+    defaultActiveIndex?: number | null;
+    onActiveIndexChange?: (index: number | null) => void;
+    'aria-label'?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A status history strip: one equal block per day (or hour), coloured by how it went.
+ * Only the two ends of the strip are well rounded. Blocks rise in from left to right on mount.
+ * The first tooltip waits `TIMING.tooltipDelay`; moving along the strip after that is instant.
+ * Focus the strip and use ←/→, Home/End, Esc.
+ */
+export declare function Tracker({ data, size, height, layout, tooltip, activeIndex, defaultActiveIndex, onActiveIndexChange, 'aria-label': ariaLabel, className, style, }: TrackerProps): import("react").JSX.Element;

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

@@ -0,0 +1,68 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type Space } from '../../primitives';
+import './TreeDiagram.css';
+/** One node of the diagram. Put whatever you like in it with `renderNode` (usually a Card). */
+export interface TreeDiagramNode<T = unknown> {
+    /** Unique across the whole diagram. */
+    id: string;
+    data?: T;
+    children?: TreeDiagramNode<T>[];
+    /**
+     * How this node's children sit: `row` — side by side one level down, joined by a bus line ·
+     * `indented` — a vertical list hanging under the node, joined by elbows on the left.
+     * Overrides `indentFrom`. Children of an indented node are indented too unless they say otherwise.
+     */
+    childLayout?: 'row' | 'indented';
+}
+export interface TreeDiagramNodeState {
+    /** 0 for the roots. */
+    depth: number;
+    /** Number of direct children (0 for leaves). */
+    childCount: number;
+    collapsed: boolean;
+    setCollapsed: (collapsed: boolean) => void;
+    /** A ready-made "3 ⌄" toggle wired to this node, or null for leaves. Place it inside your card. */
+    toggle: ReactNode;
+    /** How this node's own children are laid out. */
+    childLayout: 'row' | 'indented';
+}
+export interface TreeDiagramProps<T = unknown> {
+    /** Root nodes (usually one). Several roots sit side by side. */
+    items: TreeDiagramNode<T>[];
+    /** Draws a node — typically a `Card` with an Avatar, Text and `state.toggle`. */
+    renderNode: (node: TreeDiagramNode<T>, state: TreeDiagramNodeState) => ReactNode;
+    /** Collapsed node ids (controlled). */
+    collapsed?: string[];
+    defaultCollapsed?: string[];
+    onCollapsedChange?: (collapsed: string[]) => void;
+    /** Nodes at this depth or deeper list their children indented instead of in a row (0 = the roots). */
+    indentFrom?: number;
+    /** Space between siblings in a row; also between rows of an indented list (half of it). */
+    gap?: Space;
+    /** Vertical space between a parent and its row of children. */
+    levelGap?: Space;
+    /** How far an indented list sits to the right of its parent. */
+    indent?: Space;
+    /** A fixed width for every node box, so rows line up. */
+    nodeWidth?: number | string;
+    className?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+}
+export interface TreeDiagramToggleProps {
+    /** Number of children it hides. */
+    count: number;
+    collapsed: boolean;
+    onToggle: () => void;
+    'aria-controls'?: string;
+    'aria-label'?: string;
+    className?: string;
+}
+/** "3 ⌄": the child count with a chevron that folds a subtree. Clicks don't reach a clickable card around it. */
+export declare function TreeDiagramToggle({ count, collapsed, onToggle, 'aria-controls': controls, 'aria-label': ariaLabel, className }: TreeDiagramToggleProps): import("react").JSX.Element;
+/**
+ * A hierarchy drawn as node boxes in levels (org chart, project breakdown). Connectors are measured
+ * from the real node boxes, so they follow nodes that change size, collapse or reflow. Deep levels can
+ * hang as indented lists. Scrolls sideways when it's wider than its container.
+ */
+export declare function TreeDiagram<T = unknown>({ items, renderNode, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, indentFrom, gap, levelGap, indent, nodeWidth, className, style, 'aria-label': ariaLabel, }: TreeDiagramProps<T>): import("react").JSX.Element;

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

@@ -0,0 +1,107 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type Space } from '../../primitives';
+import './TreeView.css';
+export type TreeDensity = 'compact' | 'default' | 'comfortable';
+/** Fixed row height (px) per density. Every row is exactly this tall, so a chart beside the tree can line up row by row. */
+export declare const TREE_ROW_HEIGHT: Record<TreeDensity, number>;
+/** One node of the tree. */
+export interface TreeNode<T = unknown> {
+    /** Unique across the whole tree. */
+    id: string;
+    /** Bold name. */
+    label: ReactNode;
+    /** Muted text after the name; truncates with an ellipsis. */
+    description?: ReactNode;
+    /** Icon, avatar or file icon before the name. */
+    leading?: ReactNode;
+    /** Right side: a duration, a count, a spinner… */
+    trailing?: ReactNode;
+    /** Faded; can be focused but not selected or expanded. */
+    disabled?: boolean;
+    /** Text used by typeahead when `label` is not a string. */
+    textValue?: string;
+    children?: TreeNode<T>[];
+    /** Anything you need back in `renderItem` / callbacks. */
+    data?: T;
+}
+/** One visible row, in display order. */
+export interface TreeRow<T = unknown> {
+    id: string;
+    node: TreeNode<T>;
+    /** 0 for top-level rows. */
+    depth: number;
+    /** Position in the visible list (0-based) — multiply by the row height for the row's top. */
+    index: number;
+    parentId: string | null;
+    hasChildren: boolean;
+    expanded: boolean;
+    /** 1-based position among its siblings. */
+    posinset: number;
+    setsize: number;
+}
+/**
+ * The rows that are visible for a given set of expanded ids, top to bottom.
+ * Use it to draw something next to a TreeView (a timeline, a column of values) that lines up row by row.
+ */
+export declare function flattenTree<T>(items: TreeNode<T>[], expanded: Iterable<string>): TreeRow<T>[];
+export interface TreeItemProps extends Omit<TreeNode, 'children' | 'data'> {
+    /** Nested TreeItems. */
+    children?: ReactNode;
+}
+/** Declares one node when you'd rather write the tree as JSX. TreeView reads its props; it renders nothing itself. */
+export declare function TreeItem(props: TreeItemProps): null;
+export interface TreeItemState {
+    depth: number;
+    expanded: boolean;
+    selected: boolean;
+    focused: boolean;
+    hasChildren: boolean;
+    disabled: boolean;
+}
+export interface TreeViewProps<T = unknown> {
+    /** Data-driven nodes. Or write `<TreeItem>`s as children instead. */
+    items?: TreeNode<T>[];
+    /** `<TreeItem>` elements, when `items` isn't given. */
+    children?: ReactNode;
+    /** Expanded node ids (controlled). */
+    expanded?: string[];
+    defaultExpanded?: string[];
+    onExpandedChange?: (expanded: string[]) => void;
+    /** Selected node id (controlled). `null` = controlled, nothing selected. */
+    selected?: string | null;
+    defaultSelected?: string | null;
+    onSelectedChange?: (id: string | null) => void;
+    /** single: clicking / Enter selects a row · none: rows only expand and collapse. */
+    selectionMode?: 'single' | 'none';
+    /** Clicking a parent row also toggles it (file explorers). Default: true when `selectionMode="none"`. */
+    expandOnClick?: boolean;
+    /** Fires when a row is clicked or Enter / Space is pressed on it. */
+    onAction?: (node: TreeNode<T>) => void;
+    /** Row height and padding, like List. */
+    density?: TreeDensity;
+    /** Overrides the density's row height (px). */
+    rowHeight?: number;
+    /** Indent per level, on the 4px scale. The default (6 = 24px) puts a child's chevron under its parent's icon. */
+    indent?: Space;
+    /** Faint vertical guide lines under each open parent. */
+    guides?: boolean;
+    /** Children fold open and closed to their real height. Turn off when something beside the tree must follow row positions instantly. */
+    animated?: boolean;
+    /** Replaces the name + description part of a row. leading / trailing still come from the node. */
+    renderItem?: (node: TreeNode<T>, state: TreeItemState) => ReactNode;
+    /** Called with the visible rows (in order) whenever they change — expand, collapse, new items. */
+    onVisibleChange?: (rows: TreeRow<T>[]) => void;
+    className?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+/**
+ * An indented, expandable tree (WAI-ARIA tree). ↑↓ move, → expands or steps into children,
+ * ← collapses or steps to the parent, Home / End, Enter / Space select, * expands siblings,
+ * and typing jumps to a matching row. One row is in the tab order at a time.
+ */
+export declare function TreeView<T = unknown>({ items, children, expanded: expandedProp, defaultExpanded, onExpandedChange, selected: selectedProp, defaultSelected, onSelectedChange, selectionMode, expandOnClick, onAction, density, rowHeight, indent, guides, animated, renderItem, onVisibleChange, className, style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }: TreeViewProps<T>): import("react").JSX.Element;
+export declare namespace TreeView {
+    var Item: typeof TreeItem;
+}

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

@@ -0,0 +1,188 @@
+export { ToggleGroup, ToggleGroupItem } from './ToggleGroup/ToggleGroup';
+export type { ToggleGroupItemProps, ToggleGroupProps, ToggleGroupSize, ToggleGroupVariant } from './ToggleGroup/ToggleGroup';
+export { FilterChip, FilterChipGroup } from './FilterChips/FilterChips';
+export type { FilterChipGroupProps, FilterChipProps, FilterChipSize, FilterChipVariant } from './FilterChips/FilterChips';
+export { Slider } from './Slider/Slider';
+export type { SliderMark, SliderProps, SliderValue } from './Slider/Slider';
+export { Select } from './Select/Select';
+export type { SelectProps } from './Select/Select';
+export { MultiSelect } from './MultiSelect/MultiSelect';
+export type { MultiSelectProps } from './MultiSelect/MultiSelect';
+export { Combobox, defaultComboboxFilter } from './Combobox/Combobox';
+export type { ComboboxProps } from './Combobox/Combobox';
+export { Listbox, ListboxPopover } from './Listbox/Listbox';
+export type { ListAction, ListOption, OptionState } from './Listbox/Listbox';
+export { Toaster, toast } from './Toast';
+export type { ToastAction, ToastContent, ToastData, ToastOptions, ToastType, ToasterPosition, ToasterProps } from './Toast';
+export { OtpInput } from './OtpInput/OtpInput';
+export type { OtpInputProps, OtpPattern } from './OtpInput/OtpInput';
+export { Skeleton, SkeletonCircle, SkeletonGroup, SkeletonText } from './Skeleton/Skeleton';
+export type { SkeletonAnimation, SkeletonGroupProps, SkeletonProps, SkeletonTextProps } from './Skeleton/Skeleton';
+export { EmptyState } from './EmptyState/EmptyState';
+export type { EmptyStateProps, EmptyStateTone } from './EmptyState/EmptyState';
+export { Card, CardBody, CardFooter, CardHeader, CardMedia } from './Card/Card';
+export type { CardFooterProps, CardHeaderProps, CardPadding, CardProps, CardVariant } from './Card/Card';
+export { CardFrame } from './CardFrame/CardFrame';
+export type { CardFrameProps } from './CardFrame/CardFrame';
+export { ScaledPreview } from './ScaledPreview/ScaledPreview';
+export type { ScaledPreviewProps, ScaledPreviewTone } from './ScaledPreview/ScaledPreview';
+export { CodeBlock } from './CodeBlock/CodeBlock';
+export type { CodeBlockProps } from './CodeBlock/CodeBlock';
+export type { CodeLanguage } from './CodeBlock/highlight';
+export { Breadcrumb } from './Breadcrumb/Breadcrumb';
+export type { BreadcrumbItem, BreadcrumbProps } from './Breadcrumb/Breadcrumb';
+export { Sidebar, SidebarGroup, SidebarItem } from './Sidebar/Sidebar';
+export type { SidebarGroupProps, SidebarItemProps, SidebarProps } from './Sidebar/Sidebar';
+export { AppShell } from './AppShell/AppShell';
+export type { AppShellProps } from './AppShell/AppShell';
+export { Table } from './Table/Table';
+export type { TableColumn, TableProps } from './Table/Table';
+export { List, ListItem } from './List/List';
+export type { ListItemProps, ListProps } from './List/List';
+export { Dialog } from './Dialog/Dialog';
+export type { DialogProps } from './Dialog/Dialog';
+export { AlertDialog } from './Dialog/AlertDialog';
+export type { AlertDialogProps } from './Dialog/AlertDialog';
+export { Popover } from './Popover/Popover';
+export type { PopoverProps } from './Popover/Popover';
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, } from './DropdownMenu/DropdownMenu';
+export type { DropdownMenuCheckboxItemProps, DropdownMenuItemProps, DropdownMenuProps, DropdownMenuSubProps } from './DropdownMenu/DropdownMenu';
+export { Tab, TabList, TabPanel, Tabs } from './Tabs/Tabs';
+export type { TabListProps, TabPanelProps, TabProps, TabsProps } from './Tabs/Tabs';
+export { Alert, Banner } from './Alert/Alert';
+export type { AlertProps, AlertTone, BannerProps } from './Alert/Alert';
+export { Accordion, AccordionItem, Collapsible } from './Accordion/Accordion';
+export type { AccordionItemProps, AccordionProps, CollapsibleProps } from './Accordion/Accordion';
+export { Dropzone, matchesAccept } from './Dropzone/Dropzone';
+export type { DropzoneProps } from './Dropzone/Dropzone';
+export { FileUpload, formatBytes } from './FileUpload/FileUpload';
+export type { FileUploadProps, UploadHandler, UploadItem, UploadStatus } from './FileUpload/FileUpload';
+export { ProgressTracker } from './ProgressTracker/ProgressTracker';
+export type { ProgressTrackerProps, TrackerStep } from './ProgressTracker/ProgressTracker';
+export { DataGrid } from './DataGrid/DataGrid';
+export type { DataGridProps } from './DataGrid/DataGrid';
+export type { GridAggregate, GridCellEdit, GridColumn, GridColumnType, GridDensity, GridFilter, GridFilterOp, GridNumberFormat, GridOption, GridRow, GridSort, GridView, } from './DataGrid/types';
+export { DEFAULT_VIEW as DEFAULT_GRID_VIEW } from './DataGrid/types';
+export { Calendar } from './Calendar/Calendar';
+export type { CalendarProps, DateRange } from './Calendar/Calendar';
+export { DatePicker, DateRangePicker } from './Calendar/DatePicker';
+export type { DatePickerProps, DateRangePickerProps } from './Calendar/DatePicker';
+export { DEFAULT_DATE_PRESETS, formatDate, formatMonth } from './Calendar/date';
+export type { DatePreset } from './Calendar/date';
+export { LineChart } from './LineChart/LineChart';
+export type { LineChartProps, LineChartRow, LineSeries } from './LineChart/LineChart';
+export { BarChart } from './BarChart/BarChart';
+export type { BarChartProps, BarChartRow, BarSeries } from './BarChart/BarChart';
+export { PieChart } from './PieChart/PieChart';
+export type { PieCenterContext, PieChartProps, PieSlice } from './PieChart/PieChart';
+export { ChatComposer } from './ChatComposer/ChatComposer';
+export type { ChatComposerProps } from './ChatComposer/ChatComposer';
+export { ChartLegend, ChartTooltip } from './Chart/ChartParts';
+export type { ChartLegendItem, ChartLegendProps, ChartTooltipRow } from './Chart/ChartParts';
+export type { ChartRow, ChartSeries } from './Chart/chart';
+export { Sparkbar } from './Sparkbar/Sparkbar';
+export type { SparkbarProps } from './Sparkbar/Sparkbar';
+export { Timeline, TimelineBar, TimelineRow } from './Timeline/Timeline';
+export type { TimelineBarProps, TimelineBarTone, TimelineBarVariant, TimelineMarker, TimelineProps, TimelineRowProps, TimelineTone } from './Timeline/Timeline';
+export { formatClock, useTimelineScale } from './Timeline/scale';
+export type { TimelineScale } from './Timeline/scale';
+export { formatOffset } from './Timeline/scale';
+export type { TimelineBarSegment, TimelineDensity, TimelineLink } from './Timeline/Timeline';
+export { Stat, StatGroup } from './Stat/Stat';
+export type { StatGroupProps, StatLayout, StatProps, StatSize } from './Stat/Stat';
+export { TREE_ROW_HEIGHT, TreeItem, TreeView, flattenTree } from './TreeView/TreeView';
+export type { TreeDensity, TreeItemProps, TreeItemState, TreeNode, TreeRow, TreeViewProps } from './TreeView/TreeView';
+export { TreeDiagram, TreeDiagramToggle } from './TreeDiagram/TreeDiagram';
+export type { TreeDiagramNode, TreeDiagramNodeState, TreeDiagramProps, TreeDiagramToggleProps } from './TreeDiagram/TreeDiagram';
+export { Comment, CommentThread } from './Comment/Comment';
+export type { CommentProps, CommentThreadProps } from './Comment/Comment';
+export { ChatBubble, ChatBubbleGroup } from './ChatBubble/ChatBubble';
+export { formatChatTime } from './ChatBubble/formatChatTime';
+export type { ChatBubbleGroupProps, ChatBubblePosition, ChatBubbleProps, ChatBubbleSide, ChatBubbleStatus, ChatBubbleTone } from './ChatBubble/ChatBubble';
+export { NoticeStack } from './NoticeStack/NoticeStack';
+export type { NoticeItem, NoticeStackProps } from './NoticeStack/NoticeStack';
+export { CommandMenu, defaultCommandFilter } from './CommandMenu/CommandMenu';
+export type { CommandGroup, CommandItem, CommandMenuProps } from './CommandMenu/CommandMenu';
+export { DescriptionItem, DescriptionList, DescriptionSection } from './DescriptionList/DescriptionList';
+export type { DescriptionItemProps, DescriptionListAlign, DescriptionListItem, DescriptionListLabelStyle, DescriptionListLayout, DescriptionListProps, DescriptionListSize, DescriptionListVariant, DescriptionSectionProps, } from './DescriptionList/DescriptionList';
+export { Highlight } from './Highlight/Highlight';
+export type { HighlightProps, HighlightTone } from './Highlight/Highlight';
+export { FileChip } from './FileChip/FileChip';
+export type { FileChipProps, FileChipVariant } from './FileChip/FileChip';
+export type { ChartTooltipProps } from './Chart/ChartParts';
+export type { ChartTone } from './Chart/chart';
+export type { LineChartBand, LineChartReferenceLine } from './LineChart/LineChart';
+export type { TrackerGroup } from './ProgressTracker/ProgressTracker';
+export { ActionBar } from './ActionBar/ActionBar';
+export type { ActionBarProps } from './ActionBar/ActionBar';
+export { NumberStepper } from './NumberStepper/NumberStepper';
+export type { NumberStepperProps } from './NumberStepper/NumberStepper';
+export { SplitView } from './SplitView/SplitView';
+export type { SplitViewProps } from './SplitView/SplitView';
+export { InlineDiff } from './InlineDiff/InlineDiff';
+export type { InlineDiffProps } from './InlineDiff/InlineDiff';
+export { useDiffReview } from './InlineDiff/useDiffReview';
+export type { DiffReview, DiffReviewOptions } from './InlineDiff/useDiffReview';
+export { applyDiffDecisions, diffWords, listDiffChanges, resolveDiffSegments, tokenizeWords } from './InlineDiff/diff';
+export type { DiffChange, DiffDecision, DiffDecisions, DiffSegment, DiffSegmentType, ResolvedDiffSegment } from './InlineDiff/diff';
+export { StepList, StepListItem } from './StepList/StepList';
+export type { StepListConnector, StepListDensity, StepListItemProps, StepListMarker, StepListProps, StepListSize, StepListStatus, StepListStep, } from './StepList/StepList';
+export { Marker } from './Marker/Marker';
+export type { MarkerProps, MarkerTone } from './Marker/Marker';
+export { BarList } from './BarList/BarList';
+export type { BarListItem, BarListProps, BarListSize, BarListSortOrder, BarListTone } from './BarList/BarList';
+export { Tracker } from './Tracker/Tracker';
+export type { TrackerBlock, TrackerProps, TrackerSize, TrackerTone } from './Tracker/Tracker';
+export { AreaChart } from './AreaChart/AreaChart';
+export type { AreaChartProps, AreaChartType } from './AreaChart/AreaChart';
+export { SparkArea, SparkChart, SparkLine } from './SparkChart/SparkChart';
+export type { SparkAreaProps, SparkChartProps, SparkLineProps } from './SparkChart/SparkChart';
+export { sparkTrend } from './SparkChart/spark';
+export type { SparkTone } from './SparkChart/spark';
+export { ScatterChart } from './ScatterChart/ScatterChart';
+export type { ScatterCategory, ScatterChartProps, ScatterChartRow, ScatterReferenceLine } from './ScatterChart/ScatterChart';
+export { FunnelChart } from './FunnelChart/FunnelChart';
+export type { FunnelChartProps } from './FunnelChart/FunnelChart';
+export { funnelStats } from './FunnelChart/funnel';
+export type { FunnelCalculateFrom, FunnelStep, FunnelStepStats } from './FunnelChart/funnel';
+export { PhoneInput, PHONE_COUNTRIES, formatPhone, toE164 } from './PhoneInput/PhoneInput';
+export type { PhoneCountry, PhoneInputProps } from './PhoneInput/PhoneInput';
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, } from './ContextMenu/ContextMenu';
+export type { ContextMenuProps } from './ContextMenu/ContextMenu';
+export { Menubar, MenubarCheckboxItem, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarSub, } from './Menubar/Menubar';
+export type { MenubarMenuProps, MenubarProps } from './Menubar/Menubar';
+export { NavigationMenu, NavigationMenuFeature, NavigationMenuGroup, NavigationMenuItem, NavigationMenuLink, } from './NavigationMenu/NavigationMenu';
+export type { NavigationMenuFeatureProps, NavigationMenuGroupProps, NavigationMenuItemProps, NavigationMenuLinkProps, NavigationMenuProps, } from './NavigationMenu/NavigationMenu';
+export { Drawer, Sheet } from './Drawer/Drawer';
+export type { DrawerProps, DrawerSide, DrawerSize, SheetProps } from './Drawer/Drawer';
+export { HoverCard } from './HoverCard/HoverCard';
+export type { HoverCardMetaItem, HoverCardProps } from './HoverCard/HoverCard';
+export { Pagination } from './Pagination/Pagination';
+export { paginationRange } from './Pagination/paginationRange';
+export type { PaginationItem } from './Pagination/paginationRange';
+export type { PaginationProps, PaginationRangeInfo, PaginationSize } from './Pagination/Pagination';
+export { Toolbar, ToolbarButton, ToolbarSeparator, ToolbarSpacer } from './Toolbar/Toolbar';
+export type { ToolbarButtonProps, ToolbarProps, ToolbarSize, ToolbarVariant } from './Toolbar/Toolbar';
+export { KanbanBoard } from './Kanban/Kanban';
+export type { KanbanBoardProps, KanbanCardState, KanbanColumn } from './Kanban/Kanban';
+export { locateKanbanItem, moveKanbanItem } from './Kanban/move';
+export type { KanbanItem, KanbanMove, KanbanPosition, KanbanValue } from './Kanban/move';
+export { KanbanCard } from './Kanban/KanbanCard';
+export type { KanbanCardProps, KanbanLabel } from './Kanban/KanbanCard';
+export { ScrollArea } from './ScrollArea/ScrollArea';
+export type { ScrollAreaOrientation, ScrollAreaProps } from './ScrollArea/ScrollArea';
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './Resizable/Resizable';
+export type { ResizableDirection, ResizableHandleProps, ResizablePanelGroupProps, ResizablePanelProps } from './Resizable/Resizable';
+export { CHART_COLOR_PRESETS, ColorField, ColorPicker } from './ColorPicker/ColorPicker';
+export type { ColorFieldProps, ColorPickerProps, ColorPreset } from './ColorPicker/ColorPicker';
+export { formatColor, formatHex, formatHsl, formatRgb, hslToRgb, hsvToRgb, normalizeHex, parseColor, rgbToHsl, rgbToHsv } from './ColorPicker/color';
+export type { ColorFormat, Hsla, Hsva, Rgba } from './ColorPicker/color';
+export { Rating } from './Rating/Rating';
+export type { RatingProps, RatingSize, RatingTone } from './Rating/Rating';
+export { TagInput } from './TagInput/TagInput';
+export type { TagInputProps, TagRejectReason } from './TagInput/TagInput';
+export { TimePicker } from './TimePicker/TimePicker';
+export type { TimePickerProps } from './TimePicker/TimePicker';
+export { formatDuration, formatTime, minutesToTime, parseTimeInput, timeToMinutes } from './TimePicker/time';
+export { SocialLoginButton } from './SocialLoginButton/SocialLoginButton';
+export type { SocialLoginAction, SocialLoginButtonProps, SocialProvider } from './SocialLoginButton/SocialLoginButton';

package/lib/types/hooks/index.d.ts

@@ -0,0 +1,17 @@
+export { useControllableState } from './useControllableState';
+export { useSelection } from './useSelection';
+export type { MultipleSelectionProps, SelectionProps, SelectionValue, SingleSelectionProps } from './useSelection';
+export { useFloating } from './useFloating';
+export type { FloatingOptions } from './useFloating';
+export { useDismiss } from './useDismiss';
+export { usePresence } from './usePresence';
+export { usePressToOpen } from './usePressToOpen';
+export { TIMING } from './timing';
+export { useFocusTrap, focusableIn } from './useFocusTrap';
+export { useScrollLock } from './useScrollLock';
+export { useCountdown } from './useCountdown';
+export type { CountdownOptions, CountdownState } from './useCountdown';
+export { useDigitInput } from './useDigitInput';
+export type { DigitInputOptions } from './useDigitInput';
+export { useElapsed } from './useElapsed';
+export type { ElapsedInput, ElapsedOptions, ElapsedState } from './useElapsed';

package/lib/types/hooks/timing.d.ts

@@ -0,0 +1,29 @@
+/** Interaction timings (ms). Components read these instead of inventing their own numbers. */
+export declare const TIMING: {
+    /** First tooltip waits this long so passing over a button doesn't flash one. */
+    readonly tooltipDelay: 500;
+    /** Moving to a neighbour within this window after a tooltip closes opens the next one at once. */
+    readonly tooltipSkip: 300;
+    /** Pointer must rest this long before a hover-to-open surface (collapsed sidebar, preview) opens. */
+    readonly hoverIntent: 200;
+    /** Leaving a hover-opened surface closes it only after this grace period. */
+    readonly hoverGrace: 300;
+    /** Wait for a second click only when single and double click truly conflict. */
+    readonly doubleClick: 250;
+    /** How long an "실행 취소" toast stays before the action commits. */
+    readonly undo: 6000;
+    /** Pointer travel (px) that turns a press on a menu trigger into press-drag-release. */
+    readonly dragThreshold: 4;
+    /** Typed letters within this window build one typeahead query (tree, list); after it the query starts over. */
+    readonly typeahead: 500;
+    /** Holding a stepper button this long starts auto-repeat; a shorter press is one ordinary click. */
+    readonly repeatDelay: 400;
+    /** Interval between auto-repeat steps while a stepper button stays pressed. */
+    readonly repeatInterval: 60;
+    /** How long a button shows its pressed state when fired by its keyboard shortcut. */
+    readonly pressFlash: 140;
+    /** Countdowns re-check the clock this often, so a second never lags behind visibly. */
+    readonly countdownTick: 250;
+    /** Touch press held this long opens a context menu (the touch stand-in for right click). */
+    readonly longPress: 500;
+};

package/lib/types/hooks/useControllableState.d.ts

@@ -0,0 +1,5 @@
+/**
+ * State that is either controlled (`value` + `onChange`) or owned by the component
+ * (`defaultValue`). `undefined` means uncontrolled, so use `null` for "controlled, empty".
+ */
+export declare function useControllableState<T>(value: T | undefined, defaultValue: T, onChange?: (next: T) => void): readonly [T, (next: T) => void];

package/lib/types/hooks/useCountdown.d.ts

@@ -0,0 +1,19 @@
+export interface CountdownOptions {
+    /** Pauses the countdown where it is (false) and resumes from there (true). */
+    running?: boolean;
+    /** Called once when the countdown reaches 0. */
+    onComplete?: () => void;
+}
+export interface CountdownState {
+    /** Whole seconds left, rounded up (8 → 7 → … → 0). */
+    remaining: number;
+    done: boolean;
+    /** Starts again from `seconds` (or a new number of seconds). */
+    restart: (seconds?: number) => void;
+}
+/**
+ * Counts down from `seconds` to 0. The clock is only read inside effects and timers, never during
+ * render, and each tick compares against a deadline so the count doesn't drift. Changing `seconds`
+ * starts over from the new value.
+ */
+export declare function useCountdown(seconds: number, { running, onComplete }?: CountdownOptions): CountdownState;

package/lib/types/hooks/useDigitInput.d.ts

@@ -0,0 +1,24 @@
+import { type ChangeEvent, type KeyboardEvent } from 'react';
+export interface DigitInputOptions {
+    /** Raw digits only ("1200000"), never the formatted text. */
+    digits: string;
+    onDigitsChange: (digits: string) => void;
+    /** Turns the digits into what the field shows ("1,200,000", "010-1234-5678"). Defaults to the digits as they are. */
+    format?: (digits: string) => string;
+    /** Digits past this are dropped. */
+    maxDigits?: number;
+}
+/**
+ * A text field that only takes digits and shows them formatted (thousands separators, phone
+ * dashes). Letters and symbols never appear, the caret stays after the same digit while the
+ * separators move around it, and Backspace on a separator deletes the digit before it.
+ * Spread the result on `Input` (or a plain `<input>`).
+ */
+export declare function useDigitInput({ digits, onDigitsChange, format, maxDigits }: DigitInputOptions): {
+    ref: import("react").RefObject<HTMLInputElement | null>;
+    value: string;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+    inputMode: "numeric";
+    autoComplete: string;
+};

package/lib/types/hooks/useDismiss.d.ts

@@ -0,0 +1,3 @@
+import { type RefObject } from 'react';
+/** Calls `onDismiss` on a pointer press outside every element in `refs` while `open`. */
+export declare function useDismiss(open: boolean, refs: Array<RefObject<HTMLElement | null>>, onDismiss: () => void): void;

package/lib/types/hooks/useElapsed.d.ts

@@ -0,0 +1,28 @@
+/** A moment: a Date, an epoch timestamp in ms, or an ISO string. */
+export type ElapsedInput = Date | number | string;
+export interface ElapsedOptions {
+    /** false pauses where it is; true resumes. With `startedAt`, resuming catches up with the clock. */
+    running?: boolean;
+    /**
+     * When the work finished. With `startedAt` the hook stops ticking and returns the final
+     * `endedAt − startedAt` — no clock involved, so it's the same on every render.
+     */
+    endedAt?: ElapsedInput;
+    /** Without `startedAt`: seconds already on the stopwatch when it starts. */
+    initial?: number;
+}
+export interface ElapsedState {
+    /** Whole seconds that have passed (0 → 1 → … → 1060). */
+    elapsed: number;
+    /** Whether it is ticking right now. */
+    running: boolean;
+    /** Without `startedAt`: puts the stopwatch back to 0 (it keeps running if `running`). */
+    reset: () => void;
+}
+/**
+ * Counts up — the mirror of useCountdown. With `startedAt` it shows the wall-clock time since that
+ * moment ("시작 오후 9:12 · 17:40"); without it, it's a stopwatch from `initial` that pauses and
+ * resumes. The clock is only read inside effects and timers, never during render. Each tick
+ * re-reads the clock and waits for the next whole second, so the count doesn't drift.
+ */
+export declare function useElapsed(startedAt?: ElapsedInput, { running, endedAt, initial }?: ElapsedOptions): ElapsedState;

package/lib/types/hooks/useFloating.d.ts

@@ -0,0 +1,21 @@
+import { type CSSProperties, type RefObject } from 'react';
+export interface FloatingOptions {
+    /** Gap between anchor and panel. */
+    offset?: number;
+    /** Panel width follows the anchor width. */
+    matchWidth?: boolean;
+    /** Upper bound for the panel height; the actual height also respects viewport space. */
+    maxHeight?: number;
+    /** Horizontal alignment to the anchor when the panel has its own width (needs `panelRef`). */
+    align?: 'start' | 'center' | 'end';
+    /** The floating element, measured for `align` and to keep it inside the viewport. */
+    panelRef?: RefObject<HTMLElement | null>;
+}
+/**
+ * Positions a `position: fixed` panel under its anchor (or above it when there is more room
+ * there), so it escapes `overflow: hidden` parents. Tracks scroll and resize while open.
+ */
+export declare function useFloating(anchorRef: RefObject<HTMLElement | null>, open: boolean, options?: FloatingOptions): {
+    style: CSSProperties;
+    side: "bottom" | "top";
+};