@adamjanicki/ui 1.6.2 → 1.6.4

package/components/Accordion/Accordion.d.ts

@@ -4,7 +4,7 @@ type Props = Omit<BoxProps, "children"> & {
     /**
      * Drawers to render as accordion sections
      */
-    drawers: Drawer[];
+    drawers: UncontrolledDrawer[] | ControlledDrawer[];
     /**
      * Duration of the drawer animation (in seconds)
      */
@@ -16,7 +16,7 @@ type Props = Omit<BoxProps, "children"> & {
     hideDividers?: boolean;
 };
 declare const Accordion: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
-type Drawer = {
+type UncontrolledDrawer = {
     /**
      * Label for the accordion drawer
      */
@@ -26,12 +26,14 @@ type Drawer = {
      */
     content: React.ReactNode;
 };
-type DrawerProps = {
+type ControlledDrawer = UncontrolledDrawer & {
+    /**
+     * Whether the drawer is open
+     */
     open: boolean;
+    /**
+     * Callback that fires when the open state changes for this drawer
+     */
     onOpenChange: (open: boolean) => void;
-    item: Drawer;
-    duration?: number;
-    showDivider: boolean;
 };
-declare const Drawer: ({ item, open, onOpenChange, duration, showDivider, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
 export default Accordion;

package/components/Accordion/Accordion.js

@@ -30,24 +30,24 @@ import { classNames } from "../../functions";
 var Accordion = React.forwardRef(function (_a, ref) {
     var drawers = _a.drawers, className = _a.className, duration = _a.duration, hideDividers = _a.hideDividers, layout = _a.layout, rest = __rest(_a, ["drawers", "className", "duration", "hideDividers", "layout"]);
     var _b = useState(new Set()), openIndices = _b[0], setOpenIndices = _b[1];
-    return (_jsx(Box, __assign({ layout: __assign({ axis: "y" }, layout) }, rest, { className: classNames("aui-accordion aui-corners--rounded", className), ref: ref, children: drawers.map(function (item, i) { return (_jsx(Drawer, { item: item, open: openIndices.has(i), onOpenChange: function (open) {
-                return setOpenIndices(function (prev) {
-                    var next = new Set(prev);
-                    if (open) {
-                        next.add(i);
-                    }
-                    else {
-                        next.delete(i);
-                    }
-                    return next;
-                });
-            }, duration: duration, showDivider: !hideDividers && i < drawers.length - 1 }, i)); }) })));
+    return (_jsx(Box, __assign({ layout: __assign({ axis: "y" }, layout) }, rest, { className: classNames("aui-accordion aui-corners--rounded", className), ref: ref, children: drawers.map(function (item, i) { return (_jsx(Drawer, { item: __assign({ open: openIndices.has(i), onOpenChange: function (open) {
+                    return setOpenIndices(function (prev) {
+                        var next = new Set(prev);
+                        if (open) {
+                            next.add(i);
+                        }
+                        else {
+                            next.delete(i);
+                        }
+                        return next;
+                    });
+                } }, item), duration: duration, showDivider: !hideDividers && i < drawers.length - 1 }, i)); }) })));
 });
 var Drawer = function (_a) {
-    var item = _a.item, open = _a.open, onOpenChange = _a.onOpenChange, duration = _a.duration, showDivider = _a.showDivider;
+    var item = _a.item, duration = _a.duration, showDivider = _a.showDivider;
     var boxRef = useRef(null);
     var _b = useState(), height = _b[0], setHeight = _b[1];
-    var children = item.content;
+    var children = item.content, open = item.open, onOpenChange = item.onOpenChange;
     useEffect(function () {
         if (open && children && boxRef.current) {
             setHeight(boxRef.current.offsetHeight);
@@ -55,7 +55,7 @@ var Drawer = function (_a) {
     }, [open, children]);
     // TODO: change this to use calc-size when supported
     // https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size#browser_compatibility
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { layout: { axis: "y" }, children: [_jsx(UnstyledButton, { onClick: function () { return onOpenChange(!open); }, children: _jsxs(Box, { layout: { axis: "x", align: "center", gap: "s", padding: "m" }, children: [_jsx(Icon, { size: "xs", icon: open ? "chevron-down" : "chevron-right", className: "aui-accordion-arrow" }), _jsx("span", { className: "aui-accordion-label", children: item.label })] }) }), _jsx(Animated, { style: { overflow: "hidden" }, keepMounted: true, duration: duration, animated: open, animateFrom: {
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { layout: { axis: "y" }, children: [_jsx(UnstyledButton, { onClick: function () { return onOpenChange(!open); }, children: _jsxs(Box, { layout: { axis: "x", align: "center", gap: "s", padding: "m" }, children: [_jsx(Icon, { size: "xs", icon: open ? "chevron-down" : "chevron-right", className: "aui-accordion-arrow" }), _jsx("span", { className: "aui-accordion-label", children: item.label })] }) }), _jsx(Animated, { style: { overflow: "hidden" }, keepMounted: true, duration: duration, visible: open, animateFrom: {
                             style: {
                                 visibility: "hidden",
                                 height: 0,

package/components/Animated/Animated.d.ts

@@ -3,15 +3,24 @@ import type { Style } from "../../utils/types";
 import { type BoxProps } from "../Box/Box";
 type Props = BoxProps & {
     /**
-     * Whether to begin the animation.
+     * Whether to begin the animation and render the component.
      * Set to true to start animation, false to start the exit animation.
      */
-    animated: boolean;
+    visible: boolean;
     /**
      * Duration of the animation in seconds
      * @default 0.25
      */
-    duration?: number;
+    duration?: number | {
+        /**
+         * Length of the forward direction
+         */
+        forward: number;
+        /**
+         * Length of the reverse direction
+         */
+        reverse: number;
+    };
     /**
      * Whether to keep the component mounted when it is not animated
      * @default false
@@ -40,6 +49,11 @@ type Props = BoxProps & {
          */
         style?: Style;
     };
+    /**
+     * The properties to apply a transition
+     * @default ['all']
+     */
+    transitionProperties?: string[];
 };
 declare const Animated: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Animated;

package/components/Animated/Animated.js

@@ -25,9 +25,12 @@ import React, { useState, useEffect, useRef } from "react";
 import classNames from "../../functions/classNames";
 import Box from "../Box/Box";
 var Animated = React.forwardRef(function (props, ref) {
-    var animated = props.animated, _a = props.duration, duration = _a === void 0 ? 0.25 : _a, _b = props.keepMounted, keepMounted = _b === void 0 ? false : _b, animateTo = props.animateTo, animateFrom = props.animateFrom, className = props.className, style = props.style, rest = __rest(props, ["animated", "duration", "keepMounted", "animateTo", "animateFrom", "className", "style"]);
-    var _c = useState(animated || keepMounted), shouldRender = _c[0], setShouldRender = _c[1];
-    var _d = useState(false), isAnimatingForward = _d[0], setIsAnimatingForward = _d[1];
+    var visible = props.visible, _a = props.duration, duration = _a === void 0 ? 0.25 : _a, _b = props.keepMounted, keepMounted = _b === void 0 ? false : _b, _c = props.transitionProperties, transitionProperties = _c === void 0 ? ["all"] : _c, animateTo = props.animateTo, animateFrom = props.animateFrom, className = props.className, style = props.style, rest = __rest(props, ["visible", "duration", "keepMounted", "transitionProperties", "animateTo", "animateFrom", "className", "style"]);
+    var forwardDuration = typeof duration === "number" ? duration : duration.forward;
+    var reverseDuration = typeof duration === "number" ? duration : duration.reverse;
+    var instantForward = forwardDuration <= 0;
+    var instantReverse = reverseDuration <= 0;
+    var _d = useState("from"), phase = _d[0], setPhase = _d[1];
     var timeoutRef = useRef(null);
     var animationFrameRef = useRef(null);
     var clearRefs = function () {
@@ -41,35 +44,51 @@ var Animated = React.forwardRef(function (props, ref) {
         }
     };
     useEffect(function () {
-        // initiate forward animation
-        if (animated && shouldRender) {
-            clearRefs();
-            animationFrameRef.current = requestAnimationFrame(function () {
-                return setIsAnimatingForward(true);
-            });
-        }
-        return clearRefs;
-    }, [animated, shouldRender]);
-    useEffect(function () {
-        // make container element appear on DOM
-        if (animated) {
-            setShouldRender(true);
-        }
-        // initiate reverse animation
-        else {
-            clearRefs();
-            setIsAnimatingForward(false);
-            timeoutRef.current = window.setTimeout(function () {
-                if (!keepMounted) {
-                    setShouldRender(false);
+        clearRefs();
+        if (visible) {
+            if (phase !== "forward") {
+                if (instantForward) {
+                    setPhase("forward");
                 }
-            }, duration * 1000);
+                else {
+                    animationFrameRef.current = requestAnimationFrame(function () {
+                        return setPhase("forward");
+                    });
+                }
+            }
+        }
+        else if (phase !== "from") {
+            if (instantReverse) {
+                setPhase("from");
+            }
+            else if (phase !== "reverse") {
+                setPhase("reverse");
+            }
+            else if (phase === "reverse") {
+                timeoutRef.current = window.setTimeout(function () { return setPhase("from"); }, reverseDuration * 1000);
+            }
         }
         return clearRefs;
-    }, [animated, duration, keepMounted]);
-    if (!shouldRender)
+    }, [visible, phase, instantForward, instantReverse, reverseDuration]);
+    if (phase === "from" && !keepMounted && !visible)
         return null;
-    var currentAnimation = isAnimatingForward ? animateTo : animateFrom;
-    return (_jsx(Box, __assign({ className: classNames(className, currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.className), style: __assign(__assign({ transition: "all ".concat(duration, "s ease-in-out") }, style), currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.style) }, rest, { ref: ref })));
+    var currentAnimation = phase === "forward" || (visible && instantForward)
+        ? animateTo
+        : animateFrom;
+    var transition = undefined;
+    if (phase === "forward" && !instantForward) {
+        transition = makeTransition(transitionProperties, forwardDuration);
+    }
+    else if (phase === "reverse" && !instantReverse) {
+        transition = makeTransition(transitionProperties, reverseDuration);
+    }
+    return (_jsx(Box, __assign({ className: classNames(className, currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.className), style: __assign(__assign({ transition: transition }, style), currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.style) }, rest, { ref: ref })));
 });
+var makeTransition = function (transitionProperties, duration) {
+    return transitionProperties.length > 0
+        ? transitionProperties
+            .map(function (prop) { return "".concat(prop, " ").concat(duration, "s ease-in-out"); })
+            .join(", ")
+        : undefined;
+};
 export default Animated;

package/components/Avatar/Avatar.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import type { CornerType, SizeToken } from "../../utils/types";
+import { type BoxProps } from "../Box/Box";
+type Props = Omit<BoxProps, "children"> & {
+    /**
+     * How to treat the border radius of the avatar
+     * @default "rounded"
+     */
+    corners?: CornerType;
+    /**
+     * Size of the avatar
+     * @default "s"
+     */
+    size?: SizeToken | number;
+    /**
+     * Image to be used in the background
+     */
+    backgroundImage?: string;
+    /**
+     * Username to render the first char of,
+     * or as a fallback if there's a 404 getting the backgroundImage url
+     */
+    username: string;
+};
+declare const Avatar: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Avatar;

package/components/Avatar/Avatar.js

@@ -0,0 +1,56 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useState } from "react";
+import Box from "../Box/Box";
+import { classNames } from "../../functions";
+var Avatar = React.forwardRef(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? "s" : _b, backgroundImage = _a.backgroundImage, className = _a.className, style = _a.style, _c = _a.corners, corners = _c === void 0 ? "rounded" : _c, username = _a.username, rest = __rest(_a, ["size", "backgroundImage", "className", "style", "corners", "username"]);
+    var _d = useState(false), imageError = _d[0], setImageError = _d[1];
+    var useFallback = imageError || !backgroundImage;
+    var color = chooseColor(username);
+    var avatarClassName = "aui-avatar aui-corners--".concat(corners);
+    if (useFallback) {
+        avatarClassName = classNames(avatarClassName, "aui-avatar-".concat(color));
+    }
+    var imageClassName = undefined;
+    var avatarStyle = {};
+    var imageStyle = undefined;
+    if (typeof size === "number") {
+        avatarStyle = { width: size, height: size, fontSize: 0.8 * size };
+        imageStyle = { width: size, height: size };
+    }
+    else {
+        avatarClassName = classNames(avatarClassName, "aui-avatar-".concat(size));
+        imageClassName = "aui-avatar-".concat(size);
+    }
+    var fallbackCharacter = username[0];
+    return (_jsx(Box, __assign({ className: classNames(avatarClassName, className), style: __assign(__assign({}, avatarStyle), style) }, rest, { ref: ref, children: !useFallback ? (_jsx("img", { src: backgroundImage, alt: "", className: imageClassName, onError: function () { return setImageError(true); }, style: imageStyle })) : (fallbackCharacter) })));
+});
+var colorOptions = ["red", "yellow", "green", "blue", "purple"];
+// simple deterministic "hash" to get a background color
+function chooseColor(username) {
+    return colorOptions[username.split("").reduce(function (sum, char) { return sum + char.charCodeAt(0); }, 0) %
+        colorOptions.length];
+}
+export default Avatar;

package/components/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+import Avatar from "./Avatar";
+export default Avatar;

package/components/Avatar/index.js

@@ -0,0 +1,2 @@
+import Avatar from "./Avatar";
+export default Avatar;

package/components/Button/Button.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
 import type { CornerType, Layout } from "../../utils/types";
-type DefaultButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+import { Props as IconProps } from "../Icon/Icon";
+type BaseButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+type DefaultButtonProps = BaseButtonProps & {
     /**
      * Additional styles to apply to the layout that are transformed to classNames to be easier to override if needed
      */
@@ -25,6 +27,26 @@ export type VisualButtonProps = {
 };
 type ButtonProps = DefaultButtonProps & VisualButtonProps;
 export declare const UnstyledButton: React.ForwardRefExoticComponent<Omit<DefaultButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type IconButtonProps = Omit<BaseButtonProps, "children"> & {
+    /**
+     * The hover effect to play when the user hovers over the button
+     * @default "dim"
+     */
+    variant?: "dim" | "undim";
+    /**
+     * Which icon to render in the button
+     */
+    icon: IconProps["icon"];
+    /**
+     * The size of the icon
+     */
+    size?: IconProps["size"];
+    /**
+     * Other props to pass to the icon element
+     */
+    iconProps?: Omit<IconProps, "icon" | "size">;
+};
+export declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export declare const getButtonClassName: ({ variant, corners, size, }: VisualButtonProps) => string;
 export default Button;

package/components/Button/Button.js

@@ -24,10 +24,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import classNames from "../../functions/classNames";
 import transformLayout from "../../utils/transformLayout";
+import Icon from "../Icon/Icon";
 export var UnstyledButton = React.forwardRef(function (_a, ref) {
     var className = _a.className, layout = _a.layout, props = __rest(_a, ["className", "layout"]);
     return (_jsx("button", __assign({}, props, { className: classNames("aui-action aui-button", transformLayout(layout), className), ref: ref })));
 });
+export var IconButton = React.forwardRef(function (_a, ref) {
+    var icon = _a.icon, size = _a.size, iconProps = _a.iconProps, _b = _a.variant, variant = _b === void 0 ? "dim" : _b, className = _a.className, rest = __rest(_a, ["icon", "size", "iconProps", "variant", "className"]);
+    return (_jsx(UnstyledButton, __assign({}, rest, { layout: { axis: "x", align: "center", justify: "center" }, className: classNames("aui-".concat(variant), className), ref: ref, children: _jsx(Icon, __assign({ icon: icon, size: size }, iconProps)) })));
+});
 var Button = React.forwardRef(function (_a, ref) {
     var variant = _a.variant, layout = _a.layout, corners = _a.corners, className = _a.className, size = _a.size, rest = __rest(_a, ["variant", "layout", "corners", "className", "size"]);
     return (_jsx(UnstyledButton, __assign({}, rest, { className: classNames(getButtonClassName({ variant: variant, corners: corners, size: size }), transformLayout(layout), className), ref: ref })));

package/components/Button/index.d.ts

@@ -1,3 +1,3 @@
-import Button, { UnstyledButton } from "./Button";
-export { UnstyledButton };
+import Button, { UnstyledButton, IconButton } from "./Button";
+export { UnstyledButton, IconButton };
 export default Button;

package/components/Button/index.js

@@ -1,3 +1,3 @@
-import Button, { UnstyledButton } from "./Button";
-export { UnstyledButton };
+import Button, { UnstyledButton, IconButton } from "./Button";
+export { UnstyledButton, IconButton };
 export default Button;

package/components/ClickOutside/ClickOutside.d.ts

@@ -1,4 +1,9 @@
 import React from "react";
+declare const mouseEvents: {
+    readonly click: "onClick";
+    readonly mousedown: "onMouseDown";
+    readonly mouseup: "onMouseUp";
+};
 type Props = {
     /**
      * The children to render.
@@ -11,6 +16,11 @@ type Props = {
      * @param event - The mouse event object
      */
     onClickOutside: (event: MouseEvent) => void;
+    /**
+     * The mouse event to trigger on
+     * @default "click"
+     */
+    mouseEvent?: keyof typeof mouseEvents;
 };
-declare const ClickOutside: ({ children, onClickOutside, }: Props) => React.JSX.Element;
+declare const ClickOutside: ({ children, onClickOutside, mouseEvent, }: Props) => React.JSX.Element;
 export default ClickOutside;

package/components/ClickOutside/ClickOutside.js

@@ -1,6 +1,13 @@
 import { cloneElement, useCallback, useEffect, useRef } from "react";
+import useMergeRefs from "../../hooks/useMergeRefs";
+var mouseEvents = {
+    click: "onClick",
+    mousedown: "onMouseDown",
+    mouseup: "onMouseUp",
+};
 var ClickOutside = function (_a) {
-    var children = _a.children, onClickOutside = _a.onClickOutside;
+    var _b;
+    var children = _a.children, onClickOutside = _a.onClickOutside, _c = _a.mouseEvent, mouseEvent = _c === void 0 ? "click" : _c;
     var ref = useRef(null);
     var clickWithinChildRef = useRef(false);
     var startedRef = useRef(false);
@@ -14,27 +21,35 @@ var ClickOutside = function (_a) {
         };
     }, []);
     var handleClickOutside = useCallback(function (event) {
+        var _a;
         var clickedWithinChild = clickWithinChildRef.current;
         clickWithinChildRef.current = false;
-        if (!startedRef.current || !ref.current || clickedWithinChild)
+        var childElement = ref.current;
+        if (!startedRef.current || !childElement || clickedWithinChild)
             return;
-        if (!event.composedPath().includes(ref.current)) {
+        var path = ((_a = event.composedPath) === null || _a === void 0 ? void 0 : _a.call(event)) || [];
+        var isInside = path.includes(childElement) ||
+            childElement.contains(event.target);
+        if (!isInside) {
             onClickOutside(event);
         }
     }, [onClickOutside]);
     useEffect(function () {
-        document.addEventListener("click", handleClickOutside);
-        return function () { return document.removeEventListener("click", handleClickOutside); };
-    }, [handleClickOutside]);
-    return cloneElement(children, {
-        ref: ref,
-        onClick: function (event) {
+        document.addEventListener(mouseEvent, handleClickOutside);
+        return function () { return document.removeEventListener(mouseEvent, handleClickOutside); };
+    }, [handleClickOutside, mouseEvent]);
+    var mergedRef = useMergeRefs(ref, children.props.ref);
+    var mouseEventPropName = mouseEvents[mouseEvent];
+    return cloneElement(children, (_b = {
+            ref: mergedRef
+        },
+        _b[mouseEventPropName] = function (event) {
             var _a, _b;
             // point of this is to let us know that click originated
             // from the child element, so we can ignore it
             clickWithinChildRef.current = true;
-            (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+            (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a[mouseEventPropName]) === null || _b === void 0 ? void 0 : _b.call(_a, event);
         },
-    });
+        _b));
 };
 export default ClickOutside;

package/components/Icon/Icon.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { type IconType } from "./icons";
+import type { SizeToken } from "../../utils/types";
 export type Props = Omit<React.DetailedHTMLProps<React.SVGAttributes<SVGSVGElement>, SVGSVGElement>, "children" | "viewBox"> & {
     /**
      * The version of icon to render
@@ -9,7 +10,7 @@ export type Props = Omit<React.DetailedHTMLProps<React.SVGAttributes<SVGSVGEleme
      * Size of the icon; will control both width and height
      * @default "s"
      */
-    size?: "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
+    size?: SizeToken;
 };
 declare const Icon: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default Icon;

package/components/Layer/Layer.d.ts

@@ -10,11 +10,6 @@ type Props = Omit<BoxProps, "children"> & {
      * IMPORTANT: the child must be able to accept a ref
      */
     children: React.ReactElement<any>;
-    /**
-     * [Optional] Whether to disable the escape key to close the layer
-     * @default false
-     */
-    disableEscape?: boolean;
     /**
      * [Optional] Whether to return focus to the element that triggered the layer
      * @default false

package/components/Layer/Layer.js

@@ -25,14 +25,13 @@ import React, { useEffect } from "react";
 import { useFocusTrap, useScrollLock } from "../../hooks";
 import classNames from "../../functions/classNames";
 import Box from "../Box/Box";
+import useMergeRefs from "../../hooks/useMergeRefs";
 var Layer = React.forwardRef(function (_a, ref) {
-    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"]);
+    var returnFocusOnEscape = _a.returnFocusOnEscape, disableScrollLock = _a.disableScrollLock, onClose = _a.onClose, children = _a.children, className = _a.className, onMouseDown = _a.onMouseDown, layout = _a.layout, rest = __rest(_a, ["returnFocusOnEscape", "disableScrollLock", "onClose", "children", "className", "onMouseDown", "layout"]);
     var focusRef = useFocusTrap(true);
     // Lock and unlock on mount and unmount
     useScrollLock(!disableScrollLock);
     useEffect(function () {
-        if (disableEscape)
-            return;
         var handleEscape = function (event) {
             var _a;
             if (event.key === "Escape") {
@@ -47,12 +46,13 @@ var Layer = React.forwardRef(function (_a, ref) {
         return function () {
             document.removeEventListener("keydown", handleEscape);
         };
-    }, [onClose, disableEscape, returnFocusOnEscape]);
+    }, [onClose, returnFocusOnEscape]);
+    var mergedRef = useMergeRefs(focusRef, children.props.ref);
     return (_jsx(Box, __assign({ layout: __assign({ axis: "y", align: "center", justify: "center" }, layout) }, rest, { className: classNames("aui-layer-backdrop", className), onMouseDown: function (e) {
             onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e);
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }, ref: ref, children: React.cloneElement(children, {
-            ref: focusRef,
+            ref: mergedRef,
             onMouseDown: function (e) {
                 var _a, _b;
                 e.stopPropagation();

package/components/Modal/Modal.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { type BoxProps } from "../Box/Box";
+type Props = BoxProps & {
+    /**
+     * Callback that fires when the user clicks the Ok button in the modal
+     */
+    onConfirm: () => void;
+    /**
+     * Label rendered in the ok/confirm button
+     * @default "Ok"
+     */
+    confirmLabel?: React.ReactNode;
+    /**
+     * Label rendered in the cancel button
+     * @default "Cancel"
+     */
+    cancelLabel?: React.ReactNode;
+    /**
+     * Whether the modal is open or not
+     */
+    open: boolean;
+    /**
+     * Callback that fires when the user closes the modal
+     */
+    onClose: () => void;
+    /**
+     * [Optional] Whether to return focus to the element that triggered the modal
+     * @default false
+     */
+    returnFocusOnEscape?: boolean;
+};
+declare const Modal: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Modal;

package/components/Modal/Modal.js

@@ -0,0 +1,47 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import Box from "../Box/Box";
+import Layer from "../Layer";
+import Button, { IconButton } from "../Button";
+import Animated from "../Animated";
+var Modal = React.forwardRef(function (_a, ref) {
+    var open = _a.open, onClose = _a.onClose, onConfirm = _a.onConfirm, _b = _a.confirmLabel, confirmLabel = _b === void 0 ? "Ok" : _b, _c = _a.cancelLabel, cancelLabel = _c === void 0 ? "Cancel" : _c, returnFocusOnEscape = _a.returnFocusOnEscape, rest = __rest(_a, ["open", "onClose", "onConfirm", "confirmLabel", "cancelLabel", "returnFocusOnEscape"]);
+    return (_jsx(Animated, { className: "aui-modal-backdrop", visible: open, animateTo: { style: { opacity: 1 } }, animateFrom: { style: { opacity: 0 } }, children: _jsx(Layer, { onClose: onClose, returnFocusOnEscape: returnFocusOnEscape, children: _jsxs(Box, { role: "dialog", "aria-modal": "true", className: "aui-modal aui-corners--rounded", layout: { axis: "y", padding: "m", gap: "m" }, children: [_jsx(Box, { layout: {
+                            axis: "x",
+                            align: "center",
+                            justify: "end",
+                            width: "full",
+                        }, children: _jsx(IconButton, { icon: "x", onClick: onClose }) }), _jsx(Box, __assign({}, rest, { ref: ref })), _jsxs(Box, { layout: {
+                            axis: "x",
+                            align: "center",
+                            justify: "end",
+                            width: "full",
+                            gap: "m",
+                        }, children: [_jsx(Button, { variant: "secondary", onClick: onClose, children: cancelLabel }), _jsx(Button, { onClick: function () {
+                                    onConfirm();
+                                    onClose();
+                                }, children: confirmLabel })] })] }) }) }));
+});
+export default Modal;

package/components/Modal/index.d.ts

@@ -0,0 +1,2 @@
+import Modal from "./Modal";
+export default Modal;

package/components/Modal/index.js

@@ -0,0 +1,2 @@
+import Modal from "./Modal";
+export default Modal;

package/hooks/index.d.ts

@@ -4,3 +4,4 @@ export { default as useScroll } from "./useScroll";
 export { default as useFocusTrap } from "./useFocusTrap";
 export { default as useScrollToHash } from "./useScrollToHash";
 export { default as useWindowResize } from "./useWindowResize";
+export { default as useMergeRefs } from "./useMergeRefs";

package/hooks/index.js

@@ -4,3 +4,4 @@ export { default as useScroll } from "./useScroll";
 export { default as useFocusTrap } from "./useFocusTrap";
 export { default as useScrollToHash } from "./useScrollToHash";
 export { default as useWindowResize } from "./useWindowResize";
+export { default as useMergeRefs } from "./useMergeRefs";

package/hooks/useMergeRefs.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+/**
+ * Simple hook that merges N refs into one callback
+ *
+ * @param refs all the refs you want to merge
+ * @returns one combined ref
+ */
+declare const useMergeRefs: <T>(...refs: (React.Ref<T> | null | undefined)[]) => React.Ref<T>;
+export default useMergeRefs;

package/hooks/useMergeRefs.js

@@ -0,0 +1,24 @@
+import { useCallback } from "react";
+/**
+ * Simple hook that merges N refs into one callback
+ *
+ * @param refs all the refs you want to merge
+ * @returns one combined ref
+ */
+var useMergeRefs = function () {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    return useCallback(function (node) {
+        refs.forEach(function (ref) {
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref && typeof ref === "object") {
+                ref.current = node;
+            }
+        });
+    }, [refs]);
+};
+export default useMergeRefs;

package/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Accordion } from "./components/Accordion";
 export { default as Alert } from "./components/Alert";
 export { default as Animated } from "./components/Animated";
+export { default as Avatar } from "./components/Avatar";
 export { default as Badge } from "./components/Badge";
 export { default as Banner } from "./components/Banner";
 export { default as Box } from "./components/Box";
@@ -16,6 +17,7 @@ export * from "./components/Input";
 export { default as Layer } from "./components/Layer";
 export { default as Link } from "./components/Link";
 export * from "./components/Link";
+export { default as Modal } from "./components/Modal";
 export { default as Select } from "./components/Select";
 export { default as Spinner } from "./components/Spinner";
 export * from "./hooks";

package/index.js

@@ -2,6 +2,7 @@
 export { default as Accordion } from "./components/Accordion";
 export { default as Alert } from "./components/Alert";
 export { default as Animated } from "./components/Animated";
+export { default as Avatar } from "./components/Avatar";
 export { default as Badge } from "./components/Badge";
 export { default as Banner } from "./components/Banner";
 export { default as Box } from "./components/Box";
@@ -17,6 +18,7 @@ export * from "./components/Input";
 export { default as Layer } from "./components/Layer";
 export { default as Link } from "./components/Link";
 export * from "./components/Link";
+export { default as Modal } from "./components/Modal";
 export { default as Select } from "./components/Select";
 export { default as Spinner } from "./components/Spinner";
 // Hooks

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "description": "Basic UI components and hooks for React in TypeScript",
   "type": "module",
   "main": "./index.js",

package/style.css

@@ -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-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}
+: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-floating-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);--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-avatar-purple: #bc54d6;--aui-avatar-blue: #618bdc;--aui-avatar-red: #ee6060;--aui-avatar-green: #add386;--aui-avatar-yellow: #f5c76d;--aui-static-background: #e8e8e8;--aui-layer-backdrop-background: rgba(200, 200, 200, 0.6);--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-floating-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);--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-avatar-purple: #771199;--aui-avatar-blue: #0b4cce;--aui-avatar-red: #bb1111;--aui-avatar-green: #307040;--aui-avatar-yellow: #bb8822;--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-modal{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-floating-box-shadow);border-radius:var(--aui-rounded-radius);min-width:40%;max-width:100%}.aui-accordion{background-color:var(--aui-default-background);box-shadow:0 0 0 1px var(--aui-default-border) inset,var(--aui-subtle-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-avatar{overflow:hidden;text-align:center;font-weight:600}.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-dim,.aui-undim{transition:opacity var(--aui-default-transition)}.aui-dim{opacity:1}.aui-undim{opacity:var(--aui-default-opacity-dim)}.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-dim: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-undim:not([disabled]):hover{opacity:1}}.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-modal-backdrop,.aui-layer-backdrop{z-index:10000}.aui-layer-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;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-avatar-red{background-color:var(--aui-avatar-red)}.aui-avatar-yellow{background-color:var(--aui-avatar-yellow)}.aui-avatar-green{background-color:var(--aui-avatar-green)}.aui-avatar-blue{background-color:var(--aui-avatar-blue)}.aui-avatar-purple{background-color:var(--aui-avatar-purple)}.aui-avatar-xxs{width:12px;height:12px;line-height:12px;font-size:9.6px}.aui-avatar-xs{width:16px;height:16px;line-height:16px;font-size:12.8px}.aui-avatar-s{width:24px;height:24px;line-height:24px;font-size:19.2px}.aui-avatar-m{width:32px;height:32px;line-height:32px;font-size:25.6px}.aui-avatar-l{width:48px;height:48px;line-height:48px;font-size:38.4px}.aui-avatar-xl{width:64px;height:64px;line-height:64px;font-size:51.2px}.aui-avatar-xxl{width:128px;height:128px;line-height:128px;font-size:102.4px}.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/utils/types.d.ts

@@ -22,17 +22,21 @@ export type SizeDimension = "full" | "fit" | "min" | "max";
 /**
  * Size variants used for CSS.
  */
-type SizeToken = "none" | "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
+export type SizeToken = "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
+/**
+ * Size variants used for padding & margin
+ */
+type SpacingSize = "none" | "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
 /**
  * Used for margin
  */
-type AutoSize = SizeToken | "auto";
+type AutoSize = SpacingSize | "auto";
 /** Layout props for a component */
 export type Layout = {
     /** Direction the layout spans; along the x-axis or y-axis (Equivalent to flex-direction) */
     axis?: "x" | "y" | "-x" | "-y";
     /** Spacing between children of the layout */
-    gap?: SizeToken;
+    gap?: SpacingSize;
     /** Alignment orthogonal to the selected axis (Equivalent to align-items) */
     align?: "start" | "center" | "end";
     /** How to layout the children (Equivalent to justify-content) */
@@ -40,19 +44,19 @@ export type Layout = {
     /** Whether to allow wrapping of layout children */
     wrap?: boolean;
     /** Padding inside the layout */
-    padding?: SizeToken;
+    padding?: SpacingSize;
     /** Horizontal padding inside the layout */
-    paddingX?: SizeToken;
+    paddingX?: SpacingSize;
     /** Vertical padding inside the layout */
-    paddingY?: SizeToken;
+    paddingY?: SpacingSize;
     /** Top padding inside the layout */
-    paddingTop?: SizeToken;
+    paddingTop?: SpacingSize;
     /** Bottom padding inside the layout */
-    paddingBottom?: SizeToken;
+    paddingBottom?: SpacingSize;
     /** Left padding inside the layout */
-    paddingLeft?: SizeToken;
+    paddingLeft?: SpacingSize;
     /** Right padding inside the layout */
-    paddingRight?: SizeToken;
+    paddingRight?: SpacingSize;
     /** Margin outside the layout */
     margin?: AutoSize;
     /** Horizontal margin outside the layout */