@t3q-ui/design-system 0.0.0-stage → 1.56.0

package/dist/patterns/index.cjs

@@ -0,0 +1,885 @@
+'use strict';
+
+var chunkMHAO45AL_cjs = require('../chunk-MHAO45AL.cjs');
+var react = require('react');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/patterns/listPageRules.ts
+function resolvePrimaryField(primaryField, hasRowClick) {
+  if (primaryField !== void 0) return primaryField;
+  return hasRowClick ? "name" : void 0;
+}
+function withPrimaryColumn(columns, primaryField) {
+  if (!primaryField) return columns;
+  return columns.map(
+    (c) => c.field === primaryField && c.type == null ? { ...c, type: "primary" } : c
+  );
+}
+function withSecondaryLine(columns, primaryField, secondaryField) {
+  if (!primaryField || !secondaryField) return columns;
+  return columns.map(
+    (c) => c.field === primaryField && c.cellRenderer == null ? {
+      ...c,
+      cellRenderer: chunkMHAO45AL_cjs.TwoLineCellRenderer,
+      cellRendererParams: { ...c.cellRendererParams, secondaryField }
+    } : c
+  );
+}
+function activeRowClassRules(activeRowId, userRules) {
+  if (activeRowId == null) return userRules;
+  return {
+    ...userRules,
+    "ag-row-active": (p) => p.data?.id === activeRowId
+  };
+}
+var showEmptyReset = (onResetFilters, filtersActive) => Boolean(onResetFilters) && filtersActive !== false;
+function splitEmptyText(text) {
+  const t = text.trim();
+  const m = /^(.*?[.!?。])\s+(\S[\s\S]*)$/.exec(t);
+  const strip = (s) => s.replace(/[.。]$/, "");
+  if (!m) return { title: strip(t) };
+  return { title: strip(m[1]), description: m[2] };
+}
+function LoadingState({ className, lines = 3 }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-label": "\uBD88\uB7EC\uC624\uB294 \uC911",
+      className: chunkMHAO45AL_cjs.cn("flex flex-col gap-[12px]", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.Skeleton, { className: "h-[24px] w-[240px]" }),
+        Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.Skeleton, { className: chunkMHAO45AL_cjs.cn("h-[16px]", i % 2 ? "w-3/5" : "w-full") }, i))
+      ]
+    }
+  );
+}
+function StateBox({
+  role,
+  className,
+  icon,
+  iconClassName,
+  title,
+  description,
+  action
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role,
+      className: chunkMHAO45AL_cjs.cn(
+        "flex flex-col items-center justify-center gap-[4px] text-center text-sys-text-subtler",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: chunkMHAO45AL_cjs.cn("mb-[4px] flex text-sys-text-subtler", iconClassName), children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-h5 text-sys-text-main", children: title }),
+        description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "break-keep text-base-regular text-sys-text-subtle wrap-break-word", children: description }) : null,
+        action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-auto mt-[12px] flex gap-[8px]", children: action }) : null
+      ]
+    }
+  );
+}
+function EmptyState({
+  className,
+  children,
+  icon,
+  title,
+  description,
+  action
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StateBox,
+    {
+      role: "status",
+      className,
+      icon: icon ?? /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.EmptyBoxIllustration, {}),
+      title: title ?? children,
+      description,
+      action
+    }
+  );
+}
+function ErrorState({
+  className,
+  title = "\uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4",
+  description,
+  onRetry,
+  retryLabel = "\uB2E4\uC2DC \uC2DC\uB3C4"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StateBox,
+    {
+      role: "alert",
+      className,
+      icon: /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.LucideIcon, { iconComponentName: "CircleAlert", size: 36 }),
+      iconClassName: "text-danger30",
+      title,
+      description,
+      action: onRetry ? /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.Button, { type: "button", variant: "primary", onClick: onRetry, children: retryLabel }) : null
+    }
+  );
+}
+var DETAIL_WIDTH = {
+  small: "w-[360px]",
+  medium: "w-[480px]"
+};
+var QUICK_ALL = "__all__";
+var isEmptyContent = (v) => typeof v === "object" && v !== null && !Array.isArray(v) && !react.isValidElement(v) && "title" in v;
+function resolveEmptyContent(emptyState) {
+  if (emptyState == null) return splitEmptyText("\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.");
+  if (typeof emptyState === "string") return splitEmptyText(emptyState);
+  if (isEmptyContent(emptyState)) return emptyState;
+  return { children: emptyState };
+}
+function ListPage({
+  title,
+  description,
+  titleRight,
+  actions,
+  filters,
+  onResetFilters,
+  columns,
+  rows,
+  loading,
+  error,
+  emptyState,
+  pagination,
+  filtersActive,
+  primaryField,
+  secondaryField,
+  tableTitle,
+  quickFilter,
+  activeRowId,
+  detail,
+  onSortChange,
+  onRowClick,
+  tableProps
+}) {
+  const onCloseRef = react.useRef(detail?.onClose);
+  react.useEffect(() => {
+    onCloseRef.current = detail?.onClose;
+  }, [detail?.onClose]);
+  const detailOpen = detail != null;
+  react.useEffect(() => {
+    if (!detailOpen) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape" || e.defaultPrevented) return;
+      const target = e.target;
+      if (target?.closest?.('[role="dialog"],[role="alertdialog"]')) return;
+      onCloseRef.current?.();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [detailOpen]);
+  const resetButton = onResetFilters ? /* @__PURE__ */ jsxRuntime.jsxs(
+    chunkMHAO45AL_cjs.Button,
+    {
+      type: "button",
+      variant: "secondaryOutline",
+      onClick: onResetFilters,
+      className: chunkMHAO45AL_cjs.cn(filtersActive === false && "invisible"),
+      "aria-hidden": filtersActive === false || void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { size: 16, "aria-hidden": true }),
+        "\uD544\uD130 \uCD08\uAE30\uD654"
+      ]
+    }
+  ) : null;
+  const hasCaption = tableTitle != null || quickFilter != null;
+  const filterRow = filters || resetButton && !hasCaption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-start gap-[8px]", children: [
+    filters,
+    !hasCaption ? resetButton : null
+  ] }) : void 0;
+  const columnDefs = react.useMemo(() => {
+    const primary = resolvePrimaryField(
+      primaryField,
+      Boolean(onRowClick) || Boolean(secondaryField)
+    );
+    return withSecondaryLine(withPrimaryColumn(columns, primary), primary, secondaryField);
+  }, [columns, primaryField, onRowClick, secondaryField]);
+  const total = pagination?.total;
+  const quickAllCount = quickFilter?.options.every((o) => o.count !== void 0) ? quickFilter.options.reduce((sum, o) => sum + (o.count ?? 0), 0) : void 0;
+  const quickIsAll = (quickFilter?.value.length ?? 0) === 0;
+  const quick = quickFilter ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-[8px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-small-regular font-medium text-sys-text-subtle", children: quickFilter.label }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      chunkMHAO45AL_cjs.ToggleGroup,
+      {
+        type: "multiple",
+        variant: "outline",
+        spacing: true,
+        "aria-label": quickFilter.label,
+        value: quickIsAll ? [QUICK_ALL] : quickFilter.value,
+        onValueChange: (next) => {
+          const pressedAll = next.includes(QUICK_ALL) && !quickIsAll;
+          quickFilter.onChange(pressedAll ? [] : next.filter((v) => v !== QUICK_ALL));
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.ToggleGroupItem, { value: QUICK_ALL, count: quickAllCount, countVariant: "primary", children: "\uC804\uCCB4" }),
+          quickFilter.options.map((o) => /* @__PURE__ */ jsxRuntime.jsx(
+            chunkMHAO45AL_cjs.ToggleGroupItem,
+            {
+              value: o.value,
+              count: o.count,
+              countVariant: o.countVariant,
+              children: o.label
+            },
+            o.value
+          ))
+        ]
+      }
+    )
+  ] }) : null;
+  const caption = hasCaption ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-[8px] flex items-center justify-between gap-[8px]", children: [
+    tableTitle != null || quick ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-[16px]", children: [
+      tableTitle != null ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-h6 text-sys-text-main", children: tableTitle }) : null,
+      quick
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-[16px]", children: [
+      total != null && quickAllCount === void 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-small-regular text-sys-text-subtle", children: [
+        "\uCD1D ",
+        total.toLocaleString(),
+        "\uAC1C"
+      ] }) : null,
+      resetButton
+    ] })
+  ] }) : null;
+  const resetRef = react.useRef(onResetFilters);
+  react.useEffect(() => {
+    resetRef.current = onResetFilters;
+  }, [onResetFilters]);
+  const withReset = showEmptyReset(onResetFilters, filtersActive);
+  const EmptyOverlay = react.useMemo(
+    () => function ListPageEmptyOverlay() {
+      const content = resolveEmptyContent(emptyState);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        EmptyState,
+        {
+          className: "pt-[32px] pb-[16px]",
+          title: content.title,
+          description: content.description ?? content.children,
+          action: withReset && content.children == null ? /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.Button, { type: "button", variant: "secondaryLink", onClick: () => resetRef.current?.(), children: "\uD544\uD130 \uCD08\uAE30\uD654" }) : null
+        }
+      );
+    },
+    [emptyState, withReset]
+  );
+  const rowClassRules = react.useMemo(
+    () => activeRowClassRules(activeRowId, tableProps?.rowClassRules),
+    [activeRowId, tableProps?.rowClassRules]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      chunkMHAO45AL_cjs.PageHeader,
+      {
+        title,
+        description,
+        titleRight,
+        actions,
+        bottomRight: filterRow
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("section", { "aria-label": title, className: "px-[24px] py-[32px]", children: error ? /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.Alert, { variant: "danger", children: /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.AlertDescription, { children: error }) }) : (
+      // 상세 패널(detail)이 있으면 표 쪽이 줄고 패널이 오른쪽에 나란히 선다 — 목록 맥락을 유지한 채 상세를 본다
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[24px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+          caption,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            chunkMHAO45AL_cjs.AgGridTable,
+            {
+              rowData: rows,
+              columnDefs,
+              loading,
+              noRowsOverlayComponent: EmptyOverlay,
+              onSortChanged: onSortChange ? (e) => onSortChange(chunkMHAO45AL_cjs.getSortedColumnState(e).value) : void 0,
+              onRowClicked: onRowClick ? (e) => {
+                if (e.data) onRowClick(e.data);
+              } : void 0,
+              domLayout: "autoHeight",
+              ...secondaryField ? { rowHeight: 56 } : {},
+              ...tableProps,
+              rowClassRules
+            }
+          ),
+          pagination ? /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.TablePagination, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            chunkMHAO45AL_cjs.Pagination,
+            {
+              total: pagination.total,
+              rowsPerPage: pagination.pageSize,
+              page: pagination.page,
+              onChange: pagination.onChange,
+              showLabel: true
+            }
+          ) }) : null
+        ] }),
+        detail ? (
+          // 나란한 상세 패널: 제목·설명·닫기 → 본문 → (안내) → 버튼 줄. 스크롤해도 따라오게 sticky. Card 와 같은 테두리·라운드(그림자 없음).
+          // <aside>(complementary) 는 다른 landmark 안에 둘 수 없으므로(axe landmark-complementary-is-top-level) 이름 있는 section — DetailPage 의 aside 와 같다
+          /* @__PURE__ */ jsxRuntime.jsx(
+            chunkMHAO45AL_cjs.Panel,
+            {
+              title: detail.title,
+              description: detail.description,
+              padding: "large",
+              titleRight: /* @__PURE__ */ jsxRuntime.jsx(
+                chunkMHAO45AL_cjs.IconButton,
+                {
+                  type: "button",
+                  variant: "secondary",
+                  "aria-label": "\uB2EB\uAE30",
+                  onClick: detail.onClose,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 20 })
+                }
+              ),
+              note: detail.note,
+              footer: detail.footer,
+              className: chunkMHAO45AL_cjs.cn("sticky top-[24px] shrink-0", DETAIL_WIDTH[detail.width ?? "medium"]),
+              children: detail.children
+            }
+          )
+        ) : null
+      ] })
+    ) })
+  ] });
+}
+function MoreMenu({
+  items,
+  deleteAction
+}) {
+  const triggerRef = react.useRef(null);
+  const pendingRef = react.useRef(void 0);
+  const select = (fn) => () => {
+    pendingRef.current = fn;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunkMHAO45AL_cjs.DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.IconButton, { ref: triggerRef, variant: "secondary", "aria-label": "\uB354\uBCF4\uAE30", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Ellipsis, { size: 24 }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      chunkMHAO45AL_cjs.DropdownMenuContent,
+      {
+        align: "end",
+        onCloseAutoFocus: (e) => {
+          e.preventDefault();
+          triggerRef.current?.focus();
+          const fn = pendingRef.current;
+          pendingRef.current = void 0;
+          fn?.();
+        },
+        children: [
+          items.map(({ children, onClick, disabled }, i) => /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.DropdownMenuItem, { disabled, onSelect: select(onClick), children }, i)),
+          deleteAction && items.length ? /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.DropdownMenuSeparator, {}) : null,
+          deleteAction ? /* @__PURE__ */ jsxRuntime.jsx(
+            chunkMHAO45AL_cjs.DropdownMenuItem,
+            {
+              variant: "danger",
+              disabled: deleteAction.disabled,
+              onSelect: select(deleteAction.onClick),
+              children: deleteAction.children
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+}
+function DetailPage({
+  primaryAction,
+  secondaryActions,
+  deleteAction,
+  actions,
+  actionsNote,
+  banner,
+  loading,
+  error,
+  onRetry,
+  notFound,
+  aside,
+  asideTitle = "\uAE30\uBCF8 \uC815\uBCF4",
+  width = "full",
+  children,
+  ...header
+}) {
+  let body;
+  if (loading) {
+    body = /* @__PURE__ */ jsxRuntime.jsx(LoadingState, {});
+  } else if (error) {
+    body = /* @__PURE__ */ jsxRuntime.jsx(ErrorState, { className: "py-[32px]", description: error, onRetry });
+  } else if (notFound) {
+    body = /* @__PURE__ */ jsxRuntime.jsx(
+      EmptyState,
+      {
+        className: "py-[32px]",
+        title: notFound === true ? "\uD56D\uBAA9\uC744 \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." : notFound,
+        description: notFound === true ? "\uC0AD\uC81C\uB418\uC5C8\uAC70\uB098 \uC8FC\uC18C\uAC00 \uC798\uBABB\uB418\uC5C8\uC744 \uC218 \uC788\uC2B5\uB2C8\uB2E4." : void 0
+      }
+    );
+  } else if (aside) {
+    body = // 넓은 화면: 본문 2 : 패널 1 + 세로선. 좁은 화면: 세로로 쌓이고 패널은 제목 + 가로선으로 시작한다
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-[24px] xl:grid-cols-[2fr_1fr] xl:items-start", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.Panel, { title: asideTitle, children: aside })
+    ] });
+  } else {
+    body = children;
+  }
+  const VISIBLE_SECONDARY = 2;
+  const visibleSecondary = secondaryActions?.slice(0, VISIBLE_SECONDARY) ?? [];
+  const overflowSecondary = secondaryActions?.slice(VISIBLE_SECONDARY) ?? [];
+  const primaryButton = primaryAction ? /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.Button, { type: "button", variant: "primaryBold", ...primaryAction }) : null;
+  const moreMenu = (items) => items.length || deleteAction ? /* @__PURE__ */ jsxRuntime.jsx(MoreMenu, { items, deleteAction }) : null;
+  const fullRow = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    moreMenu(overflowSecondary),
+    visibleSecondary.map((action, i) => /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.Button, { type: "button", variant: "secondary", ...action }, i)),
+    primaryButton
+  ] });
+  const collapsedRow = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    moreMenu(secondaryActions ?? []),
+    primaryButton
+  ] });
+  const collapsible = Boolean(deleteAction || secondaryActions?.length);
+  const note = actionsNote != null ? /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      "data-slot": "detail-actions-note",
+      className: "mb-[8px] break-keep text-right text-small-regular text-sys-text-subtle wrap-break-word",
+      children: actionsNote
+    }
+  ) : null;
+  const actionRow = actions ? actions : collapsible ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "detail-actions-full", className: "hidden items-center gap-[8px] @3xl:flex", children: fullRow }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "detail-actions-collapsed", className: "flex items-center gap-[8px] @3xl:hidden", children: collapsedRow })
+  ] }) : primaryButton ? primaryButton : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.PageHeader, { ...header, actions: actionRow }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "section",
+      {
+        "aria-label": header.title || "\uBCF8\uBB38",
+        className: "flex flex-col gap-[24px] px-[24px] py-[24px]",
+        children: [
+          banner,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMHAO45AL_cjs.cn("w-full", width === "panel" && "mx-auto max-w-[900px]"), children: [
+            note,
+            body
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function useFormShell({
+  form,
+  onSubmit,
+  submitting,
+  submitMode = "always"
+}) {
+  const { isValid, isSubmitting } = form.formState;
+  const busy = Boolean(submitting) || isSubmitting;
+  const handleSubmit = form.handleSubmit((values) => onSubmit(values));
+  return { busy, canSubmit: !busy && (submitMode === "always" || isValid), handleSubmit };
+}
+function FormError({ error, className }) {
+  if (!error) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.Alert, { variant: "danger", className, children: /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.AlertDescription, { children: error }) });
+}
+function FormActions({
+  busy,
+  canSubmit,
+  onCancel,
+  submitLabel = "\uC800\uC7A5",
+  cancelLabel = "\uCDE8\uC18C",
+  formId
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    onCancel ? /* @__PURE__ */ jsxRuntime.jsx(
+      chunkMHAO45AL_cjs.Button,
+      {
+        type: "button",
+        variant: "secondaryOutline",
+        onClick: onCancel,
+        disabled: busy,
+        form: formId,
+        children: cancelLabel
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      chunkMHAO45AL_cjs.Button,
+      {
+        type: "submit",
+        variant: "primaryBold",
+        loading: busy,
+        disabled: !canSubmit,
+        form: formId,
+        children: submitLabel
+      }
+    )
+  ] });
+}
+function FormPage({
+  title,
+  description,
+  breadcrumb,
+  titleRight,
+  form,
+  onSubmit,
+  onCancel,
+  submitLabel,
+  cancelLabel,
+  submitting,
+  submitMode,
+  error,
+  requiredLegend,
+  canvas = "plain",
+  align = "start",
+  aside,
+  asideTitle = "\uAC80\uD1A0",
+  children
+}) {
+  const { busy, canSubmit, handleSubmit } = useFormShell({ form, onSubmit, submitting, submitMode });
+  const formId = react.useId();
+  const contentMaxWidth = aside ? "var(--max-w-page-content)" : "var(--max-w-form-control)";
+  const actions = /* @__PURE__ */ jsxRuntime.jsx(
+    FormActions,
+    {
+      busy,
+      canSubmit,
+      onCancel,
+      submitLabel,
+      cancelLabel,
+      formId
+    }
+  );
+  const body = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    requiredLegend ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-small-regular text-sys-text-subtle", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-danger30", children: "*" }),
+      " ",
+      "\uD45C\uC2DC\uB294 \uD544\uC218 \uC785\uB825 \uD56D\uBAA9\uC785\uB2C8\uB2E4"
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.Form, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { id: formId, noValidate: true, onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.FormSectionLevelContext.Provider, { value: 2, children }),
+      /* @__PURE__ */ jsxRuntime.jsx(FormError, { error, className: "mt-[24px]" }),
+      aside ? null : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        chunkMHAO45AL_cjs.FormFooter,
+        {
+          align: "end",
+          className: "mt-[24px] border-t border-sys-divider-subtle pt-[16px]",
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[8px]", children: actions })
+        }
+      ) })
+    ] }) })
+  ] });
+  const column = canvas === "subtle" ? (
+    // 폼 전체를 흰 Card 하나로(섹션 사이 구분선은 그대로). 위 8px 는 첫 FormSection 의 pt-[16px] 과 더해 24
+    /* @__PURE__ */ jsxRuntime.jsx(
+      chunkMHAO45AL_cjs.Card,
+      {
+        className: chunkMHAO45AL_cjs.cn(
+          "w-full max-w-[var(--max-w-form-control)] px-[24px] pb-[24px] pt-[8px]",
+          align === "center" && !aside && "mx-auto"
+        ),
+        children: body
+      }
+    )
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: chunkMHAO45AL_cjs.cn(
+        "w-full max-w-[var(--max-w-form-control)]",
+        align === "center" && !aside && "mx-auto"
+      ),
+      children: body
+    }
+  );
+  return (
+    // subtle 의 캔버스 회색은 기존 토큰(grayscale20, 진단 18-A 의 f7 변형)을 쓴다 — 채택되면 전용 sys 토큰으로 올린다
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkMHAO45AL_cjs.cn("w-full", canvas === "subtle" && "bg-sys-background-hover"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        chunkMHAO45AL_cjs.PageHeader,
+        {
+          title,
+          description,
+          breadcrumb,
+          titleRight,
+          contentMaxWidth
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("section", { "aria-label": title || "\uBCF8\uBB38", className: "px-[24px] py-[32px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full", style: { maxWidth: contentMaxWidth }, children: aside ? (
+        // 폼 열(최대 720px) + 검토 패널. 넓은 화면: 옆에 세로선, sticky. 좁은 화면: 폼 아래에 가로선으로 시작.
+        // <aside>(complementary) 는 다른 landmark 안에 둘 수 없으므로(axe) 이름 있는 section (DetailPage aside 와 같은 꼴)
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-[24px] xl:grid-cols-[minmax(0,var(--max-w-form-control))_minmax(280px,1fr)] xl:items-start", children: [
+          column,
+          /* @__PURE__ */ jsxRuntime.jsxs(chunkMHAO45AL_cjs.Panel, { title: asideTitle, className: "xl:sticky xl:top-[24px]", children: [
+            aside,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-slot": "form-page-aside-actions",
+                className: "mt-[16px] flex justify-end gap-[8px] border-t border-sys-divider-subtle pt-[16px]",
+                children: actions
+              }
+            )
+          ] })
+        ] })
+      ) : column }) })
+    ] })
+  );
+}
+function FormDrawer({
+  open,
+  onOpenChange,
+  side,
+  size,
+  title,
+  description,
+  form,
+  onSubmit,
+  submitLabel,
+  cancelLabel,
+  submitting,
+  error,
+  submitMode,
+  children
+}) {
+  const { busy, canSubmit, handleSubmit } = useFormShell({ form, onSubmit, submitting, submitMode });
+  const guardedOpenChange = (next) => {
+    if (!next && busy) return;
+    onOpenChange(next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.Drawer, { open, onOpenChange: guardedOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    chunkMHAO45AL_cjs.DrawerContent,
+    {
+      side,
+      size,
+      ...description ? {} : { "aria-describedby": void 0 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkMHAO45AL_cjs.DrawerHeader, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.DrawerTitle, { children: title }),
+          description ? /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.DrawerDescription, { children: description }) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.Form, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { noValidate: true, onSubmit: handleSubmit, className: "flex min-h-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(chunkMHAO45AL_cjs.DrawerBody, { className: "px-[24px]", children: [
+            children,
+            /* @__PURE__ */ jsxRuntime.jsx(FormError, { error, className: "mt-[24px]" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.DrawerFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            FormActions,
+            {
+              busy,
+              canSubmit,
+              onCancel: () => guardedOpenChange(false),
+              submitLabel,
+              cancelLabel
+            }
+          ) })
+        ] }) })
+      ]
+    }
+  ) });
+}
+function FormDialog({
+  open,
+  onOpenChange,
+  width,
+  title,
+  description,
+  form,
+  onSubmit,
+  submitLabel,
+  cancelLabel,
+  submitting,
+  error,
+  submitMode,
+  children
+}) {
+  const { busy, canSubmit, handleSubmit } = useFormShell({ form, onSubmit, submitting, submitMode });
+  const guardedOpenChange = (next) => {
+    if (!next && busy) return;
+    onOpenChange(next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.Dialog, { open, onOpenChange: guardedOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    chunkMHAO45AL_cjs.DialogContent,
+    {
+      width,
+      hideCloseButton: busy,
+      ...description ? {} : { "aria-describedby": void 0 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkMHAO45AL_cjs.DialogHeader, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.DialogTitle, { children: title }),
+          description ? /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.DialogDescription, { children: description }) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.Form, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { noValidate: true, onSubmit: handleSubmit, className: "flex flex-col gap-[16px]", children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(FormError, { error }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.DialogFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            FormActions,
+            {
+              busy,
+              canSubmit,
+              onCancel: () => guardedOpenChange(false),
+              submitLabel,
+              cancelLabel
+            }
+          ) })
+        ] }) })
+      ]
+    }
+  ) });
+}
+var TONE_TEXT = {
+  default: "text-sys-text-main",
+  warning: "text-warning40",
+  danger: "text-danger30"
+};
+var TONE_BAR = { default: "bg-primary30", warning: "bg-warning30", danger: "bg-danger30" };
+function StatTile({
+  label,
+  value,
+  caption,
+  href,
+  ratio,
+  tone = "default",
+  loading
+}) {
+  const labelId = react.useId();
+  const percent = ratio == null ? null : Math.round(Math.min(Math.max(ratio, 0), 1) * 100);
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunkMHAO45AL_cjs.Card, { className: "relative gap-[4px] p-[16px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { id: labelId, className: "text-h6 text-sys-text-subtle", children: href ? (
+      // 타일 전체를 클릭 영역으로: 링크의 ::after 를 Card 크기로 늘린다
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href,
+          className: "after:absolute after:inset-0 after:rounded-medium focus-visible:outline-[2px] focus-visible:outline-sys-focus-ring-main",
+          children: label
+        }
+      )
+    ) : label }),
+    loading ? /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.Skeleton, { role: "status", "aria-label": "\uBD88\uB7EC\uC624\uB294 \uC911", className: "h-[32px] w-[80px]" }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: chunkMHAO45AL_cjs.cn("flex items-center gap-[6px] text-h2", TONE_TEXT[tone]), children: [
+      tone !== "default" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlert, { "aria-hidden": true, size: 20, className: "shrink-0" }) : null,
+      value
+    ] }),
+    percent != null && !loading ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "progressbar",
+        "aria-labelledby": labelId,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": percent,
+        className: "mt-[4px] h-[4px] w-full overflow-hidden rounded-full bg-secondary-o10",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: chunkMHAO45AL_cjs.cn("h-full rounded-full", TONE_BAR[tone]),
+            style: { width: `${percent}%` }
+          }
+        )
+      }
+    ) : null,
+    caption ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-small-regular text-sys-text-subtler", children: caption }) : null
+  ] });
+}
+function DashboardLayout({
+  actions,
+  stats,
+  loading,
+  error,
+  onRetry,
+  empty,
+  children,
+  ...header
+}) {
+  let body;
+  if (error) body = /* @__PURE__ */ jsxRuntime.jsx(ErrorState, { className: "py-[32px]", description: error, onRetry });
+  else if (empty)
+    body = /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { className: "py-[32px]", children: empty === true ? "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." : empty });
+  else
+    body = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      stats?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-[12px] xl:grid-cols-4", children: stats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatTile, { ...stat, loading }, i)) }) : null,
+      children
+    ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunkMHAO45AL_cjs.PageHeader, { ...header, actions }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "section",
+      {
+        "aria-label": header.title || "\uBCF8\uBB38",
+        className: "flex flex-col gap-[32px] px-[24px] py-[24px]",
+        children: body
+      }
+    )
+  ] });
+}
+function DashboardSection({ title, action, columns, children }) {
+  const id = react.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-labelledby": id, className: "flex flex-col gap-[16px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-[12px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { id, className: "text-h4 text-sys-text-main", children: title }),
+      action
+    ] }),
+    columns ? (
+      // 1px 간격 + 구분선 색 배경 = 칸 사이 가로·세로 구분선. 칸(DashboardPanel)은 자기 배경을 가진다
+      // 2열에서 칸 수가 홀수면 마지막 칸이 두 열을 차지해 빈 칸이 생기지 않게 한다
+      /* @__PURE__ */ jsxRuntime.jsx(
+        chunkMHAO45AL_cjs.Card,
+        {
+          className: chunkMHAO45AL_cjs.cn(
+            "grid grid-cols-1 gap-px overflow-hidden bg-sys-divider-subtler",
+            columns === 2 && "xl:grid-cols-2 xl:[&>:last-child:nth-child(odd)]:col-span-2"
+          ),
+          children
+        }
+      )
+    ) : children
+  ] });
+}
+function DashboardPanel({
+  title,
+  value,
+  unit,
+  stats,
+  loading,
+  empty,
+  children
+}) {
+  let body = children;
+  if (loading) body = /* @__PURE__ */ jsxRuntime.jsx(LoadingState, { lines: 2 });
+  else if (empty)
+    body = /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { className: "py-[32px]", children: empty === true ? "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." : empty });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[16px] bg-sys-background p-[24px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-end gap-[12px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-h6 text-sys-text-subtle", children: title }),
+      value !== void 0 && value !== null ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-end gap-[2px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-h3 text-sys-text-main", children: value }),
+        unit ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base-regular text-sys-text-subtle", children: unit }) : null
+      ] }) : null,
+      stats?.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          className: "flex items-end gap-[4px] border-l border-sys-divider-subtler pl-[12px]",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base-regular text-sys-text-subtle", children: stat.label }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-h5 text-sys-text-main", children: stat.value })
+          ]
+        },
+        i
+      ))
+    ] }),
+    body
+  ] });
+}
+
+exports.DashboardLayout = DashboardLayout;
+exports.DashboardPanel = DashboardPanel;
+exports.DashboardSection = DashboardSection;
+exports.DetailPage = DetailPage;
+exports.EmptyState = EmptyState;
+exports.ErrorState = ErrorState;
+exports.FormDialog = FormDialog;
+exports.FormDrawer = FormDrawer;
+exports.FormPage = FormPage;
+exports.ListPage = ListPage;
+exports.LoadingState = LoadingState;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map