sellmate-design-system-react 0.1.7 → 0.1.8

package/dist/components/SChipInput/SChipInput.cjs

@@ -6,6 +6,7 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var RPopover = require('@radix-ui/react-popover');
+var RTooltip = require('@radix-ui/react-tooltip');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -26,6 +27,7 @@ function _interopNamespace(e) {
 }
 
 var RPopover__namespace = /*#__PURE__*/_interopNamespace(RPopover);
+var RTooltip__namespace = /*#__PURE__*/_interopNamespace(RTooltip);
 
 var twMerge = tailwindMerge.extendTailwindMerge({
   extend: {
@@ -2876,12 +2878,20 @@ var SIcon = react.forwardRef(function SIcon2({ name, size = 24, color, rotate, l
 // 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 = react.createContext(null);
@@ -3559,6 +3569,7 @@ var STextLink = react.forwardRef(function STextLink2({
   className,
   onClick,
   children,
+  style,
   ...rest
 }, ref) {
   const s = SIZE_CONFIG[size];
@@ -3567,13 +3578,13 @@ var STextLink = react.forwardRef(function STextLink2({
   const handle = () => {
     if (!disabled) onClick?.();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const portalContainer = usePortalContainer();
+  const link = /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
       ref,
       role: "button",
       tabIndex: disabled ? -1 : 0,
-      title: tooltipText,
       onClick: handle,
       onKeyDown: (e) => {
         if (e.key === "Enter" || e.key === " ") {
@@ -3588,7 +3599,7 @@ var STextLink = react.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__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.iconSize, color: resolvedIconColor }),
@@ -3611,6 +3622,12 @@ var STextLink = react.forwardRef(function STextLink2({
       ]
     }
   );
+  const text = (tooltipText ?? "").trim();
+  if (text === "") return link;
+  return /* @__PURE__ */ jsxRuntime.jsx(RTooltip__namespace.Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsxs(RTooltip__namespace.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RTooltip__namespace.Trigger, { asChild: true, children: link }),
+    /* @__PURE__ */ jsxRuntime.jsx(RTooltip__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(RTooltip__namespace.Content, { side: "top", sideOffset: 4, className: cn("z-50", FLOATING_SLIDE_ANIM), children: /* @__PURE__ */ jsxRuntime.jsx(STag, { shape: "square", size: "xs", color: "grey", label: text }) }) })
+  ] }) });
 });
 function SPortal({
   open,
@@ -3998,17 +4015,11 @@ var SChipInput = react.forwardRef(function SChipInput2({
                       style: { width: 1, height: 12, backgroundColor: "#E1E1E1" }
                     }
                   ),
-                  showMaxCount && /* @__PURE__ */ jsxRuntime.jsxs(
-                    "span",
-                    {
-                      className: "s-chip-input__max-count text-12 text-(--cmp-chipInput-text-placeholder)",
-                      children: [
-                        "\uCD5C\uB300 ",
-                        maxCount,
-                        "\uAC1C"
-                      ]
-                    }
-                  ),
+                  showMaxCount && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "s-chip-input__max-count text-12 text-(--cmp-chipInput-text-placeholder)", children: [
+                    "\uCD5C\uB300 ",
+                    maxCount,
+                    "\uAC1C"
+                  ] }),
                   showResetLink && /* @__PURE__ */ jsxRuntime.jsx(
                     STextLink,
                     {