@wipco/sdui 0.1.0 → 0.3.0

package/dist/widgets/EventCalendar.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+
+/**
+ * EventCalendar — 일정 캘린더 위젯 (월 / 주 / 일 / 일정 뷰).
+ *
+ * 여러 날에 걸친 일정은 주 단위로 잘라(lane packing) 막대로 그린다.
+ * 주 경계에서 잘린 쪽은 모서리를 각지게 두어 이어짐을 표현하고,
+ * 월 뷰에서는 최대 3줄까지만 보여준 뒤 '+N' 칩으로 넘김을 알린다.
+ * view/date는 controlled-with-fallback: prop이 오면 그 값을 따르고,
+ * 없으면 내부 상태로 동작한다.
+ */
+interface EventCalendarEvent {
+    id: string;
+    title: string;
+    /** YYYY-MM-DD */
+    start: string;
+    /** YYYY-MM-DD, 포함(inclusive). 없으면 start와 동일. */
+    end?: string;
+    type?: string;
+    status?: string;
+    /** CSS 색상. 없으면 type별로 --wp-series-N을 순환 배정. */
+    color?: string;
+}
+interface EventCalendarTypeOption {
+    value: string;
+    label: string;
+    color?: string;
+}
+type EventCalendarView = 'month' | 'week' | 'day' | 'agenda';
+/** 뷰 전환 버튼 한 칸. `label`을 생략하면 기본 라벨(월/주/일/일정)을 쓴다. */
+interface EventCalendarViewItem {
+    value: EventCalendarView;
+    label?: string;
+    /** 라벨 앞에 붙일 아이콘 이름 */
+    icon?: string;
+}
+interface EventCalendarProps {
+    events: EventCalendarEvent[];
+    view?: EventCalendarView;
+    onViewChange?: (view: EventCalendarView) => void;
+    /**
+     * 노출할 뷰와 그 라벨·아이콘·순서. 생략하면 월/주/일/일정 넷이 그대로 나온다.
+     *
+     * `view`는 **어느 뷰로 시작할지**만 정했지 **어떤 뷰를 고를 수 있는지**는 정하지
+     * 못했다 — 월만 쓰는 화면에도 주/일/일정 버튼이 보였다. 문자열 축약형(`["month"]`)도
+     * 받는다. 모르는 값·중복은 버리고, 전부 걸러지면 기본 넷으로 되돌린다.
+     */
+    views?: Array<EventCalendarViewItem | EventCalendarView>;
+    /** 기준 날짜(YYYY-MM-DD). 기본 오늘. */
+    date?: string;
+    onDateChange?: (date: string) => void;
+    /** 유형 필터 칩. 주어지면 칩 토글로 해당 type 일정을 숨기거나 보인다. */
+    types?: EventCalendarTypeOption[];
+    onEventClick?: (event: EventCalendarEvent) => void;
+    selectedId?: string;
+}
+declare const EventCalendar: ({ events, view, onViewChange, views, date, onDateChange, types, onEventClick, selectedId, }: EventCalendarProps) => React.JSX.Element;
+
+export { EventCalendar, type EventCalendarEvent, type EventCalendarProps, type EventCalendarTypeOption, type EventCalendarView, type EventCalendarViewItem };

package/dist/widgets/EventCalendar.js

@@ -0,0 +1,2 @@
+export { EventCalendar } from '../chunk-LZJTKVMO.js';
+import '../chunk-ZUCI34QY.js';

package/dist/widgets/ImageLightbox.d.ts

