moru-krds-react 0.1.0

package/dist/identifier/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/identifier/index.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { cx } from '../lib/krds';\n\n/**\n * 운영기관 식별자 — KRDS `krds-identifier`.\n *\n * 「이 누리집은 [기관]에서 운영하는 누리집입니다.」 안내. 푸터 안 **가장 마지막 구획**에 둔다.\n * 여기 들어가는 로고는 서비스 로고가 아니라 **운영 주체 기관**의 로고다(서비스 로고는 `f-logo`).\n * 문구 형식과 요소 배치는 규격이 변형을 금지한다 — `children` 은 번역을 넣는 자리다.\n * 푸터 골격을 조립할 때는 `ui/footer` 의 `FooterIdentifier` 를 쓴다.\n *\n * @example\n * <Identifier org=\"○○기관\" logoSrc=\"/site/logo-mark.svg\" />\n * <Identifier org=\"○○기관\" variant=\"text\" dark />\n *\n * 자세히: docs/krds/09-부품-노트.md#운영기관식별자\n */\n\n/**\n * 표현 방식. `card` 는 흰 면 + 둥근 상자(기본), `text` 는 한 줄짜리 킷 전용 변형이다.\n */\nexport type IdentifierVariant = 'card' | 'text';\n\nexport type IdentifierProps = Omit<ComponentPropsWithRef<'section'>, 'children'> & {\n  /** 운영기관명. 안내 문구와 로고 대체 텍스트에 함께 쓰인다. */\n  org: string;\n  /** 운영기관 로고 이미지 경로. 없으면 `.logo` 를 아예 그리지 않는다(킷 마크가 찍히는 것을 막는다). */\n  logoSrc?: string;\n  /** 표현 방식. 기본 `card`. */\n  variant?: IdentifierVariant;\n  /** 어두운 바탕용. 킷에 클래스가 없어 KRDS 반전 토큰으로 그린다. */\n  dark?: boolean;\n  /** 안내 문구. 다국어 번역을 넣을 때만 쓰고 형식은 바꾸지 않는다. */\n  children?: ReactNode;\n  /** 구획 이름(`aria-label`). `<section>` 은 이름이 있어야 region 으로 노출된다. */\n  label?: string;\n  /** 가이드가 허용하는 두 요소. 기본은 `section`. */\n  as?: 'section' | 'article';\n  className?: string;\n};\n\nexport function Identifier({\n  org,\n  logoSrc,\n  variant = 'card',\n  dark,\n  label = '운영기관 식별자',\n  as: Tag = 'section',\n  className,\n  children,\n  ...rest\n}: IdentifierProps) {\n  // 가이드 형식: `(운영기관 로고) 이 누리집은 [운영기관명]에서 운영하는 누리집입니다.`\n  const text = children ?? `이 누리집은 ${org}에서 운영하는 누리집입니다.`;\n\n  const logo = logoSrc ? (\n    <span\n      className={cx(\n        'logo',\n        // 킷의 KRDS 마크 배경과 고정 폭을 지운다. 높이는 킷 값을 그대로 쓴다.\n        'inline-flex items-center bg-none w-auto',\n        // text 변형에는 킷 `.logo` 규칙이 닿지 않아 높이가 없다 — 본문 소자 줄에 맞춘다.\n        variant === 'text' && 'h-5',\n      )}\n    >\n      {/* 이름은 옆의 sr-only 가 준다. alt 까지 채우면 두 번 읽힌다. */}\n      <img src={logoSrc} alt=\"\" className=\"h-full w-auto\" />\n      <span className=\"sr-only\">{org}</span>\n    </span>\n  ) : null;\n\n  const cls =\n    variant === 'text'\n      ? cx(\n          'krds-identifier-txt',\n          // 킷 규칙이 `#krds-footer .f-btm` 안에서만 걸린다 — 밖에서도 같은 줄로 서게 보충한다.\n          // 킷의 `white-space:nowrap` 은 옮기지 않는다(긴 기관명이 좁은 화면에서 넘친다).\n          'flex items-center gap-2 text-sm',\n          dark && 'text-fg-inverse',\n          className,\n        )\n      : cx(\n          'krds-identifier',\n          // 킷의 흰 면(`--krds-light-color-surface-white`)을 반전 토큰으로 덮는다.\n          dark && 'bg-surface-inverse text-fg-inverse',\n          className,\n        );\n\n  return (\n    // rest 를 뒤에 두어 화면 쪽에서 aria-label 을 덮어쓸 수 있게 한다.\n    <Tag aria-label={label} className={cls} {...rest}>\n      {logo}\n      {variant === 'text' ? <span>{text}</span> : <span className=\"ban-txt\">{text}</span>}\n    </Tag>\n  );\n}\n"],"mappings":"AAwDI,SAUE,KAVF;AAvDJ,SAAS,UAAU;AAwCZ,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,EACR,IAAI,MAAM;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAElB,QAAM,OAAO,YAAY,mCAAU,GAAG;AAEtC,QAAM,OAAO,UACX;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA,YAAY,UAAU;AAAA,MACxB;AAAA,MAGA;AAAA,4BAAC,SAAI,KAAK,SAAS,KAAI,IAAG,WAAU,iBAAgB;AAAA,QACpD,oBAAC,UAAK,WAAU,WAAW,eAAI;AAAA;AAAA;AAAA,EACjC,IACE;AAEJ,QAAM,MACJ,YAAY,SACR;AAAA,IACE;AAAA;AAAA;AAAA,IAGA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,EACF,IACA;AAAA,IACE;AAAA;AAAA,IAEA,QAAQ;AAAA,IACR;AAAA,EACF;AAEN;AAAA;AAAA,IAEE,qBAAC,OAAI,cAAY,OAAO,WAAW,KAAM,GAAG,MACzC;AAAA;AAAA,MACA,YAAY,SAAS,oBAAC,UAAM,gBAAK,IAAU,oBAAC,UAAK,WAAU,WAAW,gBAAK;AAAA,OAC9E;AAAA;AAEJ;","names":[]}

package/dist/in-page-navigation/index.d.ts

@@ -0,0 +1,71 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+/**
+ * 콘텐츠 내 탐색(목차) — KRDS `krds-in-page-navigation-area`.
+ *
+ * 긴 상세 화면의 섹션 목차. 본문 섹션에 `id` 만 주면 스크롤 감시·부드러운 이동·초점 이동을
+ * 이 부품이 한다(킷 JS 를 싣지 않는다). 항목 이름은 **연결된 섹션 제목과 같은 문구**로 쓴다.
+ * 컨테이너에 {@link InPageNavigationLayout} 을 붙여야 목차 자리가 열린다 —
+ * 목차에만 붙이면 고정된 목차가 본문 위를 덮는다.
+ * 마크업 자리는 제목과 본문 **사이**다. 서비스 정보구조 탐색은 이것이 아니라 `ui/side-navigation` 이다.
+ * `action` 에 넣은 버튼은 **모바일에서 킷이 숨기므로** 유일한 실행 수단을 여기 두지 마라.
+ *
+ * @example
+ * <InPageNavigationLayout id="container">
+ *   <div className="inner">
+ *     <div className="contents">
+ *       <InPageNavigation
+ *         title="장애아동수당"
+ *         items={[
+ *           { id: 'sec-overview', label: '서비스 개요' },
+ *           { id: 'sec-detail', label: '서비스 상세' },
+ *         ]}
+ *       />
+ *       <section id="sec-overview"><h2>서비스 개요</h2>…</section>
+ *     </div>
+ *   </div>
+ * </InPageNavigationLayout>
+ *
+ * 자세히: docs/krds/09-부품-노트.md#페이지내탐색
+ */
+/** 목차 한 줄. `id` 는 본문 섹션 요소의 `id`(`#` 없이). */
+export type InPageNavigationItem = {
+    /** 이동 대상 섹션의 `id`. `href="#{id}"` 로 나간다. */
+    id: string;
+    /** 목록에 보일 글자. 연결된 섹션 제목과 같은 문구여야 한다. 길면 두 줄로 접힌다. */
+    label: ReactNode;
+};
+export type InPageNavigationProps = Omit<ComponentPropsWithRef<'div'>, 'children' | 'title'> & {
+    /** 목차 항목. 빈 배열이면 아무것도 그리지 않는다. 8개 안팎으로 줄인다. */
+    items: InPageNavigationItem[];
+    /** 머리말 위 작은 글자. 기본 「이 페이지의 구성」. `null` 을 주면 그리지 않는다. */
+    caption?: ReactNode;
+    /** 머리말 제목. 보통 현재 화면 이름. 제목 태그가 아니라 `<p>` 로 그린다. */
+    title?: ReactNode;
+    /** `<nav>` 의 접근 이름. 생략하면 `caption` 을 쓴다. */
+    navLabel?: string;
+    /** 목록 아래 실행 버튼. **모바일에서는 킷이 숨긴다.** */
+    action?: ReactNode;
+    /** 실행 버튼 아래 보조 문구. */
+    info?: ReactNode;
+    /** 활성 항목을 밖에서 정한다. 주면 스크롤 감시를 끄고 이 값만 따른다. */
+    activeId?: string;
+    /** 이동한 뒤 섹션 위에 남길 여백(px). 안 주면 마스트헤드 + 헤더 높이를 잰다. */
+    offsetTop?: number;
+};
+export declare function InPageNavigation({ items, caption, title, navLabel, action, info, activeId, offsetTop, className, ...rest }: InPageNavigationProps): import("react").JSX.Element | null;
+/**
+ * 목차가 있는 화면의 컨테이너 — 킷 `krds-in-page-navigation-type`.
+ *
+ * **목차가 아니라 컨테이너에 붙인다** — 이 클래스가 본문 오른쪽에 목차 자리를 파 준다.
+ * 안쪽은 `.inner`(LNB 가 같이 있으면 `.inner.in-between`) → `.contents` 순서다.
+ *
+ * @example
+ * <InPageNavigationLayout id="container">
+ *   <div className="inner in-between">
+ *     <SideNav … />
+ *     <div className="contents">…<InPageNavigation … />…</div>
+ *   </div>
+ * </InPageNavigationLayout>
+ */
+export declare function InPageNavigationLayout({ className, children, ...rest }: ComponentPropsWithRef<'div'>): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/in-page-navigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/in-page-navigation/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,qBAAqB,EAE1B,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,6CAA6C;AAC7C,MAAM,MAAM,oBAAoB,GAAG;IACjC,4CAA4C;IAC5C,EAAE,EAAE,MAAM,CAAC;IACX,qDAAqD;IACrD,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IAC7F,+CAA+C;IAC/C,KAAK,EAAE,oBAAoB,EAAE,CAAC;IAC9B,wDAAwD;IACxD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,mDAAmD;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAkCF,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAqB,EACrB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,GAAG,IAAI,EACR,EAAE,qBAAqB,sCAwHvB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,qBAAqB,CAAC,KAAK,CAAC,+BAM9B"}

package/dist/in-page-navigation/index.js

@@ -0,0 +1,137 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useCallback,
+  useEffect,
+  useState
+} from "react";
+import { cx } from "../lib/krds.js";
+function headerHeight() {
+  const masthead = document.getElementById("krds-masthead")?.clientHeight ?? 0;
+  const headerIn = document.querySelector("#krds-header .header-in")?.clientHeight ?? 0;
+  return masthead + headerIn;
+}
+function pickActiveId(ids) {
+  const found = ids.map((id) => ({ id, el: document.getElementById(id) })).filter((s) => s.el !== null);
+  if (found.length === 0) return void 0;
+  const y = window.scrollY;
+  if (y + window.innerHeight >= document.documentElement.scrollHeight - 1) {
+    return found[found.length - 1].id;
+  }
+  const guard = Math.ceil(window.innerHeight / 5);
+  let active = found[0].id;
+  for (const { id, el } of found) {
+    if (y >= el.getBoundingClientRect().top + y - guard) active = id;
+  }
+  return active;
+}
+function InPageNavigation({
+  items,
+  caption = "\uC774 \uD398\uC774\uC9C0\uC758 \uAD6C\uC131",
+  title,
+  navLabel,
+  action,
+  info,
+  activeId,
+  offsetTop,
+  className,
+  ...rest
+}) {
+  const [spyId, setSpyId] = useState(void 0);
+  const controlled = activeId !== void 0;
+  const active = controlled ? activeId : spyId;
+  const idKey = items.map((it) => it.id).join(" ");
+  useEffect(() => {
+    if (controlled) return;
+    const ids = idKey ? idKey.split(" ") : [];
+    if (ids.length === 0) return;
+    let frame = 0;
+    const update = () => {
+      frame = 0;
+      setSpyId(pickActiveId(ids));
+    };
+    const schedule = () => {
+      if (frame === 0) frame = window.requestAnimationFrame(update);
+    };
+    update();
+    window.addEventListener("scroll", schedule, { passive: true });
+    window.addEventListener("resize", schedule);
+    return () => {
+      if (frame !== 0) window.cancelAnimationFrame(frame);
+      window.removeEventListener("scroll", schedule);
+      window.removeEventListener("resize", schedule);
+    };
+  }, [controlled, idKey]);
+  const goToSection = useCallback(
+    (id) => {
+      const target = document.getElementById(id);
+      if (!target) return false;
+      const gap = offsetTop ?? headerHeight();
+      const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      window.scrollTo({
+        left: 0,
+        top: target.getBoundingClientRect().top + window.scrollY - gap,
+        behavior: reduced ? "auto" : "smooth"
+      });
+      const focusTarget = target.querySelector("h1, h2, h3, h4, h5, h6") ?? target;
+      focusTarget.setAttribute("tabindex", "-1");
+      focusTarget.focus({ preventScroll: true });
+      return true;
+    },
+    [offsetTop]
+  );
+  const handleClick = (event, id) => {
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+      return;
+    }
+    if (goToSection(id)) {
+      event.preventDefault();
+      if (!controlled) setSpyId(id);
+    }
+  };
+  if (items.length === 0) return null;
+  const hasHeader = caption != null || title != null;
+  return /* @__PURE__ */ jsxs("div", { className: cx("krds-in-page-navigation-area", className), ...rest, children: [
+    hasHeader && /* @__PURE__ */ jsxs("div", { className: "in-page-navigation-header", children: [
+      caption != null && /* @__PURE__ */ jsx("p", { className: "quick-caption", children: caption }),
+      title != null && /* @__PURE__ */ jsx("p", { className: "quick-title", children: title })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "nav",
+      {
+        className: "in-page-navigation-list",
+        "aria-label": navLabel ?? (typeof caption === "string" ? caption : "\uC774 \uD398\uC774\uC9C0\uC758 \uAD6C\uC131"),
+        children: /* @__PURE__ */ jsx("ul", { children: items.map((item) => {
+          const isActive = item.id === active;
+          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: `#${item.id}`,
+              className: isActive ? "active" : void 0,
+              "aria-current": isActive ? "true" : void 0,
+              onClick: (event) => handleClick(event, item.id),
+              children: item.label
+            }
+          ) }, item.id);
+        }) })
+      }
+    ),
+    (action != null || info != null) && // 767px 이하에서 킷이 이 블록을 통째로 `display:none` 한다. 유일한 실행 수단을 여기 두지 마라.
+    /* @__PURE__ */ jsxs("div", { className: "in-page-navigation-action", children: [
+      action,
+      info != null && /* @__PURE__ */ jsx("p", { className: "quick-info", children: info })
+    ] })
+  ] });
+}
+function InPageNavigationLayout({
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cx("krds-in-page-navigation-type", className), ...rest, children });
+}
+export {
+  InPageNavigation,
+  InPageNavigationLayout
+};
+//# sourceMappingURL=index.js.map

