sellmate-design-system-react 0.1.10 → 0.2.0

package/dist/components/SChipInput/SChipInput.d.ts

@@ -1,9 +1,11 @@
 import { type CSSProperties } from 'react';
 import { type SFieldSize, type SFieldStatus } from '../SField';
 import { type SIconName } from '../SIcon';
+import { type SColor } from '../../lib/color';
 import { type Rule } from '../../lib/form';
 import { type STooltipProps } from '../STooltip';
 export type SChipInputSize = SFieldSize;
+export type SChipInputMetaPlacement = 'end' | 'inline';
 /** ref로 노출되는 UX 메서드 (sd-chip-input @Method sdFocus 대응) */
 export interface SChipInputHandle {
     /** 입력 필드에 포커스를 이동합니다. */
@@ -32,6 +34,8 @@ export interface SChipInputProps {
     useReset?: boolean;
     /** 최대 칩 개수 */
     maxCount?: number;
+    /** 최대 개수·초기화 meta 위치 */
+    metaPlacement?: SChipInputMetaPlacement;
     /** 중복 에러 메시지 항목명 */
     duplicateLabel?: string;
     /** 자동완성 후보 */
@@ -49,6 +53,7 @@ export interface SChipInputProps {
     width?: number | string;
     status?: SFieldStatus;
     icon?: SIconName;
+    iconColor?: SColor;
     labelTooltip?: string;
     labelTooltipProps?: Partial<STooltipProps>;
     className?: string;

package/dist/components/SChipInput/SChipInput.js

@@ -2872,7 +2872,9 @@ var FLOATING_SLIDE_ANIM = [
   "data-[state=closed]:data-[side=right]:animate-floating-out-right"
 ].join(" ");
 var PortalContainerContext = createContext(null);
+var InsideModalContext = createContext(false);
 PortalContainerContext.Provider;
+InsideModalContext.Provider;
 function usePortalContainer() {
   return useContext(PortalContainerContext) ?? void 0;
 }
@@ -2973,6 +2975,8 @@ function SGhostButton({
   tooltipText,
   disabled = false,
   onClick,
+  anchorClassName,
+  anchorStyle,
   className,
   style
 }) {
@@ -2995,6 +2999,8 @@ function SGhostButton({
   };
   const s = SIZE[size];
   const contentColor = disabled ? intent === "inverse" ? "var(--cmp-ghostButton-inverse-disabled)" : "var(--cmp-ghostButton-icon-disabled)" : `var(--cmp-ghostButton-${intent}-content)`;
+  const text = (tooltipText ?? "").trim();
+  const hasTooltip = text !== "";
   const btn = /* @__PURE__ */ jsxs(
     "button",
     {
@@ -3035,13 +3041,13 @@ function SGhostButton({
       ]
     }
   );
-  const text = (tooltipText ?? "").trim();
-  if (text === "") return btn;
+  if (!hasTooltip) return btn;
   return /* @__PURE__ */ jsxs(RPopover2.Root, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(RPopover2.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
       "span",
       {
-        className: "inline-flex",
+        className: cn("inline-flex", anchorClassName),
+        style: anchorStyle,
         onMouseEnter: openNow,
         onMouseLeave: startHide,
         onFocus: openNow,
@@ -3233,6 +3239,7 @@ var SField = forwardRef(function SField2({
   name,
   label = "",
   icon,
+  iconColor,
   labelTooltip = "",
   labelTooltipProps,
   labelWidth,
@@ -3310,7 +3317,15 @@ var SField = forwardRef(function SField2({
               lineHeight: `${s.lineHeight}px`
             },
             children: [
-              icon && /* @__PURE__ */ jsx(SIcon, { name: icon, size: s.icon, style: { marginRight: s.labelGap } }),
+              icon && /* @__PURE__ */ jsx(
+                SIcon,
+                {
+                  name: icon,
+                  size: s.icon,
+                  color: iconColor,
+                  style: { marginRight: s.labelGap }
+                }
+              ),
               /* @__PURE__ */ jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: label }),
               (labelTooltip !== "" || labelTooltipProps) && /* @__PURE__ */ jsx("span", { className: "shrink-0", style: { marginLeft: s.labelGap }, children: /* @__PURE__ */ jsx(
                 STooltip,
@@ -3360,7 +3375,7 @@ var SField = forwardRef(function SField2({
                       borderBottomLeftRadius: s.radius - 1
                     },
                     children: [
-                      icon && !label && /* @__PURE__ */ jsx(SIcon, { name: icon, size: s.icon }),
+                      icon && !label && /* @__PURE__ */ jsx(SIcon, { name: icon, size: s.icon, color: iconColor }),
                       effectiveAddonLabel
                     ]
                   }
@@ -3671,7 +3686,7 @@ function SPortal({
             onCloseAutoFocus,
             onClick: autoClose ? () => onClose?.() : void 0,
             className: cn(
-              "z-50 overflow-hidden rounded-(--cmp-listBox-radius) bg-(--cmp-listBox-bg) py-4 shadow-normal-sm",
+              "z-50 overflow-hidden rounded-(--cmp-listBox-radius) bg-(--cmp-listBox-bg) shadow-normal-sm",
               maxHeight != null && "overflow-y-auto",
               fit && "min-w-(--radix-popover-trigger-width)",
               FLOATING_SLIDE_ANIM,
@@ -3702,6 +3717,7 @@ var SChipInput = forwardRef(function SChipInput2({
   error,
   useReset = false,
   maxCount,
+  metaPlacement = "end",
   duplicateLabel,
   suggestions = [],
   loadingSuggestions = false,
@@ -3715,6 +3731,7 @@ var SChipInput = forwardRef(function SChipInput2({
   width,
   status,
   icon,
+  iconColor,
   labelTooltip,
   labelTooltipProps,
   className,
@@ -3849,6 +3866,7 @@ var SChipInput = forwardRef(function SChipInput2({
       labelWidth,
       labelHeight: `calc(var(--cmp-chipInput-${size}-minHeight) + 2px)`,
       icon,
+      iconColor,
       labelTooltip,
       labelTooltipProps,
       size,
@@ -3996,7 +4014,11 @@ var SChipInput = forwardRef(function SChipInput2({
             showMetaInfo && /* @__PURE__ */ jsxs(
               "div",
               {
-                className: "s-chip-input__meta ml-auto flex items-center gap-8",
+                className: cn(
+                  "s-chip-input__meta flex items-center gap-8",
+                  metaPlacement === "end" && "ml-auto"
+                ),
+                "data-placement": metaPlacement,
                 onMouseDown: (e) => e.preventDefault(),
                 children: [
                   /* @__PURE__ */ jsx(
@@ -4006,11 +4028,20 @@ 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: cn(
+                        "s-chip-input__max-count text-12",
+                        isMax ? "text-(--sys-color-fg-warning)" : "text-(--cmp-chipInput-text-placeholder)"
+                      ),
+                      children: [
+                        "\uCD5C\uB300 ",
+                        maxCount,
+                        "\uAC1C"
+                      ]
+                    }
+                  ),
                   showResetLink && /* @__PURE__ */ jsx(
                     STextLink,
                     {
@@ -4047,7 +4078,7 @@ var SChipInput = forwardRef(function SChipInput2({
                     onMouseDown: (e) => e.preventDefault(),
                     children: [
                       loading && /* @__PURE__ */ jsx("div", { className: "s-chip-input__suggestions-empty p-12 text-center text-12 leading-20 text-(--color-grey-65)", children: "\uBD88\uB7EC\uC624\uB294 \uC911..." }),
-                      !effectiveAutocomplete ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-8 p-12", children: items.map((item, i) => {
+                      !effectiveAutocomplete ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-8 px-12 py-6", children: items.map((item, i) => {
                         const selected = values.includes(item);
                         const active = i === activeIndex && !selected;
                         return /* @__PURE__ */ jsx(