@adamjanicki/ui 1.5.7 → 1.5.9

package/components/Accordion/Accordion.d.ts

@@ -0,0 +1,37 @@
+import React from "react";
+import { type BoxProps } from "../Box/Box";
+type Props = Omit<BoxProps, "children"> & {
+    /**
+     * Drawers to render as accordion sections
+     */
+    drawers: Drawer[];
+    /**
+     * Duration of the drawer animation (in seconds)
+     */
+    duration?: number;
+    /**
+     * Whether to hide the dividers between drawers
+     * @default false
+     */
+    hideDividers?: boolean;
+};
+declare const Accordion: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type Drawer = {
+    /**
+     * Label for the accordion drawer
+     */
+    label: string;
+    /**
+     * Content hidden within this accordion drawer
+     */
+    content: React.ReactNode;
+};
+type DrawerProps = {
+    open: boolean;
+    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

@@ -0,0 +1,69 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect } from "react";
+import Box from "../Box/Box";
+import Icon from "../Icon";
+import { UnstyledButton } from "../Button";
+import Animated from "../Animated";
+import { classNames } from "../../functions";
+var Accordion = React.forwardRef(function (_a, ref) {
+    var drawers = _a.drawers, className = _a.className, duration = _a.duration, hideDividers = _a.hideDividers, rest = __rest(_a, ["drawers", "className", "duration", "hideDividers"]);
+    var _b = useState(new Set()), openIndices = _b[0], setOpenIndices = _b[1];
+    return (_jsx(Box, __assign({ layout: { axis: "y" } }, 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)); }) })));
+});
+var Drawer = function (_a) {
+    var item = _a.item, open = _a.open, onOpenChange = _a.onOpenChange, duration = _a.duration, showDivider = _a.showDivider;
+    var boxRef = useRef(null);
+    var _b = useState(), height = _b[0], setHeight = _b[1];
+    var children = item.content;
+    useEffect(function () {
+        if (open && children && boxRef.current) {
+            setHeight(boxRef.current.offsetHeight);
+        }
+    }, [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: "m", padding: "l" }, children: [_jsx(Icon, { size: 12, icon: open ? "down" : "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: {
+                            style: {
+                                visibility: "hidden",
+                                height: 0,
+                                transform: "translateY(-4px)",
+                                opacity: 0.9,
+                            },
+                        }, animateTo: {
+                            style: { height: height, transform: "translateY(0)", opacity: 1 },
+                        }, children: _jsx(Box, { ref: boxRef, children: children }) })] }), showDivider && _jsx("hr", { className: "aui-accordion-hr" })] }));
+};
+export default Accordion;

package/components/Accordion/index.d.ts

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

package/components/Accordion/index.js

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

package/components/Box/Box.d.ts

@@ -1,6 +1,10 @@
 import React from "react";
-import type { Layout } from "../../utils/types";
-type Props = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+import type { Layout, Children } from "../../utils/types";
+type Props = Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & {
+    /**
+     * Children to render inside the box
+     */
+    children?: Children;
     /**
      * The organization of the container and its children.
      */

package/components/Button/Button.d.ts

@@ -1,27 +1,7 @@
 import React from "react";
-import { type CustomLinkElement } from "../Link/Link";
 import type { CornerType } from "../../utils/types";
-type DefaultButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
-    /**
-     * [Optional] This can be used as a link if the `to` prop is provided
-     * If this is the case, the onClick event will be ignored
-     */
-    to?: string;
-    /**
-     * [Optional] Custom link element to use
-     * This is useful for using a different link element, like a React Router Link
-     * If this is not provided, a normal anchor tag will be used
-     */
-    LinkElement?: CustomLinkElement;
-};
-type IconButtonProps = Omit<DefaultButtonProps, "children"> & {
-    /**
-     * Icon to display inside the button
-     * I would usually use FontAwesome, but for added flexibility, it's any node
-     */
-    icon: React.ReactNode;
-};
-type ButtonProps = DefaultButtonProps & {
+type DefaultButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+export type VisualButtonProps = {
     /**
      * Type of button
      * @default "primary"
@@ -38,7 +18,8 @@ type ButtonProps = DefaultButtonProps & {
      */
     size?: "regular" | "small";
 };
+type ButtonProps = DefaultButtonProps & VisualButtonProps;
 export declare const UnstyledButton: React.ForwardRefExoticComponent<Omit<DefaultButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-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

@@ -21,23 +21,18 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { UnstyledLink } from "../Link/Link";
+import React from "react";
 import classNames from "../../functions/classNames";
-export var UnstyledButton = forwardRef(function (_a, ref) {
-    var to = _a.to, LinkElement = _a.LinkElement, className = _a.className, props = __rest(_a, ["to", "LinkElement", "className"]);
-    className = classNames("aui-button-base", className);
-    if (to) {
-        return (_jsx(UnstyledLink, { to: to, className: className, style: props.style, role: "button", LinkElement: LinkElement, "aria-label": props["aria-label"], children: props.children }));
-    }
-    return (_jsx("button", __assign({}, props, { className: classNames("aui-action", className), ref: ref })));
+export var UnstyledButton = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("button", __assign({}, props, { className: classNames("aui-action aui-button", className), ref: ref })));
 });
