sellmate-design-system-react 9.0.0-beta.11 → 9.0.0-beta.112

package/dist/lib/story-docs.d.ts

@@ -30,3 +30,38 @@ export declare function readmeComponentNames(md: string): string[];
  * 거기서 파생된 것들은 형태만 남긴다.
  */
 export declare function readmeTypeDetails(md: string, component: string): Record<string, string>;
+/**
+ * 스토리 하나의 Docs 설명(`story`)과, 필요하면 Show code 에 보일 사용 코드를 한 번에 준다.
+ *
+ * `render` 가 같은 파일의 데모 컴포넌트 하나만 반환하는 스토리는 Show code 에 그 이름만 나온다.
+ * 그런 스토리에는 `code` 로 소비 앱이 그대로 옮겨 쓸 코드를 직접 준다.
+ *
+ * @example
+ * export const Depth: Story = { parameters: storyDocs('depth 설명', '<SDraggableList … />'), render: … };
+ */
+export declare function storyDocs(story: string, code?: string): {
+    docs: {
+        source?: {
+            type: "code";
+            code: string;
+        } | undefined;
+        description: {
+            story: string;
+        };
+    };
+};
+/**
+ * 설명 없이 Show code 만 지정할 때 쓴다 — `render` 가 데모 컴포넌트를 감싸 코드에 이름만 나오는 스토리용.
+ * `code` 에는 소비 앱이 그대로 옮겨 쓸 코드를 준다.
+ *
+ * @example
+ * export const Basic: Story = { parameters: storySource('<SDrawer … />'), render: … };
+ */
+export declare function storySource(code: string): {
+    docs: {
+        source: {
+            type: "code";
+            code: string;
+        };
+    };
+};

package/dist/lib/tree-row.d.ts

