sellmate-design-system-react 0.1.0

package/dist/components/Radio/Radio.js

@@ -0,0 +1,102 @@
+"use client";
+import 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Radio({
+  val,
+  value,
+  label,
+  disabled = false,
+  name,
+  onValueChange,
+  className,
+  style
+}) {
+  const valStr = String(val);
+  const checked = value === val;
+  const select = () => {
+    if (!disabled && !checked) onValueChange?.(val);
+  };
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      role: "radio",
+      "aria-checked": checked,
+      tabIndex: disabled ? -1 : 0,
+      onClick: select,
+      onKeyDown: (e) => {
+        if (e.key === " " || e.key === "Enter") {
+          e.preventDefault();
+          select();
+        }
+      },
+      className: cn(
+        "inline-flex items-center gap-[8px]",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        className
+      ),
+      style,
+      children: [
+        name && /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "radio",
+            name,
+            value: valStr,
+            checked,
+            disabled,
+            onChange: () => {
+            },
+            tabIndex: -1,
+            "aria-hidden": true,
+            className: "sr-only"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-full border border-solid border-[color:var(--rd-border)] bg-[var(--rd-bg)]",
+              !disabled && !checked && "hover:border-[color:var(--cmp-radio-border-hover)] hover:bg-[var(--cmp-radio-bg-hover)]"
+            ),
+            style: {
+              "--rd-bg": disabled ? "var(--cmp-radio-bg-disabled)" : "var(--cmp-radio-bg-default)",
+              "--rd-border": disabled ? "var(--cmp-radio-border-disabled)" : checked ? "var(--cmp-radio-border-active)" : "var(--cmp-radio-border-default)"
+            },
+            children: checked && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "h-[10px] w-[10px] rounded-full",
+                style: {
+                  background: disabled ? "var(--cmp-radio-dot-disabled)" : "var(--cmp-radio-dot-default)"
+                }
+              }
+            )
+          }
+        ),
+        label && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "grid text-[12px] leading-[20px]",
+            style: {
+              color: disabled ? "var(--cmp-radio-label-disabled)" : "var(--cmp-radio-label-default)"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "invisible font-medium", style: { gridArea: "1 / 1" }, children: label }),
+              /* @__PURE__ */ jsx("span", { style: { gridArea: "1 / 1", fontWeight: checked ? 500 : 400 }, children: label })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Radio };
+//# sourceMappingURL=Radio.js.map
+//# sourceMappingURL=Radio.js.map

package/dist/components/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"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","file":"Radio.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { type CSSProperties } from 'react';\nimport { cn } from '../../lib/cn';\n\n/** 라디오 값 타입 (sd-radio RadioValue) */\nexport type RadioValue = string | number | boolean;\n\nexport interface RadioProps {\n  /** 이 라디오의 값 */\n  val: RadioValue;\n  /** 그룹의 현재 선택 값 */\n  value?: RadioValue | null;\n  /** 라벨 */\n  label?: string;\n  /** 비활성 */\n  disabled?: boolean;\n  /** native radio name (form-agnostic 그룹핑) */\n  name?: string;\n  /** 선택 변경 (sdUpdate) — 선택된 val 전달 */\n  onValueChange?: (val: RadioValue) => void;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** Radio — sd-radio 포팅. value===val 이면 선택. 단독 또는 RadioGroup 안에서 사용. */\nexport function Radio({\n  val,\n  value,\n  label,\n  disabled = false,\n  name,\n  onValueChange,\n  className,\n  style,\n}: RadioProps) {\n  // key/name 속성용 문자열 표현\n  const valStr = String(val);\n  const checked = value === val;\n  const select = () => {\n    if (!disabled && !checked) onValueChange?.(val);\n  };\n\n  return (\n    <label\n      role=\"radio\"\n      aria-checked={checked}\n      tabIndex={disabled ? -1 : 0}\n      onClick={select}\n      onKeyDown={e => {\n        if (e.key === ' ' || e.key === 'Enter') {\n          e.preventDefault();\n          select();\n        }\n      }}\n      className={cn(\n        'inline-flex items-center gap-[8px]',\n        disabled ? 'cursor-not-allowed' : 'cursor-pointer',\n        className,\n      )}\n      style={style}\n    >\n      {name && (\n        <input\n          type=\"radio\"\n          name={name}\n          value={valStr}\n          checked={checked}\n          disabled={disabled}\n          onChange={() => {}}\n          tabIndex={-1}\n          aria-hidden\n          className=\"sr-only\"\n        />\n      )}\n      <span\n        className={cn(\n          'flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-full border border-solid border-[color:var(--rd-border)] bg-[var(--rd-bg)]',\n          !disabled &&\n            !checked &&\n            'hover:border-[color:var(--cmp-radio-border-hover)] hover:bg-[var(--cmp-radio-bg-hover)]',\n        )}\n        style={\n          {\n            '--rd-bg': disabled ? 'var(--cmp-radio-bg-disabled)' : 'var(--cmp-radio-bg-default)',\n            '--rd-border': disabled\n              ? 'var(--cmp-radio-border-disabled)'\n              : checked\n                ? 'var(--cmp-radio-border-active)'\n                : 'var(--cmp-radio-border-default)',\n          } as CSSProperties\n        }\n      >\n        {checked && (\n          <span\n            className=\"h-[10px] w-[10px] rounded-full\"\n            style={{\n              background: disabled\n                ? 'var(--cmp-radio-dot-disabled)'\n                : 'var(--cmp-radio-dot-default)',\n            }}\n          />\n        )}\n      </span>\n      {label && (\n        <span\n          className=\"grid text-[12px] leading-[20px]\"\n          style={{\n            color: disabled ? 'var(--cmp-radio-label-disabled)' : 'var(--cmp-radio-label-default)',\n          }}\n        >\n          <span aria-hidden className=\"invisible font-medium\" style={{ gridArea: '1 / 1' }}>\n            {label}\n          </span>\n          <span style={{ gridArea: '1 / 1', fontWeight: checked ? 500 : 400 }}>{label}</span>\n        </span>\n      )}\n    </label>\n  );\n}\n"]}

