@iamfiro/design 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,77 @@
+import type { ReactNode } from 'react';
+import type { Tone } from '../../primitives';
+export type GridColumnType = 'text' | 'number' | 'select' | 'multiSelect' | 'checkbox' | 'date' | 'url';
+/** One choice of a select / multiSelect column. The label is also the stored value (like Notion). */
+export interface GridOption {
+    label: string;
+    tone?: Tone;
+}
+/** A row is any object with a stable string id; cell values live under each column's key. */
+export interface GridRow {
+    id: string;
+    [key: string]: unknown;
+}
+export type GridNumberFormat = 'plain' | 'comma' | 'percent' | 'won' | 'usd';
+export type GridAggregate = 'none' | 'count' | 'empty' | 'filled' | 'percentEmpty' | 'percentFilled' | 'unique' | 'sum' | 'avg' | 'median' | 'min' | 'max' | 'range' | 'checked' | 'unchecked' | 'percentChecked' | 'earliest' | 'latest';
+export interface GridColumn<R extends GridRow = GridRow> {
+    /** Field the cells read and write (`row[key]`). */
+    key: string;
+    name: string;
+    type?: GridColumnType;
+    /** px, default 180. */
+    width?: number;
+    minWidth?: number;
+    /** Frozen on the left while scrolling sideways. */
+    pinned?: boolean;
+    hidden?: boolean;
+    /** Wrap long text instead of cutting it with "…" (turns row virtualization off). */
+    wrap?: boolean;
+    align?: 'start' | 'center' | 'end';
+    /** select / multiSelect choices. Typing a new label creates one unless `creatable` is false. */
+    options?: GridOption[];
+    creatable?: boolean;
+    /** number columns */
+    format?: GridNumberFormat;
+    decimals?: number;
+    /** Footer calculation. */
+    aggregate?: GridAggregate;
+    readOnly?: boolean;
+    /** Users can't delete it or change its type. */
+    locked?: boolean;
+    /** Custom cell content. The editor still follows `type`. */
+    render?: (value: unknown, row: R) => ReactNode;
+    /** Return a message to reject an edit (the cell shakes and stays in edit mode). */
+    validate?: (value: unknown, row: R) => string | null | undefined;
+}
+export interface GridSort {
+    key: string;
+    dir: 'asc' | 'desc';
+}
+export type GridFilterOp = 'contains' | 'notContains' | 'is' | 'isNot' | 'startsWith' | 'endsWith' | 'gt' | 'lt' | 'gte' | 'lte' | 'before' | 'after' | 'checked' | 'unchecked' | 'empty' | 'notEmpty';
+export interface GridFilter {
+    id: string;
+    key: string;
+    op: GridFilterOp;
+    value?: string;
+}
+export type GridDensity = 'compact' | 'default' | 'comfortable';
+/** Everything about how rows are shown (not the data itself). Save it to keep a "view". */
+export interface GridView {
+    sorts: GridSort[];
+    filters: GridFilter[];
+    filterMode: 'and' | 'or';
+    groupBy: string | null;
+    /** Collapsed group keys. */
+    collapsed: string[];
+    search: string;
+    density: GridDensity;
+    rowNumbers: boolean;
+    gridlines: boolean;
+}
+export declare const DEFAULT_VIEW: GridView;
+export interface GridCellEdit<R extends GridRow = GridRow> {
+    row: R;
+    column: GridColumn<R>;
+    value: unknown;
+    previous: unknown;
+}

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

