@adamjanicki/ui 1.6.6 → 1.6.8

package/components/Accordion/Accordion.js

@@ -26,10 +26,9 @@ 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, layout = _a.layout, rest = __rest(_a, ["drawers", "className", "duration", "hideDividers", "layout"]);
-    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, duration: duration, showDivider: !hideDividers && i < drawers.length - 1 }, i)); }) })));
+    var drawers = _a.drawers, duration = _a.duration, hideDividers = _a.hideDividers, vfx = _a.vfx, rest = __rest(_a, ["drawers", "duration", "hideDividers", "vfx"]);
+    return (_jsx(Box, __assign({ vfx: __assign({ axis: "y", radius: "rounded", color: "default", backgroundColor: "default", shadow: "subtle", border: true }, vfx) }, rest, { ref: ref, children: drawers.map(function (item, i) { return (_jsx(Drawer, { item: item, duration: duration, showDivider: !hideDividers && i < drawers.length - 1 }, i)); }) })));
 });
 var Drawer = function (_a) {
     var item = _a.item, duration = _a.duration, showDivider = _a.showDivider;
@@ -43,15 +42,15 @@ 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(Box, { className: "aui-accordion-label", children: item.label })] }) }), _jsx(Animated, { style: { overflow: "hidden" }, keepMounted: true, duration: duration, visible: 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" })] }));
+    return (_jsx(_Fragment, { children: _jsxs(Box, { vfx: { axis: "y", borderBottom: showDivider }, children: [_jsx(UnstyledButton, { onClick: function () { return onOpenChange(!open); }, children: _jsxs(Box, { vfx: { axis: "x", align: "center", gap: "s", padding: "m" }, children: [_jsx(Icon, { vfx: { color: "muted" }, size: "xs", icon: open ? "chevron-down" : "chevron-right" }), _jsx(Box, { vfx: { fontWeight: 6 }, children: item.label })] }) }), _jsx(Animated, { vfx: { overflow: "hidden" }, keepMounted: true, duration: duration, visible: 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 }) })] }) }));
 };
 export default Accordion;

package/components/Alert/Alert.d.ts

@@ -1,16 +1,11 @@
 import React from "react";
-import type { ContentType, CornerType } from "../../utils/types";
+import type { ContentType } from "../../utils/types";
 import { type BoxProps } from "../Box/Box";
 type Props = BoxProps & {
     /**
      * The type of alert to display.
      */
     type: ContentType;
-    /**
-     * [Optional] The corner style of the alert.
-     * @default "rounded"
-     */
-    corners?: CornerType;
 };
 declare const Alert: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Alert;

package/components/Alert/Alert.js

@@ -25,7 +25,7 @@ import React from "react";
 import classNames from "../../functions/classNames";
 import Box from "../Box/Box";
 var Alert = React.forwardRef(function (_a, ref) {
-    var type = _a.type, _b = _a.corners, corners = _b === void 0 ? "rounded" : _b, className = _a.className, rest = __rest(_a, ["type", "corners", "className"]);
-    return (_jsx(Box, __assign({}, rest, { className: classNames("aui-alert aui-content--".concat(type, " aui-corners--").concat(corners), className), ref: ref })));
+    var type = _a.type, vfx = _a.vfx, className = _a.className, rest = __rest(_a, ["type", "vfx", "className"]);
+    return (_jsx(Box, __assign({}, rest, { vfx: __assign({ radius: "rounded", fontWeight: 4, padding: "m" }, vfx), className: classNames("aui-alert aui-content-".concat(type), className), ref: ref })));
 });
 export default Alert;

package/components/Animated/Animated.d.ts

@@ -1,6 +1,20 @@
 import React from "react";
-import type { Style } from "../../utils/types";
+import type { Vfx, Style } from "../../utils/types";
 import { type BoxProps } from "../Box/Box";
