@ai-matrx/design-system 0.18.21 → 0.19.0

package/dist/index.cjs

@@ -221,6 +221,13 @@ __export(src_exports, {
   TabsList: () => TabsList,
   TabsTrigger: () => TabsTrigger,
   TabsTriggerCore: () => TabsTriggerCore,
+  TapTargetButton: () => TapTargetButton,
+  TapTargetButtonDestructive: () => TapTargetButtonDestructive,
+  TapTargetButtonForGroup: () => TapTargetButtonForGroup,
+  TapTargetButtonGroup: () => TapTargetButtonGroup,
+  TapTargetButtonSolid: () => TapTargetButtonSolid,
+  TapTargetButtonTransparent: () => TapTargetButtonTransparent,
+  TapTargetLabeled: () => TapTargetLabeled,
   Textarea: () => Textarea,
   TextareaWithPrefix: () => TextareaWithPrefix,
   Toggle: () => Toggle,
@@ -235,9 +242,11 @@ __export(src_exports, {
   badgeVariants: () => badgeVariants,
   buttonVariants: () => buttonVariants,
   cn: () => cn,
+  getTapTargetLinkComponent: () => getTapTargetLinkComponent,
   scoreAccentBgClasses: () => scoreAccentBgClasses,
   scoreRingColorClasses: () => scoreRingColorClasses,
   selectTriggerVariants: () => selectTriggerVariants,
+  setTapTargetLinkComponent: () => setTapTargetLinkComponent,
   sheetVariants: () => sheetVariants,
   toArchiveFilter: () => toArchiveFilter,
   toggleVariants: () => toggleVariants,
@@ -4482,4 +4491,522 @@ var TooltipContent = React36.forwardRef(({ className, sideOffset = 4, container,
   ) });
 });
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/tap-target/tap-target-button.tsx
+var import_react6 = require("react");
+
+// 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_runtime49 = 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_react6.isValidElement)(icon)) {
+      return (0, import_react6.cloneElement)(icon, {
+        className: cn2(className, icon.props.className)
+      });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className, children: icon });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime49.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_runtime49.jsx)(
+    IconContent,
+    {
+      icon,
+      strokeWidth,
+      className: iconClassName,
+      children
+    }
+  );
+  const pillClasses = label ? `${pillClassName} ${inlineModifier}`.trim() : pillClassName;
+  if (!label) {
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: pillClasses, children: iconEl });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: pillClasses, children: [
+    iconEl,
+    /* @__PURE__ */ (0, import_jsx_runtime49.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_runtime49.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_runtime49.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_runtime49.jsx)(
+        Link,
+        {
+          href,
+          target,
+          rel,
+          prefetch,
+          "aria-label": ariaLabel,
+          className: outerClassName,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      "a",
+      {
+        href,
+        target,
+        rel,
+        "aria-label": ariaLabel,
+        className: outerClassName,
+        children
+      }
+    );
+  }
+  if (as === "label") {
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      "label",
+      {
+        htmlFor,
+        "aria-label": ariaLabel,
+        className: outerClassName,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime49.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_runtime49.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.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_runtime49.jsx)("span", { className: "inline-flex", children: trigger })
+    ) : trigger }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TooltipContent, { side: tooltipSide, align: tooltipAlign, children: label })
+  ] });
+}
+var TapTargetButton = (0, import_react6.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_react6.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_react6.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_react6.forwardRef)(function TapTargetButtonDestructive2({
+  bgColor = "bg-destructive",
+  iconColor = "text-destructive-foreground",
+  hoverBgColor = "hover:bg-destructive/90",
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    TapTargetButtonSolid,
+    {
+      ref,
+      bgColor,
+      iconColor,
+      hoverBgColor,
+      ...rest
+    }
+  );
+});
+var TapTargetButtonForGroup = (0, import_react6.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_runtime49.jsxs)(
+    "div",
+    {
+      className: className ? `relative inline-flex h-9 items-center ${className}` : "relative inline-flex h-9 items-center",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.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_runtime49.jsx)("div", { className: "relative flex min-w-0 items-center", children })
+      ]
+    }
+  );
+}
+
+// src/tap-target/tap-target-labeled.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
+function TapTargetLabeled({
+  label,
+  children,
+  hideLabel = false,
+  toolTipSide = "bottom"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime50.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_runtime50.jsx)("span", { className: "text-[10px] text-muted-foreground/70 leading-tight max-w-[52px] text-center truncate", children: label })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TooltipContent, { side: toolTipSide, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "font-mono text-xs max-w-[280px] break-all", children: label }) })
+  ] }) });
+}
 //# sourceMappingURL=index.cjs.map