@@ -0,0 +1,25 @@
+import React__default from 'react';
+
+/**
+ * ImageLightbox — 이미지 라이트박스 뷰어.
+ * 썸네일(또는 커스텀 트리거) 클릭 → 전체 화면 오버레이:
+ * - 휠 줌 1x–8x (커서 위치 기준 앵커)
+ * - 확대 상태에서 드래그 패닝 (pointer capture, 경계 클램프)
+ * - 툴바: 축소 / 확대 / 원래 크기 / 닫기 + 배율 % 표시
+ * - Escape·배경 클릭으로 닫힘, 트리거 클릭은 stopPropagation (행 클릭과 공존)
+ */
+
+interface ImageLightboxProps {
+    /** 원본 이미지 URL */
+    src: string;
+    alt?: string;
+    /** 기본 썸네일 <img>에 적용할 클래스 */
+    thumbClassName?: string;
+    /** 기본 썸네일 <img>에 적용할 스타일 */
+    thumbStyle?: React__default.CSSProperties;
+    /** 커스텀 트리거 — 주면 기본 썸네일 대신 렌더된다 */
+    children?: React__default.ReactNode;
+}
+declare function ImageLightbox({ src, alt, thumbClassName, thumbStyle, children }: ImageLightboxProps): React__default.JSX.Element;
+
+export { ImageLightbox, type ImageLightboxProps };

package/dist/widgets/ImageLightbox.js

@@ -0,0 +1,2 @@
+export { ImageLightbox } from '../chunk-RH7ESUE6.js';
+import '../chunk-ZUCI34QY.js';

package/dist/widgets/InlineEdit.d.ts

@@ -0,0 +1,23 @@
+import React__default from 'react';
+
+/**
+ * InlineEdit — 텍스트를 제자리에서 수정하는 위젯.
+ *
+ * - 보기 모드: 값 + 연필 IconButton(hover/focus 시 표시, 터치 기기에서는 항상 표시).
+ * - 편집 모드: DS Input(autoFocus, Enter=저장, Escape=취소) + 확인/취소 IconButton.
+ * - 비동기 onSave 동안 확인 버튼이 로딩(회전 아이콘) 상태가 되고, 실패하면
+ *   편집 모드를 유지한 채 danger 캡션을 보여준다(503은 데모 모드 안내).
+ */
+
+interface InlineEditProps {
+    value: string;
+    onSave: (value: string) => void | Promise<void>;
+    type?: 'text' | 'number';
+    mono?: boolean;
+    disabled?: boolean;
+    /** 값이 비었을 때 표시할 텍스트. 기본 '—' */
+    emptyText?: string;
+}
+declare function InlineEdit({ value, onSave, type, mono, disabled, emptyText, }: InlineEditProps): React__default.JSX.Element;
+
+export { InlineEdit, type InlineEditProps };

package/dist/widgets/InlineEdit.js

@@ -0,0 +1,2 @@
+export { InlineEdit } from '../chunk-OOHHW4K4.js';
+import '../chunk-ZUCI34QY.js';

package/dist/widgets/JsonField.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+/**
+ * JsonField — JSON 편집용 텍스트 영역.
+ *
+ * - 객체가 들어오면 2칸 들여쓰기로 정렬해 보여준다(문자열이면 파싱 시도 후 정렬, 실패 시 원문 유지).
+ * - blur 시 JSON.parse로 검증: 성공하면 정렬 후 onChange(parsed), 실패하면 오류 위치(행/열)를
+ *   danger 캡션으로 보여주고 입력한 원문을 그대로 유지한다.
+ * - controlled-with-fallback: value가 실제로 바뀔 때만 내부 텍스트를 동기화한다
+ *   (편집 중이거나 표현이 같으면 사용자가 입력한 원문을 덮어쓰지 않는다).
+ */
+interface JsonFieldProps {
+    /** 객체 또는 JSON 문자열 */
+    value?: unknown;
+    onChange?: (parsed: unknown) => void;
+    /** 기본 6 */
+    rows?: number;
+    invalid?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+}
+declare function JsonField({ value, onChange, rows, invalid, disabled, placeholder, }: JsonFieldProps): React.JSX.Element;
+
+export { JsonField, type JsonFieldProps };

package/dist/widgets/JsonField.js

@@ -0,0 +1,2 @@
+export { JsonField } from '../chunk-AROOQ5W6.js';
+import '../chunk-ZUCI34QY.js';

