@highpixel-co/palda-design-system 0.4.1

package/dist/icons.d.ts

@@ -0,0 +1,128 @@
+import * as react from 'react';
+import { SVGProps } from 'react';
+
+declare const BlankIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const SearchIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const FilterIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const InfoIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const DashboardIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const CloseIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const HomeIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const ReportIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const ProductIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const ChevronUpIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const ChevronDownIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const ChevronLeftIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const ChevronRightIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const ArrowRightIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const ArrowLeftIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const PersonIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const PlusIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const CheckIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const AlertIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const AlarmIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const CardIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const HistoryIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const LogoutIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const ExternalLinkIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const MenuIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const HelpIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const MoreVerticalIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const RefreshIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const SendIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const PencilIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const TrashIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const UploadIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const CopyIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const LinkIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const EyeIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const EyeOffIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const PauseIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const CameraIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const SlidersIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const TypeIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const UnplugIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const StoreIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const MessageIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const SmartphoneIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const MonitorIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const PhoneIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const TruckIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const ImageIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const CableIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const MousePointerClickIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const TrendingUpIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const LockIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const KeyIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const ShieldCheckIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const GiftIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const StarIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const SparklesIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const ThumbsUpIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const LightbulbIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const TimerIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const LoadingIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+declare const SuccessIcon: (props: SVGProps<SVGSVGElement>) => react.JSX.Element;
+
+export { AlarmIcon, AlertIcon, ArrowLeftIcon, ArrowRightIcon, BlankIcon, CableIcon, CameraIcon, CardIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CopyIcon, DashboardIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FilterIcon, GiftIcon, HelpIcon, HistoryIcon, HomeIcon, ImageIcon, InfoIcon, KeyIcon, LightbulbIcon, LinkIcon, LoadingIcon, LockIcon, LogoutIcon, MenuIcon, MessageIcon, MonitorIcon, MoreVerticalIcon, MousePointerClickIcon, PauseIcon, PencilIcon, PersonIcon, PhoneIcon, PlusIcon, ProductIcon, RefreshIcon, ReportIcon, SearchIcon, SendIcon, ShieldCheckIcon, SlidersIcon, SmartphoneIcon, SparklesIcon, StarIcon, StoreIcon, SuccessIcon, ThumbsUpIcon, TimerIcon, TrashIcon, TrendingUpIcon, TruckIcon, TypeIcon, UnplugIcon, UploadIcon };

package/dist/icons.js

