@jirawatpyk/aura-react 4.6.0 → 4.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +4 -0
  2. package/dist/aura.bundle.js +51 -14
  3. package/dist/cjs/index.cjs +51 -14
  4. package/dist/esm/Button.js +51 -14
  5. package/dist/index.d.ts +25 -2
  6. package/dist/styles.css +7 -4
  7. package/package.json +3 -2
package/README.md CHANGED
@@ -81,6 +81,10 @@ const { scheme, resolved, setScheme } = useColorScheme();
81
81
 
82
82
  Tailwind's `dark:` variant keeps working: the `.dark` class on `<html>` is kept in step.
83
83
 
84
+ ## Links that look like buttons
85
+
86
+ `<Button href="/orders">View Orders</Button>` renders an `<a>` with the button's look — use it for navigation, keep actions as buttons. With Next.js: `<Button href="/orders" linkComponent={Link}>` (client-side navigation). `disabled` works on links too.
87
+
84
88
  ## Refs and forms
85
89
 
86
90
  Every component forwards `ref` to its real element — fields to the `<input>`/`<select>`/`<textarea>`, buttons to the `<button>`, layouts to their root. react-hook-form: `register` for TextField/Textarea/Select, `Controller` (pass `field.ref`) for Combobox, DatePicker, TimePicker, FileUpload, Checkbox. See `examples/settings`.
package/dist/aura.bundle.js CHANGED
@@ -240,28 +240,65 @@ window.Aura = (() => {
240
240
 
241
241
  // src/Button.tsx
242
242
  var React3 = __toESM(require_react(), 1);
243
- var Button = React3.forwardRef(function Button2(props, ref) {
243
+ function ButtonLink(props, ref) {
244
244
  const variant = props.variant || "primary";
245
- const loading = !!props.loading;
246
- const rest = omit(props, ["variant", "className", "children", "type", "icon", "iconRight", "loading", "onClick"]);
245
+ const disabled = !!props.disabled;
246
+ const rest = omit(props, [
247
+ "variant",
248
+ "className",
249
+ "children",
250
+ "icon",
251
+ "iconRight",
252
+ "disabled",
253
+ "linkComponent",
254
+ "href"
255
+ ]);
256
+ const Tag3 = !disabled && props.linkComponent ? props.linkComponent : "a";
247
257
  return /* @__PURE__ */ React3.createElement(
248
- "button",
258
+ Tag3,
249
259
  {
250
260
  ...rest,
251
261
  ref,
252
- type: props.type || "button",
253
- className: cx("aura-btn", "aura-btn--" + variant, loading && "is-loading", props.className),
254
- "aria-busy": loading || void 0,
255
- "aria-disabled": loading || void 0,
256
- onClick: loading ? function(e) {
257
- e.preventDefault();
258
- } : props.onClick
262
+ href: disabled ? void 0 : props.href,
263
+ role: disabled ? "link" : void 0,
264
+ "aria-disabled": disabled || void 0,
265
+ tabIndex: disabled ? -1 : props.tabIndex,
266
+ className: cx("aura-btn", "aura-btn--" + variant, props.className),
267
+ onClick: disabled ? void 0 : props.onClick
259
268
  },
260
- loading ? /* @__PURE__ */ React3.createElement(Icon, { name: "loader-circle", className: "aura-spin" }) : props.icon ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon }) : null,
269
+ props.icon ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon }) : null,
261
270
  props.children,
262
- props.iconRight && !loading ? /* @__PURE__ */ React3.createElement(Icon, { name: props.iconRight }) : null
271
+ props.iconRight ? /* @__PURE__ */ React3.createElement(Icon, { name: props.iconRight }) : null
263
272
  );
264
- });
273
+ }
274
+ var Button = React3.forwardRef(
275
+ function Button2(all, ref) {
276
+ if (typeof all.href === "string") {
277
+ return ButtonLink(all, ref);
278
+ }
279
+ const props = all;
280
+ const variant = props.variant || "primary";
281
+ const loading = !!props.loading;
282
+ const rest = omit(props, ["variant", "className", "children", "type", "icon", "iconRight", "loading", "onClick"]);
283
+ return /* @__PURE__ */ React3.createElement(
284
+ "button",
285
+ {
286
+ ...rest,
287
+ ref,
288
+ type: props.type || "button",
289
+ className: cx("aura-btn", "aura-btn--" + variant, loading && "is-loading", props.className),
290
+ "aria-busy": loading || void 0,
291
+ "aria-disabled": loading || void 0,
292
+ onClick: loading ? function(e) {
293
+ e.preventDefault();
294
+ } : props.onClick
295
+ },
296
+ loading ? /* @__PURE__ */ React3.createElement(Icon, { name: "loader-circle", className: "aura-spin" }) : props.icon ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon }) : null,
297
+ props.children,
298
+ props.iconRight && !loading ? /* @__PURE__ */ React3.createElement(Icon, { name: props.iconRight }) : null
299
+ );
300
+ }
301
+ );
265
302
 
