@nurimedia/react-ui 0.1.0

package/dist/Radio/styles.css

@@ -0,0 +1,76 @@
+/* 보더는 상태와 무관하게 #818181 고정, 선택 시 가운데 브랜드 점만 생김 (디자인 확인: 사용자 실측 2026-07) */
+.nuri-radio-group {
+  display: flex;
+  gap: 12px;
+}
+.nuri-radio-group--vertical {
+  flex-direction: column;
+}
+.nuri-radio-group--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  column-gap: 20px;
+}
+
+.nuri-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--nuri-control-gap);
+  font-family: inherit;
+}
+
+.nuri-radio__control {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--nuri-control-radio-size);
+  height: var(--nuri-control-radio-size);
+  padding: 0;
+  background-color: var(--nuri-control-bg);
+  border: 1px solid var(--nuri-control-radio-border);
+  border-radius: 50%;
+  cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease;
+}
+
+/* 선택돼도 보더는 변하지 않는다 — 안쪽 점이 유일한 상태 표시 */
+
+.nuri-radio__indicator {
+  display: block;
+  width: var(--nuri-control-radio-dot-size);
+  height: var(--nuri-control-radio-dot-size);
+  border-radius: 50%;
+  /* 가운데 점 = 브랜드 색 */
+  background-color: var(--nuri-control-bg-checked, var(--nuri-color-brand-default));
+}
+
+.nuri-radio__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-radio__control:disabled {
+  background-color: var(--nuri-control-bg-disabled);
+  border-color: var(--nuri-control-border-disabled);
+  cursor: not-allowed;
+}
+.nuri-radio__control:disabled .nuri-radio__indicator {
+  background-color: var(--nuri-control-border-disabled);
+}
+
+.nuri-radio__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-radio:has(.nuri-radio__control:disabled) .nuri-radio__label {
+  color: var(--nuri-control-label-disabled);
+  cursor: not-allowed;
+}

package/dist/Select/index.cjs

@@ -0,0 +1,116 @@
+"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/Select/index.ts
+var Select_exports = {};
+__export(Select_exports, {
+  Select: () => Select
+});
+module.exports = __toCommonJS(Select_exports);
+
+// src/Select/Select.tsx
+var import_styles = require("./styles.css");
+var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
+var import_react = require("react");
+
+// src/utils/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/Select/Select.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var CaretIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M1.1 2.5h5.8L4 5.9z", fill: "currentColor" }) });
+var Select = (0, import_react.forwardRef)(function Select2({
+  options,
+  size = "md",
+  placeholder,
+  value,
+  defaultValue,
+  onValueChange,
+  open,
+  defaultOpen,
+  onOpenChange,
+  disabled = false,
+  block = false,
+  name,
+  required,
+  container,
+  className,
+  "aria-label": ariaLabel
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    RadixSelect.Root,
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      open,
+      defaultOpen,
+      onOpenChange,
+      disabled,
+      name,
+      required,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          RadixSelect.Trigger,
+          {
+            ref,
+            "aria-label": ariaLabel,
+            className: cx(
+              "nuri-select__trigger",
+              `nuri-select__trigger--${size}`,
+              block && "nuri-select__trigger--block",
+              className
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nuri-select__value", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixSelect.Value, { placeholder }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixSelect.Icon, { className: "nuri-select__caret", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CaretIcon, {}) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixSelect.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixSelect.Content, { className: "nuri-select__content", position: "popper", sideOffset: 6, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixSelect.Viewport, { className: "nuri-select__viewport", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          RadixSelect.Item,
+          {
+            value: option.value,
+            disabled: option.disabled,
+            className: "nuri-select__item",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixSelect.ItemText, { children: option.label })
+          },
+          option.value
+        )) }) }) })
+      ]
+    }
+  );
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Select
+});
+//# sourceMappingURL=index.cjs.map