package/dist/components/Radio/RadioGroup.cjs

@@ -0,0 +1,139 @@
+"use client";
+'use strict';
+
+require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function Radio({
+  val,
+  value,
+  label,
+  disabled = false,
+  name,
+  onValueChange,
+  className,
+  style
+}) {
+  const valStr = String(val);
+  const checked = value === val;
+  const select = () => {
+    if (!disabled && !checked) onValueChange?.(val);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      role: "radio",
+      "aria-checked": checked,
+      tabIndex: disabled ? -1 : 0,
+      onClick: select,
+      onKeyDown: (e) => {
+        if (e.key === " " || e.key === "Enter") {
+          e.preventDefault();
+          select();
+        }
+      },
+      className: cn(
+        "inline-flex items-center gap-[8px]",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        className
+      ),
+      style,
+      children: [
+        name && /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "radio",
+            name,
+            value: valStr,
+            checked,
+            disabled,
+            onChange: () => {
+            },
+            tabIndex: -1,
+            "aria-hidden": true,
+            className: "sr-only"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-full border border-solid border-[color:var(--rd-border)] bg-[var(--rd-bg)]",
+              !disabled && !checked && "hover:border-[color:var(--cmp-radio-border-hover)] hover:bg-[var(--cmp-radio-bg-hover)]"
+            ),
+            style: {
+              "--rd-bg": disabled ? "var(--cmp-radio-bg-disabled)" : "var(--cmp-radio-bg-default)",
+              "--rd-border": disabled ? "var(--cmp-radio-border-disabled)" : checked ? "var(--cmp-radio-border-active)" : "var(--cmp-radio-border-default)"
+            },
+            children: checked && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "h-[10px] w-[10px] rounded-full",
+                style: {
+                  background: disabled ? "var(--cmp-radio-dot-disabled)" : "var(--cmp-radio-dot-default)"
+                }
+              }
+            )
+          }
+        ),
+        label && /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: "grid text-[12px] leading-[20px]",
+            style: {
+              color: disabled ? "var(--cmp-radio-label-disabled)" : "var(--cmp-radio-label-default)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "invisible font-medium", style: { gridArea: "1 / 1" }, children: label }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { gridArea: "1 / 1", fontWeight: checked ? 500 : 400 }, children: label })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function RadioGroup({
+  options = [],
+  value,
+  direction = "vertical",
+  disabled = false,
+  groupName,
+  onValueChange,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "radiogroup",
+      className: cn(
+        "inline-flex",
+        direction === "vertical" ? "flex-col gap-[8px]" : "flex-row gap-[20px]",
+        className
+      ),
+      style,
+      children: options.map((o) => /* @__PURE__ */ jsxRuntime.jsx(
+        Radio,
+        {
+          val: o.value,
+          value,
+          label: o.label,
+          name: groupName,
+          disabled: disabled || o.disabled,
+          onValueChange
+        },
+        String(o.value)
+      ))
+    }
+  );
+}
+
+exports.RadioGroup = RadioGroup;
+//# sourceMappingURL=RadioGroup.cjs.map
+//# sourceMappingURL=RadioGroup.cjs.map

