sellmate-design-system-react 9.0.0-beta.20 → 9.0.0-beta.21

package/dist/index.cjs

@@ -3442,8 +3442,224 @@ var SBadge = /* @__PURE__ */ react.forwardRef(function SBadge2({ color = "blue",
     }
   ) });
 });
-var SCard = /* @__PURE__ */ react.forwardRef(function SCard2({ bordered = false, className, children, ...rest }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+
+// src/components/SButton/button.config.ts
+var BUTTON_COLORS = ["primary", "secondary", "neutral", "danger"];
+var BUTTON_SIZES = ["xs", "sm", "md", "lg"];
+var V = (path) => `var(--cmp-button-${path})`;
+function buttonPreset(color, outline) {
+  switch (color) {
+    case "primary":
+      return outline ? {
+        bg: V("brand-outline-bg-default"),
+        bgHover: V("brand-outline-bg-hover"),
+        text: V("brand-outline-content"),
+        icon: V("brand-outline-content"),
+        border: V("brand-outline-border")
+      } : {
+        bg: V("brand-strong-bg-default"),
+        bgHover: V("brand-strong-bg-hover"),
+        text: V("brand-strong-content"),
+        icon: V("brand-strong-content"),
+        border: "transparent"
+      };
+    case "secondary":
+      return {
+        bg: V("brand-subtle-bg-default"),
+        bgHover: V("brand-subtle-bg-hover"),
+        text: V("brand-subtle-content"),
+        icon: V("brand-subtle-content"),
+        border: "transparent"
+      };
+    case "neutral":
+      return {
+        bg: V("neutral-outline-bg-default"),
+        bgHover: V("neutral-outline-bg-hover"),
+        text: V("neutral-outline-text"),
+        icon: V("neutral-outline-icon"),
+        border: outline ? V("neutral-outline-border") : "transparent"
+      };
+    case "danger":
+      return outline ? {
+        bg: V("danger-outline-bg-default"),
+        bgHover: V("danger-outline-bg-hover"),
+        text: V("danger-outline-content"),
+        icon: V("danger-outline-content"),
+        border: V("danger-outline-border")
+      } : {
+        bg: V("danger-strong-bg-default"),
+        bgHover: V("danger-strong-bg-hover"),
+        text: V("danger-strong-content"),
+        icon: V("danger-strong-content"),
+        border: "transparent"
+      };
+  }
+}
+var BUTTON_SIZE_CONFIG = {
+  xs: {
+    height: "var(--cmp-button-xs-height)",
+    paddingX: "var(--cmp-button-xs-paddingX)",
+    gap: "var(--cmp-button-xs-gap)",
+    iconSize: 12,
+    fontSize: 12,
+    fontWeight: 500,
+    radius: "var(--cmp-button-radius-sm)",
+    minWidth: 36
+  },
+  sm: {
+    height: "var(--cmp-button-sm-height)",
+    paddingX: "var(--cmp-button-sm-paddingX)",
+    gap: "var(--cmp-button-sm-gap)",
+    iconSize: 16,
+    fontSize: 12,
+    fontWeight: 500,
+    radius: "var(--cmp-button-radius-sm)",
+    minWidth: 70
+  },
+  md: {
+    height: "var(--cmp-button-md-height)",
+    paddingX: "var(--cmp-button-md-paddingX)",
+    gap: "var(--cmp-button-md-gap)",
+    iconSize: 20,
+    fontSize: 16,
+    fontWeight: 500,
+    radius: "var(--cmp-button-radius-md)",
+    minWidth: 100
+  },
+  lg: {
+    height: "var(--cmp-button-lg-height)",
+    paddingX: "var(--cmp-button-lg-paddingX)",
+    gap: "var(--cmp-button-lg-gap)",
+    iconSize: 24,
+    fontSize: 18,
+    fontWeight: 500,
+    radius: "var(--cmp-button-radius-md)",
+    minWidth: 120
+  }
+};
+var BUTTON_FOCUS_RING = "var(--sys-color-border-accent)";
+var BUTTON_DISABLED_BG = "var(--cmp-button-bg-disabled, #E1E1E1)";
+var BUTTON_DISABLED_BORDER = "var(--cmp-button-border-disabled, #CCCCCC)";
+var BUTTON_DISABLED_TEXT = "var(--cmp-button-text-disabled, #888888)";
+var BUTTON_DISABLED_ICON = "var(--cmp-button-icon-disabled, #BBBBBB)";
+var SButton = /* @__PURE__ */ react.forwardRef(function SButton2({
+  color = "primary",
+  outline = false,
+  size = "sm",
+  icon,
+  rightIcon,
+  label,
+  className,
+  style,
+  type = "button",
+  disabled = false,
+  "aria-label": ariaLabel,
+  ...props
+}, ref) {
+  const preset = buttonPreset(color, outline);
+  const s = BUTTON_SIZE_CONFIG[size];
+  const hasLabel = label != null && label !== "";
+  const iconOnly = !hasLabel && Boolean(icon) !== Boolean(rightIcon);
+  if (color === "secondary" && outline && typeof console !== "undefined") {
+    console.warn(
+      '[SButton] color="secondary" \uB294 outline \uC744 \uC9C0\uC6D0\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. solid \uB85C \uB80C\uB354\uB429\uB2C8\uB2E4.'
+    );
+  }
+  if (iconOnly && !ariaLabel && typeof console !== "undefined") {
+    console.warn(`[SButton] \uC544\uC774\uCF58 \uC804\uC6A9 \uBC84\uD2BC\uC740 aria-label \uC774 \uD544\uC694\uD569\uB2C8\uB2E4. (color="${color}")`);
+  }
+  const iconColor = disabled ? BUTTON_DISABLED_ICON : preset.icon;
+  const iconNode = icon ? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.iconSize, color: iconColor }) : null;
+  const rightIconNode = rightIcon ? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: rightIcon, size: s.iconSize, color: iconColor }) : null;
+  const cssVars = {
+    "--btn-bg": disabled ? BUTTON_DISABLED_BG : preset.bg,
+    "--btn-bg-hover": preset.bgHover,
+    "--btn-border": disabled ? BUTTON_DISABLED_BORDER : preset.border,
+    "--btn-ring": BUTTON_FOCUS_RING,
+    "minHeight": s.height,
+    "minWidth": iconOnly ? s.height : hasLabel ? s.minWidth : void 0,
+    "padding": iconOnly ? 0 : `0 ${s.paddingX}`,
+    "borderRadius": s.radius,
+    "gap": s.gap,
+    "fontSize": s.fontSize,
+    "fontWeight": s.fontWeight,
+    "color": disabled ? BUTTON_DISABLED_TEXT : preset.text,
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref,
+      type,
+      disabled,
+      "aria-label": ariaLabel,
+      className: cn(
+        "inline-flex items-center justify-center whitespace-nowrap border border-solid leading-none transition-colors",
+        "border-[color:var(--btn-border)] bg-[var(--btn-bg)]",
+        "outline-none focus-visible:shadow-[0_0_0_2px_var(--btn-ring)]",
+        disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-[var(--btn-bg-hover)]",
+        className
+      ),
+      style: cssVars,
+      ...props,
+      children: [
+        iconNode,
+        hasLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center", children: label }),
+        rightIconNode
+      ]
+    }
+  );
+});
+function SFooter({
+  bg = "white",
+  left,
+  button,
+  children,
+  className,
+  leftClassName,
+  style
+}) {
+  const isGrey = bg === "grey";
+  const hasSlot = left != null || children != null;
+  const hasButton = button != null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "footer",
+    {
+      className: cn(
+        "relative flex w-full flex-shrink-0 items-center justify-end gap-[var(--cmp-overlay-footer-gap)] overflow-hidden px-[var(--cmp-overlay-footer-paddingX)] py-[var(--cmp-overlay-footer-paddingY)]",
+        isGrey ? "bg-[var(--cmp-overlay-footer-bg-neutral)] border-t border-solid border-[color:var(--sys-color-border-default)]" : "bg-[var(--cmp-overlay-footer-bg-default)] shadow-[var(--shadow-spread-md)]",
+        className
+      ),
+      style,
+      children: [
+        hasSlot && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn("flex min-w-px flex-[1_0_0] items-center justify-between", leftClassName),
+            children: [
+              left,
+              children
+            ]
+          }
+        ),
+        hasButton && /* @__PURE__ */ jsxRuntime.jsx(
+          SButton,
+          {
+            color: button.color ?? "primary",
+            outline: button.outline,
+            size: button.size ?? "md",
+            disabled: button.disabled,
+            onClick: () => button.onClick?.(),
+            label: button.label ?? "\uD655\uC778"
+          }
+        )
+      ]
+    }
+  );
+}
+var SCard = /* @__PURE__ */ react.forwardRef(function SCard2({ bordered = false, footerLeft, button, footerClassName, className, children, ...rest }, ref) {
+  const hasFooter = footerLeft != null || button != null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref,
@@ -3453,7 +3669,18 @@ var SCard = /* @__PURE__ */ react.forwardRef(function SCard2({ bordered = false,
         className
       ),
       ...rest,
-      children
+      children: [
+        children,
+        hasFooter && /* @__PURE__ */ jsxRuntime.jsx(
+          SFooter,
+          {
+            bg: "grey",
+            left: footerLeft,
+            button,
+            className: cn("px-(--sys-space-panel-padding-default)", footerClassName)
+          }
+        )
+      ]
     }
   );
 });
