@nurihaus/web-design-system 3.7.0 → 3.8.0

package/dist/components/list/list-row.stories.d.ts

@@ -0,0 +1,304 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./list-type").ListRowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    args: {
+        label: string;
+    };
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
+        label: import("react").ReactNode;
+        className?: string | undefined | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
+        onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        id?: string | undefined | undefined;
+        track?: string | undefined;
+        trackProps?: Record<string, string | number | boolean> | undefined;
+        style?: import("react").CSSProperties | undefined;
+        children?: import("react").ReactNode;
+        asChild?: boolean | undefined;
+        slot?: string | undefined | undefined;
+        title?: string | undefined | undefined;
+        key?: import("react").Key | null | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        accessKey?: string | undefined | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+        autoFocus?: boolean | undefined | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contextMenu?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+        hidden?: boolean | undefined | undefined;
+        lang?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        tabIndex?: number | undefined | undefined;
+        translate?: "yes" | "no" | undefined | undefined;
+        radioGroup?: string | undefined | undefined;
+        role?: import("react").AriaRole | undefined;
+        about?: string | undefined | undefined;
+        content?: string | undefined | undefined;
+        datatype?: string | undefined | undefined;
+        inlist?: any;
+        prefix?: string | undefined | undefined;
+        property?: string | undefined | undefined;
+        rel?: string | undefined | undefined;
+        resource?: string | undefined | undefined;
+        rev?: string | undefined | undefined;
+        typeof?: string | undefined | undefined;
+        vocab?: string | undefined | undefined;
+        autoCorrect?: string | undefined | undefined;
+        autoSave?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        itemProp?: string | undefined | undefined;
+        itemScope?: boolean | undefined | undefined;
+        itemType?: string | undefined | undefined;
+        itemID?: string | undefined | undefined;
+        itemRef?: string | undefined | undefined;
+        results?: number | undefined | undefined;
+        security?: string | undefined | undefined;
+        unselectable?: "on" | "off" | undefined | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+        is?: string | undefined | undefined;
+        exportparts?: string | undefined | undefined;
+        part?: string | undefined | undefined;
+        "aria-activedescendant"?: string | undefined | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+        "aria-braillelabel"?: string | undefined | undefined;
+        "aria-brailleroledescription"?: string | undefined | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-colcount"?: number | undefined | undefined;
+        "aria-colindex"?: number | undefined | undefined;
+        "aria-colindextext"?: string | undefined | undefined;
+        "aria-colspan"?: number | undefined | undefined;
+        "aria-controls"?: string | undefined | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+        "aria-describedby"?: string | undefined | undefined;
+        "aria-description"?: string | undefined | undefined;
+        "aria-details"?: string | undefined | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+        "aria-errormessage"?: string | undefined | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+        "aria-keyshortcuts"?: string | undefined | undefined;
+        "aria-label"?: string | undefined | undefined;
+        "aria-labelledby"?: string | undefined | undefined;
+        "aria-level"?: number | undefined | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+        "aria-owns"?: string | undefined | undefined;
+        "aria-placeholder"?: string | undefined | undefined;
+        "aria-posinset"?: number | undefined | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined | undefined;
+        "aria-rowcount"?: number | undefined | undefined;
+        "aria-rowindex"?: number | undefined | undefined;
+        "aria-rowindextext"?: string | undefined | undefined;
+        "aria-rowspan"?: number | undefined | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+        "aria-valuemax"?: number | undefined | undefined;
+        "aria-valuemin"?: number | undefined | undefined;
+        "aria-valuenow"?: number | undefined | undefined;
+        "aria-valuetext"?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+        onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+        onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+        onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+        onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onDrag?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnd?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragStart?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+        onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+        onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+        onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+        onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        description?: import("react").ReactNode;
+        chevron?: boolean | undefined;
+        leading?: import("react").ReactNode;
+        trailing?: import("react").ReactNode;
+        ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** 보기만 하는 행 — div, 화살표 없음 */
+export declare const Default: Story;
+export declare const WithDescription: Story;
+export declare const WithLeading: Story;
+export declare const TrailingText: Story;
+export declare const TrailingBadge: Story;
+/** Switch 를 둔 행은 누르는 행으로 만들지 않는다 — 버튼 안에 버튼이 들어간다 */
+export declare const TrailingSwitch: Story;
+/** onClick 이면 button. 화살표가 기본으로 보이고 누르면 배경이 어두워진다 */
+export declare const Button: Story;
+/** asChild 면 넘긴 링크가 행이 된다 */
+export declare const Link: Story;
+/** 누르는 행이어도 chevron={false} 면 화살표를 숨긴다 */
+export declare const WithoutChevron: Story;
+/** 보기만 하는 행에 chevron 을 주면 화살표만 보인다 */
+export declare const StaticWithChevron: Story;

package/dist/components/list/list-type.d.ts

