@ai-matrx/design-system 0.18.21 → 0.19.0

package/dist/index.d.cts

@@ -29,6 +29,7 @@ import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+export { TapTargetButton, TapTargetButtonDestructive, TapTargetButtonForGroup, TapTargetButtonGroup, TapTargetButtonProps, TapTargetButtonSolid, TapTargetButtonSolidProps, TapTargetButtonTransparent, TapTargetLabeled, TapTargetLinkComponent, TapTargetLinkProps, getTapTargetLinkComponent, setTapTargetLinkComponent } from './tap-target.cjs';
 
 /**
  * Accordion — the last primitive the fleet was still standing in for.

package/dist/index.d.ts

@@ -29,6 +29,7 @@ import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+export { TapTargetButton, TapTargetButtonDestructive, TapTargetButtonForGroup, TapTargetButtonGroup, TapTargetButtonProps, TapTargetButtonSolid, TapTargetButtonSolidProps, TapTargetButtonTransparent, TapTargetLabeled, TapTargetLinkComponent, TapTargetLinkProps, getTapTargetLinkComponent, setTapTargetLinkComponent } from './tap-target.js';
 
 /**
  * Accordion — the last primitive the fleet was still standing in for.

package/dist/index.js

@@ -4232,6 +4232,528 @@ var TooltipContent = React36.forwardRef(({ className, sideOffset = 4, container,
   ) });
 });
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/tap-target/tap-target-button.tsx
+import {
+  cloneElement,
+  forwardRef as forwardRef31,
+  isValidElement
+} from "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
+import { jsx as jsx49, jsxs as jsxs25 } 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__ */ jsx49("span", { className, children: icon });
+  }
+  return /* @__PURE__ */ jsx49(
+    "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__ */ jsx49(
+    IconContent,
+    {
+      icon,
+      strokeWidth,
+      className: iconClassName,
+      children
+    }
+  );
+  const pillClasses = label ? `${pillClassName} ${inlineModifier}`.trim() : pillClassName;
+  if (!label) {
+    return /* @__PURE__ */ jsx49("div", { className: pillClasses, children: iconEl });
+  }
+  return /* @__PURE__ */ jsxs25("div", { className: pillClasses, children: [
+    iconEl,
+    /* @__PURE__ */ jsx49("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__ */ jsx49(
+      "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__ */ jsx49(
+        "a",
+        {
+          href,
+          target: target ?? "_blank",
+          rel: rel ?? "noopener noreferrer",
+          "aria-label": ariaLabel,
+          className: outerClassName,
+          children
+        }
+      );
+    }
+    const Link = linkComponent ?? getTapTargetLinkComponent();
+    if (Link) {
+      return /* @__PURE__ */ jsx49(
+        Link,
+        {
+          href,
+          target,
+          rel,
+          prefetch,
+          "aria-label": ariaLabel,
+          className: outerClassName,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx49(
+      "a",
+      {
+        href,
+        target,
+        rel,
+        "aria-label": ariaLabel,
+        className: outerClassName,
+        children
+      }
+    );
+  }
+  if (as === "label") {
+    return /* @__PURE__ */ jsx49(
+      "label",
+      {
+        htmlFor,
+        "aria-label": ariaLabel,
+        className: outerClassName,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx49(
+    "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__ */ jsxs25(Tooltip, { children: [
+    /* @__PURE__ */ jsx49(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__ */ jsx49("span", { className: "inline-flex", children: trigger })
+    ) : trigger }),
+    /* @__PURE__ */ jsx49(TooltipContent, { side: tooltipSide, align: tooltipAlign, children: label })
+  ] });
+}
+var TapTargetButton = forwardRef31(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 = forwardRef31(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 = forwardRef31(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 = forwardRef31(function TapTargetButtonDestructive2({
+  bgColor = "bg-destructive",
+  iconColor = "text-destructive-foreground",
+  hoverBgColor = "hover:bg-destructive/90",
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsx49(
+    TapTargetButtonSolid,
+    {
+      ref,
+      bgColor,
+      iconColor,
+      hoverBgColor,
+      ...rest
+    }
+  );
+});
+var TapTargetButtonForGroup = forwardRef31(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__ */ jsxs25(
+    "div",
+    {
+      className: className ? `relative inline-flex h-9 items-center ${className}` : "relative inline-flex h-9 items-center",
+      children: [
+        /* @__PURE__ */ jsx49("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__ */ jsx49("div", { className: "relative flex min-w-0 items-center", children })
+      ]
+    }
+  );
+}
+
+// src/tap-target/tap-target-labeled.tsx
+import { jsx as jsx50, jsxs as jsxs26 } from "react/jsx-runtime";
+function TapTargetLabeled({
+  label,
+  children,
+  hideLabel = false,
+  toolTipSide = "bottom"
+}) {
+  return /* @__PURE__ */ jsx50(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs26(Tooltip, { children: [
+    /* @__PURE__ */ jsx50(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs26("div", { className: "flex flex-col items-center p-0 gap-0 space-y-0 space-x-0 shrink-0", children: [
+      children,
+      !hideLabel && /* @__PURE__ */ jsx50("span", { className: "text-[10px] text-muted-foreground/70 leading-tight max-w-[52px] text-center truncate", children: label })
+    ] }) }),
+    /* @__PURE__ */ jsx50(TooltipContent, { side: toolTipSide, children: /* @__PURE__ */ jsx50("span", { className: "font-mono text-xs max-w-[280px] break-all", children: label }) })
+  ] }) });
+}
 export {
   ALL_MOTION_CLASSES,
   ARCHIVE_FILTER_LABELS,
@@ -4423,6 +4945,13 @@ export {
   TabsList,
   TabsTrigger,
   TabsTriggerCore,
+  TapTargetButton,
+  TapTargetButtonDestructive,
+  TapTargetButtonForGroup,
+  TapTargetButtonGroup,
+  TapTargetButtonSolid,
+  TapTargetButtonTransparent,
+  TapTargetLabeled,
   Textarea,
   TextareaWithPrefix,
   Toggle,
@@ -4437,9 +4966,11 @@ export {
   badgeVariants,
   buttonVariants,
   cn,
+  getTapTargetLinkComponent,
   scoreAccentBgClasses,
   scoreRingColorClasses,
   selectTriggerVariants,
+  setTapTargetLinkComponent,
   sheetVariants,
   toArchiveFilter,
   toggleVariants,