@@ -5568,11 +5795,15 @@ var SSectionHeaderCardRootImpl = /* @__PURE__ */ react.forwardRef(
     headerClassName,
     padding,
     background,
+    footerLeft,
+    button,
+    footerClassName,
     className,
     children,
     ...rest
   }, ref) {
     const hasHeader = title != null;
+    const hasFooter = footerLeft != null || button != null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -5597,7 +5828,16 @@ var SSectionHeaderCardRootImpl = /* @__PURE__ */ react.forwardRef(
               className: headerClassName
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(SSectionHeaderCardBodyImpl, { padding, background, children })
+          /* @__PURE__ */ jsxRuntime.jsx(SSectionHeaderCardBodyImpl, { padding, background, children }),
+          hasFooter && /* @__PURE__ */ jsxRuntime.jsx(
+            SFooter,
+            {
+              bg: "grey",
+              left: footerLeft,
+              button,
+              className: cn("px-(--cmp-sectionHeaderCard-header-paddingX)", footerClassName)
+            }
+          )
         ]
       }
     );
@@ -5870,174 +6110,6 @@ var SSplitter2 = /* @__PURE__ */ Object.assign(SSplitterRoot, {
   Before: SSplitterBefore2,
   After: SSplitterAfter2
 });
-
-// src/components/SButton/button.config.ts
-var BUTTON_COLORS = ["primary", "secondary", "neutral", "danger"];
-var BUTTON_SIZES = ["xs", "sm", "md", "lg"];
-var V = (path) => `var(--cmp-button-${path})`;
-function buttonPreset(color, outline) {
-  switch (color) {
-    case "primary":
-      return outline ? {
-        bg: V("brand-outline-bg-default"),
-        bgHover: V("brand-outline-bg-hover"),
-        text: V("brand-outline-content"),
-        icon: V("brand-outline-content"),
-        border: V("brand-outline-border")
-      } : {
-        bg: V("brand-strong-bg-default"),
-        bgHover: V("brand-strong-bg-hover"),
-        text: V("brand-strong-content"),
-        icon: V("brand-strong-content"),
-        border: "transparent"
-      };
-    case "secondary":
-      return {
-        bg: V("brand-subtle-bg-default"),
-        bgHover: V("brand-subtle-bg-hover"),
-        text: V("brand-subtle-content"),
-        icon: V("brand-subtle-content"),
-        border: "transparent"
-      };
-    case "neutral":
-      return {
-        bg: V("neutral-outline-bg-default"),
-        bgHover: V("neutral-outline-bg-hover"),
-        text: V("neutral-outline-text"),
-        icon: V("neutral-outline-icon"),
-        border: outline ? V("neutral-outline-border") : "transparent"
-      };
-    case "danger":
-      return outline ? {
-        bg: V("danger-outline-bg-default"),
-        bgHover: V("danger-outline-bg-hover"),
-        text: V("danger-outline-content"),
-        icon: V("danger-outline-content"),
-        border: V("danger-outline-border")
-      } : {
-        bg: V("danger-strong-bg-default"),
-        bgHover: V("danger-strong-bg-hover"),
-        text: V("danger-strong-content"),
-        icon: V("danger-strong-content"),
-        border: "transparent"
-      };
-  }
-}
-var BUTTON_SIZE_CONFIG = {
-  xs: {
-    height: "var(--cmp-button-xs-height)",
-    paddingX: "var(--cmp-button-xs-paddingX)",
-    gap: "var(--cmp-button-xs-gap)",
-    iconSize: 12,
-    fontSize: 12,
-    fontWeight: 500,
-    radius: "var(--cmp-button-radius-sm)",
-    minWidth: 36
-  },
-  sm: {
-    height: "var(--cmp-button-sm-height)",
-    paddingX: "var(--cmp-button-sm-paddingX)",
-    gap: "var(--cmp-button-sm-gap)",
-    iconSize: 16,
-    fontSize: 12,
-    fontWeight: 500,
-    radius: "var(--cmp-button-radius-sm)",
-    minWidth: 70
-  },
-  md: {
-    height: "var(--cmp-button-md-height)",
-    paddingX: "var(--cmp-button-md-paddingX)",
-    gap: "var(--cmp-button-md-gap)",
-    iconSize: 20,
-    fontSize: 16,
-    fontWeight: 500,
-    radius: "var(--cmp-button-radius-md)",
-    minWidth: 100
-  },
-  lg: {
-    height: "var(--cmp-button-lg-height)",
-    paddingX: "var(--cmp-button-lg-paddingX)",
-    gap: "var(--cmp-button-lg-gap)",
-    iconSize: 24,
-    fontSize: 18,
-    fontWeight: 500,
-    radius: "var(--cmp-button-radius-md)",
-    minWidth: 120
-  }
-};
-var BUTTON_FOCUS_RING = "var(--sys-color-border-accent)";
-var BUTTON_DISABLED_BG = "var(--cmp-button-bg-disabled, #E1E1E1)";
-var BUTTON_DISABLED_BORDER = "var(--cmp-button-border-disabled, #CCCCCC)";
-var BUTTON_DISABLED_TEXT = "var(--cmp-button-text-disabled, #888888)";
-var BUTTON_DISABLED_ICON = "var(--cmp-button-icon-disabled, #BBBBBB)";
-var SButton = /* @__PURE__ */ react.forwardRef(function SButton2({
-  color = "primary",
-  outline = false,
-  size = "sm",
-  icon,
-  rightIcon,
-  label,
-  className,
-  style,
-  type = "button",
-  disabled = false,
-  "aria-label": ariaLabel,
-  ...props
-}, ref) {
-  const preset = buttonPreset(color, outline);
-  const s = BUTTON_SIZE_CONFIG[size];
-  const hasLabel = label != null && label !== "";
-  const iconOnly = !hasLabel && Boolean(icon) !== Boolean(rightIcon);
-  if (color === "secondary" && outline && typeof console !== "undefined") {
-    console.warn(
-      '[SButton] color="secondary" \uB294 outline \uC744 \uC9C0\uC6D0\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. solid \uB85C \uB80C\uB354\uB429\uB2C8\uB2E4.'
-    );
-  }
-  if (iconOnly && !ariaLabel && typeof console !== "undefined") {
-    console.warn(`[SButton] \uC544\uC774\uCF58 \uC804\uC6A9 \uBC84\uD2BC\uC740 aria-label \uC774 \uD544\uC694\uD569\uB2C8\uB2E4. (color="${color}")`);
-  }
-  const iconColor = disabled ? BUTTON_DISABLED_ICON : preset.icon;
-  const iconNode = icon ? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.iconSize, color: iconColor }) : null;
-  const rightIconNode = rightIcon ? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: rightIcon, size: s.iconSize, color: iconColor }) : null;
-  const cssVars = {
-    "--btn-bg": disabled ? BUTTON_DISABLED_BG : preset.bg,
-    "--btn-bg-hover": preset.bgHover,
-    "--btn-border": disabled ? BUTTON_DISABLED_BORDER : preset.border,
-    "--btn-ring": BUTTON_FOCUS_RING,
-    "minHeight": s.height,
-    "minWidth": iconOnly ? s.height : hasLabel ? s.minWidth : void 0,
-    "padding": iconOnly ? 0 : `0 ${s.paddingX}`,
-    "borderRadius": s.radius,
-    "gap": s.gap,
-    "fontSize": s.fontSize,
-    "fontWeight": s.fontWeight,
-    "color": disabled ? BUTTON_DISABLED_TEXT : preset.text,
-    ...style
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      ref,
-      type,
-      disabled,
-      "aria-label": ariaLabel,
-      className: cn(
-        "inline-flex items-center justify-center whitespace-nowrap border border-solid leading-none transition-colors",
-        "border-[color:var(--btn-border)] bg-[var(--btn-bg)]",
-        "outline-none focus-visible:shadow-[0_0_0_2px_var(--btn-ring)]",
-        disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-[var(--btn-bg-hover)]",
-        className
-      ),
-      style: cssVars,
-      ...props,
-      children: [
-        iconNode,
-        hasLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center", children: label }),
-        rightIconNode
-      ]
-    }
-  );
-});
 var DANGER_TITLE_LABEL = "\uC8FC\uC758\uC0AC\uD56D";
 function renderItems(message, depth = 1) {
   const out = [];
@@ -6881,53 +6953,6 @@ function SPortal({
     }
   );
 }