-export var IconButton = forwardRef(function (_a, ref) {
-    var icon = _a.icon, className = _a.className, props = __rest(_a, ["icon", "className"]);
-    return (_jsx(UnstyledButton, __assign({}, props, { className: classNames("aui-icon-button", className), ref: ref, children: icon })));
-});
-var Button = forwardRef(function (_a, ref) {
-    var _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.corners, corners = _c === void 0 ? "rounded" : _c, className = _a.className, _d = _a.size, size = _d === void 0 ? "regular" : _d, rest = __rest(_a, ["variant", "corners", "className", "size"]);
-    return (_jsx(UnstyledButton, __assign({}, rest, { className: classNames("aui-button--".concat(variant, " aui-button-size--").concat(size, " aui-corners--").concat(corners), className), ref: ref })));
+var Button = React.forwardRef(function (_a, ref) {
+    var variant = _a.variant, corners = _a.corners, className = _a.className, size = _a.size, rest = __rest(_a, ["variant", "corners", "className", "size"]);
+    return (_jsx(UnstyledButton, __assign({}, rest, { className: classNames(getButtonClassName({ variant: variant, corners: corners, size: size }), className), ref: ref })));
 });
+export var getButtonClassName = function (_a) {
+    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;
+    return "aui-button--".concat(variant, " aui-button-size--").concat(size, " aui-corners--").concat(corners);
+};
 export default Button;

package/components/Button/index.d.ts

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

package/components/Button/index.js

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

package/components/Carousel/Carousel.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
-import type { Style } from "../../utils/types";
+import type { Children, Style } from "../../utils/types";
 import { type BoxProps } from "../Box/Box";
 type ButtonProps = {
     /**
      * Children to render inside the button
      */
-    children?: React.ReactNode | React.ReactNode[];
+    children?: Children;
     /**
      * Additional class name to apply to the button
      */

package/components/Carousel/Carousel.js

@@ -25,6 +25,7 @@ import React, { useState, useEffect, useRef, useCallback } from "react";
 import { classNames } from "../../functions";
 import Button from "../Button";
 import Box from "../Box/Box";
+import Icon from "../Icon";
 var DEFAULT_DURATION_S = 1;
 var Carousel = React.forwardRef(function (_a, ref) {
     var _b, _c;
@@ -80,7 +81,7 @@ var Carousel = React.forwardRef(function (_a, ref) {
             transition: "transform ".concat(duration, "s ease-in-out"),
         }
         : undefined;
-    return (_jsxs(Box, __assign({}, rest, { className: classNames("aui-carousel", className), ref: ref, children: [_jsxs(Box, { className: "aui-carousel-slider", style: __assign(__assign({}, animatingStyles), { flexDirection: delta >= 0 ? "row" : "row-reverse" }), onTransitionEnd: onTransitionEnd, children: [_jsx(Box, { className: "aui-carousel-item", children: children[cur] }), _jsx(Box, { className: "aui-carousel-item", "aria-hidden": true, children: children[next] })] }), length > 1 && (_jsxs(_Fragment, { children: [!hideArrows && (_jsxs(_Fragment, { children: [_jsx(Button, { className: classNames("aui-flex-x aui-align-center aui-justify-center aui-carousel-arrow", leftArrowProps === null || leftArrowProps === void 0 ? void 0 : leftArrowProps.className), style: __assign({ left: 8 }, leftArrowProps === null || leftArrowProps === void 0 ? void 0 : leftArrowProps.style), corners: "pill", "aria-label": "previous", onClick: function () { return startTransition(-1); }, children: (_b = leftArrowProps === null || leftArrowProps === void 0 ? void 0 : leftArrowProps.children) !== null && _b !== void 0 ? _b : "←" }), _jsx(Button, { className: classNames("aui-flex-x aui-align-center aui-justify-center aui-carousel-arrow", rightArrowProps === null || rightArrowProps === void 0 ? void 0 : rightArrowProps.className), style: __assign({ right: 8 }, rightArrowProps === null || rightArrowProps === void 0 ? void 0 : rightArrowProps.style), corners: "pill", "aria-label": "next", onClick: function () { return startTransition(1); }, children: (_c = rightArrowProps === null || rightArrowProps === void 0 ? void 0 : rightArrowProps.children) !== null && _c !== void 0 ? _c : "→" })] })), !hideDots && (_jsx(Box, { layout: { axis: "x", align: "center", gap: "xs" }, className: "aui-carousel-dots", children: children.map(function (_, i) { return (_jsx(Button, { className: classNames("aui-carousel-dot", dotProps === null || dotProps === void 0 ? void 0 : dotProps.className), corners: "pill", disabled: cur === i || animating, onClick: function () { return startTransition(i - cur); }, style: dotProps === null || dotProps === void 0 ? void 0 : dotProps.style }, i)); }) }))] }))] })));
+    return (_jsxs(Box, __assign({}, rest, { className: classNames("aui-carousel", className), ref: ref, children: [_jsxs(Box, { className: "aui-carousel-slider", style: __assign(__assign({}, animatingStyles), { flexDirection: delta >= 0 ? "row" : "row-reverse" }), onTransitionEnd: onTransitionEnd, children: [_jsx(Box, { className: "aui-carousel-item", children: children[cur] }), _jsx(Box, { className: "aui-carousel-item", "aria-hidden": true, children: children[next] })] }), length > 1 && (_jsxs(_Fragment, { children: [!hideArrows && (_jsxs(_Fragment, { children: [_jsx(Button, { className: classNames("aui-flex-x aui-align-center aui-justify-center aui-carousel-arrow", leftArrowProps === null || leftArrowProps === void 0 ? void 0 : leftArrowProps.className), style: __assign({ left: 8 }, leftArrowProps === null || leftArrowProps === void 0 ? void 0 : leftArrowProps.style), corners: "pill", "aria-label": "previous", onClick: function () { return startTransition(-1); }, children: (_b = leftArrowProps === null || leftArrowProps === void 0 ? void 0 : leftArrowProps.children) !== null && _b !== void 0 ? _b : (_jsx(Icon, { icon: "left", size: 12, style: { marginRight: 2 } })) }), _jsx(Button, { className: classNames("aui-flex-x aui-align-center aui-justify-center aui-carousel-arrow", rightArrowProps === null || rightArrowProps === void 0 ? void 0 : rightArrowProps.className), style: __assign({ right: 8 }, rightArrowProps === null || rightArrowProps === void 0 ? void 0 : rightArrowProps.style), corners: "pill", "aria-label": "next", onClick: function () { return startTransition(1); }, children: (_c = rightArrowProps === null || rightArrowProps === void 0 ? void 0 : rightArrowProps.children) !== null && _c !== void 0 ? _c : (_jsx(Icon, { icon: "right", size: 12, style: { marginLeft: 2 } })) })] })), !hideDots && (_jsx(Box, { layout: { axis: "x", align: "center", gap: "xs" }, className: "aui-carousel-dots", children: children.map(function (_, i) { return (_jsx(Button, { className: classNames("aui-carousel-dot", dotProps === null || dotProps === void 0 ? void 0 : dotProps.className), corners: "pill", disabled: cur === i || animating, onClick: function () { return startTransition(i - cur); }, style: dotProps === null || dotProps === void 0 ? void 0 : dotProps.style }, i)); }) }))] }))] })));
 });
 function safeMod(n, m) {
     return ((n % m) + m) % m;

package/components/ClickOutside/ClickOutside.d.ts

@@ -1,10 +1,10 @@
 import React from "react";
-type Props<T extends React.ElementType> = {
+type Props = {
     /**
      * The children to render.
      * IMPORTANT: The child must be a single element which can hold a ref.
      */
-    children: React.ReactElement<React.ComponentPropsWithRef<T>>;
+    children: React.ReactElement<any>;
     /**
      * The function to call when a click occurs outside the child element.
      *
@@ -12,5 +12,5 @@ type Props<T extends React.ElementType> = {
      */
     onClickOutside: (event: MouseEvent) => void;
 };
-declare const ClickOutside: <T extends React.ElementType>({ children, onClickOutside, }: Props<T>) => React.JSX.Element;
+declare const ClickOutside: ({ children, onClickOutside, }: Props) => React.JSX.Element;
 export default ClickOutside;

package/components/ClickOutside/ClickOutside.js

@@ -31,7 +31,7 @@ var ClickOutside = function (_a) {
         onClick: 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 if the click ends outside
+            // 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);
         },

package/components/Icon/Icon.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { type IconType } from "./icons";
+type Props = Omit<React.DetailedHTMLProps<React.SVGAttributes<SVGSVGElement>, SVGSVGElement>, "children" | "viewBox"> & {
+    /**
+     * The version of icon to render
+     */
+    icon: IconType;
+    /**
+     * Size of the icon
+     */
+    size?: number;
+};
+declare const Icon: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default Icon;

package/components/Icon/Icon.js

@@ -0,0 +1,33 @@
+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 from "react";
+import icons from "./icons";
+import { classNames } from "../../functions";
+var defaultViewBox = "0 0 512 512";
+var Icon = React.forwardRef(function (_a, ref) {
+    var icon = _a.icon, className = _a.className, size = _a.size, style = _a.style, rest = __rest(_a, ["icon", "className", "size", "style"]);
+    var _b = icons[icon], contents = _b.contents, viewBox = _b.viewBox;
+    return (_jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox || defaultViewBox, className: classNames("aui-icon", className), style: __assign({ width: size, height: size }, style) }, rest, { ref: ref, children: contents.map(function (icon, i) { return (_jsx(React.Fragment, { children: icon }, i)); }) })));
+});
+export default Icon;

package/components/Icon/icons.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type IconDefinition = {
+    readonly contents: React.JSX.Element[];
+    readonly viewBox?: string;
+};
+export declare const iconTypes: readonly ["up", "down", "left", "right"];
+export type IconType = (typeof iconTypes)[number];
+declare const icons: Record<IconType, IconDefinition>;
+export default icons;

package/components/Icon/icons.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export var iconTypes = ["up", "down", "left", "right"];
+var arrowPath = "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";
+var icons = {
+    down: {
+        contents: [
+            _jsx("path", { d: arrowPath, transform: "matrix(.707107 0.707107-.707107 0.707107 165.642289-79.868246)" }),
+        ],
+    },
+    up: {
+        contents: [
+            _jsx("path", { d: arrowPath, transform: "matrix(-.707107-.707107 0.707107-.707107 346.357711 591.868246)" }),
+        ],
+    },
+    left: {
+        contents: [
+            _jsx("path", { d: arrowPath, transform: "matrix(-.707107 0.707107-.707107-.707107 591.868246 165.642289)" }),
+        ],
+    },
+    right: {
+        contents: [
+            _jsx("path", { d: arrowPath, transform: "matrix(.707107-.707107 0.707107 0.707107-79.868246 346.357711)" }),
+        ],
+    },
+};
+export default icons;

package/components/Icon/index.d.ts

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

package/components/Icon/index.js

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

package/components/Input/IconInput.js

@@ -15,6 +15,6 @@ import classNames from "../../functions/classNames";
 import Box from "../Box";
 var IconInput = forwardRef(function (_a, ref) {
     var startIcon = _a.startIcon, endIcon = _a.endIcon, className = _a.className, style = _a.style, _b = _a.corners, corners = _b === void 0 ? "rounded" : _b, inputProps = _a.inputProps;
-    return (_jsxs(Box, { layout: { axis: "x", align: "center" }, className: classNames("aui-input-default aui-icon-input aui-corners--".concat(corners), className), style: style, ref: ref, children: [startIcon, _jsx("input", __assign({}, inputProps, { className: classNames("aui-input-base aui-corners--".concat(corners), inputProps === null || inputProps === void 0 ? void 0 : inputProps.className) })), endIcon] }));
+    return (_jsxs(Box, { layout: { axis: "x", align: "center" }, className: classNames("aui-input aui-icon-input aui-corners--".concat(corners), className), style: style, ref: ref, children: [startIcon, _jsx("input", __assign({}, inputProps, { className: classNames("aui-input-base aui-corners--".concat(corners), inputProps === null || inputProps === void 0 ? void 0 : inputProps.className) })), endIcon] }));
 });
 export default IconInput;

package/components/Input/Input.js

@@ -25,6 +25,6 @@ import { forwardRef } from "react";
 import classNames from "../../functions/classNames";
 var Input = forwardRef(function (_a, ref) {
     var className = _a.className, _b = _a.corners, corners = _b === void 0 ? "rounded" : _b, props = __rest(_a, ["className", "corners"]);
-    return (_jsx("input", __assign({}, props, { ref: ref, className: classNames("aui-input-base aui-input-default aui-corners--".concat(corners), className) })));
+    return (_jsx("input", __assign({}, props, { ref: ref, className: classNames("aui-input-base aui-input aui-corners--".concat(corners), className) })));
 });
 export default Input;

package/components/Input/TextArea.js

@@ -25,6 +25,6 @@ import { forwardRef } from "react";
 import classNames from "../../functions/classNames";
 var TextArea = forwardRef(function (_a, ref) {
     var className = _a.className, _b = _a.rows, rows = _b === void 0 ? 3 : _b, _c = _a.corners, corners = _c === void 0 ? "rounded" : _c, props = __rest(_a, ["className", "rows", "corners"]);
-    return (_jsx("textarea", __assign({}, props, { ref: ref, className: classNames("aui-input-base aui-input-default aui-corners--".concat(corners), className), rows: rows })));
+    return (_jsx("textarea", __assign({}, props, { ref: ref, className: classNames("aui-input-base aui-input aui-corners--".concat(corners), className), rows: rows })));
 });
 export default TextArea;

package/components/Layer/Layer.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { type BoxProps } from "../Box/Box";
-type Props<T extends React.ElementType> = Omit<BoxProps, "children"> & {
+type Props = Omit<BoxProps, "children"> & {
     /**
      * Callback that fires when the user clicks outside the layer
      */
@@ -9,7 +9,7 @@ type Props<T extends React.ElementType> = Omit<BoxProps, "children"> & {
      * The child of the layer.
      * IMPORTANT: the child must be able to accept a ref
      */
-    children: React.ReactElement<React.ComponentPropsWithRef<T>>;
+    children: React.ReactElement<any>;
     /**
      * [Optional] Whether to disable the escape key to close the layer
      * @default false
@@ -26,5 +26,5 @@ type Props<T extends React.ElementType> = Omit<BoxProps, "children"> & {
      */
     disableScrollLock?: boolean;
 };
-declare const Layer: <T extends React.ElementType>({ returnFocusOnEscape, disableScrollLock, ...props }: Props<T>) => React.JSX.Element;
+declare const Layer: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Layer;

package/components/Layer/Layer.js

@@ -25,8 +25,8 @@ import React, { useEffect } from "react";
 import { useFocusTrap, useScrollLock } from "../../hooks";
 import classNames from "../../functions/classNames";
 import Box from "../Box/Box";
-var BaseLayer = function (_a) {
-    var onClose = _a.onClose, children = _a.children, style = _a.style, className = _a.className, _b = _a.disableEscape, disableEscape = _b === void 0 ? false : _b, visible = _a.visible;
+var BaseLayer = React.forwardRef(function (_a, ref) {
+    var onClose = _a.onClose, children = _a.children, className = _a.className, _b = _a.disableEscape, disableEscape = _b === void 0 ? false : _b, visible = _a.visible, onMouseDown = _a.onMouseDown, rest = __rest(_a, ["onClose", "children", "className", "disableEscape", "visible", "onMouseDown"]);
     var focusRef = useFocusTrap(visible);
     useEffect(function () {
         var handleEscape = function (event) {
@@ -41,28 +41,29 @@ var BaseLayer = function (_a) {
                 document.removeEventListener("keydown", handleEscape);
         };
     }, [onClose, disableEscape]);
-    return (_jsx(Box, { layout: { axis: "y", align: "center", justify: "center" }, className: classNames("aui-layer-backdrop", className), style: style, onMouseDown: onClose, children: React.cloneElement(children, {
+    return (_jsx(Box, __assign({ layout: { axis: "y", align: "center", justify: "center" } }, 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,
             onMouseDown: function (e) {
                 var _a, _b;
                 e.stopPropagation();
                 (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.onMouseDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
             },
-        }) }));
-};
-var Layer = function (_a) {
-    var returnFocusOnEscape = _a.returnFocusOnEscape, disableScrollLock = _a.disableScrollLock, props = __rest(_a, ["returnFocusOnEscape", "disableScrollLock"]);
+        }) })));
+});
+var Layer = React.forwardRef(function (_a, ref) {
+    var returnFocusOnEscape = _a.returnFocusOnEscape, disableScrollLock = _a.disableScrollLock, rest = __rest(_a, ["returnFocusOnEscape", "disableScrollLock"]);
     // Lock and unlock on mount and unmount
     useScrollLock(!disableScrollLock);
-    useEffect(function () {
-        return function () {
-            var _a;
-            var activeEl = document.activeElement;
-            if (!returnFocusOnEscape) {
-                (_a = activeEl === null || activeEl === void 0 ? void 0 : activeEl.blur) === null || _a === void 0 ? void 0 : _a.call(activeEl);
-            }
-        };
-    }, [returnFocusOnEscape]);
-    return _jsx(BaseLayer, __assign({}, props, { visible: true }));
-};
+    useEffect(function () { return function () {
+        var _a;
+        var activeEl = document.activeElement;
+        if (!returnFocusOnEscape) {
+            (_a = activeEl === null || activeEl === void 0 ? void 0 : activeEl.blur) === null || _a === void 0 ? void 0 : _a.call(activeEl);
+        }
+    }; }, [returnFocusOnEscape]);
+    return _jsx(BaseLayer, __assign({}, rest, { visible: true, ref: ref }));
+});
 export default Layer;

package/components/Link/Link.d.ts

@@ -1,13 +1,17 @@
 import React from "react";
-type BuiltinLinkProps = Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href">;
-export type CustomLinkElement = React.ForwardRefExoticComponent<BuiltinLinkProps & {
-    to: string;
-} & React.RefAttributes<HTMLAnchorElement>>;
-type DefaultLinkProps = BuiltinLinkProps & {
+import { type VisualButtonProps } from "../Button/Button";
+type BaseLinkProps = Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href"> & {
     /**
      * URL to navigate to
      */
     to: string;
+};
+type CustomLinkElement = React.ForwardRefExoticComponent<BaseLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+type LinkProps = BaseLinkProps & {
+    /**
+     * Whether the link should open in a new tab
+     */
+    external?: boolean;
     /**
      * [Optional] Custom link element to use
      * This is useful for using a different link element, like a React Router Link
@@ -15,6 +19,23 @@ type DefaultLinkProps = BuiltinLinkProps & {
      */
     LinkElement?: CustomLinkElement;
 };
-export declare const UnstyledLink: React.ForwardRefExoticComponent<Omit<DefaultLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
-declare const Link: React.ForwardRefExoticComponent<Omit<DefaultLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export declare const UnstyledLink: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export declare const ButtonLink: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href"> & {
+    /**
+     * URL to navigate to
+     */
+    to: string;
+} & {
+    /**
+     * Whether the link should open in a new tab
+     */
+    external?: boolean;
+    /**
+     * [Optional] Custom link element to use
+     * This is useful for using a different link element, like a React Router Link
+     * If this is not provided, a normal anchor tag will be used
+     */
+    LinkElement?: CustomLinkElement;
+} & VisualButtonProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 export default Link;

package/components/Link/Link.js

@@ -21,18 +21,23 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import React from "react";
+import { getButtonClassName } from "../Button/Button";
 import classNames from "../../functions/classNames";
-var DefaultLinkElement = forwardRef(function (_a, ref) {
-    var to = _a.to, props = __rest(_a, ["to"]);
+export var UnstyledLink = React.forwardRef(function (_a, ref) {
+    var LinkElement = _a.LinkElement, to = _a.to, className = _a.className, external = _a.external, rest = __rest(_a, ["LinkElement", "to", "className", "external"]);
+    var props = __assign(__assign(__assign({}, (external ? { target: "_blank", rel: "noreferrer noopener" } : {})), rest), { className: classNames("aui-action", className) });
+    if (LinkElement) {
+        return _jsx(LinkElement, __assign({}, props, { to: to, ref: ref }));
+    }
     return _jsx("a", __assign({}, props, { href: to, ref: ref }));
 });
-export var UnstyledLink = forwardRef(function (_a, ref) {
-    var _b = _a.LinkElement, LinkElement = _b === void 0 ? DefaultLinkElement : _b, className = _a.className, props = __rest(_a, ["LinkElement", "className"]);
-    return (_jsx(LinkElement, __assign({}, props, { className: classNames("aui-action", className), ref: ref })));
+export var ButtonLink = React.forwardRef(function (_a, ref) {
+    var className = _a.className, variant = _a.variant, corners = _a.corners, size = _a.size, props = __rest(_a, ["className", "variant", "corners", "size"]);
+    return (_jsx(UnstyledLink, __assign({}, props, { className: classNames(getButtonClassName({ variant: variant, corners: corners, size: size }), className), ref: ref })));
 });
-var Link = forwardRef(function (_a, ref) {
+var Link = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(UnstyledLink, __assign({}, props, { className: classNames("aui-link-default", className), ref: ref })));
+    return (_jsx(UnstyledLink, __assign({}, props, { className: classNames("aui-link", className), ref: ref })));
 });
 export default Link;

package/components/Link/index.d.ts

@@ -1,3 +1,3 @@
-import Link from "./Link";
+import Link, { UnstyledLink, ButtonLink } from "./Link";
 export default Link;
-export * from "./Link";
+export { UnstyledLink, ButtonLink };

package/components/Link/index.js

@@ -1,3 +1,3 @@
-import Link from "./Link";
+import Link, { UnstyledLink, ButtonLink } from "./Link";
 export default Link;
-export * from "./Link";
+export { UnstyledLink, ButtonLink };

package/components/Select/Select.js

@@ -24,8 +24,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "../../functions/classNames";
 import Box from "../Box";
+import Icon from "../Icon";
 var Select = function (_a, ref) {
     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"]);
-    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-base 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("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", className: "aui-select-triangle", "aria-hidden": "true", children: _jsx("path", { fill: "currentColor", d: "M 29.175781 50.824219 C 30.738281 52.386719 33.273438 52.386719 34.835938 50.824219 L 58.835938 26.824219 C 60.398438 25.261719 60.398438 22.726562 58.835938 21.164062 C 57.273438 19.601562 54.738281 19.601562 53.175781 21.164062 L 32 42.335938 L 10.824219 21.175781 C 9.261719 19.613281 6.726562 19.613281 5.164062 21.175781 C 3.601562 22.738281 3.601562 25.273438 5.164062 26.835938 L 29.164062 50.835938 Z M 29.175781 50.824219" }) })] }));
+    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: "down", className: "aui-select-icon", "aria-hidden": true })] }));
 };
 export default forwardRef(Select);

