@ai-matrx/tap-target 0.2.7 → 0.2.8

package/dist/styles.css

@@ -1,160 +1,2 @@
-/* @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. */
-
-/* @ai-matrx/design-system's stylesheet is REQUIRED by this one, not merely
-   recommended (0.2.1). Two reasons, and neither is optional:
-     1. `LoadingTapButton`'s spinner wears `matrx-spin`, whose keyframe and rule
-        are DEFINED THERE. Copying those four lines here would make a second
-        source of truth for one animation — the exact twin census row 19i
-        exists to kill — so the sheet is imported instead.
-     2. This package already renders design-system components (Tooltip), so
-        every correct host loads it anyway.
-   `@ai-matrx/design-system` is a real `dependencies` entry of this package, so
-   this bare specifier resolves from a plain `npm install @ai-matrx/tap-target`
-   with nothing else in the host's manifest. A host that already imports the
-   design-system sheet itself loses nothing: bundlers resolve both to one file.
-   NOTE: `@import` must lead the file — keep any future rules BELOW it. */
+/* Compatibility entry: tap geometry lives in the design system. */
 @import "@ai-matrx/design-system/styles.css";
-
-/* =========================================================================
-   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;
-}
-
-/* Icon-only on phones, icon + caption from `sm` upward. Keep this geometry
-   in the canonical tap system so responsive header actions never hand-roll
-   smaller targets or duplicate controls at each breakpoint. */
-.matrx-tap-label-mobile-icon-only {
-  display: none;
-}
-@media (min-width: 40rem) {
-  .matrx-tap-target-mobile-icon-only {
-    width: auto;
-    min-width: 2.75rem;
-    padding-inline: 0.25rem;
-  }
-  .matrx-tap-pill-mobile-icon-only {
-    width: auto;
-    gap: 0.375rem;
-    padding-inline: 0.625rem;
-  }
-  .matrx-tap-target-mobile-icon-only-sm {
-    width: auto;
-    min-width: 2rem;
-    padding-inline: 0.125rem;
-  }
-  .matrx-tap-pill-mobile-icon-only-sm {
-    width: auto;
-    gap: 0.25rem;
-    padding-inline: 0.5rem;
-  }
-  .matrx-tap-pill-mobile-icon-only-sm .matrx-tap-label {
-    font-size: 0.625rem;
-  }
-  .matrx-tap-label-mobile-icon-only {
-    display: inline;
-  }
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/tap-target",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "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",

package/dist/link-CkRpHgou.d.cts

@@ -1,40 +0,0 @@
-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/link-CkRpHgou.d.ts

@@ -1,40 +0,0 @@
-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 };