@@ -0,0 +1,129 @@
+import "./chunk-KMOB23O7.js";
+import {
+  AlarmIcon,
+  AlertIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  BlankIcon,
+  CableIcon,
+  CameraIcon,
+  CardIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  CloseIcon,
+  CopyIcon,
+  DashboardIcon,
+  ExternalLinkIcon,
+  EyeIcon,
+  EyeOffIcon,
+  FilterIcon,
+  GiftIcon,
+  HelpIcon,
+  HistoryIcon,
+  HomeIcon,
+  ImageIcon,
+  InfoIcon,
+  KeyIcon,
+  LightbulbIcon,
+  LinkIcon,
+  LoadingIcon,
+  LockIcon,
+  LogoutIcon,
+  MenuIcon,
+  MessageIcon,
+  MonitorIcon,
+  MoreVerticalIcon,
+  MousePointerClickIcon,
+  PauseIcon,
+  PencilIcon,
+  PersonIcon,
+  PhoneIcon,
+  PlusIcon,
+  ProductIcon,
+  RefreshIcon,
+  ReportIcon,
+  SearchIcon,
+  SendIcon,
+  ShieldCheckIcon,
+  SlidersIcon,
+  SmartphoneIcon,
+  SparklesIcon,
+  StarIcon,
+  StoreIcon,
+  SuccessIcon,
+  ThumbsUpIcon,
+  TimerIcon,
+  TrashIcon,
+  TrendingUpIcon,
+  TruckIcon,
+  TypeIcon,
+  UnplugIcon,
+  UploadIcon
+} from "./chunk-TWYJ2UTC.js";
+export {
+  AlarmIcon,
+  AlertIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  BlankIcon,
+  CableIcon,
+  CameraIcon,
+  CardIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  CloseIcon,
+  CopyIcon,
+  DashboardIcon,
+  ExternalLinkIcon,
+  EyeIcon,
+  EyeOffIcon,
+  FilterIcon,
+  GiftIcon,
+  HelpIcon,
+  HistoryIcon,
+  HomeIcon,
+  ImageIcon,
+  InfoIcon,
+  KeyIcon,
+  LightbulbIcon,
+  LinkIcon,
+  LoadingIcon,
+  LockIcon,
+  LogoutIcon,
+  MenuIcon,
+  MessageIcon,
+  MonitorIcon,
+  MoreVerticalIcon,
+  MousePointerClickIcon,
+  PauseIcon,
+  PencilIcon,
+  PersonIcon,
+  PhoneIcon,
+  PlusIcon,
+  ProductIcon,
+  RefreshIcon,
+  ReportIcon,
+  SearchIcon,
+  SendIcon,
+  ShieldCheckIcon,
+  SlidersIcon,
+  SmartphoneIcon,
+  SparklesIcon,
+  StarIcon,
+  StoreIcon,
+  SuccessIcon,
+  ThumbsUpIcon,
+  TimerIcon,
+  TrashIcon,
+  TrendingUpIcon,
+  TruckIcon,
+  TypeIcon,
+  UnplugIcon,
+  UploadIcon
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { AlarmIcon, AlertIcon, ArrowLeftIcon, ArrowRightIcon, BlankIcon, CableIcon, CameraIcon, CardIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CopyIcon, DashboardIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FilterIcon, GiftIcon, HelpIcon, HistoryIcon, HomeIcon, ImageIcon, InfoIcon, KeyIcon, LightbulbIcon, LinkIcon, LoadingIcon, LockIcon, LogoutIcon, MenuIcon, MessageIcon, MonitorIcon, MoreVerticalIcon, MousePointerClickIcon, PauseIcon, PencilIcon, PersonIcon, PhoneIcon, PlusIcon, ProductIcon, RefreshIcon, ReportIcon, SearchIcon, SendIcon, ShieldCheckIcon, SlidersIcon, SmartphoneIcon, SparklesIcon, StarIcon, StoreIcon, SuccessIcon, ThumbsUpIcon, TimerIcon, TrashIcon, TrendingUpIcon, TruckIcon, TypeIcon, UnplugIcon, UploadIcon } from './icons.js';
+export { AppShell, AppShellProps, BottomBar, BottomBarProps, Card, CardProps, CardTone, EmptyState, EmptyStateProps, FormSection, FormSectionProps, ListRow, ListRowProps, LivePreview, LivePreviewProps, LivePreviewStatus } from './patterns.js';
+export { Alert, AlertProps, AlertVariant, Badge, BadgeProps, BadgeSize, BadgeVariant, Button, ButtonProps, ButtonSize, ButtonVariant, Checkbox, CheckboxProps, Chip, ChipProps, ChipSize, ChipVariant, DropdownButton, DropdownButtonAlign, DropdownButtonItem, DropdownButtonProps, DropdownButtonVariant, IconButton, IconButtonProps, IconButtonSize, IconButtonVariant, Link, LinkProps, LinkSize, LinkVariant, Modal, ModalActions, ModalActionsProps, ModalProps, NavigationButton, NavigationButtonProps, ProgressBar, ProgressBarProps, Radio, RadioProps, Switch, SwitchProps, SwitchSize, Tab, TabProps, TextField, TextFieldProps, TextFieldSize, TextFieldVariant, ToastOptions, ToastVariant, Toaster, ToasterPlacement, ToasterProps, Tooltip, TooltipPlacement, TooltipProps, toast } from './ui.js';
+import 'react';

package/dist/index.js

@@ -0,0 +1,186 @@
+import "./chunk-KMOB23O7.js";
+import {
+  AppShell,
+  BottomBar,
+  Card,
+  EmptyState,
+  FormSection,
+  ListRow,
+  LivePreview
+} from "./chunk-Q4UXASZH.js";
+import "./chunk-EYFL232L.js";
+import {
+  Alert,
+  Badge,
+  Button,
+  Checkbox,
+  Chip,
+  DropdownButton,
+  IconButton,
+  Link,
+  Modal,
+  ModalActions,
+  NavigationButton,
+  ProgressBar,
+  Radio,
+  Switch,
+  Tab,
+  TextField,
+  Toaster,
+  Tooltip,
+  toast
+} from "./chunk-GPCPGABI.js";
+import {
+  AlarmIcon,
+  AlertIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  BlankIcon,
+  CableIcon,
+  CameraIcon,
+  CardIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  CloseIcon,
+  CopyIcon,
+  DashboardIcon,
+  ExternalLinkIcon,
+  EyeIcon,
+  EyeOffIcon,
+  FilterIcon,
+  GiftIcon,
+  HelpIcon,
+  HistoryIcon,
+  HomeIcon,
+  ImageIcon,
+  InfoIcon,
+  KeyIcon,
+  LightbulbIcon,
+  LinkIcon,
+  LoadingIcon,
+  LockIcon,
+  LogoutIcon,
+  MenuIcon,
+  MessageIcon,
+  MonitorIcon,
+  MoreVerticalIcon,
+  MousePointerClickIcon,
+  PauseIcon,
+  PencilIcon,
+  PersonIcon,
+  PhoneIcon,
+  PlusIcon,
+  ProductIcon,
+  RefreshIcon,
+  ReportIcon,
+  SearchIcon,
+  SendIcon,
+  ShieldCheckIcon,
+  SlidersIcon,
+  SmartphoneIcon,
+  SparklesIcon,
+  StarIcon,
+  StoreIcon,
+  SuccessIcon,
+  ThumbsUpIcon,
+  TimerIcon,
+  TrashIcon,
+  TrendingUpIcon,
+  TruckIcon,
+  TypeIcon,
+  UnplugIcon,
+  UploadIcon
+} from "./chunk-TWYJ2UTC.js";
+export {
+  AlarmIcon,
+  Alert,
+  AlertIcon,
+  AppShell,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  Badge,
+  BlankIcon,
+  BottomBar,
+  Button,
+  CableIcon,
+  CameraIcon,
+  Card,
+  CardIcon,
+  CheckIcon,
+  Checkbox,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  Chip,
+  CloseIcon,
+  CopyIcon,
+  DashboardIcon,
+  DropdownButton,
+  EmptyState,
+  ExternalLinkIcon,
+  EyeIcon,
+  EyeOffIcon,
+  FilterIcon,
+  FormSection,
+  GiftIcon,
+  HelpIcon,
+  HistoryIcon,
+  HomeIcon,
+  IconButton,
+  ImageIcon,
+  InfoIcon,
+  KeyIcon,
+  LightbulbIcon,
+  Link,
+  LinkIcon,
+  ListRow,
+  LivePreview,
+  LoadingIcon,
+  LockIcon,
+  LogoutIcon,
+  MenuIcon,
+  MessageIcon,
+  Modal,
+  ModalActions,
+  MonitorIcon,
+  MoreVerticalIcon,
+  MousePointerClickIcon,
+  NavigationButton,
+  PauseIcon,
+  PencilIcon,
+  PersonIcon,
+  PhoneIcon,
+  PlusIcon,
+  ProductIcon,
+  ProgressBar,
+  Radio,
+  RefreshIcon,
+  ReportIcon,
+  SearchIcon,
+  SendIcon,
+  ShieldCheckIcon,
+  SlidersIcon,
+  SmartphoneIcon,
+  SparklesIcon,
+  StarIcon,
+  StoreIcon,
+  SuccessIcon,
+  Switch,
+  Tab,
+  TextField,
+  ThumbsUpIcon,
+  TimerIcon,
+  Toaster,
+  Tooltip,
+  TrashIcon,
+  TrendingUpIcon,
+  TruckIcon,
+  TypeIcon,
+  UnplugIcon,
+  UploadIcon,
+  toast
+};

package/dist/patterns.d.ts

@@ -0,0 +1,162 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface AppShellProps {
+    /** 바디. 페이지 제목과 본문이 여기 들어간다. 좌우 여백은 shell이 준다. */
+    children: ReactNode;
+    /** 하단에 고정되는 액션 바. `BottomBar`를 넣는 자리다. */
+    footer?: ReactNode;
+    /** 사이드바 위쪽. 로고와 nav 항목이 온다. */
+    sidebar?: ReactNode;
+    /** 사이드바 아래쪽에 붙는 것. 로그아웃 같은 자리다. */
+    sidebarFooter?: ReactNode;
+    /** 화면 전역 상태를 켜고 끄는 바. 있으면 상단 행 아래에 accent 틴트로 깔린다. */
+    statusBar?: ReactNode;
+    /** 콘텐츠 안 상단 행. 컨텍스트 스위처와 계정이 온다. */
+    topRow?: ReactNode;
+}
+/**
+ * 모든 화면이 쓰는 틀이다. **사이드바(전체 높이) + 콘텐츠** 구성이고, 사이드바 위를 덮는 전역
+ * 상단 바는 없다 (`docs/LAYOUT.md`).
+ *
+ * 콘텐츠는 세로 3단이다.
+ * 1. `topRow` — 인-콘텐츠 상단 행. 좌우 여백 `--palda-layout-inset`
+ * 2. `statusBar` — 상태·활성화 바. `accent/subtle` 틴트
+ * 3. `children` — 바디. 좌우 `--palda-layout-page-margin`, 상단 `space-8`, 자식 사이 `gap-xl`
+ *
+ * 각 단은 **배경이 남은 폭을 다 쓰고(풀블리드), 안쪽 내용만 `--palda-layout-content-width`로 묶여
+ * 가운데 정렬**된다. 그래서 화면이 넓어져도 틴트 바가 중간에서 끊기지 않는다.
+ *
+ * **페이지 제목은 상단 행이 아니라 바디 안에 둔다.** 자기 자신은 loading·empty·error를 갖지
+ * 않는다. 틀은 늘 그려지고 상태는 안에 놓이는 것이 가진다.
+ */
+declare function AppShell({ children, footer, sidebar, sidebarFooter, statusBar, topRow, }: AppShellProps): react.JSX.Element;
+
+interface BottomBarProps {
+    /** 오른쪽 끝 액션. 저장·취소 버튼을 넣는다. */
+    children: ReactNode;
+    /** 왼쪽에 놓이는 상태 문구. 저장되지 않은 변경 안내 같은 것. */
+    status?: ReactNode;
+}
+/**
+ * 화면 아래에 붙어 페이지 전체의 액션을 담는 바다. `AppShell`의 `footer`에 넣는다.
+ *
+ * `AppShell`의 다른 단과 같이 **배경은 풀블리드이고 안쪽 내용만 `--palda-layout-content-width`로
+ * 묶여 가운데 정렬**된다. 그래서 넓은 화면에서 바가 중간에서 끊기지 않는다.
+ *
+ * 상태를 스스로 갖지 않는다. 진행 중이라는 표시는 안에 놓이는 Button의 `disabled`로 낸다.
+ */
+declare function BottomBar({ children, status }: BottomBarProps): react.JSX.Element;
+
+type CardTone = 'plain' | 'filled';
+interface CardProps {
+    /** 제목 줄 오른쪽 끝에 놓이는 액션. `onClick`을 준 카드에는 쓰지 않는다. */
+    action?: ReactNode;
+    children: ReactNode;
+    description?: ReactNode;
+    /**
+     * 카드의 채움. 보더와 여백은 둘 다 같고 면 색만 갈린다.
+     * - `plain`(기본) — 흰 면. 읽는 것이 가장 밝다는 기본값을 따른다.
+     * - `filled` — 옅은 회색 필. 한 화면에서 앞으로 끌어낼 카드에만 쓴다.
+     *   `ListRow`의 `tone`과 같은 축이고 같은 뜻이다.
+     */
+    tone?: CardTone;
+    /** 본문 아래 디바이더 뒤에 놓이는 영역. */
+    footer?: ReactNode;
+    /**
+     * 주면 카드 전체가 **고를 수 있는** button이 된다. `selected`와 항상 짝으로 쓴다.
+     * "누를 수 있다"가 아니라 "고를 수 있다"는 뜻이라, 모달을 여는 것 같은 액션에는 쓰지 않는다 —
+     * `aria-pressed`가 붙어 잘못된 상태를 알린다. 여는 것은 카드 안의 `Button`이 한다.
+     */
+    onClick?: () => void;
+    /** 골라진 상태. accent 보더로 표시된다. */
+    selected?: boolean;
+    title?: ReactNode;
+}
+/**
+ * 보더를 가진 면이다. **섹션을 묶는 데 쓰지 않는다** — 그 자리는 `FormSection`이다.
+ *
+ * 쓰는 자리는 둘뿐이다 (0011, `docs/DESIGN_GRAMMAR.md`).
+ * 1. **고르는 카드** — 템플릿 카드, 옵션 카드. `onClick`과 `selected`를 항상 짝으로 쓴다.
+ *    누르면 열리는 카드는 여기가 아니다. 갈리는 기준은 같은 문서의 §세 번째 질문에 있다.
+ * 2. **페이지 바디 최상위**에 놓이는 요약 블록 — 섹션당 최대 1개. 섹션 안의 요약 행은 이것이
+ *    아니라 `ListRow`의 `tone="filled"`다. 갈리는 기준은 같은 문서의 §두 번째 질문에 있다.
+ *
+ * 그림자를 갖지 않는다. 떠 있는 표면이 아니기 때문이다.
+ */
+declare function Card({ action, children, description, footer, onClick, selected, title, tone, }: CardProps): react.JSX.Element;
+
+interface EmptyStateProps {
+    actionLabel?: string;
+    description: string;
+    icon?: ReactNode;
+    onAction?: () => void;
+    title: string;
+}
+declare function EmptyState({ actionLabel, description, icon, onAction, title }: EmptyStateProps): react.JSX.Element;
+
+interface FormSectionProps {
+    children: ReactNode;
+    description?: ReactNode;
+    /** 섹션 전체에 걸린 오류. 개별 필드 오류는 TextField의 `error`를 쓴다. */
+    error?: ReactNode;
+    /** 섹션 아래 액션. 저장·초기화 버튼을 넣는다. */
+    footer?: ReactNode;
+    title: ReactNode;
+}
+/**
+ * 입력 필드를 제목 아래로 묶는 폼의 한 덩어리다.
+ *
+ * 필드 사이 간격만 잡고 필드 자체는 그리지 않는다. 라벨과 컨트롤의 간격은 `TextField`가 갖고
+ * 있으므로 여기서 다시 주지 않는다.
+ */
+declare function FormSection({ children, description, error, footer, title }: FormSectionProps): react.JSX.Element;
+
+interface ListRowProps {
+    /** 누를 수 있는 행 오른쪽 끝의 chevron. `onClick`이 있으면 기본으로 붙는다. */
+    chevron?: boolean;
+    children?: ReactNode;
+    description?: ReactNode;
+    /** 제목 앞 아이콘이나 썸네일. */
+    leading?: ReactNode;
+    /** 자리를 잡아 두는 로딩 표시. 켜면 내용 대신 뼈대를 그린다. */
+    loading?: boolean;
+    onClick?: () => void;
+    /** 누를 수 있는 행일 때 현재 선택 여부. */
+    selected?: boolean;
+    title: ReactNode;
+    /**
+     * 행의 채움.
+     * - `plain`(기본) — 채움 없이 행 사이 디바이더로만 갈린다. 목록과 정보 나열의 기본이다.
+     * - `filled` — 옅은 회색 필. 값을 강조해 담는 요약 행 하나에만 쓴다. 보더는 없다.
+     */
+    tone?: 'plain' | 'filled';
+    /** 행 오른쪽 끝. 상태 배지·스위치를 넣는다. chevron보다 앞에 온다. */
+    trailing?: ReactNode;
+}
+/**
+ * 목록의 한 줄이다. **행을 박스로 감싸지 않는다.** 구분은 행 사이 디바이더뿐이고, 선택은 보더가
+ * 아니라 색으로 낸다 (0011, `docs/DESIGN_GRAMMAR.md`).
+ *
+ * `onClick`을 주면 누를 수 있는 행이 되어 button으로 그려지고 오른쪽 끝에 chevron이 붙는다.
+ *
+ * 목록 전체가 비었을 때와 실패했을 때는 이 컴포넌트가 아니라 `EmptyState`를 쓴다.
+ */
+declare function ListRow({ chevron, children, description, leading, loading, onClick, selected, title, tone, trailing, }: ListRowProps): react.JSX.Element;
+
+type LivePreviewStatus = 'ready' | 'loading' | 'empty' | 'error';
+interface LivePreviewProps {
+    children?: ReactNode;
+    /** `status`가 `empty`·`error`일 때 본문 대신 보여줄 문구. */
+    message?: ReactNode;
+    status?: LivePreviewStatus;
+    title: ReactNode;
+}
+/**
+ * 폼 옆에 붙어 입력 결과를 그대로 비추는 패널이다. 2단 구성의 오른쪽 열이다.
+ *
+ * 폭은 고정이고 왼쪽 폼이 남는 폭을 갖는다(`docs/LAYOUT.md`). 스크롤을 따라다니도록 sticky다.
+ */
+declare function LivePreview({ children, message, status, title }: LivePreviewProps): react.JSX.Element;
+
+export { AppShell, type AppShellProps, BottomBar, type BottomBarProps, Card, type CardProps, type CardTone, EmptyState, type EmptyStateProps, FormSection, type FormSectionProps, ListRow, type ListRowProps, LivePreview, type LivePreviewProps, type LivePreviewStatus };

package/dist/patterns.js

@@ -0,0 +1,20 @@
+import {
+  AppShell,
+  BottomBar,
+  Card,
+  EmptyState,
+  FormSection,
+  ListRow,
+  LivePreview
+} from "./chunk-Q4UXASZH.js";
+import "./chunk-GPCPGABI.js";
+import "./chunk-TWYJ2UTC.js";
+export {
+  AppShell,
+  BottomBar,
+  Card,
+  EmptyState,
+  FormSection,
+  ListRow,
+  LivePreview
+};