moru-krds-react 0.1.0

package/dist/structured-list/index.d.ts

@@ -0,0 +1,150 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KrdsSize } from '../lib/krds';
+/**
+ * 구조화 목록 — KRDS `krds-structured-list`.
+ *
+ * 「유사하거나 관련된 콘텐츠 집합」을 카드로 늘어놓는다. 대부분은 {@link StructuredCard} 한 줄로 끝나고,
+ * 순서를 바꾸거나 킷에 없는 것을 끼울 때만 조각(`StructuredItem*`)을 직접 조립한다.
+ * 행·열이 있는 자료는 카드가 아니라 `ui/table` · `ui/data-table` 이다.
+ * `meta`(부가 정보 줄)는 **전폭 배치 전용**이다 — `layout="grid"` 에서는 구분선이 걸리지 않는다.
+ * 카드 안 버튼에는 `title` 로 어느 항목의 것인지 알린다(「신청하기」가 20개인 목록을 생각하라).
+ * 목록이 비면 `StructuredList` 대신 {@link StructuredListEmpty} 를 그린다.
+ *
+ * @example
+ * <StructuredListToolbar info={`전체 ${total}건`}>
+ *   <SortSelect aria-label="정렬기준" options={sorts} />
+ * </StructuredListToolbar>
+ * <StructuredList layout="full">
+ *   {rows.map((r) => (
+ *     <StructuredCard
+ *       key={r.id}
+ *       href={`/board/notice/${r.id}`}
+ *       title={r.title}
+ *       summary={r.summary}
+ *       dateLabel="등록일"
+ *       dateValue={r.createdAt}
+ *       badge={<Badge tone="primary">공지</Badge>}
+ *       tags={r.tags}
+ *     />
+ *   ))}
+ * </StructuredList>
+ *
+ * 자세히: docs/krds/09-부품-노트.md#구조화목록
+ */
+/**
+ * 배치. `grid` 3열 격자(기본) · `full` 한 줄에 한 항목(제목이 커진다) · `compact` 전폭이되 제목은 그대로.
+ */
+export type StructuredListLayout = 'grid' | 'full' | 'compact';
+/**
+ * 크기. 바꾸는 것은 **항목 안쪽 여백**과 우상단 액션 버튼 위치다.
+ * `layout="full"` 과 함께 주면 제목 크기는 배치 쪽이 이겨 여백만 줄어든다.
+ */
+export type StructuredListSize = Extract<KrdsSize, 'small' | 'medium' | 'large'>;
+export type StructuredListProps = ComponentPropsWithRef<'ul'> & {
+    /** 배치. 기본 `grid`. */
+    layout?: StructuredListLayout;
+    /** 크기. 기본 `medium`. */
+    size?: StructuredListSize;
+    /** 항목마다 선택 체크박스가 있을 때 켠다 — 켜지 않으면 체크박스와 우상단 버튼이 겹친다. */
+    selectable?: boolean;
+};
+/** 목록 껍데기 — 킷 `krds-structured-list`. 목록 이름이 필요하면 `aria-label` 을 넘긴다. */
+export declare function StructuredList({ layout, size, selectable, className, children, ...rest }: StructuredListProps): import("react").JSX.Element;
+export type StructuredItemProps = ComponentPropsWithRef<'li'> & {
+    /** 선택됨. 체크박스의 `checked` 와 **따로** 준다 — 킷 CSS 가 `<li>` 클래스만 본다. */
+    selected?: boolean;
+    /** 항목 선택 체크박스. `<Checkbox>` 하나를 그대로 넘긴다 — `<CheckArea>` 로 감싸지 마라. */
+    check?: ReactNode;
+};
+/** 항목 하나 — 킷 `structured-item`. 안쪽 `<div class="in">` 은 부품이 스스로 그린다. */
+export declare function StructuredItem({ selected, check, className, children, ...rest }: StructuredItemProps): import("react").JSX.Element;
+/** 항목 머리 — 킷 `card-top`. 상태 배지 자리다. */
+export declare function StructuredItemTop({ className, children, ...rest }: ComponentPropsWithRef<'div'>): import("react").JSX.Element;
+/** 항목 본문 — 킷 `card-body`. 탐색 링크와 CTA 가 들어간다(전폭 배치에서는 좌우로 벌어진다). */
+export declare function StructuredItemBody({ className, children, ...rest }: ComponentPropsWithRef<'div'>): import("react").JSX.Element;
+/** 상세로 가는 탐색 링크 — 킷 `c-text`. 제목·요약·기간을 통째로 감싼다. */
+export type StructuredItemLinkProps = ComponentPropsWithRef<'a'>;
+export declare function StructuredItemLink({ className, children, target, title, ...rest }: StructuredItemLinkProps): import("react").JSX.Element;
+/**
+ * 제목 — 킷 `c-tit`. **한 줄로 잘린다.** 안쪽 `<span>` 감싸개는 부품이 그린다.
+ * 오른쪽 화살표는 킷이 그리므로 아이콘을 직접 넣지 마라.
+ */
+export declare function StructuredItemTitle({ className, children, ...rest }: ComponentPropsWithRef<'p'>): import("react").JSX.Element;
+/** 요약 — 킷 `c-txt`. 격자에서 3줄, 전폭에서 1줄로 잘린다. */
+export declare function StructuredItemSummary({ className, children, ...rest }: ComponentPropsWithRef<'p'>): import("react").JSX.Element;
+export type StructuredItemDateProps = ComponentPropsWithRef<'p'> & {
+    /** 항목 이름. 굵게 그려진다. 예: 「신청 기간」 */
+    label: ReactNode;
+};
+/** 기간·날짜 한 줄 — 킷 `c-date`. 값이 비면 규격대로 대시(`-`)를 넣는다. */
+export declare function StructuredItemDate({ label, className, children, ...rest }: StructuredItemDateProps): import("react").JSX.Element;
+export type StructuredItemMetaProps = Omit<ComponentPropsWithRef<'ul'>, 'children'> & {
+    /** 항목들. 사이사이에 세로 구분선이 그려진다. 빈 값에는 `-` 를 넣어 자리를 지킨다. */
+    items: ReactNode[];
+};
+/**
+ * 부가 정보 줄 — 킷 `c-txt-ul`. 「부서 · 등록일 · 조회수」처럼 짧은 값을 세로선으로 잇는다.
+ * **전폭·compact 배치의 `card-body` 안에서만** 킷 규칙이 걸린다.
+ */
+export declare function StructuredItemMeta({ items, className, ...rest }: StructuredItemMetaProps): import("react").JSX.Element;
+/**
+ * CTA 자리 — 킷 `c-btn`. 항목과 관련된 **가장 중요한 행동 하나**만 넣는다(가이드 규정).
+ * 어느 항목의 버튼인지 알도록 `title` 에 항목 제목을 준다.
+ */
+export declare function StructuredItemCta({ className, children, ...rest }: ComponentPropsWithRef<'div'>): import("react").JSX.Element;
+/** 태그 줄 — 킷 `card-btm`. 위쪽 구분선은 킷이 그린다. */
+export declare function StructuredItemTags({ className, children, ...rest }: ComponentPropsWithRef<'div'>): import("react").JSX.Element;
+/** 태그 하나 — 킷 `tag`. **글자 앞의 `#` 는 킷이 붙인다** — 직접 쓰면 `##` 이 된다. */
+export declare function StructuredItemTag({ className, children, ...rest }: ComponentPropsWithRef<'span'>): import("react").JSX.Element;
+/**
+ * 액션 버튼 묶음 — 킷 `card-btn`. 항목 우상단에 놓이는 보조 기능(공유·찜하기) 자리다.
+ * 안에는 `krds-btn medium text` 를 쓴다(킷이 높이를 고정한다).
+ */
+export declare function StructuredItemActions({ className, children, ...rest }: ComponentPropsWithRef<'div'>): import("react").JSX.Element;
+export type StructuredCardProps = Omit<StructuredItemProps, 'title'> & {
+    /** 제목. 한 줄로 잘린다. */
+    title: ReactNode;
+    /** 상세 주소. 제목·요약·기간 전체가 이 링크가 된다. */
+    href: string;
+    /** `_blank` 면 「새 창 열림」을 `title` 로 알린다. */
+    target?: string;
+    /** 요약. 격자 3줄 · 전폭 1줄로 잘린다. */
+    summary?: ReactNode;
+    /** 기간 줄의 이름. 예: 「신청 기간」 */
+    dateLabel?: ReactNode;
+    /** 기간 줄의 값. 비면 `-` 가 들어간다. */
+    dateValue?: ReactNode;
+    /** 부가 정보(세로선 구분). **전폭·compact 목록에서만** 킷 규칙이 걸린다. */
+    meta?: ReactNode[];
+    /** 상태 배지. `<Badge>` 를 넣는다. */
+    badge?: ReactNode;
+    /** 태그. `#` 은 킷이 붙이므로 글자만 넣는다. */
+    tags?: ReactNode[];
+    /** 가장 중요한 행동 하나. `title` 에 항목 제목을 주는 것을 잊지 마라. */
+    cta?: ReactNode;
+    /** 우상단 보조 기능(공유·찜하기 등). */
+    actions?: ReactNode;
+};
+/**
+ * 카드 한 장을 통째로 — 조각들을 킷 샘플 순서대로 조립한다.
+ * 순서를 바꾸거나 킷에 없는 것을 끼워야 할 때만 조각을 직접 쓴다.
+ */
+export declare function StructuredCard({ title, href, target, summary, dateLabel, dateValue, meta, badge, tags, cta, actions, children, ...rest }: StructuredCardProps): import("react").JSX.Element;
+/**
+ * 자료 없음 — 킷에 빈 목록 규칙이 없어 보충했다(표의 `TableEmpty` 와 같은 모양).
+ * 목록이 비면 `StructuredList` 를 그리지 말고 이것을 그린다.
+ * 대안 행동까지 곁들이려면 `ui/empty-state` 의 `EmptyState` 를 쓴다.
+ */
+export declare function StructuredListEmpty({ className, children, ...rest }: ComponentPropsWithRef<'p'>): import("react").JSX.Element;
+export type StructuredListToolbarProps = ComponentPropsWithRef<'div'> & {
+    /** 왼쪽 — 결과 건수·전체 선택 등. `aria-live="polite"` 로 감싸 바뀐 건수를 읽어 준다. */
+    info?: ReactNode;
+};
+/**
+ * 목록 위 도구 막대 — 킷에 클래스가 없어 유틸리티로 그린 보충 부품이다.
+ *
+ * 왼쪽에 결과 건수, 오른쪽에 정렬·개수 도구를 둔다. 규격: **모든 화면에서 같은 자리에 같은 순서로.**
+ * 정렬을 바꿀 때는 목록만 갈아 끼운다 — 초점을 옮기지 마라.
+ */
+export declare function StructuredListToolbar({ info, className, children, ...rest }: StructuredListToolbarProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/structured-list/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/structured-list/index.tsx"],"names":[],"mappings":"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"}

package/dist/structured-list/index.js

@@ -0,0 +1,194 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
+import { cx } from "../lib/krds.js";
+const LAYOUT_CLASS = {
+  grid: void 0,
+  full: "type-full",
+  compact: "type2"
+};
+const SIZE_CLASS = {
+  small: "sm",
+  medium: "md",
+  large: "lg"
+};
+function StructuredList({
+  layout = "grid",
+  size = "medium",
+  selectable,
+  className,
+  children,
+  ...rest
+}) {
+  if (process.env.NODE_ENV !== "production" && layout === "grid") {
+    const withMeta = Children.toArray(children).some(
+      (child) => isValidElement(child) && child.props.meta != null
+    );
+    if (withMeta) {
+      console.warn(
+        '[krds-react StructuredList] layout="grid" \uC5D0 meta \uB97C \uC900 \uCE74\uB4DC\uAC00 \uC788\uB2E4 \u2014 \uD0B7\uC758 `.c-txt-ul` \uADDC\uCE59\uC740 `.type-full`\xB7`.type2` \uC548\uC5D0\uB9CC \uC788\uC5B4 \uAD6C\uBD84\uC120\uB3C4 \uC0C9\uB3C4 \uAC78\uB9AC\uC9C0 \uC54A\uC740 \uB9E8 \uBAA9\uB85D\uC774 \uB098\uC628\uB2E4. layout="full" \uC774\uB098 "compact" \uB85C \uB450\uAC70\uB098 meta \uB97C \uBE7C\uB77C.'
+      );
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: cx(
+        "krds-structured-list",
+        LAYOUT_CLASS[layout],
+        SIZE_CLASS[size],
+        selectable && "type-check",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+function StructuredItem({
+  selected,
+  check,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx("li", { className: cx("structured-item", selected && "is-check", className), ...rest, children: /* @__PURE__ */ jsxs("div", { className: "in", children: [
+    check != null && /* @__PURE__ */ jsx("div", { className: "krds-check-area", children: check }),
+    children
+  ] }) });
+}
+function StructuredItemTop({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("card-top", className), ...rest, children });
+}
+function StructuredItemBody({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("card-body", className), ...rest, children });
+}
+function StructuredItemLink({
+  className,
+  children,
+  target,
+  title,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: cx("c-text", className),
+      target,
+      title: title ?? (target === "_blank" ? "\uC0C8 \uCC3D \uC5F4\uB9BC" : void 0),
+      ...rest,
+      children
+    }
+  );
+}
+function StructuredItemTitle({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("p", { className: cx("c-tit", className), ...rest, children: /* @__PURE__ */ jsx("span", { className: "span", children }) });
+}
+function StructuredItemSummary({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("p", { className: cx("c-txt", className), ...rest, children });
+}
+function StructuredItemDate({
+  label,
+  className,
+  children,
+  ...rest
+}) {
+  const value = children == null || children === "" ? "-" : children;
+  return /* @__PURE__ */ jsxs("p", { className: cx("c-date", className), ...rest, children: [
+    /* @__PURE__ */ jsx("strong", { className: "key", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "value", children: value })
+  ] });
+}
+function StructuredItemMeta({ items, className, ...rest }) {
+  return /* @__PURE__ */ jsx("ul", { className: cx("c-txt-ul", className), ...rest, children: items.map((item, i) => /* @__PURE__ */ jsx("li", { children: item }, i)) });
+}
+function StructuredItemCta({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("c-btn", className), ...rest, children });
+}
+function StructuredItemTags({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("card-btm", className), ...rest, children });
+}
+function StructuredItemTag({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("span", { className: cx("tag", className), ...rest, children });
+}
+function StructuredItemActions({
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cx("card-btn", className), ...rest, children });
+}
+function StructuredCard({
+  title,
+  href,
+  target,
+  summary,
+  dateLabel,
+  dateValue,
+  meta,
+  badge,
+  tags,
+  cta,
+  actions,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(StructuredItem, { ...rest, children: [
+    badge != null && /* @__PURE__ */ jsx(StructuredItemTop, { children: badge }),
+    /* @__PURE__ */ jsxs(StructuredItemBody, { children: [
+      /* @__PURE__ */ jsxs(StructuredItemLink, { href, target, children: [
+        /* @__PURE__ */ jsx(StructuredItemTitle, { children: title }),
+        summary != null && /* @__PURE__ */ jsx(StructuredItemSummary, { children: summary }),
+        meta != null && meta.length > 0 && /* @__PURE__ */ jsx(StructuredItemMeta, { items: meta }),
+        dateLabel != null && /* @__PURE__ */ jsx(StructuredItemDate, { label: dateLabel, children: dateValue })
+      ] }),
+      cta != null && /* @__PURE__ */ jsx(StructuredItemCta, { children: cta })
+    ] }),
+    tags != null && tags.length > 0 && /* @__PURE__ */ jsx(StructuredItemTags, { children: tags.map((tag, i) => /* @__PURE__ */ jsx(StructuredItemTag, { children: tag }, i)) }),
+    actions != null && /* @__PURE__ */ jsx(StructuredItemActions, { children: actions }),
+    children
+  ] });
+}
+function StructuredListEmpty({
+  className,
+  children = "\uB4F1\uB85D\uB41C \uC790\uB8CC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx("p", { className: cx("py-14 text-center text-fg-subtle", className), ...rest, children });
+}
+function StructuredListToolbar({
+  info,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("flex flex-wrap items-center justify-between gap-3 pb-5", className),
+      ...rest,
+      children: [
+        info != null ? /* @__PURE__ */ jsx("div", { "aria-live": "polite", children: info }) : /* @__PURE__ */ jsx("div", {}),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-3", children })
+      ]
+    }
+  );
+}
+export {
+  StructuredCard,
+  StructuredItem,
+  StructuredItemActions,
+  StructuredItemBody,
+  StructuredItemCta,
+  StructuredItemDate,
+  StructuredItemLink,
+  StructuredItemMeta,
+  StructuredItemSummary,
+  StructuredItemTag,
+  StructuredItemTags,
+  StructuredItemTitle,
+  StructuredItemTop,
+  StructuredList,
+  StructuredListEmpty,
+  StructuredListToolbar
+};
+//# sourceMappingURL=index.js.map

package/dist/structured-list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/structured-list/index.tsx"],"sourcesContent":["import { Children, isValidElement, type ComponentPropsWithRef, type ReactNode } from 'react';\nimport { cx, type KrdsSize } from '../lib/krds';\n\n/**\n * 구조화 목록 — KRDS `krds-structured-list`.\n *\n * 「유사하거나 관련된 콘텐츠 집합」을 카드로 늘어놓는다. 대부분은 {@link StructuredCard} 한 줄로 끝나고,\n * 순서를 바꾸거나 킷에 없는 것을 끼울 때만 조각(`StructuredItem*`)을 직접 조립한다.\n * 행·열이 있는 자료는 카드가 아니라 `ui/table` · `ui/data-table` 이다.\n * `meta`(부가 정보 줄)는 **전폭 배치 전용**이다 — `layout=\"grid\"` 에서는 구분선이 걸리지 않는다.\n * 카드 안 버튼에는 `title` 로 어느 항목의 것인지 알린다(「신청하기」가 20개인 목록을 생각하라).\n * 목록이 비면 `StructuredList` 대신 {@link StructuredListEmpty} 를 그린다.\n *\n * @example\n * <StructuredListToolbar info={`전체 ${total}건`}>\n *   <SortSelect aria-label=\"정렬기준\" options={sorts} />\n * </StructuredListToolbar>\n * <StructuredList layout=\"full\">\n *   {rows.map((r) => (\n *     <StructuredCard\n *       key={r.id}\n *       href={`/board/notice/${r.id}`}\n *       title={r.title}\n *       summary={r.summary}\n *       dateLabel=\"등록일\"\n *       dateValue={r.createdAt}\n *       badge={<Badge tone=\"primary\">공지</Badge>}\n *       tags={r.tags}\n *     />\n *   ))}\n * </StructuredList>\n *\n * 자세히: docs/krds/09-부품-노트.md#구조화목록\n */\n\n/**\n * 배치. `grid` 3열 격자(기본) · `full` 한 줄에 한 항목(제목이 커진다) · `compact` 전폭이되 제목은 그대로.\n */\nexport type StructuredListLayout = 'grid' | 'full' | 'compact';\n\n/**\n * 크기. 바꾸는 것은 **항목 안쪽 여백**과 우상단 액션 버튼 위치다.\n * `layout=\"full\"` 과 함께 주면 제목 크기는 배치 쪽이 이겨 여백만 줄어든다.\n */\nexport type StructuredListSize = Extract<KrdsSize, 'small' | 'medium' | 'large'>;\n\nconst LAYOUT_CLASS: Record<StructuredListLayout, string | undefined> = {\n  grid: undefined,\n  full: 'type-full',\n  compact: 'type2',\n};\n\nconst SIZE_CLASS: Record<StructuredListSize, string> = {\n  small: 'sm',\n  medium: 'md',\n  large: 'lg',\n};\n\nexport type StructuredListProps = ComponentPropsWithRef<'ul'> & {\n  /** 배치. 기본 `grid`. */\n  layout?: StructuredListLayout;\n  /** 크기. 기본 `medium`. */\n  size?: StructuredListSize;\n  /** 항목마다 선택 체크박스가 있을 때 켠다 — 켜지 않으면 체크박스와 우상단 버튼이 겹친다. */\n  selectable?: boolean;\n};\n\n/** 목록 껍데기 — 킷 `krds-structured-list`. 목록 이름이 필요하면 `aria-label` 을 넘긴다. */\nexport function StructuredList({\n  layout = 'grid',\n  size = 'medium',\n  selectable,\n  className,\n  children,\n  ...rest\n}: StructuredListProps) {\n  if (process.env.NODE_ENV !== 'production' && layout === 'grid') {\n    // `meta` 의 킷 규칙은 전폭 배치 안에만 있어 격자에서는 조용히 맨 목록이 된다.\n    // 배치를 아는 것은 목록뿐이라 여기서 자식의 `meta` 를 본다(직접 조립한 것은 못 잡는다).\n    const withMeta = Children.toArray(children).some(\n      (child) => isValidElement<{ meta?: unknown }>(child) && child.props.meta != null,\n    );\n    if (withMeta) {\n      console.warn(\n        '[krds-react StructuredList] layout=\"grid\" 에 meta 를 준 카드가 있다 — 킷의 `.c-txt-ul` 규칙은 ' +\n          '`.type-full`·`.type2` 안에만 있어 구분선도 색도 걸리지 않은 맨 목록이 나온다. ' +\n          'layout=\"full\" 이나 \"compact\" 로 두거나 meta 를 빼라.',\n      );\n    }\n  }\n\n  return (\n    <ul\n      className={cx(\n        'krds-structured-list',\n        LAYOUT_CLASS[layout],\n        SIZE_CLASS[size],\n        selectable && 'type-check',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </ul>\n  );\n}\n\nexport type StructuredItemProps = ComponentPropsWithRef<'li'> & {\n  /** 선택됨. 체크박스의 `checked` 와 **따로** 준다 — 킷 CSS 가 `<li>` 클래스만 본다. */\n  selected?: boolean;\n  /** 항목 선택 체크박스. `<Checkbox>` 하나를 그대로 넘긴다 — `<CheckArea>` 로 감싸지 마라. */\n  check?: ReactNode;\n};\n\n/** 항목 하나 — 킷 `structured-item`. 안쪽 `<div class=\"in\">` 은 부품이 스스로 그린다. */\nexport function StructuredItem({\n  selected,\n  check,\n  className,\n  children,\n  ...rest\n}: StructuredItemProps) {\n  return (\n    <li className={cx('structured-item', selected && 'is-check', className)} {...rest}>\n      <div className=\"in\">\n        {check != null && <div className=\"krds-check-area\">{check}</div>}\n        {children}\n      </div>\n    </li>\n  );\n}\n\n/** 항목 머리 — 킷 `card-top`. 상태 배지 자리다. */\nexport function StructuredItemTop({ className, children, ...rest }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div className={cx('card-top', className)} {...rest}>\n      {children}\n    </div>\n  );\n}\n\n/** 항목 본문 — 킷 `card-body`. 탐색 링크와 CTA 가 들어간다(전폭 배치에서는 좌우로 벌어진다). */\nexport function StructuredItemBody({ className, children, ...rest }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div className={cx('card-body', className)} {...rest}>\n      {children}\n    </div>\n  );\n}\n\n/** 상세로 가는 탐색 링크 — 킷 `c-text`. 제목·요약·기간을 통째로 감싼다. */\nexport type StructuredItemLinkProps = ComponentPropsWithRef<'a'>;\n\nexport function StructuredItemLink({\n  className,\n  children,\n  target,\n  title,\n  ...rest\n}: StructuredItemLinkProps) {\n  return (\n    <a\n      className={cx('c-text', className)}\n      target={target}\n      // 새 창으로 열리면 미리 알린다 — KRDS 접근성 요구(「실행 결과를 예측할 수 있어야 한다」).\n      title={title ?? (target === '_blank' ? '새 창 열림' : undefined)}\n      {...rest}\n    >\n      {children}\n    </a>\n  );\n}\n\n/**\n * 제목 — 킷 `c-tit`. **한 줄로 잘린다.** 안쪽 `<span>` 감싸개는 부품이 그린다.\n * 오른쪽 화살표는 킷이 그리므로 아이콘을 직접 넣지 마라.\n */\nexport function StructuredItemTitle({ className, children, ...rest }: ComponentPropsWithRef<'p'>) {\n  return (\n    <p className={cx('c-tit', className)} {...rest}>\n      <span className=\"span\">{children}</span>\n    </p>\n  );\n}\n\n/** 요약 — 킷 `c-txt`. 격자에서 3줄, 전폭에서 1줄로 잘린다. */\nexport function StructuredItemSummary({ className, children, ...rest }: ComponentPropsWithRef<'p'>) {\n  return (\n    <p className={cx('c-txt', className)} {...rest}>\n      {children}\n    </p>\n  );\n}\n\nexport type StructuredItemDateProps = ComponentPropsWithRef<'p'> & {\n  /** 항목 이름. 굵게 그려진다. 예: 「신청 기간」 */\n  label: ReactNode;\n};\n\n/** 기간·날짜 한 줄 — 킷 `c-date`. 값이 비면 규격대로 대시(`-`)를 넣는다. */\nexport function StructuredItemDate({\n  label,\n  className,\n  children,\n  ...rest\n}: StructuredItemDateProps) {\n  const value = children == null || children === '' ? '-' : children;\n  return (\n    <p className={cx('c-date', className)} {...rest}>\n      <strong className=\"key\">{label}</strong>\n      <span className=\"value\">{value}</span>\n    </p>\n  );\n}\n\nexport type StructuredItemMetaProps = Omit<ComponentPropsWithRef<'ul'>, 'children'> & {\n  /** 항목들. 사이사이에 세로 구분선이 그려진다. 빈 값에는 `-` 를 넣어 자리를 지킨다. */\n  items: ReactNode[];\n};\n\n/**\n * 부가 정보 줄 — 킷 `c-txt-ul`. 「부서 · 등록일 · 조회수」처럼 짧은 값을 세로선으로 잇는다.\n * **전폭·compact 배치의 `card-body` 안에서만** 킷 규칙이 걸린다.\n */\nexport function StructuredItemMeta({ items, className, ...rest }: StructuredItemMetaProps) {\n  return (\n    <ul className={cx('c-txt-ul', className)} {...rest}>\n      {items.map((item, i) => (\n        <li key={i}>{item}</li>\n      ))}\n    </ul>\n  );\n}\n\n/**\n * CTA 자리 — 킷 `c-btn`. 항목과 관련된 **가장 중요한 행동 하나**만 넣는다(가이드 규정).\n * 어느 항목의 버튼인지 알도록 `title` 에 항목 제목을 준다.\n */\nexport function StructuredItemCta({ className, children, ...rest }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div className={cx('c-btn', className)} {...rest}>\n      {children}\n    </div>\n  );\n}\n\n/** 태그 줄 — 킷 `card-btm`. 위쪽 구분선은 킷이 그린다. */\nexport function StructuredItemTags({ className, children, ...rest }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div className={cx('card-btm', className)} {...rest}>\n      {children}\n    </div>\n  );\n}\n\n/** 태그 하나 — 킷 `tag`. **글자 앞의 `#` 는 킷이 붙인다** — 직접 쓰면 `##` 이 된다. */\nexport function StructuredItemTag({ className, children, ...rest }: ComponentPropsWithRef<'span'>) {\n  return (\n    <span className={cx('tag', className)} {...rest}>\n      {children}\n    </span>\n  );\n}\n\n/**\n * 액션 버튼 묶음 — 킷 `card-btn`. 항목 우상단에 놓이는 보조 기능(공유·찜하기) 자리다.\n * 안에는 `krds-btn medium text` 를 쓴다(킷이 높이를 고정한다).\n */\nexport function StructuredItemActions({\n  className,\n  children,\n  ...rest\n}: ComponentPropsWithRef<'div'>) {\n  return (\n    <div className={cx('card-btn', className)} {...rest}>\n      {children}\n    </div>\n  );\n}\n\nexport type StructuredCardProps = Omit<StructuredItemProps, 'title'> & {\n  /** 제목. 한 줄로 잘린다. */\n  title: ReactNode;\n  /** 상세 주소. 제목·요약·기간 전체가 이 링크가 된다. */\n  href: string;\n  /** `_blank` 면 「새 창 열림」을 `title` 로 알린다. */\n  target?: string;\n  /** 요약. 격자 3줄 · 전폭 1줄로 잘린다. */\n  summary?: ReactNode;\n  /** 기간 줄의 이름. 예: 「신청 기간」 */\n  dateLabel?: ReactNode;\n  /** 기간 줄의 값. 비면 `-` 가 들어간다. */\n  dateValue?: ReactNode;\n  /** 부가 정보(세로선 구분). **전폭·compact 목록에서만** 킷 규칙이 걸린다. */\n  meta?: ReactNode[];\n  /** 상태 배지. `<Badge>` 를 넣는다. */\n  badge?: ReactNode;\n  /** 태그. `#` 은 킷이 붙이므로 글자만 넣는다. */\n  tags?: ReactNode[];\n  /** 가장 중요한 행동 하나. `title` 에 항목 제목을 주는 것을 잊지 마라. */\n  cta?: ReactNode;\n  /** 우상단 보조 기능(공유·찜하기 등). */\n  actions?: ReactNode;\n};\n\n/**\n * 카드 한 장을 통째로 — 조각들을 킷 샘플 순서대로 조립한다.\n * 순서를 바꾸거나 킷에 없는 것을 끼워야 할 때만 조각을 직접 쓴다.\n */\nexport function StructuredCard({\n  title,\n  href,\n  target,\n  summary,\n  dateLabel,\n  dateValue,\n  meta,\n  badge,\n  tags,\n  cta,\n  actions,\n  children,\n  ...rest\n}: StructuredCardProps) {\n  return (\n    <StructuredItem {...rest}>\n      {badge != null && <StructuredItemTop>{badge}</StructuredItemTop>}\n      <StructuredItemBody>\n        <StructuredItemLink href={href} target={target}>\n          <StructuredItemTitle>{title}</StructuredItemTitle>\n          {summary != null && <StructuredItemSummary>{summary}</StructuredItemSummary>}\n          {meta != null && meta.length > 0 && <StructuredItemMeta items={meta} />}\n          {dateLabel != null && (\n            <StructuredItemDate label={dateLabel}>{dateValue}</StructuredItemDate>\n          )}\n        </StructuredItemLink>\n        {cta != null && <StructuredItemCta>{cta}</StructuredItemCta>}\n      </StructuredItemBody>\n      {tags != null && tags.length > 0 && (\n        <StructuredItemTags>\n          {tags.map((tag, i) => (\n            <StructuredItemTag key={i}>{tag}</StructuredItemTag>\n          ))}\n        </StructuredItemTags>\n      )}\n      {actions != null && <StructuredItemActions>{actions}</StructuredItemActions>}\n      {children}\n    </StructuredItem>\n  );\n}\n\n/**\n * 자료 없음 — 킷에 빈 목록 규칙이 없어 보충했다(표의 `TableEmpty` 와 같은 모양).\n * 목록이 비면 `StructuredList` 를 그리지 말고 이것을 그린다.\n * 대안 행동까지 곁들이려면 `ui/empty-state` 의 `EmptyState` 를 쓴다.\n */\nexport function StructuredListEmpty({\n  className,\n  children = '등록된 자료가 없습니다.',\n  ...rest\n}: ComponentPropsWithRef<'p'>) {\n  return (\n    <p className={cx('py-14 text-center text-fg-subtle', className)} {...rest}>\n      {children}\n    </p>\n  );\n}\n\nexport type StructuredListToolbarProps = ComponentPropsWithRef<'div'> & {\n  /** 왼쪽 — 결과 건수·전체 선택 등. `aria-live=\"polite\"` 로 감싸 바뀐 건수를 읽어 준다. */\n  info?: ReactNode;\n};\n\n/**\n * 목록 위 도구 막대 — 킷에 클래스가 없어 유틸리티로 그린 보충 부품이다.\n *\n * 왼쪽에 결과 건수, 오른쪽에 정렬·개수 도구를 둔다. 규격: **모든 화면에서 같은 자리에 같은 순서로.**\n * 정렬을 바꿀 때는 목록만 갈아 끼운다 — 초점을 옮기지 마라.\n */\nexport function StructuredListToolbar({\n  info,\n  className,\n  children,\n  ...rest\n}: StructuredListToolbarProps) {\n  return (\n    <div\n      className={cx('flex flex-wrap items-center justify-between gap-3 pb-5', className)}\n      {...rest}\n    >\n      {info != null ? <div aria-live=\"polite\">{info}</div> : <div />}\n      <div className=\"flex flex-wrap items-center gap-3\">{children}</div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/tab/index.d.ts

@@ -0,0 +1,108 @@
+import { type ComponentPropsWithRef } from 'react';
+/**
+ * 탭 — KRDS `krds-tab-area`.
+ *
+ * 같은 자리에서 내용을 갈아 끼운다. 접었다 펴는 목록은 `ui/accordion` 이다.
+ * `Tab.Trigger` 와 `Tab.Panel` 을 같은 `value` 로 짝지운다.
+ * **탭에 사용 불가 상태를 쓰지 않는다**(규격) — 내용이 없으면 탭을 지우거나 패널에서 설명한다.
+ * 탭이 6개를 넘으면 킷이 가로 스크롤만 시키므로 넘기지 않는 편이 맞다. 세로 탭은 킷에 없다.
+ * 비제어로 쓸 때 `defaultValue` 를 생략하면 서버 렌더 결과에 열린 패널이 없다 — 되도록 명시한다.
+ *
+ * @example
+ * <Tab.Root defaultValue="online">
+ *   <Tab.List label="청구 방법" variant="line">
+ *     <Tab.Trigger value="online">온라인</Tab.Trigger>
+ *     <Tab.Trigger value="post">우편·팩스</Tab.Trigger>
+ *   </Tab.List>
+ *   <Tab.Panels>
+ *     <Tab.Panel value="online">…</Tab.Panel>
+ *     <Tab.Panel value="post">…</Tab.Panel>
+ *   </Tab.Panels>
+ * </Tab.Root>
+ *
+ * 자세히: docs/krds/09-부품-노트.md#탭
+ */
+/** 탭 막대 모양. `line` 밑줄형(기본) · `fill` 버튼형. */
+export type TabVariant = 'line' | 'fill';
+/**
+ * 화살표로 초점을 옮길 때 곧바로 선택할 것인가.
+ * `manual`(기본)이 KRDS 가이드의 동작이고, `auto` 는 패널이 가벼울 때만 쓴다.
+ */
+export type TabActivation = 'manual' | 'auto';
+export type TabRootProps = Omit<ComponentPropsWithRef<'div'>, 'onChange'> & {
+    /** 제어 모드. 주면 상태를 바깥이 갖는다. */
+    value?: string;
+    /** 비제어 모드의 첫 선택값. **생략하면 서버 렌더 결과에 열린 패널이 없다** — 되도록 명시한다. */
+    defaultValue?: string;
+    /** 선택이 바뀔 때. */
+    onValueChange?: (value: string) => void;
+    /** 화살표 이동이 곧바로 선택할지. 기본 `manual`. */
+    activation?: TabActivation;
+};
+/** 탭 바깥틀 — 킷 `krds-tab-area`. 안에 `Tab.List` 와 `Tab.Panels` 를 둔다. */
+export declare function TabRoot({ value, defaultValue, onValueChange, activation, className, children, ...rest }: TabRootProps): import("react").JSX.Element;
+export type TabListProps = ComponentPropsWithRef<'div'> & {
+    /** 탭 막대 모양. 기본 `line` — 생략할 수 없다(둘 다 없으면 활성 표시가 사라진다). */
+    variant?: TabVariant;
+    /** 탭이 가로를 꽉 채운다. 기본 true — false 면 `line` 이 밑줄 대신 테두리 상자로 그려진다. */
+    full?: boolean;
+    /** 탭 막대의 이름(`aria-label`). */
+    label?: string;
+    /** `<ul role="tablist">` 에 얹을 클래스. */
+    listClassName?: string;
+};
+/**
+ * 탭 막대 — 킷 `.tab.line.full > ul[role=tablist]`.
+ *
+ * ←→ 로 초점을 옮기고 Home/End 로 양 끝으로 간다(순환하지 않는다).
+ * **모든 탭이 Tab 순서에 남는다** — KRDS 가 「Tab/Shift+Tab 으로 접근」을 못박아 로빙 tabindex 를
+ * 쓰지 않는다.
+ */
+export declare function TabList({ variant, full, label, listClassName, className, children, onKeyDown, ...rest }: TabListProps): import("react").JSX.Element;
+export type TabTriggerProps = Omit<ComponentPropsWithRef<'button'>, 'value'> & {
+    /** 이 탭이 여는 패널의 값. 같은 값을 `Tab.Panel` 에 준다. */
+    value: string;
+    /** `<li>` 에 얹을 클래스. `.active` 가 붙는 요소도 버튼이 아니라 이 `<li>` 다. */
+    itemClassName?: string;
+};
+/**
+ * 탭 하나 — 킷 마크업은 `<li>` + `button.btn-tab` 이고, **`role="tab"` 은 버튼에 붙인다.**
+ *
+ * 킷 원문은 `role="tab"` 과 ARIA 속성을 `<li>` 에 얹고 그 안에 버튼을 넣는데, 그러면
+ * 「누를 수 있는 것 안에 누를 수 있는 것」이 되어 axe `nested-interactive`(serious)로 걸린다
+ * — 실제로 표준사전 화면에서 3건 잡혔다. ARIA 규격(APG Tabs)도 초점을 받는 요소가 곧 `role="tab"` 이다.
+ * 그래서 역할·상태는 버튼으로 옮기고, `<li>` 는 `role="none"` 으로 둔다.
+ * 모양은 그대로다 — 킷 CSS 가 보는 `.active` 는 여전히 `<li>` 에 붙는다.
+ *
+ * 초점은 굴러다닌다(roving tabindex) — 선택된 탭만 Tab 키로 들어오고, 좌우 화살표로 옮긴다(APG).
+ * 선택된 탭에는 「선택됨」 문구가 소리로 함께 나간다(직접 짤 때 가장 자주 빠뜨리는 곳이다).
+ */
+export declare function TabTrigger({ value, itemClassName, className, children, onClick, type, ...rest }: TabTriggerProps): import("react").JSX.Element;
+/** 패널 묶음 — 킷 `tab-conts-wrap`. **빼면 패널 폭이 줄어든다.** */
+export declare function TabPanels({ className, children, ...rest }: ComponentPropsWithRef<'div'>): import("react").JSX.Element;
+export type TabPanelProps = ComponentPropsWithRef<'section'> & {
+    /** 짝이 되는 `Tab.Trigger` 의 값. */
+    value: string;
+    /** 제목 이동(H 키)에만 잡히는 숨은 패널 제목. 탭 글자와 다른 설명이 필요할 때만 준다. */
+    srHeading?: string;
+    /** `srHeading` 의 제목 단계. 기본 3. */
+    srHeadingLevel?: 2 | 3 | 4 | 5 | 6;
+    /**
+     * 안 보이는 패널도 DOM 에 남길 것인가. 기본 true 가 킷 동작이다(폼 입력값이 살아 있다).
+     * false 는 무거운 목록이나 열 때마다 초기화해야 하는 폼에 쓴다.
+     */
+    keepMounted?: boolean;
+};
+/**
+ * 탭 패널 — 킷 `section.tab-conts`. 자식을 여럿 넣으면 24px 간격이 자동으로 붙는다.
+ */
+export declare function TabPanel({ value, srHeading, srHeadingLevel, keepMounted, className, children, ...rest }: TabPanelProps): import("react").JSX.Element | null;
+/** 합성용 묶음. `Root` · `List` · `Trigger` · `Panels` · `Panel`. */
+export declare const Tab: {
+    Root: typeof TabRoot;
+    List: typeof TabList;
+    Trigger: typeof TabTrigger;
+    Panels: typeof TabPanels;
+    Panel: typeof TabPanel;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/tab/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tab/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQL,KAAK,qBAAqB,EAE3B,MAAM,OAAO,CAAC;AAGf;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,4CAA4C;AAC5C,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzC;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,MAAM,CAAC;AAyB9C,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC1E,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB;IAChB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,qCAAqC;IACrC,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B,CAAC;AAEF,oEAAoE;AACpE,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,YAAY,EACZ,aAAa,EACb,UAAqB,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,YAAY,+BA4Cd;AAED,MAAM,MAAM,YAAY,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG;IACxD,0DAA0D;IAC1D,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,mEAAmE;IACnE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAgB,EAChB,IAAW,EACX,KAAK,EACL,aAAa,EACb,SAAS,EACT,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,YAAY,+BAuDd;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,GAAG;IAC7E,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,aAAa,EACb,SAAS,EACT,QAAQ,EACR,OAAO,EACP,IAAe,EACf,GAAG,IAAI,EACR,EAAE,eAAe,+BAgCjB;AAED,qDAAqD;AACrD,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,qBAAqB,CAAC,KAAK,CAAC,+BAMvF;AAED,MAAM,MAAM,aAAa,GAAG,qBAAqB,CAAC,SAAS,CAAC,GAAG;IAC7D,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,SAAS,EACT,cAAkB,EAClB,WAAkB,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,aAAa,sCAsBf;AAED,gEAAgE;AAChE,eAAO,MAAM,GAAG;;;;;;CAMf,CAAC"}