@enigmax/primitives 0.8.0 → 0.9.0

package/dist/react/index.d.ts

@@ -143,12 +143,8 @@ declare function useButton(options?: ButtonOptions): UseButtonResult;
  */
 interface ButtonProps extends ButtonOptions, Omit<ComponentPropsWithoutRef<"button">, "onClick" | "onChange" | "children" | "type"> {
     /**
-     * What to render. Defaults to `a` when there is an href and `button` otherwise, which
-     * is what you want until a router is involved - then pass its Link and keep the rest.
-     *
-     * ```tsx
-     * <Button as={Link} href="/settings">Settings</Button>
-     * ```
+     * Override what to render. You rarely need it: an href already renders whatever
+     * `setLinkComponent` registered - your router's Link - and a button otherwise.
      */
     as?: ElementType;
     /**
@@ -168,6 +164,11 @@ interface ButtonProps extends ButtonOptions, Omit<ComponentPropsWithoutRef<"butt
 }
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLElement>>;
 
+/** Register the router's link. Pass null to go back to a plain anchor. */
+declare function setLinkComponent(component: ElementType | null): void;
+/** What an href should render as right now. */
+declare function getLinkComponent(): ElementType;
+
 /** An extra button inside the field. The built-ins are the same shape. */
 interface FieldAction {
     /** Stable id. Lands on `data-enigma-input-action`, and replaces a built-in of the same name. */
@@ -278,4 +279,4 @@ interface PasswordStrengthProps extends Omit<ComponentPropsWithoutRef<"div">, "c
  */
 declare function PasswordStrength({ value, report, userInputs, segments, labels, showWarning, classNames, ...props }: PasswordStrengthProps): ReactNode;
 
-export { type BreachChecker, type BreachState, type BreachStatus, Button, ButtonOptions, type ButtonProps, ButtonState, EstimateOptions, type FieldAction, GeneratePasswordOptions, Input, InputOptions, type InputProps, MarqueeOptions, PasswordStrength, type PasswordStrengthProps, PasswordStrengthReport, SearchMatch, SearchOptions, type UseButtonResult, type UseInputResult, type UseMarqueeResult, type UseSearchResult, useButton, useInput, useMarquee, useSearch };
+export { type BreachChecker, type BreachState, type BreachStatus, Button, ButtonOptions, type ButtonProps, ButtonState, EstimateOptions, type FieldAction, GeneratePasswordOptions, Input, InputOptions, type InputProps, MarqueeOptions, PasswordStrength, type PasswordStrengthProps, PasswordStrengthReport, SearchMatch, SearchOptions, type UseButtonResult, type UseInputResult, type UseMarqueeResult, type UseSearchResult, getLinkComponent, setLinkComponent, useButton, useInput, useMarquee, useSearch };

package/dist/react/index.js

@@ -185,6 +185,15 @@ function useButton(options = {}) {
     }
   };
 }
+
+// src/react/link.ts
+var linkComponent = null;
+function setLinkComponent(component) {
+  linkComponent = component;
+}
+function getLinkComponent() {
+  return linkComponent ?? "a";
+}
 var Button = forwardRef(function Button2({
   as,
   children,
@@ -201,7 +210,7 @@ var Button = forwardRef(function Button2({
 }, ref) {
   const button = useButton({ href, disabled, loading, cooldown, shortcut, onPress, onChange });
   const state = button;
-  const Tag = as ?? state.element;
+  const Tag = as ?? (state.element === "a" ? getLinkComponent() : "button");
   const native = Tag === "button" ? { type } : {};
   const label = typeof children === "function" ? children(state) : children;
   return createElement(
@@ -456,4 +465,4 @@ function PasswordStrength({
   );
 }
 
-export { Button, Input, PasswordStrength, useButton, useInput, useMarquee, useSearch };
+export { Button, Input, PasswordStrength, getLinkComponent, setLinkComponent, useButton, useInput, useMarquee, useSearch };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmax/primitives",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "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",

package/registry.json

@@ -301,6 +301,7 @@
         ],
         "react": [
           "Button",
+          "setLinkComponent",
           "useButton"
         ]
       },
@@ -324,6 +325,13 @@
             "@/core/button": "./button"
           }
         },
+        {
+          "path": "src/react/link.ts",
+          "dest": "button/link.ts",
+          "targets": [
+            "react"
+          ]
+        },
         {
           "path": "src/react/button.tsx",
           "dest": "button/index.tsx",
@@ -333,7 +341,8 @@
           ],
           "rewrite": {
             "@/core/button": "./button",
-            "@/react/use-button": "./use-button"
+            "@/react/use-button": "./use-button",
+            "@/react/link": "./link"
           }
         }
       ],

