@wipco/sdui 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -72,12 +72,23 @@ declare function Can({ entity, action, scope, fallback, children }: CanProps): R
  */
 
 interface IconProps extends React__default.SVGAttributes<SVGSVGElement> {
+    /** kebab-case Lucide 이름 — "scan-line", "layers", "circle-alert". */
     name: string;
+    /** 픽셀 박스. 기본 18. */
     size?: number;
+    /** 기본 1.5. 32px 위에서만 2를 쓴다. */
     strokeWidth?: number;
+    /** 주면 role="img" + aria-label. 장식 아이콘은 생략한다. */
+    title?: string;
 }
-/** 스트로크 아이콘. 등록되지 않은 이름은 점으로 대체된다. */
-declare function Icon({ name, size, strokeWidth, ...rest }: IconProps): React__default.JSX.Element;
+/**
+ * 스트로크 아이콘. 130종을 24px 그리드 위에 그린다.
+ *
+ * **등록되지 않은 이름은 `null`이다** — 예전엔 점(●)으로 대체했는데, 그러면 스펙 오타나
+ * 아직 안 넣은 이름이 "없던 자국"으로 화면에 남는다. 빠진 아이콘은 비어 보이는 편이
+ * 낫고, 어차피 잘못된 이름은 check-meta가 팔레트 쪽에서 잡는다.
+ */
+declare function Icon({ name, size, strokeWidth, className, style, title, ...rest }: IconProps): React__default.JSX.Element | null;
 interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
     /** primary = WIPCO Blue, secondary = 외곽선(기본), ghost = 투명, danger = WIPCO Red, link = 인라인 */
     variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link';
@@ -87,33 +98,52 @@ interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElem
     icon?: string;
     /** 후행 아이콘 이름 */
     iconEnd?: string;
-    /** 라벨을 스피너로 바꾸고 입력을 막는다 */
+    /**
+     * 라벨을 감추고 스피너를 돌린다.
+     *
+     * 스피너는 **CSS가 그린다**(`.wp-btn--loading::after`) — 엘리먼트를 따로 넣지 않는다.
+     * 예전엔 `<span class="wp-spinner">`를 렌더했는데, 같은 클래스에 ::after 규칙을 가진
+     * 디자인 시스템 스타일시트와 겹치면 원이 두 개 돈다. 그릴 주체를 CSS 한쪽으로 모은다.
+     */
     loading?: boolean;
     block?: boolean;
     disabled?: boolean;
+    /**
+     * 다른 태그로 렌더한다. 링크로 보내야 하는 자리(SSO 이동 등)는 `as="a"` + `href`다 —
+     * `<button>`에 href를 달면 아무 데도 가지 않는다.
+     *
+     * button이 아닐 때는 `disabled` 속성이 없으므로 비활성은 `aria-disabled`로만 알린다
+     * (그래서 button일 때도 둘 다 붙인다 — 표기가 태그에 따라 달라지지 않게).
+     */
+    as?: 'button' | 'a' | 'span';
     children?: React__default.ReactNode;
 }
-declare function Button({ variant, size, icon, iconEnd, loading, block, disabled, children, className, type, ...rest }: ButtonProps): React__default.JSX.Element;
+declare function Button({ variant, size, icon, iconEnd, loading, block, disabled, as, children, className, ...rest }: ButtonProps): React__default.JSX.Element;
 interface IconButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
     icon: string;
-    /** 접근성 라벨(필수 권장) */
+    /** 접근성 라벨(필수 권장) — title이자 aria-label이 된다. */
     label?: string;
-    size?: 'xs' | 'sm' | 'md';
+    /** xs 24 · sm 28 · md 32(기본) · lg 40 px 정사각 */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * 예전 이름. `variant`를 주지 않았을 때만 쓰인다 — `variant` 주석 참고.
      * @deprecated `variant`로 옮겨라. `tone="danger"`는 `variant="danger"`와 같다.
      */
     tone?: 'default' | 'danger';
     /**
-     * 디자인 시스템 어휘. ghost = 투명(기본) · outlined = 하드라인 테두리 · danger = 빨강.
+     * 디자인 시스템 어휘. ghost = 투명(기본) · outlined = 하드라인 테두리 ·
+     * solid = 채움 · danger = 빨강 · onchrome = 네이비 사이드바/탑바 위.
      *
      * 같은 자리를 가리키는 프롭이 `tone`과 둘로 갈라져 있는데 **variant가 이긴다** —
      * 스펙과 디자인 시스템 문서가 쓰는 이름이 이쪽이고, 값 어휘도 넓다(outlined는 tone에 없다).
      * variant를 주지 않으면 tone이 그대로 먹으므로 tone만 쓰던 코드는 그대로 돈다.
      */
-    variant?: 'ghost' | 'outlined' | 'danger';
+    variant?: 'ghost' | 'outlined' | 'solid' | 'danger' | 'onchrome';
+    /** 토글 상태 — aria-pressed로 나가고 선택 틴트를 입는다. */
+    pressed?: boolean;
+    disabled?: boolean;
 }
