@enigmax/primitives 0.10.0 → 0.11.1

package/dist/{chunk-L4KA342C.js → chunk-KTW4GO43.js}

@@ -172,7 +172,7 @@ function useButton(options = {}) {
           event.preventDefault();
           return;
         }
-        void instance.press();
+        void instance.press(event);
       },
       "aria-disabled": !state.available,
       "aria-busy": state.loading,
@@ -202,11 +202,12 @@ var Button = forwardRef(function Button2({
   cooldown,
   shortcut,
   onPress,
+  onClick,
   onChange,
   type = "button",
   ...rest
 }, ref) {
-  const button = useButton({ href, disabled, loading, cooldown, shortcut, onPress, onChange });
+  const button = useButton({ href, disabled, loading, cooldown, shortcut, onPress: onPress ?? onClick, onChange });
   const state = button;
   const Tag = as ?? (state.element === "a" ? getLinkComponent() : "button");
   const native = Tag === "button" ? { type } : {};

package/dist/next/index.js

@@ -1,6 +1,6 @@
 "use client";
-import { Button } from '../chunk-L4KA342C.js';
-export { Input, PasswordStrength, getLinkComponent, setLinkComponent, useButton, useInput, useMarquee, useSearch } from '../chunk-L4KA342C.js';
+import { Button } from '../chunk-KTW4GO43.js';
+export { Input, PasswordStrength, getLinkComponent, setLinkComponent, useButton, useInput, useMarquee, useSearch } from '../chunk-KTW4GO43.js';
 export { estimatePasswordStrength, generatePassword } from '../chunk-42Y7OOJM.js';
 import '../chunk-UZFEEFMF.js';
 import Link from 'next/link';

package/dist/react/index.d.ts

@@ -18,6 +18,16 @@ export { F as FuseConstructor } from '../search-CsO3L1Lw.js';
  * ordinary one means writing the same six lines at every call site, which is how they drift.
  */
 interface ButtonProps extends ButtonOptions, Omit<ComponentPropsWithoutRef<"button">, "onClick" | "onChange" | "children" | "type"> {
+    /**
+     * What to run when it is pressed. The same thing as `onPress`, under the name React
+     * already uses - write whichever reads better.
+     *
+     * It is an ALIAS, not a second handler: the component owns the element's real onClick,
+     * because that is where a press is refused while the button is loading, disabled or
+     * cooling down. Passing one through would replace that and silently take the behaviour
+     * with it. Returning a promise drives `loading` for its duration, same as `onPress`.
+     */
+    onClick?: ButtonOptions["onPress"];
     /**
      * Override what to render. You rarely need it: an href already renders whatever
      * `setLinkComponent` registered - your router's Link - and a button otherwise.
@@ -133,7 +143,7 @@ declare function useSearch<T>(options?: SearchOptions<T>): UseSearchResult<T>;
 interface UseButtonResult extends ButtonState {
     /** Spread onto the element named by `element`. */
     props: {
-        onClick: (event: {
+        onClick: (event: Event | {
             preventDefault(): void;
         }) => void;
         "aria-disabled": boolean;

package/dist/react/index.js

@@ -1,4 +1,4 @@
 "use client";
-export { Button, Input, PasswordStrength, getLinkComponent, setLinkComponent, useButton, useInput, useMarquee, useSearch } from '../chunk-L4KA342C.js';
+export { Button, Input, PasswordStrength, getLinkComponent, setLinkComponent, useButton, useInput, useMarquee, useSearch } from '../chunk-KTW4GO43.js';
 export { estimatePasswordStrength, generatePassword } from '../chunk-42Y7OOJM.js';
 import '../chunk-UZFEEFMF.js';

package/dist/react-router/index.d.ts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import { ButtonProps } from '../react/index.js';
+export { BreachChecker, BreachState, BreachStatus, FieldAction, Input, InputProps, PasswordStrength, PasswordStrengthProps, UseButtonResult, UseInputResult, UseMarqueeResult, UseSearchResult, getLinkComponent, setLinkComponent, useButton, useInput, useMarquee, useSearch } from '../react/index.js';
+export { ButtonOptions, ButtonState, EstimateOptions, GeneratePasswordOptions, InputAction, InputIcon, InputOptions, MarqueeHover, MarqueeInstance, MarqueeOptions, PasswordScore, PasswordStrengthReport, estimatePasswordStrength, generatePassword } from '../index.js';
+export { F as FuseConstructor, b as SearchMatch, c as SearchOptions } from '../search-CsO3L1Lw.js';
+
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLElement>>;
+
+export { Button, ButtonProps };

package/dist/react-router/index.js

@@ -0,0 +1,16 @@
+"use client";
+import { Button } from '../chunk-KTW4GO43.js';
+export { Input, PasswordStrength, getLinkComponent, setLinkComponent, useButton, useInput, useMarquee, useSearch } from '../chunk-KTW4GO43.js';
+export { estimatePasswordStrength, generatePassword } from '../chunk-42Y7OOJM.js';
+import '../chunk-UZFEEFMF.js';
+import { Link } from 'react-router';
+import { forwardRef, createElement } from 'react';
+
+var RouterLink = forwardRef(function RouterLink2({ href = "", ...props }, ref) {
+  return createElement(Link, { ...props, to: href, ref });
+});
+var Button2 = forwardRef(function Button3(props, ref) {
+  return createElement(Button, { ...props, as: props.as ?? (props.href ? RouterLink : void 0), ref });
+});
+
+export { Button2 as Button };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmax/primitives",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "description": "Headless interaction primitives: the behaviour, the timing and the accessibility of components like a draggable infinite marquee, with no styles of their own. Framework-agnostic core plus thin adapters.",
   "type": "module",
   "main": "./dist/index.js",
@@ -22,13 +22,17 @@
     "./next": {
       "types": "./dist/next/index.d.ts",
       "import": "./dist/next/index.js"
+    },
+    "./react-router": {
+      "types": "./dist/react-router/index.d.ts",
+      "import": "./dist/react-router/index.js"
     }
   },
   "scripts": {
     "build": "tsup",
     "typecheck": "tsc --noEmit",
     "test": "npm run test:fixtures && playwright test",
-    "test:fixtures": "esbuild test/fixture/react.tsx --bundle --format=esm --jsx=automatic --outfile=test/fixture/build/react.js --tsconfig=tsconfig.json --alias:next/link=./test/fixture/next-link-stub.tsx",
+    "test:fixtures": "esbuild test/fixture/react.tsx --bundle --format=esm --jsx=automatic --outfile=test/fixture/build/react.js --tsconfig=tsconfig.json --alias:next/link=./test/fixture/next-link-stub.tsx --alias:react-router=./test/fixture/react-router-stub.tsx",
     "test:install": "playwright install chromium",
     "prepublishOnly": "npm run typecheck && npm run build"
   },
@@ -42,8 +46,9 @@
   ],
   "peerDependencies": {
     "fuse.js": ">=6",
+    "next": ">=13",
     "react": ">=18",
-    "next": ">=13"
+    "react-router": ">=7"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -54,6 +59,9 @@
     },
     "next": {
       "optional": true
+    },
+    "react-router": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -64,6 +72,7 @@
     "next": "^15.5.23",
     "react": "^19.2.0",
     "react-dom": "^19.2.8",
+    "react-router": "^7.18.2",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0"
   },

package/src/react/button.tsx

@@ -20,7 +20,18 @@ import { createElement, forwardRef, type ComponentPropsWithoutRef, type ElementT
 
 // `onChange` is omitted from the DOM side because the primitive's own onChange - which
 // reports the button's state - would otherwise clash with the form event of the same name.
+// `onClick` is omitted and re-declared below, as an alias rather than a second handler.
 export interface ButtonProps extends ButtonOptions, Omit<ComponentPropsWithoutRef<"button">, "onClick" | "onChange" | "children" | "type"> {
+    /**
+     * What to run when it is pressed. The same thing as `onPress`, under the name React
+     * already uses - write whichever reads better.
+     *
+     * It is an ALIAS, not a second handler: the component owns the element's real onClick,
+     * because that is where a press is refused while the button is loading, disabled or
+     * cooling down. Passing one through would replace that and silently take the behaviour
+     * with it. Returning a promise drives `loading` for its duration, same as `onPress`.
+     */
+    onClick?: ButtonOptions["onPress"];
     /**
      * Override what to render. You rarely need it: an href already renders whatever
      * `setLinkComponent` registered - your router's Link - and a button otherwise.
@@ -52,11 +63,12 @@ export const Button = forwardRef<HTMLElement, ButtonProps>(function Button({
     cooldown,
     shortcut,
     onPress,
+    onClick,
     onChange,
     type = "button",
     ...rest
 }, ref) {
-    const button = useButton({ href, disabled, loading, cooldown, shortcut, onPress, onChange });
+    const button = useButton({ href, disabled, loading, cooldown, shortcut, onPress: onPress ?? onClick, onChange });
     const state: ButtonState = button;
 
     // An href renders the registered link - next/link, react-router's, whatever was passed

package/src/react/use-button.ts

@@ -4,7 +4,7 @@ import { createButton, type ButtonOptions, type ButtonState } from "@/core/butto
 export interface UseButtonResult extends ButtonState {
     /** Spread onto the element named by `element`. */
     props: {
-        onClick: (event: { preventDefault(): void; }) => void;
+        onClick: (event: Event | { preventDefault(): void; }) => void;
         "aria-disabled": boolean;
         "aria-busy": boolean;
         "data-loading"?: "";
@@ -76,7 +76,9 @@ export function useButton(options: ButtonOptions = {}): UseButtonResult {
                 // An unavailable link still receives clicks - aria-disabled is advisory -
                 // so the press is refused here rather than relying on the attribute.
                 if (!state.available) { event.preventDefault(); return; }
-                void instance.press();
+                // Passed through: a handler that wants to stop propagation or read the
+                // target had no way to get at it while press() was called bare.
+                void instance.press(event as Event);
             },
             "aria-disabled": !state.available,
             "aria-busy": state.loading,

package/src/react-router/index.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Link } from "react-router";
+import { forwardRef, createElement } from "react";
+import { Button as BaseButton, type ButtonProps } from "@/react/button";
+
+/**
+ * The React Router entry. Same components, wired to its `Link`.
+ *
+ * ```tsx
+ * import { Button } from "@enigmax/primitives/react-router";
+ *
+ * <Button href="/settings">Settings</Button>   // client navigation
+ * ```
+ *
+ * Same deal as the Next entry: the import path is the configuration, and a subpath is only
+ * ever resolved by a project that HAS the router - which is what lets a framework-agnostic
+ * package reference one at all.
+ *
+ * React Router names its target `to`, not `href`, so the prop is translated below. That
+ * translation is the whole reason this is a file rather than a line in the docs.
+ *
+ * React Aria solves the same problem the other way, with a `RouterProvider` taking the
+ * router's `navigate` (react-spectrum.adobe.com/react-aria/routing.html). One mechanism
+ * covers every router and it always renders a real anchor, but it is still a line of setup
+ * in the app. `setLinkComponent` is this package's version of that, for a router with no
+ * entry of its own here.
+ */
+
+/** Bridges the two names, so a call site writes `href` whatever the router underneath is. */
+const RouterLink = forwardRef<HTMLAnchorElement, { href?: string; }>(function RouterLink({ href = "", ...props }, ref) {
+    return createElement(Link, { ...props, to: href, ref });
+});
+
+export const Button = forwardRef<HTMLElement, ButtonProps>(function Button(props, ref) {
+    // Only an href makes it a link; a plain button must not be handed a router component.
+    return createElement(BaseButton, { ...props, as: props.as ?? (props.href ? RouterLink : undefined), ref });
+});
+
+export * from "@/react/index";