sellmate-design-system-react 0.1.9 → 0.1.10

package/dist/index.js

@@ -3300,12 +3300,35 @@ var COLOR_MAP = {
 };
 var clamp2 = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
 var SCircleProgress = forwardRef(
-  function SCircleProgress2({ value = 0, type = "primary", indeterminate = false, label, className, style }, ref) {
+  function SCircleProgress2({
+    value = 0,
+    type = "primary",
+    indeterminate = false,
+    label,
+    innerValue = false,
+    className,
+    style
+  }, ref) {
     const v = clamp2(value);
     const colors = COLOR_MAP[type];
     const c = VIEWBOX / 2;
     const percentColor = v === 0 ? "var(--sys-color-fg-tertiary, #888888)" : colors.arc;
     const filled = v / 100 * CIRCUMFERENCE;
+    const showPercent = !indeterminate;
+    const percentNode = /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "text-center text-[16px] font-bold leading-[26px]",
+          innerValue && "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+        ),
+        style: { color: percentColor },
+        children: [
+          Math.round(v),
+          "%"
+        ]
+      }
+    );
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -3316,57 +3339,53 @@ var SCircleProgress = forwardRef(
         ),
         style,
         children: [
-          /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`,
-              xmlns: "http://www.w3.org/2000/svg",
-              className: cn("h-[80px] w-[80px]", indeterminate && "origin-center animate-circle-spin"),
-              children: [
-                /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    cx: c,
-                    cy: c,
-                    r: RADIUS,
-                    fill: "none",
-                    strokeWidth: STROKE,
-                    style: { stroke: colors.track }
-                  }
+          /* @__PURE__ */ jsxs("div", { className: cn(innerValue && "relative"), children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`,
+                xmlns: "http://www.w3.org/2000/svg",
+                className: cn(
+                  "h-[80px] w-[80px]",
+                  indeterminate && "origin-center animate-circle-spin"
                 ),
-                /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    cx: c,
-                    cy: c,
-                    r: RADIUS,
-                    fill: "none",
-                    strokeWidth: STROKE,
-                    strokeLinecap: "round",
-                    className: cn(
-                      "origin-center",
-                      indeterminate ? "animate-circle-arc" : "-rotate-90 transition-[stroke-dasharray] duration-[400ms] ease-linear"
-                    ),
-                    style: {
-                      stroke: colors.arc,
-                      ...indeterminate ? {} : { strokeDasharray: `${filled} ${CIRCUMFERENCE}`, strokeDashoffset: 0 }
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: c,
+                      cy: c,
+                      r: RADIUS,
+                      fill: "none",
+                      strokeWidth: STROKE,
+                      style: { stroke: colors.track }
                     }
-                  }
-                )
-              ]
-            }
-          ),
-          !indeterminate && /* @__PURE__ */ jsxs(
-            "span",
-            {
-              className: "text-center text-[16px] font-bold leading-[26px]",
-              style: { color: percentColor },
-              children: [
-                Math.round(v),
-                "%"
-              ]
-            }
-          ),
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: c,
+                      cy: c,
+                      r: RADIUS,
+                      fill: "none",
+                      strokeWidth: STROKE,
+                      strokeLinecap: "round",
+                      className: cn(
+                        "origin-center",
+                        indeterminate ? "animate-circle-arc" : "-rotate-90 transition-[stroke-dasharray] duration-[400ms] ease-linear"
+                      ),
+                      style: {
+                        stroke: colors.arc,
+                        ...indeterminate ? {} : { strokeDasharray: `${filled} ${CIRCUMFERENCE}`, strokeDashoffset: 0 }
+                      }
+                    }
+                  )
+                ]
+              }
+            ),
+            showPercent && innerValue && percentNode
+          ] }),
+          showPercent && !innerValue && percentNode,
           label && /* @__PURE__ */ jsx("span", { className: "text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]", children: label })
         ]
       }
