moru-krds-react 0.1.0

package/dist/checkbox/index.d.ts

@@ -0,0 +1,97 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { type KrdsSize } from '../lib/krds';
+/**
+ * 체크박스 — KRDS `krds-form-check` · `krds-check-area` · `krds-form-chip`.
+ *
+ * `id` 가 필수다 — 킷이 `input ~ label` 형제 선택자로 네모를 그려서 `<label for>` 로만 이을 수 있다.
+ * **`<label>` 안에 `<input>` 을 넣으면 네모가 아예 안 그려진다.**
+ * 여러 개는 `CheckArea`(배치만) 나 `CheckboxGroup`(fieldset + legend + 도움말)으로 묶는다.
+ * 한 값만 고르는 자리는 `ui/radio`, 검색 필터처럼 알약 꼴이 필요하면 `CheckboxChip` 이다.
+ *
+ * @example
+ * <CheckboxGroup legend="수신 동의" hint="언제든 해지할 수 있습니다.">
+ *   <Checkbox id="agree-sms" name="agree" value="sms" label="문자" />
+ *   <Checkbox id="agree-mail" name="agree" value="mail" label="이메일" description="주 1회 발송" />
+ * </CheckboxGroup>
+ * <Checkbox id="agree-all" label="전체 선택" indeterminate={some} />
+ *
+ * 자세히: docs/krds/09-부품-노트.md#체크박스
+ */
+/** 체크박스 크기. 킷에 있는 둘뿐이다 — 네모 20px / 24px, 글자 17px / 19px. */
+export type CheckboxSize = Extract<KrdsSize, 'medium' | 'large'>;
+/** 칩 크기. 킷에 있는 셋. 높이가 버튼·입력칸과 같은 눈금이다. */
+export type CheckboxChipSize = Extract<KrdsSize, 'small' | 'medium' | 'large'>;
+type CheckboxBaseProps = {
+    /** `<label for>` 로 이을 id. 필수다. 목록에서는 값에서 만든다(`agree-${item.code}`). */
+    id: string;
+    /** 레이블. `for`/`id` 로 이어져 레이블 클릭으로도 토글된다. */
+    label: ReactNode;
+    /** `.krds-form-check` 감싸개에 붙는다. `...rest` 는 `<input>` 으로 흘린다. */
+    className?: string;
+};
+export type CheckboxProps = Omit<ComponentPropsWithRef<'input'>, 'type' | 'size' | 'children' | 'className' | 'id'> & CheckboxBaseProps & {
+    size?: CheckboxSize;
+    /** 부가 설명. 레이블 바로 다음에 놓여 들여쓰기가 걸린다. */
+    description?: ReactNode;
+    /** 중간 상태. 「전체 선택」에서 하위 일부만 선택되었을 때 켠다. */
+    indeterminate?: boolean;
+};
+export declare function Checkbox({ id, label, description, size, indeterminate, className, ref, ...rest }: CheckboxProps): import("react").JSX.Element;
+/**
+ * 칩 꼴 체크박스 — 킷 `krds-form-chip`. 네모 대신 테두리 알약을 눌러 고른다.
+ *
+ * 검색 필터처럼 여러 값을 한 줄에 늘어놓을 때 쓴다. 높이가 버튼·입력칸과 같은 눈금이다.
+ *
+ * @example
+ * <CheckArea layout="inline">
+ *   <CheckboxChip id="f-open" label="공개" />
+ *   <CheckboxChip id="f-closed" label="비공개" />
+ * </CheckArea>
+ */
+export type CheckboxChipProps = Omit<ComponentPropsWithRef<'input'>, 'type' | 'size' | 'children' | 'className' | 'id'> & CheckboxBaseProps & {
+    size?: CheckboxChipSize;
+};
+export declare function CheckboxChip({ id, label, size, className, ...rest }: CheckboxChipProps): import("react").JSX.Element;
+/**
+ * 배치. `column` 세로(20px) · `row` 가로(20px) · `inline` 가로 좁은 간격(12px).
+ * `inline` 은 칩처럼 폭이 넓은 항목을 한 줄에 여럿 놓을 때만 쓴다.
+ */
+export type CheckAreaLayout = 'column' | 'row' | 'inline';
+export type CheckAreaProps = ComponentPropsWithRef<'div'> & {
+    /** 배치. 기본 `column` — 규격이 수직 배치를 요구한다. */
+    layout?: CheckAreaLayout;
+};
+/**
+ * 체크박스 묶음 영역 — 킷 `krds-check-area`. 배치만 맡는다.
+ *
+ * 기본이 세로다(규격). 가로가 필요하면 `layout="row"` 를 명시한다.
+ * 그룹 이름·도움말·오류까지 필요하면 `CheckboxGroup` 을 쓴다.
+ */
+export declare function CheckArea({ layout, className, children, ...rest }: CheckAreaProps): import("react").JSX.Element;
+export type CheckboxGroupProps = Omit<ComponentPropsWithRef<'fieldset'>, 'children' | 'title'> & {
+    /** 묶음의 접근 가능한 이름(`<legend>`). 킷이 화면에서 감추고 스크린리더에만 남긴다. */
+    legend: string;
+    /** 보이는 제목. 생략하면 `legend` 를 쓰고, `null` 을 주면 그리지 않는다. */
+    title?: ReactNode | null;
+    /** 도움말. 킷이 회색 정보 아이콘을 앞에 붙인다. */
+    hint?: ReactNode;
+    /** 오류 메시지. 붉은 글자 + 오류 아이콘. 색만으로 알리지 말고 반드시 문구를 넣는다. */
+    error?: ReactNode;
+    /** 배치. 기본 `column`. */
+    layout?: CheckAreaLayout;
+    children?: ReactNode;
+};
+/**
+ * 체크박스 묶음 — `<fieldset class="form-group">` + `krds-check-area`.
+ *
+ * 그룹 이름(`legend`) · 보이는 소제목 · 도움말 · 오류 메시지를 한 골격으로 묶는다.
+ * `id` 를 주면 도움말·오류가 `aria-describedby` 로 이어진다.
+ *
+ * @example
+ * <CheckboxGroup id="agree" legend="수신 동의" hint="언제든 해지할 수 있습니다.">
+ *   <Checkbox id="agree-sms" label="문자" />
+ * </CheckboxGroup>
+ */
+export declare function CheckboxGroup({ legend, title, hint, error, layout, id, className, children, ...rest }: CheckboxGroupProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/checkbox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAO,MAAM,OAAO,CAAC;AACnE,OAAO,EAAM,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEhD;;;;;;;;;;;;;;;;GAgBG;AAEH,4DAA4D;AAC5D,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,OAAO,CAAC,CAAC;AAEjE,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,QAAQ,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAC;AA6B/E,KAAK,iBAAiB,GAAG;IACvB,uEAAuE;IACvE,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,KAAK,EAAE,SAAS,CAAC;IACjB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,qBAAqB,CAAC,OAAO,CAAC,EAC9B,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,IAAI,CAClD,GACC,iBAAiB,GAAG;IAClB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,sCAAsC;IACtC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEJ,wBAAgB,QAAQ,CAAC,EACvB,EAAE,EACF,KAAK,EACL,WAAW,EACX,IAAe,EACf,aAAa,EACb,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,+BAqBf;AAED;;;;;;;;;;GAUG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,qBAAqB,CAAC,OAAO,CAAC,EAC9B,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,IAAI,CAClD,GACC,iBAAiB,GAAG;IAClB,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEJ,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,KAAK,EACL,IAAe,EACf,SAAS,EACT,GAAG,IAAI,EACR,EAAE,iBAAiB,+BASnB;AAED;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE1D,MAAM,MAAM,cAAc,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG;IAC1D,yCAAyC;IACzC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EAAE,MAAiB,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,+BAc5F;AAED,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,qBAAqB,CAAC,UAAU,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IAC/F,0DAA0D;IAC1D,MAAM,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,iCAAiC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uBAAuB;IACvB,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,KAAK,EACL,IAAI,EACJ,KAAK,EACL,MAAiB,EACjB,EAAE,EACF,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,kBAAkB,+BAmCpB"}

package/dist/checkbox/index.js

@@ -0,0 +1,110 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../lib/krds.js";
+const INDETERMINATE_MARK = "[&>input:indeterminate~label]:before:bg-primary-solid [&>input:indeterminate~label]:before:border-primary-line";
+function indeterminateRef(ref) {
+  return (node) => {
+    if (node) node.indeterminate = true;
+    const inner = typeof ref === "function" ? ref(node) : void 0;
+    if (ref && typeof ref !== "function") ref.current = node;
+    return () => {
+      if (node) node.indeterminate = false;
+      if (typeof inner === "function") inner();
+      else if (typeof ref === "function") ref(null);
+      else if (ref) ref.current = null;
+    };
+  };
+}
+function Checkbox({
+  id,
+  label,
+  description,
+  size = "medium",
+  indeterminate,
+  className,
+  ref,
+  ...rest
+}) {
+  const mixed = indeterminate === true;
+  return /* @__PURE__ */ jsxs("div", { className: cx("krds-form-check", size, mixed && INDETERMINATE_MARK, className), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        id,
+        ref: mixed ? indeterminateRef(ref) : ref,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx("label", { htmlFor: id, children: label }),
+    description != null && // 킷 규칙이 `label + .krds-form-check-cnt` 라 레이블 바로 뒤에 붙어야 한다.
+    /* @__PURE__ */ jsx("div", { className: "krds-form-check-cnt", children: /* @__PURE__ */ jsx("p", { className: "krds-form-check-p", children: description }) })
+  ] });
+}
+function CheckboxChip({
+  id,
+  label,
+  size = "medium",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("krds-form-chip", size, className), children: [
+    /* @__PURE__ */ jsx("input", { type: "checkbox", className: "checkbox", id, ...rest }),
+    /* @__PURE__ */ jsx("label", { className: "krds-form-chip-outline", htmlFor: id, children: label })
+  ] });
+}
+function CheckArea({ layout = "column", className, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        "krds-check-area",
+        layout === "column" && "chk-column",
+        layout === "inline" && "krds-form-checks-inline",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+function CheckboxGroup({
+  legend,
+  title,
+  hint,
+  error,
+  layout = "column",
+  id,
+  className,
+  children,
+  ...rest
+}) {
+  const hintId = id && hint != null ? `${id}-hint` : void 0;
+  const errorId = id && error != null ? `${id}-error` : void 0;
+  const describedBy = cx(hintId, errorId) || void 0;
+  const visibleTitle = title === void 0 ? legend : title;
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      id,
+      className: cx("form-group", className),
+      "aria-describedby": describedBy,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("legend", { children: legend }),
+        /* @__PURE__ */ jsxs("div", { className: "form-conts", children: [
+          visibleTitle != null && /* @__PURE__ */ jsx("p", { className: "form-label", "aria-hidden": "true", children: visibleTitle }),
+          /* @__PURE__ */ jsx(CheckArea, { layout, children })
+        ] }),
+        hint != null && /* @__PURE__ */ jsx("p", { id: hintId, className: "form-hint", children: hint }),
+        error != null && /* @__PURE__ */ jsx("p", { id: errorId, className: "form-hint-invalid", children: error })
+      ]
+    }
+  );
+}
+export {
+  CheckArea,
+  Checkbox,
+  CheckboxChip,
+  CheckboxGroup
+};
+//# sourceMappingURL=index.js.map

