@jirawatpyk/aura-tokens 4.6.0 → 4.7.0

package/aura.css

@@ -1,4 +1,4 @@
-/* AURA v4.6.0 — 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

@@ -21,10 +21,13 @@
   justify-content: center;
   gap: var(--aura-space-2);
   cursor: pointer;
-  transition: all var(--aura-duration-fast) cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: background-color, color, border-color, box-shadow, transform, opacity;
+  transition-duration: var(--aura-duration-fast);
+  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; }
 
@@ -871,9 +874,9 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 .aura-progress--warning .aura-progress__bar { background: var(--aura-alert-warning-fg); }
 .aura-progress--danger .aura-progress__bar { background: var(--aura-fg-danger); }
 .aura-progress--neutral .aura-progress__bar { background: var(--aura-fg-secondary); }
-.aura-progress__track.is-indeterminate .aura-progress__bar { width: 35%; animation: aura-progress-slide 1.4s var(--aura-ease) infinite; }
+.aura-progress__track.is-indeterminate .aura-progress__bar { width: 35%; animation: aura-progress-slide var(--aura-duration-pulse) var(--aura-ease) infinite; }
 @keyframes aura-progress-slide { from { left: -35%; } to { left: 100%; } }
-@media (prefers-reduced-motion: reduce) { .aura-progress__track.is-indeterminate .aura-progress__bar { animation-duration: 4.2s; } }
+@media (prefers-reduced-motion: reduce) { .aura-progress__track.is-indeterminate .aura-progress__bar { animation-duration: calc(var(--aura-duration-pulse) * 3); } }
 .aura-progress__hint { margin: 0; font-size: 12px; color: var(--aura-fg-secondary); }
 
 /* ---------- Skeleton ---------- */

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.0",
+  "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/scripts/lint-tokens.js

@@ -1,5 +1,7 @@
 #!/usr/bin/env node
-/* Token lint — fails when source files hard-code colours instead of AURA tokens.
+/* Token lint — fails when source files hard-code colours instead of AURA tokens, or (CSS) motion:
+ * a transition/animation must take its duration and easing from --aura-duration-* / --aura-ease / --aura-spring
+ * (`linear` is allowed: it's for spinners and progress, not a feel).
  * Usage: node scripts/lint-tokens.js [dir]   (default: ./src) */
 const fs = require('fs');
 const path = require('path');
@@ -7,6 +9,8 @@ const dir = path.resolve(process.argv[2] || path.join(process.cwd(), 'src'));
 const ALLOW = /(aura\.css|aura\.components\.css|aura\.bundle\.js|tokens\.json|tailwind\.tokens\.cjs|figma-variables\.csv)$/;
 const EXT = /\.(tsx?|jsx?|css|scss|mdx)$/;
 const COLOUR = /#(?:[0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{3,4})\b|\b(?:rgba?|hsla?)\(\s*\d|\b(?:bg|text|border|ring|fill|stroke)-\[(?:#|rgb|hsl)/gi;
+const MOTION_PROP = /\b(?:transition|animation)(?:-duration|-timing-function|-delay)?\s*:/i;
+const MOTION_RAW = /(?:^|[\s,:(])(?:\d*\.?\d+m?s)\b|cubic-bezier\(|\bease(?:-in-out|-in|-out)?\b/gi;
 const violations = [];
 function scan(d) {
   if (!fs.existsSync(d)) return;
@@ -21,12 +25,16 @@ function scan(d) {
     text.split('\n').forEach((line, i) => {
       const m = line.match(COLOUR);
       if (m) violations.push(`${path.relative(process.cwd(), full)}:${i + 1}  ${m.join(', ')}`);
+      if (/\.s?css$/.test(f) && MOTION_PROP.test(line)) {
+        const raw = line.replace(/var\([^)]*\)/g, '').match(MOTION_RAW);
+        if (raw) violations.push(`${path.relative(process.cwd(), full)}:${i + 1}  motion ${raw.map((s) => s.trim()).join(', ')} — use --aura-duration-* / --aura-ease`);
+      }
     });
   }
 }
 scan(dir);
 if (violations.length) {
-  console.error(`Token lint FAIL: ${violations.length} hard-coded colour(s) — use semantic tokens\n  ` + violations.join('\n  '));
+  console.error(`Token lint FAIL: ${violations.length} hard-coded colour(s) or motion value(s) — use tokens\n  ` + violations.join('\n  '));
   process.exit(1);
 }
-console.log(`Token lint OK — no hard-coded colours in ${path.relative(process.cwd(), dir) || '.'}`);
+console.log(`Token lint OK — no hard-coded colours or motion in ${path.relative(process.cwd(), dir) || '.'}`);

package/tokens.json

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