@jirawatpyk/aura-tokens 4.6.1 → 4.7.0

package/aura.css

@@ -1,4 +1,4 @@
-/* AURA v4.6.1 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
+/* AURA v4.7.0 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
 /* Fonts: load aura-fonts.css (or the <link> tags in README) separately, so a blocked Google Fonts never breaks this file. */
 
 :root, [data-theme="light"] {

package/components/aura.bundle.js

@@ -240,28 +240,65 @@ window.Aura = (() => {
 
   // src/Button.tsx
   var React3 = __toESM(require_react(), 1);
-  var Button = React3.forwardRef(function Button2(props, ref) {
+  function ButtonLink(props, ref) {
     const variant = props.variant || "primary";
-    const loading = !!props.loading;
-    const rest = omit(props, ["variant", "className", "children", "type", "icon", "iconRight", "loading", "onClick"]);
+    const disabled = !!props.disabled;
+    const rest = omit(props, [
+      "variant",
+      "className",
+      "children",
+      "icon",
+      "iconRight",
+      "disabled",
+      "linkComponent",
+      "href"
+    ]);
+    const Tag3 = !disabled && props.linkComponent ? props.linkComponent : "a";
     return /* @__PURE__ */ React3.createElement(
-      "button",
+      Tag3,
       {
         ...rest,
         ref,
-        type: props.type || "button",
-        className: cx("aura-btn", "aura-btn--" + variant, loading && "is-loading", props.className),
-        "aria-busy": loading || void 0,
-        "aria-disabled": loading || void 0,
-        onClick: loading ? function(e) {
-          e.preventDefault();
-        } : props.onClick
+        href: disabled ? void 0 : props.href,
+        role: disabled ? "link" : void 0,
+        "aria-disabled": disabled || void 0,
+        tabIndex: disabled ? -1 : props.tabIndex,
+        className: cx("aura-btn", "aura-btn--" + variant, props.className),
+        onClick: disabled ? void 0 : props.onClick
       },
-      loading ? /* @__PURE__ */ React3.createElement(Icon, { name: "loader-circle", className: "aura-spin" }) : props.icon ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon }) : null,
+      props.icon ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon }) : null,
       props.children,
-      props.iconRight && !loading ? /* @__PURE__ */ React3.createElement(Icon, { name: props.iconRight }) : null
+      props.iconRight ? /* @__PURE__ */ React3.createElement(Icon, { name: props.iconRight }) : null
     );
-  });
+  }
+  var Button = React3.forwardRef(
+    function Button2(all, ref) {
+      if (typeof all.href === "string") {
+        return ButtonLink(all, ref);
+      }
+      const props = all;
+      const variant = props.variant || "primary";
+      const loading = !!props.loading;
+      const rest = omit(props, ["variant", "className", "children", "type", "icon", "iconRight", "loading", "onClick"]);
+      return /* @__PURE__ */ React3.createElement(
+        "button",
+        {
+          ...rest,
+          ref,
+          type: props.type || "button",
+          className: cx("aura-btn", "aura-btn--" + variant, loading && "is-loading", props.className),
+          "aria-busy": loading || void 0,
+          "aria-disabled": loading || void 0,
+          onClick: loading ? function(e) {
+            e.preventDefault();
+          } : props.onClick
+        },
+        loading ? /* @__PURE__ */ React3.createElement(Icon, { name: "loader-circle", className: "aura-spin" }) : props.icon ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon }) : null,
+        props.children,
+        props.iconRight && !loading ? /* @__PURE__ */ React3.createElement(Icon, { name: props.iconRight }) : null
+      );
+    }
+  );
 
   // src/IconButton.tsx
   var React4 = __toESM(require_react(), 1);

package/components/aura.components.css

@@ -26,7 +26,8 @@
   transition-timing-function: var(--aura-ease);
 }
 .aura-btn:active { transform: scale(0.98); }
-.aura-btn:disabled { opacity: var(--aura-disabled-opacity); pointer-events: none; }
+.aura-btn:disabled, a.aura-btn[aria-disabled='true'] { opacity: var(--aura-disabled-opacity); pointer-events: none; }
+a.aura-btn { text-decoration: none; }
 .aura-btn.is-loading { cursor: progress; }
 .aura-btn.is-loading:active { transform: none; }
 

package/components/index.d.ts

@@ -13,6 +13,22 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
 	/** Shows a spinner in place of the leading icon, sets aria-busy and swallows clicks. Keeps the label and width. */
 	loading?: boolean;
 }
+/** A link that looks like a Button: give `Button` an `href` and it renders an `<a>` (navigation, not actions). */
+export interface ButtonLinkProps extends Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, "children"> {
+	/** Where the link goes. With `href`, Button renders an `<a>` and its ref is the `<a>`. */
+	href: string;
+	/** Visual variant. Default `primary`. */
+	variant?: "primary" | "secondary" | "creative";
+	/** Label text — say where it goes ("View Orders"), not "Click here". */
+	children: React$1.ReactNode;
+	icon?: IconName;
+	/** Trailing icon, e.g. `arrow-right`, or `external-link` with `target="_blank"`. */
+	iconRight?: IconName;
+	/** Looks unavailable and can't be followed: no href, `aria-disabled`, out of the Tab order. */
+	disabled?: boolean;
+	/** A router's link to render instead of `<a>`, e.g. `Link` from `next/link` (client-side navigation). It gets `href`, `className`, the children and the ref. */
+	linkComponent?: React$1.ElementType;
+}
 export interface DataTableColumn {
 	/** Key into each row object. */
 	key: string;
@@ -779,8 +795,15 @@ export declare const ICONS: Record<IconName, IconShape[]>;
 export declare const Icon: React$1.ForwardRefExoticComponent<IconProps & React$1.RefAttributes<SVGSVGElement>>;
 /** Every icon name the bundle carries. */
 export declare const iconNames: IconName[];
-/** AURA pill button. Enterprise (`primary`, `secondary`) for product UI; `creative` for marketing moments only. */
-export declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+/** Button with an `href` is a link; without, a button. Two call signatures so each gets the right props and ref. */
+export interface ButtonComponent {
+	(props: ButtonLinkProps & React$1.RefAttributes<HTMLAnchorElement>): React$1.ReactElement | null;
+	(props: ButtonProps & React$1.RefAttributes<HTMLButtonElement>): React$1.ReactElement | null;
+	displayName?: string;
+}
+/** AURA pill button. Enterprise (`primary`, `secondary`) for product UI; `creative` for marketing moments only.
+ * With `href` it renders a link that looks the same (`<a>`, or your router's link via `linkComponent`). */
+export declare const Button: ButtonComponent;
 export declare const IconButton: React$1.ForwardRefExoticComponent<IconButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 /** Popover list anchored to an element, rendered in a portal. */
 export declare const Menu: React$1.ForwardRefExoticComponent<MenuProps & React$1.RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-tokens",
-  "version": "4.6.1",
+  "version": "4.7.0",
   "description": "AURA Design System — tokens (CSS variables, Tailwind preset, Figma variables), theme contrast checks and token lint.",
   "main": "tailwind.tokens.cjs",
   "types": "components/index.d.ts",

package/tokens.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.6.1",
+  "version": "4.7.0",
   "meta": {
     "name": "AURA Design System",
     "tier": "3-tier",