package/dist/in-page-navigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/in-page-navigation/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useCallback,\n  useEffect,\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-in-page-navigation-area`.\n *\n * 긴 상세 화면의 섹션 목차. 본문 섹션에 `id` 만 주면 스크롤 감시·부드러운 이동·초점 이동을\n * 이 부품이 한다(킷 JS 를 싣지 않는다). 항목 이름은 **연결된 섹션 제목과 같은 문구**로 쓴다.\n * 컨테이너에 {@link InPageNavigationLayout} 을 붙여야 목차 자리가 열린다 —\n * 목차에만 붙이면 고정된 목차가 본문 위를 덮는다.\n * 마크업 자리는 제목과 본문 **사이**다. 서비스 정보구조 탐색은 이것이 아니라 `ui/side-navigation` 이다.\n * `action` 에 넣은 버튼은 **모바일에서 킷이 숨기므로** 유일한 실행 수단을 여기 두지 마라.\n *\n * @example\n * <InPageNavigationLayout id=\"container\">\n *   <div className=\"inner\">\n *     <div className=\"contents\">\n *       <InPageNavigation\n *         title=\"장애아동수당\"\n *         items={[\n *           { id: 'sec-overview', label: '서비스 개요' },\n *           { id: 'sec-detail', label: '서비스 상세' },\n *         ]}\n *       />\n *       <section id=\"sec-overview\"><h2>서비스 개요</h2>…</section>\n *     </div>\n *   </div>\n * </InPageNavigationLayout>\n *\n * 자세히: docs/krds/09-부품-노트.md#페이지내탐색\n */\n\n/** 목차 한 줄. `id` 는 본문 섹션 요소의 `id`(`#` 없이). */\nexport type InPageNavigationItem = {\n  /** 이동 대상 섹션의 `id`. `href=\"#{id}\"` 로 나간다. */\n  id: string;\n  /** 목록에 보일 글자. 연결된 섹션 제목과 같은 문구여야 한다. 길면 두 줄로 접힌다. */\n  label: ReactNode;\n};\n\nexport type InPageNavigationProps = Omit<ComponentPropsWithRef<'div'>, 'children' | 'title'> & {\n  /** 목차 항목. 빈 배열이면 아무것도 그리지 않는다. 8개 안팎으로 줄인다. */\n  items: InPageNavigationItem[];\n  /** 머리말 위 작은 글자. 기본 「이 페이지의 구성」. `null` 을 주면 그리지 않는다. */\n  caption?: ReactNode;\n  /** 머리말 제목. 보통 현재 화면 이름. 제목 태그가 아니라 `<p>` 로 그린다. */\n  title?: ReactNode;\n  /** `<nav>` 의 접근 이름. 생략하면 `caption` 을 쓴다. */\n  navLabel?: string;\n  /** 목록 아래 실행 버튼. **모바일에서는 킷이 숨긴다.** */\n  action?: ReactNode;\n  /** 실행 버튼 아래 보조 문구. */\n  info?: ReactNode;\n  /** 활성 항목을 밖에서 정한다. 주면 스크롤 감시를 끄고 이 값만 따른다. */\n  activeId?: string;\n  /** 이동한 뒤 섹션 위에 남길 여백(px). 안 주면 마스트헤드 + 헤더 높이를 잰다. */\n  offsetTop?: number;\n};\n\n/** 고정 헤더 높이. 킷 JS `calculateHeaderHeight()` 와 같은 계산이다. */\nfunction headerHeight(): number {\n  const masthead = document.getElementById('krds-masthead')?.clientHeight ?? 0;\n  const headerIn =\n    document.querySelector<HTMLElement>('#krds-header .header-in')?.clientHeight ?? 0;\n  return masthead + headerIn;\n}\n\n/**\n * 지금 보고 있는 섹션을 고른다. 킷 JS `updateActiveSection()` 을 옮기되\n * 문서 기준 좌표로 재고, 섹션 사이 빈틈에서는 **지나온 마지막 섹션**을 고른다.\n */\nfunction pickActiveId(ids: string[]): string | undefined {\n  const found = ids\n    .map((id) => ({ id, el: document.getElementById(id) }))\n    .filter((s): s is { id: string; el: HTMLElement } => s.el !== null);\n  if (found.length === 0) return undefined;\n\n  const y = window.scrollY;\n  // 스크롤이 문서 끝에 닿으면 마지막 항목(짧은 마지막 섹션이 영영 활성화되지 못하는 것을 막는다).\n  if (y + window.innerHeight >= document.documentElement.scrollHeight - 1) {\n    return found[found.length - 1]!.id;\n  }\n\n  const guard = Math.ceil(window.innerHeight / 5); // 킷과 같은 「윈도우의 20%」\n  let active = found[0]!.id;\n  for (const { id, el } of found) {\n    if (y >= el.getBoundingClientRect().top + y - guard) active = id;\n  }\n  return active;\n}\n\nexport function InPageNavigation({\n  items,\n  caption = '이 페이지의 구성',\n  title,\n  navLabel,\n  action,\n  info,\n  activeId,\n  offsetTop,\n  className,\n  ...rest\n}: InPageNavigationProps) {\n  const [spyId, setSpyId] = useState<string | undefined>(undefined);\n  const controlled = activeId !== undefined;\n  const active = controlled ? activeId : spyId;\n\n  // 항목 id 를 문자열 하나로 굳혀 effect 의존성에 쓴다(배열이 매번 새로 만들어져도 다시 붙지 않게).\n  const idKey = items.map((it) => it.id).join(' ');\n\n  useEffect(() => {\n    if (controlled) return;\n    const ids = idKey ? idKey.split(' ') : [];\n    if (ids.length === 0) return;\n\n    let frame = 0;\n    const update = () => {\n      frame = 0;\n      setSpyId(pickActiveId(ids));\n    };\n    // 스크롤마다 레이아웃을 재는 계산이라 프레임당 한 번으로 묶는다.\n    const schedule = () => {\n      if (frame === 0) frame = window.requestAnimationFrame(update);\n    };\n\n    update();\n    window.addEventListener('scroll', schedule, { passive: true });\n    window.addEventListener('resize', schedule);\n    return () => {\n      if (frame !== 0) window.cancelAnimationFrame(frame);\n      window.removeEventListener('scroll', schedule);\n      window.removeEventListener('resize', schedule);\n    };\n  }, [controlled, idKey]);\n\n  const goToSection = useCallback(\n    (id: string): boolean => {\n      const target = document.getElementById(id);\n      if (!target) return false; // 대상이 없으면 브라우저 기본 앵커 이동에 맡긴다\n\n      const gap = offsetTop ?? headerHeight();\n      const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n      window.scrollTo({\n        left: 0,\n        top: target.getBoundingClientRect().top + window.scrollY - gap,\n        behavior: reduced ? 'auto' : 'smooth',\n      });\n\n      // 스크롤만 하고 초점을 두면 규격 위반이다(「스크롤과 함께 목적지 섹션으로 Focus 이벤트」).\n      // 킷은 `.sec-tit` 을 찾지만 그 클래스는 킷 CSS 에 없다 — 섹션의 첫 제목 태그를 쓴다.\n      const focusTarget = target.querySelector<HTMLElement>('h1, h2, h3, h4, h5, h6') ?? target;\n      focusTarget.setAttribute('tabindex', '-1');\n      focusTarget.focus({ preventScroll: true });\n      return true;\n    },\n    [offsetTop],\n  );\n\n  const handleClick = (event: ReactMouseEvent<HTMLAnchorElement>, id: string) => {\n    // 새 탭·새 창으로 여는 조작은 그대로 둔다(킷 JS 는 이것까지 막는다).\n    if (\n      event.defaultPrevented ||\n      event.button !== 0 ||\n      event.metaKey ||\n      event.ctrlKey ||\n      event.shiftKey ||\n      event.altKey\n    ) {\n      return;\n    }\n    if (goToSection(id)) {\n      event.preventDefault();\n      if (!controlled) setSpyId(id);\n    }\n  };\n\n  if (items.length === 0) return null;\n\n  const hasHeader = caption != null || title != null;\n\n  return (\n    <div className={cx('krds-in-page-navigation-area', className)} {...rest}>\n      {hasHeader && (\n        <div className=\"in-page-navigation-header\">\n          {caption != null && <p className=\"quick-caption\">{caption}</p>}\n          {/* 제목 태그가 아니라 `<p>` 다 — 본문 제목 계층을 흐리지 않으려는 킷 샘플 그대로. */}\n          {title != null && <p className=\"quick-title\">{title}</p>}\n        </div>\n      )}\n\n      <nav\n        className=\"in-page-navigation-list\"\n        aria-label={navLabel ?? (typeof caption === 'string' ? caption : '이 페이지의 구성')}\n      >\n        <ul>\n          {items.map((item) => {\n            const isActive = item.id === active;\n            return (\n              <li key={item.id}>\n                <a\n                  href={`#${item.id}`}\n                  className={isActive ? 'active' : undefined}\n                  aria-current={isActive ? 'true' : undefined}\n                  onClick={(event) => handleClick(event, item.id)}\n                >\n                  {item.label}\n                </a>\n              </li>\n            );\n          })}\n        </ul>\n      </nav>\n\n      {(action != null || info != null) && (\n        // 767px 이하에서 킷이 이 블록을 통째로 `display:none` 한다. 유일한 실행 수단을 여기 두지 마라.\n        <div className=\"in-page-navigation-action\">\n          {action}\n          {info != null && <p className=\"quick-info\">{info}</p>}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * 목차가 있는 화면의 컨테이너 — 킷 `krds-in-page-navigation-type`.\n *\n * **목차가 아니라 컨테이너에 붙인다** — 이 클래스가 본문 오른쪽에 목차 자리를 파 준다.\n * 안쪽은 `.inner`(LNB 가 같이 있으면 `.inner.in-between`) → `.contents` 순서다.\n *\n * @example\n * <InPageNavigationLayout id=\"container\">\n *   <div className=\"inner in-between\">\n *     <SideNav … />\n *     <div className=\"contents\">…<InPageNavigation … />…</div>\n *   </div>\n * </InPageNavigationLayout>\n */\nexport function InPageNavigationLayout({\n  className,\n  children,\n  ...rest\n}: ComponentPropsWithRef<'div'>) {\n  return (\n    <div className={cx('krds-in-page-navigation-type', className)} {...rest}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.ts