@@ -0,0 +1,77 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type Space, type TextTone } from '../../primitives';
+import './DescriptionList.css';
+export type DescriptionListLayout = 'stacked' | 'inline';
+export type DescriptionListVariant = 'plain' | 'soft';
+export type DescriptionListLabelStyle = 'overline' | 'muted';
+export type DescriptionListSize = 'sm' | 'md' | 'lg';
+export type DescriptionListAlign = 'end' | 'start';
+export interface DescriptionListItem {
+    /** Stable key; falls back to the position. */
+    id?: string;
+    label: ReactNode;
+    value: ReactNode;
+    /** Leading icon before the label (a lucide icon), drawn muted at 16px (14px stacked). */
+    icon?: ReactNode;
+    /** Color of the value, e.g. danger for "1 오류". */
+    tone?: TextTone;
+    /** Columns this item spans in the grid. */
+    span?: number;
+}
+export interface DescriptionListProps {
+    /** The pairs; or pass `<DescriptionItem>` children. */
+    items?: DescriptionListItem[];
+    children?: ReactNode;
+    /** stacked: label above the value, in a grid · inline: one row per pair, label left and value right. */
+    layout?: DescriptionListLayout;
+    /** A fixed column count, or a full `grid-template-columns` string. Default: 3 stacked, 1 inline. */
+    columns?: number | string;
+    /** Responsive: as many columns as fit, each at least this wide (px). Overrides `columns`. */
+    minItemWidth?: number;
+    /** plain: nothing around it · soft: a gray panel (--surface-active, radius 12, compact padding). */
+    variant?: DescriptionListVariant;
+    /** overline: small uppercase-style labels ("소요 시간") · muted: quiet caption labels ("금액"). */
+    labelStyle?: DescriptionListLabelStyle;
+    /** Value size — the same number roles Stat uses (sm 14 · md 18 · lg 28). Inline rows use label roles. */
+    size?: DescriptionListSize;
+    /**
+     * Inline rows only. end: the value sits at the row's right edge ("비용 ₩42,000") ·
+     * start: values line up in a second column right after the widest label ("받는 사람 / 제목 / 첨부").
+     */
+    align?: DescriptionListAlign;
+    /** Space between columns. */
+    gap?: Space;
+    /** Space between rows. Default: 4 stacked, 2 inline. */
+    rowGap?: Space;
+    'aria-label'?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Key–value pairs as a real `<dl>`: labels (overline or muted) above values in a grid, or one row per
+ * pair. `soft` puts it in a small gray panel, the way detail popovers show durations and costs.
+ * Pure Box / Grid / Stack / Inline / Text.
+ */
+export declare function DescriptionList({ items, children, layout, columns, minItemWidth, variant, labelStyle, size, align, gap, rowGap, 'aria-label': ariaLabel, className, style, }: DescriptionListProps): import("react").JSX.Element;
+export interface DescriptionItemProps {
+    label: ReactNode;
+    /** Leading icon before the label, drawn muted at 16px (14px stacked). */
+    icon?: ReactNode;
+    /** The value. */
+    children: ReactNode;
+    tone?: TextTone;
+    span?: number;
+    className?: string;
+}
+/** One label + value pair inside a DescriptionList (reads its layout, label style, size and alignment). */
+export declare function DescriptionItem({ label, icon, children, tone, span, className }: DescriptionItemProps): import("react").JSX.Element;
+export interface DescriptionSectionProps {
+    /** Overline heading ("입력", "결과"). */
+    title: ReactNode;
+    /** Body text, or any content. */
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/** An overline heading over a short body — the "입력 / 결과" blocks under a detail grid. */
+export declare function DescriptionSection({ title, children, className, style }: DescriptionSectionProps): import("react").JSX.Element;

package/lib/types/components/Dialog/AlertDialog.d.ts

@@ -0,0 +1,26 @@
+import { type MouseEvent, type ReactElement, type ReactNode } from 'react';
+export interface AlertDialogProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger?: ReactElement<{
+        onClick?: (e: MouseEvent) => void;
+    }>;
+    title: ReactNode;
+    description?: ReactNode;
+    /** danger: red confirm, warning icon, focus starts on 취소 so Enter doesn't destroy anything. */
+    tone?: 'default' | 'danger';
+    /** Name the action — "삭제", "보내기" — never "확인". */
+    confirmLabel: ReactNode;
+    cancelLabel?: ReactNode;
+    /** May be async: the button spins and the dialog stays locked until it settles; a throw keeps it open. */
+    onConfirm: () => void | Promise<void>;
+    /** Ask the user to type this exact text first (e.g. the project name) for the most destructive actions. */
+    confirmationText?: string;
+    children?: ReactNode;
+}
+/**
+ * The confirm step for actions that can't be undone (permanent delete, payment, mass send).
+ * For anything undoable, run it right away and offer `toast.undo()` instead.
+ */
+export declare function AlertDialog({ open: openProp, defaultOpen, onOpenChange, trigger, title, description, tone, confirmLabel, cancelLabel, onConfirm, confirmationText, children, }: AlertDialogProps): import("react").JSX.Element;

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

@@ -0,0 +1,42 @@
+import { type ReactNode, type RefObject } from 'react';
+import { type ModalTrigger } from './modal';
+import './Dialog.css';
+export interface DialogProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** A button that opens the dialog (its own onClick still runs). */
+    trigger?: ModalTrigger;
+    title: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    /** Buttons row at the bottom (right-aligned). Ignored with `bare`. */
+    footer?: ReactNode;
+    /** Panel width: 400 / 520 / 720px. Becomes a bottom sheet on phones. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Close on Esc and on a click outside. Turn off while something is saving. */
+    dismissible?: boolean;
+    /** Show the × in the corner. Never shown with `bare`. */
+    showClose?: boolean;
+    /** Where focus lands when it opens; defaults to the first focusable element. */
+    initialFocus?: RefObject<HTMLElement | null>;
+    /**
+     * Children go straight into the panel: no header, body or footer wrappers, no padding, no ×.
+     * The panel is a clipping flex column, so a child can take `min-height: 0` and scroll.
+     * `title` (and `description`) still name the dialog but are visually hidden.
+     */
+    bare?: boolean;
+    /** Keep the normal layout but visually hide the title and description (screen readers still read them). */
+    hideTitle?: boolean;
+    /**
+     * center: in the middle (a bottom sheet on phones). top: about 12vh from the top so the panel
+     * doesn't jump as its height changes (command palettes); stays a floating panel on phones.
+     */
+    placement?: 'center' | 'top';
+    className?: string;
+}
+/**
+ * A modal over the page: focus is trapped inside, the page behind can't scroll, Esc or a click
+ * outside closes it, and focus returns to the trigger. Opens and closes with a soft scale.
+ */
+export declare function Dialog({ open: openProp, defaultOpen, onOpenChange, trigger, title, description, children, footer, size, dismissible, showClose, initialFocus, bare, hideTitle, placement, className, }: DialogProps): import("react").JSX.Element;

