@adamjanicki/ui 1.6.0 → 1.6.2
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.
- package/README.md +2 -2
- package/components/Button/Button.js +2 -2
- package/components/Icon/Icon.d.ts +1 -1
- package/components/Icon/icons.d.ts +1 -1
- package/components/Icon/icons.js +2 -0
- package/components/Layer/Layer.js +15 -21
- package/components/Link/Link.d.ts +3 -3
- package/components/Link/Link.js +4 -4
- package/components/Select/Select.d.ts +2 -2
- package/components/Select/Select.js +5 -5
- package/hooks/useFocusTrap.js +22 -31
- package/package.json +1 -1
- package/style.css +1 -1
- package/dist/aui.cjs.js +0 -22
- package/dist/aui.es.js +0 -1091
- package/dist/aui.umd.js +0 -22
- package/vite.config.ts +0 -23
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @adamjanicki/ui
|
|
2
2
|
|
|
3
|
-
**Warning: use at own risk
|
|
3
|
+
**Warning: use at own risk! These are mainly for personal use across my other sites, so while I strive to write good code, there may be bugs, and I make breaking changes semi-frequently!**
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -24,7 +24,7 @@ const App = () => {
|
|
|
24
24
|
|
|
25
25
|
## Importing CSS
|
|
26
26
|
|
|
27
|
-
Unfortunately, there was no great way to handle CSS. I often hate how large libraries make it extremely difficult to override CSS without using `!important`, or using inline styles. So, I've decided to just
|
|
27
|
+
Unfortunately, there was no great way to handle CSS. I often hate how large libraries make it extremely difficult to override CSS without using `!important`, or using inline styles. So, I've decided to just allow importing the CSS directly into your project. Here's an example of how to do it:
|
|
28
28
|
|
|
29
29
|
```ts
|
|
30
30
|
import React from "react";
|
|
@@ -29,8 +29,8 @@ export var UnstyledButton = React.forwardRef(function (_a, ref) {
|
|
|
29
29
|
return (_jsx("button", __assign({}, props, { className: classNames("aui-action aui-button", transformLayout(layout), className), ref: ref })));
|
|
30
30
|
});
|
|
31
31
|
var Button = React.forwardRef(function (_a, ref) {
|
|
32
|
-
var variant = _a.variant, corners = _a.corners, className = _a.className, size = _a.size, rest = __rest(_a, ["variant", "corners", "className", "size"]);
|
|
33
|
-
return (_jsx(UnstyledButton, __assign({}, rest, { className: classNames(getButtonClassName({ variant: variant, corners: corners, size: size }), className), ref: ref })));
|
|
32
|
+
var variant = _a.variant, layout = _a.layout, corners = _a.corners, className = _a.className, size = _a.size, rest = __rest(_a, ["variant", "layout", "corners", "className", "size"]);
|
|
33
|
+
return (_jsx(UnstyledButton, __assign({}, rest, { className: classNames(getButtonClassName({ variant: variant, corners: corners, size: size }), transformLayout(layout), className), ref: ref })));
|
|
34
34
|
});
|
|
35
35
|
export var getButtonClassName = function (_a) {
|
|
36
36
|
var _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.corners, corners = _c === void 0 ? "rounded" : _c, _d = _a.size, size = _d === void 0 ? "regular" : _d;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { type IconType } from "./icons";
|
|
3
|
-
type Props = Omit<React.DetailedHTMLProps<React.SVGAttributes<SVGSVGElement>, SVGSVGElement>, "children" | "viewBox"> & {
|
|
3
|
+
export type Props = Omit<React.DetailedHTMLProps<React.SVGAttributes<SVGSVGElement>, SVGSVGElement>, "children" | "viewBox"> & {
|
|
4
4
|
/**
|
|
5
5
|
* The version of icon to render
|
|
6
6
|
*/
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const iconTypes: readonly ["architect", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "atom", "award", "bar-graph", "building", "calculator", "calendar", "car", "check", "check-circle", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "city", "clipboard", "clock", "clone", "cloud", "code", "comment", "cube", "database", "desktop", "document", "download", "edit", "evergreen", "export", "external", "file", "film", "flower", "folder", "gem", "globe", "graph-down", "graph-up", "grid", "heart", "home", "info-circle", "info-square", "letter", "license", "link", "list", "lock", "login", "logout", "menu", "minus", "minus-circle", "moon", "more", "mountains", "newspaper", "not-a-moon", "overflow", "person", "plus", "plus-circle", "podium", "search", "settings", "shell", "shuffle", "snowflake", "sparkles", "star", "sun", "tag", "ticket", "trash", "tree", "tv", "unlock", "upload", "vista", "warning-circle", "x", "x-circle"];
|
|
1
|
+
export declare const iconTypes: readonly ["architect", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "atom", "award", "bar-graph", "bell", "building", "calculator", "calendar", "car", "check", "check-circle", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "city", "clipboard", "clock", "clone", "cloud", "code", "comment", "cube", "database", "desktop", "document", "download", "edit", "evergreen", "export", "external", "file", "film", "flower", "folder", "gem", "globe", "graph-down", "graph-up", "grid", "heart", "home", "info-circle", "info-square", "letter", "license", "link", "list", "lock", "login", "logout", "menu", "minus", "minus-circle", "moon", "more", "mountains", "newspaper", "not-a-moon", "overflow", "person", "plus", "plus-circle", "podium", "search", "settings", "shell", "shuffle", "snowflake", "sparkles", "star", "sun", "tag", "ticket", "trash", "tree", "tv", "unlock", "upload", "vista", "warning-circle", "x", "x-circle"];
|
|
2
2
|
export type IconType = (typeof iconTypes)[number];
|
|
3
3
|
declare const icons: Record<IconType, string>;
|
|
4
4
|
export default icons;
|
package/components/Icon/icons.js
CHANGED
|
@@ -7,6 +7,7 @@ export var iconTypes = [
|
|
|
7
7
|
"atom",
|
|
8
8
|
"award",
|
|
9
9
|
"bar-graph",
|
|
10
|
+
"bell",
|
|
10
11
|
"building",
|
|
11
12
|
"calculator",
|
|
12
13
|
"calendar",
|
|
@@ -173,5 +174,6 @@ var icons = {
|
|
|
173
174
|
award: "M14.3374,6.1735h.0001c-.0375-.4687-.512-.8192-.6546-1.2562l-.0419-.1562c-.0953-.4498.1407-.9905-.0612-1.4155-.2278-.6859-.9683-.6907-1.4266-1.1453-.389-.3591-.4005-.9323-.8239-1.2454-.5374-.4791-1.1875-.1111-1.8097-.275-.594-.1584-.9305-.7239-1.5197-.6772-.5906-.0469-.9323.519-1.5233.6772-.522.155-1.0462-.1177-1.4901.095-.507.1795-.6814.6392-.9037,1.1151-.3085.6185-1.1274.673-1.4871,1.1352-.3477.4052-.2687.8929-.222,1.4184.0414.7628-.7646,1.2202-.7302,1.9108-.047.5906.519.9322.6772,1.5234.1625.622-.2001,1.2735.2803,1.8109.2726.3875.837.4611,1.2141.8203v4.9668c0,.466.5634.6993.893.3698l2.9217-2.9218c.2043-.2043.5355-.2043.7399,0l2.9218,2.9218c.3295.3295.893.0962.893-.3699v-4.9854c.0103-.0192.0187-.0348.029-.0541.5892-.3795,1.4185-.5754,1.4506-1.4131.0268-.3505-.1125-.7572.0103-1.1447.1692-.6226.8096-.9972.6628-1.7051ZM8.0001,8.7724c-1.3807,0-2.5-1.1172-2.5-2.4954s1.1193-2.4953,2.5-2.4953,2.5,1.1172,2.5,2.4953-1.1193,2.4954-2.5,2.4954Z",
|
|
174
175
|
flower: "M12.2426,9.364c1.1716-1.1716,1.1716-3.071,0-4.2426,1.1716-1.1716,1.1716-3.0711,0-4.2427-1.1716-1.1716-3.071-1.1716-4.2426,0C6.8284-.2929,4.929-.2929,3.7574.8787c-1.1716,1.1716-1.1716,3.071,0,4.2427-1.1716,1.1716-1.1716,3.071,0,4.2426.8765.8765,2.1601,1.0964,3.2418.6615v2.668c-1.421-.8044-2.8931-.8878-3.3029-.1779-.4142.7175.4132,1.9706,1.8481,2.7991.8587.4958,1.7356.721,2.394.673.0212.0013.0392.0123.0609.0123s.0396-.0109.0609-.0123c.6584.048,1.5353-.1772,2.394-.673,1.4349-.8284,2.2623-2.0816,1.848-2.7991-.4099-.7099-1.8818-.6265-3.3029.1779v-2.6686c1.082.4358,2.3665.2159,3.2434-.661ZM6.2322,3.3535c.9763-.9763,2.5592-.9763,3.5355,0s.9763,2.5592,0,3.5356c-.9763.9763-2.5593.9763-3.5355,0-.9763-.9764-.9763-2.5592,0-3.5356Z",
|
|
175
176
|
overflow: "M8,6.25c.9665,0,1.75.7835,1.75,1.75s-.7835,1.75-1.75,1.75-1.75-.7835-1.75-1.75.7835-1.75,1.75-1.75ZM6.25,1.75c0,.9665.7835,1.75,1.75,1.75s1.75-.7835,1.75-1.75-.7835-1.75-1.75-1.75-1.75.7835-1.75,1.75ZM6.25,14.25c0,.9665.7835,1.75,1.75,1.75s1.75-.7835,1.75-1.75-.7835-1.75-1.75-1.75-1.75.7835-1.75,1.75Z",
|
|
177
|
+
bell: "M14.1079,12.2049c-.512-.3928-.8403-.9752-.9876-1.6036-.2782-1.1865-.6092-3.0107-.62-5.006-.0114-2.1172-1.4575-4.0092-3.5003-4.4756v-.1196c0-.5523-.4477-1-1-1s-1,.4477-1,1v.1196c-2.0428.4664-3.4889,2.3584-3.5003,4.4756-.0108,1.9953-.3418,3.8195-.62,5.006-.1473.6284-.4756,1.2109-.9876,1.6036-.2736.2098-.4356.5579-.3818.9399.0714.5071.5548.8552,1.0666.8552h3.4232c0,1.0972.9028,2,2,2s2-.9028,2-2h3.4232c.5118,0,.9952-.3481,1.0666-.8552.0538-.382-.1083-.73-.3818-.9399ZM8,14h-.0292c.0162,0,.0292-.0131.0292-.0292,0,.0161.0131.0292.0292.0292h-.0292Z",
|
|
176
178
|
};
|
|
177
179
|
export default icons;
|
|
@@ -25,22 +25,29 @@ import React, { useEffect } from "react";
|
|
|
25
25
|
import { useFocusTrap, useScrollLock } from "../../hooks";
|
|
26
26
|
import classNames from "../../functions/classNames";
|
|
27
27
|
import Box from "../Box/Box";
|
|
28
|
-
var
|
|
29
|
-
var onClose = _a.onClose, children = _a.children, className = _a.className, _b = _a.disableEscape, disableEscape = _b === void 0 ? false : _b,
|
|
30
|
-
var focusRef = useFocusTrap(
|
|
28
|
+
var Layer = React.forwardRef(function (_a, ref) {
|
|
29
|
+
var returnFocusOnEscape = _a.returnFocusOnEscape, disableScrollLock = _a.disableScrollLock, onClose = _a.onClose, children = _a.children, className = _a.className, _b = _a.disableEscape, disableEscape = _b === void 0 ? false : _b, onMouseDown = _a.onMouseDown, layout = _a.layout, rest = __rest(_a, ["returnFocusOnEscape", "disableScrollLock", "onClose", "children", "className", "disableEscape", "onMouseDown", "layout"]);
|
|
30
|
+
var focusRef = useFocusTrap(true);
|
|
31
|
+
// Lock and unlock on mount and unmount
|
|
32
|
+
useScrollLock(!disableScrollLock);
|
|
31
33
|
useEffect(function () {
|
|
34
|
+
if (disableEscape)
|
|
35
|
+
return;
|
|
32
36
|
var handleEscape = function (event) {
|
|
37
|
+
var _a;
|
|
33
38
|
if (event.key === "Escape") {
|
|
39
|
+
if (!returnFocusOnEscape) {
|
|
40
|
+
var activeEl = document.activeElement;
|
|
41
|
+
(_a = activeEl === null || activeEl === void 0 ? void 0 : activeEl.blur) === null || _a === void 0 ? void 0 : _a.call(activeEl);
|
|
42
|
+
}
|
|
34
43
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
35
44
|
}
|
|
36
45
|
};
|
|
37
|
-
|
|
38
|
-
document.addEventListener("keydown", handleEscape);
|
|
46
|
+
document.addEventListener("keydown", handleEscape);
|
|
39
47
|
return function () {
|
|
40
|
-
|
|
41
|
-
document.removeEventListener("keydown", handleEscape);
|
|
48
|
+
document.removeEventListener("keydown", handleEscape);
|
|
42
49
|
};
|
|
43
|
-
}, [onClose, disableEscape]);
|
|
50
|
+
}, [onClose, disableEscape, returnFocusOnEscape]);
|
|
44
51
|
return (_jsx(Box, __assign({ layout: __assign({ axis: "y", align: "center", justify: "center" }, layout) }, rest, { className: classNames("aui-layer-backdrop", className), onMouseDown: function (e) {
|
|
45
52
|
onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e);
|
|
46
53
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
@@ -53,17 +60,4 @@ var BaseLayer = React.forwardRef(function (_a, ref) {
|
|
|
53
60
|
},
|
|
54
61
|
}) })));
|
|
55
62
|
});
|
|
56
|
-
var Layer = React.forwardRef(function (_a, ref) {
|
|
57
|
-
var returnFocusOnEscape = _a.returnFocusOnEscape, disableScrollLock = _a.disableScrollLock, rest = __rest(_a, ["returnFocusOnEscape", "disableScrollLock"]);
|
|
58
|
-
// Lock and unlock on mount and unmount
|
|
59
|
-
useScrollLock(!disableScrollLock);
|
|
60
|
-
useEffect(function () { return function () {
|
|
61
|
-
var _a;
|
|
62
|
-
var activeEl = document.activeElement;
|
|
63
|
-
if (!returnFocusOnEscape) {
|
|
64
|
-
(_a = activeEl === null || activeEl === void 0 ? void 0 : activeEl.blur) === null || _a === void 0 ? void 0 : _a.call(activeEl);
|
|
65
|
-
}
|
|
66
|
-
}; }, [returnFocusOnEscape]);
|
|
67
|
-
return _jsx(BaseLayer, __assign({}, rest, { visible: true, ref: ref }));
|
|
68
|
-
});
|
|
69
63
|
export default Layer;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { type VisualButtonProps } from "../Button/Button";
|
|
3
3
|
import { Layout } from "../../utils/types";
|
|
4
|
-
type BaseLinkProps = Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href"> & {
|
|
4
|
+
export type BaseLinkProps = Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href"> & {
|
|
5
5
|
/**
|
|
6
6
|
* URL to navigate to
|
|
7
7
|
*/
|
|
8
|
-
to
|
|
8
|
+
to: string;
|
|
9
9
|
};
|
|
10
10
|
type CustomLinkElement = React.ForwardRefExoticComponent<BaseLinkProps & React.RefAttributes<HTMLAnchorElement>>;
|
|
11
11
|
type LinkProps = BaseLinkProps & {
|
|
@@ -29,7 +29,7 @@ export declare const ButtonLink: React.ForwardRefExoticComponent<Omit<Omit<React
|
|
|
29
29
|
/**
|
|
30
30
|
* URL to navigate to
|
|
31
31
|
*/
|
|
32
|
-
to
|
|
32
|
+
to: string;
|
|
33
33
|
} & {
|
|
34
34
|
/**
|
|
35
35
|
* Whether the link should open in a new tab
|
package/components/Link/Link.js
CHANGED
|
@@ -34,11 +34,11 @@ export var UnstyledLink = React.forwardRef(function (_a, ref) {
|
|
|
34
34
|
return _jsx("a", __assign({}, props, { href: to, ref: ref }));
|
|
35
35
|
});
|
|
36
36
|
export var ButtonLink = React.forwardRef(function (_a, ref) {
|
|
37
|
-
var className = _a.className, variant = _a.variant, corners = _a.corners, size = _a.size, props = __rest(_a, ["className", "variant", "corners", "size"]);
|
|
38
|
-
return (_jsx(UnstyledLink, __assign({}, props, { className: classNames(getButtonClassName({ variant: variant, corners: corners, size: size }), className), ref: ref })));
|
|
37
|
+
var className = _a.className, layout = _a.layout, variant = _a.variant, corners = _a.corners, size = _a.size, props = __rest(_a, ["className", "layout", "variant", "corners", "size"]);
|
|
38
|
+
return (_jsx(UnstyledLink, __assign({}, props, { className: classNames(getButtonClassName({ variant: variant, corners: corners, size: size }), transformLayout(layout), className), ref: ref })));
|
|
39
39
|
});
|
|
40
40
|
var Link = React.forwardRef(function (_a, ref) {
|
|
41
|
-
var className = _a.className, props = __rest(_a, ["className"]);
|
|
42
|
-
return (_jsx(UnstyledLink, __assign({}, props, { className: classNames("aui-link", className), ref: ref })));
|
|
41
|
+
var className = _a.className, layout = _a.layout, props = __rest(_a, ["className", "layout"]);
|
|
42
|
+
return (_jsx(UnstyledLink, __assign({}, props, { className: classNames("aui-link", transformLayout(layout), className), ref: ref })));
|
|
43
43
|
});
|
|
44
44
|
export default Link;
|
|
@@ -18,5 +18,5 @@ type Props = React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElemen
|
|
|
18
18
|
*/
|
|
19
19
|
corners?: CornerType;
|
|
20
20
|
};
|
|
21
|
-
declare const
|
|
22
|
-
export default
|
|
21
|
+
declare const Select: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLSelectElement>>;
|
|
22
|
+
export default Select;
|
|
@@ -21,12 +21,12 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
23
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
|
-
import
|
|
24
|
+
import React from "react";
|
|
25
25
|
import classNames from "../../functions/classNames";
|
|
26
26
|
import Box from "../Box";
|
|
27
27
|
import Icon from "../Icon";
|
|
28
|
-
var Select = function (_a, ref) {
|
|
28
|
+
var Select = React.forwardRef(function (_a, ref) {
|
|
29
29
|
var className = _a.className, options = _a.options, getOptionLabel = _a.getOptionLabel, _b = _a.corners, corners = _b === void 0 ? "rounded" : _b, style = _a.style, disabled = _a.disabled, props = __rest(_a, ["className", "options", "getOptionLabel", "corners", "style", "disabled"]);
|
|
30
|
-
return (_jsxs(Box, { className: classNames("aui-select-container", "aui-corners--".concat(corners), disabled ? "aui-select-disabled" : undefined, className), style: style, children: [_jsx("select", __assign({}, props, { ref: ref, className: "aui-select aui-corners--".concat(corners), disabled: disabled, children: options.map(function (option, index) { return (_jsx("option", { value: option, children: (getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(option)) || option }, index)); }) })), _jsx(Icon, { icon: "chevron-down", className: "aui-select-icon", "aria-hidden": true })] }));
|
|
31
|
-
};
|
|
32
|
-
export default
|
|
30
|
+
return (_jsxs(Box, { layout: { axis: "x", align: "center" }, className: classNames("aui-select-container", "aui-corners--".concat(corners), disabled ? "aui-select-disabled" : undefined, className), style: style, children: [_jsx("select", __assign({}, props, { ref: ref, className: "aui-select aui-corners--".concat(corners), disabled: disabled, children: options.map(function (option, index) { return (_jsx("option", { value: option, children: (getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(option)) || option }, index)); }) })), _jsx(Icon, { icon: "chevron-down", className: "aui-select-icon", "aria-hidden": true })] }));
|
|
31
|
+
});
|
|
32
|
+
export default Select;
|
package/hooks/useFocusTrap.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useEffect, useRef
|
|
1
|
+
import { useEffect, useRef } from "react";
|
|
2
2
|
var selector = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
|
|
3
3
|
/**
|
|
4
4
|
* A hook for trapping focus within an element.
|
|
@@ -10,48 +10,39 @@ var selector = 'a[href], area[href], input:not([disabled]), select:not([disabled
|
|
|
10
10
|
var useFocusTrap = function (isActive) {
|
|
11
11
|
if (isActive === void 0) { isActive = true; }
|
|
12
12
|
var trapRef = useRef(null);
|
|
13
|
-
var focusableElements = useRef(null);
|
|
14
|
-
var updateFocusableElements = useCallback(function () {
|
|
15
|
-
if (trapRef.current) {
|
|
16
|
-
focusableElements.current = trapRef.current.querySelectorAll(selector);
|
|
17
|
-
}
|
|
18
|
-
}, []);
|
|
19
13
|
useEffect(function () {
|
|
20
|
-
|
|
14
|
+
var trap = trapRef.current;
|
|
15
|
+
if (!isActive || !trap)
|
|
21
16
|
return;
|
|
22
|
-
updateFocusableElements();
|
|
23
17
|
var handleKeyDown = function (event) {
|
|
24
|
-
var _a;
|
|
25
18
|
if (event.key !== "Tab")
|
|
26
19
|
return;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
return event.preventDefault();
|
|
30
|
-
}
|
|
31
|
-
var activeElement = document.activeElement;
|
|
32
|
-
var firstEl = focusableElements.current[0];
|
|
33
|
-
var lastEl = focusableElements.current[focusableElements.current.length - 1];
|
|
34
|
-
if (event.shiftKey && activeElement === firstEl) {
|
|
35
|
-
lastEl.focus();
|
|
20
|
+
var focusableElements = trap.querySelectorAll(selector);
|
|
21
|
+
if (!focusableElements.length) {
|
|
36
22
|
event.preventDefault();
|
|
23
|
+
return;
|
|
37
24
|
}
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
25
|
+
var first = focusableElements[0];
|
|
26
|
+
var last = focusableElements[focusableElements.length - 1];
|
|
27
|
+
var active = document.activeElement;
|
|
28
|
+
if (event.shiftKey) {
|
|
29
|
+
if (active === first || !trap.contains(active)) {
|
|
30
|
+
last.focus();
|
|
31
|
+
event.preventDefault();
|
|
32
|
+
}
|
|
41
33
|
}
|
|
42
|
-
else
|
|
43
|
-
(
|
|
44
|
-
|
|
34
|
+
else {
|
|
35
|
+
if (active === last || !trap.contains(active)) {
|
|
36
|
+
first.focus();
|
|
37
|
+
event.preventDefault();
|
|
38
|
+
}
|
|
45
39
|
}
|
|
46
40
|
};
|
|
47
|
-
|
|
48
|
-
observer.observe(trapRef.current, { childList: true, subtree: true });
|
|
49
|
-
document.addEventListener("keydown", handleKeyDown);
|
|
41
|
+
trap.addEventListener("keydown", handleKeyDown, true);
|
|
50
42
|
return function () {
|
|
51
|
-
|
|
52
|
-
observer.disconnect();
|
|
43
|
+
trap.removeEventListener("keydown", handleKeyDown, true);
|
|
53
44
|
};
|
|
54
|
-
}, [isActive
|
|
45
|
+
}, [isActive]);
|
|
55
46
|
return trapRef;
|
|
56
47
|
};
|
|
57
48
|
export default useFocusTrap;
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--aui-xxs: 2px;--aui-xs: 4px;--aui-s: 8px;--aui-m: 16px;--aui-l: 24px;--aui-xl: 32px;--aui-xxl: 64px;--aui-moon-gray: #ccc;--aui-dark-gray: #555;--aui-darkest-gray: #333;--aui-obsidian: #121212;--aui-focus-ring-color: #b2dbfa;--aui-default-text-color: black;--aui-default-background: white;--aui-default-border: var(--aui-moon-gray);--aui-disabled-opacity: 0.5;--aui-default-transition: 0.25s ease-in-out;--aui-default-opacity-dim: 0.75;--aui-container-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);--aui-sharp-radius: 0;--aui-rounded-radius: 8px;--aui-pill-radius: 9999px;--aui-button-primary-background: black;--aui-button-primary-color: white;--aui-button-secondary-border-hover: var(--aui-darkest-gray);--aui-subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);--aui-button-primary-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.36);--aui-success-background: #dff2e1;--aui-success-color: #1b5e20;--aui-success-border: #b2dfb1;--aui-warning-background: #fceeb6;--aui-warning-color: #b23904;--aui-warning-border: #e6d5a2;--aui-error-background: #fdecea;--aui-error-color: #b71c1c;--aui-error-border: #f5b7b7;--aui-info-background: #e3f2fd;--aui-info-color: #0d47a1;--aui-info-border: #90caf9;--aui-static-background: #e8e8e8;--aui-layer-backdrop-background: rgba(200, 200, 200, 0.7);--aui-link-color: #0070ff;--aui-select-icon: var(--aui-dark-gray)}[data-theme=dark]{--aui-focus-ring-color: #6699cc;--aui-default-text-color: white;--aui-default-background: var(--aui-obsidian);--aui-default-border: var(--aui-dark-gray);--aui-container-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.36);--aui-button-primary-background: white;--aui-button-primary-color: var(--aui-obsidian);--aui-button-secondary-border-hover: var(--aui-moon-gray);--aui-subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);--aui-button-primary-box-shadow: 0 1px 2px rgba(64, 64, 64, 0.8);--aui-success-background: #2a5733;--aui-success-color: #d9efd8;--aui-success-border: #439e4a;--aui-warning-background: #736230;--aui-warning-color: #fff6d1;--aui-warning-border: #927a3b;--aui-error-background: #663232;--aui-error-color: #f9dadc;--aui-error-border: #8d2a2a;--aui-info-background: #335f72;--aui-info-color: #d4f1f5;--aui-info-border: #1d8ea4;--aui-static-background: var(--aui-darkest-gray);--aui-layer-backdrop-background: rgba(55, 55, 55, 0.7);--aui-link-color: #33bfff;--aui-select-icon: var(--aui-moon-gray)}.aui-flex-x,.aui-flex-y,.aui-flex--x,.aui-flex--y{display:flex}.aui-flex-x{flex-direction:row}.aui-flex-y{flex-direction:column}.aui-flex--x{flex-direction:row-reverse}.aui-flex--y{flex-direction:column-reverse}.aui-flex-wrap{flex-wrap:wrap}.aui-align-start{align-items:flex-start}.aui-align-center{align-items:center}.aui-align-end{align-items:flex-end}.aui-justify-start{justify-content:flex-start}.aui-justify-center{justify-content:center}.aui-justify-between{justify-content:space-between}.aui-justify-around{justify-content:space-around}.aui-justify-end{justify-content:flex-end}.aui-icon-xxs{width:8px;height:8px}.aui-icon-xs{width:12px;height:12px}.aui-icon-s{width:16px;height:16px}.aui-icon-m{width:24px;height:24px}.aui-icon-l{width:32px;height:32px}.aui-icon-xl{width:48px;height:48px}.aui-icon-xxl{width:64px;height:64px}.aui-gap-none{gap:0}.aui-gap-xxs{gap:var(--aui-xxs)}.aui-gap-xs{gap:var(--aui-xs)}.aui-gap-s{gap:var(--aui-s)}.aui-gap-m{gap:var(--aui-m)}.aui-gap-l{gap:var(--aui-l)}.aui-gap-xl{gap:var(--aui-xl)}.aui-gap-xxl{gap:var(--aui-xxl)}.aui-pa-none{padding:0}.aui-pa-xxs{padding:var(--aui-xxs)}.aui-pa-xs{padding:var(--aui-xs)}.aui-pa-s{padding:var(--aui-s)}.aui-pa-m{padding:var(--aui-m)}.aui-pa-l{padding:var(--aui-l)}.aui-pa-xl{padding:var(--aui-xl)}.aui-pa-xxl{padding:var(--aui-xxl)}.aui-pt-none{padding-top:0}.aui-pt-xxs{padding-top:var(--aui-xxs)}.aui-pt-xs{padding-top:var(--aui-xs)}.aui-pt-s{padding-top:var(--aui-s)}.aui-pt-m{padding-top:var(--aui-m)}.aui-pt-l{padding-top:var(--aui-l)}.aui-pt-xl{padding-top:var(--aui-xl)}.aui-pt-xxl{padding-top:var(--aui-xxl)}.aui-pb-none{padding-bottom:0}.aui-pb-xxs{padding-bottom:var(--aui-xxs)}.aui-pb-xs{padding-bottom:var(--aui-xs)}.aui-pb-s{padding-bottom:var(--aui-s)}.aui-pb-m{padding-bottom:var(--aui-m)}.aui-pb-l{padding-bottom:var(--aui-l)}.aui-pb-xl{padding-bottom:var(--aui-xl)}.aui-pb-xxl{padding-bottom:var(--aui-xxl)}.aui-pl-none{padding-left:0}.aui-pl-xxs{padding-left:var(--aui-xxs)}.aui-pl-xs{padding-left:var(--aui-xs)}.aui-pl-s{padding-left:var(--aui-s)}.aui-pl-m{padding-left:var(--aui-m)}.aui-pl-l{padding-left:var(--aui-l)}.aui-pl-xl{padding-left:var(--aui-xl)}.aui-pl-xxl{padding-left:var(--aui-xxl)}.aui-pr-none{padding-right:0}.aui-pr-xxs{padding-right:var(--aui-xxs)}.aui-pr-xs{padding-right:var(--aui-xs)}.aui-pr-s{padding-right:var(--aui-s)}.aui-pr-m{padding-right:var(--aui-m)}.aui-pr-l{padding-right:var(--aui-l)}.aui-pr-xl{padding-right:var(--aui-xl)}.aui-pr-xxl{padding-right:var(--aui-xxl)}.aui-ma-auto{margin:auto}.aui-mt-auto{margin-top:auto}.aui-mb-auto{margin-bottom:auto}.aui-ml-auto{margin-left:auto}.aui-mr-auto{margin-right:auto}.aui-ma-none{margin:0}.aui-ma-xxs{margin:var(--aui-xxs)}.aui-ma-xs{margin:var(--aui-xs)}.aui-ma-s{margin:var(--aui-s)}.aui-ma-m{margin:var(--aui-m)}.aui-ma-l{margin:var(--aui-l)}.aui-ma-xl{margin:var(--aui-xl)}.aui-ma-xxl{margin:var(--aui-xxl)}.aui-mt-none{margin-top:0}.aui-mt-xxs{margin-top:var(--aui-xxs)}.aui-mt-xs{margin-top:var(--aui-xs)}.aui-mt-s{margin-top:var(--aui-s)}.aui-mt-m{margin-top:var(--aui-m)}.aui-mt-l{margin-top:var(--aui-l)}.aui-mt-xl{margin-top:var(--aui-xl)}.aui-mt-xxl{margin-top:var(--aui-xxl)}.aui-mb-none{margin-bottom:0}.aui-mb-xxs{margin-bottom:var(--aui-xxs)}.aui-mb-xs{margin-bottom:var(--aui-xs)}.aui-mb-s{margin-bottom:var(--aui-s)}.aui-mb-m{margin-bottom:var(--aui-m)}.aui-mb-l{margin-bottom:var(--aui-l)}.aui-mb-xl{margin-bottom:var(--aui-xl)}.aui-mb-xxl{margin-bottom:var(--aui-xxl)}.aui-ml-none{margin-left:0}.aui-ml-xxs{margin-left:var(--aui-xxs)}.aui-ml-xs{margin-left:var(--aui-xs)}.aui-ml-s{margin-left:var(--aui-s)}.aui-ml-m{margin-left:var(--aui-m)}.aui-ml-l{margin-left:var(--aui-l)}.aui-ml-xl{margin-left:var(--aui-xl)}.aui-ml-xxl{margin-left:var(--aui-xxl)}.aui-mr-none{margin-right:0}.aui-mr-xxs{margin-right:var(--aui-xxs)}.aui-mr-xs{margin-right:var(--aui-xs)}.aui-mr-s{margin-right:var(--aui-s)}.aui-mr-m{margin-right:var(--aui-m)}.aui-mr-l{margin-right:var(--aui-l)}.aui-mr-xl{margin-right:var(--aui-xl)}.aui-mr-xxl{margin-right:var(--aui-xxl)}.aui-w-full{width:100%}.aui-w-fit{width:fit-content}.aui-w-min{width:min-content}.aui-w-max{width:max-content}.aui-mw-full{max-width:100%}.aui-mw-fit{max-width:fit-content}.aui-mw-min{max-width:min-content}.aui-mw-max{max-width:max-content}.aui-h-full{height:100%}.aui-h-fit{height:fit-content}.aui-h-min{height:min-content}.aui-h-max{height:max-content}.aui-mh-full{max-height:100%}.aui-mh-fit{max-height:fit-content}.aui-mh-min{max-height:min-content}.aui-mh-max{max-height:max-content}.aui-corners--rounded{border-radius:var(--aui-rounded-radius)}.aui-corners--pill{border-radius:var(--aui-pill-radius)}.aui-corners--sharp{border-radius:var(--aui-sharp-radius)}.aui-content--success{background-color:var(--aui-success-background);color:var(--aui-success-color);border-color:var(--aui-success-border)}.aui-content--warning{background-color:var(--aui-warning-background);color:var(--aui-warning-color);border-color:var(--aui-warning-border)}.aui-content--error{background-color:var(--aui-error-background);color:var(--aui-error-color);border-color:var(--aui-error-border)}.aui-content--info{background-color:var(--aui-info-background);color:var(--aui-info-color);border-color:var(--aui-info-border)}.aui-content--static{background-color:var(--aui-static-background);color:var(--aui-default-text-color);border-color:var(--aui-default-border)}.aui-accordion{background-color:var(--aui-default-background);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-container-box-shadow)}.aui-accordion-label{font-weight:600}.aui-accordion-hr{border:none;height:1px;background-color:var(--aui-default-border);width:100%;margin:0}.aui-accordion-arrow{color:var(--aui-select-icon)}.aui-alert{padding:var(--aui-m);border-style:solid;border-width:1px;font-weight:400}.aui-badge{padding:var(--aui-xxs) var(--aui-xs);border-style:solid;border-width:1px;font-weight:500;font-size:14px;width:fit-content}.aui-banner{padding:var(--aui-l) var(--aui-xl);border:none;font-weight:400;width:100%}.aui-action{color:inherit;text-decoration:none;cursor:pointer;outline-color:var(--aui-link-color)}.aui-action:focus:not(:focus-visible){outline:none}.aui-button{background:none;border:none;padding:0}.aui-button-size--regular{padding:var(--aui-s);font-weight:600}.aui-button-size--small{padding:var(--aui-xs);font-size:12px;font-weight:600}.aui-button:disabled{cursor:default !important;opacity:var(--aui-disabled-opacity)}.aui-button--primary{background-color:var(--aui-button-primary-background);color:var(--aui-button-primary-color);box-shadow:var(--aui-button-primary-box-shadow);transition:opacity var(--aui-default-transition)}.aui-button--secondary{color:var(--aui-default-text-color);background-color:var(--aui-default-background);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow);transition:box-shadow var(--aui-default-transition)}.aui-link{font-weight:600;color:var(--aui-link-color);transition:opacity var(--aui-default-transition)}@media(hover: hover){.aui-button--primary:not([disabled]):hover,.aui-link:hover{opacity:var(--aui-default-opacity-dim)}.aui-button--secondary:not([disabled]):hover{box-shadow:0 0 0 1px var(--aui-button-secondary-border-hover) inset,var(--aui-subtle-box-shadow)}}.aui-input-base{outline:none;border:none;background-color:inherit;color:inherit;padding:var(--aui-s);font-weight:400}.aui-input-base::selection{background-color:var(--aui-focus-ring-color)}.aui-icon-input{overflow:scroll}.aui-icon-input input{background-color:rgba(0,0,0,0);width:100%}.aui-input{transition:box-shadow var(--aui-default-transition);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow);background-color:var(--aui-default-background)}.aui-input:disabled{opacity:var(--aui-disabled-opacity);cursor:default}.aui-input:not([disabled]):focus-within,.aui-select-container:not([disabled]):focus-within{box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow),0 0 0 3px var(--aui-focus-ring-color)}.aui-select-container{position:relative;padding:0;width:fit-content;transition:box-shadow var(--aui-default-transition);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow);background-color:var(--aui-default-background)}.aui-select{width:100%;color:inherit;border:none;outline:none;box-shadow:none;cursor:pointer;background-color:rgba(0,0,0,0);padding:var(--aui-s) 28px var(--aui-s) var(--aui-s);font-weight:600;appearance:none;-webkit-appearance:none;-moz-appearance:none}.aui-select-disabled *{opacity:var(--aui-disabled-opacity);cursor:default}.aui-select-icon{--size: 10px;color:var(--aui-select-icon);width:var(--size);height:var(--size);position:absolute;top:calc(50% + 1px);transform:translateY(-50%);right:var(--size);pointer-events:none}.aui-layer-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10000;background:var(--aui-layer-backdrop-background)}.aui-icon *{color:currentColor;fill:currentColor}.aui-spinner{animation:aui-spinner-animation 1s linear infinite;transform-origin:center;height:var(--aui-l)}@keyframes aui-spinner-animation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.aui-carousel{max-width:100%;position:relative;overflow:hidden;min-height:var(--aui-xxl);min-width:var(--aui-xxl);width:fit-content}.aui-carousel-item{flex:0 0 100%;width:100%;height:100%}.aui-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:var(--aui-l);height:var(--aui-l);padding:0}.aui-carousel-dots{position:absolute;bottom:var(--aui-s);transform:translateX(-50%);left:50%}.aui-carousel-dot{width:var(--aui-m);height:var(--aui-s);padding:0}
|
|
1
|
+
:root{--aui-xxs: 2px;--aui-xs: 4px;--aui-s: 8px;--aui-m: 16px;--aui-l: 24px;--aui-xl: 32px;--aui-xxl: 64px;--aui-moon-gray: #ccc;--aui-dark-gray: #555;--aui-darkest-gray: #333;--aui-obsidian: #121212;--aui-focus-ring-color: #b2dbfa;--aui-default-text-color: black;--aui-default-background: white;--aui-default-border: var(--aui-moon-gray);--aui-disabled-opacity: 0.5;--aui-default-transition: 0.25s ease-in-out;--aui-default-opacity-dim: 0.75;--aui-container-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);--aui-sharp-radius: 0;--aui-rounded-radius: 8px;--aui-pill-radius: 9999px;--aui-button-primary-background: black;--aui-button-primary-color: white;--aui-button-secondary-border-hover: var(--aui-darkest-gray);--aui-subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);--aui-button-primary-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.36);--aui-success-background: #dff2e1;--aui-success-color: #1b5e20;--aui-success-border: #b2dfb1;--aui-warning-background: #fceeb6;--aui-warning-color: #b23904;--aui-warning-border: #e6d5a2;--aui-error-background: #fdecea;--aui-error-color: #b71c1c;--aui-error-border: #f5b7b7;--aui-info-background: #e3f2fd;--aui-info-color: #0d47a1;--aui-info-border: #90caf9;--aui-static-background: #e8e8e8;--aui-layer-backdrop-background: rgba(200, 200, 200, 0.7);--aui-link-color: #0070ff;--aui-select-icon: var(--aui-dark-gray)}[data-theme=dark]{--aui-focus-ring-color: #6699cc;--aui-default-text-color: white;--aui-default-background: var(--aui-obsidian);--aui-default-border: var(--aui-dark-gray);--aui-container-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.36);--aui-button-primary-background: white;--aui-button-primary-color: var(--aui-obsidian);--aui-button-secondary-border-hover: var(--aui-moon-gray);--aui-subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);--aui-button-primary-box-shadow: 0 1px 2px rgba(64, 64, 64, 0.8);--aui-success-background: #2a5733;--aui-success-color: #d9efd8;--aui-success-border: #439e4a;--aui-warning-background: #736230;--aui-warning-color: #fff6d1;--aui-warning-border: #927a3b;--aui-error-background: #663232;--aui-error-color: #f9dadc;--aui-error-border: #8d2a2a;--aui-info-background: #335f72;--aui-info-color: #d4f1f5;--aui-info-border: #1d8ea4;--aui-static-background: var(--aui-darkest-gray);--aui-layer-backdrop-background: rgba(55, 55, 55, 0.7);--aui-link-color: #33bfff;--aui-select-icon: var(--aui-moon-gray)}.aui-corners--rounded{border-radius:var(--aui-rounded-radius)}.aui-corners--pill{border-radius:var(--aui-pill-radius)}.aui-corners--sharp{border-radius:var(--aui-sharp-radius)}.aui-content--success{background-color:var(--aui-success-background);color:var(--aui-success-color);border-color:var(--aui-success-border)}.aui-content--warning{background-color:var(--aui-warning-background);color:var(--aui-warning-color);border-color:var(--aui-warning-border)}.aui-content--error{background-color:var(--aui-error-background);color:var(--aui-error-color);border-color:var(--aui-error-border)}.aui-content--info{background-color:var(--aui-info-background);color:var(--aui-info-color);border-color:var(--aui-info-border)}.aui-content--static{background-color:var(--aui-static-background);color:var(--aui-default-text-color);border-color:var(--aui-default-border)}.aui-accordion{background-color:var(--aui-default-background);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-container-box-shadow)}.aui-accordion-label{font-weight:600}.aui-accordion-hr{border:none;height:1px;background-color:var(--aui-default-border);width:100%;margin:0}.aui-accordion-arrow{color:var(--aui-select-icon)}.aui-alert{padding:var(--aui-m);border-style:solid;border-width:1px;font-weight:400}.aui-badge{padding:var(--aui-xxs) var(--aui-xs);border-style:solid;border-width:1px;font-weight:500;font-size:14px;width:fit-content}.aui-banner{padding:var(--aui-l) var(--aui-xl);border:none;font-weight:400;width:100%}.aui-action{color:inherit;text-decoration:none;cursor:pointer;outline-color:var(--aui-link-color)}.aui-action:focus:not(:focus-visible){outline:none}.aui-button{background:none;border:none;padding:0}.aui-button-size--regular{padding:var(--aui-s);font-weight:600}.aui-button-size--small{padding:var(--aui-xs);font-size:12px;font-weight:600}.aui-button:disabled{cursor:default !important;opacity:var(--aui-disabled-opacity)}.aui-button--primary{background-color:var(--aui-button-primary-background);color:var(--aui-button-primary-color);box-shadow:var(--aui-button-primary-box-shadow);transition:opacity var(--aui-default-transition)}.aui-button--secondary{color:var(--aui-default-text-color);background-color:var(--aui-default-background);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow);transition:box-shadow var(--aui-default-transition)}.aui-link{font-weight:600;color:var(--aui-link-color);transition:opacity var(--aui-default-transition)}@media(hover: hover){.aui-button--primary:not([disabled]):hover,.aui-link:hover{opacity:var(--aui-default-opacity-dim)}.aui-button--secondary:not([disabled]):hover{box-shadow:0 0 0 1px var(--aui-button-secondary-border-hover) inset,var(--aui-subtle-box-shadow)}}.aui-input-base{outline:none;border:none;background-color:inherit;color:inherit;padding:var(--aui-s);font-weight:400}.aui-input-base::selection{background-color:var(--aui-focus-ring-color)}.aui-icon-input{overflow:scroll}.aui-icon-input input{background-color:rgba(0,0,0,0);width:100%}.aui-input{transition:box-shadow var(--aui-default-transition);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow);background-color:var(--aui-default-background)}.aui-input:disabled{opacity:var(--aui-disabled-opacity);cursor:default}.aui-input:not([disabled]):focus-within,.aui-select-container:not([disabled]):focus-within{box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow),0 0 0 3px var(--aui-focus-ring-color)}.aui-select-container{position:relative;padding:0;width:fit-content;transition:box-shadow var(--aui-default-transition);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-box-shadow);background-color:var(--aui-default-background)}.aui-select{width:100%;color:inherit;border:none;outline:none;box-shadow:none;cursor:pointer;background-color:rgba(0,0,0,0);padding:var(--aui-s) 28px var(--aui-s) var(--aui-s);font-weight:600;appearance:none;-webkit-appearance:none;-moz-appearance:none}.aui-select-disabled *{opacity:var(--aui-disabled-opacity);cursor:default}.aui-layer-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10000;background:var(--aui-layer-backdrop-background)}.aui-icon *{color:currentColor;fill:currentColor}.aui-spinner{animation:aui-spinner-animation 1s linear infinite;transform-origin:center;height:var(--aui-l)}@keyframes aui-spinner-animation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.aui-carousel{max-width:100%;position:relative;overflow:hidden;min-height:var(--aui-xxl);min-width:var(--aui-xxl);width:fit-content}.aui-carousel-item{flex:0 0 100%;width:100%;height:100%}.aui-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:var(--aui-l);height:var(--aui-l);padding:0}.aui-carousel-dots{position:absolute;bottom:var(--aui-s);transform:translateX(-50%);left:50%}.aui-carousel-dot{width:var(--aui-m);height:var(--aui-s);padding:0}.aui-flex-x,.aui-flex-y,.aui-flex--x,.aui-flex--y{display:flex}.aui-flex-x{flex-direction:row}.aui-flex-y{flex-direction:column}.aui-flex--x{flex-direction:row-reverse}.aui-flex--y{flex-direction:column-reverse}.aui-flex-wrap{flex-wrap:wrap}.aui-align-start{align-items:flex-start}.aui-align-center{align-items:center}.aui-align-end{align-items:flex-end}.aui-justify-start{justify-content:flex-start}.aui-justify-center{justify-content:center}.aui-justify-between{justify-content:space-between}.aui-justify-around{justify-content:space-around}.aui-justify-end{justify-content:flex-end}.aui-icon-xxs{width:8px;height:8px}.aui-icon-xs{width:12px;height:12px}.aui-icon-s{width:16px;height:16px}.aui-icon-m{width:24px;height:24px}.aui-icon-l{width:32px;height:32px}.aui-icon-xl{width:48px;height:48px}.aui-icon-xxl{width:64px;height:64px}.aui-gap-none{gap:0}.aui-gap-xxs{gap:var(--aui-xxs)}.aui-gap-xs{gap:var(--aui-xs)}.aui-gap-s{gap:var(--aui-s)}.aui-gap-m{gap:var(--aui-m)}.aui-gap-l{gap:var(--aui-l)}.aui-gap-xl{gap:var(--aui-xl)}.aui-gap-xxl{gap:var(--aui-xxl)}.aui-pa-none{padding:0}.aui-pa-xxs{padding:var(--aui-xxs)}.aui-pa-xs{padding:var(--aui-xs)}.aui-pa-s{padding:var(--aui-s)}.aui-pa-m{padding:var(--aui-m)}.aui-pa-l{padding:var(--aui-l)}.aui-pa-xl{padding:var(--aui-xl)}.aui-pa-xxl{padding:var(--aui-xxl)}.aui-pt-none{padding-top:0}.aui-pt-xxs{padding-top:var(--aui-xxs)}.aui-pt-xs{padding-top:var(--aui-xs)}.aui-pt-s{padding-top:var(--aui-s)}.aui-pt-m{padding-top:var(--aui-m)}.aui-pt-l{padding-top:var(--aui-l)}.aui-pt-xl{padding-top:var(--aui-xl)}.aui-pt-xxl{padding-top:var(--aui-xxl)}.aui-pb-none{padding-bottom:0}.aui-pb-xxs{padding-bottom:var(--aui-xxs)}.aui-pb-xs{padding-bottom:var(--aui-xs)}.aui-pb-s{padding-bottom:var(--aui-s)}.aui-pb-m{padding-bottom:var(--aui-m)}.aui-pb-l{padding-bottom:var(--aui-l)}.aui-pb-xl{padding-bottom:var(--aui-xl)}.aui-pb-xxl{padding-bottom:var(--aui-xxl)}.aui-pl-none{padding-left:0}.aui-pl-xxs{padding-left:var(--aui-xxs)}.aui-pl-xs{padding-left:var(--aui-xs)}.aui-pl-s{padding-left:var(--aui-s)}.aui-pl-m{padding-left:var(--aui-m)}.aui-pl-l{padding-left:var(--aui-l)}.aui-pl-xl{padding-left:var(--aui-xl)}.aui-pl-xxl{padding-left:var(--aui-xxl)}.aui-pr-none{padding-right:0}.aui-pr-xxs{padding-right:var(--aui-xxs)}.aui-pr-xs{padding-right:var(--aui-xs)}.aui-pr-s{padding-right:var(--aui-s)}.aui-pr-m{padding-right:var(--aui-m)}.aui-pr-l{padding-right:var(--aui-l)}.aui-pr-xl{padding-right:var(--aui-xl)}.aui-pr-xxl{padding-right:var(--aui-xxl)}.aui-ma-auto{margin:auto}.aui-mt-auto{margin-top:auto}.aui-mb-auto{margin-bottom:auto}.aui-ml-auto{margin-left:auto}.aui-mr-auto{margin-right:auto}.aui-ma-none{margin:0}.aui-ma-xxs{margin:var(--aui-xxs)}.aui-ma-xs{margin:var(--aui-xs)}.aui-ma-s{margin:var(--aui-s)}.aui-ma-m{margin:var(--aui-m)}.aui-ma-l{margin:var(--aui-l)}.aui-ma-xl{margin:var(--aui-xl)}.aui-ma-xxl{margin:var(--aui-xxl)}.aui-mt-none{margin-top:0}.aui-mt-xxs{margin-top:var(--aui-xxs)}.aui-mt-xs{margin-top:var(--aui-xs)}.aui-mt-s{margin-top:var(--aui-s)}.aui-mt-m{margin-top:var(--aui-m)}.aui-mt-l{margin-top:var(--aui-l)}.aui-mt-xl{margin-top:var(--aui-xl)}.aui-mt-xxl{margin-top:var(--aui-xxl)}.aui-mb-none{margin-bottom:0}.aui-mb-xxs{margin-bottom:var(--aui-xxs)}.aui-mb-xs{margin-bottom:var(--aui-xs)}.aui-mb-s{margin-bottom:var(--aui-s)}.aui-mb-m{margin-bottom:var(--aui-m)}.aui-mb-l{margin-bottom:var(--aui-l)}.aui-mb-xl{margin-bottom:var(--aui-xl)}.aui-mb-xxl{margin-bottom:var(--aui-xxl)}.aui-ml-none{margin-left:0}.aui-ml-xxs{margin-left:var(--aui-xxs)}.aui-ml-xs{margin-left:var(--aui-xs)}.aui-ml-s{margin-left:var(--aui-s)}.aui-ml-m{margin-left:var(--aui-m)}.aui-ml-l{margin-left:var(--aui-l)}.aui-ml-xl{margin-left:var(--aui-xl)}.aui-ml-xxl{margin-left:var(--aui-xxl)}.aui-mr-none{margin-right:0}.aui-mr-xxs{margin-right:var(--aui-xxs)}.aui-mr-xs{margin-right:var(--aui-xs)}.aui-mr-s{margin-right:var(--aui-s)}.aui-mr-m{margin-right:var(--aui-m)}.aui-mr-l{margin-right:var(--aui-l)}.aui-mr-xl{margin-right:var(--aui-xl)}.aui-mr-xxl{margin-right:var(--aui-xxl)}.aui-w-full{width:100%}.aui-w-fit{width:fit-content}.aui-w-min{width:min-content}.aui-w-max{width:max-content}.aui-mw-full{max-width:100%}.aui-mw-fit{max-width:fit-content}.aui-mw-min{max-width:min-content}.aui-mw-max{max-width:max-content}.aui-h-full{height:100%}.aui-h-fit{height:fit-content}.aui-h-min{height:min-content}.aui-h-max{height:max-content}.aui-mh-full{max-height:100%}.aui-mh-fit{max-height:fit-content}.aui-mh-min{max-height:min-content}.aui-mh-max{max-height:max-content}.aui-select-icon{--size: 10px;color:var(--aui-select-icon);width:var(--size);height:var(--size);position:absolute;top:calc(50% + 1px);transform:translateY(-50%);right:var(--size);pointer-events:none}
|
package/dist/aui.cjs.js
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react");var B={exports:{}},D={};/**
|
|
2
|
-
* @license React
|
|
3
|
-
* react-jsx-runtime.production.js
|
|
4
|
-
*
|
|
5
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
6
|
-
*
|
|
7
|
-
* This source code is licensed under the MIT license found in the
|
|
8
|
-
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/var se;function we(){if(se)return D;se=1;var t=Symbol.for("react.transitional.element"),e=Symbol.for("react.fragment");function r(s,o,a){var c=null;if(a!==void 0&&(c=""+a),o.key!==void 0&&(c=""+o.key),"key"in o){a={};for(var f in o)f!=="key"&&(a[f]=o[f])}else a=o;return o=a.ref,{$$typeof:t,type:s,key:c,ref:o!==void 0?o:null,props:a}}return D.Fragment=e,D.jsx=r,D.jsxs=r,D}var F={};/**
|
|
10
|
-
* @license React
|
|
11
|
-
* react-jsx-runtime.development.js
|
|
12
|
-
*
|
|
13
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
14
|
-
*
|
|
15
|
-
* This source code is licensed under the MIT license found in the
|
|
16
|
-
* LICENSE file in the root directory of this source tree.
|
|
17
|
-
*/var ae;function ye(){return ae||(ae=1,process.env.NODE_ENV!=="production"&&function(){function t(n){if(n==null)return null;if(typeof n=="function")return n.$$typeof===xe?null:n.displayName||n.name||null;if(typeof n=="string")return n;switch(n){case y:return"Fragment";case S:return"Profiler";case v:return"StrictMode";case P:return"Suspense";case k:return"SuspenseList";case he:return"Activity"}if(typeof n=="object")switch(typeof n.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),n.$$typeof){case j:return"Portal";case _:return(n.displayName||"Context")+".Provider";case L:return(n._context.displayName||"Context")+".Consumer";case M:var d=n.render;return n=n.displayName,n||(n=d.displayName||d.name||"",n=n!==""?"ForwardRef("+n+")":"ForwardRef"),n;case A:return d=n.displayName||null,d!==null?d:t(n.type)||"Memo";case Z:d=n._payload,n=n._init;try{return t(n(d))}catch{}}return null}function e(n){return""+n}function r(n){try{e(n);var d=!1}catch{d=!0}if(d){d=console;var h=d.error,g=typeof Symbol=="function"&&Symbol.toStringTag&&n[Symbol.toStringTag]||n.constructor.name||"Object";return h.call(d,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",g),e(n)}}function s(n){if(n===y)return"<>";if(typeof n=="object"&&n!==null&&n.$$typeof===Z)return"<...>";try{var d=t(n);return d?"<"+d+">":"<...>"}catch{return"<...>"}}function o(){var n=q.A;return n===null?null:n.getOwner()}function a(){return Error("react-stack-top-frame")}function c(n){if(K.call(n,"key")){var d=Object.getOwnPropertyDescriptor(n,"key").get;if(d&&d.isReactWarning)return!1}return n.key!==void 0}function f(n,d){function h(){ee||(ee=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",d))}h.isReactWarning=!0,Object.defineProperty(n,"key",{get:h,configurable:!0})}function m(){var n=t(this.type);return te[n]||(te[n]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),n=this.props.ref,n!==void 0?n:null}function u(n,d,h,g,$,N,V,X){return h=N.ref,n={$$typeof:T,type:n,key:d,props:N,_owner:$},(h!==void 0?h:null)!==null?Object.defineProperty(n,"ref",{enumerable:!1,get:m}):Object.defineProperty(n,"ref",{enumerable:!1,value:null}),n._store={},Object.defineProperty(n._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(n,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(n,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:V}),Object.defineProperty(n,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:X}),Object.freeze&&(Object.freeze(n.props),Object.freeze(n)),n}function E(n,d,h,g,$,N,V,X){var w=d.children;if(w!==void 0)if(g)if(be(w)){for(g=0;g<w.length;g++)R(w[g]);Object.freeze&&Object.freeze(w)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else R(w);if(K.call(d,"key")){w=t(n);var C=Object.keys(d).filter(function(ge){return ge!=="key"});g=0<C.length?"{key: someKey, "+C.join(": ..., ")+": ...}":"{key: someKey}",oe[w+g]||(C=0<C.length?"{"+C.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
18
|
-
let props = %s;
|
|
19
|
-
<%s {...props} />
|
|
20
|
-
React keys must be passed directly to JSX without using spread:
|
|
21
|
-
let props = %s;
|
|
22
|
-
<%s key={someKey} {...props} />`,g,w,C,w),oe[w+g]=!0)}if(w=null,h!==void 0&&(r(h),w=""+h),c(d)&&(r(d.key),w=""+d.key),"key"in d){h={};for(var J in d)J!=="key"&&(h[J]=d[J])}else h=d;return w&&f(h,typeof n=="function"?n.displayName||n.name||"Unknown":n),u(n,w,N,$,o(),h,V,X)}function R(n){typeof n=="object"&&n!==null&&n.$$typeof===T&&n._store&&(n._store.validated=1)}var b=l,T=Symbol.for("react.transitional.element"),j=Symbol.for("react.portal"),y=Symbol.for("react.fragment"),v=Symbol.for("react.strict_mode"),S=Symbol.for("react.profiler"),L=Symbol.for("react.consumer"),_=Symbol.for("react.context"),M=Symbol.for("react.forward_ref"),P=Symbol.for("react.suspense"),k=Symbol.for("react.suspense_list"),A=Symbol.for("react.memo"),Z=Symbol.for("react.lazy"),he=Symbol.for("react.activity"),xe=Symbol.for("react.client.reference"),q=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,K=Object.prototype.hasOwnProperty,be=Array.isArray,H=console.createTask?console.createTask:function(){return null};b={react_stack_bottom_frame:function(n){return n()}};var ee,te={},re=b.react_stack_bottom_frame.bind(b,a)(),ne=H(s(a)),oe={};F.Fragment=y,F.jsx=function(n,d,h,g,$){var N=1e4>q.recentlyCreatedOwnerStacks++;return E(n,d,h,!1,g,$,N?Error("react-stack-top-frame"):re,N?H(s(n)):ne)},F.jsxs=function(n,d,h,g,$){var N=1e4>q.recentlyCreatedOwnerStacks++;return E(n,d,h,!0,g,$,N?Error("react-stack-top-frame"):re,N?H(s(n)):ne)}}()),F}var ce;function Ee(){return ce||(ce=1,process.env.NODE_ENV==="production"?B.exports=we():B.exports=ye()),B.exports}var i=Ee();function p(...t){return t.filter(Boolean).join(" ")}function G(t,e){try{const r=document.getElementById(t);r&&r.scrollIntoView({behavior:e})}catch{return}}function Re(t,e){if(t===void 0)throw new Error(e||"Unexpected undefined value");return t}const x=l.forwardRef(({layout:t,className:e,style:r,...s},o)=>{const a=ve(t);return i.jsx("div",{...s,className:p(a.className,e),style:{...a.style,...r},ref:o})});function ve(t){if(!t)return{className:void 0,style:void 0};const{axis:e,gap:r,align:s,justify:o,padding:a,margin:c,wrap:f}=t,m={};let u=`aui-flex-${e}`;return s&&(u=p(u,`aui-align-${s}`)),o&&(u=p(u,`aui-justify-${o}`)),f&&(u=p(u,"aui-flex-wrap")),r&&(typeof r=="number"?m.gap=r:u=p(u,`aui-gap-${r}`)),a&&(typeof a=="number"?m.padding=a:u=p(u,`aui-pa-${a}`)),c&&(typeof c=="number"?m.margin=c:u=p(u,`aui-ma-${c}`)),{className:u,style:m}}const U="M94.0908,296.3057c-29.82338,0-54-24.17662-54-54s24.17662-54,54-54c.00237,0,.00475,0,.00712,0c.0017,0,141.65138,0,221.99288,0v-222c0-29.82338,24.17662-54,54-54s54,24.17662,54,54c0,.00237,0,.00475,0,.00712s0,273.40726,0,275.97468c0,.00607,0,.01213,0,.0182c0,29.82338-24.17662,54-54,54h-276Z",je={down:{contents:[i.jsx("path",{d:U,transform:"matrix(.707107 0.707107-.707107 0.707107 165.642289-79.868246)"})]},up:{contents:[i.jsx("path",{d:U,transform:"matrix(-.707107-.707107 0.707107-.707107 346.357711 591.868246)"})]},left:{contents:[i.jsx("path",{d:U,transform:"matrix(-.707107 0.707107-.707107-.707107 591.868246 165.642289)"})]},right:{contents:[i.jsx("path",{d:U,transform:"matrix(.707107-.707107 0.707107 0.707107-79.868246 346.357711)"})]}},Te="0 0 512 512",I=l.forwardRef(({icon:t,className:e,size:r,style:s,...o},a)=>{const{contents:c,viewBox:f}=je[t];return i.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:f||Te,className:p("aui-icon",e),style:{width:r,height:r,...s},...o,ref:a,children:c.map((m,u)=>i.jsx(l.Fragment,{children:m},u))})}),W=l.forwardRef(({className:t,...e},r)=>i.jsx("button",{...e,className:p("aui-action aui-button",t),ref:r})),z=l.forwardRef(({variant:t,corners:e,className:r,size:s,...o},a)=>i.jsx(W,{...o,className:p(le({variant:t,corners:e,size:s}),r),ref:a})),le=({variant:t="primary",corners:e="rounded",size:r="regular"})=>`aui-button--${t} aui-button-size--${r} aui-corners--${e}`,ue=l.forwardRef((t,e)=>{const{animated:r,duration:s=.25,keepMounted:o=!1,animateTo:a,animateFrom:c,className:f,style:m,...u}=t,[E,R]=l.useState(r||o),[b,T]=l.useState(!1),j=l.useRef(null),y=l.useRef(null),v=()=>{j.current&&(clearTimeout(j.current),j.current=null),y.current&&(cancelAnimationFrame(y.current),y.current=null)};if(l.useEffect(()=>(r&&E&&(v(),y.current=requestAnimationFrame(()=>T(!0))),v),[r,E]),l.useEffect(()=>(r?R(!0):(v(),T(!1),j.current=window.setTimeout(()=>{o||R(!1)},s*1e3)),v),[r,s,o]),!E)return null;const S=b?a:c;return i.jsx(x,{className:p(f,S?.className),style:{transition:`all ${s}s ease-in-out`,...m,...S?.style},...u,ref:e})}),Se=l.forwardRef(({drawers:t,className:e,duration:r,hideDividers:s,...o},a)=>{const[c,f]=l.useState(new Set);return i.jsx(x,{layout:{axis:"y"},...o,className:p("aui-accordion aui-corners--rounded",e),ref:a,children:t.map((m,u)=>i.jsx(ke,{item:m,open:c.has(u),onOpenChange:E=>f(R=>{const b=new Set(R);return E?b.add(u):b.delete(u),b}),duration:r,showDivider:!s&&u<t.length-1},u))})}),ke=({item:t,open:e,onOpenChange:r,duration:s,showDivider:o})=>{const a=l.useRef(null),[c,f]=l.useState(),m=t.content;return l.useEffect(()=>{e&&m&&a.current&&f(a.current.offsetHeight)},[e,m]),i.jsxs(i.Fragment,{children:[i.jsxs(x,{layout:{axis:"y"},children:[i.jsx(W,{onClick:()=>r(!e),children:i.jsxs(x,{layout:{axis:"x",align:"center",gap:"m",padding:"l"},children:[i.jsx(I,{size:12,icon:e?"down":"right",className:"aui-accordion-arrow"}),i.jsx("span",{className:"aui-accordion-label",children:t.label})]})}),i.jsx(ue,{style:{overflow:"hidden"},keepMounted:!0,duration:s,animated:e,animateFrom:{style:{visibility:"hidden",height:0,transform:"translateY(-4px)",opacity:.9}},animateTo:{style:{height:c,transform:"translateY(0)",opacity:1}},children:i.jsx(x,{ref:a,children:m})})]}),o&&i.jsx("hr",{className:"aui-accordion-hr"})]})},Ne=l.forwardRef(({type:t,corners:e="rounded",className:r,...s},o)=>i.jsx(x,{...s,className:p(`aui-alert aui-content--${t} aui-corners--${e}`,r),ref:o})),_e=l.forwardRef(({type:t,className:e,corners:r="rounded",...s},o)=>i.jsx(x,{...s,className:p(`aui-badge aui-content--${t} aui-corners--${r}`,e),ref:o})),Ae=l.forwardRef(({type:t,className:e,...r},s)=>i.jsx(x,{...r,className:p(`aui-content--${t} aui-banner`,e),ref:s})),$e=1,Oe=l.forwardRef(({children:t,className:e,hideArrows:r,hideDots:s,dotProps:o,leftArrowProps:a,rightArrowProps:c,autoplayInterval:f,duration:m,...u},E)=>{m=Math.max(m??$e,.1),f=f?Math.max(m,f):void 0;const R=t.length,[b,T]=l.useState({cur:0,delta:0,animating:!1}),j=l.useRef(null),{cur:y,delta:v,animating:S}=b,L=ie(y+v,R),_=l.useCallback(k=>{S||k===0||T(A=>({...A,delta:k,animating:!0}))},[S]),M=()=>{T(({delta:k,cur:A})=>({delta:k,animating:!1,cur:ie(A+k,R)}))};if(l.useEffect(()=>(f&&(j.current=window.setInterval(()=>{_(1)},f*1e3)),()=>{const k=j.current;j.current=null,k&&clearInterval(k)}),[f,_]),R<=0)return null;const P=S?{transform:`translateX(${-(v/Math.abs(v))*100}%)`,transition:`transform ${m}s ease-in-out`}:void 0;return i.jsxs(x,{...u,className:p("aui-carousel",e),ref:E,children:[i.jsxs(x,{className:"aui-carousel-slider",style:{...P,flexDirection:v>=0?"row":"row-reverse"},onTransitionEnd:M,children:[i.jsx(x,{className:"aui-carousel-item",children:t[y]}),i.jsx(x,{className:"aui-carousel-item","aria-hidden":!0,children:t[L]})]}),R>1&&i.jsxs(i.Fragment,{children:[!r&&i.jsxs(i.Fragment,{children:[i.jsx(z,{className:p("aui-flex-x aui-align-center aui-justify-center aui-carousel-arrow",a?.className),style:{left:8,...a?.style},corners:"pill","aria-label":"previous",onClick:()=>_(-1),children:a?.children??i.jsx(I,{icon:"left",size:12,style:{marginRight:2}})}),i.jsx(z,{className:p("aui-flex-x aui-align-center aui-justify-center aui-carousel-arrow",c?.className),style:{right:8,...c?.style},corners:"pill","aria-label":"next",onClick:()=>_(1),children:c?.children??i.jsx(I,{icon:"right",size:12,style:{marginLeft:2}})})]}),!s&&i.jsx(x,{layout:{axis:"x",align:"center",gap:"xs"},className:"aui-carousel-dots",children:t.map((k,A)=>i.jsx(z,{className:p("aui-carousel-dot",o?.className),corners:"pill",disabled:y===A||S,onClick:()=>_(A-y),style:o?.style},A))})]})]})});function ie(t,e){return(t%e+e)%e}const Ce=({children:t,onClickOutside:e})=>{const r=l.useRef(null),s=l.useRef(!1),o=l.useRef(!1);l.useEffect(()=>{const c=window.setTimeout(()=>{o.current=!0},0);return()=>{clearTimeout(c),o.current=!1}},[]);const a=l.useCallback(c=>{const f=s.current;s.current=!1,!(!o.current||!r.current||f)&&(c.composedPath().includes(r.current)||e(c))},[e]);return l.useEffect(()=>(document.addEventListener("click",a),()=>document.removeEventListener("click",a)),[a]),l.cloneElement(t,{ref:r,onClick:c=>{s.current=!0,t.props?.onClick?.(c)}})},Y={right:45,left:-45},fe={right:-135,left:-225},O=t=>{const{size:e=36,duration:r=.25,double:s,openStyle:o,open:a,style:c,rounded:f,lineHeight:m,...u}=t,E=m||Math.max(1,Math.round(e/20)),R={width:e,height:e,display:"flex",position:"relative",justifyContent:"center",alignItems:"center",transition:`transform ${r}s ease`},b={height:E,width:e*.7,backgroundColor:"currentColor",position:"absolute",transition:`transform ${r}s ease, opacity ${r}s ease`,borderRadius:f?1e4:0},T=l.useMemo(()=>e/(s?7:4),[e,s]),{outer:j,top:y,middle:v,bottom:S}=o,L=a?j:{},_=a?y:{transform:`translateY(-${T}px)`},M=a?S:{transform:`translateY(${T}px)`},P=a?v:{};return i.jsxs(W,{style:{...c,...L,...R},...u,"aria-label":u["aria-label"]||"hamburger","aria-expanded":a,children:[i.jsx("span",{style:{...b,..._}}),!s&&i.jsx("span",{style:{...b,...P}}),i.jsx("span",{style:{...b,...M}})]})},de=t=>{const{direction:e="left",...r}=t,s=l.useMemo(()=>{const o=Y[e],a=`rotate(${o}deg)`,c=`rotate(${-o}deg)`;return{top:{transform:a},middle:{transform:"scale(0)"},bottom:{transform:c}}},[e]);return i.jsx(O,{...r,openStyle:s})},Le=t=>{const{direction:e="left",...r}=t,s=l.useMemo(()=>{const o=Y[e],a=`rotate(${o}deg)`,c=`rotate(${-o}deg)`;return{top:{transform:a},bottom:{transform:c}}},[e]);return i.jsx(O,{...r,double:!0,openStyle:s})},Me=t=>{const{direction:e="left",...r}=t,s=l.useMemo(()=>{const o=fe[e],a=`rotate(${o}deg)`,c=`rotate(${-o}deg)`;return{top:{transform:a},bottom:{transform:c}}},[e]);return i.jsx(O,{...r,double:!0,openStyle:s})},Pe=t=>{const{direction:e="left",...r}=t,s=l.useMemo(()=>{const o=Y[e],a=`rotate(${o}deg)`,c=`rotate(${-o}deg)`;return{top:{transform:a},bottom:{transform:c},outer:{transform:"rotate(180deg)"}}},[e]);return i.jsx(O,{...r,double:!0,openStyle:s})},De=t=>{const{direction:e="left",...r}=t,s=l.useMemo(()=>{const o=Y[e],a=`rotate(${o}deg)`,c=`rotate(${-o}deg)`;return{top:{transform:a},middle:{opacity:0},bottom:{transform:c}}},[e]);return i.jsx(O,{...r,openStyle:s})},Fe=t=>{const{direction:e="left",...r}=t,s=l.useMemo(()=>{const o=fe[e],a=`rotate(${o}deg)`,c=`rotate(${-o}deg)`;return{top:{transform:a},middle:{transform:"scale(0)"},bottom:{transform:c}}},[e]);return i.jsx(O,{...r,openStyle:s})},Ie=t=>{const{direction:e="left",...r}=t,s=l.useMemo(()=>{const o=Y[e],a=`rotate(${o}deg)`,c=`rotate(${-o}deg)`;return{top:{transform:a},middle:{opacity:0},bottom:{transform:c},outer:{transform:"rotate(180deg)"}}},[e]);return i.jsx(O,{...r,openStyle:s})},Ye=l.forwardRef(({className:t,corners:e="rounded",...r},s)=>i.jsx("input",{...r,ref:s,className:p(`aui-input-base aui-input aui-corners--${e}`,t)})),Be=l.forwardRef(({className:t,rows:e=3,corners:r="rounded",...s},o)=>i.jsx("textarea",{...s,ref:o,className:p(`aui-input-base aui-input aui-corners--${r}`,t),rows:e})),Ue=l.forwardRef(({startIcon:t,endIcon:e,className:r,style:s,corners:o="rounded",inputProps:a},c)=>i.jsxs(x,{layout:{axis:"x",align:"center"},className:p(`aui-input aui-icon-input aui-corners--${o}`,r),style:s,ref:c,children:[t,i.jsx("input",{...a,className:p(`aui-input-base aui-corners--${o}`,a?.className)}),e]})),ze=()=>{const t=window.scrollY,e=document.body.style,r=document.documentElement.style,{overflow:s,position:o,top:a,width:c}=e,{scrollBehavior:f}=r;return r.scrollBehavior="auto",e.overflow="hidden",e.position="fixed",e.top=`-${t}px`,e.width="100%",()=>{e.overflow=s,e.position=o,e.top=a,e.width=c,window.scrollTo(0,t),r.scrollBehavior=f}},me=(t=!0)=>{l.useEffect(()=>{if(t)return ze()},[t])},We=t=>{const{onMatch:e,onUnmatch:r,query:s}=t,[o,a]=l.useState(!1);return l.useEffect(()=>{const c=window.matchMedia(s),f=m=>{m.matches?e?.():r?.(),a(m.matches)};return c.addEventListener("change",f),a(c.matches),()=>c.removeEventListener("change",f)},[e,r,s]),o},qe=()=>{const[t,e]=l.useState({scrollX:window.scrollX,scrollY:window.scrollY});return l.useEffect(()=>{const r=()=>{e({scrollX:window.scrollX,scrollY:window.scrollY})};return window.addEventListener("scroll",r),()=>window.removeEventListener("scroll",r)},[]),t},He='a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]',pe=(t=!0)=>{const e=l.useRef(null),r=l.useRef(null),s=l.useCallback(()=>{e.current&&(r.current=e.current.querySelectorAll(He))},[]);return l.useEffect(()=>{if(!t||!e.current)return;s();const o=c=>{if(c.key!=="Tab")return;if(!r.current||r.current.length===0)return c.preventDefault();const{activeElement:f}=document,m=r.current[0],u=r.current[r.current.length-1];c.shiftKey&&f===m?(u.focus(),c.preventDefault()):!c.shiftKey&&f===u?(m.focus(),c.preventDefault()):e.current?.contains(f)||((c.shiftKey?u:m).focus(),c.preventDefault())},a=new MutationObserver(s);return a.observe(e.current,{childList:!0,subtree:!0}),document.addEventListener("keydown",o),()=>{document.removeEventListener("keydown",o),a.disconnect()}},[t,s]),e},Ve=(t={})=>{const{active:e=!0,behavior:r,delay:s}=t;l.useEffect(()=>{const o=window.location.hash;if(!e||o?.length<=1)return;const a=o.substring(1);if(s!==void 0){const c=setTimeout(()=>G(a,r),s);return()=>clearTimeout(c)}G(a,r)},[e,r,s])},Xe=t=>{l.useEffect(()=>(window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)),[t])},Je=l.forwardRef(({onClose:t,children:e,className:r,disableEscape:s=!1,visible:o,onMouseDown:a,...c},f)=>{const m=pe(o);return l.useEffect(()=>{const u=E=>{E.key==="Escape"&&t?.()};return s||document.addEventListener("keydown",u),()=>{s||document.removeEventListener("keydown",u)}},[t,s]),i.jsx(x,{layout:{axis:"y",align:"center",justify:"center"},...c,className:p("aui-layer-backdrop",r),onMouseDown:u=>{a?.(u),t?.()},ref:f,children:l.cloneElement(e,{ref:m,onMouseDown:u=>{u.stopPropagation(),e.props?.onMouseDown?.(u)}})})}),Ge=l.forwardRef(({returnFocusOnEscape:t,disableScrollLock:e,...r},s)=>(me(!e),l.useEffect(()=>()=>{const o=document.activeElement;t||o?.blur?.()},[t]),i.jsx(Je,{...r,visible:!0,ref:s}))),Q=l.forwardRef(({LinkElement:t,to:e,className:r,external:s,...o},a)=>{const c={...s?{target:"_blank",rel:"noreferrer noopener"}:{},...o,className:p("aui-action",r)};return t?i.jsx(t,{...c,to:e,ref:a}):i.jsx("a",{...c,href:e,ref:a})}),Qe=l.forwardRef(({className:t,variant:e,corners:r,size:s,...o},a)=>i.jsx(Q,{...o,className:p(le({variant:e,corners:r,size:s}),t),ref:a})),Ze=l.forwardRef(({className:t,...e},r)=>i.jsx(Q,{...e,className:p("aui-link",t),ref:r})),Ke=({className:t,options:e,getOptionLabel:r,corners:s="rounded",style:o,disabled:a,...c},f)=>i.jsxs(x,{className:p("aui-select-container",`aui-corners--${s}`,a?"aui-select-disabled":void 0,t),style:o,children:[i.jsx("select",{...c,ref:f,className:`aui-select aui-corners--${s}`,disabled:a,children:e.map((m,u)=>i.jsx("option",{value:m,children:r?.(m)||m},u))}),i.jsx(I,{icon:"down",className:"aui-select-icon","aria-hidden":!0})]}),et=l.forwardRef(Ke),tt=({className:t,...e})=>i.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",className:p("aui-spinner",t),...e,children:i.jsx("path",{fill:"currentColor",d:"M256,0C114.62,0,0,114.62,0,256S114.62,512,256,512c70.64,0,134.59-28.61,180.91-74.88l-31.11-31.11c-38.35,38.3-91.31,61.99-149.8,61.99-117.08,0-212-94.92-212-212S138.92,44,256,44V0Z"})});exports.Accordion=Se;exports.Alert=Ne;exports.Animated=ue;exports.Badge=_e;exports.Banner=Ae;exports.Box=x;exports.Button=z;exports.ButtonLink=Qe;exports.Carousel=Oe;exports.ClickOutside=Ce;exports.DoubleCross=Le;exports.DoubleFlip=Me;exports.DoubleSpin=Pe;exports.Hamburger=de;exports.Icon=I;exports.IconInput=Ue;exports.Input=Ye;exports.Layer=Ge;exports.Link=Ze;exports.Select=et;exports.Spinner=tt;exports.TextArea=Be;exports.TripleFade=De;exports.TripleFlip=Fe;exports.TriplePrestige=de;exports.TripleSpin=Ie;exports.UnstyledButton=W;exports.UnstyledLink=Q;exports.assertDefined=Re;exports.classNames=p;exports.scrollToId=G;exports.useFocusTrap=pe;exports.useMediaQuery=We;exports.useScroll=qe;exports.useScrollLock=me;exports.useScrollToHash=Ve;exports.useWindowResize=Xe;
|