sellmate-design-system-react 0.1.7 → 0.1.8

package/dist/components/STextLink/STextLink.cjs

@@ -1,10 +1,31 @@
 'use strict';
 
 var react = require('react');
+var RTooltip = require('@radix-ui/react-tooltip');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var RTooltip__namespace = /*#__PURE__*/_interopNamespace(RTooltip);
+
 // src/components/STextLink/STextLink.tsx
 var twMerge = tailwindMerge.extendTailwindMerge({
   extend: {
@@ -144,6 +165,31 @@ function resolveColor(input, fallback) {
   if (input === null || input === void 0 || input === "") return fallback;
   return isColorKey(input) ? `var(--color-${input.replace(/_/g, "-")})` : input;
 }
+
+// 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);
+PortalContainerContext.Provider;
+function usePortalContainer() {
+  return react.useContext(PortalContainerContext) ?? void 0;
+}
 var Icon_add = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2851,6 +2897,87 @@ var SIcon = react.forwardRef(function SIcon2({ name, size = 24, color, rotate, l
     }
   );
 });
+
+// src/components/STag/tag.config.ts
+var TAG_SIZE_CONFIG = {
+  xs: {
+    height: 20,
+    paddingX: 8,
+    gap: 4,
+    radius: 6,
+    iconSize: 12,
+    fontSize: 11,
+    fontWeight: 500,
+    lineHeight: 18
+  },
+  sm: {
+    height: 24,
+    paddingX: 8,
+    gap: 4,
+    radius: 6,
+    iconSize: 16,
+    fontSize: 12,
+    fontWeight: 700,
+    lineHeight: 20
+  },
+  md: {
+    height: 28,
+    paddingX: 12,
+    gap: 6,
+    radius: 8,
+    iconSize: 16,
+    fontSize: 14,
+    fontWeight: 700,
+    lineHeight: 24
+  }
+};
+var STag = react.forwardRef(function STag2({
+  shape = "square",
+  size = "sm",
+  color = "grey",
+  label = "",
+  icon,
+  iconLeft = true,
+  width,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const s = TAG_SIZE_CONFIG[size];
+  const contentColor = `var(--cmp-tag-${color}-content)`;
+  const iconNode = icon ? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.iconSize, color: contentColor }) : null;
+  const resolvedWidth = typeof width === "number" ? `${width}px` : width;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref,
+      "aria-label": label || "tag",
+      className: cn(
+        "box-border inline-flex w-fit select-none items-center justify-center whitespace-nowrap",
+        className
+      ),
+      style: {
+        minHeight: s.height,
+        padding: `0 ${s.paddingX}px`,
+        gap: s.gap,
+        borderRadius: shape === "pill" ? 999 : s.radius,
+        fontSize: s.fontSize,
+        fontWeight: s.fontWeight,
+        lineHeight: `${s.lineHeight}px`,
+        background: `var(--cmp-tag-${color}-bg)`,
+        color: contentColor,
+        ...resolvedWidth != null ? { width: resolvedWidth } : {},
+        ...style
+      },
+      ...rest,
+      children: [
+        icon && iconLeft && iconNode,
+        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex min-w-0 items-center justify-center", children: label }),
+        icon && !iconLeft && iconNode
+      ]
+    }
+  );
+});
 var SIZE_CONFIG = {
   sm: {
     gap: 4,
@@ -2884,6 +3011,7 @@ var STextLink = react.forwardRef(function STextLink2({
   className,
   onClick,
   children,
+  style,
   ...rest
 }, ref) {
   const s = SIZE_CONFIG[size];
@@ -2892,13 +3020,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 === " ") {
@@ -2913,7 +3041,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 }),
@@ -2936,6 +3064,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 }) }) })
+  ] }) });
 });
 
 exports.STextLink = STextLink;