package/src/react/button.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useButton } from "@/react/use-button";
+import { getLinkComponent } from "@/react/link";
 import type { ButtonOptions, ButtonState } from "@/core/button";
 import { createElement, forwardRef, type ComponentPropsWithoutRef, type ElementType, type ReactNode } from "react";
 
@@ -21,12 +22,8 @@ import { createElement, forwardRef, type ComponentPropsWithoutRef, type ElementT
 // reports the button's state - would otherwise clash with the form event of the same name.
 export interface ButtonProps extends ButtonOptions, Omit<ComponentPropsWithoutRef<"button">, "onClick" | "onChange" | "children" | "type"> {
     /**
-     * What to render. Defaults to `a` when there is an href and `button` otherwise, which
-     * is what you want until a router is involved - then pass its Link and keep the rest.
-     *
-     * ```tsx
-     * <Button as={Link} href="/settings">Settings</Button>
-     * ```
+     * Override what to render. You rarely need it: an href already renders whatever
+     * `setLinkComponent` registered - your router's Link - and a button otherwise.
      */
     as?: ElementType;
     /**
@@ -62,9 +59,11 @@ export const Button = forwardRef<HTMLElement, ButtonProps>(function Button({
     const button = useButton({ href, disabled, loading, cooldown, shortcut, onPress, onChange });
     const state: ButtonState = button;
 
-    // Reported, not chosen: an href makes it an anchor, and a package that cannot import
-    // next/link must not be the thing deciding. `as` overrides both.
-    const Tag: ElementType = as ?? state.element;
+    // An href renders the registered link - next/link, react-router's, whatever was passed
+    // to setLinkComponent - and a plain <a> when nothing was. The package cannot import a
+    // router itself, so registering one is what turns every href into a client navigation
+    // without a word at the call site.
+    const Tag: ElementType = as ?? (state.element === "a" ? getLinkComponent() : "button");
 
     // `type="button"` is the default on purpose. A bare <button> inside a form submits it,
     // so an action button that forgot it posts the form instead of doing its job.

package/src/react/index.ts

@@ -8,6 +8,7 @@ export { type InputOptions, type InputAction, type InputIcon } from "@/core/inpu
 export { type SearchOptions, type SearchMatch, type FuseConstructor } from "@/core/search";
 export { useButton, type UseButtonResult } from "@/react/use-button";
 export { Button, type ButtonProps } from "@/react/button";
+export { setLinkComponent, getLinkComponent } from "@/react/link";
 export { type ButtonOptions, type ButtonState } from "@/core/button";
 export {
     Input,

package/src/react/link.ts

@@ -0,0 +1,45 @@
+"use client";
+
+import type { ElementType } from "react";
+
+/**
+ * The component every `href` in this package renders through.
+ *
+ * The package cannot `import Link from "next/link"`. It is framework-agnostic and Next is
+ * not a dependency, so that import would fail to resolve for every consumer who is not on
+ * Next - a hard build error in Vite, Astro, Remix and plain React.
+ *
+ * So it is registered instead, ONCE, and after that an href is a router link everywhere:
+ *
+ * ```tsx
+ * // app/providers.tsx, or wherever your app starts
+ * import Link from "next/link";
+ * import { setLinkComponent } from "@enigmax/primitives/react";
+ *
+ * setLinkComponent(Link);
+ * ```
+ *
+ * ```tsx
+ * // and from then on, every call site
+ * <Button href="/settings">Settings</Button>
+ * ```
+ *
+ * Without it an href renders a plain `<a>`, which is correct everywhere and merely means a
+ * full page load under a router. Any router works the same way - react-router's `Link`,
+ * TanStack Router's, Astro has none to register.
+ *
+ * A module-level value rather than a context: it is one component reference for the whole
+ * app, identical on every request, so threading a provider through the tree would buy
+ * nothing and cost every consumer a wrapper.
+ */
+let linkComponent: ElementType | null = null;
+
+/** Register the router's link. Pass null to go back to a plain anchor. */
+export function setLinkComponent(component: ElementType | null): void {
+    linkComponent = component;
+}
+
+/** What an href should render as right now. */
+export function getLinkComponent(): ElementType {
+    return linkComponent ?? "a";
+}