package/dist/components/Radio/RadioGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/Radio/Radio.tsx","../../../src/components/Radio/RadioGroup.tsx"],"names":["twMerge","clsx","jsxs","jsx"],"mappings":";;;;;;;AAOO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACiBO,SAAS,KAAA,CAAM;AAAA,EACpB,GAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,IAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAe;AAEb,EAAA,MAAM,MAAA,GAAS,OAAO,GAAG,CAAA;AACzB,EAAA,MAAM,UAAU,KAAA,KAAU,GAAA;AAC1B,EAAA,MAAM,SAAS,MAAM;AACnB,IAAA,IAAI,CAAC,QAAA,IAAY,CAAC,OAAA,kBAAyB,GAAG,CAAA;AAAA,EAChD,CAAA;AAEA,EAAA,uBACEC,eAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,OAAA;AAAA,MACL,cAAA,EAAc,OAAA;AAAA,MACd,QAAA,EAAU,WAAW,EAAA,GAAK,CAAA;AAAA,MAC1B,OAAA,EAAS,MAAA;AAAA,MACT,WAAW,CAAA,CAAA,KAAK;AACd,QAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,GAAA,IAAO,CAAA,CAAE,QAAQ,OAAA,EAAS;AACtC,UAAA,CAAA,CAAE,cAAA,EAAe;AACjB,UAAA,MAAA,EAAO;AAAA,QACT;AAAA,MACF,CAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,oCAAA;AAAA,QACA,WAAW,oBAAA,GAAuB,gBAAA;AAAA,QAClC;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA,oBACCC,cAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,OAAA;AAAA,YACL,IAAA;AAAA,YACA,KAAA,EAAO,MAAA;AAAA,YACP,OAAA;AAAA,YACA,QAAA;AAAA,YACA,UAAU,MAAM;AAAA,YAAC,CAAA;AAAA,YACjB,QAAA,EAAU,EAAA;AAAA,YACV,aAAA,EAAW,IAAA;AAAA,YACX,SAAA,EAAU;AAAA;AAAA,SACZ;AAAA,wBAEFA,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,qJAAA;AAAA,cACA,CAAC,QAAA,IACC,CAAC,OAAA,IACD;AAAA,aACJ;AAAA,YACA,KAAA,EACE;AAAA,cACE,SAAA,EAAW,WAAW,8BAAA,GAAiC,6BAAA;AAAA,cACvD,aAAA,EAAe,QAAA,GACX,kCAAA,GACA,OAAA,GACE,gCAAA,GACA;AAAA,aACR;AAAA,YAGD,QAAA,EAAA,OAAA,oBACCA,cAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAU,gCAAA;AAAA,gBACV,KAAA,EAAO;AAAA,kBACL,UAAA,EAAY,WACR,+BAAA,GACA;AAAA;AACN;AAAA;AACF;AAAA,SAEJ;AAAA,QACC,KAAA,oBACCD,eAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,iCAAA;AAAA,YACV,KAAA,EAAO;AAAA,cACL,KAAA,EAAO,WAAW,iCAAA,GAAoC;AAAA,aACxD;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAAC,cAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAW,IAAA,EAAC,SAAA,EAAU,uBAAA,EAAwB,OAAO,EAAE,QAAA,EAAU,OAAA,EAAQ,EAC5E,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,8BACAA,cAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,EAAE,QAAA,EAAU,OAAA,EAAS,UAAA,EAAY,OAAA,GAAU,GAAA,GAAM,GAAA,EAAI,EAAI,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA;AAC9E;AAAA;AAAA,GAEJ;AAEJ;ACxFO,SAAS,UAAA,CAAW;AAAA,EACzB,UAAU,EAAC;AAAA,EACX,KAAA;AAAA,EACA,SAAA,GAAY,UAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAoB;AAClB,EAAA,uBACEA,cAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,YAAA;AAAA,MACL,SAAA,EAAW,EAAA;AAAA,QACT,aAAA;AAAA,QACA,SAAA,KAAc,aAAa,oBAAA,GAAuB,qBAAA;AAAA,QAClD;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MAEC,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAA,CAAA,qBACXA,cAAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,KAAK,CAAA,CAAE,KAAA;AAAA,UACP,KAAA;AAAA,UACA,OAAO,CAAA,CAAE,KAAA;AAAA,UACT,IAAA,EAAM,SAAA;AAAA,UACN,QAAA,EAAU,YAAY,CAAA,CAAE,QAAA;AAAA,UACxB;AAAA,SAAA;AAAA,QANK,MAAA,CAAO,EAAE,KAAK;AAAA,OAQtB;AAAA;AAAA,GACH;AAEJ","file":"RadioGroup.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { type CSSProperties } from 'react';\nimport { cn } from '../../lib/cn';\n\n/** 라디오 값 타입 (sd-radio RadioValue) */\nexport type RadioValue = string | number | boolean;\n\nexport interface RadioProps {\n  /** 이 라디오의 값 */\n  val: RadioValue;\n  /** 그룹의 현재 선택 값 */\n  value?: RadioValue | null;\n  /** 라벨 */\n  label?: string;\n  /** 비활성 */\n  disabled?: boolean;\n  /** native radio name (form-agnostic 그룹핑) */\n  name?: string;\n  /** 선택 변경 (sdUpdate) — 선택된 val 전달 */\n  onValueChange?: (val: RadioValue) => void;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** Radio — sd-radio 포팅. value===val 이면 선택. 단독 또는 RadioGroup 안에서 사용. */\nexport function Radio({\n  val,\n  value,\n  label,\n  disabled = false,\n  name,\n  onValueChange,\n  className,\n  style,\n}: RadioProps) {\n  // key/name 속성용 문자열 표현\n  const valStr = String(val);\n  const checked = value === val;\n  const select = () => {\n    if (!disabled && !checked) onValueChange?.(val);\n  };\n\n  return (\n    <label\n      role=\"radio\"\n      aria-checked={checked}\n      tabIndex={disabled ? -1 : 0}\n      onClick={select}\n      onKeyDown={e => {\n        if (e.key === ' ' || e.key === 'Enter') {\n          e.preventDefault();\n          select();\n        }\n      }}\n      className={cn(\n        'inline-flex items-center gap-[8px]',\n        disabled ? 'cursor-not-allowed' : 'cursor-pointer',\n        className,\n      )}\n      style={style}\n    >\n      {name && (\n        <input\n          type=\"radio\"\n          name={name}\n          value={valStr}\n          checked={checked}\n          disabled={disabled}\n          onChange={() => {}}\n          tabIndex={-1}\n          aria-hidden\n          className=\"sr-only\"\n        />\n      )}\n      <span\n        className={cn(\n          'flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-full border border-solid border-[color:var(--rd-border)] bg-[var(--rd-bg)]',\n          !disabled &&\n            !checked &&\n            'hover:border-[color:var(--cmp-radio-border-hover)] hover:bg-[var(--cmp-radio-bg-hover)]',\n        )}\n        style={\n          {\n            '--rd-bg': disabled ? 'var(--cmp-radio-bg-disabled)' : 'var(--cmp-radio-bg-default)',\n            '--rd-border': disabled\n              ? 'var(--cmp-radio-border-disabled)'\n              : checked\n                ? 'var(--cmp-radio-border-active)'\n                : 'var(--cmp-radio-border-default)',\n          } as CSSProperties\n        }\n      >\n        {checked && (\n          <span\n            className=\"h-[10px] w-[10px] rounded-full\"\n            style={{\n              background: disabled\n                ? 'var(--cmp-radio-dot-disabled)'\n                : 'var(--cmp-radio-dot-default)',\n            }}\n          />\n        )}\n      </span>\n      {label && (\n        <span\n          className=\"grid text-[12px] leading-[20px]\"\n          style={{\n            color: disabled ? 'var(--cmp-radio-label-disabled)' : 'var(--cmp-radio-label-default)',\n          }}\n        >\n          <span aria-hidden className=\"invisible font-medium\" style={{ gridArea: '1 / 1' }}>\n            {label}\n          </span>\n          <span style={{ gridArea: '1 / 1', fontWeight: checked ? 500 : 400 }}>{label}</span>\n        </span>\n      )}\n    </label>\n  );\n}\n","'use client';\n\nimport { type CSSProperties } from 'react';\nimport { cn } from '../../lib/cn';\nimport { Radio, type RadioValue } from './Radio';\n\nexport interface RadioOption {\n  /** 옵션 값 (sd-radio-group RadioOption.value) */\n  value: RadioValue;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface RadioGroupProps {\n  /** 옵션 목록 */\n  options?: RadioOption[];\n  /** 현재 선택 값 */\n  value?: RadioValue | null;\n  /** 배치 방향 */\n  direction?: 'vertical' | 'horizontal';\n  /** 전체 비활성 */\n  disabled?: boolean;\n  /** 라디오 name 속성 (form-agnostic 그룹핑) */\n  groupName?: string;\n  /** 선택 변경 (sdUpdate) */\n  onValueChange?: (val: RadioValue) => void;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** RadioGroup — sd-radio-group 포팅. options를 Radio로 렌더. */\nexport function RadioGroup({\n  options = [],\n  value,\n  direction = 'vertical',\n  disabled = false,\n  groupName,\n  onValueChange,\n  className,\n  style,\n}: RadioGroupProps) {\n  return (\n    <div\n      role=\"radiogroup\"\n      className={cn(\n        'inline-flex',\n        direction === 'vertical' ? 'flex-col gap-[8px]' : 'flex-row gap-[20px]',\n        className,\n      )}\n      style={style}\n    >\n      {options.map(o => (\n        <Radio\n          key={String(o.value)}\n          val={o.value}\n          value={value}\n          label={o.label}\n          name={groupName}\n          disabled={disabled || o.disabled}\n          onValueChange={onValueChange}\n        />\n      ))}\n    </div>\n  );\n}\n"]}

package/dist/components/Radio/RadioGroup.d.ts

@@ -0,0 +1,26 @@
+import { type CSSProperties } from 'react';
+import { type RadioValue } from './Radio';
+export interface RadioOption {
+    /** 옵션 값 (sd-radio-group RadioOption.value) */
+    value: RadioValue;
+    label: string;
+    disabled?: boolean;
+}
+export interface RadioGroupProps {
+    /** 옵션 목록 */
+    options?: RadioOption[];
+    /** 현재 선택 값 */
+    value?: RadioValue | null;
+    /** 배치 방향 */
+    direction?: 'vertical' | 'horizontal';
+    /** 전체 비활성 */
+    disabled?: boolean;
+    /** 라디오 name 속성 (form-agnostic 그룹핑) */
+    groupName?: string;
+    /** 선택 변경 (sdUpdate) */
+    onValueChange?: (val: RadioValue) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/** RadioGroup — sd-radio-group 포팅. options를 Radio로 렌더. */
+export declare function RadioGroup({ options, value, direction, disabled, groupName, onValueChange, className, style, }: RadioGroupProps): import("react").JSX.Element;

package/dist/components/Radio/RadioGroup.js

@@ -0,0 +1,137 @@
+"use client";
+import 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Radio({
+  val,
+  value,
+  label,
+  disabled = false,
+  name,
+  onValueChange,
+  className,
+  style
+}) {
+  const valStr = String(val);
+  const checked = value === val;
+  const select = () => {
+    if (!disabled && !checked) onValueChange?.(val);
+  };
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      role: "radio",
+      "aria-checked": checked,
+      tabIndex: disabled ? -1 : 0,
+      onClick: select,
+      onKeyDown: (e) => {
+        if (e.key === " " || e.key === "Enter") {
+          e.preventDefault();
+          select();
+        }
+      },
+      className: cn(
+        "inline-flex items-center gap-[8px]",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        className
+      ),
+      style,
+      children: [
+        name && /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "radio",
+            name,
+            value: valStr,
+            checked,
+            disabled,
+            onChange: () => {
+            },
+            tabIndex: -1,
+            "aria-hidden": true,
+            className: "sr-only"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-full border border-solid border-[color:var(--rd-border)] bg-[var(--rd-bg)]",
+              !disabled && !checked && "hover:border-[color:var(--cmp-radio-border-hover)] hover:bg-[var(--cmp-radio-bg-hover)]"
+            ),
+            style: {
+              "--rd-bg": disabled ? "var(--cmp-radio-bg-disabled)" : "var(--cmp-radio-bg-default)",
+              "--rd-border": disabled ? "var(--cmp-radio-border-disabled)" : checked ? "var(--cmp-radio-border-active)" : "var(--cmp-radio-border-default)"
+            },
+            children: checked && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "h-[10px] w-[10px] rounded-full",
+                style: {
+                  background: disabled ? "var(--cmp-radio-dot-disabled)" : "var(--cmp-radio-dot-default)"
+                }
+              }
+            )
+          }
+        ),
+        label && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "grid text-[12px] leading-[20px]",
+            style: {
+              color: disabled ? "var(--cmp-radio-label-disabled)" : "var(--cmp-radio-label-default)"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "invisible font-medium", style: { gridArea: "1 / 1" }, children: label }),
+              /* @__PURE__ */ jsx("span", { style: { gridArea: "1 / 1", fontWeight: checked ? 500 : 400 }, children: label })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function RadioGroup({
+  options = [],
+  value,
+  direction = "vertical",
+  disabled = false,
+  groupName,
+  onValueChange,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      className: cn(
+        "inline-flex",
+        direction === "vertical" ? "flex-col gap-[8px]" : "flex-row gap-[20px]",
+        className
+      ),
+      style,
+      children: options.map((o) => /* @__PURE__ */ jsx(
+        Radio,
+        {
+          val: o.value,
+          value,
+          label: o.label,
+          name: groupName,
+          disabled: disabled || o.disabled,
+          onValueChange
+        },
+        String(o.value)
+      ))
+    }
+  );
+}
+
+export { RadioGroup };
+//# sourceMappingURL=RadioGroup.js.map
+//# sourceMappingURL=RadioGroup.js.map