+type AnimationState = {
+    /**
+     * Class to apply to the component when at this state
+     */
+    className?: string;
+    /**
+     * Inline styles to apply to the component at this state
+     */
+    style?: Style;
+    /**
+     * The VFX or other organizational css to apply at this state
+     */
+    vfx?: Vfx;
+};
 type Props = BoxProps & {
     /**
      * Whether to begin the animation and render the component.
@@ -27,28 +41,13 @@ type Props = BoxProps & {
      */
     keepMounted?: boolean;
     /**
-     * Animation configuration for the enter state
+     * Animation css for the start state
      */
-    animateTo?: {
-        /**
-         * Class name to apply to the component while animated (after state)
-         */
-        className?: string;
-        /**
-         * Inline styles to apply to the component while animated
-         */
-        style?: Style;
-    };
-    animateFrom?: {
-        /**
-         * Class name to apply to the component when not animated (before state)
-         */
-        className?: string;
-        /**
-         * Inline styles to apply to the component when not animated
-         */
-        style?: Style;
-    };
+    animateTo?: AnimationState;
+    /**
+     * animation css for the end state
+     */
+    animateFrom?: AnimationState;
     /**
      * The properties to apply a transition
      * @default ['all']

package/components/Animated/Animated.js

@@ -25,7 +25,7 @@ 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 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 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, vfx = props.vfx, style = props.style, rest = __rest(props, ["visible", "duration", "keepMounted", "transitionProperties", "animateTo", "animateFrom", "className", "vfx", "style"]);
     var forwardDuration = typeof duration === "number" ? duration : duration.forward;
     var reverseDuration = typeof duration === "number" ? duration : duration.reverse;
     var instantForward = forwardDuration <= 0;
@@ -82,7 +82,7 @@ var Animated = React.forwardRef(function (props, ref) {
     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 })));
+    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), vfx: __assign(__assign({}, vfx), currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.vfx) }, rest, { ref: ref })));
 });
 var makeTransition = function (transitionProperties, duration) {
     return transitionProperties.length > 0

package/components/Avatar/Avatar.d.ts

@@ -1,12 +1,7 @@
 import React from "react";
-import type { CornerType, SizeToken } from "../../utils/types";
+import type { 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"

package/components/Avatar/Avatar.js

@@ -25,11 +25,11 @@ 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 _b = _a.size, size = _b === void 0 ? "s" : _b, backgroundImage = _a.backgroundImage, className = _a.className, style = _a.style, username = _a.username, vfx = _a.vfx, rest = __rest(_a, ["size", "backgroundImage", "className", "style", "username", "vfx"]);
+    var _c = useState(false), imageError = _c[0], setImageError = _c[1];
     var useFallback = imageError || !backgroundImage;
     var color = chooseColor(username);
-    var avatarClassName = "aui-avatar aui-corners--".concat(corners);
+    var avatarClassName = null;
     if (useFallback) {
         avatarClassName = classNames(avatarClassName, "aui-avatar-".concat(color));
     }
@@ -45,7 +45,7 @@ var Avatar = React.forwardRef(function (_a, ref) {
         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) })));
+    return (_jsx(Box, __assign({ className: classNames(avatarClassName, className), style: __assign(__assign({}, avatarStyle), style), vfx: __assign({ radius: "rounded", overflow: "hidden", fontWeight: 6, textAlign: "center" }, vfx) }, 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

package/components/Badge/Badge.d.ts

@@ -1,16 +1,11 @@
 import React from "react";
-import type { ContentType, CornerType } from "../../utils/types";
+import type { ContentType } from "../../utils/types";
 import { type BoxProps } from "../Box/Box";
 type Props = BoxProps & {
     /**
      * The type of badge to display.
      */
     type: ContentType;
-    /**
-     * [Optional] The corner style of the badge.
-     * @default "rounded"
-     */
-    corners?: CornerType;
 };
 declare const Badge: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Badge;

package/components/Badge/Badge.js

@@ -25,7 +25,7 @@ import React from "react";
 import classNames from "../../functions/classNames";
 import Box from "../Box/Box";
 var Badge = React.forwardRef(function (_a, ref) {
-    var type = _a.type, className = _a.className, _b = _a.corners, corners = _b === void 0 ? "rounded" : _b, rest = __rest(_a, ["type", "className", "corners"]);
-    return (_jsx(Box, __assign({}, rest, { className: classNames("aui-badge aui-content--".concat(type, " aui-corners--").concat(corners), className), ref: ref })));
+    var type = _a.type, className = _a.className, vfx = _a.vfx, rest = __rest(_a, ["type", "className", "vfx"]);
+    return (_jsx(Box, __assign({}, rest, { vfx: __assign({ radius: "rounded", paddingY: "xxs", paddingX: "xs", fontWeight: 5, fontSize: "s", width: "fit" }, vfx), className: classNames("aui-badge aui-content-".concat(type), className), ref: ref })));
 });
 export default Badge;

