@iamfiro/design 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,50 @@
+import { type ReactNode } from 'react';
+import { DropdownMenuCheckboxItem, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub } from '../DropdownMenu/DropdownMenu';
+import '../Popover/Popover.css';
+import './Menubar.css';
+export interface MenubarProps {
+    /** `MenubarMenu`s, in order. */
+    children: ReactNode;
+    /** The open menu's `value` (null = none), to control it from outside. */
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * A row of menus like a desktop app's 파일 · 편집 · 보기. Click opens one; while one is open,
+ * pointing at another trigger switches to it at once. ←/→ move between menus (also from inside
+ * an open menu, outside submenus), ↓/Enter/Space open, ↑ opens at the last item. One Tab stop.
+ */
+export declare function Menubar({ children, value: valueProp, defaultValue, onValueChange, 'aria-label': ariaLabel, className }: MenubarProps): import("react").JSX.Element;
+export declare namespace Menubar {
+    var Menu: typeof MenubarMenu;
+    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 MenubarMenuProps {
+    /** Trigger text, e.g. 파일. */
+    label: ReactNode;
+    /** Items, labels, separators and submenus — the same parts as DropdownMenu. */
+    children: ReactNode;
+    /** Identifies this menu for `Menubar value`. Defaults to an internal id. */
+    value?: string;
+    disabled?: boolean;
+    /** Minimum panel width in px. */
+    minWidth?: number;
+}
+/** One top-level menu of a `Menubar`: its trigger and its panel. */
+export declare function MenubarMenu({ label, children, value: valueProp, disabled, minWidth }: MenubarMenuProps): import("react").JSX.Element;
+export declare const MenubarItem: typeof DropdownMenuItem;
+export declare const MenubarCheckboxItem: typeof DropdownMenuCheckboxItem;
+export declare const MenubarRadioGroup: typeof DropdownMenuRadioGroup;
+export declare const MenubarRadioItem: typeof DropdownMenuRadioItem;
+export declare const MenubarLabel: typeof DropdownMenuLabel;
+export declare const MenubarSeparator: typeof DropdownMenuSeparator;
+export declare const MenubarSub: typeof DropdownMenuSub;

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

@@ -0,0 +1,38 @@
+import { type ReactNode } from 'react';
+import { type ListOption, type OptionState } from '../Listbox/Listbox';
+import '../Select/Select.css';
+import './MultiSelect.css';
+export interface MultiSelectProps<V extends string> {
+    options: ListOption<V>[];
+    value?: V[];
+    defaultValue?: V[];
+    onValueChange?: (value: V[]) => void;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placeholder?: ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    invalid?: boolean;
+    leading?: ReactNode;
+    /** How the trigger shows picks: removable tags, or a "n개 선택" summary. */
+    display?: 'tags' | 'count';
+    /** Tags shown before collapsing the rest into "+N". */
+    maxTags?: number;
+    /** Adds a "전체 선택" row at the top of the list (also Ctrl/⌘ + A while open). */
+    selectAll?: boolean;
+    selectAllLabel?: ReactNode;
+    formatCount?: (count: number) => ReactNode;
+    /** Submits each value as a separate `name` field. */
+    name?: string;
+    id?: string;
+    className?: string;
+    maxHeight?: number;
+    renderOption?: (option: ListOption<V>, state: OptionState) => ReactNode;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+/**
+ * Select for several values. The list stays open while picking; Space/Enter toggle the
+ * active row, picks show as tags that can be removed from the trigger.
+ */
+export declare function MultiSelect<V extends string>({ options, value: valueProp, defaultValue, onValueChange, open: openProp, onOpenChange, placeholder, size, disabled, invalid, leading, display, maxTags, selectAll, selectAllLabel, formatCount, name, id, className, maxHeight, renderOption, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }: MultiSelectProps<V>): import("react").JSX.Element;

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

@@ -0,0 +1,101 @@
+import { type ComponentPropsWithRef, type CSSProperties, type ElementType, type ReactNode, type RefObject } from 'react';
+import '../Popover/Popover.css';
+import './NavigationMenu.css';
+export interface NavigationMenuProps {
+    /** `NavigationMenuItem`s (open a panel) and top-level `NavigationMenuLink`s, in order. */
+    children: ReactNode;
+    /** The open item's `value` (null = closed), to control it from outside. */
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    /** hover: rest on a trigger to open, then pointing at another switches at once · click: only a press opens. */
+    openOn?: 'hover' | 'click';
+    /**
+     * stretch: the panel spans `viewportAnchor` (default: the nav itself), like a mega menu ·
+     * trigger: the panel takes its content's width, centered under the open trigger.
+     */
+    panelAlign?: 'stretch' | 'trigger';
+    /** The element whose width and bottom edge the panel follows — usually the whole header. */
+    viewportAnchor?: RefObject<HTMLElement | null>;
+    /** inverse: light triggers for a dark header. The panel stays white. */
+    tone?: 'default' | 'inverse';
+    'aria-label'?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A site header's menus: triggers that open one shared panel. Resting on a trigger opens it after
+ * the hover intent delay; once open, pointing at a neighbour switches at once — the panel morphs
+ * to the new size and the content slides in from that side. ←/→ move between items, ↓ / Enter
+ * open into the first link, Esc returns to the trigger.
+ */
+export declare function NavigationMenu({ children, value: valueProp, defaultValue, onValueChange, openOn, panelAlign, viewportAnchor, tone, 'aria-label': ariaLabel, className, style, }: NavigationMenuProps): import("react").JSX.Element;
+export declare namespace NavigationMenu {
+    var Item: typeof NavigationMenuItem;
+    var Link: typeof NavigationMenuLink;
+    var Group: typeof NavigationMenuGroup;
+    var Feature: typeof NavigationMenuFeature;
+}
+export interface NavigationMenuItemProps {
+    /** Trigger text, e.g. 제품. */
+    label: ReactNode;
+    /** The panel content — any layout; `NavigationMenuGroup`, `NavigationMenuLink` and `NavigationMenuFeature` are the usual parts. */
+    children: ReactNode;
+    /** Identifies this item for `NavigationMenu value`. Defaults to an internal id. */
+    value?: string;
+    /** A 16px icon before the label. */
+    icon?: ReactNode;
+    disabled?: boolean;
+    /** Content width for `panelAlign="trigger"` (px or any CSS width). Defaults to the content's own width. */
+    width?: number | string;
+}
+/** One top-level menu: a trigger in the bar and the content it shows in the shared panel. */
+export declare function NavigationMenuItem({ label, children, value: valueProp, icon, disabled, width }: NavigationMenuItemProps): import("react").JSX.Element;
+interface NavigationMenuLinkOwnProps<E extends ElementType> {
+    /** Render as your router's link (`as={RouterLink}`); defaults to `<a>`. */
+    as?: E;
+    label: ReactNode;
+    /** Muted line under the label (inside a panel). */
+    description?: ReactNode;
+    /** Icon or IconTile before the label (inside a panel). */
+    icon?: ReactNode;
+    /** The current page: `aria-current="page"` and a stronger label. */
+    active?: boolean;
+    /** Extra content after the label, e.g. a `Badge`. */
+    badge?: ReactNode;
+    className?: string;
+}
+export type NavigationMenuLinkProps<E extends ElementType = 'a'> = NavigationMenuLinkOwnProps<E> & Omit<ComponentPropsWithRef<E>, keyof NavigationMenuLinkOwnProps<E>>;
+/**
+ * A link. Directly in `NavigationMenu` it's a bar item (요금); inside an item's content it's a
+ * row with a label and description. Following a link closes the panel.
+ */
+export declare function NavigationMenuLink<E extends ElementType = 'a'>({ as, label, description, icon, active, badge, className, onClick, onPointerEnter, ...rest }: NavigationMenuLinkProps<E>): import("react").JSX.Element;
+export interface NavigationMenuGroupProps {
+    /** Small muted heading above the links (제품, 활용). */
+    title?: ReactNode;
+    /** `NavigationMenuLink`s. */
+    children: ReactNode;
+    className?: string;
+}
+/** A titled column of links inside a panel. */
+export declare function NavigationMenuGroup({ title, children, className }: NavigationMenuGroupProps): import("react").JSX.Element;
+export interface NavigationMenuFeatureProps {
+    /** Small line at the top (제품 둘러보기). */
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /** A button or link at the bottom. */
+    action?: ReactNode;
+    /** Image or illustration filling the card behind the text (cover). */
+    media?: ReactNode;
+    /** Any CSS background behind the text when there's no `media`. Defaults to a light gray panel. */
+    background?: string;
+    /** inverse: white text for a dark `media` / `background`. */
+    tone?: 'default' | 'inverse';
+    className?: string;
+    style?: CSSProperties;
+}
+/** A promo card that usually takes the last column of a panel: eyebrow, title, media and an action. */
+export declare function NavigationMenuFeature({ eyebrow, title, description, action, media, background, tone, className, style, }: NavigationMenuFeatureProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,41 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import './NoticeStack.css';
+export interface NoticeItem {
+    id: string;
+    /** Small blue line above the title ("새 기능", "10월 업데이트"). */
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /** A row at the bottom, e.g. a "전체 변경 기록 ›" link button. */
+    footer?: ReactNode;
+    /** Set false for a card that can't be closed. */
+    dismissible?: boolean;
+}
+export interface NoticeStackProps {
+    /** Front card first. */
+    items: NoticeItem[];
+    /**
+     * Called once a card has finished animating away. Remove it from `items` here; if you don't,
+     * the stack keeps it hidden on its own.
+     */
+    onDismiss?: (id: string) => void;
+    /** How many cards show (peeking behind the front one, or spread out). */
+    visible?: number;
+    /** Always spread out instead of only on hover / focus. */
+    expanded?: boolean;
+    /** up: cards behind peek out above and the deck spreads upward (bottom of a sidebar) · down: the reverse. */
+    direction?: 'up' | 'down';
+    /** Space between spread-out cards, px. */
+    gap?: number;
+    /** aria-label of each card's × button. */
+    dismissLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+}
+/**
+ * A deck of dismissible announcement cards ("새 기능" notes, tips). Collapsed, the cards behind
+ * the front one peek out at the edge; hovering (after a short pause) or focusing spreads them out.
+ * Closing a card plays its entrance in reverse while the next one slides into its place.
+ */
+export declare function NoticeStack({ items, onDismiss, visible, expanded: expandedProp, direction, gap, dismissLabel, className, style, 'aria-label': ariaLabel, }: NoticeStackProps): import("react").JSX.Element | null;

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

@@ -0,0 +1,32 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import './NumberStepper.css';
+export interface NumberStepperProps {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** PageUp / PageDown jump. Defaults to 10 steps. */
+    largeStep?: number;
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    /** How the number reads, e.g. `(v) => \`${v}개\``. Also used for `aria-valuetext`. */
+    formatValue?: (value: number) => ReactNode;
+    /** Names the spinbutton, e.g. "동시 작업 수". */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    decrementLabel?: string;
+    incrementLabel?: string;
+    /** For forms: a hidden input with this name carries the value. */
+    name?: string;
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * − value + for small counts (workers, seats, retries). The number is an ARIA spinbutton:
+ * ↑/→ and ↓/← step, PageUp/PageDown jump, Home/End go to min/max. Holding a button repeats
+ * after a pause (a short press is one ordinary click), and the number slides in the direction it moved.
+ */
+export declare function NumberStepper({ value: valueProp, defaultValue, onValueChange, min, max, step, largeStep, size, disabled, formatValue, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, decrementLabel, incrementLabel, name, id, className, style, }: NumberStepperProps): import("react").JSX.Element;

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

@@ -0,0 +1,31 @@
+import './OtpInput.css';
+export type OtpPattern = 'numeric' | 'alphanumeric';
+export interface OtpInputProps {
+    /** Number of characters. */
+    length?: number;
+    /** Visual grouping, e.g. [3, 3] draws a dash between "123" and "456". Must add up to `length`. */
+    groups?: number[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Fires once every slot is filled — verify here. */
+    onComplete?: (value: string) => void;
+    /** numeric: 0–9 only · alphanumeric: letters and digits (uppercased). */
+    pattern?: OtpPattern;
+    /** loading: gray slots with a shimmer · error: red slots that shake · success: green slots. Loading and success lock the input. */
+    status?: 'loading' | 'error' | 'success';
+    /** Show dots instead of characters. */
+    mask?: boolean;
+    size?: 'md' | 'lg';
+    disabled?: boolean;
+    autoFocus?: boolean;
+    name?: string;
+    id?: string;
+    className?: string;
+    'aria-label'?: string;
+}
+/**
+ * One-time code input. A single real <input> sits under the slots, so typing, pasting
+ * ("123-456" → 123456), SMS autofill and IMEs all work; the slots only draw it.
+ */
+export declare const OtpInput: import("react").ForwardRefExoticComponent<OtpInputProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,54 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import './Pagination.css';
+export type PaginationSize = 'sm' | 'md' | 'lg';
+export interface PaginationRangeInfo {
+    /** First item on the page (1-based). */
+    start: number;
+    /** Last item on the page. */
+    end: number;
+    total: number;
+}
+export interface PaginationProps {
+    /** Current page, 1-based (controlled). */
+    page?: number;
+    /** First page when uncontrolled. */
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    /** Number of pages. Or give `totalItems` (+ `pageSize`) and it's worked out. */
+    totalPages?: number;
+    /** Number of items in all pages; enables the "1–20 / 248개" range text. */
+    totalItems?: number;
+    /** Items per page (controlled). */
+    pageSize?: number;
+    defaultPageSize?: number;
+    onPageSizeChange?: (pageSize: number) => void;
+    /** Shows a "페이지당 N개" Select with these choices. */
+    pageSizeOptions?: number[];
+    /** Pages shown on each side of the current one. */
+    siblingCount?: number;
+    /** Pages always shown at each end. */
+    boundaryCount?: number;
+    /** default: page numbers · simple: only "3 / 12" between the arrows. */
+    variant?: 'default' | 'simple';
+    /** neutral: gray chip on the current page · primary: near-black chip. */
+    tone?: 'neutral' | 'primary';
+    size?: PaginationSize;
+    /** First / last page buttons at the ends. */
+    showFirstLast?: boolean;
+    /** "1–20 / 248개" before the controls (needs `totalItems`). Defaults to on when `totalItems` is given. */
+    showRange?: boolean;
+    /** A small field to type a page number and jump (Enter). */
+    showJump?: boolean;
+    formatRange?: (info: PaginationRangeInfo) => ReactNode;
+    disabled?: boolean;
+    /** Name of the navigation landmark. */
+    'aria-label'?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Page navigation. The current page is a filled chip that glides to the new number; arrows
+ * at the ends disable themselves. Works with a page count or with total items + page size,
+ * optionally with a page-size Select, range text and a jump-to-page field.
+ */
+export declare function Pagination({ page: pageProp, defaultPage, onPageChange, totalPages, totalItems, pageSize: pageSizeProp, defaultPageSize, onPageSizeChange, pageSizeOptions, siblingCount, boundaryCount, variant, tone, size, showFirstLast, showRange, showJump, formatRange, disabled, 'aria-label': ariaLabel, className, style, }: PaginationProps): import("react").JSX.Element;

package/lib/types/components/Pagination/paginationRange.d.ts

@@ -0,0 +1,7 @@
+export type PaginationItem = number | 'start-ellipsis' | 'end-ellipsis';
+/**
+ * The page numbers to show: `boundaryCount` pages at each end, `siblingCount` on each side of
+ * `page`, and an ellipsis for every gap. A gap of exactly one page shows that page instead of "…",
+ * so the number of slots stays the same while paging (nothing jumps).
+ */
+export declare function paginationRange(page: number, count: number, siblingCount?: number, boundaryCount?: number): PaginationItem[];

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

@@ -0,0 +1,47 @@
+import { type FlagCode } from '../../primitives';
+export interface PhoneCountry {
+    code: FlagCode;
+    name: string;
+    /** Country calling code without "+". */
+    dial: string;
+    /** National number layout, one `#` per digit ("###-####-####"). Its `#` count is the max length. */
+    pattern: string;
+    /** A typical national number, shown formatted as the placeholder. */
+    example: string;
+    /** A leading 0 typed at home (010…) is dropped in the international number (+82 10…). */
+    trunk?: boolean;
+}
+export declare const PHONE_COUNTRIES: PhoneCountry[];
+/** Lays digits into a pattern, stopping at the last digit so no dash dangles while typing. */
+export declare function formatPhone(digits: string, pattern: string): string;
+/** International (E.164) form of a national number: "+821012345678". Empty when there are no digits. */
+export declare function toE164(digits: string, country: PhoneCountry): string;
+export interface PhoneInputProps {
+    /** National digits only ("01012345678"). */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (digits: string, detail: {
+        country: PhoneCountry;
+        e164: string;
+    }) => void;
+    country?: FlagCode;
+    defaultCountry?: FlagCode;
+    onCountryChange?: (country: FlagCode) => void;
+    /** Countries offered, in this order. Defaults to PHONE_COUNTRIES. */
+    countries?: PhoneCountry[];
+    size?: 'sm' | 'md' | 'lg';
+    invalid?: boolean;
+    disabled?: boolean;
+    /** Defaults to the country's example number. */
+    placeholder?: string;
+    /** Submits the E.164 number with forms. */
+    name?: string;
+    id?: string;
+    'aria-label'?: string;
+}
+/**
+ * Phone number field: a country picker (flag + dial code) inside an Input that only takes digits
+ * and lays them out the way that country writes them. Pasting "+82 10-1234-5678" switches the
+ * country and keeps the number.
+ */
+export declare function PhoneInput({ value: valueProp, defaultValue, onValueChange, country: countryProp, defaultCountry, onCountryChange, countries, size, invalid, disabled, placeholder, name, id, 'aria-label': ariaLabel, }: PhoneInputProps): import("react").JSX.Element;

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

@@ -0,0 +1,67 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import './PieChart.css';
+export interface PieSlice {
+    key: string;
+    label: string;
+    value: number;
+    /** CSS variable (`--chart-1`) or any color. Defaults to the chart palette in order. */
+    color?: string;
+}
+/** What the centre shows; handed to a `centerLabel` render function. */
+export interface PieCenterContext {
+    /** Sum of all values. */
+    total: number;
+    /** The `max` prop, when the donut is a progress ring. */
+    max?: number;
+    /** The highlighted segment (hover, keyboard, legend), or null. */
+    active: {
+        slice: PieSlice;
+        index: number;
+        color: string;
+        share: number;
+    } | null;
+    formatValue: (value: number, slice?: PieSlice) => string;
+}
+export interface PieChartProps {
+    data: PieSlice[];
+    /** donut (default) or a solid pie. `innerRadius={0}` also makes a pie. */
+    variant?: 'donut' | 'pie';
+    /** Diameter in px. */
+    size?: number;
+    /** Ring thickness in px. Defaults to about 9% of the size (a thin ring). */
+    thickness?: number;
+    /** Hole size as a share of the radius (older API; `thickness` wins). 0 = pie. */
+    innerRadius?: number;
+    /** Gap between segments in degrees (measured at the middle of the ring; the gap keeps one width). */
+    padAngle?: number;
+    /** Rounding of segment corners in px. Shrinks on its own for thin or short segments. */
+    cornerRadius?: number;
+    /** Full scale of the ring (a progress donut). The rest stays empty over the track. */
+    max?: number;
+    /** Faint ring behind the segments. On by default when `max` is set. */
+    track?: boolean;
+    /** Slice values; also the donut total (called without a slice). */
+    formatValue?: (value: number, slice?: PieSlice) => string;
+    /** Caption under the centre number, or a function that renders the whole centre. */
+    centerLabel?: ReactNode | ((ctx: PieCenterContext) => ReactNode);
+    /** Centre number when nothing is highlighted. Defaults to the total (or the share of `max`). */
+    centerValue?: ReactNode;
+    /** true / 'side': a list beside the chart (value · share) · 'bottom': a row of keys under it. */
+    legend?: boolean | 'side' | 'bottom';
+    /** Show the share (%) next to legend values. */
+    showPercent?: boolean;
+    /** Value card next to the highlighted segment. Defaults on for a pie; a donut reads out in its centre. */
+    tooltip?: boolean;
+    activeIndex?: number | null;
+    defaultActiveIndex?: number | null;
+    onActiveIndexChange?: (index: number | null) => void;
+    'aria-label'?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A donut (or pie). Segments sweep in from 12 o'clock and morph when the data changes. The highlighted
+ * segment grows outward and the rest fade; a donut reads it out in the centre (the total otherwise).
+ * ←/→ cycle through segments and the value is announced.
+ */
+export declare function PieChart({ data, variant, size, thickness, innerRadius, padAngle, cornerRadius, max, track, formatValue, centerLabel, centerValue, legend, showPercent, tooltip, activeIndex, defaultActiveIndex, onActiveIndexChange, 'aria-label': ariaLabel, className, style, }: PieChartProps): import("react").JSX.Element;

package/lib/types/components/PieChart/arc.d.ts

@@ -0,0 +1,26 @@
+export interface SegmentShape {
+    cx: number;
+    cy: number;
+    /** Outer radius. */
+    outer: number;
+    /** Inner radius; 0 = a pie wedge. */
+    inner: number;
+    a0: number;
+    a1: number;
+    /** Gap to each neighbour in px. Edges stay parallel, so the gap has one width from hole to rim. */
+    gap?: number;
+    /** Rounding of the four corners in px; shrinks on its own when a segment is too thin or too short. */
+    cornerRadius?: number;
+}
+/**
+ * Path of one segment: an annular sector (or a wedge when `inner` is 0) with a constant-width gap
+ * to its neighbours and rounded corners.
+ *
+ * Small segments never invert: each corner radius is capped so its circle still fits between the
+ * two edges (outer: `(R·sin h − g) / (1 + sin h)`, inner: `(ρ·sin h − g) / (1 − sin h)`, h = half the
+ * sweep), and by half the ring thickness. When the edges meet before reaching the hole, the inner side
+ * collapses to the point where they cross. When the gap is wider than the segment, nothing is drawn.
+ */
+export declare function segmentPath({ cx, cy, outer, inner, a0, a1, gap, cornerRadius }: SegmentShape): string;
+/** cubic-bezier(x1, y1, x2, y2) as a function of progress 0…1 (bisection on x). */
+export declare function cubicBezier(x1: number, y1: number, x2: number, y2: number): (x: number) => number;

package/lib/types/components/PieChart/useArcTween.d.ts

@@ -0,0 +1,15 @@
+export interface TweenArc {
+    key: string;
+    a0: number;
+    a1: number;
+    color: string;
+}
+/**
+ * Angles that animate toward `target`: the first time they sweep in from 12 o'clock, after that each
+ * segment morphs from where it is. New keys grow from their start edge, removed keys shrink to their
+ * middle and then drop out. Runs with rAF, so it keeps going under reduced motion too.
+ */
+export declare function useArcTween(target: TweenArc[], { enter, update }?: {
+    enter?: number;
+    update?: number;
+}): TweenArc[];

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

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+import './Popover.css';
+export interface PopoverProps {
+    /** The element that opens it (usually a Button). */
+    trigger: ReactNode;
+    /** Content, or a render function that receives `close`. */
+    children: ReactNode | ((close: () => void) => ReactNode);
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** click: toggles on press · hover: opens after a short rest, closes after a grace period ·
+     *  manual: the trigger does nothing by itself — you drive `open` (e.g. a typeable field). Outside press / Esc still close it. */
+    openOn?: 'click' | 'hover' | 'manual';
+    align?: 'start' | 'center' | 'end';
+    /** Panel width in px (or any CSS width). */
+    width?: number | string;
+    /** Inner padding; 'none' for menus / media that draw their own. */
+    padding?: 'none' | 'sm' | 'md';
+    /** Move focus into the panel when it opens (click mode). */
+    autoFocus?: boolean;
+    className?: string;
+    'aria-label'?: string;
+}
+/**
+ * A small floating panel anchored to a trigger. It escapes overflow:hidden parents, flips above
+ * when there's no room below, and animates both in and out.
+ */
+export declare function Popover({ trigger, children, open: openProp, defaultOpen, onOpenChange, openOn, align, width, padding, autoFocus, className, 'aria-label': ariaLabel, }: PopoverProps): import("react").JSX.Element;

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

@@ -0,0 +1,64 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import './ProgressTracker.css';
+export interface TrackerStep {
+    id: string;
+    label: ReactNode;
+    /** Second line in gray. */
+    description?: ReactNode;
+    /** Something to click on the right, e.g. a "연결" button. Hidden once the step is done. */
+    action?: ReactNode;
+    disabled?: boolean;
+}
+export interface TrackerGroup {
+    id: string;
+    /** Section title. Struck through once every step in it is done. */
+    title: ReactNode;
+    steps: TrackerStep[];
+}
+export interface ProgressTrackerProps {
+    title: ReactNode;
+    /** The steps, as one flat list. Leave out when you pass `groups`. */
+    steps?: TrackerStep[];
+    /**
+     * Steps in folding sections (a setup guide). The open section sits on a soft gray panel, rows lead
+     * with a StatusIcon (current · pending · done), and the "n/total" counter moves beside the bar.
+     */
+    groups?: TrackerGroup[];
+    /** With `groups`: single keeps one section open (finishing one opens the next) · multiple lets any stay open. */
+    groupMode?: 'single' | 'multiple';
+    /** With `groups`: ids of the open sections (controlled). */
+    openGroups?: string[];
+    /** With `groups`: sections open at first. Defaults to the first unfinished one. */
+    defaultOpenGroups?: string[];
+    onOpenGroupsChange?: (open: string[]) => void;
+    /** Buttons at the right of the title (편집, minimize, close). */
+    actions?: ReactNode;
+    /** Ids of finished steps (controlled). */
+    completed?: string[];
+    defaultCompleted?: string[];
+    onCompletedChange?: (completed: string[]) => void;
+    /** Steps can't be ticked by hand (completion comes from your app). */
+    readOnly?: boolean;
+    /** Shown under the bar once every step is done. */
+    doneMessage?: ReactNode;
+    /**
+     * Folds the steps away behind a chevron, leaving the title, bar and `summary` —
+     * a compact card for the bottom of a sidebar. The steps slide open to their real height.
+     */
+    collapsible?: boolean;
+    open?: boolean;
+    /** With `collapsible`: start open. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** A caption under the bar. Defaults to "13% 완료" when collapsible. */
+    summary?: ReactNode | ((done: number, total: number) => ReactNode);
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * An onboarding checklist assembled only from existing components: Card (Header / Body) +
+ * Progress + List rows with a circle Checkbox — or, with `groups`, Accordion (filled) sections of
+ * List rows led by StatusIcon. The card padding and the row padding line up on the same left edge;
+ * its only CSS is the fold of `collapsible`.
+ */
+export declare function ProgressTracker({ title, steps, groups, groupMode, openGroups, defaultOpenGroups, onOpenGroupsChange, actions, completed, defaultCompleted, onCompletedChange, readOnly, doneMessage, collapsible, open: openProp, defaultOpen, onOpenChange, summary, className, style, }: ProgressTrackerProps): import("react").JSX.Element;