package/functions/assertDefined.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Assert a value is defined
+ *
+ * @param value the value to assert presence of
+ * @param message optional error message
+ * @returns the present value
+ */
+export default function assertDefined<T>(value: T | undefined, message?: string): T;

package/functions/assertDefined.js

@@ -0,0 +1,13 @@
+/**
+ * Assert a value is defined
+ *
+ * @param value the value to assert presence of
+ * @param message optional error message
+ * @returns the present value
+ */
+export default function assertDefined(value, message) {
+    if (value === undefined) {
+        throw new Error(message || "Unexpected undefined value");
+    }
+    return value;
+}

package/functions/index.d.ts

@@ -1,4 +1,4 @@
 import classNames from "./classNames";
 import scrollToId from "./scrollToId";
-import assert, { assertDefined } from "./assert";
-export { classNames, scrollToId, assert, assertDefined };
+import assertDefined from "./assertDefined";
+export { classNames, scrollToId, assertDefined };

package/functions/index.js

@@ -1,4 +1,4 @@
 import classNames from "./classNames";
 import scrollToId from "./scrollToId";
-import assert, { assertDefined } from "./assert";
-export { classNames, scrollToId, assert, assertDefined };
+import assertDefined from "./assertDefined";
+export { classNames, scrollToId, assertDefined };