package/dist/widgets/LiveClock.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+/**
+ * LiveClock — 1초 간격 실시간 시계 / 경과 시간 표시.
+ *
+ * - startedAt(ISO)이 주어지면 현재 시각 대신 경과 시간을 HH:MM:SS로 표시한다
+ *   (24시간을 넘으면 시 자리수가 늘어난다: 워크오더 가동시간 등).
+ * - showDate: 시계 모드에서는 오늘 날짜(요일 포함), 경과 모드에서는 시작 시각을 함께 표시.
+ * - 하이드레이션 안전: useSyncExternalStore의 서버 스냅숏은 null이라 서버/첫 클라이언트
+ *   렌더에서는 --:--:-- 플레이스홀더를 보여주고, 마운트 후에만 실제 시각을 그린다.
+ *   인터벌은 구독 해제(언마운트) 시 정리된다.
+ */
+interface LiveClockProps {
+    /** ISO 시각 문자열 — 주어지면 현재 시각 대신 경과 시간(HH:MM:SS)을 표시 */
+    startedAt?: string;
+    /** 날짜(시계 모드) 또는 시작 시각(경과 모드) 함께 표시 */
+    showDate?: boolean;
+}
+declare function LiveClock({ startedAt, showDate }: LiveClockProps): React.JSX.Element;
+
+export { LiveClock, type LiveClockProps };

package/dist/widgets/LiveClock.js

@@ -0,0 +1 @@
+export { LiveClock } from '../chunk-QZQDHSMD.js';

package/dist/widgets/OrgChart.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+
+/**
+ * OrgChart — 줌/팬 가능한 조직도 캔버스.
+ *
+ * 재귀 블록 레이아웃: 각 노드의 서브트리 폭을 먼저 계산하고 부모를
+ * 자식 영역의 가운데 위에 배치한다. 노드 카드는 절대 위치로 그리고,
+ * 부모→자식 연결선은 SVG 직교(ㄱ자) 경로로 그린다.
+ *
+ * 상호작용: 휠 줌(커서 기준 0.35~1.8x), 포인터 드래그 패닝,
+ * 확대/축소/초기화 버튼 + 배율 표시, 전체화면 토글, 노드 클릭 선택.
+ */
+
+interface OrgNode {
+    id: string;
+    label: string;
+    /** 직책/직급 등 보조 텍스트. */
+    sub?: string;
+    badge?: string;
+    children?: OrgNode[];
+}
+interface OrgChartProps {
+    root: OrgNode;
+    onNodeClick?: (node: OrgNode) => void;
+    /** 지정하면 controlled — 없으면 내부 선택 상태를 사용한다. */
+    selectedId?: string;
+    /** 캔버스 높이(px). 기본 520. */
+    height?: number;
+}
+declare function OrgChart({ root, onNodeClick, selectedId, height, }: OrgChartProps): ReactNode;
+
+export { OrgChart, type OrgChartProps, type OrgNode };

package/dist/widgets/OrgChart.js

@@ -0,0 +1,2 @@
+export { OrgChart } from '../chunk-ZNITJ4KK.js';
+import '../chunk-ZUCI34QY.js';

package/dist/widgets/PeriodFilter.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+/**
+ * PeriodFilter — 복합 기간 선택기.
+ *
+ * - SegmentedControl로 모드(연간/반기/분기/월간/직접)를 고르고,
+ *   모드에 맞는 Select(연도/반기/분기/월) 또는 날짜 Input(from~to)이 조건부로 나타난다.
+ * - 모드 전환 시 기존 선택을 최대한 보존하며 변환한다
+ *   (예: 11월 → 분기 전환 시 4분기, 직접 전환 시 해당 월의 날짜 범위로 프리필).
+ * - 항상 정규화된 Period(해당 모드에 필요한 필드만, 범위 클램프 완료)를 emit한다.
+ * - controlled-with-fallback: value가 없으면 내부 상태(현재 연·월)로 동작한다.
+ */
+type PeriodMode = 'year' | 'half' | 'quarter' | 'month' | 'custom';
+interface Period {
+    mode: PeriodMode;
+    year?: number;
+    half?: 1 | 2;
+    quarter?: 1 | 2 | 3 | 4;
+    month?: number;
+    /** YYYY-MM-DD (custom 모드) */
+    from?: string;
+    /** YYYY-MM-DD (custom 모드) */
+    to?: string;
+}
+/** 모드 전환 버튼 한 칸. `label`을 생략하면 기본 라벨(연간/반기/분기/월간/직접)을 쓴다. */
+interface PeriodModeItem {
+    value: PeriodMode;
+    label?: string;
+    /** 라벨 앞에 붙일 아이콘 이름 */
+    icon?: string;
+}
+interface PeriodFilterProps {
+    value?: Period;
+    onChange?: (v: Period) => void;
+    /** 연도 Select에 노출할 연도 목록. 기본: 올해부터 5년 전까지 */
+    years?: number[];
+    /**
+     * 노출할 모드와 그 라벨·아이콘·순서. 생략하면 다섯 모드가 그대로 나온다.
+     *
+     * 월간만 쓰는 화면에도 반기·분기·직접 버튼이 보이던 것을 스펙이 정할 수 있게 한
+     * 것이다. 문자열 축약형(`["month","custom"]`)도 받는다. 모르는 값·중복은 버리고,
+     * 전부 걸러지면 기본 다섯으로 되돌린다.
+     */
+    modes?: Array<PeriodModeItem | PeriodMode>;
+}
+declare function PeriodFilter({ value, onChange, years, modes }: PeriodFilterProps): React.JSX.Element;
+
+export { type Period, PeriodFilter, type PeriodFilterProps, type PeriodMode, type PeriodModeItem };