package/components/Banner/Banner.js

@@ -25,7 +25,7 @@ import React from "react";
 import classNames from "../../functions/classNames";
 import Box from "../Box/Box";
 var Banner = React.forwardRef(function (_a, ref) {
-    var type = _a.type, className = _a.className, rest = __rest(_a, ["type", "className"]);
-    return (_jsx(Box, __assign({}, rest, { className: classNames("aui-content--".concat(type, " aui-banner"), className), ref: ref })));
+    var type = _a.type, className = _a.className, vfx = _a.vfx, rest = __rest(_a, ["type", "className", "vfx"]);
+    return (_jsx(Box, __assign({}, rest, { vfx: __assign({ fontWeight: 4, paddingY: "l", paddingX: "xl", width: "full" }, vfx), className: classNames("aui-content-".concat(type), className), ref: ref })));
 });
 export default Banner;

package/components/Box/Box.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 declare const Box: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    layout?: import("../../utils/types").Layout;
+    vfx?: import("../../utils/types").Vfx;
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type BoxProps = React.ComponentProps<typeof Box>;
 export default Box;

package/components/Button/Button.d.ts

@@ -1,24 +1,13 @@
 import React from "react";
-import type { CornerType, Layout } from "../../utils/types";
 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
-     */
-    layout?: Layout;
-};
+import ui from "../ui";
+type DefaultButtonProps = React.ComponentProps<typeof ui.button>;
 export type VisualButtonProps = {
     /**
      * Type of button
      * @default "primary"
      */
     variant?: "primary" | "secondary";
-    /**
-     * Type of corners on the button
-     * @default "rounded"
-     */
-    corners?: CornerType;
     /**
      * [Optional] Size of the button, if wishing to make smaller
      * @default "regular"
@@ -26,8 +15,10 @@ export type VisualButtonProps = {
     size?: "regular" | "small";
 };
 type ButtonProps = DefaultButtonProps & VisualButtonProps;
-export declare const UnstyledButton: React.ForwardRefExoticComponent<Omit<DefaultButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-type IconButtonProps = Omit<BaseButtonProps, "children"> & {
+export declare const UnstyledButton: React.ForwardRefExoticComponent<Omit<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    vfx?: import("../../utils/types").Vfx;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type IconButtonProps = Omit<DefaultButtonProps, "children"> & {
     /**
      * The hover effect to play when the user hovers over the button
      * @default "dim"
@@ -48,5 +39,17 @@ type IconButtonProps = Omit<BaseButtonProps, "children"> & {
 };
 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 declare const getButtonProps: ({ variant, size, }: VisualButtonProps) => {
+    className: string;
+    vfx: {
+        readonly radius: "rounded";
+        readonly fontWeight: 6;
+        readonly fontSize: "xs";
+        readonly padding: "xs";
+    } | {
+        readonly radius: "rounded";
+        readonly fontWeight: 6;
+        readonly padding: "s";
+    };
+};
 export default Button;

package/components/Button/Button.js

@@ -23,22 +23,30 @@ var __rest = (this && this.__rest) || function (s, e) {
 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";
+import ui from "../ui";
 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 })));
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(ui.button, __assign({}, props, { className: classNames("aui-action aui-button", 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 icon = _a.icon, size = _a.size, vfx = _a.vfx, iconProps = _a.iconProps, _b = _a.variant, variant = _b === void 0 ? "dim" : _b, className = _a.className, rest = __rest(_a, ["icon", "size", "vfx", "iconProps", "variant", "className"]);
+    return (_jsx(UnstyledButton, __assign({}, rest, { vfx: __assign({ axis: "x", align: "center", justify: "center" }, vfx), className: classNames("aui-".concat(variant), className), ref: ref, children: _jsx(Icon, __assign({ icon: icon, size: size }, iconProps)) })));
 });
+var vfxBySize = {
+    small: { fontSize: "xs", padding: "xs" },
+    regular: { padding: "s" },
+};
 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 })));
+    var variant = _a.variant, className = _a.className, vfx = _a.vfx, size = _a.size, rest = __rest(_a, ["variant", "className", "vfx", "size"]);
+    var _b = getButtonProps({ variant: variant, size: size }), additionalVfx = _b.vfx, additionalClassName = _b.className;
+    return (_jsx(UnstyledButton, __assign({}, rest, { vfx: __assign(__assign({}, additionalVfx), vfx), className: classNames(additionalClassName, 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 var getButtonProps = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.size, size = _c === void 0 ? "regular" : _c;
+    return ({
+        className: "aui-button-".concat(variant),
+        vfx: __assign(__assign({}, vfxBySize[size]), { radius: "rounded", fontWeight: 6 }),
+    });
 };
 export default Button;

package/components/Carousel/Carousel.js

@@ -27,9 +27,10 @@ import Button from "../Button";
 import Box from "../Box/Box";
 import Icon from "../Icon";
 var DEFAULT_DURATION_S = 1;
+var itemVfx = { width: "full", height: "full" };
 var Carousel = React.forwardRef(function (_a, ref) {
     var _b, _c;
-    var children = _a.children, className = _a.className, hideArrows = _a.hideArrows, hideDots = _a.hideDots, dotProps = _a.dotProps, leftArrowProps = _a.leftArrowProps, rightArrowProps = _a.rightArrowProps, autoplayInterval = _a.autoplayInterval, duration = _a.duration, rest = __rest(_a, ["children", "className", "hideArrows", "hideDots", "dotProps", "leftArrowProps", "rightArrowProps", "autoplayInterval", "duration"]);
+    var children = _a.children, hideArrows = _a.hideArrows, vfx = _a.vfx, hideDots = _a.hideDots, dotProps = _a.dotProps, leftArrowProps = _a.leftArrowProps, rightArrowProps = _a.rightArrowProps, autoplayInterval = _a.autoplayInterval, duration = _a.duration, rest = __rest(_a, ["children", "hideArrows", "vfx", "hideDots", "dotProps", "leftArrowProps", "rightArrowProps", "autoplayInterval", "duration"]);
     // min duration
     duration = Math.max(duration !== null && duration !== void 0 ? duration : DEFAULT_DURATION_S, 0.1);
     autoplayInterval = autoplayInterval
@@ -81,11 +82,23 @@ 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, { layout: {
+    return (_jsxs(Box, __assign({}, rest, { vfx: __assign({ maxWidth: "full", width: "fit", pos: "relative", overflow: "hidden" }, vfx), ref: ref, children: [_jsxs(Box, { vfx: {
                     axis: delta >= 0 ? "x" : "-x",
                     width: "full",
                     height: "full",
-                }, style: animatingStyles, 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, { layout: { axis: "x", align: "center", justify: "center" }, className: classNames("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: "chevron-left", size: "xs", style: { marginRight: 2 } })) }), _jsx(Button, { layout: { axis: "x", align: "center", justify: "center" }, className: classNames("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: "chevron-right", size: "xs", style: { marginLeft: 2 } })) })] })), !hideDots && (_jsx(Box, { layout: { axis: "x", align: "center", gap: "xxs" }, 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)); }) }))] }))] })));
+                }, style: animatingStyles, onTransitionEnd: onTransitionEnd, children: [_jsx(Box, { vfx: itemVfx, className: "aui-carousel-item", children: children[cur] }), _jsx(Box, { vfx: itemVfx, className: "aui-carousel-item", "aria-hidden": true, children: children[next] })] }), length > 1 && (_jsxs(_Fragment, { children: [!hideArrows && (_jsxs(_Fragment, { children: [_jsx(Button, { vfx: {
+                                    axis: "x",
+                                    align: "center",
+                                    justify: "center",
+                                    radius: "max",
+                                    padding: "none",
+                                }, className: classNames("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), "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: "chevron-left", size: "xs", style: { marginRight: 2 } })) }), _jsx(Button, { vfx: {
+                                    axis: "x",
+                                    align: "center",
+                                    justify: "center",
+                                    radius: "max",
+                                    padding: "none",
+                                }, className: classNames("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), "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: "chevron-right", size: "xs", style: { marginLeft: 2 } })) })] })), !hideDots && (_jsx(Box, { vfx: { axis: "x", align: "center", gap: "xxs" }, 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), vfx: { radius: "max", padding: "none" }, 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/Hamburger/Hamburger.d.ts

@@ -42,7 +42,7 @@ export type Props = {
      */
     style?: Style;
     /**
-     * [Optional] round corners of the bars
+     * [Optional] round borders of the bars
      */
     rounded?: boolean;
 };