266
303
  // src/IconButton.tsx
267
304
  var React4 = __toESM(require_react(), 1);
package/dist/cjs/index.cjs CHANGED
@@ -222,28 +222,65 @@ var iconNames = Object.keys(ICONS);
222
222
 
223
223
  // src/Button.tsx
224
224
  var React3 = __toESM(require("react"), 1);
225
- var Button = React3.forwardRef(function Button2(props, ref) {
225
+ function ButtonLink(props, ref) {
226
226
  const variant = props.variant || "primary";
227
- const loading = !!props.loading;
228
- const rest = omit(props, ["variant", "className", "children", "type", "icon", "iconRight", "loading", "onClick"]);
227
+ const disabled = !!props.disabled;
228
+ const rest = omit(props, [
229
+ "variant",
230
+ "className",
231
+ "children",
232
+ "icon",
233
+ "iconRight",
234
+ "disabled",
235
+ "linkComponent",
236
+ "href"
237
+ ]);
238
+ const Tag3 = !disabled && props.linkComponent ? props.linkComponent : "a";
229
239
  return /* @__PURE__ */ React3.createElement(
230
- "button",
240
+ Tag3,
231
241
  {
232
242
  ...rest,
233
243
  ref,
234
- type: props.type || "button",
235
- className: cx("aura-btn", "aura-btn--" + variant, loading && "is-loading", props.className),
236
- "aria-busy": loading || void 0,
237
- "aria-disabled": loading || void 0,
238
- onClick: loading ? function(e) {
239
- e.preventDefault();
240
- } : props.onClick
244
+ href: disabled ? void 0 : props.href,
245
+ role: disabled ? "link" : void 0,
246
+ "aria-disabled": disabled || void 0,
247
+ tabIndex: disabled ? -1 : props.tabIndex,
248
+ className: cx("aura-btn", "aura-btn--" + variant, props.className),
249
+ onClick: disabled ? void 0 : props.onClick
241
250
  },
242
- loading ? /* @__PURE__ */ React3.createElement(Icon, { name: "loader-circle", className: "aura-spin" }) : props.icon ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon }) : null,
251
+ props.icon ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon }) : null,
243
252
  props.children,
244
- props.iconRight && !loading ? /* @__PURE__ */ React3.createElement(Icon, { name: props.iconRight }) : null
253
+ props.iconRight ? /* @__PURE__ */ React3.createElement(Icon, { name: props.iconRight }) : null
245
254
  );
246
- });
255
+ }
256
+ var Button = React3.forwardRef(
257
+ function Button2(all, ref) {
258
+ if (typeof all.href === "string") {
259
+ return ButtonLink(all, ref);
260
+ }
261
+ const props = all;
262
+ const variant = props.variant || "primary";
263
+ const loading = !!props.loading;
264
+ const rest = omit(props, ["variant", "className", "children", "type", "icon", "iconRight", "loading", "onClick"]);
265
+ return /* @__PURE__ */ React3.createElement(
266
+ "button",
267
+ {
268
+ ...rest,
269
+ ref,
270
+ type: props.type || "button",
271
+ className: cx("aura-btn", "aura-btn--" + variant, loading && "is-loading", props.className),
272
+ "aria-busy": loading || void 0,
273
+ "aria-disabled": loading || void 0,
274
+ onClick: loading ? function(e) {
275
+ e.preventDefault();
276
+ } : props.onClick
277
+ },
278
+ loading ? /* @__PURE__ */ React3.createElement(Icon, { name: "loader-circle", className: "aura-spin" }) : props.icon ? /* @__PURE__ */ React3.createElement(Icon, { name: props.icon }) : null,
279
+ props.children,
280
+ props.iconRight && !loading ? /* @__PURE__ */ React3.createElement(Icon, { name: props.iconRight }) : null
281
+ );
282
+ }
283
+ );
247
284
 
248
285
  // src/IconButton.tsx
249
286
  var React4 = __toESM(require("react"), 1);
package/dist/esm/Button.js CHANGED
@@ -2,28 +2,65 @@
2
2
  import * as React from "react";
3
3
  import { cx, omit } from "./internal.js";
4
4
  import { Icon } from "./Icon.js";
