@jirawatpyk/aura-react 4.7.2 → 4.8.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 (45) hide show
  1. package/README.md +1 -1
  2. package/dist/aura.bundle.js +451 -379
  3. package/dist/cjs/index.cjs +451 -379
  4. package/dist/esm/Accordion.js +66 -0
  5. package/dist/esm/Alert.js +31 -0
  6. package/dist/esm/AppShell.js +55 -0
  7. package/dist/esm/Avatar.js +39 -0
  8. package/dist/esm/Badge.js +26 -0
  9. package/dist/esm/Breadcrumb.js +16 -0
  10. package/dist/esm/Card.js +26 -0
  11. package/dist/esm/Combobox.js +1 -1
  12. package/dist/esm/Container.js +18 -0
  13. package/dist/esm/DatePicker.js +1 -1
  14. package/dist/esm/Dialog.js +1 -1
  15. package/dist/esm/EmptyState.js +22 -0
  16. package/dist/esm/Field.js +46 -0
  17. package/dist/esm/FileUpload.js +1 -1
  18. package/dist/esm/Grid.js +21 -0
  19. package/dist/esm/Pagination.js +94 -0
  20. package/dist/esm/Popover.js +131 -0
  21. package/dist/esm/Progress.js +40 -0
  22. package/dist/esm/RadioGroup.js +46 -0
  23. package/dist/esm/Select.js +48 -0
  24. package/dist/esm/SideNav.js +36 -0
  25. package/dist/esm/Skeleton.js +29 -0
  26. package/dist/esm/Stack.js +20 -0
  27. package/dist/esm/Switch.js +30 -0
  28. package/dist/esm/Tabs.js +89 -0
  29. package/dist/esm/Tag.js +42 -0
  30. package/dist/esm/TextField.js +39 -0
  31. package/dist/esm/Textarea.js +38 -0
  32. package/dist/esm/TimePicker.js +1 -1
  33. package/dist/esm/Toaster.js +124 -0
  34. package/dist/esm/Tooltip.js +80 -0
  35. package/dist/esm/index.js +27 -5
  36. package/dist/esm/internal.js +5 -0
  37. package/dist/esm/responsive.js +50 -0
  38. package/dist/index.d.ts +8 -8
  39. package/package.json +1 -1
  40. package/dist/esm/extra.js +0 -412
  41. package/dist/esm/feedback.js +0 -220
  42. package/dist/esm/forms.js +0 -212
  43. package/dist/esm/layout.js +0 -183
  44. package/dist/esm/layout2.js +0 -138
  45. /package/dist/esm/{overlay.js → useModal.js} +0 -0