package/components/Icon/Icon.d.ts

@@ -1,7 +1,8 @@
 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"> & {
+import ui from "../ui";
+export type Props = Omit<React.ComponentProps<typeof ui.svg>, "children" | "viewBox"> & {
     /**
      * The version of icon to render
      */

package/components/Icon/Icon.js

@@ -24,8 +24,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import icons from "./icons";
 import { classNames } from "../../functions";
+import ui from "../ui";
 var Icon = React.forwardRef(function (_a, ref) {
     var icon = _a.icon, className = _a.className, _b = _a.size, size = _b === void 0 ? "s" : _b, rest = __rest(_a, ["icon", "className", "size"]);
-    return (_jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", className: classNames("aui-icon", "aui-icon-".concat(size), className) }, rest, { ref: ref, children: _jsx("path", { d: icons[icon] }) })));
+    return (_jsx(ui.svg, __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", className: classNames("aui-icon", "aui-icon-".concat(size), className) }, rest, { ref: ref, children: _jsx("path", { d: icons[icon] }) })));
 });
 export default Icon;

package/components/Input/IconInput.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { InputProps } from "./Input";
-import type { CornerType, Style } from "../../utils/types";
-type IconInputProps = {
+import { Props as InputProps } from "./Input";
+import { type BoxProps } from "../Box/Box";
+type IconInputProps = Omit<BoxProps, "children"> & {
     /**
      * [Optional] Icon to display at the start of the input
      */
@@ -10,22 +10,10 @@ type IconInputProps = {
      * [Optional] Icon to display at the end of the input
      */
     endIcon?: React.ReactNode;
-    /**
-     * [Optional] Class name to add to the container
-     */
-    className?: string;
-    /**
-     * [Optional] Inline styles to add to the container
-     */
-    style?: Style;
-    /**
-     * [Optional] Corner style for the input
-     */
-    corners?: CornerType;
     /**
      * [Optional] Props to pass directly to the input element
      */
-    inputProps?: Omit<InputProps, "corners">;
+    inputProps?: InputProps;
 };
-declare const IconInput: React.ForwardRefExoticComponent<IconInputProps & React.RefAttributes<HTMLDivElement>>;
+declare const IconInput: React.ForwardRefExoticComponent<Omit<IconInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default IconInput;

package/components/Input/IconInput.js

@@ -9,12 +9,25 @@ var __assign = (this && this.__assign) || function () {
     };
     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 { forwardRef } from "react";
 import classNames from "../../functions/classNames";
-import Box from "../Box";
+import Box from "../Box/Box";
+import ui from "../ui";
 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 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] }));
+    var startIcon = _a.startIcon, endIcon = _a.endIcon, className = _a.className, vfx = _a.vfx, inputProps = _a.inputProps, rest = __rest(_a, ["startIcon", "endIcon", "className", "vfx", "inputProps"]);
+    var _b = inputProps || {}, inputClassName = _b.className, inputVfx = _b.vfx, restInputProps = __rest(_b, ["className", "vfx"]);
+    return (_jsxs(Box, __assign({ vfx: __assign({ axis: "x", align: "center", radius: "rounded", overflow: "scroll" }, vfx), className: classNames("aui-input", className) }, rest, { ref: ref, children: [startIcon, _jsx(ui.input, __assign({}, restInputProps, { vfx: __assign({ radius: "rounded", backgroundColor: "transparent", width: "full" }, inputVfx), className: classNames("aui-input-base", inputClassName) })), endIcon] })));
 });
 export default IconInput;

