@iamfiro/design 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,42 @@
+import { type ReactNode } from 'react';
+import './Rating.css';
+export type RatingSize = 'sm' | 'md' | 'lg';
+export type RatingTone = 'amber' | 'accent' | 'danger' | 'neutral';
+export interface RatingProps {
+    /** Current rating; `null` = not rated yet. Fractions (4.3) are fine when `readOnly`. */
+    value?: number | null;
+    defaultValue?: number | null;
+    onValueChange?: (value: number | null) => void;
+    /** Number of icons. */
+    max?: number;
+    /** Half steps (3.5) when choosing. */
+    allowHalf?: boolean;
+    /** Choosing the current value again clears it (also Backspace / Delete). */
+    allowClear?: boolean;
+    /** Display only: fills fractionally (4.3 → the fifth star 30%) and isn't focusable. */
+    readOnly?: boolean;
+    disabled?: boolean;
+    size?: RatingSize;
+    /** Fill color: amber stars (default), accent, danger (hearts), neutral. */
+    tone?: RatingTone;
+    /** Custom icon (e.g. <Heart />); drawn twice, as the empty base and the clipped fill. */
+    icon?: ReactNode;
+    /** One label per whole value, shown beside the icons: labels[0] for 1 … labels[max - 1] for max. Follows the hover preview. */
+    labels?: string[];
+    /** Print the number beside the icons ("4.3"). */
+    showValue?: boolean;
+    /** Number of ratings, printed as "(128)". */
+    count?: number;
+    /** Submits the value with forms (empty when not rated). */
+    name?: string;
+    id?: string;
+    className?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+/**
+ * Star rating. Hover previews what a click would set and restores on leave; a click commits
+ * (and clearing is a second click on the same value). Keyboard follows radiogroup: arrows step,
+ * Home/End jump, Backspace clears. `readOnly` shows averages with fractional fill.
+ */
+export declare function Rating({ value: valueProp, defaultValue, onValueChange, max, allowHalf, allowClear, readOnly, disabled, size, tone, icon, labels, showValue, count, name, id, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }: RatingProps): import("react").JSX.Element;

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

@@ -0,0 +1,50 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import './Resizable.css';
+export type ResizableDirection = 'horizontal' | 'vertical';
+export interface ResizablePanelGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'dir'> {
+    /** horizontal: panels side by side · vertical: stacked. */
+    direction?: ResizableDirection;
+    /** `ResizablePanel`s with a `ResizableHandle` between each pair (groups nest inside panels). */
+    children: ReactNode;
+    /** Remembers the layout in localStorage under this key. */
+    autoSaveId?: string;
+    /** Every change while dragging (preview), sizes in %. */
+    onLayoutChange?: (sizes: number[]) => void;
+    /** When a change is committed: drag released, a key pressed, a panel collapsed or expanded. */
+    onLayout?: (sizes: number[]) => void;
+}
+export interface ResizablePanelProps extends HTMLAttributes<HTMLDivElement> {
+    /** Starting size (% of the group). Panels without one share what's left. */
+    defaultSize?: number;
+    /** % of the group. */
+    minSize?: number;
+    maxSize?: number;
+    /** Dragging it well past `minSize`, Enter or a double click on its handle folds it to `collapsedSize`. */
+    collapsible?: boolean;
+    /** Size while collapsed (%). With 0 the content is also taken out of focus order. */
+    collapsedSize?: number;
+    /** Collapsed state (controlled). */
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+}
+export interface ResizableHandleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** A small grip on the seam, so the handle can be found without hovering. */
+    withGrip?: boolean;
+    disabled?: boolean;
+}
+/**
+ * Panels whose sizes the user sets by dragging the handles between them. Sizes are percentages with
+ * min / max; collapsible panels fold shut when dragged well past their min and open again when pulled
+ * back (or with Enter / a double click on the handle). Dragging previews live and commits on release
+ * (`onLayout`); Esc during a drag puts everything back. Give the group a height (or put it in one).
+ */
+export declare function ResizablePanelGroup({ direction, children, autoSaveId, onLayoutChange, onLayout, className, style, ...rest }: ResizablePanelGroupProps): import("react").JSX.Element;
+/** One panel of a `ResizablePanelGroup`. Its size comes from the group; put scrolling content in a `ScrollArea`. */
+export declare function ResizablePanel({ defaultSize: _defaultSize, minSize: _minSize, maxSize: _maxSize, collapsible: _collapsible, collapsedSize: _collapsedSize, collapsed: _collapsed, defaultCollapsed: _defaultCollapsed, onCollapsedChange: _onCollapsedChange, id: _id, className, style, children, ...rest }: ResizablePanelProps): import("react").JSX.Element;
+/**
+ * The seam between two panels: an invisible 9px hit area that shows a thin line on hover, blue while
+ * dragging or focused. A WAI-ARIA separator: ←/→ (↑/↓ when stacked, Shift for bigger steps),
+ * Home / End, Enter folds or reopens the collapsible neighbour, Esc cancels a drag.
+ */
+export declare function ResizableHandle({ withGrip, disabled, className, 'aria-label': ariaLabel, ...rest }: ResizableHandleProps): import("react").JSX.Element | null;

