@ai-matrx/design-system 0.18.21 → 0.19.0

package/dist/tap-target.cjs

@@ -0,0 +1,636 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/tap-target/index.ts
+var tap_target_exports = {};
+__export(tap_target_exports, {
+  TapTargetButton: () => TapTargetButton,
+  TapTargetButtonDestructive: () => TapTargetButtonDestructive,
+  TapTargetButtonForGroup: () => TapTargetButtonForGroup,
+  TapTargetButtonGroup: () => TapTargetButtonGroup,
+  TapTargetButtonSolid: () => TapTargetButtonSolid,
+  TapTargetButtonTransparent: () => TapTargetButtonTransparent,
+  TapTargetLabeled: () => TapTargetLabeled,
+  getTapTargetLinkComponent: () => getTapTargetLinkComponent,
+  setTapTargetLinkComponent: () => setTapTargetLinkComponent
+});
+module.exports = __toCommonJS(tap_target_exports);
+
+// src/tap-target/tap-target-button.tsx
+var import_react = require("react");
+
+// src/tooltip.tsx
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
+var React2 = __toESM(require("react"), 1);
+
+// src/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.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
+var React = __toESM(require("react"), 1);
+var import_jsx_runtime = require("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
+var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsx)(TooltipPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    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
+var import_jsx_runtime3 = require("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 ((0, import_react.isValidElement)(icon)) {
+      return (0, import_react.cloneElement)(icon, {
+        className: cn2(className, icon.props.className)
+      });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className, children: icon });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "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__ */ (0, import_jsx_runtime3.jsx)(
+    IconContent,
+    {
+      icon,
+      strokeWidth,
+      className: iconClassName,
+      children
+    }
+  );
+  const pillClasses = label ? `${pillClassName} ${inlineModifier}`.trim() : pillClassName;
+  if (!label) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: pillClasses, children: iconEl });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: pillClasses, children: [
+    iconEl,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)(
+      "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__ */ (0, import_jsx_runtime3.jsx)(
+        "a",
+        {
+          href,
+          target: target ?? "_blank",
+          rel: rel ?? "noopener noreferrer",
+          "aria-label": ariaLabel,
+          className: outerClassName,
+          children
+        }
+      );
+    }
+    const Link = linkComponent ?? getTapTargetLinkComponent();
+    if (Link) {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        Link,
+        {
+          href,
+          target,
+          rel,
+          prefetch,
+          "aria-label": ariaLabel,
+          className: outerClassName,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "a",
+      {
+        href,
+        target,
+        rel,
+        "aria-label": ariaLabel,
+        className: outerClassName,
+        children
+      }
+    );
+  }
+  if (as === "label") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "label",
+      {
+        htmlFor,
+        "aria-label": ariaLabel,
+        className: outerClassName,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "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__ */ (0, import_jsx_runtime3.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(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__ */ (0, import_jsx_runtime3.jsx)("span", { className: "inline-flex", children: trigger })
+    ) : trigger }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipContent, { side: tooltipSide, align: tooltipAlign, children: label })
+  ] });
+}
+var TapTargetButton = (0, import_react.forwardRef)(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 = (0, import_react.forwardRef)(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 = (0, import_react.forwardRef)(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 = (0, import_react.forwardRef)(function TapTargetButtonDestructive2({
+  bgColor = "bg-destructive",
+  iconColor = "text-destructive-foreground",
+  hoverBgColor = "hover:bg-destructive/90",
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    TapTargetButtonSolid,
+    {
+      ref,
+      bgColor,
+      iconColor,
+      hoverBgColor,
+      ...rest
+    }
+  );
+});
+var TapTargetButtonForGroup = (0, import_react.forwardRef)(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__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: className ? `relative inline-flex h-9 items-center ${className}` : "relative inline-flex h-9 items-center",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("div", { className: "relative flex min-w-0 items-center", children })
+      ]
+    }
+  );
+}
+
+// src/tap-target/tap-target-labeled.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function TapTargetLabeled({
+  label,
+  children,
+  hideLabel = false,
+  toolTipSide = "bottom"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col items-center p-0 gap-0 space-y-0 space-x-0 shrink-0", children: [
+      children,
+      !hideLabel && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[10px] text-muted-foreground/70 leading-tight max-w-[52px] text-center truncate", children: label })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TooltipContent, { side: toolTipSide, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-mono text-xs max-w-[280px] break-all", children: label }) })
+  ] }) });
+}
+//# sourceMappingURL=tap-target.cjs.map