@@ -0,0 +1,103 @@
+import { type HTMLAttributes, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent, type ReactNode } from 'react';
+/**
+ * 트리 한 줄의 **모양**. STree 와 SSelect 의 트리 타입(`tree`·`multi_tree`)이 같은 줄을 그리도록
+ * 여기 한 곳에 둔다 — 두 컴포넌트의 동작(선택 규칙·포커스·가상 스크롤)은 서로 달라 컴포넌트를
+ * 통째로 공유할 수 없지만, 같은 계층이 화면마다 다르게 생기면 안 된다.
+ */
+export type TreeRowSize = 'sm' | 'md';
+export declare const TREE_LABEL_TYPOGRAPHY: Record<TreeRowSize, {
+    default: string;
+    selected: string;
+    rowHeight: string;
+}>;
+/**
+ * 가지를 접고 펴는 움직임. STree 는 CSS 전환(`duration-200 ease-out`)으로, SSelect 는 가상 스크롤이라
+ * Web Animations 로 같은 움직임을 낸다 — 둘 중 하나를 바꾸면 다른 쪽도 맞춘다.
+ * `easing` 은 Tailwind 의 `ease-out` 과 같은 곡선이다.
+ */
+export declare const TREE_BRANCH_MOTION: {
+    readonly duration: 200;
+    readonly easing: "cubic-bezier(0, 0, 0.2, 1)";
+};
+/** 움직임을 줄여 달라고 했거나(prefers-reduced-motion) 낼 수 없는 환경이면 false */
+export declare function canAnimateTreeBranch(): boolean;
+/** 줄 바탕 — 배경·hover·좌우 여백·연결선과 내용 사이 간격 */
+export declare const TREE_ROW_CLASS = "group/tree-item box-border flex w-full items-center gap-(--cmp-tree-item-rowGap) overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left hover:bg-(--cmp-tree-item-bg-hover)";
+/** 줄 아래 구분선 */
+export declare const TREE_ROW_BORDER_CLASS = "border-b-(length:--cmp-tree-item-border-width-default) border-(--cmp-tree-item-border-default)";
+/** 키보드가 가리키는 줄 — hover 와 같은 배경 (SSelect 처럼 포커스를 줄로 옮기지 않는 쪽이 쓴다) */
+export declare const TREE_ROW_ACTIVE_CLASS = "bg-(--cmp-tree-item-bg-hover)";
+/** 화살표·체크박스·라벨을 담는 칸 */
+export declare const TREE_CONTENT_CLASS = "box-border flex min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap)";
+/**
+ * 라벨 — 고른(또는 일부 고른) 줄은 굵게, 비활성은 흐리게. 고를 수 있으면 `TreeSelectZone` 에
+ * 올렸을 때 밑줄이 생긴다. 글자 폭만큼만 차지한다(줄의 남은 폭은 접고 펴는 자리다)
+ */
+export declare function treeLabelClass(size: TreeRowSize, { emphasized, disabled, selectable, }: {
+    emphasized: boolean;
+    disabled: boolean;
+    selectable: boolean;
+}): string;
+/**
+ * 줄에서 고르는 자리 — 체크박스(있으면)+라벨을 담는다. 글자 폭만큼만 차지해 그 오른쪽 빈 자리는
+ * 접고 펴는 자리로 남는다. 고를 수 있으면 올렸을 때 라벨 밑줄(`treeLabelClass`)과 chevron 이 나와
+ * 접고 펴는 자리와 구분된다. 줄의 클릭이 이 자리에 떨어졌는지는 `isRowSelectClick` 으로 가른다.
+ */
+export declare function TreeSelectZone({ selectable, disabled, control, children, }: {
+    selectable: boolean;
+    disabled?: boolean;
+    /** 라벨 앞의 체크박스 */
+    control?: ReactNode;
+    /** 라벨 */
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** 줄의 클릭이 고르는 자리(`TreeSelectZone`)에 떨어졌는가 */
+export declare function isRowSelectClick(event: MouseEvent<HTMLElement>): boolean;
+/**
+ * 줄 안의 컨트롤(체크박스·화살표)이 받은 클릭인가. 컨트롤은 스스로 값을 바꾸므로 줄의 클릭 처리는
+ * 손대지 않는다 — 컨트롤마다 감싸서 전파를 끊는 대신 줄 하나가 클릭을 받아 가른다.
+ * (체크박스는 `<label>` 이라 한 번 누르면 클릭이 두 번 올라오는데, 둘 다 여기서 걸러진다)
+ */
+export declare function isRowControlClick(event: MouseEvent<HTMLElement>): boolean;
+/** 접기·펴기 화살표. 자식이 없는 줄은 `TreeCaretSpacer` 로 같은 자리를 비운다 */
+export declare function TreeCaret({ expanded, onToggle, }: {
+    expanded: boolean;
+    onToggle: (event: MouseEvent<HTMLElement>) => void;
+}): import("react").JSX.Element;
+/**
+ * 자식이 없는 줄은 펼침 버튼 자리를 빈 칸으로 남겨 라벨의 시작점을 맞춘다.
+ * 크기는 자리를 대신하는 그 버튼(`SGhostButton size="xxs"`)의 토큰을 그대로 쓴다 —
+ * 버튼 크기가 바뀌면 빈 칸도 같이 따라가야 줄이 어긋나지 않는다.
+ */
+export declare function TreeCaretSpacer(): import("react").JSX.Element;
+/**
+ * depth 연결선. 최상위(depth 1)는 그리지 않는다.
+ *
+ * @param ancestorLast 조상(depth 1 부터 부모까지)이 각자 마지막 자식인가 — 조상 쪽 세로선을 어디까지 잇는지 정한다
+ */
+export declare function TreeConnector({ guideline, size, depth, hasChildren, isLast, ancestorLast, }: {
+    guideline: boolean;
+    size: TreeRowSize;
+    depth: number;
+    hasChildren: boolean;
+    isLast: boolean;
+    ancestorLast: boolean[];
+}): import("react").JSX.Element | null;
+/**
+ * 목록 맨 위의 "전체" 줄 — 체크박스 하나로 고를 수 있는 것을 전부 켜고 끈다.
+ * 키보드·포커스는 쓰는 쪽이 정한다: STree 는 줄로 포커스를 옮기고(`tabIndex`·`onKeyDown`),
+ * SSelect 는 트리거가 `aria-activedescendant` 로 가리키므로 `active` 로 강조만 받는다.
+ */
+export declare function TreeAllRow({ label: labelProp, selected, indeterminate, size, border, active, tabIndex, onKeyDown, onToggle, className, ...rest }: {
+    label?: ReactNode;
+    selected: boolean;
+    indeterminate?: boolean;
+    size?: TreeRowSize;
+    border?: boolean;
+    /** 키보드가 가리키는 줄 — hover 와 같은 배경을 깐다 */
+    active?: boolean;
+    tabIndex: number;
+    onKeyDown?: (event: ReactKeyboardEvent<HTMLDivElement>) => void;
+    /** 줄이나 체크박스를 눌렀다. 줄 클릭이면 그 이벤트가 온다 */
+    onToggle: (event?: MouseEvent<HTMLElement>) => void;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onClick' | 'onKeyDown' | 'onToggle' | 'tabIndex' | 'role'>): import("react").JSX.Element;