package/lib/types/components/Resizable/layout.d.ts

@@ -0,0 +1,31 @@
+export interface PanelConstraints {
+    /** Smallest size while open (%). */
+    min: number;
+    /** Largest size (%). */
+    max: number;
+    /** Dragging past `min` (or Enter / double click on a handle) folds it to `collapsedSize`. */
+    collapsible: boolean;
+    /** Size while collapsed (%). */
+    collapsedSize: number;
+    defaultSize?: number;
+}
+export declare const isCollapsed: (sizes: number[], panels: PanelConstraints[], i: number) => boolean;
+/** Starting layout: `defaultSize`s, the rest split evenly, clamped to min / max, collapsed panels folded. */
+export declare function initialLayout(panels: PanelConstraints[], collapsed: boolean[]): number[];
+/**
+ * Moves handle `handle` (between panel `handle` and `handle + 1`) by `delta` %, starting from `start`.
+ * The panel on the growing side takes what the shrinking side gives; the shrinking side gives
+ * nearest-first down to each panel's min (so a push carries on into the next panel). A collapsible
+ * panel pushed past its min by `snap` × (min − collapsedSize) folds shut; a collapsed one opens to
+ * at least its min once pulled that far. Pointer drags use snap 0.5, keyboard steps 0.
+ */
+export declare function resizeLayout(start: number[], panels: PanelConstraints[], handle: number, delta: number, snap?: number): number[];
+/** Folds panel `i`; the freed space goes to its neighbours (nearest first, up to their max). */
+export declare function collapseLayout(start: number[], panels: PanelConstraints[], i: number): number[];
+/** Opens panel `i` to `target` (clamped to min / max), taking the space from its neighbours down to their min. */
+export declare function expandLayout(start: number[], panels: PanelConstraints[], i: number, target: number): number[];
+/** Splits the two panels around a handle back in their starting proportion (keeping their combined size). */
+export declare function resetPair(start: number[], panels: PanelConstraints[], handle: number, initial: number[]): number[];
+export declare const sameLayout: (a: number[], b: number[]) => boolean;
+export declare function loadLayout(id: string, count: number): number[] | null;
+export declare function saveLayout(id: string, sizes: number[]): void;

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