@@ -0,0 +1,57 @@
+/**
+ * KRDS(디지털정부서비스 UI/UX 가이드라인) React 부품.
+ *
+ * 두 갈래다.
+ *  1. **KRDS 부품** — 킷(`krds-uiux`)의 클래스를 그대로 쓰는 껍데기.
+ *     모양·색·크기는 전부 킷에서 오고, 이 층은 마크업 구조와 접근성 속성을 고정한다.
+ *  2. **보충 부품** — KRDS 가 다루지 않는 업무시스템(백오피스)용. KRDS 토큰으로 그린다.
+ *     KRDS 는 국민용 누리집이 대상이라 표 정렬·콤보박스·서랍·토스트 같은 것이 없다.
+ *
+ */
+export * from './lib/krds';
+export * from './button';
+export * from './field';
+export * from './text-input';
+export * from './textarea';
+export * from './select';
+export * from './checkbox';
+export * from './radio';
+export * from './file-upload';
+export * from './combobox';
+export * from './input-group';
+export * from './badge';
+export * from './tag';
+export * from './table';
+export * from './data-table';
+export * from './structured-list';
+export * from './text-list';
+export * from './critical-alert';
+export * from './alert';
+export * from './empty-state';
+export * from './skip-link';
+export * from './masthead';
+export * from './header';
+export * from './main-menu';
+export * from './breadcrumb';
+export * from './side-navigation';
+export * from './in-page-navigation';
+export * from './pagination';
+export * from './footer';
+export * from './identifier';
+export * from './accordion';
+export * from './disclosure';
+export * from './tab';
+export * from './modal';
+export * from './drawer';
+export * from './tooltip';
+export * from './context-menu';
+export * from './spinner';
+export * from './step-indicator';
+export * from './progress';
+export * from './skeleton';
+export * from './toast';
+export * from './avatar';
+export * from './separator';
+export * from './scroll-area';
+export * from './resize';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,cAAc,YAAY,CAAC;AAG3B,cAAc,UAAU,CAAC;AAGzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAG9B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAG9B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAG7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAG/B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AAGxB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC"}