5
- const Button = React.forwardRef(function Button2(props, ref) {
5
+ function ButtonLink(props, ref) {
6
6
  const variant = props.variant || "primary";
7
- const loading = !!props.loading;
8
- const rest = omit(props, ["variant", "className", "children", "type", "icon", "iconRight", "loading", "onClick"]);
7
+ const disabled = !!props.disabled;
8
+ const rest = omit(props, [
9
+ "variant",
10
+ "className",
11
+ "children",
12
+ "icon",
13
+ "iconRight",
14
+ "disabled",
15
+ "linkComponent",
16
+ "href"
17
+ ]);
18
+ const Tag = !disabled && props.linkComponent ? props.linkComponent : "a";
9
19
  return /* @__PURE__ */ React.createElement(
10
- "button",
20
+ Tag,
11
21
  {
12
22
  ...rest,
13
23
  ref,
14
- type: props.type || "button",
15
- className: cx("aura-btn", "aura-btn--" + variant, loading && "is-loading", props.className),
16
- "aria-busy": loading || void 0,
17
- "aria-disabled": loading || void 0,
18
- onClick: loading ? function(e) {
19
- e.preventDefault();
20
- } : props.onClick
24
+ href: disabled ? void 0 : props.href,
25
+ role: disabled ? "link" : void 0,
26
+ "aria-disabled": disabled || void 0,
27
+ tabIndex: disabled ? -1 : props.tabIndex,
28
+ className: cx("aura-btn", "aura-btn--" + variant, props.className),
29
+ onClick: disabled ? void 0 : props.onClick
21
30
  },
22
- loading ? /* @__PURE__ */ React.createElement(Icon, { name: "loader-circle", className: "aura-spin" }) : props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon }) : null,
31
+ props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon }) : null,
23
32
  props.children,
24
- props.iconRight && !loading ? /* @__PURE__ */ React.createElement(Icon, { name: props.iconRight }) : null
33
+ props.iconRight ? /* @__PURE__ */ React.createElement(Icon, { name: props.iconRight }) : null
25
34
  );
26
- });
35
+ }
36
+ const Button = React.forwardRef(
37
+ function Button2(all, ref) {
38
+ if (typeof all.href === "string") {
39
+ return ButtonLink(all, ref);
40
+ }
41
+ const props = all;
42
+ const variant = props.variant || "primary";
43
+ const loading = !!props.loading;
44
+ const rest = omit(props, ["variant", "className", "children", "type", "icon", "iconRight", "loading", "onClick"]);
45
+ return /* @__PURE__ */ React.createElement(
46
+ "button",
47
+ {
48
+ ...rest,
49
+ ref,
50
+ type: props.type || "button",
51
+ className: cx("aura-btn", "aura-btn--" + variant, loading && "is-loading", props.className),
52
+ "aria-busy": loading || void 0,
53
+ "aria-disabled": loading || void 0,
54
+ onClick: loading ? function(e) {
55
+ e.preventDefault();
56
+ } : props.onClick
57
+ },
58
+ loading ? /* @__PURE__ */ React.createElement(Icon, { name: "loader-circle", className: "aura-spin" }) : props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon }) : null,
59
+ props.children,
60
+ props.iconRight && !loading ? /* @__PURE__ */ React.createElement(Icon, { name: props.iconRight }) : null
61
+ );
62
+ }
63
+ );
27
64
  export {
28
65
  Button
29
66
  };
package/dist/index.d.ts CHANGED
@@ -13,6 +13,22 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
13
13
  /** Shows a spinner in place of the leading icon, sets aria-busy and swallows clicks. Keeps the label and width. */
14
14
  loading?: boolean;
15
15
  }