@@ -0,0 +1,38 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import './ScaledPreview.css';
+export type ScaledPreviewTone = 'subtle' | 'surface';
+export interface ScaledPreviewProps {
+    /** The live content to show as a miniature. It is inert: no pointer, focus or screen-reader access. */
+    children: ReactNode;
+    /** Stage height in px. */
+    height?: number;
+    /** Width (px) the content lays out at before it is scaled, so `width: 100%` content has room. */
+    contentWidth?: number;
+    /** Largest scale. The content shrinks further when it doesn't fit the stage. */
+    maxScale?: number;
+    /** Smallest scale; anything still too big is clipped at the stage edge. */
+    minScale?: number;
+    /** Breathing room (px) kept between the scaled content and the stage edge. */
+    inset?: number;
+    /** White chip in the top-left corner (category). */
+    label?: ReactNode;
+    /** Gray chip in the top-right corner (count, version…). */
+    meta?: ReactNode;
+    /**
+     * Mount the content only while the stage is on (or near) the screen, so off-screen previews don't
+     * run timers or animations. Shows `fallback` meanwhile.
+     */
+    lazy?: boolean;
+    /** Shown while a lazy preview is off-screen. Default: a shimmering Skeleton block. */
+    fallback?: ReactNode;
+    /** subtle: the lightest gray fill · surface: white (use inside a gray tray). */
+    tone?: ScaledPreviewTone;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A fixed-height stage that shows a live component as a centred, scaled-down miniature — gallery
+ * cards, template pickers, "what it looks like" thumbnails. The scale fits the content to the stage
+ * (up to `maxScale`), and `lazy` previews mount only while visible.
+ */
+export declare function ScaledPreview({ children, height, contentWidth, maxScale, minScale, inset, label, meta, lazy, fallback, tone, className, style, }: ScaledPreviewProps): import("react").JSX.Element;

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

@@ -0,0 +1,81 @@
+import { type CSSProperties } from 'react';
+import { type ChartRow, type ChartTone } from '../Chart/chart';
+import './ScatterChart.css';
+export type ScatterChartRow = ChartRow;
+/** One colour group of points (a plan, a cohort). */
+export interface ScatterCategory {
+    /** Value of `categoryKey` that belongs to this group. */
+    key: string;
+    label: string;
+    /** CSS variable (`--chart-1`) or any color. Defaults to the chart palette in order. */
+    color?: string;
+}
+/** A dashed line across the plot at `value` on one axis (target, average). */
+export interface ScatterReferenceLine {
+    /** `y`: a horizontal line at a y value · `x`: a vertical line at an x value. */
+    axis: 'x' | 'y';
+    value: number;
+    label?: string;
+    /** Defaults to `neutral`. */
+    tone?: ChartTone;
+}
+export interface ScatterChartProps {
+    data: ScatterChartRow[];
+    /** Field with each point's x value. */
+    xKey: string;
+    /** Field with each point's y value. */
+    yKey: string;
+    /** Field that scales the point into a bubble (area grows with the value). */
+    sizeKey?: string;
+    /** Field whose value picks the point's colour group. */
+    categoryKey?: string;
+    /** Groups in legend order, with labels and colours. Defaults to the distinct `categoryKey` values in order. */
+    categories?: ScatterCategory[];
+    /** Field with the point's name (tooltip title). Defaults to the group label. */
+    labelKey?: string;
+    /** Plot height in px (axis labels included). */
+    height?: number;
+    /** Axis titles (also the tooltip row labels). */
+    xLabel?: string;
+    yLabel?: string;
+    sizeLabel?: string;
+    /** Number of axis labels. */
+    xTickCount?: number;
+    yTickCount?: number;
+    /** Range the axis must cover; rounded out to nice ticks. Defaults to the data range (0 when close). */
+    xDomain?: [number, number];
+    yDomain?: [number, number];
+    /** Bubble radius in px for the smallest · largest `sizeKey` value. */
+    sizeRange?: [number, number];
+    /** Radius in px of points without `sizeKey`. */
+    pointRadius?: number;
+    /** A dashed least-squares line: `true` through every shown point, `'category'` one per group in its colour. */
+    trendLine?: boolean | 'category';
+    referenceLines?: ScatterReferenceLine[];
+    /** Values in the tooltip. */
+    formatX?: (value: number, row: ScatterChartRow) => string;
+    formatY?: (value: number, row: ScatterChartRow) => string;
+    formatSize?: (value: number, row: ScatterChartRow) => string;
+    /** Axis labels. Default to compact Korean (`6천`, `1.2만`). */
+    formatAxisX?: (value: number) => string;
+    formatAxisY?: (value: number) => string;
+    /** Group legend under the plot; click to hide or show a group, hover to highlight it. */
+    legend?: boolean;
+    /** Group keys that are hidden (controlled). */
+    hiddenCategories?: string[];
+    defaultHiddenCategories?: string[];
+    onHiddenCategoriesChange?: (keys: string[]) => void;
+    /** Highlighted point: its index among the shown points in x order. */
+    activeIndex?: number | null;
+    defaultActiveIndex?: number | null;
+    onActiveIndexChange?: (index: number | null) => void;
+    'aria-label'?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Points on two value axes, optionally sized (bubbles) and coloured by group. The point nearest the
+ * pointer grows and the rest fade, with a Card tooltip beside it; arrow keys walk the points left to
+ * right. Legend entries toggle their group, which fades and shrinks out in place.
+ */
+export declare function ScatterChart({ data, xKey, yKey, sizeKey, categoryKey, categories: categoriesProp, labelKey, height, xLabel, yLabel, sizeLabel, xTickCount, yTickCount, xDomain, yDomain, sizeRange, pointRadius, trendLine, referenceLines, formatX, formatY, formatSize, formatAxisX, formatAxisY, legend, hiddenCategories, defaultHiddenCategories, onHiddenCategoriesChange, activeIndex, defaultActiveIndex, onActiveIndexChange, 'aria-label': ariaLabel, className, style, }: ScatterChartProps): import("react").JSX.Element;

package/lib/types/components/ScatterChart/scatter.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Round ticks (1 · 1.5 · 2 · 2.5 · 3 · 5 × 10ⁿ apart) that cover `min … max` in about `count` labels.
+ * With `snapZero`, an all-positive range close enough to 0 starts at 0 so bubbles keep an honest baseline.
+ * The last tick is the first round value at or past `max`, so the count can come out one lower.
+ */
+export declare function niceRangeTicks(min: number, max: number, count: number, snapZero?: boolean): number[];
+/** Least-squares line through the points, or null with fewer than two distinct x values. */
+export declare function linearRegression(points: Array<{
+    x: number;
+    y: number;
+}>): {
+    slope: number;
+    intercept: number;
+} | null;

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

@@ -0,0 +1,34 @@
+import { type HTMLAttributes, type ReactNode, type Ref, type UIEvent } from 'react';
+import './ScrollArea.css';
+export type ScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';
+export interface ScrollAreaProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onScroll'> {
+    children?: ReactNode;
+    /** Which way the content scrolls. */
+    orientation?: ScrollAreaOrientation;
+    /** Caps the height; the area grows with its content up to this and then scrolls. */
+    maxHeight?: number | string;
+    /** auto: bars appear while hovered or scrolling and fade out · always: shown whenever the content overflows. */
+    scrollbars?: 'auto' | 'always';
+    /** Soft edges where more content hides (only on the sides you can still scroll toward). A number sets the fade size in px. */
+    fade?: boolean | number;
+    /** Chat logs: start at the bottom and stay there as content grows, unless the reader scrolled up. */
+    stickToBottom?: boolean;
+    /** Whether the view is at (or within 8px of) the bottom — show a "새 메시지" button when it isn't. */
+    onAtBottomChange?: (atBottom: boolean) => void;
+    /** The scrolling element, for `scrollTo` and friends. */
+    viewportRef?: Ref<HTMLDivElement>;
+    viewportClassName?: string;
+    /**
+     * Makes the viewport a Tab stop so the keyboard can scroll it. Default: on when it overflows
+     * and nothing inside is focusable. Give it an `aria-label` too.
+     */
+    focusable?: boolean;
+    onScroll?: (e: UIEvent<HTMLDivElement>) => void;
+}
+/**
+ * A scroll container with the system's overlay scrollbars on every platform. Scrolling stays native
+ * (wheel, touch, keyboard, scroll snapping); only the bars are drawn: a 4px thumb that shows while
+ * hovered or scrolling and fades out after, can be dragged (Esc puts it back), and a click on the
+ * track pages toward the click. `fade` softens the edges that still hide content.
+ */
+export declare function ScrollArea({ children, orientation, maxHeight, scrollbars, fade, stickToBottom, onAtBottomChange, viewportRef, viewportClassName, focusable, onScroll, className, style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...rest }: ScrollAreaProps): import("react").JSX.Element;

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

@@ -0,0 +1,39 @@
+import { type ReactNode, type RefObject } from 'react';
+import { type ListOption, type OptionState } from '../Listbox/Listbox';
+import './Select.css';
+export interface SelectProps<V extends string> {
+    options: ListOption<V>[];
+    value?: V | null;
+    defaultValue?: V | null;
+    onValueChange?: (value: V) => void;
+    /** Controlled open state, e.g. to open from elsewhere. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placeholder?: ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    invalid?: boolean;
+    /** Icon in front of the value; defaults to the selected option's icon. */
+    leading?: ReactNode;
+    /** Submits the value with forms. */
+    name?: string;
+    id?: string;
+    className?: string;
+    maxHeight?: number;
+    renderValue?: (option: ListOption<V>) => ReactNode;
+    renderOption?: (option: ListOption<V>, state: OptionState) => ReactNode;
+    /**
+     * Just the value and chevron, no field surface: a picker that sits inside another field
+     * (PhoneInput's country code). Hover is a small gray fill; the outer field draws focus.
+     */
+    bare?: boolean;
+    /** Open the list against this element instead of the trigger (the whole field around a bare Select). */
+    anchorRef?: RefObject<HTMLElement | null>;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+/**
+ * Custom select (WAI-ARIA "select-only combobox"): focus stays on the trigger while
+ * arrows, Home/End, typeahead, Enter/Space and Escape drive the list.
+ */
+export declare function Select<V extends string>({ options, value: valueProp, defaultValue, onValueChange, open: openProp, onOpenChange, placeholder, size, disabled, invalid, leading, name, id, className, maxHeight, renderValue, renderOption, bare, anchorRef, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }: SelectProps<V>): import("react").JSX.Element;

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

@@ -0,0 +1,39 @@
+import { type ReactNode } from 'react';
+import './Sidebar.css';
+export interface SidebarProps {
+    /** Brand / workspace switcher at the top. */
+    header?: ReactNode;
+    /** Pinned at the bottom (user, settings…). */
+    footer?: ReactNode;
+    children: ReactNode;
+    className?: string;
+    'aria-label'?: string;
+}
+/** Vertical navigation: header, scrolling groups of items, footer. */
+export declare function Sidebar({ header, footer, children, className, 'aria-label': ariaLabel }: SidebarProps): import("react").JSX.Element;
+export declare namespace Sidebar {
+    var Group: typeof SidebarGroup;
+    var Item: typeof SidebarItem;
+}
+export interface SidebarGroupProps {
+    label?: ReactNode;
+    icon?: ReactNode;
+    /** A number shown at the end of the label row. */
+    count?: number;
+    /** Lets the group fold; the chevron rotates and the items slide. */
+    collapsible?: boolean;
+    defaultOpen?: boolean;
+    children: ReactNode;
+}
+export declare function SidebarGroup({ label, icon, count, collapsible, defaultOpen, children }: SidebarGroupProps): import("react").JSX.Element;
+export interface SidebarItemProps {
+    children: ReactNode;
+    href?: string;
+    onClick?: () => void;
+    active?: boolean;
+    icon?: ReactNode;
+    /** Trailing badge, dot or count. */
+    badge?: ReactNode;
+    disabled?: boolean;
+}
+export declare function SidebarItem({ children, href, onClick, active, icon, badge, disabled }: SidebarItemProps): import("react").JSX.Element;

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

@@ -0,0 +1,47 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type TextVariant } from '../../primitives';
+import './Skeleton.css';
+export type SkeletonAnimation = 'shimmer' | 'pulse' | 'none';
+declare const RADIUS: {
+    readonly none: "0";
+    readonly sm: "6px";
+    readonly md: "10px";
+    readonly lg: "16px";
+    readonly full: "999px";
+};
+export interface SkeletonProps {
+    width?: number | string;
+    height?: number | string;
+    radius?: keyof typeof RADIUS | number;
+    animation?: SkeletonAnimation;
+    className?: string;
+    style?: CSSProperties;
+}
+/** A gray placeholder block with a light sweeping across it. */
+export declare function Skeleton({ width, height, radius, animation, className, style }: SkeletonProps): import("react").JSX.Element;
+export interface SkeletonTextProps {
+    lines?: number;
+    /** Width of the last line, so the block reads like a paragraph. */
+    lastLineWidth?: string;
+    /** Match the line height and cap height of a type role. */
+    variant?: TextVariant;
+    animation?: SkeletonAnimation;
+    className?: string;
+}
+/** Placeholder lines sized to a type role, so swapping in real text doesn't shift layout. */
+export declare function SkeletonText({ lines, lastLineWidth, variant, animation, className }: SkeletonTextProps): import("react").JSX.Element;
+export declare function SkeletonCircle({ size: px, animation }: {
+    size?: number;
+    animation?: SkeletonAnimation;
+}): import("react").JSX.Element;
+export interface SkeletonGroupProps {
+    /** While true, shows `fallback`; when false, fades the real children in. */
+    loading: boolean;
+    fallback: ReactNode;
+    children: ReactNode;
+    label?: string;
+    className?: string;
+}
+/** Swaps a skeleton for the real content with a soft fade, and tells screen readers it's loading. */
+export declare function SkeletonGroup({ loading, fallback, children, label, className }: SkeletonGroupProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,36 @@
+import { type ReactNode } from 'react';
+import './Slider.css';
+export type SliderValue = number | [number, number];
+export type SliderMark = number | {
+    value: number;
+    label?: ReactNode;
+};
+export interface SliderProps<T extends SliderValue> {
+    /** A number for one thumb, a `[from, to]` tuple for a range. */
+    value?: T;
+    defaultValue?: T;
+    /** Fires on every change while dragging or pressing keys. */
+    onValueChange?: (value: T) => void;
+    /** Fires once when the user lets go (pointer up / key press), e.g. to save or fetch. */
+    onValueCommit?: (value: T) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Range only: smallest allowed gap between the two thumbs. */
+    minDistance?: number;
+    /** Tick marks under the track; give a label to print it. */
+    marks?: SliderMark[];
+    formatValue?: (value: number) => string;
+    /** Value bubble above the thumb: while interacting (auto), always, or never. */
+    showValue?: 'auto' | 'always' | 'never';
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    /** Submits with forms as `name` (range: `name[0]`, `name[1]`). */
+    name?: string;
+    id?: string;
+    className?: string;
+    'aria-label'?: string;
+    /** Range: per-thumb labels, e.g. (i) => (i === 0 ? '최소 가격' : '최대 가격'). */
+    getThumbLabel?: (index: number) => string;
+}
+export declare function Slider<T extends SliderValue = number>({ value, defaultValue, onValueChange, onValueCommit, min, max, step, minDistance, marks, formatValue, showValue, size, disabled, name, id, className, 'aria-label': ariaLabel, getThumbLabel, }: SliderProps<T>): import("react").JSX.Element;

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

@@ -0,0 +1,10 @@
+import { type ButtonProps } from '../../primitives';
+export type SocialProvider = 'google' | 'apple';
+export type SocialLoginAction = 'continue' | 'signin' | 'signup';
+export interface SocialLoginButtonProps extends Omit<ButtonProps, 'variant' | 'icon' | 'iconRight'> {
+    provider: SocialProvider;
+    /** Which label to show: "Google로 계속하기" · "Google로 로그인" · "Google로 가입하기". `children` overrides it. */
+    action?: SocialLoginAction;
+}
+/** "Continue with Google / Apple" — a Button with the provider's mark, colours and a Korean label. */
+export declare const SocialLoginButton: import("react").ForwardRefExoticComponent<SocialLoginButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,55 @@
+import { type CSSProperties } from 'react';
+import { type SparkTone } from './spark';
+import '../Chart/Chart.css';
+import './SparkChart.css';
+export interface SparkLineProps {
+    /** One value per step, oldest first. `null` = no data: the line breaks there. */
+    data: Array<number | null>;
+    /** Height in px. Stays crisp from 24 to 40. */
+    height?: number;
+    /** Width in px or any CSS length. Defaults to filling the parent. */
+    width?: number | string;
+    /** linear: straight segments · smooth: monotone curve that never overshoots the data. */
+    curve?: 'linear' | 'smooth';
+    /** CSS variable (`--chart-2`) or any color. Wins over `tone`. */
+    color?: string;
+    /** accent: blue · neutral: gray · trend: green when the series moved the good way, orange (or `worseTone`) otherwise. */
+    tone?: SparkTone;
+    /** What a higher number means for `tone="trend"`. Cost, time and errors are `worse`. */
+    higherIs?: 'better' | 'worse' | 'neutral';
+    /** Color of a change for the worse with `tone="trend"`. */
+    worseTone?: 'warning' | 'danger';
+    /** Bottom of the value range. Defaults to the smallest value (sparks show shape, not magnitude). */
+    min?: number;
+    /** Top of the value range. Defaults to the largest value. */
+    max?: number;
+    /** A dot on the last value. */
+    endDot?: boolean;
+    /** Hover · touch · ←/→ show a crosshair dot and the value card. `false` draws a static picture (no listeners). */
+    tooltip?: boolean;
+    /** Tooltip title per step, e.g. "10월 3일". */
+    formatLabel?: (index: number) => string;
+    /** Row name in the tooltip, e.g. "매출". */
+    valueLabel?: string;
+    formatValue?: (value: number) => string;
+    activeIndex?: number | null;
+    defaultActiveIndex?: number | null;
+    onActiveIndexChange?: (index: number | null) => void;
+    'aria-label'?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface SparkAreaProps extends SparkLineProps {
+    /** gradient: soft fill fading downward · solid: one flat soft tint. */
+    fill?: 'gradient' | 'solid';
+}
+export interface SparkChartProps extends SparkAreaProps {
+    /** line · area · bar (bar renders Sparkbar with the same props). */
+    type?: 'line' | 'area' | 'bar';
+}
+/** A tiny line without axes — for table cells and KPI cards. */
+export declare function SparkLine(props: SparkLineProps): import("react").JSX.Element;
+/** A tiny line with a soft gradient fill under it — for KPI cards. */
+export declare function SparkArea(props: SparkAreaProps): import("react").JSX.Element;
+/** One entry point for the three spark types; `type="bar"` hands the same props to Sparkbar. */
+export declare function SparkChart({ type, ...props }: SparkChartProps): import("react").JSX.Element;

package/lib/types/components/SparkChart/spark.d.ts

@@ -0,0 +1,16 @@
+/** accent: blue · neutral: gray · trend: green or orange/red by direction (last value vs first), like Delta. */
+export type SparkTone = 'neutral' | 'accent' | 'trend';
+export interface SparkColorOptions {
+    /** CSS variable (`--chart-2`) or any color. Wins over `tone`. */
+    color?: string;
+    tone?: SparkTone;
+    /** What a higher number means for `tone="trend"` (same as Delta). */
+    higherIs?: 'better' | 'worse' | 'neutral';
+    /** Tone of a change for the worse. */
+    worseTone?: 'warning' | 'danger';
+}
+/** Which way the series moved: its last recorded value against its first. */
+export declare function sparkTrend(data: Array<number | null>): 'up' | 'down' | 'none';
+/** The resolved stroke / fill colour, or `undefined` when neither `color` nor `tone` is given. */
+export declare function sparkColor(data: Array<number | null>, { color, tone, higherIs, worseTone }: SparkColorOptions): string | undefined;
+export declare const isSparkValue: (v: number | null | undefined) => v is number;

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

@@ -0,0 +1,39 @@
+import { type CSSProperties } from 'react';
+import { type SparkTone } from '../SparkChart/spark';
+import '../Chart/Chart.css';
+import './Sparkbar.css';
+export interface SparkbarProps {
+    /** One bar per slot. `null` = no data yet (future days): drawn as a flat placeholder. */
+    data: Array<number | null>;
+    /** Height of the strip in px. */
+    height?: number;
+    /** Value of a full-height bar. Defaults to the largest value. */
+    max?: number;
+    /** CSS variable (`--accent`) or any color. The highlighted bar gets a little darker. */
+    color?: string;
+    /** Bar colour by role (shared with SparkLine): accent · neutral · trend (green / orange by direction). `color` wins. */
+    tone?: SparkTone;
+    /** What a higher number means for `tone="trend"`. */
+    higherIs?: 'better' | 'worse' | 'neutral';
+    /** Color of a change for the worse with `tone="trend"`. */
+    worseTone?: 'warning' | 'danger';
+    /** Tooltip title per slot, e.g. "10월 3일". */
+    formatLabel?: (index: number) => string;
+    /** Row name in the tooltip, e.g. "사용량". */
+    valueLabel?: string;
+    formatValue?: (value: number) => string;
+    /** 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 compact strip of bars without axes — daily counts under a total, activity in a row.
+ * Bars grow from the baseline once and slide to new heights when the data changes.
+ * Hover, touch and ←/→ highlight a bar and show its value in the chart tooltip card.
+ */
+export declare function Sparkbar({ data, height, max, color, tone, higherIs, worseTone, formatLabel, formatValue, valueLabel, tooltip, activeIndex, defaultActiveIndex, onActiveIndexChange, 'aria-label': ariaLabel, className, style, }: SparkbarProps): import("react").JSX.Element;

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

@@ -0,0 +1,31 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import './SplitView.css';
+export interface SplitViewProps {
+    /** The list (master) pane on the left. */
+    list: ReactNode;
+    /** The detail pane on the right. */
+    children: ReactNode;
+    /** Width of the list pane, px (controlled). */
+    listWidth?: number;
+    /** Starting width of the list pane, px. Double-clicking the divider returns to it. */
+    defaultListWidth?: number;
+    /** While dragging or pressing arrows on the divider. */
+    onListWidthChange?: (width: number) => void;
+    minListWidth?: number;
+    maxListWidth?: number;
+    /** A divider you can drag (or focus and move with ←/→) to resize the list pane. */
+    resizable?: boolean;
+    /** soft (default): the list pane sits on a soft gray panel, so raised selected rows stand out · plain: white. */
+    listTone?: 'plain' | 'soft';
+    /** Accessible names of the two panes. */
+    listLabel?: string;
+    detailLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Master–detail layout: a list pane and a detail pane side by side, each scrolling on its own.
+ * Give it a height (or put it in one). With `resizable` the divider is a WAI-ARIA separator:
+ * drag it, or focus it and use ←/→ (Shift for bigger steps), Home/End; Esc during a drag puts it back.
+ */
+export declare function SplitView({ list, children, listWidth, defaultListWidth, onListWidthChange, minListWidth, maxListWidth, resizable, listTone, listLabel, detailLabel, className, style, }: SplitViewProps): import("react").JSX.Element;