@iamfiro/design 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,7 @@
+import { type RefObject } from 'react';
+export declare const focusableIn: (root: HTMLElement) => HTMLElement[];
+/**
+ * While `active`: moves focus into `ref` (to `initialFocus`, else the first focusable, else the
+ * container), keeps Tab / Shift+Tab inside, and returns focus to where it was when it ends.
+ */
+export declare function useFocusTrap(ref: RefObject<HTMLElement | null>, active: boolean, initialFocus?: RefObject<HTMLElement | null>): void;

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

@@ -0,0 +1,8 @@
+/**
+ * Keeps something mounted for `exitMs` after `open` turns false so it can play an exit
+ * animation. Render while `mounted`; style the exit with `closing` (e.g. data-state="closed").
+ */
+export declare function usePresence(open: boolean, exitMs?: number): {
+    mounted: boolean;
+    closing: boolean;
+};

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

@@ -0,0 +1,20 @@
+import { type MouseEvent, type PointerEvent, type RefObject } from 'react';
+export interface PressToOpenOptions {
+    open: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    /** The floating list; its options need `role="option"` and `data-index`. */
+    panelRef: RefObject<HTMLElement | null>;
+    /** Called with the option's `data-index` when a press-drag ends on it. */
+    onRelease: (index: number) => void;
+    disabled?: boolean;
+}
+/**
+ * Menu-style trigger: a mouse press opens the list at once, and dragging onto an option and
+ * letting go picks it (press-drag-release). A plain click leaves the list open. Keyboard and
+ * touch keep the usual click toggle.
+ */
+export declare function usePressToOpen({ open, onOpen, onClose, panelRef, onRelease, disabled }: PressToOpenOptions): {
+    onPointerDown: (e: PointerEvent<HTMLElement>) => void;
+    onClick: (e: MouseEvent<HTMLElement>) => void;
+};

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

@@ -0,0 +1,2 @@
+/** Stops the page behind a modal from scrolling, without the layout jumping when the scrollbar hides. */
+export declare function useScrollLock(active: boolean): void;

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

@@ -0,0 +1,29 @@
+export type SelectionValue = string | number;
+export interface SingleSelectionProps<V extends SelectionValue> {
+    type: 'single';
+    value?: V | null;
+    defaultValue?: V | null;
+    onValueChange?: (value: V | null) => void;
+    /** Single mode only: clicking the selected item again keeps it selected. */
+    required?: boolean;
+}
+export interface MultipleSelectionProps<V extends SelectionValue> {
+    type: 'multiple';
+    value?: V[];
+    defaultValue?: V[];
+    onValueChange?: (value: V[]) => void;
+    required?: never;
+}
+export type SelectionProps<V extends SelectionValue> = SingleSelectionProps<V> | MultipleSelectionProps<V>;
+/**
+ * Single- or multi-select state shared by ToggleGroup, FilterChipGroup and Combobox.
+ * Internally always an array; the public value is `V | null` (single) or `V[]` (multiple).
+ */
+export declare function useSelection<V extends SelectionValue>(props: SelectionProps<V>): {
+    selected: V[];
+    setSelected: (next: V[]) => void;
+    isSelected: (v: V) => boolean;
+    toggle: (v: V) => void;
+    clear: () => void;
+    multiple: boolean;
+};

package/lib/types/index.d.ts

@@ -0,0 +1,5 @@
+import './styles/tokens.css';
+import './styles/base.css';
+export * from './primitives';
+export * from './components';
+export * from './hooks';

package/lib/types/primitives/AspectRatio.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react';
+import './AspectRatio.css';
+export interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
+    /** Width ÷ height: a number (`16 / 9`) or a `'16/9'` · `'16:9'` string. */
+    ratio?: number | string;
+    /** How a direct img / video child fills the frame. */
+    fit?: 'cover' | 'contain';
+    /** Corner radius from the token scale. */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    /** subtle: the small gray fill (#f4f4f4), for placeholders and letterboxing. */
+    background?: 'none' | 'subtle';
+}
+/** Keeps its content at a fixed width-to-height ratio; the width comes from the parent. */
+export declare function AspectRatio({ ratio, fit, radius, background, className, style, ...rest }: AspectRatioProps): import("react").JSX.Element;