package/dist/widgets/PeriodFilter.js

@@ -0,0 +1,2 @@
+export { PeriodFilter } from '../chunk-DGPRX4MU.js';
+import '../chunk-ZUCI34QY.js';

package/dist/widgets/PrintSheet.d.ts

@@ -0,0 +1,23 @@
+import React__default from 'react';
+
+/**
+ * PrintSheet — 인쇄 레이아웃 래퍼.
+ *
+ * - 화면에서는 A4 폭(210mm)의 흰 종이 카드 + 상단 툴바(인쇄하기/닫기)를 보여주고,
+ *   인쇄 시에는 @page A4·1cm 여백, 12pt 기준 서체로 종이에 맞게 펼친다.
+ * - 표 테두리는 화면에서 var(--wp-border-default), 인쇄에서는 토큰을 검정 계열로
+ *   재정의해 흐린 회색 선이 프린터에서 사라지지 않게 한다.
+ * - .erp-print-hidden 은 @media print 에서 숨겨진다(툴바 등 화면 전용 요소).
+ * - autoPrint: 새 창(window.opener 존재)으로 열린 경우에만 마운트 500ms 후 자동 인쇄.
+ */
+
+interface PrintSheetProps {
+    /** 시트 상단 제목(예: 거래명세서) */
+    title?: string;
+    children: React__default.ReactNode;
+    /** window.opener 감지 시(새 창으로 열림) 500ms 후 자동으로 window.print() 호출 */
+    autoPrint?: boolean;
+}
+declare function PrintSheet({ title, children, autoPrint }: PrintSheetProps): React__default.JSX.Element;
+
+export { PrintSheet, type PrintSheetProps };

package/dist/widgets/PrintSheet.js

@@ -0,0 +1,2 @@
+export { PrintSheet } from '../chunk-KBHI3IUR.js';
+import '../chunk-ZUCI34QY.js';

package/dist/widgets/SearchableMultiPicker.d.ts

@@ -0,0 +1,29 @@
+import React__default from 'react';
+
+/**
+ * SearchableMultiPicker — 모달(다이얼로그) 다중 선택기.
+ *
+ * - 트리거 버튼 → DS Dialog. SduiDialog와 같은 방식으로 뷰포트 고정 래퍼를 두어
+ *   스크림이 사이드바·탑바까지 전체 화면을 덮는다(배경 클릭·Escape로 닫힘 = 취소).
+ * - 검색 Input(느슨한 포함 검색) + 선택된 항목이 먼저 오는 Checkbox 목록(스크롤)
+ *   + 선택 개수/칩 행 + 하단 [전체 해제 / 완료].
+ * - 다이얼로그 안에서는 초안(draft)만 바뀌고, '완료'를 눌러야 onChange로 확정된다.
+ */
+
+interface MultiPickerOption {
+    value: string;
+    label: string;
+    sub?: string;
+}
+interface SearchableMultiPickerProps {
+    title?: string;
+    options: MultiPickerOption[];
+    values: string[];
+    onChange: (values: string[]) => void;
+    /** 다이얼로그를 여는 트리거. 기본값은 secondary Button '선택'. */
+    trigger?: React__default.ReactNode;
+    disabled?: boolean;
+}
+declare function SearchableMultiPicker({ title, options, values, onChange, trigger, disabled, }: SearchableMultiPickerProps): React__default.JSX.Element;
+
+export { type MultiPickerOption, SearchableMultiPicker, type SearchableMultiPickerProps };