@@ -4125,7 +4144,7 @@ var STooltip = forwardRef(function STooltip2({
   if (disabled || body == null) return /* @__PURE__ */ jsx(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
   );
@@ -4787,6 +4806,7 @@ var DEFAULT_BUTTON_LABEL = {
 function SLoadingModal({
   open,
   onOpenChange,
+  onClose,
   persistent,
   state: state2 = "loading",
   progress,
@@ -4805,6 +4825,8 @@ function SLoadingModal({
     {
       open,
       onOpenChange,
+      onClose,
+      showClose: state2 === "error",
       persistent,
       ariaTitle: lines[0] || "\uB85C\uB529 \uC911",
       width,
@@ -5614,7 +5636,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 },
@@ -5629,10 +5651,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__ */ jsx(Ariakit.ComboboxItem, {}) : void 0,
@@ -5645,7 +5671,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"
@@ -5947,7 +5973,8 @@ var STable = forwardRef(function STable2({
     else onSelectedChange?.([...selected, row]);
   };
   const radiusClass = radius === "full" ? "rounded-none" : radius === "useTop" ? "rounded-b-[var(--cmp-table-radius)] rounded-t-none" : "rounded-[var(--cmp-table-radius)]";
-  const cellPadY = dense ? "var(--cmp-table-body-dense-paddingY)" : "var(--cmp-table-body-default-paddingY)";
+  const cellPadY = dense ? "var(--cmp-table-body-paddingY-dense)" : "var(--cmp-table-body-paddingY-default)";
+  const cellPadX = dense ? "var(--cmp-table-body-paddingX-default)" : "var(--cmp-table-body-paddingX-wide)";
   const rowH = dense ? "var(--cmp-table-body-dense-height)" : "var(--cmp-table-body-default-height)";
   const totalColSpan = visibleCols.length + (selectable ? 1 : 0);
   const stickyInfo = (i) => {
@@ -6122,13 +6149,15 @@ var STable = forwardRef(function STable2({
                                   className: cn(
                                     // 원본 .td: 컬럼 폭에 맞춰 내용 말줄임(overflow hidden + ellipsis) + 행 구분선(border-b)
                                     // 셀 배경은 흰색으로 채워 뒤 배경이 비치지 않게 하고, hover 시 행 배경(grey_05)을 따른다.
-                                    "overflow-hidden text-ellipsis whitespace-nowrap border-b border-solid border-[color:var(--cmp-table-border-color)] px-[16px] text-[12px] leading-[20px] text-[color:var(--sys-color-fg-primary)]",
+                                    "overflow-hidden text-ellipsis whitespace-nowrap border-b border-solid border-[color:var(--cmp-table-border-color)] text-[12px] leading-[20px] text-[color:var(--sys-color-fg-primary)]",
                                     rowBg,
                                     "group-hover:bg-[var(--color-grey-05)]",
                                     stickyShadowClass(i),
                                     col.tdClass
                                   ),
                                   style: {
+                                    paddingLeft: cellPadX,
+                                    paddingRight: cellPadX,
                                     paddingTop: cellPadY,
                                     paddingBottom: cellPadY,
                                     textAlign: col.align ?? "left",
@@ -6862,7 +6891,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,
@@ -7770,7 +7799,10 @@ function SFilePicker({
   const autoId = useId();
   const resolvedName = name ?? autoId;
   const inputRef = useRef(null);
+  const contentBoxRef = useRef(null);
   const [ruleError, setRuleError] = useState("");
+  const [listOpen, setListOpen] = useState(false);
+  const portalContainer = usePortalContainer();
   const files = multiple ? Array.isArray(value) ? value : [] : value && !Array.isArray(value) ? value : null;
   const hasFiles = multiple ? files.length > 0 : !!files;
   const displayText = !hasFiles ? placeholder : multiple ? files.map((f) => f.name).join(", ") : files.name;
@@ -7824,10 +7856,12 @@ function SFilePicker({
     e.stopPropagation();
     if (disabled) return;
     onValueChange?.(multiple ? [] : null);
+    setListOpen(false);
   };
   const removeChip = (i) => {
     const next = files.filter((_, idx) => idx !== i);
     onValueChange?.(next);
+    if (next.length === 0) setListOpen(false);
   };
   const open = () => {
     if (!disabled) inputRef.current?.click();
@@ -7838,9 +7872,12 @@ function SFilePicker({
   const iconSize = size === "md" ? 20 : 16;
   const gapCls = size === "md" ? "gap-[var(--cmp-filepicker-md-gap)]" : "gap-[var(--cmp-filepicker-sm-gap)]";
   const inlinePlaceholder = inline && !disabled && !hasFiles;
-  const content = /* @__PURE__ */ jsxs(
+  const showListbox = multiple && useMultipleListBox;
+  const filesArr = multiple ? files : [];
+  const contentInner = /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: contentBoxRef,
       className: cn("group/filepicker flex h-full w-full items-center", gapCls),
       style: { padding: inline ? 0 : `0 ${padX}` },
       children: [
@@ -7895,25 +7932,34 @@ function SFilePicker({
             ]
           }
         ),
+        showListbox && hasFiles && !disabled && /* @__PURE__ */ jsx(
+          Ariakit.PopoverDisclosure,
+          {
+            render: /* @__PURE__ */ jsx(SGhostButton, { icon: "caretDown", size: "xxs", ariaLabel: "toggle file list" }),
+            className: cn("shrink-0 transition-transform duration-150", listOpen && "rotate-180")
+          }
+        ),
         !disabled && hasFiles && /* @__PURE__ */ jsx(SGhostButton, { icon: "close", size: "xxs", ariaLabel: "clear", onClick: clear })
       ]
     }
   );
-  const chips = multiple && files.length > 0 && /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "mt-[8px] flex gap-[8px]",
-        useMultipleListBox ? "box-border flex-col items-start rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] p-[8px] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]" : "flex-wrap"
-      ),
-      style: useMultipleListBox ? {
-        width: typeof width === "number" ? `${width}px` : width,
-        // label 이 있으면 SField 입력 박스 시작 위치(labelWidth + fieldGap)에 맞춰 정렬
-        marginLeft: label && labelWidth != null ? `calc(${typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth} + var(--sys-space-field-${size}-gap))` : void 0
-      } : void 0,
-      children: files.map((f, i) => /* @__PURE__ */ jsx(SChip, { value: f.name, editable: false, onRemove: () => removeChip(i) }, i))
-    }
-  );
+  const content = showListbox ? /* @__PURE__ */ jsxs(Ariakit.PopoverProvider, { open: listOpen, setOpen: setListOpen, placement: "bottom-start", children: [
+    contentInner,
+    /* @__PURE__ */ jsx(
+      Ariakit.Popover,
+      {
+        portal: true,
+        portalElement: portalContainer,
+        gutter: 4,
+        unmountOnHide: true,
+        getAnchorRect: () => contentBoxRef.current?.getBoundingClientRect() ?? null,
+        style: { minWidth: contentBoxRef.current?.offsetWidth },
+        className: "z-50 box-border flex flex-col items-stretch gap-[8px] rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] p-[8px] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",
+        children: filesArr.map((f, i) => /* @__PURE__ */ jsx(SChip, { value: f.name, editable: false, onRemove: () => removeChip(i) }, i))
+      }
+    )
+  ] }) : contentInner;
+  const chips = multiple && !useMultipleListBox && filesArr.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-[8px] flex flex-wrap gap-[8px]", children: filesArr.map((f, i) => /* @__PURE__ */ jsx(SChip, { value: f.name, editable: false, onRemove: () => removeChip(i) }, i)) });
   return /* @__PURE__ */ jsxs("div", { className, style, children: [
     /* @__PURE__ */ jsx(
       SField,
@@ -7955,7 +8001,7 @@ function SKeyValueTable({
   if (fields.length === 0) return null;
   const emit2 = (name, value) => onChange?.({ name, value });
   const cellHeight = dense ? "var(--cmp-table-body-dense-height)" : "var(--cmp-table-keyValue-height)";
-  const cellPadY = dense ? "var(--cmp-table-body-dense-paddingY)" : "var(--cmp-table-keyValue-body-paddingY)";
+  const cellPadY = dense ? "var(--cmp-table-body-paddingY-dense)" : "var(--cmp-table-keyValue-body-paddingY)";
   const renderField = (f) => {
     if (f.render) return f.render;
     const opt = f.options ?? {};