package/lib/types/primitives/BrandIcon.d.ts

@@ -0,0 +1,12 @@
+export declare const BRAND_NAMES: readonly ["gmail", "slack", "clickup", "figma", "github", "hubspot", "notion", "google-calendar", "google", "apple"];
+export type BrandName = (typeof BRAND_NAMES)[number];
+export interface BrandIconProps {
+    name: BrandName;
+    /** Width and height in px. */
+    size?: number;
+    /** Accessible name. Without it the icon is decorative (sits next to a text label). */
+    title?: string;
+    className?: string;
+}
+/** Full-colour logo of a third-party app, for integration lists and "connect apps" rows. */
+export declare function BrandIcon({ name, size, title, className }: BrandIconProps): import("react").JSX.Element;

package/lib/types/primitives/ColorDot.d.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties } from 'react';
+import './ColorDot.css';
+export type ColorDotVariant = 'solid' | 'soft' | 'dashed' | 'hatched';
+export interface ColorDotProps {
+    /** A CSS custom property name (`--chart-1`) or any CSS color. */
+    color: string;
+    /** square: legends and tooltips · circle: status · line: line-series legends. */
+    shape?: 'square' | 'circle' | 'line';
+    /**
+     * solid: the color itself · soft: the light tint used by soft bars (TimelineBar) ·
+     * dashed: a dashed outline (planned, target) · hatched: diagonal stripes (estimated, unlimited).
+     */
+    variant?: ColorDotVariant;
+    /** Edge length in px. */
+    size?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/** A small color key that ties a label to a series or category (chart legends, tooltips). */
+export declare function ColorDot({ color, shape, variant, size, className, style }: ColorDotProps): import("react").JSX.Element;

package/lib/types/primitives/CopyButton.d.ts

@@ -0,0 +1,12 @@
+import { type ButtonProps } from './index';
+import './CopyButton.css';
+export interface CopyButtonProps extends Omit<ButtonProps, 'onClick' | 'onCopy' | 'icon' | 'children' | 'value'> {
+    /** Text placed on the clipboard. */
+    value: string;
+    /** Visible text next to the icon; omit for an icon-only button. */
+    label?: string;
+    copiedLabel?: string;
+    onCopy?: (value: string) => void;
+}
+/** Copies `value`; the icon morphs into a check for a moment. */
+export declare function CopyButton({ value, label, copiedLabel, onCopy, variant, size, ...rest }: CopyButtonProps): import("react").JSX.Element;

package/lib/types/primitives/CountBadge.d.ts

@@ -0,0 +1,28 @@
+import { type CSSProperties } from 'react';
+import type { Tone } from './index';
+import './CountBadge.css';
+export type CountBadgeSize = 'sm' | 'md';
+export type CountBadgeVariant = 'solid' | 'soft';
+export interface CountBadgeProps {
+    /** The number to show. */
+    count: number;
+    /** Above this it reads "99+". */
+    max?: number;
+    /** Same tones as Badge. Defaults to accent. */
+    tone?: Tone;
+    /** solid: filled circle with white digits · soft: the status tint with coloured digits (like Badge). */
+    variant?: CountBadgeVariant;
+    /** sm 16px · md 18px high. Wider numbers stretch into a rounded capsule. */
+    size?: CountBadgeSize;
+    /** Still show the badge at 0 (hidden by default). */
+    showZero?: boolean;
+    /** Read by screen readers instead of the bare number, e.g. "승인 대기 1건". */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A small filled circle with a number — unread or waiting items next to a section title, a tab or
+ * an icon. Digits are tabular; when the count changes the badge pops and the new number slides in.
+ */
+export declare function CountBadge({ count, max, tone, variant, size, showZero, label, className, style, }: CountBadgeProps): import("react").JSX.Element | null;

package/lib/types/primitives/Countdown.d.ts

@@ -0,0 +1,21 @@
+import type { CSSProperties, ReactNode } from 'react';
+import './Countdown.css';
+export interface CountdownProps {
+    /** Seconds to count down from. A new value starts over. */
+    seconds: number;
+    /** false pauses where it is. */
+    running?: boolean;
+    /** Called once at 0. */
+    onComplete?: () => void;
+    /** Text for the remaining seconds. Defaults to "8초" / "1:05". */
+    format?: (remaining: number) => ReactNode;
+    /** Shown at 0 instead of "0초". */
+    doneLabel?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Remaining time as plain text with tabular figures, so it fits anywhere text does —
+ * inside a Badge ("요청 제한 · 8초"), a caption, a button. Ticks without reading the clock during render.
+ */
+export declare function Countdown({ seconds, running, onComplete, format, doneLabel, className, style }: CountdownProps): import("react").JSX.Element;

package/lib/types/primitives/Delta.d.ts

@@ -0,0 +1,33 @@
+import type { CSSProperties, ReactNode } from 'react';
+import './Delta.css';
+export type DeltaDirection = 'up' | 'down' | 'none';
+export type DeltaVariant = 'soft' | 'text';
+export interface DeltaProps {
+    /** The signed change. 0 is neutral (gray, no sign). */
+    value: number;
+    /** Formats the size of the change; the sign is added for you. Gets the absolute value. */
+    format?: (absolute: number) => ReactNode;
+    /** Text after the number, e.g. "늦음", "지난주 대비". */
+    suffix?: ReactNode;
+    /**
+     * What a higher number means. better: up = green (sales, uptime) · worse: up = bad
+     * (duration, cost, errors) · neutral: always gray.
+     */
+    higherIs?: 'better' | 'worse' | 'neutral';
+    /** Tone used for a change for the worse. Orange by default; danger for alarming metrics. */
+    worseTone?: 'warning' | 'danger';
+    /** An up / down arrow before the number. */
+    arrow?: boolean;
+    /** soft: a small tinted badge · text: colored text only (inline in headers and sentences). */
+    variant?: DeltaVariant;
+    size?: 'sm' | 'md';
+    /** Read by screen readers instead of the visible text. */
+    'aria-label'?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A signed change: "+12초" on soft orange when longer is worse, "−4초" on soft green.
+ * Real minus sign, tabular figures, so a column of deltas lines up.
+ */
+export declare function Delta({ value, format, suffix, higherIs, worseTone, arrow, variant, size, 'aria-label': ariaLabel, className, style, }: DeltaProps): import("react").JSX.Element;

package/lib/types/primitives/Elapsed.d.ts

@@ -0,0 +1,23 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type ElapsedInput } from '../hooks/useElapsed';
+import './Countdown.css';
+export interface ElapsedProps {
+    /** When the work started. Leave out for a stopwatch that starts at mount (or at `initial`). */
+    startedAt?: ElapsedInput;
+    /** false pauses where it is (the work is waiting or finished). */
+    running?: boolean;
+    /** When the work finished: shows the final duration and stops ticking. */
+    endedAt?: ElapsedInput;
+    /** Without `startedAt`: seconds to start the stopwatch from. */
+    initial?: number;
+    /** Text for the elapsed seconds. Defaults to "17:40"; `(s) => formatElapsed(s, 'text')` gives "17분 40초". */
+    format?: (elapsed: number) => ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Time since something started, counting up as plain text with tabular figures ("17:40") — for a
+ * header ("시작 오후 9:12 · 17:40"), a footer band, a Badge. Pauses with `running={false}`, freezes on
+ * `endedAt`, and never reads the clock during render.
+ */
+export declare function Elapsed({ startedAt, running, endedAt, initial, format, className, style }: ElapsedProps): import("react").JSX.Element;

package/lib/types/primitives/FileIcon.d.ts

@@ -0,0 +1,17 @@
+import type { CSSProperties } from 'react';
+import './FileIcon.css';
+export type FileKind = 'pdf' | 'image' | 'sheet' | 'doc' | 'slide' | 'video' | 'audio' | 'archive' | 'code' | 'other';
+/** Guesses the kind from a file name (`보고서.pdf`), an extension (`pdf`) or a MIME type (`image/png`). */
+export declare function fileKind(nameOrType: string): FileKind;
+export interface FileIconProps {
+    /** File name, extension or MIME type; picks the color. */
+    name?: string;
+    /** Overrides the guess from `name`. */
+    kind?: FileKind;
+    /** Pixel size. */
+    size?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/** A page glyph with a colored tab for the file type (red PDF, purple image, green sheet…). */
+export declare function FileIcon({ name, kind, size, className, style }: FileIconProps): import("react").JSX.Element;

package/lib/types/primitives/Flag.d.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties } from 'react';
+import './Flag.css';
+export type FlagCode = 'KR' | 'US' | 'JP' | 'CN' | 'VN' | 'GB' | 'DE' | 'FR';
+export interface FlagProps {
+    /** ISO 3166-1 alpha-2 country code. */
+    code: FlagCode;
+    /** Width in px; the flag is always 3:2. */
+    size?: number;
+    /** Names the flag for screen readers. Without it the flag is decorative (a label sits next to it). */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** A small 3:2 country flag with softly rounded corners and a faint edge so white flags don't vanish. */
+export declare function Flag({ code, size, label, className, style }: FlagProps): import("react").JSX.Element;

package/lib/types/primitives/IconStack.d.ts

@@ -0,0 +1,27 @@
+import type { CSSProperties, ReactNode } from 'react';
+import './IconStack.css';
+export interface IconStackProps {
+    /** Icons, logos or avatars, front to back. Size them yourself (BrandIcon `size`, lucide `size`). */
+    icons: ReactNode[];
+    /** Width and height of each item in px. */
+    size?: number;
+    /** Items shown before the rest collapse into "+N". */
+    max?: number;
+    /** How far each item tucks under the previous one, in px. Defaults to a third of `size`. */
+    overlap?: number;
+    /** circle, or a rounded square for app logos. */
+    shape?: 'circle' | 'square';
+    /** Puts each icon on a small white tile (logos that need a backdrop). Without it the icon fills the item. */
+    tile?: boolean;
+    /** Custom "+N" item (AvatarGroup draws an Avatar). */
+    renderOverflow?: (hidden: number) => ReactNode;
+    /** Names the whole stack for screen readers ("Slack, Figma 외 2개"). Without it the stack is decorative. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A row of small overlapping icons, like AvatarGroup but for anything: app logos before a task,
+ * file types, people. Each item is cut out from the one behind it with a thin ring of the surface color.
+ */
+export declare function IconStack({ icons, size, max, overlap, shape, tile, renderOverflow, label, className, style, }: IconStackProps): import("react").JSX.Element;

package/lib/types/primitives/IconTile.d.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties, ReactNode } from 'react';
+import './IconTile.css';
+export type IconTileTone = 'neutral' | 'surface' | 'accent' | 'success' | 'warning' | 'danger';
+export interface IconTileProps {
+    /** An icon, or a letter / short text ("A", "문"). */
+    children: ReactNode;
+    /** Edge length in px; the icon scales with it. */
+    size?: number;
+    /**
+     * neutral: the small gray fill · surface: a white tile lifted by the chip shadow, for logos and
+     * multi-colour icons the gray would muddy · others: the soft status colours.
+     */
+    tone?: IconTileTone;
+    /** Fully round instead of a rounded square. */
+    round?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+}
+/**
+ * A small filled square holding an icon or a letter — the leading tile of list rows for things
+ * that aren't people (tools, sites, documents). People get `Avatar`.
+ */
+export declare function IconTile({ children, size, tone, round, className, style, 'aria-label': ariaLabel }: IconTileProps): import("react").JSX.Element;

package/lib/types/primitives/Kbd.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+import './Kbd.css';
+export declare const isMac: boolean;
+/** Turns a key name into its glyph: `mod` → ⌘ on Mac / Ctrl elsewhere, `enter` → ↵, `k` → K. */
+export declare function formatKey(key: string): string;
+export interface KbdProps {
+    /** Key names, e.g. ['mod', 'K'] or ['shift', 'enter']. Platform-aware via formatKey. */
+    keys?: string[];
+    /** Literal content instead of `keys`, e.g. <Kbd>⌘K</Kbd>. */
+    children?: ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    /** One cap for the whole combo ("⌘K") instead of one cap per key. */
+    combined?: boolean;
+    /** Text between caps, e.g. '+' or 'then'. */
+    separator?: ReactNode;
+    className?: string;
+}
+/** Keyboard key caps for shortcuts. */
+export declare function Kbd({ keys, children, size, combined, separator, className }: KbdProps): import("react").JSX.Element;

package/lib/types/primitives/Layout.d.ts

@@ -0,0 +1,64 @@
+import type { ComponentPropsWithRef, CSSProperties, ElementType, ReactNode } from 'react';
+import './Layout.css';
+/** Steps of the 4px spacing scale (`--s1` … `--s10`). */
+export type Space = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10;
+type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type Justify = 'start' | 'center' | 'end' | 'between' | 'around';
+type Polymorphic<E extends ElementType, P> = P & {
+    as?: E;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+} & Omit<ComponentPropsWithRef<E>, keyof P | 'as' | 'className' | 'style' | 'children'>;
+export type BoxProps<E extends ElementType = 'div'> = Polymorphic<E, {
+    padding?: Space;
+    paddingX?: Space;
+    paddingY?: Space;
+    /** Corner radius from the token scale. */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** surface: white · subtle: the small gray fill (#f4f4f4). */
+    background?: 'none' | 'surface' | 'subtle';
+    /** A soft lift instead of a border. */
+    elevated?: boolean;
+}>;
+/** A spacing / surface wrapper. Reach for Card when the box is a real content group. */
+export declare function Box<E extends ElementType = 'div'>({ as, padding, paddingX, paddingY, radius, background, elevated, className, style, ...rest }: BoxProps<E>): import("react").JSX.Element;
+type FlexProps = {
+    gap?: Space;
+    align?: Align;
+    justify?: Justify;
+    wrap?: boolean;
+};
+export type StackProps<E extends ElementType = 'div'> = Polymorphic<E, FlexProps>;
+/** Children in a column with even gaps. */
+export declare function Stack<E extends ElementType = 'div'>({ as, gap, align, justify, wrap, className, style, ...rest }: StackProps<E>): import("react").JSX.Element;
+export type InlineProps<E extends ElementType = 'div'> = Polymorphic<E, FlexProps>;
+/** Children in a row (wrapping by default) with even gaps — buttons, chips, meta lines. */
+export declare function Inline<E extends ElementType = 'div'>({ as, gap, align, justify, wrap, className, style, ...rest }: InlineProps<E>): import("react").JSX.Element;
+export type GridProps<E extends ElementType = 'div'> = Polymorphic<E, {
+    /** A fixed column count, or a full `grid-template-columns` string. */
+    columns?: number | string;
+    /** Responsive: as many columns as fit, each at least this wide (px). Overrides `columns`. */
+    minItemWidth?: number;
+    gap?: Space;
+    rowGap?: Space;
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /** Items rise in from below one after another (~70ms apart) when they mount. Change the grid's `key` to replay. */
+    stagger?: boolean;
+}>;
+/** Equal columns, or responsive auto-fill columns with `minItemWidth`. */
+export declare function Grid<E extends ElementType = 'div'>({ as, columns, minItemWidth, gap, rowGap, align, stagger, className, style, ...rest }: GridProps<E>): import("react").JSX.Element;
+export interface SeparatorProps {
+    orientation?: 'horizontal' | 'vertical';
+    /** Text in the middle, e.g. "또는". */
+    label?: ReactNode;
+    /** Space on both sides of the line. */
+    spacing?: Space;
+    /** Purely visual (default) or announced as a separator. */
+    decorative?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/** A hairline between groups. Prefer spacing first; use this when spacing alone isn't enough. */
+export declare function Separator({ orientation, label, spacing, decorative, className, style }: SeparatorProps): import("react").JSX.Element;
+export {};

package/lib/types/primitives/Link.d.ts

@@ -0,0 +1,12 @@
+import type { AnchorHTMLAttributes } from 'react';
+import './Link.css';
+export type LinkVariant = 'accent' | 'inherit';
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * accent: blue text, for links in body copy · inherit: keeps the surrounding colour (muted event
+     * lines, captions) and only the underline says it's a link.
+     */
+    variant?: LinkVariant;
+}
+/** An inline text link with a soft underline that firms up on hover. */
+export declare function Link({ variant, className, ...rest }: LinkProps): import("react").JSX.Element;

package/lib/types/primitives/MaskedText.d.ts

@@ -0,0 +1,28 @@
+import type { CSSProperties } from 'react';
+import { type MaskOptions } from './maskValue';
+import './MaskedText.css';
+export interface MaskedTextProps extends MaskOptions {
+    /** The full secret: account number, IBAN, key. */
+    value: string;
+    /** What the value is ("IBAN", "계좌번호"); read out by screen readers with the masked state. */
+    label?: string;
+    /** An eye button that shows / hides the full value. */
+    revealable?: boolean;
+    revealed?: boolean;
+    defaultRevealed?: boolean;
+    onRevealedChange?: (revealed: boolean) => void;
+    /** A CopyButton after the value. It always copies the full value, masked or not. */
+    copyable?: boolean;
+    /** What the copy button puts on the clipboard (default: `value`, e.g. without spaces). */
+    copyValue?: string;
+    /** Monospace (code font) instead of tabular figures in the surrounding font. */
+    mono?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A secret with only its ends visible — "DE89 •••• 3000". Figures are tabular (or monospace) so
+ * the width doesn't jump when revealed. Screen readers hear that it is masked and which ends show,
+ * never the bullets. Optional eye toggle (with tooltip) and CopyButton.
+ */
+export declare function MaskedText({ value, label, revealable, revealed: revealedProp, defaultRevealed, onRevealedChange, copyable, copyValue, mono, visibleStart, visibleEnd, mask, groupSize, maskLength, className, style, }: MaskedTextProps): import("react").JSX.Element;

package/lib/types/primitives/Progress.d.ts

@@ -0,0 +1,52 @@
+import type { CSSProperties, ReactNode } from 'react';
+import './Progress.css';
+export type ProgressTone = 'default' | 'accent' | 'success' | 'warning' | 'danger';
+interface ProgressBaseProps {
+    /** 0…max. Leave undefined for an indeterminate (unknown length) bar. */
+    value?: number;
+    max?: number;
+    tone?: ProgressTone;
+    /** Text shown above the bar (linear) or under the ring (circle). */
+    label?: ReactNode;
+    /** Prints the percentage. */
+    showValue?: boolean;
+    formatValue?: (value: number, max: number) => ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+    /** Spoken value when the number alone isn't enough (e.g. "10명 중 8명"). */
+    'aria-valuetext'?: string;
+}
+export interface ProgressSegment {
+    value: number;
+    /** Name of the part; also read out in the progressbar's value text. */
+    label?: string;
+    /** CSS variable (`--chart-1`) or any color. Defaults to `--chart-seq-1…5` in order (blue, strongest first). */
+    color?: string;
+}
+export interface ProgressProps extends ProgressBaseProps {
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Splits the fill into parts of one total (usage by category). The filled length is the sum of
+     * the values; each part gets its own color with a small gap and the rest stays gray. Replaces `value`.
+     */
+    segments?: ProgressSegment[];
+    /** No limit: a striped track without a fill. `value` is still announced. */
+    unlimited?: boolean;
+}
+/**
+ * A bar that fills smoothly; without `value` it loops as an indeterminate bar.
+ * `segments` splits the fill into colored parts, `unlimited` shows a striped track.
+ */
+export declare function Progress({ value, max, tone, size, label, showValue, formatValue, segments, unlimited, className, style, 'aria-label': ariaLabel, 'aria-valuetext': ariaValueText, }: ProgressProps): import("react").JSX.Element;
+export interface ProgressCircleProps extends ProgressBaseProps {
+    /** Diameter in px. */
+    size?: number;
+    /** Ring width in px. */
+    thickness?: number;
+    /** Content in the middle; defaults to the percentage when `showValue`. */
+    children?: ReactNode;
+}
+/** A ring version of Progress, for compact spots (cards, uploads, quotas). */
+export declare function ProgressCircle({ value, max, tone, size, thickness, label, showValue, formatValue, children, className, style, 'aria-label': ariaLabel, 'aria-valuetext': ariaValueText, }: ProgressCircleProps): import("react").JSX.Element;
+export {};

package/lib/types/primitives/RelativeTime.d.ts

@@ -0,0 +1,22 @@
+import { type TextTone, type TextVariant } from './Typography';
+import { type TooltipSide } from './Tooltip';
+import { type DateInput } from './formatRelativeTime';
+export interface RelativeTimeProps {
+    /** The moment to describe: a Date, an ISO string or a timestamp. */
+    date: DateInput;
+    /** Custom wording; defaults to Korean ("방금", "2분 전", "어제"…). */
+    format?: (date: Date, now: Date) => string;
+    /** Show the full date in a tooltip on hover. */
+    tooltip?: boolean;
+    tooltipSide?: TooltipSide;
+    /**
+     * Re-render this often (ms). By default the label wakes up exactly when its text would change
+     * (each minute in the first hour, then hourly). `false` renders once.
+     */
+    refreshInterval?: number | false;
+    variant?: TextVariant;
+    tone?: TextTone;
+    className?: string;
+}
+/** "2분 전" in a `<time dateTime>`, kept current while it's on screen, with the full date on hover. */
+export declare function RelativeTime({ date, format, tooltip, tooltipSide, refreshInterval, variant, tone, className, }: RelativeTimeProps): import("react").JSX.Element;

package/lib/types/primitives/SearchInput.d.ts

@@ -0,0 +1,8 @@
+import { type InputProps } from './index';
+import './SearchInput.css';
+export interface SearchInputProps extends Omit<InputProps, 'leading' | 'trailing' | 'type'> {
+    /** Letter that focuses the field with ⌘ (Mac) or Ctrl (others), shown as a key chip. */
+    shortcutKey?: string;
+}
+/** Search field: leading magnifier, trailing shortcut chip, and the shortcut focuses it. */
+export declare const SearchInput: import("react").ForwardRefExoticComponent<SearchInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/lib/types/primitives/SelectorButton.d.ts

@@ -0,0 +1,23 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+import './SelectorButton.css';
+export type SelectorButtonSize = 'sm' | 'md' | 'lg';
+export interface SelectorButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** The current choice: workspace name, user name, page title. */
+    label: ReactNode;
+    /** A second, gray line (plan, e-mail, member count). */
+    description?: ReactNode;
+    /** Avatar, letter tile or icon on the left. */
+    leading?: ReactNode;
+    /** down (rotates while its menu is open) · updown · right · none. */
+    chevron?: 'down' | 'updown' | 'right' | 'none';
+    /** sm: compact row · md: sidebar header/footer row · lg: a page title. */
+    size?: SelectorButtonSize;
+    /** Stretch to the parent's width (the chevron sits at the far end). */
+    block?: boolean;
+}
+/**
+ * A quiet button that shows what is selected and opens a menu to change it: a workspace or
+ * account switcher, a title with a dropdown. Put it in `DropdownMenu`'s `trigger` — the
+ * down chevron turns while the menu is open.
+ */
+export declare const SelectorButton: import("react").ForwardRefExoticComponent<SelectorButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib/types/primitives/Spinner.d.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties } from 'react';
+import './Spinner.css';
+export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SpinnerTone = 'default' | 'muted' | 'accent' | 'inverse' | 'inherit';
+export interface SpinnerProps {
+    /** A named size or a pixel number. */
+    size?: SpinnerSize | number;
+    tone?: SpinnerTone;
+    /** Read by screen readers. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** An arc spinning over a faint track. */
+export declare function Spinner({ size, tone, label, className, style }: SpinnerProps): import("react").JSX.Element;