package/dist/widgets/SearchableMultiPicker.js

@@ -0,0 +1,3 @@
+export { SearchableMultiPicker } from '../chunk-56KKWLNI.js';
+import '../chunk-KADFN76X.js';
+import '../chunk-ZUCI34QY.js';

package/dist/widgets/SecureScreen.d.ts

@@ -0,0 +1,25 @@
+import React__default from 'react';
+
+/**
+ * SecureScreen — 개인정보 보호 래퍼.
+ *
+ * enabled(기본 true)일 때:
+ * - 래퍼 내부의 contextmenu / copy / cut / dragstart / selectstart 차단 + user-select:none
+ * - document keydown에서 Ctrl/Cmd+(A|C|P|S|U|X) 차단, PrintScreen 감지 시
+ *   클립보드를 경고 문구로 덮어쓴다(캡처 이미지 대신 경고가 붙게).
+ * - 탭 전환(visibilitychange)·창 blur 시 전체 가림막(스크림 + 블러) 표시, 재포커스까지 유지
+ * - beforeprint 시 인쇄 경고 오버레이 표시(@media print에서는 콘텐츠 자체를 숨기고
+ *   경고만 인쇄되게 한다), afterprint에 해제
+ * - 모든 리스너는 언마운트/비활성화 시 정리된다.
+ */
+
+interface SecureScreenProps {
+    /** 보호 동작 활성화 여부. 기본 true. */
+    enabled?: boolean;
+    /** 가림막에 표시할 안내 문구 */
+    notice?: string;
+    children: React__default.ReactNode;
+}
+declare function SecureScreen({ enabled, notice, children }: SecureScreenProps): React__default.JSX.Element;
+
+export { SecureScreen, type SecureScreenProps };

package/dist/widgets/SecureScreen.js

@@ -0,0 +1,2 @@
+export { SecureScreen } from '../chunk-APCXOCAO.js';
+import '../chunk-ZUCI34QY.js';

package/dist/widgets/StackedMeter.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+
+/**
+ * StackedMeter — CSS로 그리는 누적 비율 막대.
+ *
+ * 전체 대비 각 항목의 비중을 한 줄 트랙으로 보여준다. 트랙은
+ * var(--wp-surface-sunken), 세그먼트는 --wp-series 토큰을 고정
+ * 순서로 순환하며, 범례 행에 색 점 + 라벨 + 값 + 백분율을 함께 적는다.
+ */
+
+interface StackedMeterSegment {
+    label: string;
+    value: number;
+    /** CSS 색상 또는 "1"~"8" (→ var(--wp-series-N)). 없으면 순서대로 자동 배정. */
+    color?: string;
+}
+interface StackedMeterProps {
+    segments: StackedMeterSegment[];
+    /** 범례 표시 여부. 기본 true. */
+    showLegend?: boolean;
+    /** 트랙 높이(px). 기본 10. */
+    height?: number;
+}
+declare function StackedMeter({ segments, showLegend, height, }: StackedMeterProps): ReactNode;
+
+export { StackedMeter, type StackedMeterProps, type StackedMeterSegment };

package/dist/widgets/StackedMeter.js

@@ -0,0 +1 @@
+export { StackedMeter } from '../chunk-7Y4J7EOK.js';

package/dist/widgets/Strip.d.ts

