sellmate-design-system-react 9.0.0-beta.73 → 9.0.0-beta.74

package/dist/index.cjs

@@ -4885,6 +4885,7 @@ var cssLen = (v) => v === void 0 || v === "" || v === 0 ? void 0 : typeof v ===
 var SField = /* @__PURE__ */ react.forwardRef(function SField2({
   name,
   label = "",
+  subLabel = "",
   icon,
   iconColor,
   labelTooltip = "",
@@ -5006,6 +5007,16 @@ var SField = /* @__PURE__ */ react.forwardRef(function SField2({
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: label }),
+                  subLabel !== "" && // field 라벨 토큰이 아니라 기본 타이포 토큰을 쓴다 — 보조 라벨은 굵기·색이 라벨과
+                  // 따로 가므로 field 토큰에 묶지 않는다. 크기도 size 와 무관하게 body/sm 고정.
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: "typo-body-sm-medium shrink-0 whitespace-nowrap text-(--sys-color-fg-secondary)",
+                      style: { marginLeft: s.labelGap },
+                      children: subLabel
+                    }
+                  ),
                   (labelTooltip !== "" || labelTooltipProps) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 flex items-center", style: { marginLeft: s.labelGap }, children: /* @__PURE__ */ jsxRuntime.jsx(
                     STooltip2,
                     {
@@ -5122,6 +5133,7 @@ var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
   textareaStyle,
   label,
   labelPosition,
+  subLabel,
   labelWidth,
   icon,
   iconColor,
@@ -5182,6 +5194,7 @@ var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
     {
       label,
       labelPosition,
+      subLabel,
       labelWidth,
       icon,
       iconColor,
@@ -15547,6 +15560,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   searchDebounce = DEFAULT_SEARCH_DEBOUNCE,
   label,
   labelPosition,
+  subLabel,
   labelWidth,
   icon,
   iconColor,
@@ -16005,6 +16019,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     {
       label,
       labelPosition,
+      subLabel,
       labelWidth,
       icon,
       iconColor,
@@ -17736,6 +17751,7 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
   inputStyle,
   label,
   labelPosition,
+  subLabel,
   labelWidth,
   labelTooltip,
   labelTooltipProps,
@@ -17780,6 +17796,7 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
     {
       label,
       labelPosition,
+      subLabel,
       labelWidth,
       labelTooltip,
       labelTooltipProps,
@@ -17971,6 +17988,7 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
   hovered,
   label,
   labelPosition,
+  subLabel,
   labelWidth,
   icon,
   iconColor,
@@ -18141,6 +18159,7 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
     {
       label,
       labelPosition,
+      subLabel,
       labelWidth,
       icon,
       iconColor,
@@ -18860,6 +18879,7 @@ function SDatePicker({
   status,
   label,
   labelPosition,
+  subLabel,
   labelWidth,
   icon,
   iconColor,
@@ -18933,6 +18953,7 @@ function SDatePicker({
     {
       label,
       labelPosition,
+      subLabel,
       labelWidth,
       icon,
       iconColor,
@@ -19396,6 +19417,7 @@ function SDateRangePicker({
   status,
   label,
   labelPosition,
+  subLabel,
   labelWidth,
   icon,
   iconColor,
@@ -19469,6 +19491,7 @@ function SDateRangePicker({
     {
       label,
       labelPosition,
+      subLabel,
       labelWidth,
       icon,
       iconColor,
@@ -19774,6 +19797,7 @@ function SFilePicker({
   size = "sm",
   label,
   labelPosition,
+  subLabel,
   labelWidth,
   icon,
   iconColor,
@@ -19959,6 +19983,7 @@ function SFilePicker({
         borderless: inline,
         label,
         labelPosition,
+        subLabel,
         labelWidth,
         icon,
         iconColor,
@@ -22430,11 +22455,13 @@ function SRadioButton({
   size = "sm",
   disabled = false,
   name,
+  showTooltip = false,
   onValueChange,
   className,
   style
 }) {
   const s = SIZE_CONFIG2[size];
+  const [hoveredValue, setHoveredValue] = react.useState(null);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -22447,7 +22474,8 @@ function SRadioButton({
         const od = disabled || o.disabled;
         const first = i === 0;
         const last = i === options.length - 1;
-        return /* @__PURE__ */ jsxRuntime.jsx(
+        const tooltip = showTooltip && o.tooltip ? o.tooltip : void 0;
+        const button = /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
@@ -22456,6 +22484,10 @@ function SRadioButton({
             "aria-checked": selected,
             disabled: od,
             onClick: () => !od && !selected && onValueChange?.(o.value),
+            onMouseEnter: tooltip ? () => setHoveredValue(o.value) : void 0,
+            onMouseLeave: tooltip ? () => setHoveredValue(null) : void 0,
+            onFocus: tooltip ? () => setHoveredValue(o.value) : void 0,
+            onBlur: tooltip ? () => setHoveredValue(null) : void 0,
             className: cn(
               "relative box-border grow inline-flex items-center justify-center whitespace-nowrap border border-solid font-medium transition-colors",
               first ? "" : "-ml-px",
@@ -22482,6 +22514,17 @@ function SRadioButton({
           },
           o.value
         );
+        return tooltip ? /* @__PURE__ */ jsxRuntime.jsx(
+          STooltip2,
+          {
+            trigger: "none",
+            open: hoveredValue === o.value,
+            tooltipType: "accent",
+            message: [tooltip],
+            children: button
+          },
+          o.value
+        ) : button;
       })
     }
   );
@@ -24477,6 +24520,7 @@ var SEditor = /* @__PURE__ */ react.forwardRef(function SEditor2({
   onBlur,
   label,
   labelPosition,
+  subLabel,
   labelWidth,
   icon,
   iconColor,
@@ -24566,6 +24610,7 @@ var SEditor = /* @__PURE__ */ react.forwardRef(function SEditor2({
       name,
       label,
       labelPosition,
+      subLabel,
       labelWidth,
       icon,
       iconColor,
@@ -26539,6 +26584,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
   dropdownMinWidth = 200,
   label,
   labelPosition,
+  subLabel,
   labelWidth,
   hint,
   errorMessage,
@@ -26680,6 +26726,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
     {
       label,
       labelPosition,
+      subLabel,
       labelWidth,
       labelHeight: `calc(var(--cmp-chipInput-${size}-minHeight) + 2px)`,
       icon,
@@ -26999,6 +27046,7 @@ var SBarcodeInput = /* @__PURE__ */ react.forwardRef(
     inputStyle,
     label,
     labelPosition,
+    subLabel,
     labelWidth,
     icon,
     iconColor,
@@ -27036,6 +27084,7 @@ var SBarcodeInput = /* @__PURE__ */ react.forwardRef(
       {
         label,
         labelPosition,
+        subLabel,
         labelWidth,
         icon,
         iconColor,
@@ -27406,6 +27455,7 @@ function STimePicker({
   status,
   label,
   labelPosition,
+  subLabel,
   labelWidth,
   icon,
   iconColor,
@@ -27461,6 +27511,7 @@ function STimePicker({
     {
       label,
       labelPosition,
+      subLabel,
       labelWidth,
       icon,
       iconColor,
@@ -27874,6 +27925,7 @@ function STimeRangePicker({
   status,
   label,
   labelPosition,
+  subLabel,
   labelWidth,
   icon,
   iconColor,
@@ -27931,6 +27983,7 @@ function STimeRangePicker({
     {
       label,
       labelPosition,
+      subLabel,
       labelWidth,
       icon,
       iconColor,