@nurimedia/react-ui 0.1.0

package/dist/Button/index.js

@@ -0,0 +1,109 @@
+// src/Button/Button.tsx
+import "./styles.css";
+import { Slot } from "@radix-ui/react-slot";
+import { Children, cloneElement, forwardRef, isValidElement } from "react";
+
+// src/Button/Spinner.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Spinner = () => /* @__PURE__ */ jsx("span", { className: "nuri-button__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("svg", { className: "nuri-button__spinner", viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M14 8a6 6 0 0 0-6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+] }) });
+
+// src/utils/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/Button/Button.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Button = forwardRef(function Button2({
+  variant = "primary",
+  size = "md",
+  iconLeft,
+  iconRight,
+  iconOnly = false,
+  block = false,
+  loading = false,
+  disabled = false,
+  asChild = false,
+  type = "button",
+  className,
+  children,
+  onClick,
+  ...rest
+}, ref) {
+  const isBlocked = disabled || loading;
+  if (process.env.NODE_ENV !== "production" && iconOnly && !rest["aria-label"] && !rest["aria-labelledby"]) {
+    console.warn(
+      "[nuri/Button] `iconOnly` \uBC84\uD2BC\uC740 `aria-label`(\uB610\uB294 `aria-labelledby`)\uC774 \uD544\uC694\uD569\uB2C8\uB2E4."
+    );
+  }
+  const hasLeftSlot = !iconOnly && (loading || iconLeft != null);
+  const hasRightSlot = !iconOnly && !loading && iconRight != null;
+  const classes = cx(
+    "nuri-button",
+    `nuri-button--${variant}`,
+    `nuri-button--${size}`,
+    block && "nuri-button--block",
+    iconOnly && "nuri-button--icon-only",
+    isBlocked && "nuri-button--disabled",
+    loading && "nuri-button--loading",
+    hasLeftSlot && "nuri-button--has-left",
+    hasRightSlot && "nuri-button--has-right",
+    className
+  );
+  const handleClick = (e) => {
+    if (isBlocked) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    onClick?.(e);
+  };
+  const renderContent = (content) => {
+    if (iconOnly) {
+      return /* @__PURE__ */ jsx2("span", { className: "nuri-button__icon", "aria-hidden": "true", children: loading ? /* @__PURE__ */ jsx2(Spinner, {}) : content });
+    }
+    return /* @__PURE__ */ jsxs2(Fragment, { children: [
+      loading ? /* @__PURE__ */ jsx2(Spinner, {}) : iconLeft != null && /* @__PURE__ */ jsx2("span", { className: "nuri-button__icon nuri-button__icon--left", "aria-hidden": "true", children: iconLeft }),
+      content,
+      hasRightSlot && /* @__PURE__ */ jsx2("span", { className: "nuri-button__icon nuri-button__icon--right", "aria-hidden": "true", children: iconRight })
+    ] });
+  };
+  if (asChild) {
+    const child = Children.only(children);
+    if (!isValidElement(child)) return null;
+    const childElement = child;
+    return /* @__PURE__ */ jsx2(
+      Slot,
+      {
+        ref,
+        className: classes,
+        "aria-disabled": isBlocked || void 0,
+        "aria-busy": loading || void 0,
+        onClick: handleClick,
+        ...rest,
+        children: cloneElement(childElement, void 0, renderContent(childElement.props.children))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      ref,
+      type,
+      className: classes,
+      disabled,
+      "aria-disabled": loading || void 0,
+      "aria-busy": loading || void 0,
+      onClick: handleClick,
+      ...rest,
+      children: renderContent(children)
+    }
+  );
+});
+export {
+  Button
+};
+//# sourceMappingURL=index.js.map