@@ -0,0 +1,20 @@
+import React__default from 'react';
+
+/**
+ * Strip — 가로 스크롤 스트립.
+ *
+ * - 자식들을 flex-shrink:0 래퍼로 감싸 한 줄로 늘어놓고 overflow-x로 스크롤한다.
+ * - 스크롤바는 얇게(scrollbar-width:thin + webkit 폴백).
+ * - snap이면 scroll-snap-type:x mandatory, 각 항목 scroll-snap-align:start.
+ */
+
+interface StripProps {
+    children: React__default.ReactNode;
+    /** 항목 간격(CSS 길이). 기본 var(--wp-space-3) */
+    gap?: string;
+    /** 항목 시작점에 스크롤 스냅 */
+    snap?: boolean;
+}
+declare function Strip({ children, gap, snap }: StripProps): React__default.JSX.Element;
+
+export { Strip, type StripProps };

package/dist/widgets/Strip.js

@@ -0,0 +1 @@
+export { Strip } from '../chunk-IL2KS4WS.js';

package/dist/widgets/SummaryTable.d.ts

@@ -0,0 +1,31 @@
+import React__default from 'react';
+
+/**
+ * SummaryTable — 합계 푸터 행이 있는 테이블.
+ *
+ * DS Table은 tfoot을 지원하지 않아, 컬럼 정렬이 어긋나지 않도록
+ * .wp-table 구조(src/styles/css/data.css)를 그대로 미러링한 단일
+ * <table>로 직접 렌더링한다. 푸터 행: var(--wp-surface-sunken) 배경 + strong 텍스트.
+ */
+
+interface SummaryTableColumn {
+    key: string;
+    header: React__default.ReactNode;
+    /** right → 우측 정렬 + tabular numerals(.wp-table__num) */
+    align?: 'left' | 'right';
+    /** JetBrains Mono 셀(.wp-table__mono) */
+    mono?: boolean;
+    /** 강조 셀(.wp-table__strong) */
+    strong?: boolean;
+}
+interface SummaryTableProps {
+    columns: SummaryTableColumn[];
+    rows: Array<Record<string, React__default.ReactNode>>;
+    /** 컬럼 key → 합계 셀. 주어지면 푸터 행을 렌더링한다. */
+    footer?: Record<string, React__default.ReactNode>;
+    /** 32px 행(.wp-table--dense) */
+    dense?: boolean;
+}
+declare function SummaryTable({ columns, rows, footer, dense }: SummaryTableProps): React__default.JSX.Element;
+
+export { SummaryTable, type SummaryTableColumn, type SummaryTableProps };

package/dist/widgets/SummaryTable.js

@@ -0,0 +1 @@
+export { SummaryTable } from '../chunk-USKRM22W.js';

package/dist/widgets/TagMultiSelect.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+/**
+ * TagMultiSelect — 인라인 토글 배지 다중 선택.
+ *
+ * 옵션마다 토글 버튼(aria-pressed) 하나:
+ * - 선택됨   → brand 톤 Badge(채워진 모습)
+ * - 미선택   → Tag(아웃라인 모습)
+ * onChange로 내보내는 값 배열은 항상 options 순서를 보존한다.
+ */
+interface TagMultiSelectOption {
+    value: string;
+    label: string;
+}
+interface TagMultiSelectProps {
+    options: TagMultiSelectOption[];
+    values: string[];
+    onChange: (values: string[]) => void;
+    disabled?: boolean;
+    /** 옵션이 하나도 없을 때 보여줄 안내 문구. */
+    emptyText?: string;
+}
+declare function TagMultiSelect({ options, values, onChange, disabled, emptyText, }: TagMultiSelectProps): React.JSX.Element;
+
+export { TagMultiSelect, type TagMultiSelectOption, type TagMultiSelectProps };

package/dist/widgets/TagMultiSelect.js

@@ -0,0 +1,2 @@
+export { TagMultiSelect } from '../chunk-4SU2KYPU.js';
+import '../chunk-ZUCI34QY.js';

package/dist/widgets/Timeline.d.ts