package/index.d.ts

@@ -1,3 +1,4 @@
+export { default as Accordion } from "./components/Accordion";
 export { default as Alert } from "./components/Alert";
 export { default as Animated } from "./components/Animated";
 export { default as Badge } from "./components/Badge";
@@ -9,6 +10,7 @@ export { default as Carousel } from "./components/Carousel";
 export { default as ClickOutside } from "./components/ClickOutside";
 export { default as Hamburger } from "./components/Hamburger";
 export * from "./components/Hamburger";
+export { default as Icon } from "./components/Icon";
 export { default as Input } from "./components/Input";
 export * from "./components/Input";
 export { default as Layer } from "./components/Layer";

package/index.js

@@ -1,4 +1,5 @@
 // Components
+export { default as Accordion } from "./components/Accordion";
 export { default as Alert } from "./components/Alert";
 export { default as Animated } from "./components/Animated";
 export { default as Badge } from "./components/Badge";
@@ -10,6 +11,7 @@ export { default as Carousel } from "./components/Carousel";
 export { default as ClickOutside } from "./components/ClickOutside";
 export { default as Hamburger } from "./components/Hamburger";
 export * from "./components/Hamburger";
+export { default as Icon } from "./components/Icon";
 export { default as Input } from "./components/Input";
 export * from "./components/Input";
 export { default as Layer } from "./components/Layer";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui",