package/lib/types/components/Dialog/modal.d.ts

@@ -0,0 +1,38 @@
+import { type KeyboardEvent, type MouseEvent, type PointerEvent, type ReactElement, type RefObject } from 'react';
+export type ModalTrigger = ReactElement<{
+    onClick?: (e: MouseEvent) => void;
+}>;
+interface ModalLayerOptions {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    /** Esc and outside press close it. */
+    dismissible: boolean;
+    /** Exit animation length (keeps the layer mounted while it plays). */
+    exitMs: number;
+    panelRef: RefObject<HTMLElement | null>;
+    initialFocus?: RefObject<HTMLElement | null>;
+    /** Modal: lock page scroll and trap focus. Off for a panel the page stays usable beside. */
+    modal?: boolean;
+}
+/**
+ * The shared machinery of a modal layer (Dialog, Drawer): presence for the exit animation,
+ * scroll lock, focus trap with focus return, Esc, and closing on a press that both starts and
+ * ends outside the panel (dragging out of a text field doesn't count).
+ */
+export declare function useModalLayer({ open, setOpen, dismissible, exitMs, panelRef, initialFocus, modal }: ModalLayerOptions): {
+    presence: {
+        mounted: boolean;
+        closing: boolean;
+    };
+    close: () => void;
+    onKeyDown: (e: KeyboardEvent) => void;
+    outsideProps: {
+        onPointerDown: (e: PointerEvent) => void;
+        onClick: (e: MouseEvent) => void;
+    };
+};
+/** Clones a trigger button so it opens the layer (its own onClick still runs; preventDefault stops opening). */
+export declare function modalTrigger(trigger: ModalTrigger | undefined, open: boolean, onOpen: () => void): ReactElement<{
+    onClick?: (e: MouseEvent) => void;
+}, string | import("react").JSXElementConstructor<any>> | undefined;
+export {};

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

