@ai-matrx/tap-target 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,108 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes } from 'react';
+import { T as TapTargetLinkComponent } from './link-CkRpHgou.cjs';
+export { a as TapTargetLinkProps, g as getTapTargetLinkComponent, s as setTapTargetLinkComponent } from './link-CkRpHgou.cjs';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+interface TapTargetButtonProps {
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+    strokeWidth?: number | undefined;
+    onClick?: (() => void) | undefined;
+    className?: string | undefined;
+    as?: "button" | "label" | undefined;
+    htmlFor?: string | undefined;
+    ariaLabel?: string | undefined;
+    disabled?: boolean | undefined;
+    /**
+     * When set, the tap button renders as a link instead of a button.
+     * - Internal hrefs (e.g. "/tasks") render via the injected link component
+     *   (`setTapTargetLinkComponent` / the `linkComponent` prop), falling back
+     *   to a plain `<a>` when none is registered.
+     * - External hrefs (http://, https://, mailto:, tel:) render as `<a>`
+     *   with `target="_blank"` and `rel="noopener noreferrer"` by default.
+     * - When combined with `disabled`, the trigger renders as a non-navigable
+     *   `<span aria-disabled="true">` with the same visual styling.
+     */
+    href?: string | undefined;
+    /** Override target. Works on both internal links and external anchors. */
+    target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
+    /** Override rel. Works on both internal links and external anchors. */
+    rel?: string | undefined;
+    /** Forwarded to the injected link component. Pass `false` to disable prefetching. */
+    prefetch?: boolean | null | undefined;
+    /**
+     * Per-instance link component for internal hrefs — overrides the
+     * module-level `setTapTargetLinkComponent` registration.
+     */
+    linkComponent?: TapTargetLinkComponent | undefined;
+    /**
+     * Tooltip text. Defaults to `ariaLabel` when omitted.
+     * Pass `false` to explicitly disable the tooltip.
+     */
+    tooltip?: string | false | undefined;
+    /** Tooltip placement. Defaults to "top". */
+    tooltipSide?: "top" | "right" | "bottom" | "left" | undefined;
+    /** Tooltip alignment along its side. Defaults to "center". */
+    tooltipAlign?: "start" | "center" | "end" | undefined;
+    /**
+     * Visible caption rendered inline after the icon (`[icon Label]`).
+     * Widens the pill automatically. Tooltip defaults to off when set — the
+     * label is self-describing. Visible text becomes the accessible name.
+     */
+    label?: string | undefined;
+}
+interface TapTargetButtonSolidProps extends TapTargetButtonProps {
+    bgColor?: string | undefined;
+    iconColor?: string | undefined;
+    hoverBgColor?: string | undefined;
+    /**
+     * Press-state background. Defaults to `active:brightness-90` which works on
+     * any color. Override when using a custom `bgColor` that should darken to a
+     * specific shade on press (e.g. `active:bg-primary/60`).
+     */
+    activeBgColor?: string | undefined;
+}
+declare const TapTargetButton: react.ForwardRefExoticComponent<TapTargetButtonProps & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+declare const TapTargetButtonTransparent: react.ForwardRefExoticComponent<TapTargetButtonProps & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+declare const TapTargetButtonSolid: react.ForwardRefExoticComponent<TapTargetButtonSolidProps & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+/** Solid destructive pill — delete/remove actions. White-on-red like the
+ *  primary solid is white-on-blue. Use THIS, never hand-pass bg-destructive
+ *  with the default (dark) icon color. */
+declare const TapTargetButtonDestructive: react.ForwardRefExoticComponent<TapTargetButtonSolidProps & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+declare const TapTargetButtonForGroup: react.ForwardRefExoticComponent<TapTargetButtonProps & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+declare function TapTargetButtonGroup({ children, className, }: {
+    children: React.ReactNode;
+    className?: string | undefined;
+}): react.JSX.Element;
+
+/**
+ * Wraps a TapTargetButton (or any tap control) like the button-demo page:
+ * no extra padding on the control — only `gap-0.5` before the caption.
+ * Tooltip shows the full `label`; the caption truncates at max-w-[52px].
+ */
+declare function TapTargetLabeled({ label, children, hideLabel, toolTipSide, }: {
+    label: string;
+    children: React.ReactNode;
+    hideLabel?: boolean | undefined;
+    toolTipSide?: "top" | "bottom" | "left" | "right" | undefined;
+}): react.JSX.Element;
+
+/**
+ * Inlined port of matrx-frontend `components/ui/tooltip.tsx` — the one `@/`
+ * import the tap-target components consumed beyond `cn` and `next/link`.
+ * Behavior deltas vs. the original, both documented in FEATURE.md:
+ * - `useNestedPortalContainer` (a host-specific nested-overlay portal context)
+ *   is dropped: content portals to the Radix default (document.body).
+ * - Everything else — unconditional Root render, popover-token styling — is
+ *   verbatim.
+ *
+ * Hosts must mount `TooltipProvider` once near the app root (matrx-frontend
+ * already does); `TapTargetLabeled` brings its own provider like the original.
+ */
+declare const TooltipProvider: react.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: react.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: react.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: react.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+export { TapTargetButton, TapTargetButtonDestructive, TapTargetButtonForGroup, TapTargetButtonGroup, type TapTargetButtonProps, TapTargetButtonSolid, type TapTargetButtonSolidProps, TapTargetButtonTransparent, TapTargetLabeled, TapTargetLinkComponent, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/index.d.ts

@@ -0,0 +1,108 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes } from 'react';
+import { T as TapTargetLinkComponent } from './link-CkRpHgou.js';
+export { a as TapTargetLinkProps, g as getTapTargetLinkComponent, s as setTapTargetLinkComponent } from './link-CkRpHgou.js';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+interface TapTargetButtonProps {
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+    strokeWidth?: number | undefined;
+    onClick?: (() => void) | undefined;
+    className?: string | undefined;
+    as?: "button" | "label" | undefined;
+    htmlFor?: string | undefined;
+    ariaLabel?: string | undefined;
+    disabled?: boolean | undefined;
+    /**
+     * When set, the tap button renders as a link instead of a button.
+     * - Internal hrefs (e.g. "/tasks") render via the injected link component
+     *   (`setTapTargetLinkComponent` / the `linkComponent` prop), falling back
+     *   to a plain `<a>` when none is registered.
+     * - External hrefs (http://, https://, mailto:, tel:) render as `<a>`
+     *   with `target="_blank"` and `rel="noopener noreferrer"` by default.
+     * - When combined with `disabled`, the trigger renders as a non-navigable
+     *   `<span aria-disabled="true">` with the same visual styling.
+     */
+    href?: string | undefined;
+    /** Override target. Works on both internal links and external anchors. */
+    target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
+    /** Override rel. Works on both internal links and external anchors. */
+    rel?: string | undefined;
+    /** Forwarded to the injected link component. Pass `false` to disable prefetching. */
+    prefetch?: boolean | null | undefined;
+    /**
+     * Per-instance link component for internal hrefs — overrides the
+     * module-level `setTapTargetLinkComponent` registration.
+     */
+    linkComponent?: TapTargetLinkComponent | undefined;
+    /**
+     * Tooltip text. Defaults to `ariaLabel` when omitted.
+     * Pass `false` to explicitly disable the tooltip.
+     */
+    tooltip?: string | false | undefined;
+    /** Tooltip placement. Defaults to "top". */
+    tooltipSide?: "top" | "right" | "bottom" | "left" | undefined;
+    /** Tooltip alignment along its side. Defaults to "center". */
+    tooltipAlign?: "start" | "center" | "end" | undefined;
+    /**
+     * Visible caption rendered inline after the icon (`[icon Label]`).
+     * Widens the pill automatically. Tooltip defaults to off when set — the
+     * label is self-describing. Visible text becomes the accessible name.
+     */
+    label?: string | undefined;
+}
+interface TapTargetButtonSolidProps extends TapTargetButtonProps {
+    bgColor?: string | undefined;
+    iconColor?: string | undefined;
+    hoverBgColor?: string | undefined;
+    /**
+     * Press-state background. Defaults to `active:brightness-90` which works on
+     * any color. Override when using a custom `bgColor` that should darken to a
+     * specific shade on press (e.g. `active:bg-primary/60`).
+     */
+    activeBgColor?: string | undefined;
+}
+declare const TapTargetButton: react.ForwardRefExoticComponent<TapTargetButtonProps & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+declare const TapTargetButtonTransparent: react.ForwardRefExoticComponent<TapTargetButtonProps & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+declare const TapTargetButtonSolid: react.ForwardRefExoticComponent<TapTargetButtonSolidProps & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+/** Solid destructive pill — delete/remove actions. White-on-red like the
+ *  primary solid is white-on-blue. Use THIS, never hand-pass bg-destructive
+ *  with the default (dark) icon color. */
+declare const TapTargetButtonDestructive: react.ForwardRefExoticComponent<TapTargetButtonSolidProps & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+declare const TapTargetButtonForGroup: react.ForwardRefExoticComponent<TapTargetButtonProps & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+declare function TapTargetButtonGroup({ children, className, }: {
+    children: React.ReactNode;
+    className?: string | undefined;
+}): react.JSX.Element;
+
+/**
+ * Wraps a TapTargetButton (or any tap control) like the button-demo page:
+ * no extra padding on the control — only `gap-0.5` before the caption.
+ * Tooltip shows the full `label`; the caption truncates at max-w-[52px].
+ */
+declare function TapTargetLabeled({ label, children, hideLabel, toolTipSide, }: {
+    label: string;
+    children: React.ReactNode;
+    hideLabel?: boolean | undefined;
+    toolTipSide?: "top" | "bottom" | "left" | "right" | undefined;
+}): react.JSX.Element;
+
+/**
+ * Inlined port of matrx-frontend `components/ui/tooltip.tsx` — the one `@/`
+ * import the tap-target components consumed beyond `cn` and `next/link`.
+ * Behavior deltas vs. the original, both documented in FEATURE.md:
+ * - `useNestedPortalContainer` (a host-specific nested-overlay portal context)
+ *   is dropped: content portals to the Radix default (document.body).
+ * - Everything else — unconditional Root render, popover-token styling — is
+ *   verbatim.
+ *
+ * Hosts must mount `TooltipProvider` once near the app root (matrx-frontend
+ * already does); `TapTargetLabeled` brings its own provider like the original.
+ */
+declare const TooltipProvider: react.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: react.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: react.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: react.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+export { TapTargetButton, TapTargetButtonDestructive, TapTargetButtonForGroup, TapTargetButtonGroup, type TapTargetButtonProps, TapTargetButtonSolid, type TapTargetButtonSolidProps, TapTargetButtonTransparent, TapTargetLabeled, TapTargetLinkComponent, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };