moru-krds-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 mhb8436
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,61 @@
+# moru-krds-react
+
+React components built on the CSS of KRDS, the Korean government design system.
+
+```bash
+npm i krds-uiux moru-krds-react
+```
+
+```tsx
+import 'krds-uiux/resources/cdn/krds.min.css';
+import { Field, TextInput, Button } from 'moru-krds-react';
+
+<Field id="name" label="이름" required hint="공백 없이 적어 주세요">
+  {(a) => <TextInput {...a} value={name} onChange={onChange} />}
+</Field>
+<Button variant="primary">신청하기</Button>
+```
+
+`krds-uiux` is the official kit. It declares no `@font-face`, so wire the font yourself from
+`krds-uiux/resources/fonts/`. On an air-gapped network, copy `resources/` into your static
+folder and use `css/component/output.css`, which references images by relative path.
+
+## Components
+
+**Page frame** — masthead, header, GNB, breadcrumb, side navigation, in-page navigation,
+footer, agency identifier, skip link
+
+**Forms** — field wrapper, text input, textarea, select, checkbox, radio, file upload,
+combobox, input group, button
+
+**Data** — table, data table (sorting, sticky header, empty state), structured list,
+text list, pagination
+
+**Status** — inline alert, critical alert, toast, empty state, skeleton, spinner,
+progress bar, badge, tag
+
+**Overlays** — modal, drawer, tooltip, context menu
+
+**Progressive disclosure** — tab, accordion, disclosure, step indicator
+
+**Misc** — avatar, separator, scroll area, text resize
+
+Thirteen of them have no KRDS counterpart — drawer, toast, combobox, context menu, sortable
+data table and others that admin screens need. Those are drawn with KRDS tokens only.
+
+## Notes
+
+31 of the 45 render on the server, so the package keeps its file layout instead of bundling
+into one file.
+
+Framework coupling lives in `src/lib/link.tsx`. It defaults to a plain `<a>`; swap it for
+`next/link` or React Router's `Link`.
+
+With Tailwind v4, import `styles/krds-tailwind.css` to map utility names like `text-fg-subtle`
+onto KRDS variables. Without it the components still work.
+
+Each component keeps its rules and pitfalls in the source header.
+
+## License
+
+MIT. The KRDS kit is not bundled; it ships separately as `krds-uiux` under ISC.

package/dist/accordion/index.d.ts