package/dist/Select/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Select/index.ts","../../src/Select/Select.tsx","../../src/utils/cx.ts"],"sourcesContent":["export { Select } from './Select.js';\nexport type { SelectProps, SelectOption } from './Select.js';\n","'use client';\n\nimport './styles.css';\nimport * as RadixSelect from '@radix-ui/react-select';\nimport { forwardRef } from 'react';\nimport type { ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\ntype Size = 'sm' | 'md';\n\nexport interface SelectOption {\n  value: string;\n  label: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface SelectProps {\n  /** 선택지 목록. */\n  options: SelectOption[];\n  /**\n   * 사이즈. sm 36 / md 42 px 높이 (디자인 시스템의 Small/Large).\n   * @default 'md'\n   */\n  size?: Size;\n  /** 값이 없을 때 트리거에 표시할 문구. */\n  placeholder?: ReactNode;\n  /** 선택된 값 (제어형). */\n  value?: string;\n  /** 초기 값 (비제어형). */\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /** 열림 상태 제어 (선택). */\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  disabled?: boolean;\n  /** 컨테이너 전체 너비로 확장. @default false */\n  block?: boolean;\n  /** 폼 전송용 name — 네이티브 select처럼 폼에 참여. */\n  name?: string;\n  required?: boolean;\n  /** 포털 렌더 대상. 기본 document.body. */\n  container?: HTMLElement | null;\n  /** 트리거에 추가할 className. */\n  className?: string;\n  /** 시각 라벨이 없을 때 접근 가능한 이름. */\n  'aria-label'?: string;\n}\n\n/** 디자인 시스템의 8px 삼각 캐럿 (열림 시 CSS로 회전). */\nconst CaretIcon = () => (\n  <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" aria-hidden=\"true\">\n    <path d=\"M1.1 2.5h5.8L4 5.9z\" fill=\"currentColor\" />\n  </svg>\n);\n\n/**\n * 셀렉트 박스 (단일 선택). Radix Select 기반 — 키보드 탐색·타입어헤드·\n * 포지셔닝·aria 연결을 자동 제공. 옵션 목록은 `options` 배열로 전달한다.\n *\n * 다중 선택(체크박스 옵션)·서브메뉴 변형은 별도 컴포넌트(DropdownMenu) 범위.\n *\n * @example\n * <Select\n *   aria-label=\"정렬\"\n *   placeholder=\"정렬 선택\"\n *   options={[\n *     { value: 'latest', label: '최신순' },\n *     { value: 'edited', label: '수정순' },\n *   ]}\n *   onValueChange={setSort}\n * />\n */\nexport const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n  {\n    options,\n    size = 'md',\n    placeholder,\n    value,\n    defaultValue,\n    onValueChange,\n    open,\n    defaultOpen,\n    onOpenChange,\n    disabled = false,\n    block = false,\n    name,\n    required,\n    container,\n    className,\n    'aria-label': ariaLabel,\n  },\n  ref,\n) {\n  return (\n    <RadixSelect.Root\n      value={value}\n      defaultValue={defaultValue}\n      onValueChange={onValueChange}\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      disabled={disabled}\n      name={name}\n      required={required}\n    >\n      <RadixSelect.Trigger\n        ref={ref}\n        aria-label={ariaLabel}\n        className={cx(\n          'nuri-select__trigger',\n          `nuri-select__trigger--${size}`,\n          block && 'nuri-select__trigger--block',\n          className,\n        )}\n      >\n        <span className=\"nuri-select__value\">\n          <RadixSelect.Value placeholder={placeholder} />\n        </span>\n        <RadixSelect.Icon className=\"nuri-select__caret\">\n          <CaretIcon />\n        </RadixSelect.Icon>\n      </RadixSelect.Trigger>\n\n      <RadixSelect.Portal container={container}>\n        <RadixSelect.Content className=\"nuri-select__content\" position=\"popper\" sideOffset={6}>\n          <RadixSelect.Viewport className=\"nuri-select__viewport\">\n            {options.map((option) => (\n              <RadixSelect.Item\n                key={option.value}\n                value={option.value}\n                disabled={option.disabled}\n                className=\"nuri-select__item\"\n              >\n                <RadixSelect.ItemText>{option.label}</RadixSelect.ItemText>\n              </RadixSelect.Item>\n            ))}\n          </RadixSelect.Viewport>\n        </RadixSelect.Content>\n      </RadixSelect.Portal>\n    </RadixSelect.Root>\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,kBAA6B;AAC7B,mBAA2B;;;ACApB,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;AD8CI;AAFJ,IAAM,YAAY,MAChB,4CAAC,SAAI,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,MAAK,QAAO,eAAY,QAClE,sDAAC,UAAK,GAAE,uBAAsB,MAAK,gBAAe,GACpD;AAoBK,IAAM,aAAS,yBAA2C,SAASA,QACxE;AAAA,EACE;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GACA,KACA;AACA,SACE;AAAA,IAAa;AAAA,IAAZ;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAa;AAAA,UAAZ;AAAA,YACC;AAAA,YACA,cAAY;AAAA,YACZ,WAAW;AAAA,cACT;AAAA,cACA,yBAAyB,IAAI;AAAA,cAC7B,SAAS;AAAA,cACT;AAAA,YACF;AAAA,YAEA;AAAA,0DAAC,UAAK,WAAU,sBACd,sDAAa,mBAAZ,EAAkB,aAA0B,GAC/C;AAAA,cACA,4CAAa,kBAAZ,EAAiB,WAAU,sBAC1B,sDAAC,aAAU,GACb;AAAA;AAAA;AAAA,QACF;AAAA,QAEA,4CAAa,oBAAZ,EAAmB,WAClB,sDAAa,qBAAZ,EAAoB,WAAU,wBAAuB,UAAS,UAAS,YAAY,GAClF,sDAAa,sBAAZ,EAAqB,WAAU,yBAC7B,kBAAQ,IAAI,CAAC,WACZ;AAAA,UAAa;AAAA,UAAZ;AAAA,YAEC,OAAO,OAAO;AAAA,YACd,UAAU,OAAO;AAAA,YACjB,WAAU;AAAA,YAEV,sDAAa,sBAAZ,EAAsB,iBAAO,OAAM;AAAA;AAAA,UAL/B,OAAO;AAAA,QAMd,CACD,GACH,GACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["Select"]}

package/dist/Select/index.d.cts

@@ -0,0 +1,61 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type Size = 'sm' | 'md';
+interface SelectOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+interface SelectProps {
+    /** 선택지 목록. */
+    options: SelectOption[];
+    /**
+     * 사이즈. sm 36 / md 42 px 높이 (디자인 시스템의 Small/Large).
+     * @default 'md'
+     */
+    size?: Size;
+    /** 값이 없을 때 트리거에 표시할 문구. */
+    placeholder?: ReactNode;
+    /** 선택된 값 (제어형). */
+    value?: string;
+    /** 초기 값 (비제어형). */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** 열림 상태 제어 (선택). */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    /** 컨테이너 전체 너비로 확장. @default false */
+    block?: boolean;
+    /** 폼 전송용 name — 네이티브 select처럼 폼에 참여. */
+    name?: string;
+    required?: boolean;
+    /** 포털 렌더 대상. 기본 document.body. */
+    container?: HTMLElement | null;
+    /** 트리거에 추가할 className. */
+    className?: string;
+    /** 시각 라벨이 없을 때 접근 가능한 이름. */
+    'aria-label'?: string;
+}
+/**
+ * 셀렉트 박스 (단일 선택). Radix Select 기반 — 키보드 탐색·타입어헤드·
+ * 포지셔닝·aria 연결을 자동 제공. 옵션 목록은 `options` 배열로 전달한다.
+ *
+ * 다중 선택(체크박스 옵션)·서브메뉴 변형은 별도 컴포넌트(DropdownMenu) 범위.
+ *
+ * @example
+ * <Select
+ *   aria-label="정렬"
+ *   placeholder="정렬 선택"
+ *   options={[
+ *     { value: 'latest', label: '최신순' },
+ *     { value: 'edited', label: '수정순' },
+ *   ]}
+ *   onValueChange={setSort}
+ * />
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Select, type SelectOption, type SelectProps };

package/dist/Select/index.d.ts

@@ -0,0 +1,61 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type Size = 'sm' | 'md';
+interface SelectOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+interface SelectProps {
+    /** 선택지 목록. */
+    options: SelectOption[];
+    /**
+     * 사이즈. sm 36 / md 42 px 높이 (디자인 시스템의 Small/Large).
+     * @default 'md'
+     */
+    size?: Size;
+    /** 값이 없을 때 트리거에 표시할 문구. */
+    placeholder?: ReactNode;
+    /** 선택된 값 (제어형). */
+    value?: string;
+    /** 초기 값 (비제어형). */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** 열림 상태 제어 (선택). */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    /** 컨테이너 전체 너비로 확장. @default false */
+    block?: boolean;
+    /** 폼 전송용 name — 네이티브 select처럼 폼에 참여. */
+    name?: string;
+    required?: boolean;
+    /** 포털 렌더 대상. 기본 document.body. */
+    container?: HTMLElement | null;
+    /** 트리거에 추가할 className. */
+    className?: string;
+    /** 시각 라벨이 없을 때 접근 가능한 이름. */
+    'aria-label'?: string;
+}
+/**
+ * 셀렉트 박스 (단일 선택). Radix Select 기반 — 키보드 탐색·타입어헤드·
+ * 포지셔닝·aria 연결을 자동 제공. 옵션 목록은 `options` 배열로 전달한다.
+ *
+ * 다중 선택(체크박스 옵션)·서브메뉴 변형은 별도 컴포넌트(DropdownMenu) 범위.
+ *
+ * @example
+ * <Select
+ *   aria-label="정렬"
+ *   placeholder="정렬 선택"
+ *   options={[
+ *     { value: 'latest', label: '최신순' },
+ *     { value: 'edited', label: '수정순' },
+ *   ]}
+ *   onValueChange={setSort}
+ * />
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Select, type SelectOption, type SelectProps };

package/dist/Select/index.js

@@ -0,0 +1,79 @@
+// src/Select/Select.tsx
+import "./styles.css";
+import * as RadixSelect from "@radix-ui/react-select";
+import { forwardRef } from "react";
+
+// src/utils/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/Select/Select.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CaretIcon = () => /* @__PURE__ */ jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M1.1 2.5h5.8L4 5.9z", fill: "currentColor" }) });
+var Select = forwardRef(function Select2({
+  options,
+  size = "md",
+  placeholder,
+  value,
+  defaultValue,
+  onValueChange,
+  open,
+  defaultOpen,
+  onOpenChange,
+  disabled = false,
+  block = false,
+  name,
+  required,
+  container,
+  className,
+  "aria-label": ariaLabel
+}, ref) {
+  return /* @__PURE__ */ jsxs(
+    RadixSelect.Root,
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      open,
+      defaultOpen,
+      onOpenChange,
+      disabled,
+      name,
+      required,
+      children: [
+        /* @__PURE__ */ jsxs(
+          RadixSelect.Trigger,
+          {
+            ref,
+            "aria-label": ariaLabel,
+            className: cx(
+              "nuri-select__trigger",
+              `nuri-select__trigger--${size}`,
+              block && "nuri-select__trigger--block",
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "nuri-select__value", children: /* @__PURE__ */ jsx(RadixSelect.Value, { placeholder }) }),
+              /* @__PURE__ */ jsx(RadixSelect.Icon, { className: "nuri-select__caret", children: /* @__PURE__ */ jsx(CaretIcon, {}) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(RadixSelect.Portal, { container, children: /* @__PURE__ */ jsx(RadixSelect.Content, { className: "nuri-select__content", position: "popper", sideOffset: 6, children: /* @__PURE__ */ jsx(RadixSelect.Viewport, { className: "nuri-select__viewport", children: options.map((option) => /* @__PURE__ */ jsx(
+          RadixSelect.Item,
+          {
+            value: option.value,
+            disabled: option.disabled,
+            className: "nuri-select__item",
+            children: /* @__PURE__ */ jsx(RadixSelect.ItemText, { children: option.label })
+          },
+          option.value
+        )) }) }) })
+      ]
+    }
+  );
+});
+export {
+  Select
+};
+//# sourceMappingURL=index.js.map

package/dist/Select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Select/Select.tsx","../../src/utils/cx.ts"],"sourcesContent":["'use client';\n\nimport './styles.css';\nimport * as RadixSelect from '@radix-ui/react-select';\nimport { forwardRef } from 'react';\nimport type { ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\ntype Size = 'sm' | 'md';\n\nexport interface SelectOption {\n  value: string;\n  label: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface SelectProps {\n  /** 선택지 목록. */\n  options: SelectOption[];\n  /**\n   * 사이즈. sm 36 / md 42 px 높이 (디자인 시스템의 Small/Large).\n   * @default 'md'\n   */\n  size?: Size;\n  /** 값이 없을 때 트리거에 표시할 문구. */\n  placeholder?: ReactNode;\n  /** 선택된 값 (제어형). */\n  value?: string;\n  /** 초기 값 (비제어형). */\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /** 열림 상태 제어 (선택). */\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  disabled?: boolean;\n  /** 컨테이너 전체 너비로 확장. @default false */\n  block?: boolean;\n  /** 폼 전송용 name — 네이티브 select처럼 폼에 참여. */\n  name?: string;\n  required?: boolean;\n  /** 포털 렌더 대상. 기본 document.body. */\n  container?: HTMLElement | null;\n  /** 트리거에 추가할 className. */\n  className?: string;\n  /** 시각 라벨이 없을 때 접근 가능한 이름. */\n  'aria-label'?: string;\n}\n\n/** 디자인 시스템의 8px 삼각 캐럿 (열림 시 CSS로 회전). */\nconst CaretIcon = () => (\n  <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" aria-hidden=\"true\">\n    <path d=\"M1.1 2.5h5.8L4 5.9z\" fill=\"currentColor\" />\n  </svg>\n);\n\n/**\n * 셀렉트 박스 (단일 선택). Radix Select 기반 — 키보드 탐색·타입어헤드·\n * 포지셔닝·aria 연결을 자동 제공. 옵션 목록은 `options` 배열로 전달한다.\n *\n * 다중 선택(체크박스 옵션)·서브메뉴 변형은 별도 컴포넌트(DropdownMenu) 범위.\n *\n * @example\n * <Select\n *   aria-label=\"정렬\"\n *   placeholder=\"정렬 선택\"\n *   options={[\n *     { value: 'latest', label: '최신순' },\n *     { value: 'edited', label: '수정순' },\n *   ]}\n *   onValueChange={setSort}\n * />\n */\nexport const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n  {\n    options,\n    size = 'md',\n    placeholder,\n    value,\n    defaultValue,\n    onValueChange,\n    open,\n    defaultOpen,\n    onOpenChange,\n    disabled = false,\n    block = false,\n    name,\n    required,\n    container,\n    className,\n    'aria-label': ariaLabel,\n  },\n  ref,\n) {\n  return (\n    <RadixSelect.Root\n      value={value}\n      defaultValue={defaultValue}\n      onValueChange={onValueChange}\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      disabled={disabled}\n      name={name}\n      required={required}\n    >\n      <RadixSelect.Trigger\n        ref={ref}\n        aria-label={ariaLabel}\n        className={cx(\n          'nuri-select__trigger',\n          `nuri-select__trigger--${size}`,\n          block && 'nuri-select__trigger--block',\n          className,\n        )}\n      >\n        <span className=\"nuri-select__value\">\n          <RadixSelect.Value placeholder={placeholder} />\n        </span>\n        <RadixSelect.Icon className=\"nuri-select__caret\">\n          <CaretIcon />\n        </RadixSelect.Icon>\n      </RadixSelect.Trigger>\n\n      <RadixSelect.Portal container={container}>\n        <RadixSelect.Content className=\"nuri-select__content\" position=\"popper\" sideOffset={6}>\n          <RadixSelect.Viewport className=\"nuri-select__viewport\">\n            {options.map((option) => (\n              <RadixSelect.Item\n                key={option.value}\n                value={option.value}\n                disabled={option.disabled}\n                className=\"nuri-select__item\"\n              >\n                <RadixSelect.ItemText>{option.label}</RadixSelect.ItemText>\n              </RadixSelect.Item>\n            ))}\n          </RadixSelect.Viewport>\n        </RadixSelect.Content>\n      </RadixSelect.Portal>\n    </RadixSelect.Root>\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,iBAAiB;AAC7B,SAAS,kBAAkB;;;ACApB,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;AD8CI,cAsDE,YAtDF;AAFJ,IAAM,YAAY,MAChB,oBAAC,SAAI,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,MAAK,QAAO,eAAY,QAClE,8BAAC,UAAK,GAAE,uBAAsB,MAAK,gBAAe,GACpD;AAoBK,IAAM,SAAS,WAA2C,SAASA,QACxE;AAAA,EACE;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GACA,KACA;AACA,SACE;AAAA,IAAa;AAAA,IAAZ;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAa;AAAA,UAAZ;AAAA,YACC;AAAA,YACA,cAAY;AAAA,YACZ,WAAW;AAAA,cACT;AAAA,cACA,yBAAyB,IAAI;AAAA,cAC7B,SAAS;AAAA,cACT;AAAA,YACF;AAAA,YAEA;AAAA,kCAAC,UAAK,WAAU,sBACd,8BAAa,mBAAZ,EAAkB,aAA0B,GAC/C;AAAA,cACA,oBAAa,kBAAZ,EAAiB,WAAU,sBAC1B,8BAAC,aAAU,GACb;AAAA;AAAA;AAAA,QACF;AAAA,QAEA,oBAAa,oBAAZ,EAAmB,WAClB,8BAAa,qBAAZ,EAAoB,WAAU,wBAAuB,UAAS,UAAS,YAAY,GAClF,8BAAa,sBAAZ,EAAqB,WAAU,yBAC7B,kBAAQ,IAAI,CAAC,WACZ;AAAA,UAAa;AAAA,UAAZ;AAAA,YAEC,OAAO,OAAO;AAAA,YACd,UAAU,OAAO;AAAA,YACjB,WAAU;AAAA,YAEV,8BAAa,sBAAZ,EAAsB,iBAAO,OAAM;AAAA;AAAA,UAL/B,OAAO;AAAA,QAMd,CACD,GACH,GACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["Select"]}

package/dist/Select/styles.css

@@ -0,0 +1,157 @@
+/* ── 트리거 ── */
+.nuri-select__trigger {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 var(--nuri-select-padding-right) 0 var(--nuri-select-padding-left);
+  background-color: var(--nuri-select-bg);
+  border: 1px solid var(--nuri-select-border);
+  border-radius: var(--nuri-select-radius);
+  font-family: inherit; /* 앱 폰트 상속 */
+  font-size: var(--nuri-select-font-size);
+  font-weight: var(--nuri-select-font-weight);
+  line-height: var(--nuri-select-line-height);
+  color: var(--nuri-select-text);
+  cursor: pointer;
+  user-select: none;
+  transition:
+    border-color 120ms ease,
+    color 120ms ease;
+}
+.nuri-select__trigger--sm {
+  height: var(--nuri-select-size-sm-height);
+}
+.nuri-select__trigger--md {
+  height: var(--nuri-select-size-md-height);
+}
+.nuri-select__trigger--block {
+  display: flex;
+  width: 100%;
+}
+
+/* 포커스 — 링 대신 보더 색 변화 (Input의 focus 문법과 통일).
+   열림 상태와는 텍스트색·캐럿 회전·패널 유무로 구분된다. */
+.nuri-select__trigger:focus-visible {
+  outline: none;
+  border-color: var(--nuri-select-border-open, var(--nuri-color-brand-default));
+}
+
+/* 열림(Spread) — 브랜드색 보더·텍스트 + 캐럿 회전 */
+.nuri-select__trigger[data-state='open'] {
+  border-color: var(--nuri-select-border-open, var(--nuri-color-brand-default));
+  color: var(--nuri-select-text-open, var(--nuri-color-brand-default));
+}
+.nuri-select__trigger[data-state='open'] .nuri-select__caret > svg {
+  transform: rotate(180deg);
+}
+
+.nuri-select__trigger[data-disabled] {
+  background-color: var(--nuri-select-bg-disabled);
+  border-color: var(--nuri-select-border-disabled);
+  color: var(--nuri-select-text-disabled);
+  cursor: not-allowed;
+}
+
+.nuri-select__value {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+
+.nuri-select__caret {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--nuri-select-caret-size);
+  height: var(--nuri-select-caret-size);
+  color: var(--nuri-select-caret-color);
+}
+.nuri-select__caret > svg {
+  transition: transform 150ms ease;
+}
+.nuri-select__trigger[data-state='open'] .nuri-select__caret {
+  color: var(--nuri-select-text-open, var(--nuri-color-brand-default));
+}
+
+/* ── 드롭다운 패널 ── */
+.nuri-select__content {
+  box-sizing: border-box;
+  z-index: var(--nuri-select-content-z-index);
+  min-width: var(--radix-select-trigger-width);
+  max-height: var(--radix-select-content-available-height);
+  padding: var(--nuri-select-content-padding);
+  background-color: var(--nuri-select-content-bg);
+  border: 1px solid var(--nuri-select-content-border);
+  border-radius: var(--nuri-select-content-radius);
+  box-shadow: var(--nuri-select-content-shadow);
+  overflow: hidden;
+}
+.nuri-select__viewport {
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── 옵션 ── */
+.nuri-select__item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  height: var(--nuri-select-item-height);
+  padding: 0 var(--nuri-select-item-padding-x);
+  border-radius: var(--nuri-select-item-radius);
+  font-family: inherit;
+  font-size: var(--nuri-select-item-font-size);
+  font-weight: var(--nuri-select-item-font-weight);
+  line-height: var(--nuri-select-line-height);
+  color: var(--nuri-select-item-text);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  white-space: nowrap;
+}
+
+/* 키보드/호버 하이라이트 */
+.nuri-select__item[data-highlighted] {
+  background-color: var(--nuri-select-item-bg-highlighted);
+}
+
+/* 선택됨 — 옅은 브랜드 배경 + 브랜드 텍스트 */
+.nuri-select__item[data-state='checked'] {
+  background-color: var(--nuri-select-item-bg-selected, var(--nuri-color-brand-subtle));
+  color: var(--nuri-select-item-text-selected, var(--nuri-color-brand-default));
+}
+
+.nuri-select__item[data-disabled] {
+  color: var(--nuri-select-item-text-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ── 애니메이션 ── */
+.nuri-select__content[data-state='open'] {
+  animation: nuri-select-in 150ms ease;
+}
+@keyframes nuri-select-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .nuri-select__content[data-state='open'] {
+    animation-duration: 1ms;
+  }
+  .nuri-select__caret > svg {
+    transition: none;
+  }
+}

package/dist/Switch/index.cjs

@@ -0,0 +1,71 @@
+"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/Switch/index.ts
+var Switch_exports = {};
+__export(Switch_exports, {
+  Switch: () => Switch
+});
+module.exports = __toCommonJS(Switch_exports);
+
+// src/Switch/Switch.tsx
+var import_styles = require("./styles.css");
+var RadixSwitch = __toESM(require("@radix-ui/react-switch"), 1);
+var import_react = require("react");
+
+// src/utils/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/Switch/Switch.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Switch = (0, import_react.forwardRef)(function Switch2({ label, disabled = false, id: idProp, className, ...rest }, ref) {
+  const reactId = (0, import_react.useId)();
+  const id = idProp ?? `nuri-switch-${reactId}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("nuri-switch", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      RadixSwitch.Root,
+      {
+        ref,
+        id,
+        className: "nuri-switch__control",
+        disabled,
+        ...rest,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixSwitch.Thumb, { className: "nuri-switch__thumb" })
+      }
+    ),
+    label != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: id, className: "nuri-switch__label", children: label })
+  ] });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Switch
+});
+//# sourceMappingURL=index.cjs.map

package/dist/Switch/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Switch/index.ts","../../src/Switch/Switch.tsx","../../src/utils/cx.ts"],"sourcesContent":["export { Switch } from './Switch.js';\nexport type { SwitchProps } from './Switch.js';\n","'use client';\n\nimport './styles.css';\nimport * as RadixSwitch from '@radix-ui/react-switch';\nimport { forwardRef, useId } from 'react';\nimport type { ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\nexport interface SwitchProps {\n  /**\n   * 라벨 (컨트롤 우측). 디자인 시스템의 Toggle은 컨트롤 단독 정의지만,\n   * 범용 사용을 위해 라벨을 지원한다(Checkbox 라벨 스타일 준용). 없으면 `aria-label` 필수.\n   */\n  label?: ReactNode;\n  /** 켜짐 상태 (제어형). */\n  checked?: boolean;\n  /** 초기 상태 (비제어형). */\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  disabled?: boolean;\n  /** 폼 전송용 name. */\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/**\n * 스위치(토글). Radix Switch 기반 — `role=\"switch\"`·Space/Enter 토글·폼 참여 자동.\n * 즉시 적용되는 켬/끔 설정에 사용한다 (제출이 필요한 선택은 Checkbox).\n *\n * @example\n * <Switch label=\"알림 받기\" checked={on} onCheckedChange={setOn} />\n */\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch(\n  { label, disabled = false, id: idProp, className, ...rest },\n  ref,\n) {\n  const reactId = useId();\n  const id = idProp ?? `nuri-switch-${reactId}`;\n\n  return (\n    <div className={cx('nuri-switch', className)}>\n      <RadixSwitch.Root\n        ref={ref}\n        id={id}\n        className=\"nuri-switch__control\"\n        disabled={disabled}\n        {...rest}\n      >\n        <RadixSwitch.Thumb className=\"nuri-switch__thumb\" />\n      </RadixSwitch.Root>\n      {label != null && (\n        <label htmlFor={id} className=\"nuri-switch__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,kBAA6B;AAC7B,mBAAkC;;;ACA3B,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;ADuCI;AARG,IAAM,aAAS,yBAA2C,SAASA,QACxE,EAAE,OAAO,WAAW,OAAO,IAAI,QAAQ,WAAW,GAAG,KAAK,GAC1D,KACA;AACA,QAAM,cAAU,oBAAM;AACtB,QAAM,KAAK,UAAU,eAAe,OAAO;AAE3C,SACE,6CAAC,SAAI,WAAW,GAAG,eAAe,SAAS,GACzC;AAAA;AAAA,MAAa;AAAA,MAAZ;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACV;AAAA,QACC,GAAG;AAAA,QAEJ,sDAAa,mBAAZ,EAAkB,WAAU,sBAAqB;AAAA;AAAA,IACpD;AAAA,IACC,SAAS,QACR,4CAAC,WAAM,SAAS,IAAI,WAAU,sBAC3B,iBACH;AAAA,KAEJ;AAEJ,CAAC;","names":["Switch"]}