sellmate-design-system-react 0.1.7 → 0.1.8

package/dist/index.js

@@ -4,6 +4,7 @@ import { forwardRef, useState, useEffect, useRef, useCallback, createContext, us
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { createRoot } from 'react-dom/client';
+import * as RTooltip from '@radix-ui/react-tooltip';
 import * as RDropdown from '@radix-ui/react-dropdown-menu';
 import * as RPopover2 from '@radix-ui/react-popover';
 import * as RSwitch from '@radix-ui/react-switch';
@@ -3291,11 +3292,11 @@ var RADIUS = 34;
 var STROKE = 12;
 var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
 var COLOR_MAP = {
-  primary: { arc: "var(--cmp-spinner-color-arc)", track: "var(--cmp-spinner-color-track)" },
+  primary: { arc: "var(--cmp-progress-active-color)", track: "var(--cmp-progress-color-track)" },
   // inverse: 어두운 배경용 — arc 흰색, track 은 흰색 40%(회색 링)
   inverse: { arc: "var(--color-white)", track: "rgba(255,255,255,0.4)" },
-  error: { arc: "var(--color-red-75)", track: "var(--cmp-spinner-color-track)" },
-  complete: { arc: "#01BB4B", track: "var(--cmp-spinner-color-track)" }
+  error: { arc: "var(--color-red-75)", track: "var(--cmp-progress-color-track)" },
+  complete: { arc: "#01BB4B", track: "var(--cmp-progress-color-track)" }
 };
 var clamp2 = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
 var SCircleProgress = forwardRef(
@@ -3458,6 +3459,31 @@ var loading = {
     setState({ open: false });
   }
 };
+
+// src/lib/floating-anim.ts
+var FLOATING_SLIDE_ANIM = [
+  "data-[state=open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=delayed-open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=instant-open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=closed]:data-[side=top]:animate-floating-out-top",
+  "data-[state=open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom",
+  "data-[state=open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=delayed-open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=instant-open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=closed]:data-[side=left]:animate-floating-out-left",
+  "data-[state=open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=delayed-open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=instant-open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=closed]:data-[side=right]:animate-floating-out-right"
+].join(" ");
+var PortalContainerContext = createContext(null);
+var PortalContainerProvider = PortalContainerContext.Provider;
+function usePortalContainer() {
+  return useContext(PortalContainerContext) ?? void 0;
+}
 var SIZE_CONFIG = {
   sm: {
     gap: 4,
@@ -3491,6 +3517,7 @@ var STextLink = forwardRef(function STextLink2({
   className,
   onClick,
   children,
+  style,
   ...rest
 }, ref) {
   const s = SIZE_CONFIG[size];
@@ -3499,13 +3526,13 @@ var STextLink = forwardRef(function STextLink2({
   const handle = () => {
     if (!disabled) onClick?.();
   };
-  return /* @__PURE__ */ jsxs(
+  const portalContainer = usePortalContainer();
+  const link = /* @__PURE__ */ jsxs(
     "span",
     {
       ref,
       role: "button",
       tabIndex: disabled ? -1 : 0,
-      title: tooltipText,
       onClick: handle,
       onKeyDown: (e) => {
         if (e.key === "Enter" || e.key === " ") {
@@ -3520,7 +3547,7 @@ var STextLink = forwardRef(function STextLink2({
         disabled && "cursor-not-allowed",
         className
       ),
-      style: { gap: s.gap, color: contentColor },
+      style: { gap: s.gap, color: contentColor, ...style },
       ...rest,
       children: [
         icon && /* @__PURE__ */ jsx(SIcon, { name: icon, size: s.iconSize, color: resolvedIconColor }),
@@ -3543,12 +3570,13 @@ var STextLink = forwardRef(function STextLink2({
       ]
     }
   );
+  const text = (tooltipText ?? "").trim();
+  if (text === "") return link;
+  return /* @__PURE__ */ jsx(RTooltip.Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxs(RTooltip.Root, { children: [
+    /* @__PURE__ */ jsx(RTooltip.Trigger, { asChild: true, children: link }),
+    /* @__PURE__ */ jsx(RTooltip.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(RTooltip.Content, { side: "top", sideOffset: 4, className: cn("z-50", FLOATING_SLIDE_ANIM), children: /* @__PURE__ */ jsx(STag, { shape: "square", size: "xs", color: "grey", label: text }) }) })
+  ] }) });
 });
-var PortalContainerContext = createContext(null);
-var PortalContainerProvider = PortalContainerContext.Provider;
-function usePortalContainer() {
-  return useContext(PortalContainerContext) ?? void 0;
-}
 
 // src/lib/sanitize-inline-html.ts
 var ALLOWED_INLINE_TAGS = /* @__PURE__ */ new Set(["A", "B", "STRONG", "I", "EM", "BR", "SPAN"]);
@@ -3677,6 +3705,25 @@ var SDropdownButton = forwardRef(
   }, ref) {
     const portalContainer = usePortalContainer();
     const [open, setOpen] = useState(false);
+    const splitWrapRef = useRef(null);
+    const splitToggleRef = useRef(null);
+    const [splitAlignOffset, setSplitAlignOffset] = useState(0);
+    const [splitWidth, setSplitWidth] = useState(0);
+    useEffect(() => {
+      if (!split) return;
+      const update = () => {
+        if (splitWrapRef.current && splitToggleRef.current) {
+          setSplitAlignOffset(
+            -(splitWrapRef.current.offsetWidth - splitToggleRef.current.offsetWidth)
+          );
+          setSplitWidth(splitWrapRef.current.offsetWidth);
+        }
+      };
+      update();
+      const ro = new ResizeObserver(update);
+      ro.observe(splitWrapRef.current);
+      return () => ro.disconnect();
+    }, [split, label]);
     useImperativeHandle(
       ref,
       () => ({
@@ -3714,7 +3761,13 @@ var SDropdownButton = forwardRef(
       {
         sideOffset: 4,
         align: "start",
-        className: "z-50 min-w-[var(--radix-dropdown-menu-trigger-width)] overflow-hidden rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] py-[4px] shadow-normal-sm",
+        alignOffset: split ? splitAlignOffset : 0,
+        className: cn(
+          "z-50 overflow-hidden rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] py-[4px] shadow-normal-sm",
+          !split && "min-w-[var(--radix-dropdown-menu-trigger-width)]",
+          FLOATING_SLIDE_ANIM
+        ),
+        style: split ? { minWidth: splitWidth } : void 0,
         children: items.map((it) => /* @__PURE__ */ jsxs(
           RDropdown.Item,
           {
@@ -3748,6 +3801,7 @@ var SDropdownButton = forwardRef(
           split ? /* @__PURE__ */ jsxs(
             "div",
             {
+              ref: splitWrapRef,
               className: cn("inline-flex items-stretch", className),
               style: { minWidth: s.splitMinWidth, ...style },
               children: [
@@ -3770,6 +3824,7 @@ var SDropdownButton = forwardRef(
                 /* @__PURE__ */ jsx(RDropdown.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
                   "button",
                   {
+                    ref: splitToggleRef,
                     type: "button",
                     disabled,
                     "aria-label": "\uBA54\uB274 \uC5F4\uAE30",
@@ -3813,18 +3868,6 @@ var SDropdownButton = forwardRef(
   }
 );
 SDropdownButton.displayName = "SDropdownButton";
-
-// src/lib/floating-anim.ts
-var FLOATING_SLIDE_ANIM = [
-  "data-[state=open]:data-[side=top]:animate-floating-in-top",
-  "data-[state=closed]:data-[side=top]:animate-floating-out-top",
-  "data-[state=open]:data-[side=bottom]:animate-floating-in-bottom",
-  "data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom",
-  "data-[state=open]:data-[side=left]:animate-floating-in-left",
-  "data-[state=closed]:data-[side=left]:animate-floating-out-left",
-  "data-[state=open]:data-[side=right]:animate-floating-in-right",
-  "data-[state=closed]:data-[side=right]:animate-floating-out-right"
-].join(" ");
 var SIZE2 = {
   xxs: { icon: 12, radius: "sm" },
   xs: { icon: 16, radius: "sm" },
@@ -4358,9 +4401,9 @@ var SPopup = forwardRef(function SPopup2({
         useFooter && /* @__PURE__ */ jsxs(
           "footer",
           {
-            className: "relative z-[1] flex h-[52px] w-full flex-shrink-0 items-center gap-[var(--cmp-popup-footer-gap)] px-[var(--cmp-popup-footer-paddingX)] py-[var(--cmp-popup-footer-paddingY)]",
+            className: "relative z-[1] flex h-[52px] w-full flex-shrink-0 items-center gap-[var(--cmp-overlay-footer-gap)] px-[var(--cmp-overlay-footer-paddingX)] py-[var(--cmp-overlay-footer-paddingY)]",
             style: {
-              background: "var(--cmp-popup-footer-bg)",
+              background: "var(--cmp-overlay-footer-bg-default)",
               boxShadow: "var(--shadow-spread-md)"
             },
             children: [
@@ -4439,7 +4482,10 @@ function SGuide({
         side: "bottom",
         align: "start",
         sideOffset: 4,
-        className: "relative z-50 rounded-[var(--cmp-guide-contents-radius)] bg-[var(--color-white)]",
+        className: cn(
+          "relative z-50 rounded-[var(--cmp-guide-contents-radius)] bg-[var(--color-white)]",
+          FLOATING_SLIDE_ANIM
+        ),
         style: {
           width: popupWidth != null ? popupWidth : 426,
           padding: "var(--cmp-guide-contents-paddingY) var(--cmp-guide-contents-paddingX)",
@@ -4548,7 +4594,7 @@ function SModalContainer({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { ref: setPortalContainer, className: "fixed left-0 top-0 z-[1001]" })
+    /* @__PURE__ */ jsx("div", { ref: setPortalContainer, className: "pointer-events-auto fixed left-0 top-0 z-[1001]" })
   ] }) });
 }
 var TYPE_ICON = {
@@ -4688,7 +4734,7 @@ function SActionModal({
       height,
       className: "w-fit min-w-[480px]",
       children: /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-[320px] flex-col", children: [
-        /* @__PURE__ */ jsx("header", { className: "flex flex-shrink-0 items-center gap-[var(--cmp-modal-action-header-gap)] py-[var(--cmp-modal-action-header-paddingY)] pl-[var(--cmp-modal-action-header-paddingX)] pr-[calc(var(--cmp-modal-action-header-paddingX)+20px)]", children: /* @__PURE__ */ jsx("h2", { className: "text-[16px] font-bold leading-[26px] text-[color:var(--cmp-modal-action-title-color)]", children: modalTitle }) }),
+        /* @__PURE__ */ jsx("header", { className: "flex flex-shrink-0 items-center gap-[var(--cmp-overlay-header-gap)] py-[var(--cmp-overlay-header-paddingY)] pl-[var(--cmp-overlay-header-paddingX)] pr-[calc(var(--cmp-overlay-header-paddingX)+20px)]", children: /* @__PURE__ */ jsx("h2", { className: "text-[16px] font-bold leading-[26px] text-[color:var(--cmp-overlay-header-title-color)]", children: modalTitle }) }),
         /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto px-[var(--cmp-modal-action-body-paddingX)] pb-[var(--cmp-modal-action-body-paddingBottom)]", children }),
         button && /* @__PURE__ */ jsx(
           "footer",
@@ -5386,6 +5432,7 @@ var SSelect = forwardRef(function SSelect2({
   const selectStore = /* @__PURE__ */ jsxs(
     Ariakit.SelectProvider,
     {
+      animated: portalContainer == null ? 150 : false,
       value: multi ? selected : selected[0] ?? "",
       setValue: (v) => emit2(Array.isArray(v) ? v : v === "" ? [] : [v]),
       open,
@@ -5433,7 +5480,7 @@ var SSelect = 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)]",
+            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",
             style: {
               maxHeight: dropdownHeight,
               ...dropdownWidth ? { width: dropdownWidth } : {},
@@ -7068,16 +7115,25 @@ function SDatePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(RPopover2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(RPopover2.Content, { side: "bottom", align: "start", sideOffset: 4, className: "z-50", children: /* @__PURE__ */ jsx(
-          SCalendar,
+        /* @__PURE__ */ jsx(RPopover2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+          RPopover2.Content,
           {
-            value: value ?? void 0,
-            selectable,
-            elevated: true,
-            onValueChange: select,
-            onViewChange
+            side: "bottom",
+            align: "start",
+            sideOffset: 4,
+            className: cn("z-50", FLOATING_SLIDE_ANIM),
+            children: /* @__PURE__ */ jsx(
+              SCalendar,
+              {
+                value: value ?? void 0,
+                selectable,
+                elevated: true,
+                onValueChange: select,
+                onViewChange
+              }
+            )
           }
-        ) }) })
+        ) })
       ] })
     }
   );
@@ -7360,16 +7416,25 @@ function SDateRangePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(RPopover2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(RPopover2.Content, { side: "bottom", align: "start", sideOffset: 4, className: "z-50", children: /* @__PURE__ */ jsx(
-          RangeCalendar,
+        /* @__PURE__ */ jsx(RPopover2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+          RPopover2.Content,
           {
-            value: value ?? null,
-            selectable,
-            maxRange,
-            onSelect: select,
-            onViewChange
+            side: "bottom",
+            align: "start",
+            sideOffset: 4,
+            className: cn("z-50", FLOATING_SLIDE_ANIM),
+            children: /* @__PURE__ */ jsx(
+              RangeCalendar,
+              {
+                value: value ?? null,
+                selectable,
+                maxRange,
+                onSelect: select,
+                onViewChange
+              }
+            )
           }
-        ) }) })
+        ) })
       ] })
     }
   );
@@ -7810,7 +7875,7 @@ function SKeyValueTable({
                   rowSpan: f.thRowSpan && f.thRowSpan > 1 ? f.thRowSpan : void 0,
                   colSpan: f.thColSpan && f.thColSpan > 1 ? f.thColSpan : void 0,
                   className: cn(
-                    "h-[var(--cmp-table-keyValue-height)] box-border bg-[var(--cmp-table-header-bg)] px-[var(--cmp-table-header-paddingX)] py-[var(--cmp-table-keyValue-body-padding)] text-left align-middle",
+                    "h-[var(--cmp-table-keyValue-height)] box-border bg-[var(--cmp-table-header-bg)] px-[var(--cmp-table-header-paddingX)] py-[var(--cmp-table-keyValue-body-paddingY)] text-left align-middle",
                     cellBorder,
                     f.thClass
                   ),
@@ -7839,7 +7904,7 @@ function SKeyValueTable({
                   rowSpan: f.tdRowSpan && f.tdRowSpan > 1 ? f.tdRowSpan : void 0,
                   colSpan: f.tdColSpan && f.tdColSpan > 1 ? f.tdColSpan : void 0,
                   className: cn(
-                    "h-[var(--cmp-table-keyValue-height)] box-border bg-[var(--sys-color-bg-frame)] p-[var(--cmp-table-keyValue-body-padding)] align-middle",
+                    "h-[var(--cmp-table-keyValue-height)] box-border bg-[var(--sys-color-bg-frame)] px-[var(--cmp-table-keyValue-body-paddingX-default)] py-[var(--cmp-table-keyValue-body-paddingY)] align-middle",
                     cellBorder,
                     f.tdClass
                   ),
@@ -8630,17 +8695,11 @@ var SChipInput = forwardRef(function SChipInput2({
                       style: { width: 1, height: 12, backgroundColor: "#E1E1E1" }
                     }
                   ),
-                  showMaxCount && /* @__PURE__ */ jsxs(
-                    "span",
-                    {
-                      className: "s-chip-input__max-count text-12 text-(--cmp-chipInput-text-placeholder)",
-                      children: [
-                        "\uCD5C\uB300 ",
-                        maxCount,
-                        "\uAC1C"
-                      ]
-                    }
-                  ),
+                  showMaxCount && /* @__PURE__ */ jsxs("span", { className: "s-chip-input__max-count text-12 text-(--cmp-chipInput-text-placeholder)", children: [
+                    "\uCD5C\uB300 ",
+                    maxCount,
+                    "\uAC1C"
+                  ] }),
                   showResetLink && /* @__PURE__ */ jsx(
                     STextLink,
                     {