package/components/Input/Input.d.ts

@@ -1,12 +1,7 @@
 import React from "react";
-import type { CornerType } from "../../utils/types";
-type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
-    /**
-     * Type of corners on the input
-     * @default "rounded"
-     */
-    corners?: CornerType;
-};
-declare const Input: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export type InputProps = React.ComponentProps<typeof Input>;
+import ui from "../ui";
+export type Props = React.ComponentProps<typeof ui.input>;
+declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & {
+    vfx?: import("../../utils/types").Vfx;
+}, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default Input;

package/components/Input/Input.js

@@ -23,8 +23,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "../../functions/classNames";
+import ui from "../ui";
 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 aui-corners--".concat(corners), className) })));
+    var className = _a.className, vfx = _a.vfx, props = __rest(_a, ["className", "vfx"]);
+    return (_jsx(ui.input, __assign({}, props, { ref: ref, vfx: __assign({ radius: "rounded" }, vfx), className: classNames("aui-input-base aui-input", className) })));
 });
 export default Input;

package/components/Input/TextArea.d.ts

@@ -1,11 +1,5 @@
 import React from "react";
-import type { CornerType } from "../../utils/types";
-type TextAreaProps = React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> & {
-    /**
-     * Type of corners on the text area
-     * @default "rounded"
-     */
-    corners?: CornerType;
-};
-declare const TextArea: React.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+declare const TextArea: React.ForwardRefExoticComponent<Omit<Omit<React.ClassAttributes<HTMLTextAreaElement> & React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    vfx?: import("../../utils/types").Vfx;
+}, "ref"> & React.RefAttributes<HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 export default TextArea;