@@ -0,0 +1,30 @@
+import React__default from 'react';
+
+/**
+ * Timeline — 변경 이력/활동 피드.
+ *
+ * - 좌측 아이콘 컬럼: 유형별 틴트 원(생성=success/plus, 수정=info/pencil,
+ *   삭제=danger/trash-2, 정보=neutral/info) + 항목 사이 연결선(var(--wp-border-subtle)).
+ * - payload가 있으면 Disclosure 접기 버튼 아래 wp-mono-xs <pre> JSON 블록으로 보여준다.
+ * - actions는 본문 하단 우측 정렬.
+ */
+
+interface TimelineItem {
+    id: string;
+    /** create=success · update=info · delete=danger · info(기본)=neutral */
+    type?: 'create' | 'update' | 'delete' | 'info';
+    title: React__default.ReactNode;
+    time?: string;
+    description?: React__default.ReactNode;
+    /** 객체면 접을 수 있는 정렬 JSON 블록으로 표시 */
+    payload?: unknown;
+    actions?: React__default.ReactNode;
+}
+interface TimelineProps {
+    items: TimelineItem[];
+    /** 지정 시 이 높이를 넘으면 세로 스크롤 */
+    maxHeight?: string;
+}
+declare function Timeline({ items, maxHeight }: TimelineProps): React__default.JSX.Element;
+
+export { Timeline, type TimelineItem, type TimelineProps };

package/dist/widgets/Timeline.js

@@ -0,0 +1,3 @@
+export { Timeline } from '../chunk-MSAV4J4I.js';
+import '../chunk-WNYWTFGW.js';
+import '../chunk-ZUCI34QY.js';

package/dist/widgets/TreePicker.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { TreeNode } from './TreeView.js';
+
+interface TreePickerProps {
+    nodes: TreeNode[];
+    /** 지정하면 controlled — 내부 커밋 상태를 쓰지 않는다. null = 선택 없음. */
+    value?: string | null;
+    /** 트리에서 노드를 찾지 못할 때 표시할 라벨(controlled 보조). */
+    valueLabel?: string;
+    onChange?: (id: string | null, node?: TreeNode) => void;
+    /** 필드 라벨 겸 다이얼로그 제목. */
+    label?: string;
+    placeholder?: string;
+    excludeIds?: string[];
+    /** '(없음)' 선택 허용. 기본 true. */
+    allowEmpty?: boolean;
+    disabled?: boolean;
+}
+declare function TreePicker({ nodes, value, valueLabel, onChange, label, placeholder, excludeIds, allowEmpty, disabled, }: TreePickerProps): React.JSX.Element;
+
+export { TreePicker, type TreePickerProps };

package/dist/widgets/TreePicker.js

@@ -0,0 +1,3 @@
+export { TreePicker } from '../chunk-ZQR3ULVH.js';
+import '../chunk-SEBPBUZR.js';
+import '../chunk-ZUCI34QY.js';

package/dist/widgets/TreeView.d.ts

@@ -0,0 +1,26 @@
+import React__default from 'react';
+
+/** 트리 노드. children이 있으면 폴더, 없으면 리프로 그린다. */
+interface TreeNode {
+    id: string;
+    label: string;
+    meta?: string;
+    children?: TreeNode[];
+}
+interface TreeViewProps {
+    nodes: TreeNode[];
+    /** 지정하면 controlled — 내부 선택 상태를 쓰지 않는다. */
+    selectedId?: string | null;
+    onSelect?: (id: string, node: TreeNode) => void;
+    /** 검색 입력을 노출한다. 일치 노드의 조상은 펼친 채 유지된다. */
+    searchable?: boolean;
+    /** 초기에 펼칠 깊이. 1 = 최상위만 펼침. 기본 1. */
+    defaultExpandedDepth?: number;
+    /** 서브트리째 숨길 노드 id 목록. */
+    excludeIds?: string[];
+    /** 스크롤 컨테이너 최대 높이 (예: "320px"). */
+    maxHeight?: string;
+}
+declare function TreeView({ nodes, selectedId, onSelect, searchable, defaultExpandedDepth, excludeIds, maxHeight, }: TreeViewProps): React__default.JSX.Element;
+
+export { type TreeNode, TreeView, type TreeViewProps };

package/dist/widgets/TreeView.js

@@ -0,0 +1,2 @@
+export { TreeView } from '../chunk-SEBPBUZR.js';
+import '../chunk-ZUCI34QY.js';