package/dist/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Button/Button.tsx","../../src/Button/Spinner.tsx","../../src/utils/cx.ts"],"sourcesContent":["'use client';\n\nimport './styles.css';\nimport { Slot } from '@radix-ui/react-slot';\nimport { Children, cloneElement, forwardRef, isValidElement } from 'react';\nimport type { ButtonHTMLAttributes, MouseEvent, ReactElement, ReactNode } from 'react';\nimport { Spinner } from './Spinner.js';\nimport { cx } from '../utils/cx.js';\n\ntype Variant = 'primary' | 'secondary' | 'outline' | 'ghost';\ntype Size = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {\n  /**\n   * 시각 유형.\n   * - `primary`: 브랜드 색 배경 (기본)\n   * - `secondary`: 브랜드 옅은 톤 배경\n   * - `outline`: 투명 배경 + 테두리\n   * - `ghost`: 투명 배경, hover 시에만 배경 채움\n   * @default 'primary'\n   */\n  variant?: Variant;\n\n  /**\n   * 사이즈.\n   * - `sm`: 36px 높이 — 밀집된 UI, 테이블 액션\n   * - `md`: 42px 높이 — 일반 콘텐츠 영역 (기본)\n   * - `lg`: 48px 높이 — 주요 CTA, 모바일 터치\n   * @default 'md'\n   */\n  size?: Size;\n\n  /**\n   * 라벨 좌측에 표시할 아이콘.\n   * @example <Button iconLeft={<SearchIcon />}>검색</Button>\n   */\n  iconLeft?: ReactNode;\n\n  /**\n   * 라벨 우측에 표시할 아이콘.\n   */\n  iconRight?: ReactNode;\n\n  /**\n   * 아이콘만 표시하는 정사각 버튼. **`aria-label` 필수**\n   * (icon-only는 시각적으로만 의미가 있으므로 스크린리더용 라벨이 없으면 사용자가 용도를 알 수 없음).\n   * children은 단일 아이콘 엘리먼트.\n   * @example <Button iconOnly aria-label=\"닫기\"><CloseIcon /></Button>\n   */\n  iconOnly?: boolean;\n\n  /**\n   * 컨테이너 전체 너비로 확장.\n   */\n  block?: boolean;\n\n  /**\n   * 로딩 중 표시. 스피너를 좌측 아이콘 자리에 표시하고, 클릭을 차단하며 `aria-busy=\"true\"`를 부여.\n   */\n  loading?: boolean;\n\n  /**\n   * Radix Slot으로 자식 엘리먼트를 렌더 — 자식이 Button의 className·ref·이벤트 핸들러를 모두 물려받음.\n   * 링크를 버튼처럼 보이게 할 때 가장 자주 사용 (next/link, react-router Link 등).\n   * @example\n   * <Button asChild><Link href=\"/about\">소개</Link></Button>\n   */\n  asChild?: boolean;\n\n  /**\n   * 폼 버튼 타입. 의도치 않은 form submit 방지를 위해 기본값 `'button'`.\n   * 폼 제출 버튼이면 명시적으로 `type=\"submit\"` 지정.\n   * @default 'button'\n   */\n  type?: 'button' | 'submit' | 'reset';\n\n  children?: ReactNode;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = 'primary',\n    size = 'md',\n    iconLeft,\n    iconRight,\n    iconOnly = false,\n    block = false,\n    loading = false,\n    disabled = false,\n    asChild = false,\n    type = 'button',\n    className,\n    children,\n    onClick,\n    ...rest\n  },\n  ref,\n) {\n  const isBlocked = disabled || loading;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    iconOnly &&\n    !rest['aria-label'] &&\n    !rest['aria-labelledby']\n  ) {\n    // iconOnly 버튼은 텍스트가 없어 스크린리더가 용도를 알 수 없음 → 개발 모드 경고\n    console.warn(\n      '[nuri/Button] `iconOnly` 버튼은 `aria-label`(또는 `aria-labelledby`)이 필요합니다.',\n    );\n  }\n\n  const hasLeftSlot = !iconOnly && (loading || iconLeft != null);\n  const hasRightSlot = !iconOnly && !loading && iconRight != null;\n\n  const classes = cx(\n    'nuri-button',\n    `nuri-button--${variant}`,\n    `nuri-button--${size}`,\n    block && 'nuri-button--block',\n    iconOnly && 'nuri-button--icon-only',\n    isBlocked && 'nuri-button--disabled',\n    loading && 'nuri-button--loading',\n    hasLeftSlot && 'nuri-button--has-left',\n    hasRightSlot && 'nuri-button--has-right',\n    className,\n  );\n\n  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n    if (isBlocked) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n    onClick?.(e);\n  };\n\n  const renderContent = (content: ReactNode) => {\n    if (iconOnly) {\n      return (\n        <span className=\"nuri-button__icon\" aria-hidden=\"true\">\n          {loading ? <Spinner /> : content}\n        </span>\n      );\n    }\n    return (\n      <>\n        {loading ? (\n          <Spinner />\n        ) : (\n          iconLeft != null && (\n            <span className=\"nuri-button__icon nuri-button__icon--left\" aria-hidden=\"true\">\n              {iconLeft}\n            </span>\n          )\n        )}\n        {content}\n        {hasRightSlot && (\n          <span className=\"nuri-button__icon nuri-button__icon--right\" aria-hidden=\"true\">\n            {iconRight}\n          </span>\n        )}\n      </>\n    );\n  };\n\n  if (asChild) {\n    const child = Children.only(children);\n    if (!isValidElement(child)) return null;\n    const childElement = child as ReactElement<{ children?: ReactNode }>;\n    return (\n      <Slot\n        ref={ref}\n        className={classes}\n        aria-disabled={isBlocked || undefined}\n        aria-busy={loading || undefined}\n        onClick={handleClick}\n        {...rest}\n      >\n        {cloneElement(childElement, undefined, renderContent(childElement.props.children))}\n      </Slot>\n    );\n  }\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      className={classes}\n      // disabled = 진짜 비활성 → native disabled (포커스 불가, 의도된 동작)\n      // loading  = 일시적 처리중 → aria-disabled로 포커스 유지 (클릭은 handleClick이 가드)\n      disabled={disabled}\n      aria-disabled={loading || undefined}\n      aria-busy={loading || undefined}\n      onClick={handleClick}\n      {...rest}\n    >\n      {renderContent(children)}\n    </button>\n  );\n});\n","export const Spinner = () => (\n  <span className=\"nuri-button__icon\" aria-hidden=\"true\">\n    <svg className=\"nuri-button__spinner\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\">\n      <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" strokeOpacity=\"0.25\" strokeWidth=\"2\" />\n      <path d=\"M14 8a6 6 0 0 0-6-6\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n    </svg>\n  </span>\n);\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(' ');\n}\n"],"mappings":"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","names":["jsx","jsxs","Button"]}

package/dist/Button/styles.css

@@ -0,0 +1,181 @@
+.nuri-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--nuri-button-gap);
+  border: 1px solid transparent;
+  font-family: inherit; /* 앱이 설정한 폰트를 그대로 상속 (디자인 시스템은 폰트 종류를 강제하지 않음) */
+  font-weight: var(--nuri-button-font-weight);
+  line-height: var(--nuri-button-line-height);
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease,
+    border-color 120ms ease;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.nuri-button:focus-visible {
+  outline: var(--nuri-button-focus-ring-width) solid
+    var(--nuri-button-focus-ring-color, var(--nuri-color-brand-default));
+  outline-offset: var(--nuri-button-focus-ring-offset);
+}
+
+.nuri-button:disabled,
+.nuri-button[aria-disabled='true'] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.nuri-button--block {
+  display: flex;
+  width: 100%;
+}
+
+.nuri-button--loading {
+  cursor: progress;
+}
+
+.nuri-button--sm {
+  height: var(--nuri-button-size-sm-height);
+  padding: var(--nuri-button-size-sm-padding-y) var(--nuri-button-size-sm-padding-x);
+  font-size: var(--nuri-button-size-sm-font-size);
+  border-radius: var(--nuri-button-size-sm-radius);
+}
+.nuri-button--md {
+  height: var(--nuri-button-size-md-height);
+  padding: var(--nuri-button-size-md-padding-y) var(--nuri-button-size-md-padding-x);
+  font-size: var(--nuri-button-size-md-font-size);
+  border-radius: var(--nuri-button-size-md-radius);
+}
+.nuri-button--lg {
+  height: var(--nuri-button-size-lg-height);
+  padding: var(--nuri-button-size-lg-padding-y) var(--nuri-button-size-lg-padding-x);
+  font-size: var(--nuri-button-size-lg-font-size);
+  border-radius: var(--nuri-button-size-lg-radius);
+}
+
+.nuri-button--sm.nuri-button--has-left {
+  padding-left: var(--nuri-button-size-sm-padding-x-narrow);
+}
+.nuri-button--sm.nuri-button--has-right {
+  padding-right: var(--nuri-button-size-sm-padding-x-narrow);
+}
+.nuri-button--md.nuri-button--has-left {
+  padding-left: var(--nuri-button-size-md-padding-x-narrow);
+}
+.nuri-button--md.nuri-button--has-right {
+  padding-right: var(--nuri-button-size-md-padding-x-narrow);
+}
+.nuri-button--lg.nuri-button--has-left {
+  padding-left: var(--nuri-button-size-lg-padding-x-narrow);
+}
+.nuri-button--lg.nuri-button--has-right {
+  padding-right: var(--nuri-button-size-lg-padding-x-narrow);
+}
+
+.nuri-button--icon-only {
+  padding: 0;
+}
+.nuri-button--icon-only.nuri-button--sm {
+  width: var(--nuri-button-size-sm-height);
+}
+.nuri-button--icon-only.nuri-button--md {
+  width: var(--nuri-button-size-md-height);
+}
+.nuri-button--icon-only.nuri-button--lg {
+  width: var(--nuri-button-size-lg-height);
+}
+
+.nuri-button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--nuri-button-icon-size);
+  height: var(--nuri-button-icon-size);
+  flex-shrink: 0;
+}
+.nuri-button__icon > svg {
+  width: 100%;
+  height: 100%;
+}
+
+.nuri-button__spinner {
+  animation: nuri-button-spin 800ms linear infinite;
+}
+@keyframes nuri-button-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 멀미 민감 사용자: 모션 줄이되 상태 신호는 유지 */
+@media (prefers-reduced-motion: reduce) {
+  .nuri-button {
+    transition: none;
+  }
+  .nuri-button__spinner {
+    animation-duration: 2400ms;
+  }
+}
+
+.nuri-button--primary {
+  background-color: var(--nuri-button-primary-bg, var(--nuri-color-brand-default));
+  color: var(--nuri-button-primary-fg);
+}
+.nuri-button--primary:hover:not(:disabled):not([aria-disabled='true']),
+.nuri-button--primary:active:not(:disabled):not([aria-disabled='true']) {
+  background-color: var(--nuri-button-primary-bg-hover, var(--nuri-color-brand-pressed));
+}
+.nuri-button--primary:disabled,
+.nuri-button--primary[aria-disabled='true'] {
+  background-color: var(--nuri-button-primary-bg-disabled);
+  color: var(--nuri-button-primary-fg-disabled);
+}
+
+.nuri-button--secondary {
+  background-color: var(--nuri-button-secondary-bg, var(--nuri-color-brand-subtle));
+  color: var(--nuri-button-secondary-fg, var(--nuri-color-brand-default));
+}
+.nuri-button--secondary:hover:not(:disabled):not([aria-disabled='true']),
+.nuri-button--secondary:active:not(:disabled):not([aria-disabled='true']) {
+  background-color: var(--nuri-button-secondary-bg-hover, var(--nuri-color-brand-subtle-pressed));
+}
+.nuri-button--secondary:disabled,
+.nuri-button--secondary[aria-disabled='true'] {
+  background-color: var(--nuri-button-secondary-bg-disabled);
+  color: var(--nuri-button-secondary-fg-disabled);
+}
+
+.nuri-button--outline {
+  background-color: var(--nuri-button-outline-bg);
+  color: var(--nuri-button-outline-fg);
+  border-color: var(--nuri-button-outline-border);
+}
+.nuri-button--outline:hover:not(:disabled):not([aria-disabled='true']),
+.nuri-button--outline:active:not(:disabled):not([aria-disabled='true']) {
+  background-color: var(--nuri-button-outline-bg-hover);
+}
+.nuri-button--outline:disabled,
+.nuri-button--outline[aria-disabled='true'] {
+  background-color: var(--nuri-button-outline-bg-disabled);
+  color: var(--nuri-button-outline-fg-disabled);
+  border-color: var(--nuri-button-outline-border-disabled);
+}
+
+.nuri-button--ghost {
+  background-color: var(--nuri-button-ghost-bg);
+  color: var(--nuri-button-ghost-fg);
+}
+.nuri-button--ghost:hover:not(:disabled):not([aria-disabled='true']),
+.nuri-button--ghost:active:not(:disabled):not([aria-disabled='true']) {
+  background-color: var(--nuri-button-ghost-bg-hover);
+}
+.nuri-button--ghost:disabled,
+.nuri-button--ghost[aria-disabled='true'] {
+  background-color: var(--nuri-button-ghost-bg-disabled);
+  color: var(--nuri-button-ghost-fg-disabled);
+}