-function SFooter({
-  bg = "white",
-  left,
-  button,
-  children,
-  className,
-  leftClassName,
-  style
-}) {
-  const isGrey = bg === "grey";
-  const hasSlot = left != null || children != null;
-  const hasButton = button != null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "footer",
-    {
-      className: cn(
-        "relative flex w-full flex-shrink-0 items-center justify-end gap-[var(--cmp-overlay-footer-gap)] overflow-hidden px-[var(--cmp-overlay-footer-paddingX)] py-[var(--cmp-overlay-footer-paddingY)]",
-        isGrey ? "bg-[var(--cmp-overlay-footer-bg-neutral)] border-t border-solid border-[color:var(--sys-color-border-default)]" : "bg-[var(--cmp-overlay-footer-bg-default)] shadow-[var(--shadow-spread-md)]",
-        className
-      ),
-      style,
-      children: [
-        hasSlot && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn("flex min-w-px flex-[1_0_0] items-center justify-between", leftClassName),
-            children: [
-              left,
-              children
-            ]
-          }
-        ),
-        hasButton && /* @__PURE__ */ jsxRuntime.jsx(
-          SButton,
-          {
-            color: button.color ?? "primary",
-            outline: button.outline,
-            size: button.size ?? "md",
-            disabled: button.disabled,
-            onClick: () => button.onClick?.(),
-            label: button.label ?? "\uD655\uC778"
-          }
-        )
-      ]
-    }
-  );
-}
 var SPopup = /* @__PURE__ */ react.forwardRef(function SPopup2({
   popupTitle = "",
   type = "default",