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

package/dist/index.js

@@ -4857,6 +4857,7 @@ var cssLen = (v) => v === void 0 || v === "" || v === 0 ? void 0 : typeof v ===
 var SField = /* @__PURE__ */ forwardRef(function SField2({
   name,
   label = "",
+  subLabel = "",
   icon,
   iconColor,
   labelTooltip = "",
@@ -4978,6 +4979,16 @@ var SField = /* @__PURE__ */ forwardRef(function SField2({
                     }
                   ),
                   /* @__PURE__ */ jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: label }),
+                  subLabel !== "" && // field 라벨 토큰이 아니라 기본 타이포 토큰을 쓴다 — 보조 라벨은 굵기·색이 라벨과
+                  // 따로 가므로 field 토큰에 묶지 않는다. 크기도 size 와 무관하게 body/sm 고정.
+                  /* @__PURE__ */ 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__ */ jsx("span", { className: "shrink-0 flex items-center", style: { marginLeft: s.labelGap }, children: /* @__PURE__ */ jsx(
                     STooltip2,
                     {
@@ -5094,6 +5105,7 @@ var STextarea = /* @__PURE__ */ forwardRef(function STextarea2({
   textareaStyle,
   label,
   labelPosition,
+  subLabel,
   labelWidth,
   icon,
   iconColor,
@@ -5154,6 +5166,7 @@ var STextarea = /* @__PURE__ */ forwardRef(function STextarea2({
     {
       label,
       labelPosition,
+      subLabel,
       labelWidth,
       icon,
       iconColor,
@@ -15519,6 +15532,7 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
   searchDebounce = DEFAULT_SEARCH_DEBOUNCE,
   label,
   labelPosition,
+  subLabel,
   labelWidth,
   icon,
   iconColor,
@@ -15977,6 +15991,7 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
     {
       label,
       labelPosition,
+      subLabel,
       labelWidth,
       icon,
       iconColor,
@@ -17708,6 +17723,7 @@ var SInput = /* @__PURE__ */ forwardRef(function SInput2({
   inputStyle,
   label,
   labelPosition,
+  subLabel,
   labelWidth,
   labelTooltip,
   labelTooltipProps,
@@ -17752,6 +17768,7 @@ var SInput = /* @__PURE__ */ forwardRef(function SInput2({
     {
       label,
       labelPosition,
+      subLabel,
       labelWidth,
       labelTooltip,
       labelTooltipProps,
@@ -17943,6 +17960,7 @@ var SNumberInput = /* @__PURE__ */ forwardRef(function SNumberInput2({
   hovered,
   label,
   labelPosition,
+  subLabel,
   labelWidth,
   icon,
   iconColor,
@@ -18113,6 +18131,7 @@ var SNumberInput = /* @__PURE__ */ forwardRef(function SNumberInput2({
     {
       label,
       labelPosition,
+      subLabel,
       labelWidth,
       icon,
       iconColor,
@@ -18832,6 +18851,7 @@ function SDatePicker({
   status,
   label,
   labelPosition,
+  subLabel,
   labelWidth,
   icon,
   iconColor,
@@ -18905,6 +18925,7 @@ function SDatePicker({
     {
       label,
       labelPosition,
+      subLabel,
       labelWidth,
       icon,
       iconColor,
@@ -19368,6 +19389,7 @@ function SDateRangePicker({
   status,
   label,
   labelPosition,
+  subLabel,
   labelWidth,
   icon,
   iconColor,
@@ -19441,6 +19463,7 @@ function SDateRangePicker({
     {
       label,
       labelPosition,
+      subLabel,
       labelWidth,
       icon,
       iconColor,
@@ -19746,6 +19769,7 @@ function SFilePicker({
   size = "sm",
   label,
   labelPosition,
+  subLabel,
   labelWidth,
   icon,
   iconColor,
@@ -19931,6 +19955,7 @@ function SFilePicker({
         borderless: inline,
         label,
         labelPosition,
+        subLabel,
         labelWidth,
         icon,
         iconColor,
@@ -22402,11 +22427,13 @@ function SRadioButton({
   size = "sm",
   disabled = false,
   name,
+  showTooltip = false,
   onValueChange,
   className,
   style
 }) {
   const s = SIZE_CONFIG2[size];
+  const [hoveredValue, setHoveredValue] = useState(null);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -22419,7 +22446,8 @@ function SRadioButton({
         const od = disabled || o.disabled;
         const first = i === 0;
         const last = i === options.length - 1;
-        return /* @__PURE__ */ jsx(
+        const tooltip = showTooltip && o.tooltip ? o.tooltip : void 0;
+        const button = /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -22428,6 +22456,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",
@@ -22454,6 +22486,17 @@ function SRadioButton({
           },
           o.value
         );
+        return tooltip ? /* @__PURE__ */ jsx(
+          STooltip2,
+          {
+            trigger: "none",
+            open: hoveredValue === o.value,
+            tooltipType: "accent",
+            message: [tooltip],
+            children: button
+          },
+          o.value
+        ) : button;
       })
     }
   );
@@ -24449,6 +24492,7 @@ var SEditor = /* @__PURE__ */ forwardRef(function SEditor2({
   onBlur,
   label,
   labelPosition,
+  subLabel,
   labelWidth,
   icon,
   iconColor,
@@ -24538,6 +24582,7 @@ var SEditor = /* @__PURE__ */ forwardRef(function SEditor2({
       name,
       label,
       labelPosition,
+      subLabel,
       labelWidth,
       icon,
       iconColor,
@@ -26511,6 +26556,7 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
   dropdownMinWidth = 200,
   label,
   labelPosition,
+  subLabel,
   labelWidth,
   hint,
   errorMessage,
@@ -26652,6 +26698,7 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
     {
       label,
       labelPosition,
+      subLabel,
       labelWidth,
       labelHeight: `calc(var(--cmp-chipInput-${size}-minHeight) + 2px)`,
       icon,
@@ -26971,6 +27018,7 @@ var SBarcodeInput = /* @__PURE__ */ forwardRef(
     inputStyle,
     label,
     labelPosition,
+    subLabel,
     labelWidth,
     icon,
     iconColor,
@@ -27008,6 +27056,7 @@ var SBarcodeInput = /* @__PURE__ */ forwardRef(
       {
         label,
         labelPosition,
+        subLabel,
         labelWidth,
         icon,
         iconColor,
@@ -27378,6 +27427,7 @@ function STimePicker({
   status,
   label,
   labelPosition,
+  subLabel,
   labelWidth,
   icon,
   iconColor,
@@ -27433,6 +27483,7 @@ function STimePicker({
     {
       label,
       labelPosition,
+      subLabel,
       labelWidth,
       icon,
       iconColor,
@@ -27846,6 +27897,7 @@ function STimeRangePicker({
   status,
   label,
   labelPosition,
+  subLabel,
   labelWidth,
   icon,
   iconColor,
@@ -27903,6 +27955,7 @@ function STimeRangePicker({
     {
       label,
       labelPosition,
+      subLabel,
       labelWidth,
       icon,
       iconColor,