sellmate-design-system-react 0.1.8 → 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":"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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' ? '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":"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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' ? '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

@@ -3091,7 +3091,8 @@ var HIDE_DELAY_MS = 100;
 function useBody(content, message = []) {
   if (content != null) return content;
   if (message.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: line }, i)) });
+  const singleLine = message.length === 1;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: singleLine ? "leading-[24px]" : void 0, children: line }, i)) });
 }
 var STooltip = react.forwardRef(function STooltip2({
   content,
@@ -3194,11 +3195,17 @@ var STooltip = react.forwardRef(function STooltip2({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[12px]", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: body }),
             useClose && /* @__PURE__ */ jsxRuntime.jsx(
-              RPopover2__namespace.Close,
+              SGhostButton,
               {
-                "aria-label": "\uB2EB\uAE30",
-                className: "shrink-0 cursor-pointer opacity-70 hover:opacity-100",
-                children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "close", size: 16, color: fg })
+                icon: "close",
+                size: "xs",
+                intent: tooltipType === "default" ? "inverse" : "default",
+                ariaLabel: "\uB2EB\uAE30",
+                className: "shrink-0",
+                onClick: () => {
+                  cancelHide();
+                  setOpen(false);
+                }
               }
             )
           ] }),
@@ -3236,8 +3243,8 @@ function useFormField(field) {
   }, [ctx, name]);
 }
 var FIELD_SIZE = {
-  sm: { height: 28, radius: 4, fieldGap: 12, labelGap: 6, fontSize: 12, lineHeight: 20, icon: 12 },
-  md: { height: 36, radius: 6, fieldGap: 16, labelGap: 8, fontSize: 14, lineHeight: 24, icon: 12 }
+  sm: { height: 28, radius: 4, fieldGap: 12, labelGap: 6, fontSize: 12, lineHeight: 20, icon: 16 },
+  md: { height: 36, radius: 6, fieldGap: 16, labelGap: 8, fontSize: 14, lineHeight: 24, icon: 16 }
 };
 var ALIGN = {
   start: "flex-start",
@@ -3252,6 +3259,7 @@ var SField = react.forwardRef(function SField2({
   labelTooltip = "",
   labelTooltipProps,
   labelWidth,
+  labelHeight,
   size = "sm",
   addonLabel = "",
   addonAlign = "start",
@@ -3266,6 +3274,7 @@ var SField = react.forwardRef(function SField2({
   readOnly = false,
   width,
   multiline = false,
+  borderless = false,
   children,
   className,
   style,
@@ -3299,8 +3308,8 @@ var SField = react.forwardRef(function SField2({
   const resolvedSuccess = status === "pass";
   const showError = resolvedError && errorMessage !== "";
   const interactive = !disabled && !readOnly;
-  const borderColor = disabled ? "var(--color-grey-45)" : interactive && focused ? "var(--sys-color-field-border-focus)" : resolvedSuccess ? "var(--sys-color-field-border-success)" : resolvedError ? "var(--sys-color-field-border-danger)" : "var(--sys-color-field-border-default)";
-  const bgColor = disabled ? "var(--color-grey-30)" : readOnly ? "var(--sys-color-field-bg-readOnly)" : "var(--sys-color-field-bg-default)";
+  const borderColor = borderless ? "transparent" : disabled ? "var(--color-grey-45)" : interactive && focused ? "var(--sys-color-field-border-focus)" : resolvedSuccess ? "var(--sys-color-field-border-success)" : resolvedError ? "var(--sys-color-field-border-danger)" : "var(--sys-color-field-border-default)";
+  const bgColor = borderless ? "transparent" : disabled ? "var(--color-grey-30)" : readOnly ? "var(--sys-color-field-bg-readOnly)" : "var(--sys-color-field-bg-default)";
   const textColor = disabled ? "var(--color-grey-65)" : readOnly ? "var(--sys-color-field-text-readOnly)" : "var(--sys-color-field-text-default)";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -3317,7 +3326,7 @@ var SField = react.forwardRef(function SField2({
           {
             className: "flex shrink-0 items-center font-bold text-(--sys-color-field-text-default)",
             style: {
-              height: s.height,
+              height: cssLen(labelHeight) ?? s.height,
               marginRight: s.fieldGap,
               width: cssLen(labelWidth),
               fontSize: s.fontSize,
@@ -3343,14 +3352,14 @@ var SField = react.forwardRef(function SField2({
             {
               className: cn(
                 "relative box-border flex min-w-0 items-stretch overflow-hidden border border-solid border-(--field-bc)",
-                interactive && "hover:border-(--sys-color-field-border-focus) hover:shadow-[0px_0px_4px_0px_#0071ff66] focus-within:border-(--sys-color-field-border-focus) focus-within:shadow-[0px_0px_4px_0px_#0071ff66]",
+                interactive && !borderless && "hover:border-(--sys-color-field-border-focus) hover:shadow-[0px_0px_4px_0px_#0071ff66] focus-within:border-(--sys-color-field-border-focus) focus-within:shadow-[0px_0px_4px_0px_#0071ff66]",
                 disabled && "cursor-not-allowed"
               ),
               style: {
                 // @ts-expect-error CSS 변수
                 "--field-bc": borderColor,
                 // focused/hovered prop이 명시된 경우 강조를 즉시 반영
-                ...interactive && focused ? { boxShadow: "0px 0px 4px 0px #0071ff66" } : {},
+                ...interactive && !borderless && focused ? { boxShadow: "0px 0px 4px 0px #0071ff66" } : {},
                 ...multiline ? { minHeight: s.height } : { height: s.height },
                 "width": cssLen(width),
                 "borderRadius": s.radius,
@@ -3395,15 +3404,28 @@ function flattenOptions(options, depth = 1) {
   const out = [];
   for (const o of options) {
     const hasChildren = Array.isArray(o.children) && o.children.length > 0;
-    out.push({
-      value: String(o.value),
-      label: o.label,
-      disabled: !!o.disabled,
-      depth,
-      isGroup: hasChildren,
-      raw: o.value
-    });
-    if (hasChildren) out.push(...flattenOptions(o.children, depth + 1));
+    if (hasChildren) {
+      const childFlat = flattenOptions(o.children, depth + 1);
+      const allChildrenDisabled = childFlat.every((c) => c.disabled);
+      out.push({
+        value: String(o.value),
+        label: o.label,
+        disabled: !!o.disabled || allChildrenDisabled,
+        depth,
+        isGroup: true,
+        raw: o.value
+      });
+      out.push(...childFlat);
+    } else {
+      out.push({
+        value: String(o.value),
+        label: o.label,
+        disabled: !!o.disabled,
+        depth,
+        isGroup: false,
+        raw: o.value
+      });
+    }
   }
   return out;
 }
@@ -3527,6 +3549,9 @@ var SSelect = react.forwardRef(function SSelect2({
   );
   const flat = react.useMemo(() => flattenOptions(options), [options]);
   const selectable = react.useMemo(() => selectableOptions(flat), [flat]);
+  const hasLeaf = react.useMemo(() => flat.some((o) => !o.isGroup), [flat]);
+  const allOptionsDisabled = hasLeaf && selectable.length === 0;
+  const effectiveDisabled = disabled || allOptionsDisabled;
   const showSearch = useSearch && selectable.length >= SEARCH_THRESHOLD;
   const labelByValue = react.useMemo(() => new Map(flat.map((o) => [o.value, o.label])), [flat]);
   const rawByValue = react.useMemo(() => new Map(flat.map((o) => [o.value, o.raw])), [flat]);
@@ -3593,10 +3618,10 @@ var SSelect = react.forwardRef(function SSelect2({
           Ariakit__namespace.Select,
           {
             ref: triggerRef,
-            disabled,
+            disabled: effectiveDisabled,
             className: "flex h-full w-full cursor-pointer items-center justify-between gap-[8px] bg-transparent px-[12px] text-left text-[12px] leading-[20px] outline-none disabled:cursor-not-allowed",
             style: {
-              color: disabled ? "var(--cmp-select-text-disabled)" : isPlaceholder ? "var(--cmp-select-icon-default)" : "var(--cmp-select-text-default)"
+              color: effectiveDisabled ? "var(--cmp-select-text-disabled)" : isPlaceholder ? "var(--cmp-select-icon-default)" : "var(--cmp-select-text-default)"
             },
             children: [
               isHtmlLabel(triggerText) ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -3611,7 +3636,7 @@ var SSelect = react.forwardRef(function SSelect2({
                 {
                   name: "chevronDown",
                   size: 12,
-                  color: disabled ? "var(--cmp-select-icon-disabled)" : "var(--cmp-select-icon-default)",
+                  color: effectiveDisabled ? "var(--cmp-select-icon-disabled)" : "var(--cmp-select-icon-default)",
                   className: cn("shrink-0 transition-transform duration-200", open && "rotate-180")
                 }
               )
@@ -3625,7 +3650,7 @@ var SSelect = react.forwardRef(function SSelect2({
             portalElement: portalContainer,
             gutter: 4,
             sameWidth: !dropdownWidth,
-            className: "z-50 overflow-auto rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] py-[4px] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)] data-[enter]:animate-floating-in-bottom data-[leave]:animate-floating-out-bottom",
+            className: "z-50 overflow-auto rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)] data-[enter]:animate-floating-in-bottom data-[leave]:animate-floating-out-bottom",
             style: {
               maxHeight: dropdownHeight,
               ...dropdownWidth ? { width: dropdownWidth } : {},
@@ -3666,7 +3691,7 @@ var SSelect = react.forwardRef(function SSelect2({
               ),
               hasItems ? /* @__PURE__ */ jsxRuntime.jsx(ItemList, { items: filtered, multi, selected, useSearch: showSearch }) : (
                 // 원본 sd-select-listbox__empty (표시할 항목이 없을 때)
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[12px] py-[12px] text-center text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[12px] py-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
               )
             ]
           }
@@ -3689,7 +3714,7 @@ var SSelect = react.forwardRef(function SSelect2({
       error: error || ruleError !== "",
       status: rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0,
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
-      disabled,
+      disabled: effectiveDisabled,
       width,
       className,
       style,
@@ -3724,7 +3749,11 @@ function ItemList({
         {
           className: cn(
             "select-none py-[4px] pr-[12px] text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-default)]",
-            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"
+            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 && "cursor-not-allowed text-[color:var(--cmp-listItem-content-disabled)]",
+            o.disabled && isDepth1 && "bg-[var(--cmp-listItem-depth1-bg-disabled)]"
           ),
           style: { paddingLeft: padLeft },
           children: o.label
@@ -3738,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,
@@ -3751,15 +3784,21 @@ function ItemList({
             "span",
             {
               className: cn(
-                "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid 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"
+                "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid",
+                o.disabled ? (
+                  // 비활성: 회색 채움(#E1E1E1) + 회색 테두리(#CCCCCC)
+                  "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"
+                )
               ),
               children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(
                 SIcon,
                 {
                   name: "checkboxCheck",
                   size: 12,
-                  color: "var(--cmp-checkbox-checked-icon-default)"
+                  color: o.disabled ? "var(--cmp-checkbox-checked-icon-disabled)" : "var(--cmp-checkbox-checked-icon-default)"
                 }
               )
             }