package/dist/components/Radio/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/Radio/Radio.tsx","../../../src/components/Radio/RadioGroup.tsx"],"names":["jsx"],"mappings":"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","file":"RadioGroup.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { type CSSProperties } from 'react';\nimport { cn } from '../../lib/cn';\n\n/** 라디오 값 타입 (sd-radio RadioValue) */\nexport type RadioValue = string | number | boolean;\n\nexport interface RadioProps {\n  /** 이 라디오의 값 */\n  val: RadioValue;\n  /** 그룹의 현재 선택 값 */\n  value?: RadioValue | null;\n  /** 라벨 */\n  label?: string;\n  /** 비활성 */\n  disabled?: boolean;\n  /** native radio name (form-agnostic 그룹핑) */\n  name?: string;\n  /** 선택 변경 (sdUpdate) — 선택된 val 전달 */\n  onValueChange?: (val: RadioValue) => void;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** Radio — sd-radio 포팅. value===val 이면 선택. 단독 또는 RadioGroup 안에서 사용. */\nexport function Radio({\n  val,\n  value,\n  label,\n  disabled = false,\n  name,\n  onValueChange,\n  className,\n  style,\n}: RadioProps) {\n  // key/name 속성용 문자열 표현\n  const valStr = String(val);\n  const checked = value === val;\n  const select = () => {\n    if (!disabled && !checked) onValueChange?.(val);\n  };\n\n  return (\n    <label\n      role=\"radio\"\n      aria-checked={checked}\n      tabIndex={disabled ? -1 : 0}\n      onClick={select}\n      onKeyDown={e => {\n        if (e.key === ' ' || e.key === 'Enter') {\n          e.preventDefault();\n          select();\n        }\n      }}\n      className={cn(\n        'inline-flex items-center gap-[8px]',\n        disabled ? 'cursor-not-allowed' : 'cursor-pointer',\n        className,\n      )}\n      style={style}\n    >\n      {name && (\n        <input\n          type=\"radio\"\n          name={name}\n          value={valStr}\n          checked={checked}\n          disabled={disabled}\n          onChange={() => {}}\n          tabIndex={-1}\n          aria-hidden\n          className=\"sr-only\"\n        />\n      )}\n      <span\n        className={cn(\n          'flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-full border border-solid border-[color:var(--rd-border)] bg-[var(--rd-bg)]',\n          !disabled &&\n            !checked &&\n            'hover:border-[color:var(--cmp-radio-border-hover)] hover:bg-[var(--cmp-radio-bg-hover)]',\n        )}\n        style={\n          {\n            '--rd-bg': disabled ? 'var(--cmp-radio-bg-disabled)' : 'var(--cmp-radio-bg-default)',\n            '--rd-border': disabled\n              ? 'var(--cmp-radio-border-disabled)'\n              : checked\n                ? 'var(--cmp-radio-border-active)'\n                : 'var(--cmp-radio-border-default)',\n          } as CSSProperties\n        }\n      >\n        {checked && (\n          <span\n            className=\"h-[10px] w-[10px] rounded-full\"\n            style={{\n              background: disabled\n                ? 'var(--cmp-radio-dot-disabled)'\n                : 'var(--cmp-radio-dot-default)',\n            }}\n          />\n        )}\n      </span>\n      {label && (\n        <span\n          className=\"grid text-[12px] leading-[20px]\"\n          style={{\n            color: disabled ? 'var(--cmp-radio-label-disabled)' : 'var(--cmp-radio-label-default)',\n          }}\n        >\n          <span aria-hidden className=\"invisible font-medium\" style={{ gridArea: '1 / 1' }}>\n            {label}\n          </span>\n          <span style={{ gridArea: '1 / 1', fontWeight: checked ? 500 : 400 }}>{label}</span>\n        </span>\n      )}\n    </label>\n  );\n}\n","'use client';\n\nimport { type CSSProperties } from 'react';\nimport { cn } from '../../lib/cn';\nimport { Radio, type RadioValue } from './Radio';\n\nexport interface RadioOption {\n  /** 옵션 값 (sd-radio-group RadioOption.value) */\n  value: RadioValue;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface RadioGroupProps {\n  /** 옵션 목록 */\n  options?: RadioOption[];\n  /** 현재 선택 값 */\n  value?: RadioValue | null;\n  /** 배치 방향 */\n  direction?: 'vertical' | 'horizontal';\n  /** 전체 비활성 */\n  disabled?: boolean;\n  /** 라디오 name 속성 (form-agnostic 그룹핑) */\n  groupName?: string;\n  /** 선택 변경 (sdUpdate) */\n  onValueChange?: (val: RadioValue) => void;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** RadioGroup — sd-radio-group 포팅. options를 Radio로 렌더. */\nexport function RadioGroup({\n  options = [],\n  value,\n  direction = 'vertical',\n  disabled = false,\n  groupName,\n  onValueChange,\n  className,\n  style,\n}: RadioGroupProps) {\n  return (\n    <div\n      role=\"radiogroup\"\n      className={cn(\n        'inline-flex',\n        direction === 'vertical' ? 'flex-col gap-[8px]' : 'flex-row gap-[20px]',\n        className,\n      )}\n      style={style}\n    >\n      {options.map(o => (\n        <Radio\n          key={String(o.value)}\n          val={o.value}\n          value={value}\n          label={o.label}\n          name={groupName}\n          disabled={disabled || o.disabled}\n          onValueChange={onValueChange}\n        />\n      ))}\n    </div>\n  );\n}\n"]}

package/dist/components/Radio/index.d.ts

@@ -0,0 +1,2 @@
+export { Radio, type RadioProps, type RadioValue } from './Radio';
+export { RadioGroup, type RadioGroupProps, type RadioOption } from './RadioGroup';

package/dist/components/RadioButton/RadioButton.cjs

@@ -0,0 +1,67 @@
+"use client";
+'use strict';
+
+require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function RadioButton({
+  options = [],
+  value,
+  size = "sm",
+  disabled = false,
+  name,
+  onValueChange,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-disabled": disabled,
+      className: cn("inline-flex", className),
+      style,
+      children: options.map((o, i) => {
+        const selected = o.value === value;
+        const od = disabled || o.disabled;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            name,
+            "aria-checked": selected,
+            disabled: od,
+            onClick: () => !od && !selected && onValueChange?.(o.value),
+            className: cn(
+              "relative box-border inline-flex items-center justify-center whitespace-nowrap border border-solid text-[12px] font-medium leading-[20px] transition-colors",
+              i === 0 ? "rounded-l-[var(--cmp-radioButton-radius)]" : "-ml-px",
+              i === options.length - 1 ? "rounded-r-[var(--cmp-radioButton-radius)]" : "",
+              selected ? "z-10" : "",
+              !od && !selected && "hover:!bg-[var(--cmp-radioButton-bg-hover)] hover:!text-[color:var(--cmp-radioButton-content-hover)] hover:!border-[color:var(--cmp-radioButton-bg-hover)] hover:z-10",
+              od ? "cursor-not-allowed" : "cursor-pointer"
+            ),
+            style: {
+              height: `var(--cmp-radioButton-${size}-height)`,
+              padding: `0 var(--cmp-radioButton-${size}-paddingX)`,
+              background: od ? "var(--cmp-radioButton-bg-disabled)" : "var(--cmp-radioButton-bg-default)",
+              borderColor: od ? "var(--cmp-radioButton-border-disabled)" : selected ? "var(--cmp-radioButton-border-select)" : "var(--cmp-radioButton-border-default)",
+              color: od ? "var(--cmp-radioButton-content-disabled)" : selected ? "var(--cmp-radioButton-content-select)" : "var(--cmp-radioButton-content-default)"
+            },
+            children: o.label
+          },
+          o.value
+        );
+      })
+    }
+  );
+}
+
+exports.RadioButton = RadioButton;
+//# sourceMappingURL=RadioButton.cjs.map
+//# sourceMappingURL=RadioButton.cjs.map

