@ai-matrx/design-system 0.18.21 → 0.19.0

package/dist/tap-target.js

@@ -0,0 +1,608 @@
+"use client";
+
+// src/tap-target/tap-target-button.tsx
+import {
+  cloneElement,
+  forwardRef as forwardRef2,
+  isValidElement
+} from "react";
+
+// src/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React2 from "react";
+
+// src/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/motion.ts
+var MOTION_OVERLAY = "matrx-motion-overlay";
+var MOTION_DIALOG = "matrx-motion-dialog";
+var MOTION_BOTTOM_SHEET = "matrx-motion-bottom-sheet";
+var MOTION_POPPER = "matrx-motion-popper";
+var MOTION_SHEET = {
+  top: "matrx-motion-sheet-top",
+  bottom: "matrx-motion-sheet-bottom",
+  left: "matrx-motion-sheet-left",
+  right: "matrx-motion-sheet-right",
+  center: "matrx-motion-sheet-center"
+};
+var MOTION_PULSE = "matrx-pulse";
+var MOTION_SPIN = "matrx-spin";
+var ALL_MOTION_CLASSES = [
+  MOTION_OVERLAY,
+  MOTION_DIALOG,
+  MOTION_BOTTOM_SHEET,
+  MOTION_POPPER,
+  ...Object.values(MOTION_SHEET),
+  MOTION_PULSE,
+  MOTION_SPIN
+];
+
+// src/portal-container.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var CONTEXT_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.portal-container-context");
+var contextRegistry = globalThis;
+var PortalContainerContext = contextRegistry[CONTEXT_SLOT] ??= React.createContext(void 0);
+function usePortalContainer(explicit) {
+  const injected = React.useContext(PortalContainerContext);
+  if (explicit !== void 0) {
+    return explicit ?? void 0;
+  }
+  return injected ?? void 0;
+}
+
+// src/tooltip.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React2.forwardRef(({ className, sideOffset = 4, container, animated = true, ...props }, ref) => {
+  const resolved = usePortalContainer(container);
+  return /* @__PURE__ */ jsx2(TooltipPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ jsx2(
+    TooltipPrimitive.Content,
+    {
+      ref,
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "z-[10001] overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md",
+        animated && MOTION_POPPER,
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/tap-target/cn.ts
+function cn2(...values) {
+  return values.filter(Boolean).join(" ").trim();
+}
+
+// src/tap-target/link.ts
+var LINK_SLOT = /* @__PURE__ */ Symbol.for("@ai-matrx/tap-target:link-component");
+function setTapTargetLinkComponent(component) {
+  globalThis[LINK_SLOT] = component;
+}
+function getTapTargetLinkComponent() {
+  return globalThis[LINK_SLOT] ?? null;
+}
+
+// src/tap-target/tap-target-button.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var EXTERNAL_RE = /^(https?:|mailto:|tel:)/i;
+var TAP_OUTER_CLASS = "matrx-tap-target group";
+var TAP_GROUP_OUTER_CLASS = "matrx-tap-target matrx-tap-target-sm group";
+function IconContent({
+  icon,
+  children,
+  strokeWidth = 2,
+  className
+}) {
+  if (icon) {
+    if (isValidElement(icon)) {
+      return cloneElement(icon, {
+        className: cn2(className, icon.props.className)
+      });
+    }
+    return /* @__PURE__ */ jsx3("span", { className, children: icon });
+  }
+  return /* @__PURE__ */ jsx3(
+    "svg",
+    {
+      className,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth,
+      children
+    }
+  );
+}
+function resolveTapGeometry(label, size, mobileIconOnly) {
+  const inline = Boolean(label);
+  if (size === "sm") {
+    return {
+      outerClassName: inline && mobileIconOnly ? "matrx-tap-target matrx-tap-target-sm matrx-tap-target-mobile-icon-only-sm group" : inline ? "matrx-tap-target matrx-tap-target-sm matrx-tap-target-inline-sm group" : TAP_GROUP_OUTER_CLASS,
+      inlineModifier: mobileIconOnly ? "matrx-tap-pill-mobile-icon-only-sm" : "matrx-tap-pill-inline-sm"
+    };
+  }
+  return {
+    outerClassName: inline && mobileIconOnly ? `${TAP_OUTER_CLASS} matrx-tap-target-mobile-icon-only` : inline ? `${TAP_OUTER_CLASS} matrx-tap-target-inline` : TAP_OUTER_CLASS,
+    inlineModifier: mobileIconOnly ? "matrx-tap-pill-mobile-icon-only" : "matrx-tap-pill-inline"
+  };
+}
+function buildTapInner({
+  label,
+  pillClassName,
+  iconClassName,
+  labelClassName,
+  inlineModifier,
+  icon,
+  children,
+  strokeWidth = 2
+}) {
+  const iconEl = /* @__PURE__ */ jsx3(
+    IconContent,
+    {
+      icon,
+      strokeWidth,
+      className: iconClassName,
+      children
+    }
+  );
+  const pillClasses = label ? `${pillClassName} ${inlineModifier}`.trim() : pillClassName;
+  if (!label) {
+    return /* @__PURE__ */ jsx3("div", { className: pillClasses, children: iconEl });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: pillClasses, children: [
+    iconEl,
+    /* @__PURE__ */ jsx3("span", { className: labelClassName ?? "matrx-tap-label", children: label })
+  ] });
+}
+function renderTapTarget({
+  size = "default",
+  pillClassName,
+  iconClassName,
+  labelClassName,
+  icon,
+  children,
+  strokeWidth,
+  label,
+  mobileIconOnly = false,
+  onClick,
+  as,
+  htmlFor,
+  ariaLabel,
+  disabled,
+  href,
+  target,
+  rel,
+  prefetch,
+  linkComponent,
+  tooltip,
+  tooltipSide,
+  tooltipAlign,
+  rest,
+  buttonRef
+}) {
+  const { outerClassName, inlineModifier } = resolveTapGeometry(
+    label,
+    size,
+    mobileIconOnly
+  );
+  const responsiveLabelClassName = mobileIconOnly ? `${labelClassName ?? "matrx-tap-label"} matrx-tap-label-mobile-icon-only` : labelClassName;
+  const inner = buildTapInner({
+    label,
+    pillClassName,
+    iconClassName,
+    labelClassName: responsiveLabelClassName,
+    inlineModifier: label ? inlineModifier : "",
+    icon,
+    children,
+    strokeWidth
+  });
+  const resolvedTooltip = tooltip !== void 0 ? tooltip : label ? false : void 0;
+  const triggerAriaLabel = label && !mobileIconOnly ? void 0 : ariaLabel ?? label;
+  const trigger = renderTrigger({
+    href,
+    target,
+    rel,
+    prefetch,
+    linkComponent,
+    as,
+    htmlFor,
+    onClick,
+    ariaLabel: triggerAriaLabel,
+    disabled,
+    outerClassName,
+    children: inner,
+    rest,
+    buttonRef
+  });
+  return withTooltip(trigger, {
+    tooltip: resolvedTooltip,
+    ariaLabel: triggerAriaLabel,
+    disabled,
+    tooltipSide,
+    tooltipAlign
+  });
+}
+function renderTrigger({
+  href,
+  target,
+  rel,
+  prefetch,
+  linkComponent,
+  as,
+  htmlFor,
+  onClick,
+  ariaLabel,
+  disabled,
+  outerClassName,
+  children,
+  rest,
+  buttonRef
+}) {
+  if (disabled && href) {
+    return /* @__PURE__ */ jsx3(
+      "span",
+      {
+        "aria-disabled": "true",
+        "aria-label": ariaLabel,
+        className: `${outerClassName} opacity-40 pointer-events-none`,
+        children
+      }
+    );
+  }
+  if (href) {
+    const isExternal = EXTERNAL_RE.test(href);
+    if (isExternal) {
+      return /* @__PURE__ */ jsx3(
+        "a",
+        {
+          href,
+          target: target ?? "_blank",
+          rel: rel ?? "noopener noreferrer",
+          "aria-label": ariaLabel,
+          className: outerClassName,
+          children
+        }
+      );
+    }
+    const Link = linkComponent ?? getTapTargetLinkComponent();
+    if (Link) {
+      return /* @__PURE__ */ jsx3(
+        Link,
+        {
+          href,
+          target,
+          rel,
+          prefetch,
+          "aria-label": ariaLabel,
+          className: outerClassName,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx3(
+      "a",
+      {
+        href,
+        target,
+        rel,
+        "aria-label": ariaLabel,
+        className: outerClassName,
+        children
+      }
+    );
+  }
+  if (as === "label") {
+    return /* @__PURE__ */ jsx3(
+      "label",
+      {
+        htmlFor,
+        "aria-label": ariaLabel,
+        className: outerClassName,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      ref: buttonRef,
+      type: "button",
+      onClick,
+      "aria-label": ariaLabel,
+      disabled,
+      ...rest,
+      className: outerClassName,
+      children
+    }
+  );
+}
+function withTooltip(trigger, {
+  tooltip,
+  ariaLabel,
+  disabled,
+  tooltipSide = "top",
+  tooltipAlign = "center"
+}) {
+  if (tooltip === false) return trigger;
+  const label = typeof tooltip === "string" && tooltip.length > 0 ? tooltip : ariaLabel;
+  if (!label) return trigger;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx3(TooltipTrigger, { asChild: true, children: disabled ? (
+      // Radix Tooltip triggers need a hoverable element; a disabled button
+      // does not dispatch pointer events, so we wrap in a span for the
+      // trigger target while keeping the disabled visual state.
+      /* @__PURE__ */ jsx3("span", { className: "inline-flex", children: trigger })
+    ) : trigger }),
+    /* @__PURE__ */ jsx3(TooltipContent, { side: tooltipSide, align: tooltipAlign, children: label })
+  ] });
+}
+var TapTargetButton = forwardRef2(function TapTargetButton2({
+  icon,
+  children,
+  strokeWidth = 2,
+  onClick,
+  className,
+  as,
+  htmlFor,
+  ariaLabel,
+  disabled,
+  href,
+  target,
+  rel,
+  prefetch,
+  linkComponent,
+  tooltip,
+  tooltipSide,
+  tooltipAlign,
+  label,
+  mobileIconOnly,
+  ...rest
+}, ref) {
+  const color = className ?? "text-foreground";
+  return renderTapTarget({
+    icon,
+    children,
+    strokeWidth,
+    onClick,
+    as,
+    htmlFor,
+    ariaLabel,
+    disabled,
+    href,
+    target,
+    rel,
+    prefetch,
+    linkComponent,
+    tooltip,
+    tooltipSide,
+    tooltipAlign,
+    label,
+    mobileIconOnly,
+    pillClassName: "matrx-tap-pill matrx-glass-thin-border",
+    iconClassName: `matrx-tap-icon ${color}`,
+    rest,
+    buttonRef: ref
+  });
+});
+var TapTargetButtonTransparent = forwardRef2(function TapTargetButtonTransparent2({
+  icon,
+  children,
+  strokeWidth = 2,
+  onClick,
+  className,
+  as,
+  htmlFor,
+  ariaLabel,
+  disabled,
+  href,
+  target,
+  rel,
+  prefetch,
+  linkComponent,
+  tooltip,
+  tooltipSide,
+  tooltipAlign,
+  label,
+  mobileIconOnly,
+  ...rest
+}, ref) {
+  const color = className ?? "text-foreground";
+  return renderTapTarget({
+    icon,
+    children,
+    strokeWidth,
+    onClick,
+    as,
+    htmlFor,
+    ariaLabel,
+    disabled,
+    href,
+    target,
+    rel,
+    prefetch,
+    linkComponent,
+    tooltip,
+    tooltipSide,
+    tooltipAlign,
+    label,
+    mobileIconOnly,
+    pillClassName: "matrx-tap-pill hover:bg-muted active:bg-muted-foreground/15",
+    iconClassName: `matrx-tap-icon ${color}`,
+    rest,
+    buttonRef: ref
+  });
+});
+var TapTargetButtonSolid = forwardRef2(function TapTargetButtonSolid2({
+  icon,
+  children,
+  strokeWidth = 2,
+  onClick,
+  as,
+  htmlFor,
+  ariaLabel,
+  disabled,
+  href,
+  target,
+  rel,
+  prefetch,
+  linkComponent,
+  bgColor = "bg-primary",
+  iconColor = "text-primary-foreground",
+  hoverBgColor = "hover:bg-primary/80",
+  activeBgColor = "active:brightness-90",
+  tooltip,
+  tooltipSide,
+  tooltipAlign,
+  label,
+  mobileIconOnly,
+  ...rest
+}, ref) {
+  return renderTapTarget({
+    icon,
+    children,
+    strokeWidth,
+    onClick,
+    as,
+    htmlFor,
+    ariaLabel,
+    disabled,
+    href,
+    target,
+    rel,
+    prefetch,
+    linkComponent,
+    tooltip,
+    tooltipSide,
+    tooltipAlign,
+    label,
+    mobileIconOnly,
+    pillClassName: `matrx-tap-pill ${bgColor} ${iconColor} ${hoverBgColor} ${activeBgColor}`,
+    iconClassName: `matrx-tap-icon ${iconColor}`,
+    labelClassName: `matrx-tap-label ${iconColor}`,
+    rest,
+    buttonRef: ref
+  });
+});
+var TapTargetButtonDestructive = forwardRef2(function TapTargetButtonDestructive2({
+  bgColor = "bg-destructive",
+  iconColor = "text-destructive-foreground",
+  hoverBgColor = "hover:bg-destructive/90",
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsx3(
+    TapTargetButtonSolid,
+    {
+      ref,
+      bgColor,
+      iconColor,
+      hoverBgColor,
+      ...rest
+    }
+  );
+});
+var TapTargetButtonForGroup = forwardRef2(function TapTargetButtonForGroup2({
+  icon,
+  children,
+  strokeWidth = 2,
+  onClick,
+  className,
+  as,
+  htmlFor,
+  ariaLabel,
+  disabled,
+  href,
+  target,
+  rel,
+  prefetch,
+  linkComponent,
+  tooltip,
+  tooltipSide,
+  tooltipAlign,
+  label,
+  mobileIconOnly,
+  ...rest
+}, ref) {
+  const color = className ?? "text-foreground";
+  return renderTapTarget({
+    size: "sm",
+    icon,
+    children,
+    strokeWidth,
+    onClick,
+    as,
+    htmlFor,
+    ariaLabel,
+    disabled,
+    href,
+    target,
+    rel,
+    prefetch,
+    linkComponent,
+    tooltip,
+    tooltipSide,
+    tooltipAlign,
+    label,
+    mobileIconOnly,
+    pillClassName: "matrx-tap-pill matrx-tap-pill-sm matrx-glass-interactive",
+    iconClassName: `matrx-tap-icon ${color}`,
+    labelClassName: `matrx-tap-label ${color}`,
+    rest,
+    buttonRef: ref
+  });
+});
+function TapTargetButtonGroup({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: className ? `relative inline-flex h-9 items-center ${className}` : "relative inline-flex h-9 items-center",
+      children: [
+        /* @__PURE__ */ jsx3("div", { className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 h-7 rounded-full matrx-glass-thin-border" }),
+        /* @__PURE__ */ jsx3("div", { className: "relative flex min-w-0 items-center", children })
+      ]
+    }
+  );
+}
+
+// src/tap-target/tap-target-labeled.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function TapTargetLabeled({
+  label,
+  children,
+  hideLabel = false,
+  toolTipSide = "bottom"
+}) {
+  return /* @__PURE__ */ jsx4(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs2(Tooltip, { children: [
+    /* @__PURE__ */ jsx4(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center p-0 gap-0 space-y-0 space-x-0 shrink-0", children: [
+      children,
+      !hideLabel && /* @__PURE__ */ jsx4("span", { className: "text-[10px] text-muted-foreground/70 leading-tight max-w-[52px] text-center truncate", children: label })
+    ] }) }),
+    /* @__PURE__ */ jsx4(TooltipContent, { side: toolTipSide, children: /* @__PURE__ */ jsx4("span", { className: "font-mono text-xs max-w-[280px] break-all", children: label }) })
+  ] }) });
+}
+export {
+  TapTargetButton,
+  TapTargetButtonDestructive,
+  TapTargetButtonForGroup,
+  TapTargetButtonGroup,
+  TapTargetButtonSolid,
+  TapTargetButtonTransparent,
+  TapTargetLabeled,
+  getTapTargetLinkComponent,
+  setTapTargetLinkComponent
+};
+//# sourceMappingURL=tap-target.js.map