@@ -0,0 +1,62 @@
+import { type ReactNode, type RefObject } from 'react';
+import { type ModalTrigger } from '../Dialog/modal';
+import './Drawer.css';
+export type DrawerSide = 'right' | 'left' | 'top' | 'bottom';
+export type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
+export interface DrawerProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** A button that opens the drawer (its own onClick still runs). */
+    trigger?: ModalTrigger;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Body. Scrolls on its own; the header and footer stay put. */
+    children?: ReactNode;
+    /** Buttons row pinned to the bottom (right-aligned). */
+    footer?: ReactNode;
+    /** Edge it slides in from. */
+    side?: DrawerSide;
+    /**
+     * left / right: width 360 · 440 · 640px · the whole screen.
+     * top / bottom: max height 50 · 75 · 92% of the screen · the whole screen.
+     */
+    size?: DrawerSize;
+    /** Esc, a click outside, the × and dragging down close it. Turn off while something is saving. */
+    dismissible?: boolean;
+    /** Show the × in the corner. */
+    showClose?: boolean;
+    /** Where focus lands when it opens; defaults to the first focusable element. */
+    initialFocus?: RefObject<HTMLElement | null>;
+    /** Visually hide the title and description (screen readers still read them). */
+    hideTitle?: boolean;
+    /**
+     * true: dims the page, traps focus and locks scrolling (like Dialog).
+     * false: no overlay — the page beside it stays usable (an inspector panel). Esc still closes it.
+     */
+    modal?: boolean;
+    /** Float 8px off the edges with every corner rounded, instead of sitting flush against the edge. */
+    inset?: boolean;
+    /** Drag handle (top / bottom only). Defaults to on for `side="bottom"`. Drag the handle or header to resize or dismiss. */
+    handle?: boolean;
+    /**
+     * Heights the sheet rests at, as fractions of its full height in ascending order (e.g. [0.5, 1]).
+     * Dragging settles on the nearest one (a flick moves on); the handle steps through them.
+     */
+    snapPoints?: number[];
+    /** Current snap point (controlled). */
+    snap?: number;
+    /** Snap point each time it opens (uncontrolled). Defaults to the largest. */
+    defaultSnap?: number;
+    onSnapChange?: (snap: number) => void;
+    className?: string;
+}
+/**
+ * A modal panel that slides in from an edge — filters, details, settings, a mobile action sheet.
+ * Shares Dialog's machinery (focus trap, scroll lock, Esc / outside close, focus return) and
+ * leaves by sliding back out the way it came. A bottom sheet can be dragged down to dismiss.
+ */
+export declare function Drawer({ open: openProp, defaultOpen, onOpenChange, trigger, title, description, children, footer, side, size, dismissible, showClose, initialFocus, hideTitle, modal, inset, handle: handleProp, snapPoints, snap: snapProp, defaultSnap, onSnapChange, className, }: DrawerProps): import("react").JSX.Element;
+export type SheetProps = Omit<DrawerProps, 'side'>;
+/** A bottom sheet: `Drawer side="bottom"` with a drag handle — drag down to dismiss, optional snap points. */
+export declare function Sheet(props: SheetProps): import("react").JSX.Element;

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