package/dist/components/RadioButton/RadioButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/RadioButton/RadioButton.tsx"],"names":["twMerge","clsx","jsx"],"mappings":";;;;;;;AAOO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACyBO,SAAS,WAAA,CAAY;AAAA,EAC1B,UAAU,EAAC;AAAA,EACX,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,QAAA,GAAW,KAAA;AAAA,EACX,IAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,YAAA;AAAA,MACL,eAAA,EAAe,QAAA;AAAA,MACf,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,SAAS,CAAA;AAAA,MACtC,KAAA;AAAA,MAEC,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,KAAM;AACrB,QAAA,MAAM,QAAA,GAAW,EAAE,KAAA,KAAU,KAAA;AAC7B,QAAA,MAAM,EAAA,GAAK,YAAY,CAAA,CAAE,QAAA;AACzB,QAAA,uBACEA,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YAEC,IAAA,EAAK,QAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,IAAA;AAAA,YACA,cAAA,EAAc,QAAA;AAAA,YACd,QAAA,EAAU,EAAA;AAAA,YACV,OAAA,EAAS,MAAM,CAAC,EAAA,IAAM,CAAC,QAAA,IAAY,aAAA,GAAgB,EAAE,KAAK,CAAA;AAAA,YAC1D,SAAA,EAAW,EAAA;AAAA,cACT,4JAAA;AAAA,cACA,CAAA,KAAM,IAAI,2CAAA,GAA8C,QAAA;AAAA,cACxD,CAAA,KAAM,OAAA,CAAQ,MAAA,GAAS,CAAA,GAAI,2CAAA,GAA8C,EAAA;AAAA,cACzE,WAAW,MAAA,GAAS,EAAA;AAAA,cACpB,CAAC,EAAA,IACC,CAAC,QAAA,IACD,uKAAA;AAAA,cACF,KAAK,oBAAA,GAAuB;AAAA,aAC9B;AAAA,YACA,KAAA,EAAO;AAAA,cACL,MAAA,EAAQ,yBAAyB,IAAI,CAAA,QAAA,CAAA;AAAA,cACrC,OAAA,EAAS,2BAA2B,IAAI,CAAA,UAAA,CAAA;AAAA,cACxC,UAAA,EAAY,KACR,oCAAA,GACA,mCAAA;AAAA,cACJ,WAAA,EAAa,EAAA,GACT,wCAAA,GACA,QAAA,GACE,sCAAA,GACA,uCAAA;AAAA,cACN,KAAA,EAAO,EAAA,GACH,yCAAA,GACA,QAAA,GACE,uCAAA,GACA;AAAA,aACR;AAAA,YAEC,QAAA,EAAA,CAAA,CAAE;AAAA,WAAA;AAAA,UAnCE,CAAA,CAAE;AAAA,SAoCT;AAAA,MAEJ,CAAC;AAAA;AAAA,GACH;AAEJ","file":"RadioButton.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { type CSSProperties } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport type RadioButtonSize = 'xs' | 'sm';\n\nexport interface RadioButtonOption {\n  value: string | number;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface RadioButtonProps {\n  /** 옵션 목록 */\n  options?: RadioButtonOption[];\n  /** 현재 선택 값 */\n  value?: string | number | null;\n  /** 크기 */\n  size?: RadioButtonSize;\n  /** 전체 비활성 */\n  disabled?: boolean;\n  /** input name 속성 */\n  name?: string;\n  /** 변경 (sdUpdate) */\n  onValueChange?: (value: string | number) => void;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * RadioButton — sd-radio-button 포팅. 세그먼트형 라디오(버튼 그룹).\n * default(흰 배경/회색, hover 파란 채움) · select(흰 배경/파란 테두리·글자) · disabled.\n */\nexport function RadioButton({\n  options = [],\n  value,\n  size = 'sm',\n  disabled = false,\n  name,\n  onValueChange,\n  className,\n  style,\n}: RadioButtonProps) {\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-disabled={disabled}\n      className={cn('inline-flex', className)}\n      style={style}\n    >\n      {options.map((o, i) => {\n        const selected = o.value === value;\n        const od = disabled || o.disabled;\n        return (\n          <button\n            key={o.value}\n            type=\"button\"\n            role=\"radio\"\n            name={name}\n            aria-checked={selected}\n            disabled={od}\n            onClick={() => !od && !selected && onValueChange?.(o.value)}\n            className={cn(\n              'relative box-border inline-flex items-center justify-center whitespace-nowrap border border-solid text-[12px] font-medium leading-[20px] transition-colors',\n              i === 0 ? 'rounded-l-[var(--cmp-radioButton-radius)]' : '-ml-px',\n              i === options.length - 1 ? 'rounded-r-[var(--cmp-radioButton-radius)]' : '',\n              selected ? 'z-10' : '',\n              !od &&\n                !selected &&\n                'hover:!bg-[var(--cmp-radioButton-bg-hover)] hover:!text-[color:var(--cmp-radioButton-content-hover)] hover:!border-[color:var(--cmp-radioButton-bg-hover)] hover:z-10',\n              od ? 'cursor-not-allowed' : 'cursor-pointer',\n            )}\n            style={{\n              height: `var(--cmp-radioButton-${size}-height)`,\n              padding: `0 var(--cmp-radioButton-${size}-paddingX)`,\n              background: od\n                ? 'var(--cmp-radioButton-bg-disabled)'\n                : 'var(--cmp-radioButton-bg-default)',\n              borderColor: od\n                ? 'var(--cmp-radioButton-border-disabled)'\n                : selected\n                  ? 'var(--cmp-radioButton-border-select)'\n                  : 'var(--cmp-radioButton-border-default)',\n              color: od\n                ? 'var(--cmp-radioButton-content-disabled)'\n                : selected\n                  ? 'var(--cmp-radioButton-content-select)'\n                  : 'var(--cmp-radioButton-content-default)',\n            }}\n          >\n            {o.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/dist/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,28 @@
+import { type CSSProperties } from 'react';
+export type RadioButtonSize = 'xs' | 'sm';
+export interface RadioButtonOption {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+}
+export interface RadioButtonProps {
+    /** 옵션 목록 */
+    options?: RadioButtonOption[];
+    /** 현재 선택 값 */
+    value?: string | number | null;
+    /** 크기 */
+    size?: RadioButtonSize;
+    /** 전체 비활성 */
+    disabled?: boolean;
+    /** input name 속성 */
+    name?: string;
+    /** 변경 (sdUpdate) */
+    onValueChange?: (value: string | number) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * RadioButton — sd-radio-button 포팅. 세그먼트형 라디오(버튼 그룹).
+ * default(흰 배경/회색, hover 파란 채움) · select(흰 배경/파란 테두리·글자) · disabled.
+ */
+export declare function RadioButton({ options, value, size, disabled, name, onValueChange, className, style, }: RadioButtonProps): import("react").JSX.Element;

package/dist/components/RadioButton/RadioButton.js

@@ -0,0 +1,65 @@
+"use client";
+import 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function RadioButton({
+  options = [],
+  value,
+  size = "sm",
+  disabled = false,
+  name,
+  onValueChange,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-disabled": disabled,
+      className: cn("inline-flex", className),
+      style,
+      children: options.map((o, i) => {
+        const selected = o.value === value;
+        const od = disabled || o.disabled;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            name,
+            "aria-checked": selected,
+            disabled: od,
+            onClick: () => !od && !selected && onValueChange?.(o.value),
+            className: cn(
+              "relative box-border inline-flex items-center justify-center whitespace-nowrap border border-solid text-[12px] font-medium leading-[20px] transition-colors",
+              i === 0 ? "rounded-l-[var(--cmp-radioButton-radius)]" : "-ml-px",
+              i === options.length - 1 ? "rounded-r-[var(--cmp-radioButton-radius)]" : "",
+              selected ? "z-10" : "",
+              !od && !selected && "hover:!bg-[var(--cmp-radioButton-bg-hover)] hover:!text-[color:var(--cmp-radioButton-content-hover)] hover:!border-[color:var(--cmp-radioButton-bg-hover)] hover:z-10",
+              od ? "cursor-not-allowed" : "cursor-pointer"
+            ),
+            style: {
+              height: `var(--cmp-radioButton-${size}-height)`,
+              padding: `0 var(--cmp-radioButton-${size}-paddingX)`,
+              background: od ? "var(--cmp-radioButton-bg-disabled)" : "var(--cmp-radioButton-bg-default)",
+              borderColor: od ? "var(--cmp-radioButton-border-disabled)" : selected ? "var(--cmp-radioButton-border-select)" : "var(--cmp-radioButton-border-default)",
+              color: od ? "var(--cmp-radioButton-content-disabled)" : selected ? "var(--cmp-radioButton-content-select)" : "var(--cmp-radioButton-content-default)"
+            },
+            children: o.label
+          },
+          o.value
+        );
+      })
+    }
+  );
+}
+
+export { RadioButton };
+//# sourceMappingURL=RadioButton.js.map
+//# sourceMappingURL=RadioButton.js.map

package/dist/components/RadioButton/RadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":";;;;;AAOO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACyBO,SAAS,WAAA,CAAY;AAAA,EAC1B,UAAU,EAAC;AAAA,EACX,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,QAAA,GAAW,KAAA;AAAA,EACX,IAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,YAAA;AAAA,MACL,eAAA,EAAe,QAAA;AAAA,MACf,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,SAAS,CAAA;AAAA,MACtC,KAAA;AAAA,MAEC,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,KAAM;AACrB,QAAA,MAAM,QAAA,GAAW,EAAE,KAAA,KAAU,KAAA;AAC7B,QAAA,MAAM,EAAA,GAAK,YAAY,CAAA,CAAE,QAAA;AACzB,QAAA,uBACE,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YAEC,IAAA,EAAK,QAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,IAAA;AAAA,YACA,cAAA,EAAc,QAAA;AAAA,YACd,QAAA,EAAU,EAAA;AAAA,YACV,OAAA,EAAS,MAAM,CAAC,EAAA,IAAM,CAAC,QAAA,IAAY,aAAA,GAAgB,EAAE,KAAK,CAAA;AAAA,YAC1D,SAAA,EAAW,EAAA;AAAA,cACT,4JAAA;AAAA,cACA,CAAA,KAAM,IAAI,2CAAA,GAA8C,QAAA;AAAA,cACxD,CAAA,KAAM,OAAA,CAAQ,MAAA,GAAS,CAAA,GAAI,2CAAA,GAA8C,EAAA;AAAA,cACzE,WAAW,MAAA,GAAS,EAAA;AAAA,cACpB,CAAC,EAAA,IACC,CAAC,QAAA,IACD,uKAAA;AAAA,cACF,KAAK,oBAAA,GAAuB;AAAA,aAC9B;AAAA,YACA,KAAA,EAAO;AAAA,cACL,MAAA,EAAQ,yBAAyB,IAAI,CAAA,QAAA,CAAA;AAAA,cACrC,OAAA,EAAS,2BAA2B,IAAI,CAAA,UAAA,CAAA;AAAA,cACxC,UAAA,EAAY,KACR,oCAAA,GACA,mCAAA;AAAA,cACJ,WAAA,EAAa,EAAA,GACT,wCAAA,GACA,QAAA,GACE,sCAAA,GACA,uCAAA;AAAA,cACN,KAAA,EAAO,EAAA,GACH,yCAAA,GACA,QAAA,GACE,uCAAA,GACA;AAAA,aACR;AAAA,YAEC,QAAA,EAAA,CAAA,CAAE;AAAA,WAAA;AAAA,UAnCE,CAAA,CAAE;AAAA,SAoCT;AAAA,MAEJ,CAAC;AAAA;AAAA,GACH;AAEJ","file":"RadioButton.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { type CSSProperties } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport type RadioButtonSize = 'xs' | 'sm';\n\nexport interface RadioButtonOption {\n  value: string | number;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface RadioButtonProps {\n  /** 옵션 목록 */\n  options?: RadioButtonOption[];\n  /** 현재 선택 값 */\n  value?: string | number | null;\n  /** 크기 */\n  size?: RadioButtonSize;\n  /** 전체 비활성 */\n  disabled?: boolean;\n  /** input name 속성 */\n  name?: string;\n  /** 변경 (sdUpdate) */\n  onValueChange?: (value: string | number) => void;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * RadioButton — sd-radio-button 포팅. 세그먼트형 라디오(버튼 그룹).\n * default(흰 배경/회색, hover 파란 채움) · select(흰 배경/파란 테두리·글자) · disabled.\n */\nexport function RadioButton({\n  options = [],\n  value,\n  size = 'sm',\n  disabled = false,\n  name,\n  onValueChange,\n  className,\n  style,\n}: RadioButtonProps) {\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-disabled={disabled}\n      className={cn('inline-flex', className)}\n      style={style}\n    >\n      {options.map((o, i) => {\n        const selected = o.value === value;\n        const od = disabled || o.disabled;\n        return (\n          <button\n            key={o.value}\n            type=\"button\"\n            role=\"radio\"\n            name={name}\n            aria-checked={selected}\n            disabled={od}\n            onClick={() => !od && !selected && onValueChange?.(o.value)}\n            className={cn(\n              'relative box-border inline-flex items-center justify-center whitespace-nowrap border border-solid text-[12px] font-medium leading-[20px] transition-colors',\n              i === 0 ? 'rounded-l-[var(--cmp-radioButton-radius)]' : '-ml-px',\n              i === options.length - 1 ? 'rounded-r-[var(--cmp-radioButton-radius)]' : '',\n              selected ? 'z-10' : '',\n              !od &&\n                !selected &&\n                'hover:!bg-[var(--cmp-radioButton-bg-hover)] hover:!text-[color:var(--cmp-radioButton-content-hover)] hover:!border-[color:var(--cmp-radioButton-bg-hover)] hover:z-10',\n              od ? 'cursor-not-allowed' : 'cursor-pointer',\n            )}\n            style={{\n              height: `var(--cmp-radioButton-${size}-height)`,\n              padding: `0 var(--cmp-radioButton-${size}-paddingX)`,\n              background: od\n                ? 'var(--cmp-radioButton-bg-disabled)'\n                : 'var(--cmp-radioButton-bg-default)',\n              borderColor: od\n                ? 'var(--cmp-radioButton-border-disabled)'\n                : selected\n                  ? 'var(--cmp-radioButton-border-select)'\n                  : 'var(--cmp-radioButton-border-default)',\n              color: od\n                ? 'var(--cmp-radioButton-content-disabled)'\n                : selected\n                  ? 'var(--cmp-radioButton-content-select)'\n                  : 'var(--cmp-radioButton-content-default)',\n            }}\n          >\n            {o.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/dist/components/RadioButton/index.d.ts

@@ -0,0 +1 @@
+export { RadioButton, type RadioButtonProps, type RadioButtonOption, type RadioButtonSize, } from './RadioButton';