-  "version": "1.5.7",
+  "version": "1.5.9",
   "description": "Basic UI components and hooks for React in TypeScript",
   "type": "module",
   "main": "./index.js",
@@ -13,8 +13,9 @@
   },
   "scripts": {
     "clean": "./clean.sh",
-    "lint": "eslint src --max-warnings=0",
-    "build": "npm run clean && npm run lint && tsc; cp src/style.css ./style.css",
+    "lint": "eslint src test --max-warnings=0",
+    "test": "jest",
+    "build": "npm run clean && npm run lint && npm run test && tsc; cp src/style.css ./style.css",
     "prepare": "npm run build",
     "dryrun": "npm publish --dry-run"
   },
@@ -23,8 +24,15 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.7.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30.0.0",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
+    "jest": "^30.0.5",
+    "jest-environment-jsdom": "^30.0.5",
+    "ts-jest": "^29.4.1",
     "typescript": "^5.9.2"
   }
 }

package/style.css

@@ -21,6 +21,7 @@
   --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);
   /* Corners */
   --aui-sharp-radius: 0;
   --aui-rounded-radius: 8px;
@@ -53,6 +54,8 @@
   --aui-layer-backdrop-background: rgba(200, 200, 200, 0.7);
   /* Link */
   --aui-link-color: #0070ff;