16
+ /** A link that looks like a Button: give `Button` an `href` and it renders an `<a>` (navigation, not actions). */
17
+ export interface ButtonLinkProps extends Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, "children"> {
18
+ /** Where the link goes. With `href`, Button renders an `<a>` and its ref is the `<a>`. */
19
+ href: string;
20
+ /** Visual variant. Default `primary`. */
21
+ variant?: "primary" | "secondary" | "creative";
22
+ /** Label text — say where it goes ("View Orders"), not "Click here". */
23
+ children: React$1.ReactNode;
24
+ icon?: IconName;
25
+ /** Trailing icon, e.g. `arrow-right`, or `external-link` with `target="_blank"`. */
26
+ iconRight?: IconName;
27
+ /** Looks unavailable and can't be followed: no href, `aria-disabled`, out of the Tab order. */
28
+ disabled?: boolean;
29
+ /** 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. */
30
+ linkComponent?: React$1.ElementType;
31
+ }
16
32
  export interface DataTableColumn {
17
33
  /** Key into each row object. */
18
34
  key: string;
@@ -779,8 +795,15 @@ export declare const ICONS: Record<IconName, IconShape[]>;
779
795
  export declare const Icon: React$1.ForwardRefExoticComponent<IconProps & React$1.RefAttributes<SVGSVGElement>>;
780
796
  /** Every icon name the bundle carries. */
781
797
  export declare const iconNames: IconName[];
782
- /** AURA pill button. Enterprise (`primary`, `secondary`) for product UI; `creative` for marketing moments only. */
783
- export declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
798
+ /** Button with an `href` is a link; without, a button. Two call signatures so each gets the right props and ref. */
799
+ export interface ButtonComponent {
800
+ (props: ButtonLinkProps & React$1.RefAttributes<HTMLAnchorElement>): React$1.ReactElement | null;
801
+ (props: ButtonProps & React$1.RefAttributes<HTMLButtonElement>): React$1.ReactElement | null;
802
+ displayName?: string;
803
+ }
804
+ /** AURA pill button. Enterprise (`primary`, `secondary`) for product UI; `creative` for marketing moments only.
805
+ * With `href` it renders a link that looks the same (`<a>`, or your router's link via `linkComponent`). */
806
+ export declare const Button: ButtonComponent;
784
807
  export declare const IconButton: React$1.ForwardRefExoticComponent<IconButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
785
808
  /** Popover list anchored to an element, rendered in a portal. */
786
809
  export declare const Menu: React$1.ForwardRefExoticComponent<MenuProps & React$1.RefAttributes<HTMLDivElement>>;
package/dist/styles.css CHANGED
@@ -21,10 +21,13 @@
21
21
  justify-content: center;
22
22
  gap: var(--aura-space-2);
23
23
  cursor: pointer;
24
- transition: all var(--aura-duration-fast) cubic-bezier(0.4, 0, 0.2, 1);
24
+ transition-property: background-color, color, border-color, box-shadow, transform, opacity;
25
+ transition-duration: var(--aura-duration-fast);
26
+ transition-timing-function: var(--aura-ease);
25
27
  }
26
28
  .aura-btn:active { transform: scale(0.98); }
27
- .aura-btn:disabled { opacity: var(--aura-disabled-opacity); pointer-events: none; }
29
+ .aura-btn:disabled, a.aura-btn[aria-disabled='true'] { opacity: var(--aura-disabled-opacity); pointer-events: none; }
30
+ a.aura-btn { text-decoration: none; }
28
31
  .aura-btn.is-loading { cursor: progress; }
29
32
  .aura-btn.is-loading:active { transform: none; }
30
33
 
@@ -871,9 +874,9 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
871
874
  .aura-progress--warning .aura-progress__bar { background: var(--aura-alert-warning-fg); }
872
875
  .aura-progress--danger .aura-progress__bar { background: var(--aura-fg-danger); }
873
876
  .aura-progress--neutral .aura-progress__bar { background: var(--aura-fg-secondary); }
874
- .aura-progress__track.is-indeterminate .aura-progress__bar { width: 35%; animation: aura-progress-slide 1.4s var(--aura-ease) infinite; }
877
+ .aura-progress__track.is-indeterminate .aura-progress__bar { width: 35%; animation: aura-progress-slide var(--aura-duration-pulse) var(--aura-ease) infinite; }
875
878
  @keyframes aura-progress-slide { from { left: -35%; } to { left: 100%; } }
876
- @media (prefers-reduced-motion: reduce) { .aura-progress__track.is-indeterminate .aura-progress__bar { animation-duration: 4.2s; } }
879
+ @media (prefers-reduced-motion: reduce) { .aura-progress__track.is-indeterminate .aura-progress__bar { animation-duration: calc(var(--aura-duration-pulse) * 3); } }
877
880
  .aura-progress__hint { margin: 0; font-size: 12px; color: var(--aura-fg-secondary); }
878
881
 
879
882
  /* ---------- Skeleton ---------- */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jirawatpyk/aura-react",
3
- "version": "4.6.0",
3
+ "version": "4.7.0",
4
4
  "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -38,7 +38,8 @@
38
38
  "pretest:ssr": "node scripts/build.mjs",
39
39
  "prethemes": "node scripts/build.mjs",
40
40
  "test:hydrate": "node scripts/hydrate-test.mjs",
41
- "size": "node scripts/size-check.mjs"
41
+ "size": "node scripts/size-check.mjs",
42
+ "preexamples": "node scripts/build.mjs"
42
43
  },
43
44
  "peerDependencies": {
44
45
  "react": ">=18",