package/components/Input/TextArea.js

@@ -23,8 +23,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "../../functions/classNames";
+import ui from "../ui";
 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 aui-corners--".concat(corners), className), rows: rows })));
+    var className = _a.className, _b = _a.rows, rows = _b === void 0 ? 3 : _b, vfx = _a.vfx, props = __rest(_a, ["className", "rows", "vfx"]);
+    return (_jsx(ui.textarea, __assign({}, props, { ref: ref, className: classNames("aui-input-base aui-input", className), vfx: __assign({ radius: "rounded" }, vfx), rows: rows })));
 });
 export default TextArea;

package/components/Layer/Layer.js

@@ -27,7 +27,7 @@ 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, onMouseDown = _a.onMouseDown, layout = _a.layout, rest = __rest(_a, ["returnFocusOnEscape", "disableScrollLock", "onClose", "children", "className", "onMouseDown", "layout"]);
+    var returnFocusOnEscape = _a.returnFocusOnEscape, disableScrollLock = _a.disableScrollLock, onClose = _a.onClose, children = _a.children, className = _a.className, onMouseDown = _a.onMouseDown, vfx = _a.vfx, rest = __rest(_a, ["returnFocusOnEscape", "disableScrollLock", "onClose", "children", "className", "onMouseDown", "vfx"]);
     var focusRef = useFocusTrap(true);
     // Lock and unlock on mount and unmount
     useScrollLock(!disableScrollLock);
@@ -48,7 +48,7 @@ var Layer = React.forwardRef(function (_a, ref) {
         };
     }, [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) {
+    return (_jsx(Box, __assign({ vfx: __assign({ pos: "fixed", axis: "y", align: "center", justify: "center", z: "max" }, vfx) }, 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, {

package/components/Link/Link.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { type VisualButtonProps } from "../Button/Button";
-import { Layout } from "../../utils/types";
+import { Vfx } from "../../utils/types";
 export type BaseLinkProps = Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href"> & {
     /**
      * URL to navigate to
@@ -20,9 +20,10 @@ type LinkProps = BaseLinkProps & {
      */
     LinkElement?: CustomLinkElement;
     /**
-     * Additional styles to apply to the layout that are transformed to classNames to be easier to override if needed
+     * The VFX or other organizational css to apply to this element.
+     * Properties are translated to class names before being applied.
      */
-    layout?: Layout;
+    vfx?: Vfx;
 };
 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"> & {
@@ -42,9 +43,10 @@ export declare const ButtonLink: React.ForwardRefExoticComponent<Omit<Omit<React
      */
     LinkElement?: CustomLinkElement;
     /**
-     * Additional styles to apply to the layout that are transformed to classNames to be easier to override if needed
+     * The VFX or other organizational css to apply to this element.
+     * Properties are translated to class names before being applied.
      */
-    layout?: Layout;
+    vfx?: Vfx;
 } & VisualButtonProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 export default Link;