@@ -1,220 +0,0 @@
1
- 'use client';
2
- import * as React from "react";
3
- import { useStrings } from "./locale.js";
4
- import { createPortal } from "react-dom";
5
- import { cx, uid, useMounted, useIsoLayoutEffect, useMergedRef } from "./internal.js";
6
- import { Icon } from "./Icon.js";
7
- import { IconButton } from "./IconButton.js";
8
- const ALERT_ICON = {
9
- info: "info",
10
- success: "circle-check",
11
- warning: "triangle-alert",
12
- danger: "circle-alert"
13
- };
14
- const Alert = React.forwardRef(function Alert2(props, ref) {
15
- const t = useStrings();
16
- const tone = props.tone || "info";
17
- return /* @__PURE__ */ React.createElement(
18
- "div",
19
- {
20
- ref,
21
- className: cx("aura-alert", "aura-alert--" + tone, props.className),
22
- role: tone === "danger" || tone === "warning" ? "alert" : "status"
23
- },
24
- /* @__PURE__ */ React.createElement(Icon, { name: ALERT_ICON[tone], className: "aura-alert__icon" }),
25
- /* @__PURE__ */ React.createElement("div", { className: "aura-alert__body" }, props.title ? /* @__PURE__ */ React.createElement("p", { className: "aura-alert__title" }, props.title) : null, props.children ? /* @__PURE__ */ React.createElement("div", { className: "aura-alert__text" }, props.children) : null, props.action ? /* @__PURE__ */ React.createElement("div", { className: "aura-alert__action" }, props.action) : null),
26
- props.onDismiss ? /* @__PURE__ */ React.createElement(IconButton, { icon: "x", label: t.dismiss, className: "aura-alert__close", onClick: props.onDismiss }) : null
27
- );
28
- });
29
- const toastState = {
30
- list: [],
31
- subs: [],
32
- n: 0
33
- };
34
- function emitToasts() {
35
- toastState.subs.forEach(function(f) {
36
- f(toastState.list.slice());
37
- });
38
- }
39
- function toast(opts) {
40
- if (typeof opts === "string") opts = { title: opts };
41
- const id = opts.id || "t" + ++toastState.n;
42
- toastState.list = toastState.list.filter(function(t) {
43
- return t.id !== id;
44
- }).concat([Object.assign({ tone: "info" }, opts, { id })]).slice(-3);
45
- emitToasts();
46
- return id;
47
- }
48
- toast.dismiss = function(id) {
49
- toastState.list = toastState.list.filter(function(t) {
50
- return t.id !== id;
51
- });
52
- emitToasts();
53
- };
54
- function ToastItem(props) {
55
- const str = useStrings();
56
- const t = props.toast, timer = React.useRef(null), left = React.useRef(t.duration || 5e3), since = React.useRef(0);
57
- function start() {
58
- if (left.current === Infinity) return;
59
- since.current = Date.now();
60
- timer.current = setTimeout(function() {
61
- toast.dismiss(t.id);
62
- }, left.current);
63
- }
64
- function pause() {
65
- if (timer.current) {
66
- clearTimeout(timer.current);
67
- timer.current = null;
68
- left.current -= Date.now() - since.current;
69
- }
70
- }
71
- React.useEffect(function() {
72
- start();
73
- return pause;
74
- }, []);
75
- return /* @__PURE__ */ React.createElement(
76
- "div",
77
- {
78
- className: cx("aura-toast", "aura-toast--" + t.tone),
79
- role: t.tone === "danger" ? "alert" : "status",
80
- onMouseEnter: pause,
81
- onMouseLeave: start,
82
- onFocus: pause,
83
- onBlur: start
84
- },
85
- /* @__PURE__ */ React.createElement(Icon, { name: ALERT_ICON[t.tone] || "info", className: "aura-toast__icon" }),
86
- /* @__PURE__ */ React.createElement("div", { className: "aura-toast__body" }, /* @__PURE__ */ React.createElement("p", { className: "aura-toast__title" }, t.title), t.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-toast__text" }, t.description) : null),
87
- t.action ? /* @__PURE__ */ React.createElement(
88
- "button",
89
- {
90
- type: "button",
91
- className: "aura-toast__action",
92
- onClick: function() {
93
- t.action.onClick && t.action.onClick();
94
- toast.dismiss(t.id);
95
- }
96
- },
97
- t.action.label
98
- ) : null,
99
- /* @__PURE__ */ React.createElement(
100
- IconButton,
101
- {
102
- icon: "x",
103
- label: str.dismissToast,
104
- className: "aura-toast__close",
105
- onClick: function() {
106
- toast.dismiss(t.id);
107
- }
108
- }
109
- )
110
- );
111
- }
112
- function Toaster(props) {
113
- const t = useStrings();
114
- const mounted = useMounted();
115
- const s = React.useState(toastState.list);
116
- React.useEffect(function() {
117
- toastState.subs.push(s[1]);
118
- return function() {
119
- toastState.subs = toastState.subs.filter(function(f) {
120
- return f !== s[1];
121
- });
122
- };
123
- }, []);
124
- if (!mounted) return null;
125
- return createPortal(
126
- /* @__PURE__ */ React.createElement(
127
- "div",
128
- {
129
- className: cx("aura-toaster", props && props.position === "top" && "is-top"),
130
- role: "region",
131
- "aria-live": "polite",
132
- "aria-label": t.notifications
133
- },
134
- s[0].map(function(t2) {
135
- return /* @__PURE__ */ React.createElement(ToastItem, { key: t2.id, toast: t2 });
136
- })
137
- ),
138
- document.body
139
- );
140
- }
141
- const Tooltip = React.forwardRef(function Tooltip2(props, ref) {
142
- const id = uid(), st = React.useState(false), open = props.open !== void 0 ? props.open : st[0], set = st[1];
143
- const anchor = React.useRef(null), anchorMerged = useMergedRef(ref, anchor), tip = React.useRef(null), timer = React.useRef(void 0);
144
- const pos = React.useState(null);
145
- function show(now) {
146
- clearTimeout(timer.current);
147
- timer.current = setTimeout(
148
- function() {
149
- set(true);
150
- },
151
- now ? 0 : props.delay == null ? 400 : props.delay
152
- );
153
- }
154
- function hide() {
155
- clearTimeout(timer.current);
156
- set(false);
157
- }
158
- useIsoLayoutEffect(
159
- function() {
160
- if (!open || !anchor.current || !tip.current) return;
161
- const r = anchor.current.getBoundingClientRect(), t = tip.current.getBoundingClientRect();
162
- let side = props.side || "top", top = side === "top" ? r.top - t.height - 8 : r.bottom + 8;
163
- if (side === "top" && top < 8) top = r.bottom + 8;
164
- const left = Math.max(8, Math.min(r.left + r.width / 2 - t.width / 2, window.innerWidth - t.width - 8));
165
- pos[1]({ top, left });
166
- },
167
- [open]
168
- );
169
- React.useEffect(
170
- function() {
171
- if (!open) return;
172
- function esc(e) {
173
- if (e.key === "Escape") hide();
174
- }
175
- document.addEventListener("keydown", esc);
176
- return function() {
177
- document.removeEventListener("keydown", esc);
178
- };
179
- },
180
- [open]
181
- );
182
- const child = React.Children.only(props.children);
183
- const trigger = /* @__PURE__ */ React.createElement(
184
- "span",
185
- {
186
- ref: anchorMerged,
187
- className: "aura-tooltip-anchor",
188
- onMouseEnter: function() {
189
- show(false);
190
- },
191
- onMouseLeave: hide,
192
- onFocus: function() {
193
- show(true);
194
- },
195
- onBlur: hide
196
- },
197
- React.cloneElement(child, { "aria-describedby": open ? id : child.props["aria-describedby"] })
198
- );
199
- return /* @__PURE__ */ React.createElement(React.Fragment, null, trigger, open ? createPortal(
200
- /* @__PURE__ */ React.createElement(
201
- "div",
202
- {
203
- ref: tip,
204
- id,
205
- role: "tooltip",
206
- className: "aura-tooltip",
207
- style: { top: pos[0] ? pos[0].top : -9999, left: pos[0] ? pos[0].left : -9999 }
208
- },
209
- props.content
210
- ),
211
- document.body
212
- ) : null);
213
- });
214
- export {
215
- ALERT_ICON,
216
- Alert,
217
- Toaster,
218
- Tooltip,
219
- toast
220
- };
package/dist/esm/forms.js DELETED
@@ -1,212 +0,0 @@
1
- 'use client';
2
- import * as React from "react";
3
- import { useStrings } from "./locale.js";
4
- import { cx, omit, useMaybeControlled, uid } from "./internal.js";
5
- import { Icon } from "./Icon.js";
6
- const h = React.createElement;
7
- const Field = React.forwardRef(function Field2(props, ref) {
8
- const t = useStrings();
9
- return /* @__PURE__ */ React.createElement(
10
- "div",
11
- {
12
- ref,
13
- className: cx("aura-field", props.error && "is-invalid", props.disabled && "is-disabled", props.className)
14
- },
15
- props.label ? h(
16
- props.labelAs || "label",
17
- { className: "aura-field__label", htmlFor: props.labelAs ? void 0 : props.id, id: props.labelId },
18
- props.label,
19
- props.required ? /* @__PURE__ */ React.createElement("span", { className: "aura-field__req", "aria-hidden": true }, " *") : null,
20
- props.optional ? /* @__PURE__ */ React.createElement("span", { className: "aura-field__opt" }, " (" + t.optional + ")") : null
21
- ) : null,
22
- props.children,
23
- props.error ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__error", id: props.id + "-error" }, /* @__PURE__ */ React.createElement(Icon, { name: "circle-alert", size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__hint", id: props.id + "-hint" }, props.hint) : null
24
- );
25
- });
26
- function describedBy(id, p) {
27
- return p.error ? id + "-error" : p.hint ? id + "-hint" : void 0;
28
- }
29
- const FIELD_KEYS = [
30
- "label",
31
- "hint",
32
- "error",
33
- "required",
34
- "optional",
35
- "icon",
36
- "className",
37
- "id",
38
- "suffix",
39
- "options",
40
- "placeholder"
41
- ];
42
- const TextField = React.forwardRef(function TextField2(props, ref) {
43
- const auto = uid(), id = props.id || auto;
44
- const rest = omit(props, FIELD_KEYS);
45
- return /* @__PURE__ */ React.createElement(
46
- Field,
47
- {
48
- id,
49
- label: props.label,
50
- hint: props.hint,
51
- error: props.error,
52
- required: props.required,
53
- optional: props.optional,
54
- disabled: props.disabled,
55
- className: props.className
56
- },
57
- /* @__PURE__ */ React.createElement("div", { className: cx("aura-input", props.icon && "has-icon", props.suffix && "has-suffix") }, props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, /* @__PURE__ */ React.createElement(
58
- "input",
59
- {
60
- type: "text",
61
- ...rest,
62
- ref,
63
- id,
64
- className: "aura-input__control",
65
- placeholder: props.placeholder,
66
- required: props.required,
67
- "aria-invalid": props.error ? true : void 0,
68
- "aria-describedby": describedBy(id, props)
69
- }
70
- ), props.suffix ? /* @__PURE__ */ React.createElement("span", { className: "aura-input__suffix" }, props.suffix) : null)
71
- );
72
- });
73
- const Textarea = React.forwardRef(function Textarea2(props, ref) {
74
- const auto = uid(), id = props.id || auto;
75
- const rest = omit(props, FIELD_KEYS);
76
- return /* @__PURE__ */ React.createElement(
77
- Field,
78
- {
79
- id,
80
- label: props.label,
81
- hint: props.hint,
82
- error: props.error,
83
- required: props.required,
84
- optional: props.optional,
85
- disabled: props.disabled,
86
- className: props.className
87
- },
88
- /* @__PURE__ */ React.createElement(
89
- "textarea",
90
- {
91
- rows: 4,
92
- ...rest,
93
- ref,
94
- id,
95
- className: "aura-input aura-textarea",
96
- placeholder: props.placeholder,
97
- required: props.required,
98
- "aria-invalid": props.error ? true : void 0,
99
- "aria-describedby": describedBy(id, props)
100
- }
101
- )
102
- );
103
- });
104
- const Select = React.forwardRef(function Select2(props, ref) {
105
- const auto = uid(), id = props.id || auto;
106
- const rest = omit(props, FIELD_KEYS.concat(["children"]));
107
- const opts = (props.options || []).map(function(o) {
108
- const v = typeof o === "object" ? o : { value: o, label: o };
109
- return /* @__PURE__ */ React.createElement("option", { key: v.value, value: v.value, disabled: v.disabled }, v.label);
110
- });
111
- if (props.placeholder)
112
- opts.unshift(
113
- /* @__PURE__ */ React.createElement("option", { key: "__ph", value: "", disabled: true }, props.placeholder)
114
- );
115
- const extra = props.value === void 0 && props.defaultValue === void 0 && props.placeholder ? { defaultValue: "" } : {};
116
- return /* @__PURE__ */ React.createElement(
117
- Field,
118
- {
119
- id,
120
- label: props.label,
121
- hint: props.hint,
122
- error: props.error,
123
- required: props.required,
124
- optional: props.optional,
125
- disabled: props.disabled,
126
- className: props.className
127
- },
128
- /* @__PURE__ */ React.createElement("div", { className: cx("aura-input aura-select", props.icon && "has-icon") }, props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: "aura-input__icon" }) : null, h(
129
- "select",
130
- Object.assign(extra, rest, {
131
- ref,
132
- id,
133
- className: "aura-input__control",
134
- required: props.required,
135
- "aria-invalid": props.error ? true : void 0,
136
- "aria-describedby": describedBy(id, props)
137
- }),
138
- opts,
139
- props.children
140
- ), /* @__PURE__ */ React.createElement(Icon, { name: "chevron-down", className: "aura-select__chevron" }))
141
- );
142
- });
143
- const RadioGroup = React.forwardRef(function RadioGroup2(props, ref) {
144
- const auto = uid(), id = props.id || auto;
145
- const st = useMaybeControlled(
146
- props.value,
147
- props.defaultValue,
148
- props.onChange
149
- );
150
- const name = props.name || id;
151
- return /* @__PURE__ */ React.createElement(
152
- "fieldset",
153
- {
154
- ref,
155
- className: cx("aura-field aura-radio-group", props.error && "is-invalid", props.className),
156
- "aria-describedby": describedBy(id, props),
157
- "aria-invalid": props.error ? true : void 0,
158
- disabled: props.disabled
159
- },
160
- props.label ? /* @__PURE__ */ React.createElement("legend", { className: "aura-field__label" }, props.label, props.required ? /* @__PURE__ */ React.createElement("span", { className: "aura-field__req", "aria-hidden": true }, " *") : null) : null,
161
- /* @__PURE__ */ React.createElement("div", { className: cx("aura-radio-group__list", props.orientation === "horizontal" && "is-horizontal") }, (props.options || []).map(function(o) {
162
- const v = typeof o === "object" ? o : { value: o, label: o };
163
- return /* @__PURE__ */ React.createElement("label", { key: v.value, className: cx("aura-choice", v.disabled && "is-disabled") }, /* @__PURE__ */ React.createElement(
164
- "input",
165
- {
166
- type: "radio",
167
- className: "aura-radio",
168
- name,
169
- value: v.value,
170
- disabled: v.disabled,
171
- checked: st[0] === v.value,
172
- onChange: function() {
173
- st[1](v.value);
174
- }
175
- }
176
- ), /* @__PURE__ */ React.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-choice__label" }, v.label), v.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__desc" }, v.description) : null));
177
- })),
178
- props.error ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__error", id: id + "-error" }, /* @__PURE__ */ React.createElement(Icon, { name: "circle-alert", size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__hint", id: id + "-hint" }, props.hint) : null
179
- );
180
- });
181
- const Switch = React.forwardRef(function Switch2(props, ref) {
182
- const auto = uid(), id = props.id || auto;
183
- const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
184
- const on = !!st[0];
185
- return /* @__PURE__ */ React.createElement("div", { className: cx("aura-switch-row", props.disabled && "is-disabled", props.className) }, /* @__PURE__ */ React.createElement(
186
- "button",
187
- {
188
- ref,
189
- type: "button",
190
- role: "switch",
191
- id,
192
- "aria-checked": on,
193
- disabled: props.disabled,
194
- "aria-labelledby": props.label ? id + "-label" : void 0,
195
- "aria-label": props.label ? void 0 : props["aria-label"],
196
- "aria-describedby": props.description ? id + "-desc" : void 0,
197
- className: cx("aura-switch", on && "is-on"),
198
- onClick: function() {
199
- st[1](!on);
200
- }
201
- },
202
- /* @__PURE__ */ React.createElement("span", { className: "aura-switch__thumb" })
203
- ), props.label ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : null);
204
- });
205
- export {
206
- Field,
207
- RadioGroup,
208
- Select,
209
- Switch,
210
- TextField,
211
- Textarea
212
- };
@@ -1,183 +0,0 @@
1
- 'use client';
2
- import * as React from "react";
3
- import { useStrings } from "./locale.js";
4
- import { cx, useMaybeControlled, uid } from "./internal.js";
5
- import { Icon } from "./Icon.js";
6
- const h = React.createElement;
7
- const Card = React.forwardRef(function Card2(props, ref) {
8
- const creative = props.variant === "creative";
9
- return h(
10
- props.as || "section",
11
- {
12
- ref,
13
- className: cx(
14
- "aura-card",
15
- creative && "aura-card--creative",
16
- props.interactive && "is-interactive",
17
- props.className
18
- ),
19
- "aria-labelledby": props.title && props.titleId ? props.titleId : void 0
20
- },
21
- props.title || props.actions ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React.createElement("div", { className: "aura-card__heading" }, props.title ? h("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, props.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
22
- props.children ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__body" }, props.children) : null,
23
- props.footer ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__foot" }, props.footer) : null
24
- );
25
- });
26
- const Tabs = React.forwardRef(function Tabs2(props, ref) {
27
- const items = props.tabs || [], base = uid();
28
- const st = useMaybeControlled(
29
- props.value,
30
- props.defaultValue || items[0] && items[0].id,
31
- props.onChange
32
- );
33
- const refs = React.useRef({});
34
- const current = items.filter(function(t) {
35
- return t.id === st[0];
36
- })[0] || items[0];
37
- function go(i) {
38
- const enabled = items.filter(function(t2) {
39
- return !t2.disabled;
40
- });
41
- const t = enabled[(i + enabled.length) % enabled.length];
42
- st[1](t.id);
43
- if (refs.current[t.id]) refs.current[t.id].focus();
44
- }
45
- return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-tabs", props.className) }, /* @__PURE__ */ React.createElement(
46
- "div",
47
- {
48
- role: "tablist",
49
- "aria-label": props.label,
50
- className: "aura-tabs__list",
51
- onKeyDown: function(e) {
52
- const enabled = items.filter(function(t) {
53
- return !t.disabled;
54
- }), i = enabled.indexOf(current);
55
- if (e.key === "ArrowRight") {
56
- e.preventDefault();
57
- go(i + 1);
58
- } else if (e.key === "ArrowLeft") {
59
- e.preventDefault();
60
- go(i - 1);
61
- } else if (e.key === "Home") {
62
- e.preventDefault();
63
- go(0);
64
- } else if (e.key === "End") {
65
- e.preventDefault();
66
- go(enabled.length - 1);
67
- }
68
- }
69
- },
70
- items.map(function(t) {
71
- const on = current && t.id === current.id;
72
- return /* @__PURE__ */ React.createElement(
73
- "button",
74
- {
75
- key: t.id,
76
- type: "button",
77
- role: "tab",
78
- id: base + "-tab-" + t.id,
79
- "aria-selected": on,
80
- "aria-controls": base + "-panel-" + t.id,
81
- tabIndex: on ? 0 : -1,
82
- disabled: t.disabled,
83
- ref: function(el) {
84
- refs.current[t.id] = el;
85
- },
86
- className: cx("aura-tab", on && "is-active"),
87
- onClick: function() {
88
- st[1](t.id);
89
- }
90
- },
91
- t.icon ? /* @__PURE__ */ React.createElement(Icon, { name: t.icon }) : null,
92
- t.label,
93
- t.count != null ? /* @__PURE__ */ React.createElement("span", { className: "aura-tab__count" }, t.count) : null
94
- );
95
- })
96
- ), current && current.content !== void 0 ? /* @__PURE__ */ React.createElement(
97
- "div",
98
- {
99
- role: "tabpanel",
100
- id: base + "-panel-" + current.id,
101
- "aria-labelledby": base + "-tab-" + current.id,
102
- tabIndex: 0,
103
- className: "aura-tabs__panel"
104
- },
105
- current.content
106
- ) : null);
107
- });
108
- const SideNav = React.forwardRef(function SideNav2(props, ref) {
109
- const t = useStrings();
110
- const st = useMaybeControlled(
111
- props.value,
112
- props.defaultValue,
113
- props.onChange
114
- );
115
- function item(it) {
116
- const on = st[0] === it.id;
117
- const inner = [
118
- it.icon ? /* @__PURE__ */ React.createElement(Icon, { key: "i", name: it.icon }) : null,
119
- /* @__PURE__ */ React.createElement("span", { key: "l", className: "aura-nav__label" }, it.label),
120
- it.count != null ? /* @__PURE__ */ React.createElement("span", { key: "c", className: "aura-nav__count" }, it.count) : null
121
- ];
122
- const common = {
123
- className: cx("aura-nav__item", on && "is-active"),
124
- "aria-current": on ? "page" : void 0,
125
- onClick: function(e) {
126
- if (!it.href) e.preventDefault();
127
- st[1](it.id);
128
- }
129
- };
130
- return /* @__PURE__ */ React.createElement("li", { key: it.id }, it.href ? /* @__PURE__ */ React.createElement("a", { href: it.href, ...common }, inner) : /* @__PURE__ */ React.createElement("button", { type: "button", ...common }, inner));
131
- }
132
- return /* @__PURE__ */ React.createElement("nav", { ref, className: cx("aura-nav", props.className), "aria-label": props.label || t.mainNav }, props.header ? /* @__PURE__ */ React.createElement("div", { className: "aura-nav__header" }, props.header) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-nav__scroll" }, (props.sections || [{ items: props.items || [] }]).map(function(s, i) {
133
- return /* @__PURE__ */ React.createElement("div", { key: i, className: "aura-nav__section" }, s.title ? /* @__PURE__ */ React.createElement("p", { className: "aura-nav__title" }, s.title) : null, /* @__PURE__ */ React.createElement("ul", { className: "aura-nav__list" }, s.items.map(item)));
134
- })), props.footer ? /* @__PURE__ */ React.createElement("div", { className: "aura-nav__footer" }, props.footer) : null);
135
- });
136
- const Breadcrumb = React.forwardRef(function Breadcrumb2(props, ref) {
137
- const t = useStrings();
138
- const items = props.items || [];
139
- return /* @__PURE__ */ React.createElement("nav", { ref, "aria-label": props.label || t.breadcrumb, className: cx("aura-crumbs", props.className) }, /* @__PURE__ */ React.createElement("ol", null, items.map(function(it, i) {
140
- const last = i === items.length - 1;
141
- return /* @__PURE__ */ React.createElement("li", { key: i }, last ? /* @__PURE__ */ React.createElement("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? /* @__PURE__ */ React.createElement("a", { href: it.href, onClick: it.onClick }, it.label) : /* @__PURE__ */ React.createElement("button", { type: "button", onClick: it.onClick }, it.label), last ? null : /* @__PURE__ */ React.createElement(Icon, { name: "chevron-right", size: 12, className: "aura-crumbs__sep" }));
142
- })));
143
- });
144
- const AVATAR_TONES = ["progress", "ready", "neutral", "warning"];
145
- function initials(name) {
146
- const parts = String(name || "?").trim().split(/\s+/);
147
- return ((parts[0] || "?")[0] + (parts.length > 1 ? parts[parts.length - 1][0] : parts[0][1] || "")).toUpperCase();
148
- }
149
- const Avatar = React.forwardRef(function Avatar2(props, ref) {
150
- const size = props.size || "md", errState = React.useState(false);
151
- let hash = 0;
152
- String(props.name || "").split("").forEach(function(ch) {
153
- hash = hash * 31 + ch.charCodeAt(0) >>> 0;
154
- });
155
- const tone = AVATAR_TONES[hash % AVATAR_TONES.length];
156
- return /* @__PURE__ */ React.createElement(
157
- "span",
158
- {
159
- ref,
160
- className: cx("aura-avatar", "aura-avatar--" + size, "aura-avatar--" + tone, props.className),
161
- role: "img",
162
- "aria-label": props.name + (props.status ? ", " + props.status : "")
163
- },
164
- props.src && !errState[0] ? /* @__PURE__ */ React.createElement(
165
- "img",
166
- {
167
- src: props.src,
168
- alt: "",
169
- onError: function() {
170
- errState[1](true);
171
- }
172
- }
173
- ) : /* @__PURE__ */ React.createElement("span", { "aria-hidden": true }, initials(props.name)),
174
- props.status === "online" ? /* @__PURE__ */ React.createElement("span", { className: "aura-avatar__status", "aria-hidden": true }) : null
175
- );
176
- });
177
- export {
178
- Avatar,
179
- Breadcrumb,
180
- Card,
181
- SideNav,
182
- Tabs
183
- };