@@ -0,0 +1,25 @@
+import { ComponentPropsWithRef, MouseEventHandler, ReactNode } from 'react';
+import { AsChildProps } from '../../helpers/types/common-props';
+import { TrackProps } from '../logging/logging-type';
+export type ListRootProps = ComponentPropsWithRef<'div'>;
+export interface ListRowBaseProps extends Omit<ComponentPropsWithRef<'div'>, 'onClick'>, AsChildProps {
+    onClick?: MouseEventHandler<HTMLElement>;
+}
+export interface ListGroupProps extends ComponentPropsWithRef<'div'> {
+    /** 면 위의 작은 제목. 주면 그룹의 접근 가능한 이름이 된다 */
+    label?: ReactNode;
+}
+export interface ListRowProps extends Omit<ComponentPropsWithRef<'div'>, 'onClick'>, AsChildProps, TrackProps {
+    label: ReactNode;
+    description?: ReactNode;
+    /** 왼쪽. Icon(size m)이나 Avatar */
+    leading?: ReactNode;
+    /** 오른쪽. 값 글자, OptionBadge, Switch 등 */
+    trailing?: ReactNode;
+    /** 오른쪽 끝 화살표. 누르는 행(asChild·onClick)이면 기본으로 보인다. false 면 숨긴다 */
+    chevron?: boolean;
+    /** 주면 행이 button 이 된다 */
+    onClick?: MouseEventHandler<HTMLElement>;
+    /** asChild 일 때 링크 요소 하나(`<a>`·라우터 Link). 행 내용은 그 안에 들어간다 */
+    children?: ReactNode;
+}

package/dist/components/media/base-media.d.ts