-declare function IconButton({ icon, label, size, tone, variant, className, type, ...rest }: IconButtonProps): React__default.JSX.Element;
+declare function IconButton({ icon, label, size, tone, variant, pressed, disabled, className, type, ...rest }: IconButtonProps): React__default.JSX.Element;
 interface InputProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     /** sm 28 · md 32(기본) · lg 40 px */
     size?: 'sm' | 'md' | 'lg';
@@ -124,15 +154,11 @@ interface InputProps extends Omit<React__default.InputHTMLAttributes<HTMLInputEl
     /** 고정폭 글꼴 — ID, 좌표, 해시 */
     mono?: boolean;
     /**
-     * 입력 오른쪽 끝에 겹쳐 그리는 후행 표시 — "원", "위", "mm" 같은 단위가 대부분이다.
+     * 입력 오른쪽 끝에 겹쳐 그리는 후행 표시.
      *
-     * 단위를 값 안에 섞어 넣지 않는다는 규칙을 지키려면 값이 아니라 입력 위에 얹어야 해서,
-     * 선행 `icon`과 같은 래퍼를 쓴다.
-     *
-     * 문자열은 **ICON_PATHS에 있는 이름이면 아이콘, 아니면 그대로 단위 글자**로 그린다.
-     * 디자인 시스템 쪽 용례는 `trailing="eye"`(비밀번호 보기)처럼 아이콘 이름인데
-     * 실제 스펙 9곳은 전부 "원"·"위" 같은 단위 글자라, 둘 중 하나만 고르면 나머지가 깨진다.
-     * 단위가 아이콘 이름과 겹치는 일은 없으므로 이름으로 갈라도 안전하다.
+     * **문자열은 아이콘 이름으로 읽는다** — `trailing="eye"`(비밀번호 보기)가 원래 용례다.
+     * 등록되지 않은 이름이면 Icon이 null을 내므로 자리만 남는다. 단위 글자("원", "mm")를
+     * 넣고 싶으면 문자열이 아니라 노드로 줘라: `trailing={<span>원</span>}`.
      */
     trailing?: React__default.ReactNode;
 }
@@ -158,9 +184,16 @@ declare function Select({ options, size, invalid, placeholder, className, ...res
 interface CheckboxProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
     label?: React__default.ReactNode;
     description?: React__default.ReactNode;
+    /**
+     * 부분 선택 — 전체선택 체크박스의 "일부만 골랐다" 상태.
+     *
+     * HTML 속성이 아니라 DOM 프로퍼티라 ref로 직접 넣어야 한다(마크업에 남지 않는다).
+     * 글리프도 체크가 아니라 빼기로 바뀐다.
+     */
+    indeterminate?: boolean;
     disabled?: boolean;
 }
-declare function Checkbox({ label, description, disabled, className, ...rest }: CheckboxProps): React__default.JSX.Element;
+declare function Checkbox({ label, description, indeterminate, disabled, className, ...rest }: CheckboxProps): React__default.JSX.Element;
 interface SwitchProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     label?: React__default.ReactNode;
     size?: 'sm' | 'md';
@@ -230,10 +263,12 @@ interface ToastProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>,
     tone?: 'info' | 'success' | 'warning' | 'danger';
     title?: React__default.ReactNode;
     children?: React__default.ReactNode;
+    /** 인라인 액션 하나 — 되돌리기 같은 것. Button variant="link"를 넣는다. */
+    action?: React__default.ReactNode;
     onClose?: () => void;
 }
 /** 우하단 일시 알림. .wp-toast-region 안에 렌더링된다. */
-declare function Toast({ tone, title, children, onClose, className, ...rest }: ToastProps): React__default.JSX.Element;
+declare function Toast({ tone, title, children, action, onClose, className, ...rest }: ToastProps): React__default.JSX.Element;
 interface TabItem {
     value: string;
     label: React__default.ReactNode;
@@ -245,8 +280,10 @@ interface TabsProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>,
     value: string;
     onChange?: (value: string) => void;
     size?: 'md' | 'lg';
+    /** 네이비 탑바 위 — 밝은 글자, 빨간 인디케이터. */
+    onChrome?: boolean;
 }