package/dist/checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/checkbox/index.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode, Ref } from 'react';\nimport { cx, type KrdsSize } from '../lib/krds';\n\n/**\n * 체크박스 — KRDS `krds-form-check` · `krds-check-area` · `krds-form-chip`.\n *\n * `id` 가 필수다 — 킷이 `input ~ label` 형제 선택자로 네모를 그려서 `<label for>` 로만 이을 수 있다.\n * **`<label>` 안에 `<input>` 을 넣으면 네모가 아예 안 그려진다.**\n * 여러 개는 `CheckArea`(배치만) 나 `CheckboxGroup`(fieldset + legend + 도움말)으로 묶는다.\n * 한 값만 고르는 자리는 `ui/radio`, 검색 필터처럼 알약 꼴이 필요하면 `CheckboxChip` 이다.\n *\n * @example\n * <CheckboxGroup legend=\"수신 동의\" hint=\"언제든 해지할 수 있습니다.\">\n *   <Checkbox id=\"agree-sms\" name=\"agree\" value=\"sms\" label=\"문자\" />\n *   <Checkbox id=\"agree-mail\" name=\"agree\" value=\"mail\" label=\"이메일\" description=\"주 1회 발송\" />\n * </CheckboxGroup>\n * <Checkbox id=\"agree-all\" label=\"전체 선택\" indeterminate={some} />\n *\n * 자세히: docs/krds/09-부품-노트.md#체크박스\n */\n\n/** 체크박스 크기. 킷에 있는 둘뿐이다 — 네모 20px / 24px, 글자 17px / 19px. */\nexport type CheckboxSize = Extract<KrdsSize, 'medium' | 'large'>;\n\n/** 칩 크기. 킷에 있는 셋. 높이가 버튼·입력칸과 같은 눈금이다. */\nexport type CheckboxChipSize = Extract<KrdsSize, 'small' | 'medium' | 'large'>;\n\n/**\n * 중간 상태 표시 — 킷에 `:indeterminate` 규칙이 없어 보충했다. 네모만 primary 로 채운다.\n * 「일부 선택됨」은 화면 쪽에서 글로도 알려야 규격을 채운다.\n */\nconst INDETERMINATE_MARK =\n  '[&>input:indeterminate~label]:before:bg-primary-solid ' +\n  '[&>input:indeterminate~label]:before:border-primary-line';\n\n/**\n * `indeterminate` 는 속성이 아니라 DOM 프로퍼티라 ref 콜백에서 넣는다.\n * `true` 일 때만 만들고(서버 컴포넌트가 함수를 실어 보내지 않게), 떼어낼 때 프로퍼티를 되돌린다.\n */\nfunction indeterminateRef(ref: Ref<HTMLInputElement> | undefined): Ref<HTMLInputElement> {\n  return (node: HTMLInputElement | null) => {\n    if (node) node.indeterminate = true;\n    const inner = typeof ref === 'function' ? ref(node) : undefined;\n    if (ref && typeof ref !== 'function') ref.current = node;\n\n    return () => {\n      if (node) node.indeterminate = false;\n      if (typeof inner === 'function') inner();\n      else if (typeof ref === 'function') ref(null);\n      else if (ref) ref.current = null;\n    };\n  };\n}\n\ntype CheckboxBaseProps = {\n  /** `<label for>` 로 이을 id. 필수다. 목록에서는 값에서 만든다(`agree-${item.code}`). */\n  id: string;\n  /** 레이블. `for`/`id` 로 이어져 레이블 클릭으로도 토글된다. */\n  label: ReactNode;\n  /** `.krds-form-check` 감싸개에 붙는다. `...rest` 는 `<input>` 으로 흘린다. */\n  className?: string;\n};\n\nexport type CheckboxProps = Omit<\n  ComponentPropsWithRef<'input'>,\n  'type' | 'size' | 'children' | 'className' | 'id'\n> &\n  CheckboxBaseProps & {\n    size?: CheckboxSize;\n    /** 부가 설명. 레이블 바로 다음에 놓여 들여쓰기가 걸린다. */\n    description?: ReactNode;\n    /** 중간 상태. 「전체 선택」에서 하위 일부만 선택되었을 때 켠다. */\n    indeterminate?: boolean;\n  };\n\nexport function Checkbox({\n  id,\n  label,\n  description,\n  size = 'medium',\n  indeterminate,\n  className,\n  ref,\n  ...rest\n}: CheckboxProps) {\n  // 참일 때만 표시도 ref 도 만든다 — `indeterminate={false}` 는 그냥 보통 체크박스다.\n  const mixed = indeterminate === true;\n\n  return (\n    <div className={cx('krds-form-check', size, mixed && INDETERMINATE_MARK, className)}>\n      <input\n        type=\"checkbox\"\n        id={id}\n        ref={mixed ? indeterminateRef(ref) : ref}\n        {...rest}\n      />\n      <label htmlFor={id}>{label}</label>\n      {description != null && (\n        // 킷 규칙이 `label + .krds-form-check-cnt` 라 레이블 바로 뒤에 붙어야 한다.\n        <div className=\"krds-form-check-cnt\">\n          <p className=\"krds-form-check-p\">{description}</p>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * 칩 꼴 체크박스 — 킷 `krds-form-chip`. 네모 대신 테두리 알약을 눌러 고른다.\n *\n * 검색 필터처럼 여러 값을 한 줄에 늘어놓을 때 쓴다. 높이가 버튼·입력칸과 같은 눈금이다.\n *\n * @example\n * <CheckArea layout=\"inline\">\n *   <CheckboxChip id=\"f-open\" label=\"공개\" />\n *   <CheckboxChip id=\"f-closed\" label=\"비공개\" />\n * </CheckArea>\n */\nexport type CheckboxChipProps = Omit<\n  ComponentPropsWithRef<'input'>,\n  'type' | 'size' | 'children' | 'className' | 'id'\n> &\n  CheckboxBaseProps & {\n    size?: CheckboxChipSize;\n  };\n\nexport function CheckboxChip({\n  id,\n  label,\n  size = 'medium',\n  className,\n  ...rest\n}: CheckboxChipProps) {\n  return (\n    <div className={cx('krds-form-chip', size, className)}>\n      <input type=\"checkbox\" className=\"checkbox\" id={id} {...rest} />\n      <label className=\"krds-form-chip-outline\" htmlFor={id}>\n        {label}\n      </label>\n    </div>\n  );\n}\n\n/**\n * 배치. `column` 세로(20px) · `row` 가로(20px) · `inline` 가로 좁은 간격(12px).\n * `inline` 은 칩처럼 폭이 넓은 항목을 한 줄에 여럿 놓을 때만 쓴다.\n */\nexport type CheckAreaLayout = 'column' | 'row' | 'inline';\n\nexport type CheckAreaProps = ComponentPropsWithRef<'div'> & {\n  /** 배치. 기본 `column` — 규격이 수직 배치를 요구한다. */\n  layout?: CheckAreaLayout;\n};\n\n/**\n * 체크박스 묶음 영역 — 킷 `krds-check-area`. 배치만 맡는다.\n *\n * 기본이 세로다(규격). 가로가 필요하면 `layout=\"row\"` 를 명시한다.\n * 그룹 이름·도움말·오류까지 필요하면 `CheckboxGroup` 을 쓴다.\n */\nexport function CheckArea({ layout = 'column', className, children, ...rest }: CheckAreaProps) {\n  return (\n    <div\n      className={cx(\n        'krds-check-area',\n        layout === 'column' && 'chk-column',\n        layout === 'inline' && 'krds-form-checks-inline',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type CheckboxGroupProps = Omit<ComponentPropsWithRef<'fieldset'>, 'children' | 'title'> & {\n  /** 묶음의 접근 가능한 이름(`<legend>`). 킷이 화면에서 감추고 스크린리더에만 남긴다. */\n  legend: string;\n  /** 보이는 제목. 생략하면 `legend` 를 쓰고, `null` 을 주면 그리지 않는다. */\n  title?: ReactNode | null;\n  /** 도움말. 킷이 회색 정보 아이콘을 앞에 붙인다. */\n  hint?: ReactNode;\n  /** 오류 메시지. 붉은 글자 + 오류 아이콘. 색만으로 알리지 말고 반드시 문구를 넣는다. */\n  error?: ReactNode;\n  /** 배치. 기본 `column`. */\n  layout?: CheckAreaLayout;\n  children?: ReactNode;\n};\n\n/**\n * 체크박스 묶음 — `<fieldset class=\"form-group\">` + `krds-check-area`.\n *\n * 그룹 이름(`legend`) · 보이는 소제목 · 도움말 · 오류 메시지를 한 골격으로 묶는다.\n * `id` 를 주면 도움말·오류가 `aria-describedby` 로 이어진다.\n *\n * @example\n * <CheckboxGroup id=\"agree\" legend=\"수신 동의\" hint=\"언제든 해지할 수 있습니다.\">\n *   <Checkbox id=\"agree-sms\" label=\"문자\" />\n * </CheckboxGroup>\n */\nexport function CheckboxGroup({\n  legend,\n  title,\n  hint,\n  error,\n  layout = 'column',\n  id,\n  className,\n  children,\n  ...rest\n}: CheckboxGroupProps) {\n  const hintId = id && hint != null ? `${id}-hint` : undefined;\n  const errorId = id && error != null ? `${id}-error` : undefined;\n  const describedBy = cx(hintId, errorId) || undefined;\n  const visibleTitle = title === undefined ? legend : title;\n\n  return (\n    <fieldset\n      id={id}\n      className={cx('form-group', className)}\n      aria-describedby={describedBy}\n      {...rest}\n    >\n      {/* legend 는 fieldset 의 첫 자식이어야 한다. 킷이 화면에서 감추지만 이름은 그대로 읽힌다. */}\n      <legend>{legend}</legend>\n      <div className=\"form-conts\">\n        {visibleTitle != null && (\n          <p className=\"form-label\" aria-hidden=\"true\">\n            {visibleTitle}\n          </p>\n        )}\n        <CheckArea layout={layout}>{children}</CheckArea>\n      </div>\n      {hint != null && (\n        <p id={hintId} className=\"form-hint\">\n          {hint}\n        </p>\n      )}\n      {error != null && (\n        <p id={errorId} className=\"form-hint-invalid\">\n          {error}\n        </p>\n      )}\n    </fieldset>\n  );\n}\n"],"mappings":"AAyFI,SACE,KADF;AAxFJ,SAAS,UAAyB;AA8BlC,MAAM,qBACJ;AAOF,SAAS,iBAAiB,KAA+D;AACvF,SAAO,CAAC,SAAkC;AACxC,QAAI,KAAM,MAAK,gBAAgB;AAC/B,UAAM,QAAQ,OAAO,QAAQ,aAAa,IAAI,IAAI,IAAI;AACtD,QAAI,OAAO,OAAO,QAAQ,WAAY,KAAI,UAAU;AAEpD,WAAO,MAAM;AACX,UAAI,KAAM,MAAK,gBAAgB;AAC/B,UAAI,OAAO,UAAU,WAAY,OAAM;AAAA,eAC9B,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,eACnC,IAAK,KAAI,UAAU;AAAA,IAC9B;AAAA,EACF;AACF;AAuBO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAEhB,QAAM,QAAQ,kBAAkB;AAEhC,SACE,qBAAC,SAAI,WAAW,GAAG,mBAAmB,MAAM,SAAS,oBAAoB,SAAS,GAChF;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,KAAK,QAAQ,iBAAiB,GAAG,IAAI;AAAA,QACpC,GAAG;AAAA;AAAA,IACN;AAAA,IACA,oBAAC,WAAM,SAAS,IAAK,iBAAM;AAAA,IAC1B,eAAe;AAAA,IAEd,oBAAC,SAAI,WAAU,uBACb,8BAAC,OAAE,WAAU,qBAAqB,uBAAY,GAChD;AAAA,KAEJ;AAEJ;AAqBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,SACE,qBAAC,SAAI,WAAW,GAAG,kBAAkB,MAAM,SAAS,GAClD;AAAA,wBAAC,WAAM,MAAK,YAAW,WAAU,YAAW,IAAS,GAAG,MAAM;AAAA,IAC9D,oBAAC,WAAM,WAAU,0BAAyB,SAAS,IAChD,iBACH;AAAA,KACF;AAEJ;AAmBO,SAAS,UAAU,EAAE,SAAS,UAAU,WAAW,UAAU,GAAG,KAAK,GAAmB;AAC7F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,WAAW,YAAY;AAAA,QACvB,WAAW,YAAY;AAAA,QACvB;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AA2BO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,SAAS,MAAM,QAAQ,OAAO,GAAG,EAAE,UAAU;AACnD,QAAM,UAAU,MAAM,SAAS,OAAO,GAAG,EAAE,WAAW;AACtD,QAAM,cAAc,GAAG,QAAQ,OAAO,KAAK;AAC3C,QAAM,eAAe,UAAU,SAAY,SAAS;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,cAAc,SAAS;AAAA,MACrC,oBAAkB;AAAA,MACjB,GAAG;AAAA,MAGJ;AAAA,4BAAC,YAAQ,kBAAO;AAAA,QAChB,qBAAC,SAAI,WAAU,cACZ;AAAA,0BAAgB,QACf,oBAAC,OAAE,WAAU,cAAa,eAAY,QACnC,wBACH;AAAA,UAEF,oBAAC,aAAU,QAAiB,UAAS;AAAA,WACvC;AAAA,QACC,QAAQ,QACP,oBAAC,OAAE,IAAI,QAAQ,WAAU,aACtB,gBACH;AAAA,QAED,SAAS,QACR,oBAAC,OAAE,IAAI,SAAS,WAAU,qBACvB,iBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/combobox/index.d.ts

@@ -0,0 +1,135 @@
+import { type ComponentPropsWithRef, type ReactNode } from "react";
+import { type KrdsFieldSize, type KrdsIcon } from "../lib/krds";
+/**
+ * 콤보박스 — 입력하면 목록이 좁혀지는 자동완성. KRDS 킷에 없는 보충 부품이다.
+ *
+ * 껍데기는 킷 드롭다운(`krds-drop-wrap`), 동작은 WAI-ARIA 1.2 콤보박스 패턴이다.
+ * ↓↑ 는 양 끝에서 순환하고 Esc 는 닫기만 하며 값은 건드리지 않는다.
+ * 검색칸(돋보기 · 검색어 삭제 · 실행 버튼)이 필요하면 {@link SearchCombobox} 를 쓴다.
+ * 최근·인기·제안처럼 종류가 갈리면 `options` 대신 `groups` 로 계층화한다(규격 요구).
+ *
+ * @example
+ * <Combobox label="기관명" options={hits} onSelect={(o) => setOrg(o.value)} />
+ * <SearchCombobox
+ *   groups={[
+ *     { label: '최근 검색어', options: recent },
+ *     { label: '인기 검색어', options: popular },
+ *   ]}
+ *   emptyMessage="일치하는 검색어가 없습니다."
+ *   onSearch={run}
+ * />
+ *
+ * 자세히: docs/krds/09-부품-노트.md#콤보박스
+ */
+/** 제안 항목 하나. */
+export type ComboboxOption = {
+    /** 고르면 입력칸에 들어갈 글자. */
+    value: string;
+    /** 화면에 보일 것. 없으면 `value` 를 그대로 쓴다(일치 글자 강조를 넣을 자리). */
+    label?: ReactNode;
+    /** 오른쪽 끝 보조 설명(분류·결과 수 등). */
+    description?: ReactNode;
+    /** 앞 아이콘 이름(`ico-` 뺀 것). 최근 검색어에 `log`, 인기 검색어에 `like` 같은 식. */
+    icon?: KrdsIcon;
+    /** 보이되 고를 수 없다. ↑↓ 순회에서도 건너뛴다. */
+    disabled?: boolean;
+};
+/** 제안 묶음. 규격이 요구하는 계층화의 단위다 — 최근 / 인기 / 제안이 각각 한 묶음이다. */
+export type ComboboxGroup = {
+    /** 묶음 제목. `<h3>` 으로 그리고 `role="group"` 의 이름으로도 쓴다. */
+    label: string;
+    options: readonly ComboboxOption[];
+};
+type ComboboxOwnProps = {
+    /** 입력칸의 접근 가능한 이름. 보이는 `<label>` 이 있으면 `labelledBy` 를 대신 준다. */
+    label?: string;
+    /** 보이는 `<label>` 의 id. `label` 과 함께 줄 수 없다. */
+    labelledBy?: string;
+    /** `<input>` 의 id. 생략하면 `useId()` 로 만든다. */
+    id?: string;
+    /** 기본 medium(48px). 같은 줄의 버튼과 같은 값을 준다. */
+    size?: KrdsFieldSize;
+    /** 한 덩어리 목록. `groups` 를 함께 주면 `groups` 만 그린다. */
+    options?: readonly ComboboxOption[];
+    /** 제목이 붙은 묶음 목록(계층화). */
+    groups?: readonly ComboboxGroup[];
+    /** 제어 입력값. 주면 제어 부품이 된다. */
+    value?: string;
+    /** 비제어 초기값. */
+    defaultValue?: string;
+    /** 입력값이 바뀔 때(사람이 치거나 항목을 골랐을 때 모두). */
+    onValueChange?: (value: string) => void;
+    /** 항목을 골랐을 때. 입력값을 `option.value` 로 바꾼 **뒤** 부른다. */
+    onSelect?: (option: ComboboxOption) => void;
+    /** 초점이 들어오면 값이 비어 있어도 목록을 연다. 기본 true(규격의 Focusin 동작). */
+    openOnFocus?: boolean;
+    /** 처음부터 펼친 채로 그린다. 비제어 초깃값이라 사람이 닫으면 다시 열리지 않는다(문서·시각 시험용). */
+    defaultOpen?: boolean;
+    /** 열 때 첫 항목을 미리 활성으로 둔다. 기본 false — 치던 글자가 Enter 로 바뀌는 사고를 막는다. */
+    autoHighlight?: boolean;
+    /** 결과가 없을 때 보일 글. **글자를 한 자 이상 친 뒤에만** 뜬다. 주지 않으면 목록이 열리지 않는다. */
+    emptyMessage?: ReactNode;
+    /** 목록 위 고정 영역(킷 `.drop-top`). 「검색 도움말」 같은 것. */
+    header?: ReactNode;
+    /** 목록 아래 고정 영역(킷 `.drop-bottom`). 「검색 기록 전체 삭제」 같은 것. */
+    footer?: ReactNode;
+    /** 목록의 접근 가능한 이름. 기본 「제안 목록」. */
+    listLabel?: string;
+    /** 입력칸 오른쪽에 놓일 것(검색 버튼 등). 목록보다 뒤에 그려진다(규격의 읽기 순서). */
+    action?: ReactNode;
+    /** 입력칸 줄을 킷 `.sch-input`(돋보기 겹침 규칙)으로 감싼다. {@link SearchCombobox} 가 켠다. */
+    searchLayout?: boolean;
+    /** `.krds-drop-wrap` 감싸개에 붙는다. 바깥 여백·너비는 여기서 조절한다. */
+    className?: string;
+    /** `<input>` 에 붙는다. */
+    inputClassName?: string;
+    /** `.drop-menu` 에 붙는다. */
+    menuClassName?: string;
+};
+/** `<input>` 에서 부품이 직접 다루는 것은 뺀다. `onSelect` 는 DOM 이벤트와 이름이 겹쳐 막았다. */
+type ComboboxInputProps = Omit<ComponentPropsWithRef<"input">, "size" | "value" | "defaultValue" | "onSelect" | "role" | "children" | "list" | "type">;
+type ComboboxBaseProps = ComboboxInputProps & ComboboxOwnProps;
+/** 이름 없는 콤보박스를 만들 수 없게 타입으로 막는다 — `label` 이나 `labelledBy` 중 하나는 필수다. */
+export type ComboboxProps = ComboboxBaseProps & ({
+    label: string;
+    labelledBy?: never;
+} | {
+    label?: never;
+    labelledBy: string;
+});
+export declare function Combobox(props: ComboboxProps): import("react").JSX.Element;
+/**
+ * 검색어 자동완성 — {@link Combobox} + 킷 `sch-input`(돋보기 겹침) + 검색어 삭제 버튼.
+ *
+ * KRDS 검색 규격의 구성 요소 5(검색어 삭제)·7(실시간 제안)을 한 부품으로 채운다.
+ * 규격이 정한 이름 셋이 기본값이다 — 입력 「검색어」·삭제 「검색어 전체 삭제」·실행 「검색」.
+ * `buttonType` 기본이 `submit` 이라 `<form action>` 안에 두면 JS 없이도 검색이 된다.
+ *
+ * @example
+ * <form action="/search">
+ *   <SearchCombobox name="q" groups={suggestions} onSearch={run} />
+ * </form>
+ */
+export type SearchComboboxProps = Omit<ComboboxBaseProps, "action" | "searchLayout" | "label" | "labelledBy"> & {
+    /** 입력칸의 접근 가능한 이름. 규격이 정한 기본값 「검색어」. */
+    label?: string;
+    /** 실행 버튼의 이름(`sr-only`). 규격이 정한 기본값 「검색」. */
+    buttonLabel?: string;
+    /** 삭제 버튼의 이름(`sr-only`). 규격이 정한 기본값 「검색어 전체 삭제」. */
+    clearLabel?: string;
+    /** 검색어 삭제 버튼을 둔다. 기본 true — 규격 구성 요소 5는 선택이 아니다. */
+    clearable?: boolean;
+    /** 삭제 버튼을 누른 뒤. 입력값은 부품이 이미 비운 뒤 부른다. */
+    onClear?: () => void;
+    /**
+     * 검색 실행. Enter(활성 항목이 없을 때)·돋보기 클릭·제안 선택 세 곳에서 부른다.
+     * `preventDefault` 를 하지 않으므로 `<form>` 안이면 폼 제출도 함께 일어난다.
+     */
+    onSearch?: (query: string) => void;
+    /** 기본 submit — `<form action>` 안에 두면 JS 없이도 검색이 된다. */
+    buttonType?: "submit" | "button";
+    buttonProps?: Omit<ComponentPropsWithRef<"button">, "type" | "className" | "children">;
+};
+export declare function SearchCombobox({ label, buttonLabel, clearLabel, clearable, onClear, onSearch, buttonType, buttonProps, value, defaultValue, onValueChange, onSelect, onKeyDown, inputClassName, ref, ...rest }: SearchComboboxProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

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