package/dist/index.js

@@ -0,0 +1,47 @@
+export * from "./lib/krds.js";
+export * from "./button/index.js";
+export * from "./field/index.js";
+export * from "./text-input/index.js";
+export * from "./textarea/index.js";
+export * from "./select/index.js";
+export * from "./checkbox/index.js";
+export * from "./radio/index.js";
+export * from "./file-upload/index.js";
+export * from "./combobox/index.js";
+export * from "./input-group/index.js";
+export * from "./badge/index.js";
+export * from "./tag/index.js";
+export * from "./table/index.js";
+export * from "./data-table/index.js";
+export * from "./structured-list/index.js";
+export * from "./text-list/index.js";
+export * from "./critical-alert/index.js";
+export * from "./alert/index.js";
+export * from "./empty-state/index.js";
+export * from "./skip-link/index.js";
+export * from "./masthead/index.js";
+export * from "./header/index.js";
+export * from "./main-menu/index.js";
+export * from "./breadcrumb/index.js";
+export * from "./side-navigation/index.js";
+export * from "./in-page-navigation/index.js";
+export * from "./pagination/index.js";
+export * from "./footer/index.js";
+export * from "./identifier/index.js";
+export * from "./accordion/index.js";
+export * from "./disclosure/index.js";
+export * from "./tab/index.js";
+export * from "./modal/index.js";
+export * from "./drawer/index.js";
+export * from "./tooltip/index.js";
+export * from "./context-menu/index.js";
+export * from "./spinner/index.js";
+export * from "./step-indicator/index.js";
+export * from "./progress/index.js";
+export * from "./skeleton/index.js";
+export * from "./toast/index.js";
+export * from "./avatar/index.js";
+export * from "./separator/index.js";
+export * from "./scroll-area/index.js";
+export * from "./resize/index.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * KRDS(디지털정부서비스 UI/UX 가이드라인) React 부품.\n *\n * 두 갈래다.\n *  1. **KRDS 부품** — 킷(`krds-uiux`)의 클래스를 그대로 쓰는 껍데기.\n *     모양·색·크기는 전부 킷에서 오고, 이 층은 마크업 구조와 접근성 속성을 고정한다.\n *  2. **보충 부품** — KRDS 가 다루지 않는 업무시스템(백오피스)용. KRDS 토큰으로 그린다.\n *     KRDS 는 국민용 누리집이 대상이라 표 정렬·콤보박스·서랍·토스트 같은 것이 없다.\n *\n */\n\n/* ── 공통 타입 ─────────────────────────────────────────────── */\nexport * from './lib/krds';\n\n/* ── 액션 ─────────────────────────────────────────────────── */\nexport * from './button';\n\n/* ── 폼 ───────────────────────────────────────────────────── */\nexport * from './field';\nexport * from './text-input';\nexport * from './textarea';\nexport * from './select';\nexport * from './checkbox';\nexport * from './radio';\nexport * from './file-upload';\nexport * from './combobox';\nexport * from './input-group';\n\n/* ── 표현 ─────────────────────────────────────────────────── */\nexport * from './badge';\nexport * from './tag';\nexport * from './table';\nexport * from './data-table';\nexport * from './structured-list';\nexport * from './text-list';\nexport * from './critical-alert';\nexport * from './alert';\nexport * from './empty-state';\n\n/* ── 탐색 ─────────────────────────────────────────────────── */\nexport * from './skip-link';\nexport * from './masthead';\nexport * from './header';\nexport * from './main-menu';\nexport * from './breadcrumb';\nexport * from './side-navigation';\nexport * from './in-page-navigation';\nexport * from './pagination';\nexport * from './footer';\nexport * from './identifier';\n\n/* ── 열고 닫기 ─────────────────────────────────────────────── */\nexport * from './accordion';\nexport * from './disclosure';\nexport * from './tab';\nexport * from './modal';\nexport * from './drawer';\nexport * from './tooltip';\nexport * from './context-menu';\n\n/* ── 피드백 ───────────────────────────────────────────────── */\nexport * from './spinner';\nexport * from './step-indicator';\nexport * from './progress';\nexport * from './skeleton';\nexport * from './toast';\n\n/* ── 그 밖 ────────────────────────────────────────────────── */\nexport * from './avatar';\nexport * from './separator';\nexport * from './scroll-area';\nexport * from './resize';\n"],"mappings":"AAYA,cAAc;AAGd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/input-group/index.d.ts