-declare function Tabs({ items, value, onChange, size, className, ...rest }: TabsProps): React__default.JSX.Element;
+declare function Tabs({ items, value, onChange, size, onChrome, className, ...rest }: TabsProps): React__default.JSX.Element;
 interface TableColumn {
     key: string;
     header: React__default.ReactNode;
@@ -255,6 +292,8 @@ interface TableColumn {
     align?: 'left' | 'right';
     mono?: boolean;
     strong?: boolean;
+    /** 헤더를 정렬 버튼으로 만든다. 실제 정렬은 `sort`·`onSort`가 담당한다. */
+    sortable?: boolean;
     /**
      * 셀 값을 Badge로 렌더링 — JSON 스펙에서 쓸 수 있는 선언적 지정.
      * toneMap: 값 → tone, labelMap: 값 → 표시 텍스트(생략 시 값 그대로)
@@ -272,13 +311,24 @@ interface TableProps extends React__default.TableHTMLAttributes<HTMLTableElement
     /** 40px 대신 32px 행 */
     dense?: boolean;
     hover?: boolean;
+    /** 스크롤 본문용 고정 헤더 */
+    sticky?: boolean;
+    /** 현재 정렬 상태 — 해당 컬럼 헤더의 화살표 방향을 정한다 */
+    sort?: {
+        key: string;
+        dir: 'asc' | 'desc';
+    };
+    /** 정렬 헤더를 눌렀을 때. 주지 않으면 sortable 컬럼도 버튼이 되지 않는다 */
+    onSort?: (key: string) => void;
+    /** 선택된 행의 rowKey 값 — 해당 행에 aria-selected가 붙고 하이라이트된다 */
+    selectedIds?: any[];
     /** 행 key와 선택에 쓸 필드. 기본 "id" */
     rowKey?: string;
     onRowClick?: (row: any) => void;
     /** rows가 비었을 때 대신 렌더링 — EmptyState 권장 */
     empty?: React__default.ReactNode;
 }
-declare function Table({ columns, rows, dense, hover, rowKey, onRowClick, empty, className, ...rest }: TableProps): React__default.JSX.Element;
+declare function Table({ columns, rows, dense, hover, sticky, sort, onSort, selectedIds, rowKey, onRowClick, empty, className, ...rest }: TableProps): React__default.JSX.Element;
 interface StatCardProps extends React__default.HTMLAttributes<HTMLDivElement> {
     label: React__default.ReactNode;
     value: React__default.ReactNode;
@@ -302,24 +352,33 @@ interface EmptyStateProps extends Omit<React__default.HTMLAttributes<HTMLDivElem
 declare function EmptyState({ icon, title, children, actions, tight, className, ...rest }: EmptyStateProps): React__default.JSX.Element;
 interface SpinnerProps extends React__default.HTMLAttributes<HTMLSpanElement> {
     size?: 'sm' | 'md' | 'lg';
+    /** 네이비/뷰어 표면 위 — 밝은 테두리로 뒤집는다. */
+    inverse?: boolean;
     label?: string;
 }
-declare function Spinner({ size, label, className, ...rest }: SpinnerProps): React__default.JSX.Element;
+declare function Spinner({ size, inverse, label, className, ...rest }: SpinnerProps): React__default.JSX.Element;
 interface ProgressBarProps extends React__default.HTMLAttributes<HTMLDivElement> {
-    /** 0~100 */
+    /** 0~`max` */
     value: number;
+    /** 기본 100. 용량 게이지처럼 분모가 100이 아닌 자리에 쓴다 */
+    max?: number;
     /** danger 임계 강조 등 */
     tone?: 'brand' | 'success' | 'warning' | 'danger' | 'info';
+    /** sm 4 · md 6(기본) · lg 8 px */
+    size?: 'sm' | 'md' | 'lg';
+    /** 사선 해치 애니메이션 — 진행 중인 작업에만 */
+    striped?: boolean;
     label?: React__default.ReactNode;
     /**
-     * 라벨 줄 오른쪽 끝에 현재 값을 퍼센트로 적는다.
+     * 현재 값을 퍼센트로 적는다.
      *
      * 막대만으로는 82%와 91%를 구분할 수 없어서, 여러 개를 세로로 쌓아 비교하는
-     * 자리(공정별 진척 목록 등)에서 필요하다. 라벨 없이 켜도 값은 오른쪽에 붙는다.
+     * 자리(공정별 진척 목록 등)에서 필요하다. 라벨이 있으면 라벨 줄 오른쪽 끝에,
+     * 라벨이 없으면 막대 오른쪽 옆(.wp-meter-row)에 붙는다.
      */
     showValue?: boolean;
 }
-declare function ProgressBar({ value, tone, label, showValue, className, ...rest }: ProgressBarProps): React__default.JSX.Element;
+declare function ProgressBar({ value, max, tone, size, striped, showValue, label, className, ...rest }: ProgressBarProps): React__default.JSX.Element;
 interface PaginationProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     page: number;
     pageCount: number;

package/dist/index.js

@@ -1,5 +1,5 @@
-import { Toast, Textarea, Tag, Tabs, Table, Switch, StatCard, Spinner, Select, ProgressBar, Pagination, Input, IconButton, Icon, Field, EmptyState, DateRangePicker, DatePicker, Checkbox, Card, Button, Badge, Alert, Dialog } from './chunk-AR2JYE75.js';
-export { Alert, Badge, Button, Card, Checkbox, DatePicker, DateRangePicker, Dialog, EmptyState, Field, Icon, IconButton, Input, Pagination, ProgressBar, Select, Spinner, StatCard, Switch, Table, Tabs, Tag, Textarea, Toast } from './chunk-AR2JYE75.js';
+import { Toast, Textarea, Tag, Tabs, Table, Switch, StatCard, Spinner, Select, ProgressBar, Pagination, Input, IconButton, Icon, Field, EmptyState, DateRangePicker, DatePicker, Checkbox, Card, Button, Badge, Alert, Dialog } from './chunk-QJHD6HVQ.js';
+export { Alert, Badge, Button, Card, Checkbox, DatePicker, DateRangePicker, Dialog, EmptyState, Field, Icon, IconButton, Input, Pagination, ProgressBar, Select, Spinner, StatCard, Switch, Table, Tabs, Tag, Textarea, Toast } from './chunk-QJHD6HVQ.js';
 import React, { createContext, useContext, useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -483,10 +483,7 @@ function ResultTable({
   return /* @__PURE__ */ jsx("div", { ref: scrollRef, onScroll: handleScroll, style: { height, overflowY: "auto" }, children: table });
 }
 function ResultEmptyState({ title }) {
-  return (
-    // 아이콘 세트에 scan-search가 없어 같은 뜻의 search로 대체
-    /* @__PURE__ */ jsx(EmptyState, { icon: "search", title: `${title}\uC774(\uAC00) \uC5C6\uC2B5\uB2C8\uB2E4`, tight: true, children: "\uAC80\uC0C9 \uC870\uAC74\uC744 \uBC14\uAFB8\uAC70\uB098 \uCD08\uAE30\uD654\uD574 \uBCF4\uC138\uC694." })
-  );
+  return /* @__PURE__ */ jsx(EmptyState, { icon: "scan-search", title: `${title}\uC774(\uAC00) \uC5C6\uC2B5\uB2C8\uB2E4`, tight: true, children: "\uAC80\uC0C9 \uC870\uAC74\uC744 \uBC14\uAFB8\uAC70\uB098 \uCD08\uAE30\uD654\uD574 \uBCF4\uC138\uC694." });
 }
 function splitMultiValue(value) {
   return value.split(",").map((item) => item.trim()).filter(Boolean);
@@ -681,7 +678,7 @@ function SearchToolbar({
           IconButton,
           {
             type: "button",
-            icon: "settings",
+            icon: "sliders-horizontal",
             label: "\uC0C1\uC138\uAC80\uC0C9",
             "aria-expanded": open,
             style: open ? { background: "var(--wp-surface-active)" } : void 0,
@@ -1360,57 +1357,23 @@ function SelectCheckbox({
 function ViewToggle({ value, onChange }) {
   const items = [
     { value: "list", icon: "list", label: "\uBAA9\uB85D" },
-    // 아이콘 세트에 layout-grid가 없어 같은 뜻의 layout-dashboard로 대체
-    { value: "grid", icon: "layout-dashboard", label: "\uCE74\uB4DC" }
+    { value: "grid", icon: "layout-grid", label: "\uCE74\uB4DC" }
   ];
-  return /* @__PURE__ */ jsx(
-    "div",
+  return /* @__PURE__ */ jsx("div", { className: "wp-seg", role: "tablist", children: items.map((tab) => /* @__PURE__ */ jsxs(
+    "button",
     {
-      role: "tablist",
-      style: {
-        display: "inline-flex",
-        padding: 2,
-        gap: 2,
-        background: "var(--wp-surface-sunken)",
-        border: "1px solid var(--wp-border-subtle)",
-        borderRadius: "var(--wp-radius-md)"
-      },
-      children: items.map((tab) => {
-        const active = tab.value === value;
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            role: "tab",
-            "aria-selected": active,
-            onClick: () => onChange(tab.value),
-            style: {
-              display: "inline-flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: 5,
-              height: 24,
-              padding: "0 10px",
-              border: 0,
-              borderRadius: "var(--wp-radius-sm)",
-              fontSize: 12,
-              fontWeight: 500,
-              whiteSpace: "nowrap",
-              cursor: "pointer",
-              background: active ? "var(--wp-surface-card)" : "transparent",
-              color: active ? "var(--wp-text-strong)" : "var(--wp-text-muted)",
-              boxShadow: active ? "var(--wp-shadow-sm)" : void 0
-            },
-            children: [
-              /* @__PURE__ */ jsx(Icon, { name: tab.icon, size: 14 }),
-              tab.label
-            ]
-          },
-          tab.value
-        );
-      })
-    }
-  );
+      type: "button",
+      role: "tab",
+      className: "wp-seg__item",
+      "aria-selected": tab.value === value,
+      onClick: () => onChange(tab.value),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: tab.icon, size: 14 }),
+        tab.label
+      ]
+    },
+    tab.value
+  )) });
 }
 function resolveRowPart(part, item) {
   return typeof part === "function" ? part(item) : part;

package/dist/meta.d.ts

@@ -29,7 +29,7 @@ type SduiPropKind = 'string' | 'number' | 'boolean'
  | 'enum'
 /** CSS 색상 문자열 */
  | 'color'
-/** `ICON_PATHS`에 등록된 아이콘 이름 */
+/** `ICON_NODES`에 등록된 아이콘 이름 */
  | 'icon'
 /** ReactNode 자리 — 문자열이거나 `slots.<name>`으로 넘긴 노드 트리 */
  | 'node'
@@ -140,7 +140,7 @@ interface SduiComponentMeta {
     /** 팔레트에 보일 한국어 표시명 */
     label: string;
     category: SduiCategory;
-    /** `ICON_PATHS`에 등록된 이름 (없는 이름이면 Icon이 점으로 대체한다) */
+    /** `ICON_NODES`에 등록된 이름 (없는 이름이면 Icon이 아무것도 그리지 않는다) */
     icon: string;
     /** 한국어 한 줄 설명 */
     description: string;

package/dist/meta.js

@@ -219,7 +219,7 @@ var PageHeadMeta = {
   name: "PageHead",
   label: "\uD398\uC774\uC9C0 \uD5E4\uB354",
   category: "layout",
-  icon: "home",
+  icon: "flag",
   description: "\uD398\uC774\uC9C0 \uC0C1\uB2E8\uC758 \uC81C\uBAA9\xB7\uBD80\uC81C\xB7\uC561\uC158 \uC601\uC5ED.",
   props: [
     { name: "title", kind: "node", label: "\uC81C\uBAA9", slot: true, group: "content" },
@@ -362,6 +362,14 @@ var TabsMeta = {
       ],
       group: "appearance"
     },
+    {
+      name: "onChrome",
+      kind: "boolean",
+      label: "\uB124\uC774\uBE44 \uD06C\uB86C \uC704",
+      default: false,
+      description: "\uB124\uC774\uBE44 \uD0D1\uBC14 \uC704\uC5D0 \uC5B9\uB294 \uD0ED \u2014 \uBC1D\uC740 \uAE00\uC790\uC5D0 \uBE68\uAC04 \uC778\uB514\uCF00\uC774\uD130\uB85C \uB4A4\uC9D1\uB294\uB2E4.",
+      group: "appearance"
+    },
     styleProp,
     classNameProp
   ],
@@ -434,8 +442,7 @@ var ButtonMeta = {
       name: "type",
       kind: "enum",
       label: "HTML \uD0C0\uC785",
-      default: "button",
-      description: "Form \uC548\uC5D0\uC11C Enter \uC81C\uCD9C\uC744 \uBC1B\uC73C\uB824\uBA74 submit.",
+      description: '\uC8FC\uC9C0 \uC54A\uC73C\uBA74 \uBE0C\uB77C\uC6B0\uC800 \uAE30\uBCF8\uAC12(Form \uC548\uC5D0\uC11C\uB294 submit)\uC774\uB2E4. \uC81C\uCD9C\uC774 \uC544\uB2CC \uBC84\uD2BC\uC740 "button"\uC744 \uBA85\uC2DC\uD558\uB77C.',
       options: [
         { value: "button", label: "button" },
         { value: "submit", label: "submit" },
@@ -444,6 +451,20 @@ var ButtonMeta = {
       group: "behavior",
       advanced: true
     },
+    {
+      name: "as",
+      kind: "enum",
+      label: "\uB80C\uB354 \uD0DC\uADF8",
+      default: "button",
+      description: '\uB9C1\uD06C\uB85C \uBCF4\uB0B4\uC57C \uD558\uB294 \uC790\uB9AC(SSO \uC774\uB3D9 \uB4F1)\uB294 "a" + href\uB2E4 \u2014 button\uC5D0 href\uB97C \uB2EC\uBA74 \uC544\uBB34 \uB370\uB3C4 \uAC00\uC9C0 \uC54A\uB294\uB2E4.',
+      options: [
+        { value: "button", label: "button" },
+        { value: "a", label: "a(\uB9C1\uD06C)" },
+        { value: "span", label: "span" }
+      ],
+      group: "behavior",
+      advanced: true
+    },
     { name: "onClick", kind: "action", label: "\uD074\uB9AD", group: "behavior" },
     styleProp,
     classNameProp
@@ -473,6 +494,15 @@ var CheckboxMeta = {
     },
     { name: "label", kind: "node", label: "\uB77C\uBCA8", slot: true, group: "content" },
     { name: "description", kind: "node", label: "\uBCF4\uC870 \uC124\uBA85", slot: true, group: "content" },
+    {
+      name: "indeterminate",
+      kind: "boolean",
+      label: "\uBD80\uBD84 \uC120\uD0DD",
+      default: false,
+      bindable: true,
+      description: '\uC804\uCCB4\uC120\uD0DD \uCCB4\uD06C\uBC15\uC2A4\uC758 "\uC77C\uBD80\uB9CC \uACE8\uB790\uB2E4" \uC0C1\uD0DC. \uAE00\uB9AC\uD504\uAC00 \uCCB4\uD06C\uC5D0\uC11C \uBE7C\uAE30\uB85C \uBC14\uB010\uB2E4.',
+      group: "data"
+    },
     { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" },
     classNameProp
   ],
@@ -605,7 +635,7 @@ var FormMeta = {
   name: "Form",
   label: "\uD3FC",
   category: "input",
-  icon: "save",
+  icon: "square-pen",
   description: "\uD3FC \uCEE8\uD14C\uC774\uB108. \uD544\uB4DC \uAC12\uC740 \uD398\uC774\uC9C0 \uC0C1\uD0DC\uC758 `{id}.{\uD544\uB4DC}` \uD0A4\uC5D0 \uC0B4\uACE0, \uAC80\uC99D\xB7dirty \uCD94\uC801\xB7\uC81C\uCD9C\uC740 \uB80C\uB354\uB7EC\uAC00 \uB9E1\uB294\uB2E4.",
   props: [
     {
@@ -712,9 +742,10 @@ var IconButtonMeta = {
       label: "\uD06C\uAE30",
       default: "md",
       options: [
-        { value: "xs", label: "xs" },
-        { value: "sm", label: "sm" },
-        { value: "md", label: "md" }
+        { value: "xs", label: "xs 24px" },
+        { value: "sm", label: "sm 28px" },
+        { value: "md", label: "md 32px" },
+        { value: "lg", label: "lg 40px" }
       ],
       group: "appearance"
     },
@@ -727,7 +758,9 @@ var IconButtonMeta = {
       options: [
         { value: "ghost", label: "\uD22C\uBA85" },
         { value: "outlined", label: "\uC678\uACFD\uC120" },
-        { value: "danger", label: "\uC704\uD5D8" }
+        { value: "solid", label: "\uCC44\uC6C0" },
+        { value: "danger", label: "\uC704\uD5D8" },
+        { value: "onchrome", label: "\uB124\uC774\uBE44 \uD06C\uB86C \uC704" }
       ],
       group: "appearance"
     },
@@ -744,6 +777,14 @@ var IconButtonMeta = {
       group: "appearance",
       advanced: true
     },
+    {
+      name: "pressed",
+      kind: "boolean",
+      label: "\uB20C\uB9B0 \uC0C1\uD0DC",
+      bindable: true,
+      description: "\uD1A0\uAE00 \uBC84\uD2BC\uC758 \uCF1C\uC9D0. aria-pressed\uB85C \uB098\uAC00\uACE0 \uC120\uD0DD \uD2F4\uD2B8\uAC00 \uBD99\uB294\uB2E4.",
+      group: "data"
+    },
     { name: "onClick", kind: "action", label: "\uD074\uB9AD", group: "behavior" },
     { name: "disabled", kind: "boolean", label: "\uBE44\uD65C\uC131", default: false, bindable: true, group: "behavior" },
     styleProp,
@@ -751,7 +792,7 @@ var IconButtonMeta = {
   ],
   children: { accepts: false },
   preset: { component: "IconButton", props: { icon: "pencil", label: "\uC218\uC815", size: "sm" } },
-  resize: { kind: "enum", prop: "size", values: ["xs", "sm", "md"] }
+  resize: { kind: "enum", prop: "size", values: ["xs", "sm", "md", "lg"] }
 };
 var InputMeta = {
   name: "Input",
@@ -812,9 +853,9 @@ var InputMeta = {
     { name: "title", kind: "string", label: "\uD234\uD301", group: "content", advanced: true },
     {
       name: "trailing",
-      kind: "string",
-      label: "\uD6C4\uD589 \uB2E8\uC704",
-      description: '\uC785\uB825 \uC624\uB978\uCABD \uB05D\uC5D0 \uACB9\uCCD0 \uADF8\uB9AC\uB294 \uB2E8\uC704 \uD45C\uC2DC. \uC608: "\uC6D0", "\uC704", "mm". \uB2E8\uC704\uB97C \uAC12 \uC548\uC5D0 \uC11E\uC9C0 \uC54A\uAE30 \uC704\uD55C \uC790\uB9AC\uB2E4. \uC544\uC774\uCF58 \uC774\uB984(\uC608: "eye")\uC744 \uC8FC\uBA74 \uAE00\uC790 \uB300\uC2E0 \uADF8 \uC544\uC774\uCF58\uC774 \uB098\uC628\uB2E4.',
+      kind: "icon",
+      label: "\uD6C4\uD589 \uC544\uC774\uCF58",
+      description: '\uC785\uB825 \uC624\uB978\uCABD \uB05D\uC5D0 \uACB9\uCCD0 \uADF8\uB9AC\uB294 \uD45C\uC2DC. **\uC544\uC774\uCF58 \uC774\uB984\uC73C\uB85C \uC77D\uB294\uB2E4**(\uC608: "eye" = \uBE44\uBC00\uBC88\uD638 \uBCF4\uAE30). \uB4F1\uB85D\uB418\uC9C0 \uC54A\uC740 \uC774\uB984\uC774\uBA74 \uC544\uBB34\uAC83\uB3C4 \uADF8\uB9AC\uC9C0 \uC54A\uB294\uB2E4 \u2014 "\uC6D0"\xB7"mm" \uAC19\uC740 \uB2E8\uC704 \uAE00\uC790\uB294 \uC5EC\uAE30 \uB123\uC5B4\uB3C4 \uB098\uC624\uC9C0 \uC54A\uB294\uB2E4.',
       group: "content"
     },
     styleProp,
@@ -995,15 +1036,23 @@ var IconMeta = {
   label: "\uC544\uC774\uCF58",
   category: "display",
   icon: "info",
-  description: "\uC2A4\uD2B8\uB85C\uD06C \uC544\uC774\uCF58. icons.ts\uC758 ICON_PATHS\uC5D0 \uC5C6\uB294 \uC774\uB984\uC740 \uC810\uC73C\uB85C \uB300\uCCB4\uB41C\uB2E4.",
+  description: "\uC2A4\uD2B8\uB85C\uD06C \uC544\uC774\uCF58 130\uC885. icons.ts\uC758 ICON_NODES\uC5D0 \uC5C6\uB294 \uC774\uB984\uC740 \uC544\uBB34\uAC83\uB3C4 \uADF8\uB9AC\uC9C0 \uC54A\uB294\uB2E4.",
   props: [
     { name: "name", kind: "icon", label: "\uC544\uC774\uCF58 \uC774\uB984", required: true, group: "content" },
-    { name: "size", kind: "number", label: "\uD06C\uAE30(px)", default: 16, group: "appearance" },
-    { name: "strokeWidth", kind: "number", label: "\uC120 \uAD75\uAE30", default: 1.8, group: "appearance", advanced: true },
+    { name: "size", kind: "number", label: "\uD06C\uAE30(px)", default: 18, group: "appearance" },
+    { name: "strokeWidth", kind: "number", label: "\uC120 \uAD75\uAE30", default: 1.5, group: "appearance", advanced: true },
+    {
+      name: "title",
+      kind: "string",
+      label: "\uC811\uADFC\uC131 \uC81C\uBAA9",
+      description: '\uC8FC\uBA74 role="img" + aria-label\uC774 \uBD99\uB294\uB2E4. \uC606\uC5D0 \uAE00\uC774 \uC788\uB294 \uC7A5\uC2DD \uC544\uC774\uCF58\uC740 \uBE44\uC6CC \uB454\uB2E4.',
+      group: "content"
+    },
+    styleProp,
     classNameProp
   ],
   children: { accepts: false },
-  preset: { component: "Icon", props: { name: "info", size: 16 } },
+  preset: { component: "Icon", props: { name: "info", size: 18 } },
   resize: { kind: "numeric", widthProp: "size", heightProp: "size", unit: "px", axis: "both" }
 };
 var KeyValueListMeta = {
@@ -1227,6 +1276,7 @@ var TableMeta = {
         { name: "align", kind: "enum", label: "\uC815\uB82C", options: [{ value: "left", label: "\uC67C\uCABD" }, { value: "right", label: "\uC624\uB978\uCABD" }] },
         { name: "mono", kind: "boolean", label: "\uACE0\uC815\uD3ED \uAE00\uAF34" },
         { name: "strong", kind: "boolean", label: "\uAD75\uAC8C" },
+        { name: "sortable", kind: "boolean", label: "\uC815\uB82C \uAC00\uB2A5", description: "onSort\uB97C \uD568\uAED8 \uC918\uC57C \uD5E4\uB354\uAC00 \uBC84\uD2BC\uC774 \uB41C\uB2E4." },
         {
           name: "badge",
           kind: "object",
@@ -1249,6 +1299,28 @@ var TableMeta = {
     },
     { name: "dense", kind: "boolean", label: "\uC870\uBC00\uD558\uAC8C", default: false, description: "\uD589 \uB192\uC774 40px \u2192 32px", group: "appearance" },
     { name: "hover", kind: "boolean", label: "\uD589 \uD638\uBC84 \uAC15\uC870", default: true, group: "appearance" },
+    { name: "sticky", kind: "boolean", label: "\uD5E4\uB354 \uACE0\uC815", default: false, description: "\uC2A4\uD06C\uB864\uB418\uB294 \uBCF8\uBB38 \uC704\uC5D0 \uBA38\uB9AC\uAE00\uC744 \uBD99\uC5EC \uB454\uB2E4.", group: "appearance" },
+    {
+      name: "sort",
+      kind: "object",
+      label: "\uC815\uB82C \uC0C1\uD0DC",
+      bindable: true,
+      description: "{ key, dir } \u2014 \uD574\uB2F9 \uCEEC\uB7FC \uD5E4\uB354\uC758 \uD654\uC0B4\uD45C \uBC29\uD5A5\uC744 \uC815\uD55C\uB2E4. \uC815\uB82C \uC790\uCCB4\uB294 rows\uB97C \uC8FC\uB294 \uCABD\uC774 \uD55C\uB2E4.",
+      fields: [
+        { name: "key", kind: "string", label: "\uCEEC\uB7FC key" },
+        { name: "dir", kind: "enum", label: "\uBC29\uD5A5", options: [{ value: "asc", label: "\uC624\uB984\uCC28\uC21C" }, { value: "desc", label: "\uB0B4\uB9BC\uCC28\uC21C" }] }
+      ],
+      group: "data"
+    },
+    { name: "onSort", kind: "action", label: "\uC815\uB82C \uD5E4\uB354 \uD074\uB9AD", eventArg: "\uCEEC\uB7FC key", group: "behavior" },
+    {
+      name: "selectedIds",
+      kind: "binding",
+      label: "\uC120\uD0DD\uB41C \uD589",
+      bindable: true,
+      description: "rowKey \uAC12\uC758 \uBC30\uC5F4. \uD574\uB2F9 \uD589\uC5D0 aria-selected\uAC00 \uBD99\uACE0 \uC120\uD0DD \uD2F4\uD2B8\uAC00 \uAE54\uB9B0\uB2E4.",
+      group: "data"
+    },
     { name: "rowKey", kind: "string", label: "\uD589 key \uD544\uB4DC", default: "id", group: "data", advanced: true },
     { name: "onRowClick", kind: "action", label: "\uD589 \uD074\uB9AD", eventArg: "\uD589 \uAC1D\uCCB4 \uC804\uCCB4", group: "behavior" },
     { name: "empty", kind: "node", label: "\uBE48 \uBAA9\uB85D \uD45C\uC2DC", slot: true, description: "EmptyState \uAD8C\uC7A5", group: "content" },
@@ -1619,9 +1691,10 @@ var ProgressBarMeta = {
   label: "\uC9C4\uD589 \uB9C9\uB300",
   category: "feedback",
   icon: "minus",
-  description: "0~100 \uC9C4\uD589\uB960. \uBC94\uC704\uB97C \uBC97\uC5B4\uB09C \uAC12\uC740 \uAD6C\uD604\uC5D0\uC11C \uC798\uB77C \uB0B8\uB2E4.",
+  description: "\uC9C4\uCC99\xB7\uC6A9\uB7C9 \uB9C9\uB300(.wp-meter). \uBC94\uC704\uB97C \uBC97\uC5B4\uB09C \uAC12\uC740 \uAD6C\uD604\uC5D0\uC11C \uC798\uB77C \uB0B8\uB2E4.",
   props: [
-    { name: "value", kind: "number", label: "\uAC12(0~100)", required: true, bindable: true, group: "data" },
+    { name: "value", kind: "number", label: "\uAC12", required: true, bindable: true, group: "data" },
+    { name: "max", kind: "number", label: "\uCD5C\uB300\uAC12", default: 100, bindable: true, description: "\uBD84\uBAA8\uAC00 100\uC774 \uC544\uB2CC \uC6A9\uB7C9 \uAC8C\uC774\uC9C0\uC5D0 \uC4F4\uB2E4.", group: "data" },
     {
       name: "tone",
       kind: "enum",
@@ -1637,13 +1710,33 @@ var ProgressBarMeta = {
       ],
       group: "appearance"
     },
+    {
+      name: "size",
+      kind: "enum",
+      label: "\uB450\uAED8",
+      default: "md",
+      options: [
+        { value: "sm", label: "sm 4px" },
+        { value: "md", label: "md 6px" },
+        { value: "lg", label: "lg 8px" }
+      ],
+      group: "appearance"
+    },
+    {
+      name: "striped",
+      kind: "boolean",
+      label: "\uC0AC\uC120 \uD574\uCE58",
+      default: false,
+      description: "\uC9C4\uD589 \uC911\uC778 \uC791\uC5C5\uC5D0\uB9CC. \uBA48\uCD98 \uAC12\uC5D0 \uC4F0\uBA74 \uC6C0\uC9C1\uC774\uB294 \uAC83\uCC98\uB7FC \uC77D\uD78C\uB2E4.",
+      group: "appearance"
+    },
     { name: "label", kind: "node", label: "\uB77C\uBCA8", slot: true, group: "content" },
     {
       name: "showValue",
       kind: "boolean",
       label: "\uAC12 \uD45C\uC2DC",
       default: false,
-      description: "\uB77C\uBCA8 \uC904 \uC624\uB978\uCABD \uB05D\uC5D0 \uD604\uC7AC \uAC12\uC744 \uD37C\uC13C\uD2B8\uB85C \uC801\uB294\uB2E4. \uC5EC\uB7EC \uB9C9\uB300\uB97C \uC313\uC544 \uBE44\uAD50\uD560 \uB54C \uD544\uC694\uD558\uB2E4.",
+      description: "\uB77C\uBCA8\uC774 \uC788\uC73C\uBA74 \uB77C\uBCA8 \uC904 \uC624\uB978\uCABD \uB05D\uC5D0, \uC5C6\uC73C\uBA74 \uB9C9\uB300 \uC624\uB978\uCABD \uC606\uC5D0 \uD37C\uC13C\uD2B8\uB97C \uC801\uB294\uB2E4.",
       group: "appearance"
     },
     styleProp,
@@ -1672,6 +1765,14 @@ var SpinnerMeta = {
       ],
       group: "appearance"
     },
+    {
+      name: "inverse",
+      kind: "boolean",
+      label: "\uC5B4\uB450\uC6B4 \uD45C\uBA74 \uC704",
+      default: false,
+      description: "\uB124\uC774\uBE44/\uBDF0\uC5B4 \uD45C\uBA74 \uC704\uC5D0\uC11C \uD14C\uB450\uB9AC\uB97C \uBC1D\uC740 \uCABD\uC73C\uB85C \uB4A4\uC9D1\uB294\uB2E4.",
+      group: "appearance"
+    },
     { name: "label", kind: "string", label: "\uC124\uBA85", description: "\uC811\uADFC\uC131 \uB77C\uBCA8 \uACB8 \uC606 \uCEA1\uC158", group: "content" },
     classNameProp
   ],
@@ -1703,6 +1804,7 @@ var ToastMeta = {
       group: "appearance"
     },
     { name: "title", kind: "node", label: "\uC81C\uBAA9", slot: true, group: "content" },
+    { name: "action", kind: "node", label: "\uC778\uB77C\uC778 \uC561\uC158", slot: true, description: '\uB418\uB3CC\uB9AC\uAE30 \uAC19\uC740 \uAC83 \uD558\uB098. Button variant="link"\uB97C \uB123\uB294\uB2E4.', group: "content" },
     { name: "onClose", kind: "action", label: "\uB2EB\uAE30", group: "behavior" },
     classNameProp
   ],

package/dist/rich.js

@@ -1,5 +1,5 @@
-import { HoistedStyle, Spinner, EmptyState } from './chunk-AR2JYE75.js';
-export { DatePicker, DateRangePicker } from './chunk-AR2JYE75.js';
+import { HoistedStyle, Spinner, EmptyState } from './chunk-QJHD6HVQ.js';
+export { DatePicker, DateRangePicker } from './chunk-QJHD6HVQ.js';
 import { useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';