@@ -0,0 +1,63 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+/**
+ * 아코디언 — KRDS `krds-accordion`.
+ *
+ * 헤더를 눌러 한 덩이씩 펼쳐 보는 목록. FAQ 는 `line`(킷 `type-line`)이 규격이다 — 표로 그리지 않는다.
+ * 기본은 한 번에 하나만 열리고, `multiple` 을 주면 여러 개가 함께 열린다.
+ * 부가 안내 한 덩이만 접었다 펴려면 `Disclosure` 를, 내용을 갈아 끼우려면 `Tab` 을 쓴다.
+ *
+ * @example
+ * <Accordion.Root line multiple toggleAll headingLevel={3}>
+ *   <Accordion.Item title="신청 자격이 어떻게 되나요?">…</Accordion.Item>
+ *   <Accordion.Item title="처리 기간은 얼마나 걸리나요?" defaultOpen>…</Accordion.Item>
+ * </Accordion.Root>
+ *
+ * 자세히: docs/krds/09-부품-노트.md#아코디언
+ */
+/** 헤더 제목의 헤딩 단계. 페이지의 앞선 헤딩보다 한 단계 아래로 준다. */
+export type AccordionHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export type AccordionRootProps = Omit<ComponentPropsWithRef<'div'>, 'onToggle'> & {
+    /** 여러 항목을 동시에 연다. 기본은 킷과 같은 단일 열림 — 하나를 열면 나머지가 닫힌다. */
+    multiple?: boolean;
+    /** 라인형(`type-line`). 상자 배경 없이 구분선만 남는다. FAQ 목록에 이 모양을 쓴다. */
+    line?: boolean;
+    /** 처음부터 전부 펼친다. `multiple` 일 때만 뜻이 있다. */
+    defaultAllOpen?: boolean;
+    /** 헤더 제목의 헤딩 단계. 기본 `h3`. 페이지의 앞선 헤딩보다 한 단계 아래로 준다. */
+    headingLevel?: AccordionHeadingLevel;
+    /** 목록 위 오른쪽에 「전체 열기 / 전체 닫기」 단추를 그린다. `multiple` 일 때만 그려진다. */
+    toggleAll?: boolean;
+    /** 항목을 열고 닫을 때. 뜻 있는 `id` 를 받으려면 항목마다 `id` 를 직접 준다. */
+    onToggle?: (id: string, open: boolean) => void;
+};
+export declare function AccordionRoot({ multiple, line, defaultAllOpen, headingLevel, toggleAll, onToggle, className, children, ...rest }: AccordionRootProps): import("react").JSX.Element;
+export type AccordionItemProps = Omit<ComponentPropsWithRef<'div'>, 'title'> & {
+    /** 헤더 제목. 헤더 전체가 단추가 된다. */
+    title: ReactNode;
+    /** 처음부터 이 항목을 펼친다. 단일 열림에서는 하나에만 준다. */
+    defaultOpen?: boolean;
+    /** 이 항목만 헤딩 단계를 달리한다. 보통은 `Accordion.Root` 쪽에서 정한다. */
+    headingLevel?: AccordionHeadingLevel;
+    /** 헤더 단추(`btn-accordion`)에 붙일 클래스. */
+    buttonClassName?: string;
+    /** 내용 영역(`accordion-body`)에 붙일 클래스. */
+    bodyClassName?: string;
+};
+export declare function AccordionItem({ title, defaultOpen, headingLevel, buttonClassName, bodyClassName, id, className, children, ...rest }: AccordionItemProps): import("react").JSX.Element;
+export type AccordionToggleAllProps = Omit<ComponentPropsWithRef<'button'>, 'children'> & {
+    expandLabel?: string;
+    collapseLabel?: string;
+};
+/**
+ * 전체 열기 / 전체 닫기 — 킷에 없어 `krds-btn xsmall text` 로 보충한 단추.
+ *
+ * `Accordion.Root` 에 `toggleAll` 을 주면 제자리에 알아서 그려진다. 직접 쓸 때는
+ * `Accordion.Root` 안에 둔다(문맥을 읽는다). 단일 열림에서는 아무것도 그리지 않는다.
+ */
+export declare function AccordionToggleAll({ expandLabel, collapseLabel, className, onClick, ...rest }: AccordionToggleAllProps): import("react").JSX.Element | null;
+export declare const Accordion: {
+    Root: typeof AccordionRoot;
+    Item: typeof AccordionItem;
+    ToggleAll: typeof AccordionToggleAll;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/accordion/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAML,KAAK,qBAAqB,EAE1B,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf;;;;;;;;;;;;;;GAcG;AAEH,8CAA8C;AAC9C,MAAM,MAAM,qBAAqB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAoCtD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAChF,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0CAA0C;IAC1C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,uDAAuD;IACvD,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,QAAgB,EAChB,IAAI,EACJ,cAAc,EACd,YAAgB,EAChB,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,kBAAkB,+BAkDpB;AAED,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,GAAG;IAC7E,4BAA4B;IAC5B,KAAK,EAAE,SAAS,CAAC;IACjB,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC,sCAAsC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,WAAmB,EACnB,YAAY,EACZ,eAAe,EACf,aAAa,EACb,EAAE,EACF,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,kBAAkB,+BAkCpB;AAED,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IACxF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,WAAqB,EACrB,aAAuB,EACvB,SAAS,EACT,OAAO,EACP,GAAG,IAAI,EACR,EAAE,uBAAuB,sCAwBzB;AAED,eAAO,MAAM,SAAS;;;;CAIrB,CAAC"}

package/dist/accordion/index.js

@@ -0,0 +1,145 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useId,
+  useMemo,
+  useState
+} from "react";
+import { cx } from "../lib/krds.js";
+const AccordionContext = createContext(null);
+function useAccordionContext(who) {
+  const ctx = useContext(AccordionContext);
+  if (!ctx) throw new Error(`${who} \uC740(\uB294) <Accordion.Root> \uC548\uC5D0\uC11C\uB9CC \uC4F4\uB2E4.`);
+  return ctx;
+}
+function AccordionRoot({
+  multiple = false,
+  line,
+  defaultAllOpen,
+  headingLevel = 3,
+  toggleAll,
+  onToggle,
+  className,
+  children,
+  ...rest
+}) {
+  const [state, setState] = useState(() => ({
+    // 단일 열림에서 「처음부터 전부 펼침」은 성립하지 않는다.
+    all: defaultAllOpen && multiple ? true : null,
+    touched: {}
+  }));
+  const value = useMemo(() => {
+    const isOpen = (key, defaultOpen) => key in state.touched ? state.touched[key] : state.all ?? defaultOpen;
+    return {
+      isOpen,
+      toggle: (key, defaultOpen) => {
+        const next = !isOpen(key, defaultOpen);
+        setState(
+          (prev) => multiple ? (
+            // 다중 열림 — 누른 항목만 뒤집는다. 나머지는 그대로 둔다.
+            { all: prev.all, touched: { ...prev.touched, [key]: next } }
+          ) : (
+            // 단일 열림 — 누른 항목만 남긴다. `all: false` 라서 나머지는 전부 닫힌다.
+            { all: false, touched: { [key]: next } }
+          )
+        );
+        onToggle?.(key, next);
+      },
+      expandAll: () => setState({ all: true, touched: {} }),
+      collapseAll: () => setState({ all: false, touched: {} }),
+      allOpen: state.all === true && Object.values(state.touched).every(Boolean),
+      multiple,
+      headingLevel
+    };
+  }, [state, multiple, headingLevel, onToggle]);
+  return /* @__PURE__ */ jsxs(AccordionContext.Provider, { value, children: [
+    toggleAll && multiple && // 킷에 전체 열기 단추 자리가 없다 — 목록 위 오른쪽에 Tailwind 로 둔다(mb-2 = 8px).
+    /* @__PURE__ */ jsx("div", { className: "mb-2 flex justify-end", children: /* @__PURE__ */ jsx(AccordionToggleAll, {}) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx("krds-accordion", line && "type-line", className),
+        "data-type": multiple ? "multiOpen" : "singleOpen",
+        ...rest,
+        children
+      }
+    )
+  ] });
+}
+function AccordionItem({
+  title,
+  defaultOpen = false,
+  headingLevel,
+  buttonClassName,
+  bodyClassName,
+  id,
+  className,
+  children,
+  ...rest
+}) {
+  const uid = useId();
+  const ctx = useAccordionContext("<Accordion.Item>");
+  const key = id ?? uid;
+  const headerId = `${key}-header`;
+  const panelId = `${key}-panel`;
+  const open = ctx.isOpen(key, defaultOpen);
+  const Heading = `h${headingLevel ?? ctx.headingLevel}`;
+  return /* @__PURE__ */ jsxs("div", { id, className: cx("accordion-item", open && "active", className), ...rest, children: [
+    /* @__PURE__ */ jsx(Heading, { className: "accordion-header", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        id: headerId,
+        className: cx("btn-accordion", open && "active", buttonClassName),
+        "aria-expanded": open,
+        "aria-controls": panelId,
+        onClick: () => ctx.toggle(key, defaultOpen),
+        children: title
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { id: panelId, className: "accordion-collapse collapse", role: "region", "aria-labelledby": headerId, children: /* @__PURE__ */ jsx("div", { className: cx("accordion-body", bodyClassName), children }) })
+  ] });
+}
+function AccordionToggleAll({
+  expandLabel = "\uC804\uCCB4 \uC5F4\uAE30",
+  collapseLabel = "\uC804\uCCB4 \uB2EB\uAE30",
+  className,
+  onClick,
+  ...rest
+}) {
+  const ctx = useAccordionContext("<Accordion.ToggleAll>");
+  if (!ctx.multiple) return null;
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    if (ctx.allOpen) ctx.collapseAll();
+    else ctx.expandAll();
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: cx("krds-btn xsmall text", className),
+      onClick: handleClick,
+      ...rest,
+      children: [
+        ctx.allOpen ? collapseLabel : expandLabel,
+        /* @__PURE__ */ jsx("i", { className: cx("svg-icon ico-angle", ctx.allOpen && "rotate-180"), "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+const Accordion = {
+  Root: AccordionRoot,
+  Item: AccordionItem,
+  ToggleAll: AccordionToggleAll
+};
+export {
+  Accordion,
+  AccordionItem,
+  AccordionRoot,
+  AccordionToggleAll
+};
+//# sourceMappingURL=index.js.map

package/dist/accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/accordion/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  type ComponentPropsWithRef,\n  type MouseEvent as ReactMouseEvent,\n  type ReactNode,\n} from 'react';\nimport { cx } from '../lib/krds';\n\n/**\n * 아코디언 — KRDS `krds-accordion`.\n *\n * 헤더를 눌러 한 덩이씩 펼쳐 보는 목록. FAQ 는 `line`(킷 `type-line`)이 규격이다 — 표로 그리지 않는다.\n * 기본은 한 번에 하나만 열리고, `multiple` 을 주면 여러 개가 함께 열린다.\n * 부가 안내 한 덩이만 접었다 펴려면 `Disclosure` 를, 내용을 갈아 끼우려면 `Tab` 을 쓴다.\n *\n * @example\n * <Accordion.Root line multiple toggleAll headingLevel={3}>\n *   <Accordion.Item title=\"신청 자격이 어떻게 되나요?\">…</Accordion.Item>\n *   <Accordion.Item title=\"처리 기간은 얼마나 걸리나요?\" defaultOpen>…</Accordion.Item>\n * </Accordion.Root>\n *\n * 자세히: docs/krds/09-부품-노트.md#아코디언\n */\n\n/** 헤더 제목의 헤딩 단계. 페이지의 앞선 헤딩보다 한 단계 아래로 준다. */\nexport type AccordionHeadingLevel = 2 | 3 | 4 | 5 | 6;\n\n/**\n * 열림 상태.\n *\n * 항목 목록을 부모가 모르고도(등록 절차 없이) 「전체 열기」를 지원하려고 이렇게 잡았다.\n * - `all: null` — 전체 열기/닫기를 아직 누르지 않았다 → 손대지 않은 항목은 제 `defaultOpen` 을 따른다\n * - `all: true|false` — 전체 열기/닫기를 눌렀다 → 손대지 않은 항목은 전부 그 값을 따른다\n * - `touched` — 헤더를 눌러 개별로 손댄 항목만. 언제나 `all` 보다 우선한다\n */\ntype AccordionOpenState = {\n  all: boolean | null;\n  touched: Record<string, boolean>;\n};\n\ntype AccordionContextValue = {\n  /** 이 항목이 열려 있나. 손댄 적 없으면 항목 제 `defaultOpen` 이 산다. */\n  isOpen: (key: string, defaultOpen: boolean) => boolean;\n  toggle: (key: string, defaultOpen: boolean) => void;\n  expandAll: () => void;\n  collapseAll: () => void;\n  /** 「전체 열기」를 누른 뒤 하나도 닫지 않은 상태. 전체 단추의 글자를 여기서 고른다. */\n  allOpen: boolean;\n  /** 다중 열림인가(킷 JS 의 `data-type=\"multiOpen\"`). */\n  multiple: boolean;\n  headingLevel: AccordionHeadingLevel;\n};\n\nconst AccordionContext = createContext<AccordionContextValue | null>(null);\n\nfunction useAccordionContext(who: string): AccordionContextValue {\n  const ctx = useContext(AccordionContext);\n  if (!ctx) throw new Error(`${who} 은(는) <Accordion.Root> 안에서만 쓴다.`);\n  return ctx;\n}\n\nexport type AccordionRootProps = Omit<ComponentPropsWithRef<'div'>, 'onToggle'> & {\n  /** 여러 항목을 동시에 연다. 기본은 킷과 같은 단일 열림 — 하나를 열면 나머지가 닫힌다. */\n  multiple?: boolean;\n  /** 라인형(`type-line`). 상자 배경 없이 구분선만 남는다. FAQ 목록에 이 모양을 쓴다. */\n  line?: boolean;\n  /** 처음부터 전부 펼친다. `multiple` 일 때만 뜻이 있다. */\n  defaultAllOpen?: boolean;\n  /** 헤더 제목의 헤딩 단계. 기본 `h3`. 페이지의 앞선 헤딩보다 한 단계 아래로 준다. */\n  headingLevel?: AccordionHeadingLevel;\n  /** 목록 위 오른쪽에 「전체 열기 / 전체 닫기」 단추를 그린다. `multiple` 일 때만 그려진다. */\n  toggleAll?: boolean;\n  /** 항목을 열고 닫을 때. 뜻 있는 `id` 를 받으려면 항목마다 `id` 를 직접 준다. */\n  onToggle?: (id: string, open: boolean) => void;\n};\n\nexport function AccordionRoot({\n  multiple = false,\n  line,\n  defaultAllOpen,\n  headingLevel = 3,\n  toggleAll,\n  onToggle,\n  className,\n  children,\n  ...rest\n}: AccordionRootProps) {\n  const [state, setState] = useState<AccordionOpenState>(() => ({\n    // 단일 열림에서 「처음부터 전부 펼침」은 성립하지 않는다.\n    all: defaultAllOpen && multiple ? true : null,\n    touched: {},\n  }));\n\n  const value = useMemo<AccordionContextValue>(() => {\n    const isOpen = (key: string, defaultOpen: boolean) =>\n      key in state.touched ? state.touched[key] : (state.all ?? defaultOpen);\n\n    return {\n      isOpen,\n      toggle: (key, defaultOpen) => {\n        const next = !isOpen(key, defaultOpen);\n        setState((prev) =>\n          multiple\n            ? // 다중 열림 — 누른 항목만 뒤집는다. 나머지는 그대로 둔다.\n              { all: prev.all, touched: { ...prev.touched, [key]: next } }\n            : // 단일 열림 — 누른 항목만 남긴다. `all: false` 라서 나머지는 전부 닫힌다.\n              { all: false, touched: { [key]: next } },\n        );\n        onToggle?.(key, next);\n      },\n      expandAll: () => setState({ all: true, touched: {} }),\n      collapseAll: () => setState({ all: false, touched: {} }),\n      allOpen: state.all === true && Object.values(state.touched).every(Boolean),\n      multiple,\n      headingLevel,\n    };\n  }, [state, multiple, headingLevel, onToggle]);\n\n  return (\n    <AccordionContext.Provider value={value}>\n      {toggleAll && multiple && (\n        // 킷에 전체 열기 단추 자리가 없다 — 목록 위 오른쪽에 Tailwind 로 둔다(mb-2 = 8px).\n        <div className=\"mb-2 flex justify-end\">\n          <AccordionToggleAll />\n        </div>\n      )}\n      <div\n        className={cx('krds-accordion', line && 'type-line', className)}\n        // 킷 JS 가 읽던 값. 우리 렌더에는 필요 없지만 DOM 만 봐도 모드를 알 수 있게 남긴다.\n        data-type={multiple ? 'multiOpen' : 'singleOpen'}\n        {...rest}\n      >\n        {children}\n      </div>\n    </AccordionContext.Provider>\n  );\n}\n\nexport type AccordionItemProps = Omit<ComponentPropsWithRef<'div'>, 'title'> & {\n  /** 헤더 제목. 헤더 전체가 단추가 된다. */\n  title: ReactNode;\n  /** 처음부터 이 항목을 펼친다. 단일 열림에서는 하나에만 준다. */\n  defaultOpen?: boolean;\n  /** 이 항목만 헤딩 단계를 달리한다. 보통은 `Accordion.Root` 쪽에서 정한다. */\n  headingLevel?: AccordionHeadingLevel;\n  /** 헤더 단추(`btn-accordion`)에 붙일 클래스. */\n  buttonClassName?: string;\n  /** 내용 영역(`accordion-body`)에 붙일 클래스. */\n  bodyClassName?: string;\n};\n\nexport function AccordionItem({\n  title,\n  defaultOpen = false,\n  headingLevel,\n  buttonClassName,\n  bodyClassName,\n  id,\n  className,\n  children,\n  ...rest\n}: AccordionItemProps) {\n  const uid = useId();\n  const ctx = useAccordionContext('<Accordion.Item>');\n\n  // 킷 JS 는 `accordionHeader-id-*` / `accordionCollapse-id-*` 를 난수로 만든다.\n  // React 는 `useId()` 가 서버·클라이언트에서 같은 값을 주므로 그것을 쓴다.\n  const key = id ?? uid;\n  const headerId = `${key}-header`;\n  const panelId = `${key}-panel`;\n\n  const open = ctx.isOpen(key, defaultOpen);\n  const Heading = `h${headingLevel ?? ctx.headingLevel}` as 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n  return (\n    <div id={id} className={cx('accordion-item', open && 'active', className)} {...rest}>\n      <Heading className=\"accordion-header\">\n        <button\n          type=\"button\"\n          id={headerId}\n          className={cx('btn-accordion', open && 'active', buttonClassName)}\n          aria-expanded={open}\n          aria-controls={panelId}\n          onClick={() => ctx.toggle(key, defaultOpen)}\n        >\n          {title}\n        </button>\n      </Heading>\n      {/* `collapse` 는 킷 CSS 에 규칙이 없다. 킷 마크업과 맞추려고 그대로 둔다.\n          닫힘/열림은 `.accordion-item.active` 가 이 요소의 max-height·visibility 를 바꿔 만든다. */}\n      <div id={panelId} className=\"accordion-collapse collapse\" role=\"region\" aria-labelledby={headerId}>\n        <div className={cx('accordion-body', bodyClassName)}>{children}</div>\n      </div>\n    </div>\n  );\n}\n\nexport type AccordionToggleAllProps = Omit<ComponentPropsWithRef<'button'>, 'children'> & {\n  expandLabel?: string;\n  collapseLabel?: string;\n};\n\n/**\n * 전체 열기 / 전체 닫기 — 킷에 없어 `krds-btn xsmall text` 로 보충한 단추.\n *\n * `Accordion.Root` 에 `toggleAll` 을 주면 제자리에 알아서 그려진다. 직접 쓸 때는\n * `Accordion.Root` 안에 둔다(문맥을 읽는다). 단일 열림에서는 아무것도 그리지 않는다.\n */\nexport function AccordionToggleAll({\n  expandLabel = '전체 열기',\n  collapseLabel = '전체 닫기',\n  className,\n  onClick,\n  ...rest\n}: AccordionToggleAllProps) {\n  const ctx = useAccordionContext('<Accordion.ToggleAll>');\n\n  // 단일 열림에서는 「전체 열기」가 성립하지 않는다.\n  if (!ctx.multiple) return null;\n\n  const handleClick = (event: ReactMouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n    if (event.defaultPrevented) return;\n    if (ctx.allOpen) ctx.collapseAll();\n    else ctx.expandAll();\n  };\n\n  return (\n    <button\n      type=\"button\"\n      className={cx('krds-btn xsmall text', className)}\n      onClick={handleClick}\n      {...rest}\n    >\n      {ctx.allOpen ? collapseLabel : expandLabel}\n      <i className={cx('svg-icon ico-angle', ctx.allOpen && 'rotate-180')} aria-hidden=\"true\" />\n    </button>\n  );\n}\n\nexport const Accordion = {\n  Root: AccordionRoot,\n  Item: AccordionItem,\n  ToggleAll: AccordionToggleAll,\n};\n"],"mappings":"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","names":[]}

package/dist/alert/index.d.ts

@@ -0,0 +1,44 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { type KrdsIcon, type KrdsTone } from '../lib/krds';
+/**
+ * 인라인 안내 상자 — KRDS 에 없다. shadcn `Alert` 형태에 KRDS 토큰을 입힌 보충 부품이다.
+ *
+ * 본문 흐름 안에서 「이 화면을 쓰기 전에 알아야 할 것」을 한 덩이로 알린다.
+ * 떴다 사라지는 알림은 `Toast`, 폼 필드 하나에 붙는 문구는 `Field` 의 `hint`·`message`,
+ * 재난·장애 배너는 `CriticalAlert` 다 — 그쪽에 이 상자를 갖다 쓰지 마라(규격이 금지한다).
+ * `AlertTitle` · `AlertDescription` 말고 다른 것을 바로 넣지 않는다.
+ *
+ * @example
+ * <Alert tone="information">
+ *   <AlertTitle>열람 신청 전에 확인하세요.</AlertTitle>
+ *   <AlertDescription>비공개 기록물은 소속 기관 승인 뒤에 열립니다.</AlertDescription>
+ * </Alert>
+ * <Alert tone="danger" announce="assertive">
+ *   <AlertTitle>저장하지 못했습니다.</AlertTitle>
+ * </Alert>
+ *
+ * 자세히: docs/krds/09-부품-노트.md#안내상자
+ */
+/** 색조. `KrdsTone` 에서 이 상자가 쓰는 다섯만 좁힌 것이다. */
+export type AlertTone = Extract<KrdsTone, 'information' | 'warning' | 'danger' | 'success' | 'gray'>;
+/**
+ * 낭독 방식. 생략하면 role 이 없다(늘 떠 있는 안내의 기본값).
+ * `polite` = `role="status"`(새로 나타나는 안내) · `assertive` = `role="alert"`(긴급한 것에만).
+ */
+export type AlertAnnounce = 'polite' | 'assertive';
+export type AlertProps = Omit<ComponentPropsWithRef<'div'>, 'title'> & {
+    /** 기본 `information`. 선·면·글자색과 기본 아이콘이 여기서 정해진다. */
+    tone?: AlertTone;
+    /** 킷 아이콘 이름(`ico-` 뺀 것). 색조 기본값을 덮는다. `null` 이면 그리지 않는다. */
+    icon?: KrdsIcon | null;
+    /** 낭독 방식. 기본은 role 없음. `assertive`(=`role="alert"`)는 긴급한 것에만. */
+    announce?: AlertAnnounce;
+    /** `AlertTitle` · `AlertDescription` 을 넣는다. */
+    children?: ReactNode;
+};
+export declare function Alert({ tone, icon, announce, className, children, ...rest }: AlertProps): import("react").JSX.Element;
+/** 안내 제목 한 줄. 둘째 칸에 놓인다. 색은 상자에서 물려받는다. */
+export declare function AlertTitle({ className, ...rest }: ComponentPropsWithRef<'div'>): import("react").JSX.Element;
+/** 안내 본문. 여러 줄·목록을 넣어도 `gap-1` 로 벌어진다. 색은 상자에서 물려받는다. */
+export declare function AlertDescription({ className, ...rest }: ComponentPropsWithRef<'div'>): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAM,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE/D;;;;;;;;;;;;;;;;;;GAkBG;AAEH,6CAA6C;AAC7C,MAAM,MAAM,SAAS,GAAG,OAAO,CAAC,QAAQ,EAAE,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC,CAAC;AAErG;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,WAAW,CAAC;AAwBnD,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,GAAG;IACrE,mDAAmD;IACnD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,wBAAgB,KAAK,CAAC,EAAE,IAAoB,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,+BAmCvG;AAED,2CAA2C;AAC3C,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,qBAAqB,CAAC,KAAK,CAAC,+BAE9E;AAED,yDAAyD;AACzD,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,qBAAqB,CAAC,KAAK,CAAC,+BAEpF"}

package/dist/alert/index.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../lib/krds.js";
+const ROLE = {
+  polite: "status",
+  assertive: "alert"
+};
+const TONE = {
+  information: {
+    box: "border-information-line bg-information-surface text-information",
+    tint: "bg-information",
+    icon: "information-fill"
+  },
+  // 경고 아이콘은 킷에 없다 — 위 「경고에 아이콘이 없는 것은 일부러다」 참고.
+  warning: { box: "border-warning-line bg-warning-surface text-warning", tint: "bg-warning", icon: null },
+  danger: { box: "border-danger-line bg-danger-surface text-danger", tint: "bg-danger", icon: "error-fill" },
+  success: { box: "border-success-line bg-success-surface text-success", tint: "bg-success", icon: "success-fill" },
+  gray: { box: "border-line bg-surface-subtler text-fg", tint: "bg-fg", icon: null }
+};
+function Alert({ tone = "information", icon, announce, className, children, ...rest }) {
+  const t = TONE[tone];
+  const iconName = icon === void 0 ? t.icon : icon;
+  const iconNode = iconName ? /* @__PURE__ */ jsx(
+    "i",
+    {
+      className: cx(
+        "svg-icon",
+        `ico-${iconName}`,
+        // shadcn 이 자식 svg 에 거는 16px + 아래로 2px 자리. 킷 `.svg-icon` 기본이 large 라 줄여야 한다.
+        "col-start-1 row-start-1 size-4 translate-y-0.5",
+        // `-fill` 은 background-image 라 색을 못 바꾼다(함정 1).
+        !iconName.endsWith("-fill") && t.tint
+      ),
+      "aria-hidden": "true"
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: announce ? ROLE[announce] : void 0,
+      className: cx(
+        "relative grid w-full items-start gap-y-0.5 rounded-lg border border-solid px-4 py-3 text-sm",
+        // 아이콘이 있을 때만 첫 칸이 열린다 — shadcn 의 `has-[>svg]:` 분기를 코드로 옮긴 것.
+        iconNode ? "grid-cols-[calc(var(--spacing)*4)_1fr] gap-x-3" : "grid-cols-[0_1fr]",
+        t.box,
+        className
+      ),
+      ...rest,
+      children: [
+        iconNode,
+        children
+      ]
+    }
+  );
+}
+function AlertTitle({ className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("col-start-2 min-h-4 font-bold", className), ...rest });
+}
+function AlertDescription({ className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("col-start-2 grid justify-items-start gap-1 text-sm", className), ...rest });
+}
+export {
+  Alert,
+  AlertDescription,
+  AlertTitle
+};
+//# sourceMappingURL=index.js.map

package/dist/alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/alert/index.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { cx, type KrdsIcon, type KrdsTone } from '../lib/krds';\n\n/**\n * 인라인 안내 상자 — KRDS 에 없다. shadcn `Alert` 형태에 KRDS 토큰을 입힌 보충 부품이다.\n *\n * 본문 흐름 안에서 「이 화면을 쓰기 전에 알아야 할 것」을 한 덩이로 알린다.\n * 떴다 사라지는 알림은 `Toast`, 폼 필드 하나에 붙는 문구는 `Field` 의 `hint`·`message`,\n * 재난·장애 배너는 `CriticalAlert` 다 — 그쪽에 이 상자를 갖다 쓰지 마라(규격이 금지한다).\n * `AlertTitle` · `AlertDescription` 말고 다른 것을 바로 넣지 않는다.\n *\n * @example\n * <Alert tone=\"information\">\n *   <AlertTitle>열람 신청 전에 확인하세요.</AlertTitle>\n *   <AlertDescription>비공개 기록물은 소속 기관 승인 뒤에 열립니다.</AlertDescription>\n * </Alert>\n * <Alert tone=\"danger\" announce=\"assertive\">\n *   <AlertTitle>저장하지 못했습니다.</AlertTitle>\n * </Alert>\n *\n * 자세히: docs/krds/09-부품-노트.md#안내상자\n */\n\n/** 색조. `KrdsTone` 에서 이 상자가 쓰는 다섯만 좁힌 것이다. */\nexport type AlertTone = Extract<KrdsTone, 'information' | 'warning' | 'danger' | 'success' | 'gray'>;\n\n/**\n * 낭독 방식. 생략하면 role 이 없다(늘 떠 있는 안내의 기본값).\n * `polite` = `role=\"status\"`(새로 나타나는 안내) · `assertive` = `role=\"alert\"`(긴급한 것에만).\n */\nexport type AlertAnnounce = 'polite' | 'assertive';\n\nconst ROLE: Record<AlertAnnounce, 'status' | 'alert'> = {\n  polite: 'status',\n  assertive: 'alert',\n};\n\n/**\n * 색조별 유틸리티. 선 `border-*-line` · 면 `bg-*-surface` · 글자 `text-*` · mask 아이콘 색 `tint`.\n * 완성된 문자열로 적는다(Tailwind 는 글자 그대로 적힌 클래스만 만든다).\n */\nconst TONE: Record<AlertTone, { box: string; tint: string; icon: KrdsIcon | null }> = {\n  information: {\n    box: 'border-information-line bg-information-surface text-information',\n    tint: 'bg-information',\n    icon: 'information-fill',\n  },\n  // 경고 아이콘은 킷에 없다 — 위 「경고에 아이콘이 없는 것은 일부러다」 참고.\n  warning: { box: 'border-warning-line bg-warning-surface text-warning', tint: 'bg-warning', icon: null },\n  danger: { box: 'border-danger-line bg-danger-surface text-danger', tint: 'bg-danger', icon: 'error-fill' },\n  success: { box: 'border-success-line bg-success-surface text-success', tint: 'bg-success', icon: 'success-fill' },\n  gray: { box: 'border-line bg-surface-subtler text-fg', tint: 'bg-fg', icon: null },\n};\n\nexport type AlertProps = Omit<ComponentPropsWithRef<'div'>, 'title'> & {\n  /** 기본 `information`. 선·면·글자색과 기본 아이콘이 여기서 정해진다. */\n  tone?: AlertTone;\n  /** 킷 아이콘 이름(`ico-` 뺀 것). 색조 기본값을 덮는다. `null` 이면 그리지 않는다. */\n  icon?: KrdsIcon | null;\n  /** 낭독 방식. 기본은 role 없음. `assertive`(=`role=\"alert\"`)는 긴급한 것에만. */\n  announce?: AlertAnnounce;\n  /** `AlertTitle` · `AlertDescription` 을 넣는다. */\n  children?: ReactNode;\n};\n\nexport function Alert({ tone = 'information', icon, announce, className, children, ...rest }: AlertProps) {\n  const t = TONE[tone];\n  // `undefined` 는 「색조 기본값을 쓴다」, `null` 은 「그리지 않는다」. 둘을 구분해야 한다.\n  const iconName = icon === undefined ? t.icon : icon;\n\n  const iconNode = iconName ? (\n    <i\n      className={cx(\n        'svg-icon',\n        `ico-${iconName}`,\n        // shadcn 이 자식 svg 에 거는 16px + 아래로 2px 자리. 킷 `.svg-icon` 기본이 large 라 줄여야 한다.\n        'col-start-1 row-start-1 size-4 translate-y-0.5',\n        // `-fill` 은 background-image 라 색을 못 바꾼다(함정 1).\n        !iconName.endsWith('-fill') && t.tint,\n      )}\n      aria-hidden=\"true\"\n    />\n  ) : null;\n\n  return (\n    <div\n      role={announce ? ROLE[announce] : undefined}\n      className={cx(\n        'relative grid w-full items-start gap-y-0.5 rounded-lg border border-solid px-4 py-3 text-sm',\n        // 아이콘이 있을 때만 첫 칸이 열린다 — shadcn 의 `has-[>svg]:` 분기를 코드로 옮긴 것.\n        iconNode ? 'grid-cols-[calc(var(--spacing)*4)_1fr] gap-x-3' : 'grid-cols-[0_1fr]',\n        t.box,\n        className,\n      )}\n      {...rest}\n    >\n      {iconNode}\n      {children}\n    </div>\n  );\n}\n\n/** 안내 제목 한 줄. 둘째 칸에 놓인다. 색은 상자에서 물려받는다. */\nexport function AlertTitle({ className, ...rest }: ComponentPropsWithRef<'div'>) {\n  return <div className={cx('col-start-2 min-h-4 font-bold', className)} {...rest} />;\n}\n\n/** 안내 본문. 여러 줄·목록을 넣어도 `gap-1` 로 벌어진다. 색은 상자에서 물려받는다. */\nexport function AlertDescription({ className, ...rest }: ComponentPropsWithRef<'div'>) {\n  return <div className={cx('col-start-2 grid justify-items-start gap-1 text-sm', className)} {...rest} />;\n}\n"],"mappings":"AAuEI,cAcA,YAdA;AAtEJ,SAAS,UAAwC;AA+BjD,MAAM,OAAkD;AAAA,EACtD,QAAQ;AAAA,EACR,WAAW;AACb;AAMA,MAAM,OAAgF;AAAA,EACpF,aAAa;AAAA,IACX,KAAK;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA;AAAA,EAEA,SAAS,EAAE,KAAK,uDAAuD,MAAM,cAAc,MAAM,KAAK;AAAA,EACtG,QAAQ,EAAE,KAAK,oDAAoD,MAAM,aAAa,MAAM,aAAa;AAAA,EACzG,SAAS,EAAE,KAAK,uDAAuD,MAAM,cAAc,MAAM,eAAe;AAAA,EAChH,MAAM,EAAE,KAAK,0CAA0C,MAAM,SAAS,MAAM,KAAK;AACnF;AAaO,SAAS,MAAM,EAAE,OAAO,eAAe,MAAM,UAAU,WAAW,UAAU,GAAG,KAAK,GAAe;AACxG,QAAM,IAAI,KAAK,IAAI;AAEnB,QAAM,WAAW,SAAS,SAAY,EAAE,OAAO;AAE/C,QAAM,WAAW,WACf;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,OAAO,QAAQ;AAAA;AAAA,QAEf;AAAA;AAAA,QAEA,CAAC,SAAS,SAAS,OAAO,KAAK,EAAE;AAAA,MACnC;AAAA,MACA,eAAY;AAAA;AAAA,EACd,IACE;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,WAAW,KAAK,QAAQ,IAAI;AAAA,MAClC,WAAW;AAAA,QACT;AAAA;AAAA,QAEA,WAAW,mDAAmD;AAAA,QAC9D,EAAE;AAAA,QACF;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA;AAAA;AAAA;AAAA,EACH;AAEJ;AAGO,SAAS,WAAW,EAAE,WAAW,GAAG,KAAK,GAAiC;AAC/E,SAAO,oBAAC,SAAI,WAAW,GAAG,iCAAiC,SAAS,GAAI,GAAG,MAAM;AACnF;AAGO,SAAS,iBAAiB,EAAE,WAAW,GAAG,KAAK,GAAiC;AACrF,SAAO,oBAAC,SAAI,WAAW,GAAG,sDAAsD,SAAS,GAAI,GAAG,MAAM;AACxG;","names":[]}

package/dist/avatar/index.d.ts

@@ -0,0 +1,102 @@
+import type { ComponentPropsWithRef } from 'react';
+import { type KrdsSize, type KrdsTone } from '../lib/krds';
+/**
+ * 아바타(사용자 표식) — KRDS 킷에 없다. KRDS 토큰을 입힌 보충 부품이다.
+ *
+ * 사람 이름 옆에 놓아 목록에서 행을 구분한다. 스스로 누를 수 없는 `<span>` 이다 —
+ * 누르는 일은 감싸는 `<Link>`·`<button>` 이 한다.
+ * 이름이 곁에 이미 적혀 있으면 `decorative` 를 켠다(안 켜면 이름이 두 번 읽힌다).
+ * 여러 사람을 겹쳐 늘어놓을 때는 `AvatarGroup` 을 쓴다.
+ *
+ * @example
+ * <Avatar name="홍길동" />
+ * <Avatar name="홍길동" src="/files/1.jpg" size="small" />
+ * <span className="flex items-center gap-2">
+ *   <Avatar name={p.author} size="xsmall" decorative /> {p.author}
+ * </span>
+ * <AvatarGroup label="참여자" items={members} max={4} />
+ *
+ * 자세히: docs/krds/09-부품-노트.md#아바타
+ */
+/** 채움 방식. 킷 배지의 `bg-light-*` · `bg-*` 짝을 유틸리티로 옮긴 것이다. */
+export type AvatarFill = 'light' | 'solid';
+/**
+ * 이름에서 이니셜을 뽑는다. 한글은 성 한 글자, 서양식 이름은 첫 두 낱말의 머리글자다.
+ *
+ * @example
+ * avatarInitials('홍길동')       // '홍'
+ * avatarInitials('남궁 민수')    // '남'
+ * avatarInitials('Hong Gildong') // 'HG'
+ * avatarInitials('gildong')      // 'G'
+ */
+export declare function avatarInitials(name: string): string;
+type AvatarBase = {
+    /** 기본 medium(48px). 같은 줄의 버튼·입력칸과 **같은 값**을 준다. */
+    size?: KrdsSize;
+    /** 기본 gray. 뜻이 있을 때만 다른 색을 준다 — 이름 해시로 색을 흩뿌리지 않는다. */
+    tone?: KrdsTone;
+    fill?: AvatarFill;
+    /** 프로필 사진 주소. 불러오기에 실패하면 밑의 이니셜이 드러난다. */
+    src?: string;
+    /** 이니셜을 직접 준다. 생략하면 `name` 에서 뽑는다. */
+    initials?: string;
+    /** 겹쳐 놓을 때 서로 떨어져 보이도록 바탕색 테두리를 두른다. `AvatarGroup` 이 켜 준다. */
+    bordered?: boolean;
+    className?: string;
+};
+/** 아바타 하나가 사람을 대신하는 자리. 보조기술이 이름을 읽는다. */
+export type AvatarProps = Omit<ComponentPropsWithRef<'span'>, 'children'> & AvatarBase & {
+    decorative?: false;
+    /** 사람 이름. 이니셜과 보조기술 이름이 여기서 나온다. */
+    name: string;
+    /** 읽을 문구를 이름과 다르게 하고 싶을 때(예: `홍길동 (관리자)`). */
+    label?: string;
+};
+/** 곁에 이름이 이미 적혀 있는 자리. 보조기술에서 감춘다(이름이 두 번 읽히지 않게). */
+export type DecorativeAvatarProps = Omit<ComponentPropsWithRef<'span'>, 'children'> & AvatarBase & {
+    decorative: true;
+    /** 이니셜을 뽑는 데만 쓴다. 읽히지는 않는다. */
+    name?: string;
+};
+/**
+ * 사용자 표식 하나. 이니셜을 깔고 `src` 가 있으면 그 위에 사진을 덮는다.
+ * 이름도 이미지도 없으면 킷 아이콘 `ico-my` 를 그린다(비회원 글 등).
+ *
+ * @example
+ * <Avatar name="홍길동" size="small" src={user.photo} />
+ */
+export declare function Avatar(props: AvatarProps | DecorativeAvatarProps): import("react").JSX.Element;
+/** 묶음에 넣을 한 사람. */
+export type AvatarGroupItem = {
+    name: string;
+    src?: string;
+    tone?: KrdsTone;
+    /** 읽을 문구를 이름과 다르게 할 때. */
+    label?: string;
+};
+export type AvatarGroupProps = Omit<ComponentPropsWithRef<'ul'>, 'children'> & {
+    items: AvatarGroupItem[];
+    /** 몇 칸까지 보일지. 나머지는 `+N` 한 칸으로 접는다. 기본 4. */
+    max?: number;
+    /** 기본 small(40px) — 목록 안에 들어가는 일이 많아 하나짜리보다 작다. */
+    size?: KrdsSize;
+    fill?: AvatarFill;
+    /** 모든 칸의 기본 색. 항목이 `tone` 을 주면 그것이 이긴다. */
+    tone?: KrdsTone;
+    /** 겹치지 않고 나란히 놓는다. */
+    spaced?: boolean;
+    /** 묶음 전체의 이름(`<ul>` 의 aria-label). 예: 「참여자」 */
+    label?: string;
+};
+/**
+ * 아바타 묶음 — 담당자·참여자를 겹쳐 늘어놓는다.
+ *
+ * `children` 이 아니라 `items` 를 받는다. 겹침 간격·테두리·`+N` 칸을 묶음이 정해야 하기 때문이다.
+ * `<ul>/<li>` 라 스크린리더가 개수를 세어 준다 — 각 칸의 이름도 그대로 읽힌다.
+ *
+ * @example
+ * <AvatarGroup label="참여자" items={members} max={4} />
+ */
+export declare function AvatarGroup({ items, max, size, fill, tone, spaced, label, className, ...rest }: AvatarGroupProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAM,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE/D;;;;;;;;;;;;;;;;;GAiBG;AAEH,0DAA0D;AAC1D,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;AA+C3C;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAOnD;AAED,KAAK,UAAU,GAAG;IAChB,mDAAmD;IACnD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,uDAAuD;IACvD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,0CAA0C;AAC1C,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GACvE,UAAU,GAAG;IACX,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEJ,sDAAsD;AACtD,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GACjF,UAAU,GAAG;IACX,UAAU,EAAE,IAAI,CAAC;IACjB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAMJ;;;;;;GAMG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,qBAAqB,+BAwDhE;AAED,mBAAmB;AACnB,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7E,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,sBAAsB;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,GAAO,EACP,IAAc,EACd,IAAc,EACd,IAAa,EACb,MAAM,EACN,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAsClB"}