@@ -0,0 +1,66 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { type KrdsFieldSize } from '../lib/krds';
+export type InputGroupProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+    /** 묶음 전체의 크기. 기본 medium(48px). **자식이 저마다 적지 않고 여기서 한 번만 정한다.** */
+    size?: KrdsFieldSize;
+    /** 세로 정렬. 기본 `center` — 자식이 레이블까지 달고 있으면 `end` 로 밑선을 맞춘다. */
+    align?: 'center' | 'end';
+    /** 간격을 16px 에서 8px 로 좁힌다. 입력칸과 버튼을 한 덩어리처럼 보이게 할 때. */
+    tight?: boolean;
+    children?: ReactNode;
+};
+/**
+ * `<div class="input-group">` — 컨트롤 하나와 그에 딸린 버튼·기호를 한 줄로 묶는다.
+ * `size` 를 하나 바꾸면 입력칸·버튼이 함께 움직인다.
+ *
+ * **`className="row"` 안에서는 세로로 쌓인다** — 킷에 그런 규칙이 있다.
+ */
+export declare function InputGroup({ size, align, tight, className, children, ...rest }: InputGroupProps): import("react").JSX.Element;
+export type InputGroupItemProps = ComponentPropsWithRef<'div'> & {
+    /** 안쪽 자식에 내려보낸다. 보통 {@link InputGroup} 이 알아서 넣어 준다. */
+    size?: KrdsFieldSize;
+    /** 남는 폭을 차지한다. 기본 true — 이 상자에 넣는 것이 대개 입력칸이라서다. */
+    grow?: boolean;
+};
+/**
+ * 늘어나는 칸. **입력칸은 이 상자로 감싼다** — 감싸지 않으면 기준 폭이 컨테이너 전체가 되어
+ * 옆 버튼을 찌그러뜨린다. 늘어나지 않아야 하면 `grow={false}`.
+ */
+export declare function InputGroupItem({ size, grow, className, children, ...rest }: InputGroupItemProps): import("react").JSX.Element;
+export type InputGroupTextProps = ComponentPropsWithRef<'span'> & {
+    /** 보통 {@link InputGroup} 이 넣어 준다. 기본 medium(48px). */
+    size?: KrdsFieldSize;
+};
+/**
+ * 입력칸에 붙는 글자 — 접두사(`https://`), 단위(`원`·`건`), 구분 기호(`~`).
+ * 킷에 클래스가 없어 보충했다. 입력칸과 같은 높이로 서서 밑선이 맞는다.
+ *
+ * 「원」처럼 **뜻이 있는 단위는 읽혀야 하고**, `~` 처럼 시각적 기호는 `aria-hidden` 을 직접 붙여
+ * 소리에서 뺀다 — 어느 쪽인지는 부품이 판단할 수 없어 기본값을 두지 않았다.
+ */
+export declare function InputGroupText({ size, className, children, ...rest }: InputGroupTextProps): import("react").JSX.Element;
+/** 기간 입력이 쓰는 크기. 킷에 구분 기호의 xlarge 규칙이 없어 덜어냈다. */
+export type InputGroupRangeSize = Exclude<KrdsFieldSize, 'xlarge'>;
+export type InputGroupRangeProps = Omit<ComponentPropsWithRef<'ul'>, 'children'> & {
+    /** 기본 medium(48px). 두 칸과 가운데 기호에 함께 내려간다. */
+    size?: InputGroupRangeSize;
+    /** 시작 칸. 레이블까지 갖춘 필드를 그대로 넣어도 된다. */
+    from: ReactNode;
+    /** 끝 칸. */
+    to: ReactNode;
+    /** 가운데 구분 기호. 기본 `-`. 장식이라 소리에서는 빠진다. */
+    separator?: ReactNode;
+    /** 킷 달력 스크립트가 잡는 손잡이 클래스(`set`)를 붙인다. 킷 달력을 물릴 때만 켠다. */
+    set?: boolean;
+};
+/**
+ * 기간 입력 — 킷 `input-group range`. 두 칸이 폭을 반씩 나눠 갖고 입력칸 밑선이 맞는다.
+ *
+ * @example
+ * <InputGroupRange
+ *   from={<TextField id="from" label="시작일" type="date" />}
+ *   to={<TextField id="to" label="종료일" type="date" />}
+ * />
+ */
+export declare function InputGroupRange({ size, from, to, separator, set, className, ...rest }: InputGroupRangeProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/input-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/input-group/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAM,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AA6CrD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7E,kEAAkE;IAClE,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACzB,uDAAuD;IACvD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAe,EACf,KAAgB,EAChB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,eAAe,+BASjB;AAID,MAAM,MAAM,mBAAmB,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG;IAC/D,uDAAuD;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAe,EACf,IAAW,EACX,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,mBAAmB,+BAMrB;AAYD,MAAM,MAAM,mBAAmB,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG;IAChE,sDAAsD;IACtD,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAe,EACf,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,mBAAmB,+BAarB;AAID,kDAAkD;AAClD,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;AAEnE,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,GAAG;IACjF,6CAA6C;IAC7C,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,qCAAqC;IACrC,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW;IACX,EAAE,EAAE,SAAS,CAAC;IACd,yCAAyC;IACzC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,yDAAyD;IACzD,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAe,EACf,IAAI,EACJ,EAAE,EACF,SAAe,EACf,GAAG,EACH,SAAS,EACT,GAAG,IAAI,EACR,EAAE,oBAAoB,+BAWtB"}

package/dist/input-group/index.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, Fragment, isValidElement } from "react";
+import { cx } from "../lib/krds.js";
+function withSize(children, size) {
+  return Children.map(children, (child) => {
+    if (!isValidElement(child)) return child;
+    if (typeof child.type === "string" || child.type === Fragment) return child;
+    const props = child.props;
+    if (props.size !== void 0) return child;
+    return cloneElement(child, { size });
+  });
+}
+function InputGroup({
+  size = "medium",
+  align = "center",
+  tight,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx("input-group", align === "end" && "items-end", tight && "gap-2", className),
+      ...rest,
+      children: withSize(children, size)
+    }
+  );
+}
+function InputGroupItem({
+  size = "medium",
+  grow = true,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cx(grow ? "min-w-0 flex-1" : "shrink-0", className), ...rest, children: withSize(children, size) });
+}
+const ADDON_BOX = {
+  small: "h-10 text-label-sm",
+  medium: "h-12 text-label-md",
+  large: "h-14 text-label-lg",
+  xlarge: "h-20 text-heading-md"
+};
+function InputGroupText({
+  size = "medium",
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cx(
+        "inline-flex shrink-0 items-center whitespace-nowrap text-fg-subtle",
+        ADDON_BOX[size],
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+function InputGroupRange({
+  size = "medium",
+  from,
+  to,
+  separator = "-",
+  set,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("ul", { className: cx("input-group range", set && "set", className), ...rest, children: [
+    /* @__PURE__ */ jsx("li", { children: withSize(from, size) }),
+    /* @__PURE__ */ jsx("li", { className: cx("mark", size), "aria-hidden": "true", children: separator }),
+    /* @__PURE__ */ jsx("li", { children: withSize(to, size) })
+  ] });
+}
+export {
+  InputGroup,
+  InputGroupItem,
+  InputGroupRange,
+  InputGroupText
+};
+//# sourceMappingURL=index.js.map

package/dist/input-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/input-group/index.tsx"],"sourcesContent":["import { Children, cloneElement, Fragment, isValidElement } from 'react';\nimport type { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';\nimport { cx, type KrdsFieldSize } from '../lib/krds';\n\n/**\n * 입력 묶음 — 킷 `input-group`.\n *\n * 컨트롤 하나와 그에 딸린 버튼·기호를 한 줄로 묶고 **크기를 한 번만 정해 자식에게 내려보낸다.**\n * 그래서 입력칸과 옆 버튼의 높이가 어긋나지 않는다(기본 medium · 48px).\n * 레이블까지 갖춘 필드 여럿을 가로로 늘어놓는 것은 `ui/field` 의 `FieldRow` 다.\n * 기간(시작~끝)은 {@link InputGroupRange} 를 쓴다.\n * 크기는 `TextInput`·`Select`·`Button` 같은 **부품**에만 내려간다 — 맨 `<input>` 은 그대로 남는다.\n *\n * @example\n * <InputGroup size=\"medium\">\n *   <InputGroupItem>\n *     <TextField id=\"q\" label=\"검색어\" hideLabel placeholder=\"검색어를 입력하세요\" />\n *   </InputGroupItem>\n *   <Button variant=\"primary\" type=\"submit\">검색</Button>\n * </InputGroup>\n * <InputGroup>\n *   <InputGroupItem><TextInput id=\"amount\" inputMode=\"numeric\" /></InputGroupItem>\n *   <InputGroupText>원</InputGroupText>\n * </InputGroup>\n *\n * 자세히: docs/krds/09-부품-노트.md#입력묶음\n */\n\n/* ────────────────────────────── 크기 전파 ────────────────────────────── */\n\n/**\n * 자식 부품에 `size` 를 내려보낸다. DOM 태그와 Fragment 에는 넘기지 않고(HTML `size` 속성과 뜻이 다르다),\n * 자식이 이미 `size` 를 갖고 있으면 그대로 둔다.\n */\nfunction withSize(children: ReactNode, size: KrdsFieldSize): ReactNode {\n  return Children.map(children, (child) => {\n    if (!isValidElement(child)) return child;\n    if (typeof child.type === 'string' || child.type === Fragment) return child;\n    // React 19 타입에서 `props` 는 unknown 이라 좁혀서 본다.\n    const props = child.props as { size?: unknown };\n    if (props.size !== undefined) return child;\n    return cloneElement(child as ReactElement<{ size?: KrdsFieldSize }>, { size });\n  });\n}\n\n/* ────────────────────────────── 기본형 ────────────────────────────── */\n\nexport type InputGroupProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {\n  /** 묶음 전체의 크기. 기본 medium(48px). **자식이 저마다 적지 않고 여기서 한 번만 정한다.** */\n  size?: KrdsFieldSize;\n  /** 세로 정렬. 기본 `center` — 자식이 레이블까지 달고 있으면 `end` 로 밑선을 맞춘다. */\n  align?: 'center' | 'end';\n  /** 간격을 16px 에서 8px 로 좁힌다. 입력칸과 버튼을 한 덩어리처럼 보이게 할 때. */\n  tight?: boolean;\n  children?: ReactNode;\n};\n\n/**\n * `<div class=\"input-group\">` — 컨트롤 하나와 그에 딸린 버튼·기호를 한 줄로 묶는다.\n * `size` 를 하나 바꾸면 입력칸·버튼이 함께 움직인다.\n *\n * **`className=\"row\"` 안에서는 세로로 쌓인다** — 킷에 그런 규칙이 있다.\n */\nexport function InputGroup({\n  size = 'medium',\n  align = 'center',\n  tight,\n  className,\n  children,\n  ...rest\n}: InputGroupProps) {\n  return (\n    <div\n      className={cx('input-group', align === 'end' && 'items-end', tight && 'gap-2', className)}\n      {...rest}\n    >\n      {withSize(children, size)}\n    </div>\n  );\n}\n\n/* ────────────────────────────── 폭을 차지하는 칸 ────────────────────────────── */\n\nexport type InputGroupItemProps = ComponentPropsWithRef<'div'> & {\n  /** 안쪽 자식에 내려보낸다. 보통 {@link InputGroup} 이 알아서 넣어 준다. */\n  size?: KrdsFieldSize;\n  /** 남는 폭을 차지한다. 기본 true — 이 상자에 넣는 것이 대개 입력칸이라서다. */\n  grow?: boolean;\n};\n\n/**\n * 늘어나는 칸. **입력칸은 이 상자로 감싼다** — 감싸지 않으면 기준 폭이 컨테이너 전체가 되어\n * 옆 버튼을 찌그러뜨린다. 늘어나지 않아야 하면 `grow={false}`.\n */\nexport function InputGroupItem({\n  size = 'medium',\n  grow = true,\n  className,\n  children,\n  ...rest\n}: InputGroupItemProps) {\n  return (\n    <div className={cx(grow ? 'min-w-0 flex-1' : 'shrink-0', className)} {...rest}>\n      {withSize(children, size)}\n    </div>\n  );\n}\n\n/* ────────────────────────────── 접두사·접미사 ────────────────────────────── */\n\n/** 크기별 상자 높이와 글자 크기. 킷 입력칸 토큰과 같은 값이다(40 / 48 / 56 / 80px). */\nconst ADDON_BOX: Record<KrdsFieldSize, string> = {\n  small: 'h-10 text-label-sm',\n  medium: 'h-12 text-label-md',\n  large: 'h-14 text-label-lg',\n  xlarge: 'h-20 text-heading-md',\n};\n\nexport type InputGroupTextProps = ComponentPropsWithRef<'span'> & {\n  /** 보통 {@link InputGroup} 이 넣어 준다. 기본 medium(48px). */\n  size?: KrdsFieldSize;\n};\n\n/**\n * 입력칸에 붙는 글자 — 접두사(`https://`), 단위(`원`·`건`), 구분 기호(`~`).\n * 킷에 클래스가 없어 보충했다. 입력칸과 같은 높이로 서서 밑선이 맞는다.\n *\n * 「원」처럼 **뜻이 있는 단위는 읽혀야 하고**, `~` 처럼 시각적 기호는 `aria-hidden` 을 직접 붙여\n * 소리에서 뺀다 — 어느 쪽인지는 부품이 판단할 수 없어 기본값을 두지 않았다.\n */\nexport function InputGroupText({\n  size = 'medium',\n  className,\n  children,\n  ...rest\n}: InputGroupTextProps) {\n  return (\n    <span\n      className={cx(\n        'inline-flex shrink-0 items-center whitespace-nowrap text-fg-subtle',\n        ADDON_BOX[size],\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  );\n}\n\n/* ────────────────────────────── 기간 입력 ────────────────────────────── */\n\n/** 기간 입력이 쓰는 크기. 킷에 구분 기호의 xlarge 규칙이 없어 덜어냈다. */\nexport type InputGroupRangeSize = Exclude<KrdsFieldSize, 'xlarge'>;\n\nexport type InputGroupRangeProps = Omit<ComponentPropsWithRef<'ul'>, 'children'> & {\n  /** 기본 medium(48px). 두 칸과 가운데 기호에 함께 내려간다. */\n  size?: InputGroupRangeSize;\n  /** 시작 칸. 레이블까지 갖춘 필드를 그대로 넣어도 된다. */\n  from: ReactNode;\n  /** 끝 칸. */\n  to: ReactNode;\n  /** 가운데 구분 기호. 기본 `-`. 장식이라 소리에서는 빠진다. */\n  separator?: ReactNode;\n  /** 킷 달력 스크립트가 잡는 손잡이 클래스(`set`)를 붙인다. 킷 달력을 물릴 때만 켠다. */\n  set?: boolean;\n};\n\n/**\n * 기간 입력 — 킷 `input-group range`. 두 칸이 폭을 반씩 나눠 갖고 입력칸 밑선이 맞는다.\n *\n * @example\n * <InputGroupRange\n *   from={<TextField id=\"from\" label=\"시작일\" type=\"date\" />}\n *   to={<TextField id=\"to\" label=\"종료일\" type=\"date\" />}\n * />\n */\nexport function InputGroupRange({\n  size = 'medium',\n  from,\n  to,\n  separator = '-',\n  set,\n  className,\n  ...rest\n}: InputGroupRangeProps) {\n  return (\n    <ul className={cx('input-group range', set && 'set', className)} {...rest}>\n      <li>{withSize(from, size)}</li>\n      {/* 크기 클래스를 반드시 붙인다 — 빼면 킷 기본 56px 이라 medium 입력 사이에서 혼자 커진다. */}\n      <li className={cx('mark', size)} aria-hidden=\"true\">\n        {separator}\n      </li>\n      <li>{withSize(to, size)}</li>\n    </ul>\n  );\n}\n"],"mappings":"AAwEI,cAmHA,YAnHA;AAxEJ,SAAS,UAAU,cAAc,UAAU,sBAAsB;AAEjE,SAAS,UAA8B;AAgCvC,SAAS,SAAS,UAAqB,MAAgC;AACrE,SAAO,SAAS,IAAI,UAAU,CAAC,UAAU;AACvC,QAAI,CAAC,eAAe,KAAK,EAAG,QAAO;AACnC,QAAI,OAAO,MAAM,SAAS,YAAY,MAAM,SAAS,SAAU,QAAO;AAEtE,UAAM,QAAQ,MAAM;AACpB,QAAI,MAAM,SAAS,OAAW,QAAO;AACrC,WAAO,aAAa,OAAiD,EAAE,KAAK,CAAC;AAAA,EAC/E,CAAC;AACH;AAoBO,SAAS,WAAW;AAAA,EACzB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,eAAe,UAAU,SAAS,aAAa,SAAS,SAAS,SAAS;AAAA,MACvF,GAAG;AAAA,MAEH,mBAAS,UAAU,IAAI;AAAA;AAAA,EAC1B;AAEJ;AAeO,SAAS,eAAe;AAAA,EAC7B,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,SACE,oBAAC,SAAI,WAAW,GAAG,OAAO,mBAAmB,YAAY,SAAS,GAAI,GAAG,MACtE,mBAAS,UAAU,IAAI,GAC1B;AAEJ;AAKA,MAAM,YAA2C;AAAA,EAC/C,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;AAcO,SAAS,eAAe;AAAA,EAC7B,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,UAAU,IAAI;AAAA,QACd;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AA6BO,SAAS,gBAAgB;AAAA,EAC9B,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,SACE,qBAAC,QAAG,WAAW,GAAG,qBAAqB,OAAO,OAAO,SAAS,GAAI,GAAG,MACnE;AAAA,wBAAC,QAAI,mBAAS,MAAM,IAAI,GAAE;AAAA,IAE1B,oBAAC,QAAG,WAAW,GAAG,QAAQ,IAAI,GAAG,eAAY,QAC1C,qBACH;AAAA,IACA,oBAAC,QAAI,mBAAS,IAAI,IAAI,GAAE;AAAA,KAC1B;AAEJ;","names":[]}

package/dist/lib/krds.d.ts

@@ -0,0 +1,45 @@
+/**
+ * KRDS 공통 타입과 도우미.
+ *
+ * 여기 있는 값은 전부 킷(`public/krds/krds.min.css`)에서 실측한 것이다. 지어낸 값이 없다.
+ */
+/**
+ * 크기.
+ *
+ * ★ 버튼과 입력칸이 **같은 이름에 같은 높이**다. 실측(1rem = 10px):
+ *
+ * | 이름    | 높이 | 버튼 | 입력·셀렉트 |
+ * |---------|-----|------|------------|
+ * | xsmall  | 32  | ○    | —          |
+ * | small   | 40  | ○    | ○          |
+ * | medium  | 48  | ○    | ○          |
+ * | large   | 56  | ○    | ○          |
+ * | xlarge  | 64  | ○    | 80(예외)   |
+ *
+ * 그래서 한 줄에 놓을 버튼과 입력칸에는 **같은 size 를 준다.**
+ * 예전에 입력칸에 크기를 안 줘서 킷 기본값 large(56)로 렌더되고 옆 버튼은 small(40)이라
+ * 16px 이 어긋났다 — 부품에서 기본값을 명시해 이 실수를 구조적으로 막는다.
+ */
+export type KrdsSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+/** 폼 요소가 실제로 지원하는 크기(킷에 xsmall 규칙이 없다). */
+export type KrdsFieldSize = Exclude<KrdsSize, 'xsmall'>;
+/**
+ * 의미 색상. 킷의 배지·태그·알림이 공통으로 쓰는 이름이다.
+ */
+export type KrdsTone = 'primary' | 'secondary' | 'gray' | 'point' | 'danger' | 'warning' | 'success' | 'information';
+/** 폼 필드 상태. 킷 클래스는 `.is-error` · `.is-success` · `.is-information`. */
+export type KrdsFieldState = 'error' | 'success' | 'information';
+/**
+ * 킷이 제공하는 아이콘 이름(`ico-` 접두사를 뺀 것).
+ * `<i className="svg-icon ico-sch" />` 처럼 쓴다.
+ *
+ * 킷의 아이콘 파일은 `public/krds/img/component/icon/ico_*.svg` 에 있고 CSS 가 mask 로 물린다.
+ * **여기 없는 이름을 쓰면 검은 네모가 나온다** — 그래서 타입으로 좁혀 둔다.
+ * 아래 목록은 킷 CSS 에서 `\\.ico-([a-z0-9-]+)` 로 뽑은 68종 전부다. 킷을 올릴 때 다시 뽑는다.
+ */
+export type KrdsIcon = 'all' | 'angle' | 'blog' | 'bread-home' | 'cal-move' | 'calendar' | 'call' | 'checkbox' | 'complete-fill' | 'del' | 'delete-fill' | 'down' | 'ellipsis' | 'email' | 'error-fill' | 'facebook' | 'faq' | 'file' | 'filter' | 'flag' | 'fold' | 'func' | 'global' | 'go' | 'go-top' | 'help' | 'information-fill' | 'instagram' | 'invalid' | 'join' | 'like' | 'link' | 'log' | 'login-go' | 'login-type01' | 'login-type02' | 'login-type03' | 'login-type04' | 'login-type05' | 'login-type06' | 'logout' | 'modal-close' | 'more' | 'my' | 'page-next' | 'plus' | 'popup-close' | 'print' | 'pw-visible' | 'pw-visible-on' | 'refresh' | 'reset' | 'sch' | 'sch-plus' | 'scrap' | 'search' | 'setting' | 'share' | 'sns-x' | 'success-fill' | 'swiper-play' | 'swiper-stop' | 'toggle' | 'tooltip' | 'upload' | 'urgent-danger' | 'view-mode' | 'youtube';
+/** 클래스 이름을 합친다. falsy 는 버린다. */
+export declare function cx(...parts: Array<string | false | null | undefined>): string;
+/** 상태 → 킷 클래스. */
+export declare function stateClass(state?: KrdsFieldState): string | undefined;
+//# sourceMappingURL=krds.d.ts.map

package/dist/lib/krds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"krds.d.ts","sourceRoot":"","sources":["../../src/lib/krds.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE1E,2CAA2C;AAC3C,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAExD;;GAEG;AACH,MAAM,MAAM,QAAQ,GAChB,SAAS,GACT,WAAW,GACX,MAAM,GACN,OAAO,GACP,QAAQ,GACR,SAAS,GACT,SAAS,GACT,aAAa,CAAC;AAElB,uEAAuE;AACvE,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,aAAa,CAAC;AAEjE;;;;;;;GAOG;AACH,MAAM,MAAM,QAAQ,GAChB,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,UAAU,GACjE,MAAM,GAAG,UAAU,GAAG,eAAe,GAAG,KAAK,GAAG,aAAa,GAAG,MAAM,GACtE,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,UAAU,GAAG,KAAK,GAAG,MAAM,GACjE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,GACrD,QAAQ,GAAG,MAAM,GAAG,kBAAkB,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,GACzE,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,UAAU,GAAG,cAAc,GAAG,cAAc,GACtE,cAAc,GAAG,cAAc,GAAG,cAAc,GAAG,cAAc,GAAG,QAAQ,GAAG,aAAa,GAC5F,MAAM,GAAG,IAAI,GAAG,WAAW,GAAG,MAAM,GAAG,aAAa,GAAG,OAAO,GAC9D,YAAY,GAAG,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,UAAU,GACzE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,cAAc,GACnE,aAAa,GAAG,aAAa,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,eAAe,GACjF,WAAW,GAAG,SAAS,CAAC;AAE5B,gCAAgC;AAChC,wBAAgB,EAAE,CAAC,GAAG,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,MAAM,CAE7E;AAED,kBAAkB;AAClB,wBAAgB,UAAU,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,MAAM,GAAG,SAAS,CAErE"}

package/dist/lib/krds.js

@@ -0,0 +1,11 @@
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function stateClass(state) {
+  return state && `is-${state}`;
+}
+export {
+  cx,
+  stateClass
+};
+//# sourceMappingURL=krds.js.map