@@ -0,0 +1,97 @@
+import { type CSSProperties, type ReactNode, type RefObject } from 'react';
+import '../Popover/Popover.css';
+import './DropdownMenu.css';
+export interface DropdownMenuProps {
+    /** The button that opens the menu. */
+    trigger: ReactNode;
+    children: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    align?: 'start' | 'center' | 'end';
+    /** Minimum panel width in px. */
+    minWidth?: number;
+    'aria-label'?: string;
+}
+/**
+ * An action menu. A mouse press opens it at once and releasing over an item picks it
+ * (press-drag-release); a plain click leaves it open. Arrows, Home/End and letters move,
+ * Enter/Space pick, Esc closes. Submenus open on a short hover and stay open while you aim at them.
+ */
+export declare function DropdownMenu({ trigger, children, open: openProp, defaultOpen, onOpenChange, align, minWidth, 'aria-label': ariaLabel, }: DropdownMenuProps): import("react").JSX.Element;
+export declare namespace DropdownMenu {
+    var Item: typeof DropdownMenuItem;
+    var CheckboxItem: typeof DropdownMenuCheckboxItem;
+    var RadioGroup: typeof DropdownMenuRadioGroup;
+    var RadioItem: typeof DropdownMenuRadioItem;
+    var Label: typeof DropdownMenuLabel;
+    var Separator: typeof DropdownMenuSeparator;
+    var Sub: typeof DropdownMenuSub;
+}
+export interface MenuPanelProps {
+    id?: string;
+    panelRef: RefObject<HTMLDivElement | null>;
+    side: string;
+    closing: boolean;
+    style: CSSProperties;
+    onEscape: () => void;
+    /** ← on a row of this panel (submenu: back to its row; menubar: previous menu). */
+    onArrowLeft?: () => void;
+    /** → on a plain row of this panel (menubar: next menu). Submenu rows open their submenu instead. */
+    onArrowRight?: () => void;
+    onPointerEnter?: () => void;
+    className?: string;
+    children: ReactNode;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+export declare function MenuPanel({ id, panelRef, side, closing, style, onEscape, onArrowLeft, onArrowRight, onPointerEnter, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }: MenuPanelProps): import("react").ReactPortal;
+interface ItemBaseProps {
+    children: ReactNode;
+    icon?: ReactNode;
+    /** Second line in gray. */
+    description?: ReactNode;
+    /** Key names for the shortcut hint, e.g. ['mod', 'D']. */
+    shortcut?: string[];
+    disabled?: boolean;
+}
+export interface DropdownMenuItemProps extends ItemBaseProps {
+    onSelect?: () => void;
+    /** Red, for destructive actions. */
+    danger?: boolean;
+    /** Keep the menu open after picking (for repeated actions). */
+    keepOpen?: boolean;
+}
+export declare function DropdownMenuItem({ onSelect, danger, keepOpen, ...rest }: DropdownMenuItemProps): import("react").JSX.Element;
+export interface DropdownMenuCheckboxItemProps extends ItemBaseProps {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    /** Checkbox items keep the menu open by default so several can be toggled. */
+    closeOnSelect?: boolean;
+}
+export declare function DropdownMenuCheckboxItem({ checked, onCheckedChange, closeOnSelect, ...rest }: DropdownMenuCheckboxItemProps): import("react").JSX.Element;
+export declare function DropdownMenuRadioGroup({ value, onValueChange, label, children, }: {
+    value: string;
+    onValueChange: (value: string) => void;
+    label?: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function DropdownMenuRadioItem({ value, ...rest }: ItemBaseProps & {
+    value: string;
+}): import("react").JSX.Element;
+export declare function DropdownMenuLabel({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function DropdownMenuSeparator(): import("react").JSX.Element;
+export interface DropdownMenuSubProps {
+    label: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    children: ReactNode;
+}
+/**
+ * A nested menu. Opens after resting TIMING.hoverIntent on its row (or →/Enter); while the
+ * pointer travels diagonally toward it, rows it crosses don't steal the highlight.
+ */
+export declare function DropdownMenuSub({ label, icon, disabled, children }: DropdownMenuSubProps): import("react").JSX.Element;
+export {};

package/lib/types/components/DropdownMenu/menuCore.d.ts

@@ -0,0 +1,23 @@
+import { type PointerEvent, type RefObject } from 'react';
+/** Exit animation length of menu panels (matches .ds-floating[data-state='closed']). */
+export declare const MENU_EXIT_MS = 160;
+export declare const MENU_ITEM = "[data-menu-item]:not([aria-disabled=\"true\"])";
+export interface MenuCtx {
+    /** Close every level of the menu (after a pick, Tab, outside press). */
+    closeAll: (returnFocus?: boolean) => void;
+    /** While pointing toward an open submenu, other rows must not steal the highlight. */
+    isAimingAtSub: (x: number, y: number) => boolean;
+    setAim: (fn: ((x: number, y: number) => boolean) | null) => void;
+    /** Panels belonging to this menu (root + open subs), for outside-press checks. */
+    panels: Set<RefObject<HTMLElement | null>>;
+}
+export declare const MenuContext: import("react").Context<MenuCtx | null>;
+/** Builds the root menu state: submenu aim guard + the set of open panels (for outside-press checks). */
+export declare function useMenuRoot(closeAll: (returnFocus?: boolean) => void): MenuCtx;
+/** Enabled items of one panel (not its submenus), in order. */
+export declare const menuItems: (panel: HTMLElement | null) => HTMLElement[];
+/**
+ * Press-drag-release from a mouse press on a trigger: if the pointer travels and is released over
+ * a menu item (not a submenu row), that item is clicked.
+ */
+export declare function trackPressDragRelease(e: PointerEvent): void;

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

@@ -0,0 +1,30 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import './Dropzone.css';
+/** Whether a file matches an `<input accept>` string (`.pdf,image/*,text/csv`). Empty accepts everything. */
+export declare function matchesAccept(file: File, accept?: string): boolean;
+export interface DropzoneProps {
+    /** Files dropped or picked. Those that don't match `accept` come in `rejected` (the zone shakes). */
+    onFiles?: (accepted: File[], rejected: File[]) => void;
+    /** Same syntax as `<input accept>`. Checked for dropped files too. */
+    accept?: string;
+    /** Allow several files at once. */
+    multiple?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** Main line. Defaults to "여기에 파일을 끌어 놓거나 찾아보기". */
+    title?: ReactNode;
+    /** Gray line under the title (formats, size limit). */
+    description?: ReactNode;
+    /** md: centred with an illustration · sm: one compact row. */
+    size?: 'sm' | 'md';
+    /** Form field name for the hidden file input. */
+    name?: string;
+    className?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+}
+/**
+ * A dashed area that takes files by drag-and-drop, click, or Enter / Space.
+ * While files hover over it the sheets fan out and the area turns blue.
+ */
+export declare function Dropzone({ onFiles, accept, multiple, disabled, invalid, title, description, size, name, className, style, 'aria-label': ariaLabel, }: DropzoneProps): import("react").JSX.Element;

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

@@ -0,0 +1,26 @@
+import type { CSSProperties, ReactNode } from 'react';
+import './EmptyState.css';
+export type EmptyStateTone = 'default' | 'accent' | 'danger' | 'warning' | 'success';
+export interface EmptyStateProps {
+    /** An icon (lucide etc.) shown in a soft round badge, or your own illustration via `media`. */
+    icon?: ReactNode;
+    /** Replaces the icon badge entirely (illustration, image, Lottie…). */
+    media?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Buttons; the first is usually the primary action. */
+    actions?: ReactNode;
+    /** A small line under the actions (help link, shortcut hint…). */
+    footer?: ReactNode;
+    tone?: EmptyStateTone;
+    size?: 'sm' | 'md' | 'lg';
+    /** Left-aligned for use inside panels and tables. */
+    align?: 'center' | 'start';
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * "Nothing here yet" for lists, search results, errors and locked areas.
+ * Its parts rise in one after another when it appears.
+ */
+export declare function EmptyState({ icon, media, title, description, actions, footer, tone, size, align, className, style, }: EmptyStateProps): import("react").JSX.Element;

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

@@ -0,0 +1,32 @@
+import type { CSSProperties, MouseEvent, ReactNode } from 'react';
+import './FileChip.css';
+export type FileChipVariant = 'ghost' | 'soft';
+export interface FileChipProps {
+    /** File name; the extension stays visible while the rest truncates ("월간-정산-보고….pdf"). */
+    name: string;
+    /** Bytes (formatted with formatBytes) or a ready string ("1.2MB"). */
+    size?: number | string;
+    /** Makes it a link. */
+    href?: string;
+    /** With `href`: download instead of navigating (true, or a file name). */
+    download?: boolean | string;
+    target?: string;
+    /** Makes it a button (preview, open a drawer). */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /** clip: a paperclip (attachment in text) · file: the colored FileIcon · or your own icon. */
+    icon?: 'clip' | 'file' | ReactNode;
+    /** ghost: link-like, no fill until hover · soft: the small gray chip fill. */
+    variant?: FileChipVariant;
+    /** The name truncates past this width (px). */
+    maxWidth?: number;
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+}
+/**
+ * A compact attachment: paperclip (or FileIcon), a file name that truncates in the middle so the
+ * extension stays readable, and an optional size. A link with `href`, a button with `onClick`,
+ * plain text otherwise.
+ */
+export declare function FileChip({ name, size, href, download, target, onClick, icon, variant, maxWidth, disabled, className, style, 'aria-label': ariaLabel, }: FileChipProps): import("react").JSX.Element;

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

@@ -0,0 +1,52 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type UploadStatus = 'uploading' | 'done' | 'error';
+export interface UploadItem {
+    id: string;
+    name: string;
+    /** Bytes. */
+    size: number;
+    /** Bytes sent so far. */
+    loaded?: number;
+    status: UploadStatus;
+    /** Red line shown instead of the progress (status 'error'). */
+    error?: ReactNode;
+    /** The picked file. Items without one (validation errors, items from the server) can't be retried. */
+    file?: File;
+}
+export type UploadHandler = (file: File, ctx: {
+    onProgress: (loaded: number) => void;
+    signal: AbortSignal;
+}) => Promise<unknown>;
+export interface FileUploadProps {
+    /** Sends one file. Report bytes with `onProgress`, resolve when done, reject to show the error. `signal` aborts on ×. Without it, picked files are just listed. */
+    upload?: UploadHandler;
+    /** Rows (controlled). */
+    items?: UploadItem[];
+    defaultItems?: UploadItem[];
+    onItemsChange?: (items: UploadItem[]) => void;
+    /** Called when a row is removed with × (an upload in progress is aborted first). */
+    onRemove?: (item: UploadItem) => void;
+    /** Same syntax as `<input accept>`. Other files come in as "지원하지 않는 형식" rows. */
+    accept?: string;
+    /** Largest file in bytes. */
+    maxSize?: number;
+    /** Most files at once (failed rows don't count). */
+    maxFiles?: number;
+    multiple?: boolean;
+    disabled?: boolean;
+    /** Dropzone main line. */
+    title?: ReactNode;
+    /** Dropzone gray line. Defaults to the formats from `accept` and `maxSize`. */
+    description?: ReactNode;
+    /** The "업로드 중 · 1.2 / 8.1MB" line at the bottom. */
+    showSummary?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/** 4404019 → "4.2MB". */
+export declare function formatBytes(bytes: number): string;
+/**
+ * Drop files, watch each one upload, cancel or retry. Assembled from foundations:
+ * Card + Dropzone + List/ListItem + FileIcon + Progress + Text.
+ */
+export declare function FileUpload({ upload, items: itemsProp, defaultItems, onItemsChange, onRemove, accept, maxSize, maxFiles, multiple, disabled, title, description, showSummary, className, style, }: FileUploadProps): import("react").JSX.Element;

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

@@ -0,0 +1,37 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { type SelectionProps, type SelectionValue } from '../../hooks';
+import './FilterChips.css';
+export type FilterChipVariant = 'solid' | 'soft';
+export type FilterChipSize = 'sm' | 'md';
+export type FilterChipGroupProps<V extends SelectionValue> = SelectionProps<V> & {
+    /** solid: selected chip turns dark · soft: selected chip gets a blue tint */
+    variant?: FilterChipVariant;
+    size?: FilterChipSize;
+    disabled?: boolean;
+    /** Show a reset button once anything is selected. */
+    clearable?: boolean;
+    clearLabel?: ReactNode;
+    className?: string;
+    'aria-label'?: string;
+    children: ReactNode;
+};
+/** A row of filter chips sharing one selection (single or multiple). */
+export declare function FilterChipGroup<V extends SelectionValue>(props: FilterChipGroupProps<V>): import("react").JSX.Element;
+export declare namespace FilterChipGroup {
+    var Chip: typeof FilterChip;
+}
+export interface FilterChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+    /** Inside a FilterChipGroup: the value this chip toggles. */
+    value?: SelectionValue;
+    /** Standalone use: controlled pressed state. */
+    selected?: boolean;
+    onSelectedChange?: (selected: boolean) => void;
+    /** Shows an × button, e.g. for an applied filter like "상태: 진행 중". */
+    onRemove?: () => void;
+    removeLabel?: string;
+    icon?: ReactNode;
+    count?: number;
+    variant?: FilterChipVariant;
+    size?: FilterChipSize;
+}
+export declare function FilterChip({ value, selected: selectedProp, onSelectedChange, onRemove, removeLabel, icon, count, variant: variantProp, size: sizeProp, disabled: disabledProp, className, children, onClick, ...rest }: FilterChipProps): import("react").JSX.Element;