@@ -0,0 +1,16 @@
+import { PropsWithChildren } from 'react';
+import { MediaViewerCloseProps, MediaViewerRootProps, MediaViewerTriggerProps } from './media-type';
+declare const MediaViewerRoot: {
+    (props: PropsWithChildren<MediaViewerRootProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Trigger: import("react").ForwardRefExoticComponent<Omit<MediaViewerTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+        ref?: ((instance: HTMLHeadingElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement> | null | undefined;
+    }, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    Close: import("react").ForwardRefExoticComponent<Omit<MediaViewerCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export default MediaViewerRoot;

package/dist/components/media/media-props.d.ts

@@ -0,0 +1,5 @@
+export declare const sizes: readonly ["s", "m", "l"];
+export declare const mediaTypes: readonly ["image", "video"];
+export declare const mediaThumbnailProps: {
+    size: import("../../helpers/types/propsDef").ClassNamePropsType<readonly ["s", "m", "l"]>;
+};

package/dist/components/media/media-thumbnail.d.ts

@@ -0,0 +1,4 @@
+import { MediaThumbnailProps } from './media-type';
+declare const MediaThumbnail: import("react").ForwardRefExoticComponent<MediaThumbnailProps & import("react").RefAttributes<HTMLDivElement>>;
+export default MediaThumbnail;
+export type { MediaThumbnailProps } from './media-type';

package/dist/components/media/media-thumbnail.stories.d.ts

@@ -0,0 +1,34 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./media-type").MediaThumbnailProps & import("react").RefAttributes<HTMLDivElement>>;
+    argTypes: {
+        size: {
+            control: {
+                type: "select";
+            };
+            options: readonly ["s", "m", "l"];
+        };
+        type: {
+            control: {
+                type: "select";
+            };
+            options: readonly ["image", "video"];
+        };
+    };
+    args: {
+        src: string;
+        alt: string;
+        closeLabel: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const Video: Story;
+export declare const Loading: Story;
+export declare const Invalid: Story;
+export declare const Removable: Story;
+/** 말풍선 안. size l 은 폭을 채우되 240 을 넘지 않는다. */
+export declare const InBubble: Story;

package/dist/components/media/media-type.d.ts

@@ -0,0 +1,43 @@
+import { ComponentPropsWithRef, ReactElement } from 'react';
+import { AsChildProps, StyleProps } from '../../helpers/types/common-props';
+import { TrackProps } from '../logging/logging-type';
+import { mediaTypes, sizes } from './media-props';
+export interface MediaViewerRootProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export interface MediaViewerTriggerProps extends ComponentPropsWithRef<'button'>, AsChildProps {
+}
+export type MediaViewerContentProps = ComponentPropsWithRef<'div'>;
+export type MediaViewerTitleProps = ComponentPropsWithRef<'h2'>;
+export interface MediaViewerCloseProps extends ComponentPropsWithRef<'button'>, AsChildProps {
+}
+interface MediaSourceProps {
+    src: string;
+    type?: (typeof mediaTypes)[number];
+    /** 사진 설명. 사진의 alt 이자 뷰어의 접근성 이름이 된다 */
+    alt?: string;
+    /** 뷰어 닫기 버튼의 aria-label (예: '닫기') */
+    closeLabel: string;
+}
+export interface MediaViewerProps extends MediaViewerRootProps, MediaSourceProps, StyleProps, TrackProps {
+    /** asChild 로 감싸 클릭하면 열리는 요소. 없으면 open·defaultOpen 으로만 연다 */
+    trigger?: ReactElement;
+    /** 뷰어의 접근성 이름. 화면에는 안 보인다. 없으면 alt 를 쓴다 */
+    title?: string;
+}
+export interface MediaThumbnailProps extends MediaSourceProps, StyleProps, TrackProps {
+    size?: (typeof sizes)[number];
+    /** alt 가 없을 때(영상 등) 썸네일 버튼의 aria-label (예: '영상 보기') */
+    viewLabel?: string;
+    /** 올리는 중. 흰 막과 스피너를 덮고 열리지 않는다 */
+    loading?: boolean;
+    /** 올리기 실패. 빨간 테두리를 두르고 열리지 않는다 */
+    invalid?: boolean;
+    /** 주면 오른쪽 위에 지우기 버튼을 그린다. removeLabel 도 함께 준다 */
+    onRemove?: () => void;
+    /** 지우기 버튼의 aria-label (예: '삭제') */
+    removeLabel?: string;
+}
+export {};

package/dist/components/media/media-viewer.d.ts

@@ -0,0 +1,4 @@
+import { MediaViewerProps } from './media-type';
+declare const MediaViewer: import("react").ForwardRefExoticComponent<MediaViewerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default MediaViewer;
+export type { MediaViewerProps } from './media-type';

package/dist/components/media/media-viewer.stories.d.ts

@@ -0,0 +1,24 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./media-type").MediaViewerProps & import("react").RefAttributes<HTMLDivElement>>;
+    argTypes: {
+        type: {
+            control: {
+                type: "select";
+            };
+            options: readonly ["image", "video"];
+        };
+    };
+    args: {
+        src: string;
+        alt: string;
+        closeLabel: string;
+        trigger: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Video: Story;
+export declare const Controlled: Story;

package/dist/components/message/base-message.d.ts

@@ -0,0 +1,11 @@
+declare const MessageRoot: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & {
+    ref?: ((instance: HTMLOListElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLOListElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLOListElement>> & {
+    Item: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+        ref?: ((instance: HTMLLIElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLIElement> | null | undefined;
+    }, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+    Bubble: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default MessageRoot;

package/dist/components/message/message-event.d.ts

@@ -0,0 +1,6 @@
+/** 대화 가운데 상태·날짜 줄. MessageThread 안에 둔다 */
+declare const MessageEvent: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLIElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+export default MessageEvent;
+export type { MessageEventProps } from './message-type';

package/dist/components/message/message-props.d.ts

@@ -0,0 +1,17 @@
+/** 말풍선 자리. `end` 는 내가 보낸 메시지다 */
+export declare const side: readonly ["start", "end"];
+/** 등장 모션 세기(ADR 0008). 방금 보내거나 받은 메시지에만 준다 */
+export declare const motion: readonly ["weak", "strong"];
+export declare const messageProps: {
+    side: {
+        type: "className";
+        className: string;
+        values: readonly ["start", "end"];
+        default: "start";
+    };
+    motion: {
+        type: "className";
+        className: string;
+        values: readonly ["weak", "strong"];
+    };
+};

package/dist/components/message/message-thread.d.ts

@@ -0,0 +1,6 @@
+/** 대화 목록. children 은 Message · MessageEvent 다 */
+declare const MessageThread: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & {
+    ref?: ((instance: HTMLOListElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLOListElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLOListElement>>;
+export default MessageThread;
+export type { MessageThreadProps } from './message-type';

package/dist/components/message/message-type.d.ts

@@ -0,0 +1,21 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { motion, side } from './message-props';
+export type MessageRootProps = ComponentPropsWithRef<'ol'>;
+export type MessageItemProps = ComponentPropsWithRef<'li'>;
+export type MessageBubbleProps = ComponentPropsWithRef<'div'>;
+export type MessageThreadProps = ComponentPropsWithRef<'ol'>;
+export interface MessageProps extends ComponentPropsWithRef<'li'> {
+    /** 말풍선 자리. 기본 `start`(상대), `end` 는 내가 보낸 메시지 */
+    side?: (typeof side)[number];
+    /** 말풍선 위 보낸 사람 이름. 언제 보일지는 쓰는 쪽이 정한다 */
+    name?: ReactNode;
+    /** 말풍선 옆 시각. `<time>` 안에 그린다 */
+    time?: ReactNode;
+    /** `<time>` 의 기계용 시각(ISO 문자열) */
+    dateTime?: string;
+    /** 글 뒤 말풍선 안에 넣는 썸네일 */
+    media?: ReactNode;
+    /** 주면 나타날 때 움직인다. 처음 그리는 대화에는 주지 않는다 */
+    motion?: (typeof motion)[number];
+}
+export type MessageEventProps = ComponentPropsWithRef<'li'>;

package/dist/components/message/message.d.ts

@@ -0,0 +1,5 @@
+import { MessageProps } from './message-type';
+/** 말풍선 하나. MessageThread 안에 둔다 */
+declare const Message: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+export default Message;
+export type { MessageProps } from './message-type';