@ai-matrx/tap-target 0.1.0

package/dist/link-CkRpHgou.d.ts

@@ -0,0 +1,40 @@
+import { ComponentType, ReactNode } from 'react';
+
+/**
+ * The injectable link seam — the package's replacement for the original
+ * hard `next/link` import.
+ *
+ * Internal hrefs (anything NOT matching `http(s):`, `mailto:`, `tel:`) render
+ * through the link component resolved here; external hrefs always render a
+ * plain `<a target="_blank" rel="noopener noreferrer">`, exactly like the
+ * original. When nothing is registered and no per-instance `linkComponent`
+ * prop is given, internal hrefs fall back to a plain `<a>` (no prefetch, no
+ * client-side routing — still a working link).
+ */
+interface TapTargetLinkProps {
+    href: string;
+    target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
+    rel?: string | undefined;
+    /** Router prefetch hint (next/link semantics). Plain `<a>` fallback ignores it. */
+    prefetch?: boolean | null | undefined;
+    "aria-label"?: string | undefined;
+    className?: string | undefined;
+    children?: ReactNode;
+}
+type TapTargetLinkComponent = ComponentType<TapTargetLinkProps>;
+/**
+ * Register the app's link component once at startup (e.g. `next/link`):
+ *
+ * ```tsx
+ * import Link from "next/link";
+ * import { setTapTargetLinkComponent } from "@ai-matrx/tap-target";
+ * setTapTargetLinkComponent(Link);
+ * ```
+ *
+ * Pass `null` to unregister (plain `<a>` fallback resumes).
+ */
+declare function setTapTargetLinkComponent(component: TapTargetLinkComponent | null): void;
+/** The currently registered link component, or `null` when none is set. */
+declare function getTapTargetLinkComponent(): TapTargetLinkComponent | null;
+
+export { type TapTargetLinkComponent as T, type TapTargetLinkProps as a, getTapTargetLinkComponent as g, setTapTargetLinkComponent as s };

package/dist/styles.css

@@ -0,0 +1,110 @@
+/* @ai-matrx/tap-target — REQUIRED stylesheet. Import once at your app root:
+     import "@ai-matrx/tap-target/styles.css";
+   Extracted VERBATIM from matrx-frontend app/globals.css (where it lives inside
+   `@layer components`; shipped unlayered here so it wins against unlayered host
+   CSS without requiring a layer-order declaration). Until the C9 swap removes
+   the matrx-frontend originals, any change here ships in BOTH places. */
+
+/* =========================================================================
+   TapTargetButton — SINGLE SOURCE OF TRUTH for tap-button geometry + feedback.
+   This is the ONLY place these are defined (previously also duplicated in
+   styles/shell.css, which caused the same button to resolve differently
+   inside vs outside the shell). Consumed exclusively by
+   components/icons/TapTargetButton.tsx. To resize or retune EVERY tap button
+   in the app, edit HERE — nowhere else.
+
+   Structure per button:
+     .matrx-tap-target — outer 44px invisible touch target = the interactive
+                         element (<button>/<a>/<label>). It owns the tap
+                         hygiene (touch-action + tap-highlight) so it applies
+                         to the WHOLE 44px target AND to the link variants —
+                         the iOS gray flash paints on the anchor, not the
+                         inner pill, so putting it on the pill never worked.
+     .matrx-tap-pill   — inner 28px visible pill. Geometry + press feedback.
+                         Each variant layers ONLY its decoration on top (glass
+                         border / solid fill / hover bg) — the size is identical
+                         across glass / transparent / solid, guaranteed here.
+     .matrx-tap-icon   — 14px icon.
+     .matrx-tap-*-inline — wider auto-width geometry when `label` is set on
+                            TapTargetButton (icon + caption on one row).
+   The `-sm` classes (32 / 20px) are the slimmer geometry used inside groups.
+   ========================================================================= */
+.matrx-tap-target {
+  display: flex;
+  height: 2.75rem; /* 44px outer tap target */
+  width: 2.75rem;
+  flex-shrink: 0; /* a tap target never squishes under flex pressure —
+                     flexible neighbors (truncating labels) absorb it */
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  cursor: pointer;
+  outline: none;
+  touch-action: manipulation; /* kills the 300ms mobile tap delay */
+  -webkit-tap-highlight-color: transparent; /* kills the iOS gray tap flash */
+}
+.matrx-tap-target:disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+.matrx-tap-target-sm {
+  height: 2rem; /* 32px */
+  width: 2rem;
+}
+
+.matrx-tap-pill {
+  display: flex;
+  height: 1.75rem; /* 28px visible pill */
+  width: 1.75rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  transition:
+    background-color 150ms ease,
+    transform 100ms ease;
+}
+.matrx-tap-pill:active {
+  transform: scale(0.92);
+}
+.matrx-tap-pill-sm {
+  height: 1.25rem; /* 20px */
+  width: 1.25rem;
+}
+
+.matrx-tap-icon {
+  height: 0.875rem; /* 14px */
+  width: 0.875rem;
+  flex-shrink: 0;
+}
+
+/* Inline label — icon + text on one row inside the pill */
+.matrx-tap-target-inline {
+  width: auto;
+  min-width: 2.75rem;
+  padding-inline: 0.25rem;
+}
+.matrx-tap-pill-inline {
+  width: auto;
+  gap: 0.375rem;
+  padding-inline: 0.625rem;
+}
+.matrx-tap-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.matrx-tap-target-inline-sm {
+  width: auto;
+  min-width: 2rem;
+  padding-inline: 0.125rem;
+}
+.matrx-tap-pill-inline-sm {
+  width: auto;
+  gap: 0.25rem;
+  padding-inline: 0.5rem;
+}
+.matrx-tap-pill-inline-sm .matrx-tap-label {
+  font-size: 0.625rem;
+}

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@ai-matrx/tap-target",
+  "version": "0.1.0",
+  "description": "The AI Matrx tap-target button system: an invisible 44x44 touch ring over a 32x32 visible pill, glass/transparent/solid/group variants with correct ref forwarding for Radix asChild triggers, inline labels, link/label/button trigger resolution with an injectable link component, tooltip wiring, and ~60 pre-composed one-tag buttons.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "license": "MIT",
+  "keywords": [
+    "tap-target",
+    "touch-target",
+    "icon-button",
+    "react",
+    "radix",
+    "a11y",
+    "ai-matrx"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AI-Matrix-Engine/aidream.git",
+    "directory": "apps/shared/tap-target"
+  },
+  "homepage": "https://github.com/AI-Matrix-Engine/aidream/tree/main/apps/shared/tap-target#readme",
+  "bugs": {
+    "url": "https://github.com/AI-Matrix-Engine/aidream/issues"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./buttons": {
+      "import": {
+        "types": "./dist/buttons.d.ts",
+        "default": "./dist/buttons.js"
+      },
+      "require": {
+        "types": "./dist/buttons.d.cts",
+        "default": "./dist/buttons.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@radix-ui/react-tooltip": "^1.2.8"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^22.20.0",
+    "@types/react": "^19.1.0",
+    "jsdom": "^25.0.1",
+    "publint": "^0.3.24",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.6"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "clean": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\"",
+    "check:package": "pnpm build && publint && pnpm verify:tarball",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "verify:tarball": "node ./scripts/verify-tarball.mjs"
+  }
+}