+  /* Select */
+  --aui-select-icon: var(--aui-dark-gray);
 }
 
 [data-theme="dark"] {
@@ -61,6 +64,7 @@
   --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);
   /* Buttons */
   --aui-button-primary-background: white;
   --aui-button-primary-color: var(--aui-obsidian);
@@ -89,6 +93,8 @@
   --aui-layer-backdrop-background: rgba(55, 55, 55, 0.7);
   /* Link */
   --aui-link-color: #33bfff;
+  /* Select */
+  --aui-select-icon: var(--aui-moon-gray);
 }
 
 /* General */
@@ -134,6 +140,28 @@
   border-color: var(--aui-default-border);
 }
 
+/* Accordion */
+.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: var(--aui-xxs);
+  background-color: var(--aui-default-border);
+  width: 100%;
+  margin: 0;
+}
+
+.aui-accordion-arrow {
+  color: var(--aui-select-icon);
+}
+
 /* Alert */
 .aui-alert {
   padding: var(--aui-l);
@@ -173,9 +201,8 @@
 }
 
 /* Button */
-.aui-button-base {
+.aui-button {
   background: none;
-  color: inherit;
   border: none;
   padding: 0;
 }
@@ -191,15 +218,7 @@
   font-weight: 600;
 }
 
-.aui-icon-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: opacity var(--aui-default-transition);
-  padding: var(--aui-m);
-}
-
-.aui-button-base:disabled {
+.aui-button:disabled {
   cursor: default !important;
   opacity: var(--aui-disabled-opacity);
 }
@@ -212,13 +231,14 @@
 }
 
 .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-default {
+.aui-link {
   font-weight: 600;
   color: var(--aui-link-color);
   transition: opacity var(--aui-default-transition);
@@ -226,8 +246,7 @@
 
 @media (hover: hover) {
   .aui-button--primary:not([disabled]):hover,
-  .aui-icon-button:not([disabled]):hover,
-  .aui-link-default:hover {
+  .aui-link:hover {
     opacity: var(--aui-default-opacity-dim);
   }
 
@@ -260,19 +279,19 @@
   width: 100%;
 }
 
-.aui-input-default {
+.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-default:disabled {
+.aui-input:disabled {
   opacity: var(--aui-disabled-opacity);
   cursor: default;
 }
 
-.aui-input-default:not([disabled]):focus-within,
+.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);
@@ -289,7 +308,7 @@
   background-color: var(--aui-default-background);
 }
 
-.aui-select-base {
+.aui-select {
   width: 100%;
   color: inherit;
   border: none;
@@ -309,14 +328,15 @@
   cursor: default;
 }
 
-.aui-select-triangle {
-  --size: 12px;
+.aui-select-icon {
+  --size: 10px;
+  color: var(--aui-select-icon);
   width: var(--size);
   height: var(--size);
   position: absolute;
-  top: 50%;
+  top: calc(50% + 1px);
   transform: translateY(-50%);
-  right: calc(var(--size) - 4px);
+  right: var(--size);
   pointer-events: none;
 }
 
@@ -331,6 +351,11 @@
   background: var(--aui-layer-backdrop-background);
 }
 
+/* Icons */
+.aui-icon * {
+  fill: currentColor;
+}
+
 /* Spinner */
 .aui-spinner {
   animation: aui-spinner-animation 1s linear infinite;

package/utils/types.d.ts

@@ -1,4 +1,8 @@
 import React from "react";
+/**
+ * Default children type; can be a node or list of nodes
+ */
+export type Children = React.ReactNode | React.ReactNode[];
 /**
  * The type of corner to display, controlling the border radius property.
  */

package/functions/assert.d.ts

@@ -1,15 +0,0 @@
-/**
- * Assert a condition
- *
- * @param predicate the condition to assert
- * @param message optional error message
- */
-export default function assert<T>(predicate: T, message?: string): void;
-/**
- * Assert a value is defined
- *
- * @param value the value to assert presence of
- * @param message optional error message
- * @returns the present value
- */
-export declare function assertDefined<T>(value: T | undefined, message?: string): T;

package/functions/assert.js

@@ -1,24 +0,0 @@
-/**
- * Assert a condition
- *
- * @param predicate the condition to assert
- * @param message optional error message
- */
-export default function assert(predicate, message) {
-    if (!predicate) {
-        throw new Error(message || "Assertion error");
-    }
-}
-/**
- * Assert a value is defined
- *
- * @param value the value to assert presence of
- * @param message optional error message
- * @returns the present value
- */
-export function assertDefined(value, message) {
-    if (value === undefined) {
-        throw new Error(message || "Unexpected undefined value");
-    }
-    return value;
-}