sellmate-design-system-react 0.1.9 → 0.1.10

package/dist/components/SRadio/SRadioGroup.cjs

@@ -122,7 +122,7 @@ function SRadioGroup({
       role: "radiogroup",
       className: cn(
         "inline-flex",
-        direction === "vertical" ? "flex-col gap-[8px]" : "flex-row gap-[20px]",
+        direction === "vertical" ? "flex-col gap-[var(--cmp-radio-group-gap-vertical)]" : "flex-row gap-[var(--cmp-radio-group-gap-horizontal)]",
         className
       ),
       style,

package/dist/components/SRadio/SRadioGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SRadio/SRadio.tsx","../../../src/components/SRadio/SRadioGroup.tsx"],"names":["extendTailwindMerge","clsx","jsxs","jsx"],"mappings":";;;;;;;AAQA,IAAM,UAAUA,iCAAA,CAAoB;AAAA,EAClC,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa;AAAA,MACX,aAAa,CAAC,EAAE,IAAA,EAAM,CAAC,MAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAI,GAAG;AAAA;AAC5F;AAEJ,CAAC,CAAA;AAMM,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACIO,SAAS,MAAA,CAAO;AAAA,EACrB,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,EAAgB;AAEd,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;AAKA,EAAA,MAAM,MAAA,GAAS,IAAA,IAAQ,IAAA,IAAQ,IAAA,KAAS,EAAA;AAGxC,EAAA,MAAM,qBAAA,GAA0D,MAAA,GAC5D,EAAC,GACD;AAAA,IACE,MAAA,EAAQ,OAAA;AAAA,IACR,cAAA,EAAgB,OAAA;AAAA,IAChB,UAAA,EAAY,WAAW,EAAA,GAAK,CAAA;AAAA,IAC5B,SAAA,EAAW,MAAA;AAAA,IACX,aAAa,CAAA,CAAA,KAAK;AAChB,MAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,GAAA,IAAO,CAAA,CAAE,QAAQ,OAAA,EAAS;AACtC,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,MAAA,EAAO;AAAA,MACT;AAAA,IACF;AAAA,GACF;AAEJ,EAAA,uBACEC,eAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,qBAAA;AAAA,MACJ,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,MAAA,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,YAGA,QAAA,EAAU,MAAM,aAAA,GAAgB,GAAG,CAAA;AAAA,YACnC,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;ACpGO,SAAS,WAAA,CAAY;AAAA,EAC1B,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,EAAqB;AACnB,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,MAAA;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":"SRadioGroup.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\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, type HTMLAttributes } from 'react';\nimport { cn } from '../../lib/cn';\n\n/** 라디오 값 타입 (sd-radio SRadioValue) */\nexport type SRadioValue = string | number | boolean;\n\nexport interface SRadioProps {\n  /** 이 라디오의 값 */\n  val: SRadioValue;\n  /** 그룹의 현재 선택 값 */\n  value?: SRadioValue | null;\n  /** 라벨 */\n  label?: string;\n  /** 비활성 */\n  disabled?: boolean;\n  /** native radio name (form-agnostic 그룹핑) */\n  name?: string;\n  /** 선택 변경 (sdUpdate) — 선택된 val 전달 */\n  onValueChange?: (val: SRadioValue) => void;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** SRadio — sd-radio 포팅. value===val 이면 선택. 단독 또는 SRadioGroup 안에서 사용. */\nexport function SRadio({\n  val,\n  value,\n  label,\n  disabled = false,\n  name,\n  onValueChange,\n  className,\n  style,\n}: SRadioProps) {\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  // name 이 있으면 네이티브 <input type=\"radio\"> 가 실제 상호작용 컨트롤이 된다.\n  // 이때 label 에는 role/tabIndex/키핸들러를 주지 않는다 — 상호작용 요소 중첩\n  // (role=\"radio\" 안에 native radio) 및 radio 역할 중복을 피한다.\n  const native = name != null && name !== '';\n\n  // native 모드가 아니면 label 자체가 커스텀 radio 로 동작한다.\n  const labelInteractiveProps: HTMLAttributes<HTMLLabelElement> = native\n    ? {}\n    : {\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      };\n\n  return (\n    <label\n      {...labelInteractiveProps}\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      {native && (\n        <input\n          type=\"radio\"\n          name={name}\n          value={valStr}\n          checked={checked}\n          disabled={disabled}\n          // 네이티브 라디오가 포커스/키보드/선택을 담당한다. label 이 감싸므로\n          // 라벨 클릭도 이 input 을 토글하며, onChange 는 값이 실제로 바뀔 때만 발생.\n          onChange={() => onValueChange?.(val)}\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 { SRadio, type SRadioValue } from './SRadio';\n\nexport interface SRadioOption {\n  /** 옵션 값 (sd-radio-group SRadioOption.value) */\n  value: SRadioValue;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SRadioGroupProps {\n  /** 옵션 목록 */\n  options?: SRadioOption[];\n  /** 현재 선택 값 */\n  value?: SRadioValue | null;\n  /** 배치 방향 */\n  direction?: 'vertical' | 'horizontal';\n  /** 전체 비활성 */\n  disabled?: boolean;\n  /** 라디오 name 속성 (form-agnostic 그룹핑) */\n  groupName?: string;\n  /** 선택 변경 (sdUpdate) */\n  onValueChange?: (val: SRadioValue) => void;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** SRadioGroup — sd-radio-group 포팅. options를 SRadio로 렌더. */\nexport function SRadioGroup({\n  options = [],\n  value,\n  direction = 'vertical',\n  disabled = false,\n  groupName,\n  onValueChange,\n  className,\n  style,\n}: SRadioGroupProps) {\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        <SRadio\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"]}
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SRadio/SRadio.tsx","../../../src/components/SRadio/SRadioGroup.tsx"],"names":["extendTailwindMerge","clsx","jsxs","jsx"],"mappings":"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","file":"SRadioGroup.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\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, type HTMLAttributes } from 'react';\nimport { cn } from '../../lib/cn';\n\n/** 라디오 값 타입 (sd-radio SRadioValue) */\nexport type SRadioValue = string | number | boolean;\n\nexport interface SRadioProps {\n  /** 이 라디오의 값 */\n  val: SRadioValue;\n  /** 그룹의 현재 선택 값 */\n  value?: SRadioValue | null;\n  /** 라벨 */\n  label?: string;\n  /** 비활성 */\n  disabled?: boolean;\n  /** native radio name (form-agnostic 그룹핑) */\n  name?: string;\n  /** 선택 변경 (sdUpdate) — 선택된 val 전달 */\n  onValueChange?: (val: SRadioValue) => void;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** SRadio — sd-radio 포팅. value===val 이면 선택. 단독 또는 SRadioGroup 안에서 사용. */\nexport function SRadio({\n  val,\n  value,\n  label,\n  disabled = false,\n  name,\n  onValueChange,\n  className,\n  style,\n}: SRadioProps) {\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  // name 이 있으면 네이티브 <input type=\"radio\"> 가 실제 상호작용 컨트롤이 된다.\n  // 이때 label 에는 role/tabIndex/키핸들러를 주지 않는다 — 상호작용 요소 중첩\n  // (role=\"radio\" 안에 native radio) 및 radio 역할 중복을 피한다.\n  const native = name != null && name !== '';\n\n  // native 모드가 아니면 label 자체가 커스텀 radio 로 동작한다.\n  const labelInteractiveProps: HTMLAttributes<HTMLLabelElement> = native\n    ? {}\n    : {\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      };\n\n  return (\n    <label\n      {...labelInteractiveProps}\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      {native && (\n        <input\n          type=\"radio\"\n          name={name}\n          value={valStr}\n          checked={checked}\n          disabled={disabled}\n          // 네이티브 라디오가 포커스/키보드/선택을 담당한다. label 이 감싸므로\n          // 라벨 클릭도 이 input 을 토글하며, onChange 는 값이 실제로 바뀔 때만 발생.\n          onChange={() => onValueChange?.(val)}\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 { SRadio, type SRadioValue } from './SRadio';\n\nexport interface SRadioOption {\n  /** 옵션 값 (sd-radio-group SRadioOption.value) */\n  value: SRadioValue;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SRadioGroupProps {\n  /** 옵션 목록 */\n  options?: SRadioOption[];\n  /** 현재 선택 값 */\n  value?: SRadioValue | null;\n  /** 배치 방향 */\n  direction?: 'vertical' | 'horizontal';\n  /** 전체 비활성 */\n  disabled?: boolean;\n  /** 라디오 name 속성 (form-agnostic 그룹핑) */\n  groupName?: string;\n  /** 선택 변경 (sdUpdate) */\n  onValueChange?: (val: SRadioValue) => void;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** SRadioGroup — sd-radio-group 포팅. options를 SRadio로 렌더. */\nexport function SRadioGroup({\n  options = [],\n  value,\n  direction = 'vertical',\n  disabled = false,\n  groupName,\n  onValueChange,\n  className,\n  style,\n}: SRadioGroupProps) {\n  return (\n    <div\n      role=\"radiogroup\"\n      className={cn(\n        'inline-flex',\n        direction === 'vertical'\n          ? 'flex-col gap-[var(--cmp-radio-group-gap-vertical)]'\n          : 'flex-row gap-[var(--cmp-radio-group-gap-horizontal)]',\n        className,\n      )}\n      style={style}\n    >\n      {options.map(o => (\n        <SRadio\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/SRadio/SRadioGroup.js

@@ -120,7 +120,7 @@ function SRadioGroup({
       role: "radiogroup",
       className: cn(
         "inline-flex",
-        direction === "vertical" ? "flex-col gap-[8px]" : "flex-row gap-[20px]",
+        direction === "vertical" ? "flex-col gap-[var(--cmp-radio-group-gap-vertical)]" : "flex-row gap-[var(--cmp-radio-group-gap-horizontal)]",
         className
       ),
       style,

package/dist/components/SRadio/SRadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SRadio/SRadio.tsx","../../../src/components/SRadio/SRadioGroup.tsx"],"names":["jsx"],"mappings":";;;;;AAQA,IAAM,UAAU,mBAAA,CAAoB;AAAA,EAClC,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa;AAAA,MACX,aAAa,CAAC,EAAE,IAAA,EAAM,CAAC,MAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAI,GAAG;AAAA;AAC5F;AAEJ,CAAC,CAAA;AAMM,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACIO,SAAS,MAAA,CAAO;AAAA,EACrB,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,EAAgB;AAEd,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;AAKA,EAAA,MAAM,MAAA,GAAS,IAAA,IAAQ,IAAA,IAAQ,IAAA,KAAS,EAAA;AAGxC,EAAA,MAAM,qBAAA,GAA0D,MAAA,GAC5D,EAAC,GACD;AAAA,IACE,MAAA,EAAQ,OAAA;AAAA,IACR,cAAA,EAAgB,OAAA;AAAA,IAChB,UAAA,EAAY,WAAW,EAAA,GAAK,CAAA;AAAA,IAC5B,SAAA,EAAW,MAAA;AAAA,IACX,aAAa,CAAA,CAAA,KAAK;AAChB,MAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,GAAA,IAAO,CAAA,CAAE,QAAQ,OAAA,EAAS;AACtC,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,MAAA,EAAO;AAAA,MACT;AAAA,IACF;AAAA,GACF;AAEJ,EAAA,uBACE,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,qBAAA;AAAA,MACJ,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,MAAA,oBACC,GAAA;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,YAGA,QAAA,EAAU,MAAM,aAAA,GAAgB,GAAG,CAAA;AAAA,YACnC,SAAA,EAAU;AAAA;AAAA,SACZ;AAAA,wBAEF,GAAA;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,oBACC,GAAA;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,oBACC,IAAA;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,8BAAA,GAAA,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,8BACA,GAAA,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;ACpGO,SAAS,WAAA,CAAY;AAAA,EAC1B,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,EAAqB;AACnB,EAAA,uBACEA,GAAAA;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,GAAAA;AAAA,QAAC,MAAA;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":"SRadioGroup.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\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, type HTMLAttributes } from 'react';\nimport { cn } from '../../lib/cn';\n\n/** 라디오 값 타입 (sd-radio SRadioValue) */\nexport type SRadioValue = string | number | boolean;\n\nexport interface SRadioProps {\n  /** 이 라디오의 값 */\n  val: SRadioValue;\n  /** 그룹의 현재 선택 값 */\n  value?: SRadioValue | null;\n  /** 라벨 */\n  label?: string;\n  /** 비활성 */\n  disabled?: boolean;\n  /** native radio name (form-agnostic 그룹핑) */\n  name?: string;\n  /** 선택 변경 (sdUpdate) — 선택된 val 전달 */\n  onValueChange?: (val: SRadioValue) => void;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** SRadio — sd-radio 포팅. value===val 이면 선택. 단독 또는 SRadioGroup 안에서 사용. */\nexport function SRadio({\n  val,\n  value,\n  label,\n  disabled = false,\n  name,\n  onValueChange,\n  className,\n  style,\n}: SRadioProps) {\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  // name 이 있으면 네이티브 <input type=\"radio\"> 가 실제 상호작용 컨트롤이 된다.\n  // 이때 label 에는 role/tabIndex/키핸들러를 주지 않는다 — 상호작용 요소 중첩\n  // (role=\"radio\" 안에 native radio) 및 radio 역할 중복을 피한다.\n  const native = name != null && name !== '';\n\n  // native 모드가 아니면 label 자체가 커스텀 radio 로 동작한다.\n  const labelInteractiveProps: HTMLAttributes<HTMLLabelElement> = native\n    ? {}\n    : {\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      };\n\n  return (\n    <label\n      {...labelInteractiveProps}\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      {native && (\n        <input\n          type=\"radio\"\n          name={name}\n          value={valStr}\n          checked={checked}\n          disabled={disabled}\n          // 네이티브 라디오가 포커스/키보드/선택을 담당한다. label 이 감싸므로\n          // 라벨 클릭도 이 input 을 토글하며, onChange 는 값이 실제로 바뀔 때만 발생.\n          onChange={() => onValueChange?.(val)}\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 { SRadio, type SRadioValue } from './SRadio';\n\nexport interface SRadioOption {\n  /** 옵션 값 (sd-radio-group SRadioOption.value) */\n  value: SRadioValue;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SRadioGroupProps {\n  /** 옵션 목록 */\n  options?: SRadioOption[];\n  /** 현재 선택 값 */\n  value?: SRadioValue | null;\n  /** 배치 방향 */\n  direction?: 'vertical' | 'horizontal';\n  /** 전체 비활성 */\n  disabled?: boolean;\n  /** 라디오 name 속성 (form-agnostic 그룹핑) */\n  groupName?: string;\n  /** 선택 변경 (sdUpdate) */\n  onValueChange?: (val: SRadioValue) => void;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** SRadioGroup — sd-radio-group 포팅. options를 SRadio로 렌더. */\nexport function SRadioGroup({\n  options = [],\n  value,\n  direction = 'vertical',\n  disabled = false,\n  groupName,\n  onValueChange,\n  className,\n  style,\n}: SRadioGroupProps) {\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        <SRadio\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"]}
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SRadio/SRadio.tsx","../../../src/components/SRadio/SRadioGroup.tsx"],"names":["jsx"],"mappings":"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","file":"SRadioGroup.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/**\n * theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n    },\n  },\n});\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, type HTMLAttributes } from 'react';\nimport { cn } from '../../lib/cn';\n\n/** 라디오 값 타입 (sd-radio SRadioValue) */\nexport type SRadioValue = string | number | boolean;\n\nexport interface SRadioProps {\n  /** 이 라디오의 값 */\n  val: SRadioValue;\n  /** 그룹의 현재 선택 값 */\n  value?: SRadioValue | null;\n  /** 라벨 */\n  label?: string;\n  /** 비활성 */\n  disabled?: boolean;\n  /** native radio name (form-agnostic 그룹핑) */\n  name?: string;\n  /** 선택 변경 (sdUpdate) — 선택된 val 전달 */\n  onValueChange?: (val: SRadioValue) => void;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** SRadio — sd-radio 포팅. value===val 이면 선택. 단독 또는 SRadioGroup 안에서 사용. */\nexport function SRadio({\n  val,\n  value,\n  label,\n  disabled = false,\n  name,\n  onValueChange,\n  className,\n  style,\n}: SRadioProps) {\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  // name 이 있으면 네이티브 <input type=\"radio\"> 가 실제 상호작용 컨트롤이 된다.\n  // 이때 label 에는 role/tabIndex/키핸들러를 주지 않는다 — 상호작용 요소 중첩\n  // (role=\"radio\" 안에 native radio) 및 radio 역할 중복을 피한다.\n  const native = name != null && name !== '';\n\n  // native 모드가 아니면 label 자체가 커스텀 radio 로 동작한다.\n  const labelInteractiveProps: HTMLAttributes<HTMLLabelElement> = native\n    ? {}\n    : {\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      };\n\n  return (\n    <label\n      {...labelInteractiveProps}\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      {native && (\n        <input\n          type=\"radio\"\n          name={name}\n          value={valStr}\n          checked={checked}\n          disabled={disabled}\n          // 네이티브 라디오가 포커스/키보드/선택을 담당한다. label 이 감싸므로\n          // 라벨 클릭도 이 input 을 토글하며, onChange 는 값이 실제로 바뀔 때만 발생.\n          onChange={() => onValueChange?.(val)}\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 { SRadio, type SRadioValue } from './SRadio';\n\nexport interface SRadioOption {\n  /** 옵션 값 (sd-radio-group SRadioOption.value) */\n  value: SRadioValue;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SRadioGroupProps {\n  /** 옵션 목록 */\n  options?: SRadioOption[];\n  /** 현재 선택 값 */\n  value?: SRadioValue | null;\n  /** 배치 방향 */\n  direction?: 'vertical' | 'horizontal';\n  /** 전체 비활성 */\n  disabled?: boolean;\n  /** 라디오 name 속성 (form-agnostic 그룹핑) */\n  groupName?: string;\n  /** 선택 변경 (sdUpdate) */\n  onValueChange?: (val: SRadioValue) => void;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** SRadioGroup — sd-radio-group 포팅. options를 SRadio로 렌더. */\nexport function SRadioGroup({\n  options = [],\n  value,\n  direction = 'vertical',\n  disabled = false,\n  groupName,\n  onValueChange,\n  className,\n  style,\n}: SRadioGroupProps) {\n  return (\n    <div\n      role=\"radiogroup\"\n      className={cn(\n        'inline-flex',\n        direction === 'vertical'\n          ? 'flex-col gap-[var(--cmp-radio-group-gap-vertical)]'\n          : 'flex-row gap-[var(--cmp-radio-group-gap-horizontal)]',\n        className,\n      )}\n      style={style}\n    >\n      {options.map(o => (\n        <SRadio\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/SSelect/SSelect.cjs

@@ -3150,7 +3150,7 @@ var STooltip = react.forwardRef(function STooltip2({
   if (disabled || body == null) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: triggerNode });
   const isHover = trigger === "hover";
   const contentClass = cn(
-    "z-50 max-w-xs rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",
+    "z-50 max-w-xs rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px]",
     FLOATING_SLIDE_ANIM,
     className
   );
@@ -3752,7 +3752,7 @@ function ItemList({
             isDepth1 ? "border-t border-solid border-[color:var(--cmp-listItem-depth1-border-color)] bg-[var(--cmp-listItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listItem-depth2-middle-bg)] font-medium",
             // 하위가 전부 비활성이면(select.config 에서 bubble-up) 어미 그룹도 비활성 처리:
             // 텍스트는 회색(#888), depth1 그룹은 파란 배경 대신 회색(#EEE)으로 (depth2 는 #F6F6F6 유지)
-            o.disabled && "text-[color:var(--cmp-listItem-content-disabled)]",
+            o.disabled && "cursor-not-allowed text-[color:var(--cmp-listItem-content-disabled)]",
             o.disabled && isDepth1 && "bg-[var(--cmp-listItem-depth1-bg-disabled)]"
           ),
           style: { paddingLeft: padLeft },
@@ -3767,10 +3767,14 @@ function ItemList({
       {
         value: o.value,
         disabled: o.disabled,
+        accessibleWhenDisabled: true,
         className: cn(
           itemBase,
           isSelected && !multi && "font-bold text-[color:var(--cmp-listItem-content-selected)]",
-          activeClass
+          // Ariakit은 disabled 항목도 hover 시 active(data-active-item) 처리하므로,
+          // 비활성 항목에는 hover 하이라이트를 적용하지 않아 회색 비활성 스타일을 유지한다.
+          // (원본 Stencil의 `--focused...:not(--disabled)` 규칙과 동일한 의도)
+          !o.disabled && activeClass
         ),
         style: { paddingTop: 4, paddingBottom: 4, paddingRight: 12, paddingLeft: padLeft },
         render: useSearch ? /* @__PURE__ */ jsxRuntime.jsx(Ariakit__namespace.ComboboxItem, {}) : void 0,
@@ -3783,7 +3787,7 @@ function ItemList({
                 "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid",
                 o.disabled ? (
                   // 비활성: 회색 채움(#E1E1E1) + 회색 테두리(#CCCCCC)
-                  "border-[color:var(--cmp-checkbox-border-disabled)] bg-[var(--cmp-checkbox-bg-disabled)]"
+                  "cursor-not-allowed border-[color:var(--cmp-checkbox-border-disabled)] bg-[var(--cmp-checkbox-bg-disabled)]"
                 ) : cn(
                   "group-data-[active-item]:border-[color:var(--cmp-checkbox-checked-border-inverse)]",
                   isSelected ? "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)] group-data-[active-item]:bg-transparent" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-transparent"