@protonradio/proton-ui 0.7.21 → 0.8.2

package/dist/index.d.ts

@@ -211,7 +211,7 @@ declare const BRAND: {
  * A customizable button component that can render as either a button or anchor element
  * @interface ButtonProps
  */
-export declare function Button({ variant, href, onPress, type, isDisabled, "data-testid": testId, children, }: ButtonProps): JSX_2.Element;
+export declare function Button({ variant, to, target, onPress, type, isDisabled, "data-testid": testId, children, }: ButtonProps): JSX_2.Element;
 
 export declare function ButtonGroup(props: ButtonGroupProps): JSX_2.Element;
 
@@ -260,10 +260,14 @@ declare interface ButtonProps {
      * @param {boolean} isDisabled
      */
     isDisabled?: boolean;
-    /** The URL that the button should link to. Turns the element into an `a` tag
-     * @param {string} href
+    /** The URL that the button should link to. Turns the element into an `a` tag. If the URL is external, you should pass the entire URL to the `to` prop (e.g. `https://example.com`).
+     * @param {string} to
      */
-    href?: string;
+    to?: string;
+    /** The target attribute for the link. Defaults to `_blank` if the URL is external.
+     * @param {string} target
+     */
+    target?: "_blank" | "_self" | "_parent" | "_top";
     /** Called when the button is pressed (on release, not keydown)
      * @param {(e: PressEvent) => void} onPress
      */

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import A, { useRef as M, useCallback as X, useState as z, useContext as Y, useEffect as L, createContext as Q, useMemo as V, useLayoutEffect as Kc, createElement as bi, isValidElement as Mc, forwardRef as dt, cloneElement as Ic } from "react";
 import Cn, { flushSync as Fc, createPortal as gi } from "react-dom";
-import { e as W, i as Nr, h as yi, a as _c, D as en, t as El } from "./utils-Bc2wVuvD.mjs";
+import { e as W, i as Nr, h as yi, a as _c, D as en, t as El } from "./utils-CJd9wFM9.mjs";
 import { THEMES as Pt, BREAKPOINTS as $i } from "./constants.es.js";
 import { transparentize as Gn, parseToRgba as Rc } from "color2k";
 import { G as ge, S as tn, W as nn, D as rn } from "./colors-Dwh4VIMR.mjs";
@@ -9255,40 +9255,42 @@ const Jh = {
 };
 function Gs({
   variant: t = "primary",
-  href: e,
-  onPress: n,
-  type: r,
-  isDisabled: l,
-  "data-testid": i,
-  children: o
+  to: e,
+  target: n,
+  onPress: r,
+  type: l,
+  isDisabled: i,
+  "data-testid": o,
+  children: a
 }) {
-  const a = e ? "a" : "button", u = a !== "a" ? {} : {
-    target: "_blank",
-    href: e
-  }, s = M(null), { buttonProps: c } = Fn(
+  const u = e ? "a" : "button", s = e && Nr(e), c = u !== "a" ? {} : {
+    target: n || (s ? "_blank" : void 0),
+    href: e,
+    rel: s || n === "_blank" ? "noopener noreferrer" : void 0
+  }, d = M(null), { buttonProps: f } = Fn(
     {
-      onPress: n,
-      elementType: a,
-      type: r || "button",
-      isDisabled: l
+      onPress: r,
+      elementType: u,
+      type: l || "button",
+      isDisabled: i
     },
-    s
+    d
   );
   return /* @__PURE__ */ b.jsxs(
-    a,
+    u,
     {
+      ...f,
       ...c,
-      ...u,
       className: W(
         "proton-Button",
         `proton-Button--${t}`,
-        l && "proton-Button--disabled"
+        i && "proton-Button--disabled"
       ),
-      ref: s,
-      "data-testid": i,
+      ref: d,
+      "data-testid": o,
       children: [
-        o,
-        e && Nr(e) && /* @__PURE__ */ b.jsx("svg", { viewBox: "0 0 512 512", width: "0.8em", height: "0.8em", children: /* @__PURE__ */ b.jsx(
+        a,
+        e && s && /* @__PURE__ */ b.jsx("svg", { viewBox: "0 0 512 512", width: "0.8em", height: "0.8em", children: /* @__PURE__ */ b.jsx(
           "path",
           {
             d: "M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48M336 64h112v112M224 288L440 72",