package/dist/Checkbox/index.cjs

@@ -0,0 +1,83 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Checkbox/index.ts
+var Checkbox_exports = {};
+__export(Checkbox_exports, {
+  Checkbox: () => Checkbox
+});
+module.exports = __toCommonJS(Checkbox_exports);
+
+// src/Checkbox/Checkbox.tsx
+var import_styles = require("./styles.css");
+var RadixCheckbox = __toESM(require("@radix-ui/react-checkbox"), 1);
+var import_react = require("react");
+
+// src/utils/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/Checkbox/Checkbox.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "path",
+  {
+    d: "M2.5 6.2l2.4 2.4 4.6-5",
+    stroke: "currentColor",
+    strokeWidth: "1.6",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var IndeterminateIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2.8 6h6.4", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) });
+var Checkbox = (0, import_react.forwardRef)(function Checkbox2({ label, size = "md", disabled = false, id: idProp, className, checked, ...rest }, ref) {
+  const reactId = (0, import_react.useId)();
+  const id = idProp ?? `nuri-checkbox-${reactId}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("nuri-checkbox", `nuri-checkbox--${size}`, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      RadixCheckbox.Root,
+      {
+        ref,
+        id,
+        className: "nuri-checkbox__control",
+        disabled,
+        checked,
+        ...rest,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixCheckbox.Indicator, { className: "nuri-checkbox__indicator", children: checked === "indeterminate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IndeterminateIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, {}) })
+      }
+    ),
+    label != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: id, className: "nuri-checkbox__label", children: label })
+  ] });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Checkbox
+});
+//# sourceMappingURL=index.cjs.map

package/dist/Checkbox/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Checkbox/index.ts","../../src/Checkbox/Checkbox.tsx","../../src/utils/cx.ts"],"sourcesContent":["export { Checkbox } from './Checkbox.js';\nexport type { CheckboxProps } from './Checkbox.js';\n","'use client';\n\nimport './styles.css';\nimport * as RadixCheckbox from '@radix-ui/react-checkbox';\nimport { forwardRef, useId } from 'react';\nimport type { ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\ntype Size = 'sm' | 'md';\n\nexport interface CheckboxProps {\n  /** 라벨 (컨트롤 우측). 지정 시 클릭 영역에 포함되고 자동 연결됨. 없으면 `aria-label` 필수. */\n  label?: ReactNode;\n  /**\n   * 사이즈. md 16px(디자인 Large, 기본) / sm 12px(디자인 Small).\n   * @default 'md'\n   */\n  size?: Size;\n  /** 체크 상태 (제어형). `'indeterminate'`는 부분 선택 표시. */\n  checked?: boolean | 'indeterminate';\n  /** 초기 체크 상태 (비제어형). */\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean | 'indeterminate') => void;\n  disabled?: boolean;\n  /** 폼 전송용 name — 네이티브 checkbox처럼 폼에 참여. */\n  name?: string;\n  /** 폼 전송 시 값. @default 'on' */\n  value?: string;\n  required?: boolean;\n  id?: string;\n  className?: string;\n  'aria-label'?: string;\n}\n\n/** 체크마크. TODO(Figma 실측): 디자이너 아이콘으로 교체 예정 — 잠정 표준형. */\nconst CheckIcon = () => (\n  <svg viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n    <path\n      d=\"M2.5 6.2l2.4 2.4 4.6-5\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.6\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\n/** 부분 선택(indeterminate) 표시 — 가로 막대. */\nconst IndeterminateIcon = () => (\n  <svg viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n    <path d=\"M2.8 6h6.4\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" />\n  </svg>\n);\n\n/**\n * 체크박스. Radix Checkbox 기반 — Space 토글·aria-checked·폼 참여 자동.\n * 라벨을 지정하면 라벨 클릭으로도 토글된다.\n *\n * @example\n * <Checkbox label=\"이용약관에 동의합니다\" checked={agreed} onCheckedChange={setAgreed} />\n *\n * @example 부분 선택 (전체선택 헤더 등)\n * <Checkbox label=\"전체 선택\" checked={someChecked ? 'indeterminate' : allChecked} … />\n */\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(function Checkbox(\n  { label, size = 'md', disabled = false, id: idProp, className, checked, ...rest },\n  ref,\n) {\n  const reactId = useId();\n  const id = idProp ?? `nuri-checkbox-${reactId}`;\n\n  return (\n    <div className={cx('nuri-checkbox', `nuri-checkbox--${size}`, className)}>\n      <RadixCheckbox.Root\n        ref={ref}\n        id={id}\n        className=\"nuri-checkbox__control\"\n        disabled={disabled}\n        checked={checked}\n        {...rest}\n      >\n        <RadixCheckbox.Indicator className=\"nuri-checkbox__indicator\">\n          {checked === 'indeterminate' ? <IndeterminateIcon /> : <CheckIcon />}\n        </RadixCheckbox.Indicator>\n      </RadixCheckbox.Root>\n      {label != null && (\n        <label htmlFor={id} className=\"nuri-checkbox__label\">\n          {label}\n        </label>\n      )}\n    </div>\n  );\n});\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,oBAAO;AACP,oBAA+B;AAC/B,mBAAkC;;;ACA3B,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;AD+BI;AAFJ,IAAM,YAAY,MAChB,4CAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,eAAY,QAC/C;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA;AACjB,GACF;AAIF,IAAM,oBAAoB,MACxB,4CAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,eAAY,QAC/C,sDAAC,UAAK,GAAE,cAAa,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,GACrF;AAaK,IAAM,eAAW,yBAA6C,SAASA,UAC5E,EAAE,OAAO,OAAO,MAAM,WAAW,OAAO,IAAI,QAAQ,WAAW,SAAS,GAAG,KAAK,GAChF,KACA;AACA,QAAM,cAAU,oBAAM;AACtB,QAAM,KAAK,UAAU,iBAAiB,OAAO;AAE7C,SACE,6CAAC,SAAI,WAAW,GAAG,iBAAiB,kBAAkB,IAAI,IAAI,SAAS,GACrE;AAAA;AAAA,MAAe;AAAA,MAAd;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACV;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ,sDAAe,yBAAd,EAAwB,WAAU,4BAChC,sBAAY,kBAAkB,4CAAC,qBAAkB,IAAK,4CAAC,aAAU,GACpE;AAAA;AAAA,IACF;AAAA,IACC,SAAS,QACR,4CAAC,WAAM,SAAS,IAAI,WAAU,wBAC3B,iBACH;AAAA,KAEJ;AAEJ,CAAC;","names":["Checkbox"]}

package/dist/Checkbox/index.d.cts

@@ -0,0 +1,40 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type Size = 'sm' | 'md';
+interface CheckboxProps {
+    /** 라벨 (컨트롤 우측). 지정 시 클릭 영역에 포함되고 자동 연결됨. 없으면 `aria-label` 필수. */
+    label?: ReactNode;
+    /**
+     * 사이즈. md 16px(디자인 Large, 기본) / sm 12px(디자인 Small).
+     * @default 'md'
+     */
+    size?: Size;
+    /** 체크 상태 (제어형). `'indeterminate'`는 부분 선택 표시. */
+    checked?: boolean | 'indeterminate';
+    /** 초기 체크 상태 (비제어형). */
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean | 'indeterminate') => void;
+    disabled?: boolean;
+    /** 폼 전송용 name — 네이티브 checkbox처럼 폼에 참여. */
+    name?: string;
+    /** 폼 전송 시 값. @default 'on' */
+    value?: string;
+    required?: boolean;
+    id?: string;
+    className?: string;
+    'aria-label'?: string;
+}
+/**
+ * 체크박스. Radix Checkbox 기반 — Space 토글·aria-checked·폼 참여 자동.
+ * 라벨을 지정하면 라벨 클릭으로도 토글된다.
+ *
+ * @example
+ * <Checkbox label="이용약관에 동의합니다" checked={agreed} onCheckedChange={setAgreed} />
+ *
+ * @example 부분 선택 (전체선택 헤더 등)
+ * <Checkbox label="전체 선택" checked={someChecked ? 'indeterminate' : allChecked} … />
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Checkbox, type CheckboxProps };

package/dist/Checkbox/index.d.ts

@@ -0,0 +1,40 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type Size = 'sm' | 'md';
+interface CheckboxProps {
+    /** 라벨 (컨트롤 우측). 지정 시 클릭 영역에 포함되고 자동 연결됨. 없으면 `aria-label` 필수. */
+    label?: ReactNode;
+    /**
+     * 사이즈. md 16px(디자인 Large, 기본) / sm 12px(디자인 Small).
+     * @default 'md'
+     */
+    size?: Size;
+    /** 체크 상태 (제어형). `'indeterminate'`는 부분 선택 표시. */
+    checked?: boolean | 'indeterminate';
+    /** 초기 체크 상태 (비제어형). */
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean | 'indeterminate') => void;
+    disabled?: boolean;
+    /** 폼 전송용 name — 네이티브 checkbox처럼 폼에 참여. */
+    name?: string;
+    /** 폼 전송 시 값. @default 'on' */
+    value?: string;
+    required?: boolean;
+    id?: string;
+    className?: string;
+    'aria-label'?: string;
+}
+/**
+ * 체크박스. Radix Checkbox 기반 — Space 토글·aria-checked·폼 참여 자동.
+ * 라벨을 지정하면 라벨 클릭으로도 토글된다.
+ *
+ * @example
+ * <Checkbox label="이용약관에 동의합니다" checked={agreed} onCheckedChange={setAgreed} />
+ *
+ * @example 부분 선택 (전체선택 헤더 등)
+ * <Checkbox label="전체 선택" checked={someChecked ? 'indeterminate' : allChecked} … />
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Checkbox, type CheckboxProps };

package/dist/Checkbox/index.js

@@ -0,0 +1,46 @@
+// src/Checkbox/Checkbox.tsx
+import "./styles.css";
+import * as RadixCheckbox from "@radix-ui/react-checkbox";
+import { forwardRef, useId } from "react";
+
+// src/utils/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/Checkbox/Checkbox.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M2.5 6.2l2.4 2.4 4.6-5",
+    stroke: "currentColor",
+    strokeWidth: "1.6",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var IndeterminateIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2.8 6h6.4", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) });
+var Checkbox = forwardRef(function Checkbox2({ label, size = "md", disabled = false, id: idProp, className, checked, ...rest }, ref) {
+  const reactId = useId();
+  const id = idProp ?? `nuri-checkbox-${reactId}`;
+  return /* @__PURE__ */ jsxs("div", { className: cx("nuri-checkbox", `nuri-checkbox--${size}`, className), children: [
+    /* @__PURE__ */ jsx(
+      RadixCheckbox.Root,
+      {
+        ref,
+        id,
+        className: "nuri-checkbox__control",
+        disabled,
+        checked,
+        ...rest,
+        children: /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: "nuri-checkbox__indicator", children: checked === "indeterminate" ? /* @__PURE__ */ jsx(IndeterminateIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {}) })
+      }
+    ),
+    label != null && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "nuri-checkbox__label", children: label })
+  ] });
+});
+export {
+  Checkbox
+};
+//# sourceMappingURL=index.js.map

package/dist/Checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","../../src/utils/cx.ts"],"sourcesContent":["'use client';\n\nimport './styles.css';\nimport * as RadixCheckbox from '@radix-ui/react-checkbox';\nimport { forwardRef, useId } from 'react';\nimport type { ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\ntype Size = 'sm' | 'md';\n\nexport interface CheckboxProps {\n  /** 라벨 (컨트롤 우측). 지정 시 클릭 영역에 포함되고 자동 연결됨. 없으면 `aria-label` 필수. */\n  label?: ReactNode;\n  /**\n   * 사이즈. md 16px(디자인 Large, 기본) / sm 12px(디자인 Small).\n   * @default 'md'\n   */\n  size?: Size;\n  /** 체크 상태 (제어형). `'indeterminate'`는 부분 선택 표시. */\n  checked?: boolean | 'indeterminate';\n  /** 초기 체크 상태 (비제어형). */\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean | 'indeterminate') => void;\n  disabled?: boolean;\n  /** 폼 전송용 name — 네이티브 checkbox처럼 폼에 참여. */\n  name?: string;\n  /** 폼 전송 시 값. @default 'on' */\n  value?: string;\n  required?: boolean;\n  id?: string;\n  className?: string;\n  'aria-label'?: string;\n}\n\n/** 체크마크. TODO(Figma 실측): 디자이너 아이콘으로 교체 예정 — 잠정 표준형. */\nconst CheckIcon = () => (\n  <svg viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n    <path\n      d=\"M2.5 6.2l2.4 2.4 4.6-5\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.6\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\n/** 부분 선택(indeterminate) 표시 — 가로 막대. */\nconst IndeterminateIcon = () => (\n  <svg viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n    <path d=\"M2.8 6h6.4\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" />\n  </svg>\n);\n\n/**\n * 체크박스. Radix Checkbox 기반 — Space 토글·aria-checked·폼 참여 자동.\n * 라벨을 지정하면 라벨 클릭으로도 토글된다.\n *\n * @example\n * <Checkbox label=\"이용약관에 동의합니다\" checked={agreed} onCheckedChange={setAgreed} />\n *\n * @example 부분 선택 (전체선택 헤더 등)\n * <Checkbox label=\"전체 선택\" checked={someChecked ? 'indeterminate' : allChecked} … />\n */\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(function Checkbox(\n  { label, size = 'md', disabled = false, id: idProp, className, checked, ...rest },\n  ref,\n) {\n  const reactId = useId();\n  const id = idProp ?? `nuri-checkbox-${reactId}`;\n\n  return (\n    <div className={cx('nuri-checkbox', `nuri-checkbox--${size}`, className)}>\n      <RadixCheckbox.Root\n        ref={ref}\n        id={id}\n        className=\"nuri-checkbox__control\"\n        disabled={disabled}\n        checked={checked}\n        {...rest}\n      >\n        <RadixCheckbox.Indicator className=\"nuri-checkbox__indicator\">\n          {checked === 'indeterminate' ? <IndeterminateIcon /> : <CheckIcon />}\n        </RadixCheckbox.Indicator>\n      </RadixCheckbox.Root>\n      {label != null && (\n        <label htmlFor={id} className=\"nuri-checkbox__label\">\n          {label}\n        </label>\n      )}\n    </div>\n  );\n});\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";AAEA,OAAO;AACP,YAAY,mBAAmB;AAC/B,SAAS,YAAY,aAAa;;;ACA3B,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;AD+BI,cAmCA,YAnCA;AAFJ,IAAM,YAAY,MAChB,oBAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,eAAY,QAC/C;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA;AACjB,GACF;AAIF,IAAM,oBAAoB,MACxB,oBAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,eAAY,QAC/C,8BAAC,UAAK,GAAE,cAAa,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,GACrF;AAaK,IAAM,WAAW,WAA6C,SAASA,UAC5E,EAAE,OAAO,OAAO,MAAM,WAAW,OAAO,IAAI,QAAQ,WAAW,SAAS,GAAG,KAAK,GAChF,KACA;AACA,QAAM,UAAU,MAAM;AACtB,QAAM,KAAK,UAAU,iBAAiB,OAAO;AAE7C,SACE,qBAAC,SAAI,WAAW,GAAG,iBAAiB,kBAAkB,IAAI,IAAI,SAAS,GACrE;AAAA;AAAA,MAAe;AAAA,MAAd;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACV;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ,8BAAe,yBAAd,EAAwB,WAAU,4BAChC,sBAAY,kBAAkB,oBAAC,qBAAkB,IAAK,oBAAC,aAAU,GACpE;AAAA;AAAA,IACF;AAAA,IACC,SAAS,QACR,oBAAC,WAAM,SAAS,IAAI,WAAU,wBAC3B,iBACH;AAAA,KAEJ;AAEJ,CAAC;","names":["Checkbox"]}

package/dist/Checkbox/styles.css

@@ -0,0 +1,78 @@
+/* 공통 컨트롤 토큰(--nuri-control-*) 사용. 체크마크 모양·radius는 잠정 — TODO(Figma 실측 후 확정) */
+.nuri-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--nuri-control-gap);
+  font-family: inherit;
+}
+
+.nuri-checkbox__control {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 0;
+  background-color: var(--nuri-control-bg);
+  border: 1px solid var(--nuri-control-border);
+  border-radius: var(--nuri-control-checkbox-radius);
+  cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease;
+}
+.nuri-checkbox--md .nuri-checkbox__control {
+  width: var(--nuri-control-checkbox-size-md);
+  height: var(--nuri-control-checkbox-size-md);
+}
+.nuri-checkbox--sm .nuri-checkbox__control {
+  width: var(--nuri-control-checkbox-size-sm);
+  height: var(--nuri-control-checkbox-size-sm);
+}
+
+.nuri-checkbox__control[data-state='checked'],
+.nuri-checkbox__control[data-state='indeterminate'] {
+  background-color: var(--nuri-control-bg-checked, var(--nuri-color-brand-default));
+  border-color: var(--nuri-control-bg-checked, var(--nuri-color-brand-default));
+}
+
+.nuri-checkbox__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--nuri-control-fg-checked);
+}
+.nuri-checkbox__indicator > svg {
+  width: 80%;
+  height: 80%;
+}
+
+.nuri-checkbox__control:focus-visible {
+  outline: var(--nuri-button-focus-ring-width) solid
+    var(--nuri-button-focus-ring-color, var(--nuri-color-brand-default));
+  outline-offset: var(--nuri-button-focus-ring-offset);
+}
+
+.nuri-checkbox__control:disabled {
+  background-color: var(--nuri-control-bg-disabled);
+  border-color: var(--nuri-control-border-disabled);
+  cursor: not-allowed;
+}
+.nuri-checkbox__control:disabled[data-state='checked'],
+.nuri-checkbox__control:disabled[data-state='indeterminate'] {
+  background-color: var(--nuri-control-border-disabled);
+}
+
+.nuri-checkbox__label {
+  font-size: var(--nuri-control-label-size);
+  line-height: var(--nuri-control-line-height);
+  color: var(--nuri-control-label-color);
+  cursor: pointer;
+  user-select: none;
+}
+.nuri-checkbox:has(.nuri-checkbox__control:disabled) .nuri-checkbox__label {
+  color: var(--nuri-control-label-disabled);
+  cursor: not-allowed;
+}