@adamjanicki/ui 1.5.5 → 1.5.6

package/components/Alert/Alert.d.ts

@@ -1,27 +1,15 @@
 import React from "react";
-import { ContentType, CornerType } from "../../types";
-type Props = {
+import type { ContentType, CornerType, DivProps } from "../../types";
+type Props = DivProps & {
     /**
      * The type of alert to display.
      */
     type: ContentType;
-    /**
-     * The content to display in the alert.
-     */
-    children: React.ReactNode | React.ReactNode[];
-    /**
-     * [Optional] Additional class names to apply to the alert.
-     */
-    className?: string;
-    /**
-     * [Optional] Additional styles to apply to the alert.
-     */
-    style?: React.CSSProperties;
     /**
      * [Optional] The corner style of the alert.
      * @default "rounded"
      */
     corners?: CornerType;
 };
-declare const Alert: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+declare const Alert: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Alert;

package/components/Alert/Alert.js

@@ -25,6 +25,6 @@ import React from "react";
 import classNames from "../../functions/classNames";
 var Alert = 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("div", __assign({ className: classNames("ajui-alert content--".concat(type, " corners--").concat(corners), className), ref: ref }, rest)));
+    return (_jsx("div", __assign({}, rest, { className: classNames("ajui-alert ajui-content--".concat(type, " ajui-corners--").concat(corners), className), ref: ref })));
 });
 export default Alert;

package/components/Animated/Animated.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-type Props = {
+import type { DivProps, Style } from "../../types";
+type Props = DivProps & {
     /**
      * Whether to begin the animation.
      * Set to true to start animation, false to start the exit animation.
@@ -26,7 +27,7 @@ type Props = {
         /**
          * Inline styles to apply to the component while animated
          */
-        style?: React.CSSProperties;
+        style?: Style;
     };
     animateFrom?: {
         /**
@@ -36,20 +37,8 @@ type Props = {
         /**
          * Inline styles to apply to the component when not animated
          */
-        style?: React.CSSProperties;
+        style?: Style;
     };
-    /**
-     * Children to render
-     */
-    children: React.ReactNode | React.ReactNode[];
-    /**
-     * [Optional] className to apply to the component always
-     */
-    className?: string;
-    /**
-     * [Optional] Inline styles to apply to the component always
-     */
-    style?: React.CSSProperties;
 };
-declare const Animated: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+declare const Animated: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Animated;

package/components/Animated/Animated.js

@@ -9,13 +9,24 @@ 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 } from "react/jsx-runtime";
 import React, { useState, useEffect, useRef } from "react";
 import classNames from "../../functions/classNames";
 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, children = props.children, className = props.className, style = props.style;
+    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, children = props.children, className = props.className, style = props.style, rest = __rest(props, ["animated", "duration", "keepMounted", "animateTo", "animateFrom", "children", "className", "style"]);
     var _c = useState(animated || keepMounted), shouldRender = _c[0], setShouldRender = _c[1];
-    var _d = useState(animated ? "forward" : "reverse"), animationState = _d[0], setAnimationState = _d[1];
+    var _d = useState(false), isAnimatingForward = _d[0], setIsAnimatingForward = _d[1];
     var timeoutRef = useRef(null);
     var animationFrameRef = useRef(null);
     var clearRefs = function () {
@@ -29,30 +40,35 @@ var Animated = React.forwardRef(function (props, ref) {
         }
     };
     useEffect(function () {
-        clearRefs();
-        if (animated) {
-            setShouldRender(true);
-            // Use requestAnimationFrame so browser paints shouldRender first
+        // initiate forward animation
+        if (animated && shouldRender) {
+            clearRefs();
             animationFrameRef.current = requestAnimationFrame(function () {
-                setAnimationState("forward");
-                animationFrameRef.current = null;
+                return setIsAnimatingForward(true);
             });
         }
+        return clearRefs;
+    }, [animated, shouldRender]);
+    useEffect(function () {
+        // make container element appear on DOM
+        if (animated) {
+            setShouldRender(true);
+        }
+        // initiate reverse animation
         else {
-            setAnimationState("reverse");
+            clearRefs();
+            setIsAnimatingForward(false);
             timeoutRef.current = window.setTimeout(function () {
                 if (!keepMounted) {
                     setShouldRender(false);
                 }
-                timeoutRef.current = null;
-                // convert to ms
             }, duration * 1000);
         }
         return clearRefs;
-    }, [animated, duration, keepMounted, shouldRender]);
+    }, [animated, duration, keepMounted]);
     if (!shouldRender)
         return null;
-    var currentAnimation = animationState === "forward" ? animateTo : animateFrom;
-    return (_jsx("div", { 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), ref: ref, children: children }));
+    var currentAnimation = isAnimatingForward ? animateTo : animateFrom;
+    return (_jsx("div", __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, children: children })));
 });
 export default Animated;

package/components/Badge/Badge.d.ts

@@ -1,28 +1,15 @@
 import React from "react";
-import { ContentType, CornerType } from "../../types";
-type Props = {
+import type { ContentType, CornerType, DivProps } from "../../types";
+type Props = DivProps & {
     /**
      * The type of badge to display.
      */
     type: ContentType;
-    /**
-     * The content to display in the badge.
-     * Should be short.
-     */
-    children: React.ReactNode | React.ReactNode[];
-    /**
-     * [Optional] Additional class names to apply to the badge.
-     */
-    className?: string;
-    /**
-     * [Optional] Additional styles to apply to the badge.
-     */
-    style?: React.CSSProperties;
     /**
      * [Optional] The corner style of the badge.
      * @default "rounded"
      */
     corners?: CornerType;
 };
-declare const Badge: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+declare const Badge: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Badge;

package/components/Badge/Badge.js

@@ -25,6 +25,6 @@ import React from "react";
 import classNames from "../../functions/classNames";
 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("div", __assign({ className: classNames("ajui-badge content--".concat(type, " corners--").concat(corners), className), ref: ref }, rest)));
+    return (_jsx("div", __assign({}, rest, { className: classNames("ajui-badge ajui-content--".concat(type, " ajui-corners--").concat(corners), className), ref: ref })));
 });
 export default Badge;

package/components/Banner/Banner.d.ts

@@ -1,22 +1,10 @@
 import React from "react";
-import { ContentType } from "../../types";
-type Props = {
+import type { ContentType, DivProps } from "../../types";
+type Props = DivProps & {
     /**
      * The type of badge to display.
      */
     type: ContentType;
-    /**
-     * The content to display in the banner.
-     */
-    children: React.ReactNode | React.ReactNode[];
-    /**
-     * [Optional] Additional class names to apply to the banner.
-     */
-    className?: string;
-    /**
-     * [Optional] Additional styles to apply to the banner.
-     */
-    style?: React.CSSProperties;
 };
-declare const Banner: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+declare const Banner: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Banner;

package/components/Banner/Banner.js

@@ -25,6 +25,6 @@ import React from "react";
 import classNames from "../../functions/classNames";
 var Banner = React.forwardRef(function (_a, ref) {
     var type = _a.type, className = _a.className, rest = __rest(_a, ["type", "className"]);
-    return (_jsx("div", __assign({ className: classNames("content--".concat(type, " ajui-banner"), className), ref: ref }, rest)));
+    return (_jsx("div", __assign({}, rest, { className: classNames("ajui-content--".concat(type, " ajui-banner"), className), ref: ref })));
 });
 export default Banner;

package/components/Button/Button.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { CustomLinkElement } from "../Link/Link";
-import { CornerType } from "../../types";
+import { type CustomLinkElement } from "../Link/Link";
+import type { CornerType } from "../../types";
 type DefaultButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
     /**
      * [Optional] This can be used as a link if the `to` prop is provided
@@ -26,7 +26,7 @@ type ButtonProps = DefaultButtonProps & {
      * Type of button
      * @default "primary"
      */
-    variant?: "primary" | "secondary" | "transparent";
+    variant?: "primary" | "secondary";
     /**
      * Type of corners on the button
      * @default "rounded"

package/components/Button/Button.js

@@ -30,7 +30,7 @@ export var UnstyledButton = forwardRef(function (_a, ref) {
     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: className, ref: ref }));
+    return (_jsx("button", __assign({}, props, { className: classNames("ajui-action", className), ref: ref })));
 });
 export var IconButton = forwardRef(function (_a, ref) {
     var icon = _a.icon, className = _a.className, props = __rest(_a, ["icon", "className"]);
@@ -38,6 +38,6 @@ export var IconButton = forwardRef(function (_a, ref) {
 });
 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("ajui-button--".concat(variant, " ajui-button-size--").concat(size, " corners--").concat(corners), className), ref: ref })));
+    return (_jsx(UnstyledButton, __assign({}, rest, { className: classNames("ajui-button--".concat(variant, " ajui-button-size--").concat(size, " ajui-corners--").concat(corners), className), ref: ref })));
 });
 export default Button;

package/components/Carousel/Carousel.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
+import type { DivProps, Style } from "../../types";
 type ButtonProps = {
     /**
      * Children to render inside the button
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode | React.ReactNode[];
     /**
      * Additional class name to apply to the button
      */
@@ -11,9 +12,9 @@ type ButtonProps = {
     /**
      * Additional styles to apply to the button
      */
-    style?: React.CSSProperties;
+    style?: Style;
 };
-type Props = {
+type Props = DivProps & {
     /**
      * The child elements/slides of the carousel
      */
@@ -50,14 +51,6 @@ type Props = {
      * [Optional] props to supply to the right arrow button
      */
     rightArrowProps?: ButtonProps;
-    /**
-     * [Optional] Additional class name to apply to the carousel.
-     */
-    className?: string;
-    /**
-     * [Optional] Additional styles to apply to the carousel.
-     */
-    style?: React.CSSProperties;
 };
-declare const Carousel: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+declare const Carousel: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Carousel;

package/components/Carousel/Carousel.js

@@ -9,6 +9,17 @@ 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, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { classNames } from "../../functions";
@@ -16,7 +27,7 @@ import Button from "../Button";
 var DEFAULT_DURATION_S = 1;
 var Carousel = React.forwardRef(function (props, ref) {
     var _a, _b, _c;
-    var children = props.children, className = props.className, style = props.style, hideArrows = props.hideArrows, hideDots = props.hideDots, dotProps = props.dotProps, leftArrowProps = props.leftArrowProps, rightArrowProps = props.rightArrowProps;
+    var children = props.children, className = props.className, hideArrows = props.hideArrows, hideDots = props.hideDots, dotProps = props.dotProps, leftArrowProps = props.leftArrowProps, rightArrowProps = props.rightArrowProps, rest = __rest(props, ["children", "className", "hideArrows", "hideDots", "dotProps", "leftArrowProps", "rightArrowProps"]);
     // min duration
     var duration = Math.max((_a = props.duration) !== null && _a !== void 0 ? _a : DEFAULT_DURATION_S, 0.1);
     var autoplayInterval = props.autoplayInterval
@@ -68,7 +79,7 @@ var Carousel = React.forwardRef(function (props, ref) {
             transition: "transform ".concat(duration, "s ease-in-out"),
         }
         : undefined;
-    return (_jsxs("div", { className: classNames("ajui-carousel", className), style: style, ref: ref, children: [_jsxs("div", { className: "ajui-carousel-slider", style: __assign(__assign({}, animatingStyles), { flexDirection: delta >= 0 ? "row" : "row-reverse" }), onTransitionEnd: onTransitionEnd, children: [_jsx("div", { className: "ajui-carousel-item", children: children[cur] }), _jsx("div", { className: "ajui-carousel-item", "aria-hidden": true, children: children[next] })] }), length > 1 && (_jsxs(_Fragment, { children: [!hideArrows && (_jsxs(_Fragment, { children: [_jsx(Button, { className: classNames("ajui-carousel-arrow-prev", leftArrowProps === null || leftArrowProps === void 0 ? void 0 : leftArrowProps.className), style: 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("ajui-carousel-arrow-next", rightArrowProps === null || rightArrowProps === void 0 ? void 0 : rightArrowProps.className), style: 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("div", { className: "ajui-carousel-dots", children: children.map(function (_, i) { return (_jsx(Button, { className: classNames("ajui-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("div", __assign({}, rest, { className: classNames("ajui-carousel", className), ref: ref, children: [_jsxs("div", { className: "ajui-carousel-slider", style: __assign(__assign({}, animatingStyles), { flexDirection: delta >= 0 ? "row" : "row-reverse" }), onTransitionEnd: onTransitionEnd, children: [_jsx("div", { className: "ajui-carousel-item", children: children[cur] }), _jsx("div", { className: "ajui-carousel-item", "aria-hidden": true, children: children[next] })] }), length > 1 && (_jsxs(_Fragment, { children: [!hideArrows && (_jsxs(_Fragment, { children: [_jsx(Button, { className: classNames("ajui-carousel-arrow-prev", leftArrowProps === null || leftArrowProps === void 0 ? void 0 : leftArrowProps.className), style: 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("ajui-carousel-arrow-next", rightArrowProps === null || rightArrowProps === void 0 ? void 0 : rightArrowProps.className), style: 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("div", { className: "ajui-carousel-dots", children: children.map(function (_, i) { return (_jsx(Button, { className: classNames("ajui-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/Hamburger/Hamburger.d.ts

@@ -1,3 +1,4 @@
+import type { Style } from "../../types";
 export type Props = {
     /**
      * Size of the button in pixels
@@ -39,17 +40,17 @@ export type Props = {
     /**
      * [Optional] additional styles to apply to the button
      */
-    style?: React.CSSProperties;
+    style?: Style;
     /**
      * [Optional] round corners of the bars
      */
     rounded?: boolean;
 };
 type OpenStyle = {
-    outer?: React.CSSProperties;
-    top: React.CSSProperties;
-    bottom: React.CSSProperties;
-    middle?: React.CSSProperties;
+    outer?: Style;
+    top: Style;
+    bottom: Style;
+    middle?: Style;
 };
 type InnerProps = Omit<Props, "variant" | "direction"> & {
     double?: boolean;

package/components/InlineCode/InlineCode.js

@@ -24,7 +24,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useState, useRef } from "react";
 import { classNames } from "../../functions";
 var InlineCode = React.forwardRef(function (_a, ref) {
-    var className = _a.className, disableCopy = _a.disableCopy, onClick = _a.onClick, children = _a.children, props = __rest(_a, ["className", "disableCopy", "onClick", "children"]);
+    var className = _a.className, disableCopy = _a.disableCopy, onClick = _a.onClick, children = _a.children, rest = __rest(_a, ["className", "disableCopy", "onClick", "children"]);
     var _b = useState(false), copied = _b[0], setCopied = _b[1];
     var timeoutRef = useRef(null);
     var handleCopy = function () {
@@ -40,11 +40,11 @@ var InlineCode = React.forwardRef(function (_a, ref) {
             timeoutRef.current = null;
         }, 3000);
     };
-    return (_jsx("code", __assign({ ref: ref, role: "button", className: classNames("ajui-inline-code", disableCopy ? undefined : "ajui-copy-cursor", copied ? "ajui-inline-code-copied" : undefined, className), onClick: function (e) {
+    return (_jsx("code", __assign({}, rest, { ref: ref, role: "button", className: classNames("ajui-inline-code", disableCopy ? undefined : "ajui-copy-cursor", copied ? "ajui-inline-code-copied" : undefined, className), onClick: function (e) {
             if (!disableCopy) {
                 handleCopy();
             }
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        } }, props, { children: children })));
+        }, children: children })));
 });
 export default InlineCode;

package/components/Input/IconInput.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { InputProps } from "./Input";
-import { CornerType } from "../../types";
+import type { CornerType, Style } from "../../types";
 type IconInputProps = {
     /**
      * [Optional] Icon to display at the start of the input
@@ -17,7 +17,7 @@ type IconInputProps = {
     /**
      * [Optional] Inline styles to add to the container
      */
-    style?: React.CSSProperties;
+    style?: Style;
     /**
      * [Optional] Corner style for the input
      */

package/components/Input/IconInput.js

@@ -14,6 +14,6 @@ import { forwardRef } from "react";
 import classNames from "../../functions/classNames";
 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("div", { className: classNames("ajui-input-default ajui-icon-input corners--".concat(corners), className), style: style, ref: ref, children: [startIcon || null, _jsx("input", __assign({}, inputProps, { className: classNames("ajui-input-base corners--".concat(corners), inputProps === null || inputProps === void 0 ? void 0 : inputProps.className) })), endIcon || null] }));
+    return (_jsxs("div", { className: classNames("ajui-input-default ajui-icon-input ajui-corners--".concat(corners), className), style: style, ref: ref, children: [startIcon || null, _jsx("input", __assign({}, inputProps, { className: classNames("ajui-input-base ajui-corners--".concat(corners), inputProps === null || inputProps === void 0 ? void 0 : inputProps.className) })), endIcon || null] }));
 });
 export default IconInput;

package/components/Input/Input.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CornerType } from "../../types";
+import type { CornerType } from "../../types";
 type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
     /**
      * Type of corners on the input

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("ajui-input-base ajui-input-default corners--".concat(corners), className) })));
+    return (_jsx("input", __assign({}, props, { ref: ref, className: classNames("ajui-input-base ajui-input-default ajui-corners--".concat(corners), className) })));
 });
 export default Input;

package/components/Input/TextArea.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CornerType } from "../../types";
+import type { CornerType } from "../../types";
 type TextAreaProps = React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> & {
     /**
      * Type of corners on the text area

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("ajui-input-base ajui-input-default corners--".concat(corners), className), rows: rows })));
+    return (_jsx("textarea", __assign({}, props, { ref: ref, className: classNames("ajui-input-base ajui-input-default ajui-corners--".concat(corners), className), rows: rows })));
 });
 export default TextArea;

package/components/Layer/Layer.d.ts

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

package/components/Link/Link.d.ts

@@ -1,10 +1,8 @@
 import React from "react";
 type BuiltinLinkProps = Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href">;
-export type CustomLinkElement = (props: Partial<BuiltinLinkProps> & {
+export type CustomLinkElement = React.ForwardRefExoticComponent<BuiltinLinkProps & {
     to: string;
-} & {
-    ref?: React.MutableRefObject<HTMLAnchorElement>;
-}) => React.ReactNode;
+} & React.RefAttributes<HTMLAnchorElement>>;
 type DefaultLinkProps = BuiltinLinkProps & {
     /**
      * URL to navigate to

package/components/Link/Link.js

@@ -28,8 +28,8 @@ var DefaultLinkElement = forwardRef(function (_a, 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, props = __rest(_a, ["LinkElement"]);
-    return (_jsx(LinkElement, __assign({}, props, { ref: 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("ajui-action", className), ref: ref })));
 });
 var Link = forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);

package/components/Select/Select.d.ts

@@ -1,17 +1,10 @@
 import React from "react";
-import { CornerType } from "../../types";
+import type { CornerType } from "../../types";
 type Props = React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> & {
     /**
      * Array of options to display in the select
      */
     options: string[];
-    /**
-     * Mapper function to get the value of the option
-     *
-     * @param option the option to get the value of
-     * @returns the value of the option
-     */
-    getOptionValue?: (option: string) => string;
     /**
      * Mapper function to get the label of the option
      *

package/components/Select/Select.js

@@ -23,9 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "../../functions/classNames";
-var identity = function (x) { return x; };
 var Select = function (_a, ref) {
-    var className = _a.className, options = _a.options, _b = _a.getOptionValue, getOptionValue = _b === void 0 ? identity : _b, _c = _a.getOptionLabel, getOptionLabel = _c === void 0 ? identity : _c, _d = _a.corners, corners = _d === void 0 ? "rounded" : _d, style = _a.style, disabled = _a.disabled, props = __rest(_a, ["className", "options", "getOptionValue", "getOptionLabel", "corners", "style", "disabled"]);
-    return (_jsxs("div", { className: classNames("ajui-select-container", "corners--".concat(corners), disabled ? "ajui-select-disabled" : undefined, className) || undefined, style: style, children: [_jsx("select", __assign({}, props, { ref: ref, className: "ajui-select-base corners--".concat(corners), disabled: disabled, children: options.map(function (option, index) { return (_jsx("option", { value: getOptionValue(option), children: getOptionLabel(option) }, index)); }) })), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", className: "ajui-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" }) })] }));
+    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("div", { className: classNames("ajui-select-container", "ajui-corners--".concat(corners), disabled ? "ajui-select-disabled" : undefined, className), style: style, children: [_jsx("select", __assign({}, props, { ref: ref, className: "ajui-select-base ajui-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: "ajui-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" }) })] }));
 };
 export default forwardRef(Select);

package/components/Spinner/Spinner.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import type { Style } from "../../types";
 type Props = {
     /**
      * [Optional] Additional class names to apply to the spinner.
@@ -7,7 +7,7 @@ type Props = {
     /**
      * [Optional] Additional styles to apply to the spinner.
      */
-    style?: React.CSSProperties;
+    style?: Style;
 };
 declare const Spinner: ({ className, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Spinner;

package/index.d.ts

@@ -18,3 +18,4 @@ export { default as Select } from "./components/Select";
 export { default as Spinner } from "./components/Spinner";
 export * from "./hooks";
 export * from "./functions";
+export * from "./types";

package/index.js

@@ -21,3 +21,5 @@ export { default as Spinner } from "./components/Spinner";
 export * from "./hooks";
 // Functions
 export * from "./functions";
+// Types
+export * from "./types";

package/package.json

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

package/style.css

@@ -6,7 +6,7 @@
   --ajui-darkest-gray: #333;
   --ajui-obsidian: #121212;
   --ajui-focus-ring-color: #b2dbfa;
-  --ajui-default-color: #111;
+  --ajui-default-text-color: #111;
   --ajui-default-background: white;
   --ajui-default-border: var(--ajui-moon-gray);
   /* General values */
@@ -17,20 +17,10 @@
   --ajui-sharp-radius: 0;
   --ajui-rounded-radius: 8px;
   --ajui-pill-radius: 9999px;
-  --ajui-circle-radius: 50%;
   /* Buttons */
   --ajui-button-primary-background: black;
   --ajui-button-primary-color: white;
-  --ajui-button-secondary-background: white;
-  --ajui-button-secondary-color: #111;
-  --ajui-button-secondary-border: var(--ajui-moon-gray);
-  --ajui-button-transparent-background: transparent;
   --ajui-button-secondary-border-hover: var(--ajui-darkest-gray);
-  /* Input */
-  --ajui-input-selection-color: var(--ajui-focus-ring-color);
-  --ajui-input-border: var(--ajui-default-border);
-  /* Select */
-  --ajui-select-border: var(--ajui-moon-gray);
   /* Content types */
   --ajui-success-background: #dff2e1;
   --ajui-success-color: #1b5e20;
@@ -49,8 +39,6 @@
   --ajui-info-border: #90caf9;
 
   --ajui-static-background: #e8e8e8;
-  --ajui-static-color: var(--ajui-default-color);
-  --ajui-static-border: var(--ajui-default-border);
   /* Layer */
   --ajui-layer-backdrop-background: rgba(200, 200, 200, 0.7);
   /* Link */
@@ -60,22 +48,13 @@
 [data-theme="dark"] {
   /* General colors */
   --ajui-focus-ring-color: #6699cc;
-  --ajui-default-color: white;
+  --ajui-default-text-color: white;
   --ajui-default-background: var(--ajui-obsidian);
   --ajui-default-border: var(--ajui-dark-gray);
   /* Buttons */
   --ajui-button-primary-background: white;
   --ajui-button-primary-color: var(--ajui-obsidian);
-  --ajui-button-secondary-background: var(--ajui-obsidian);
-  --ajui-button-secondary-color: white;
-  --ajui-button-secondary-border: var(--ajui-dark-gray);
-  --ajui-button-transparent-background: transparent;
   --ajui-button-secondary-border-hover: var(--ajui-moon-gray);
-  /* Input */
-  --ajui-input-selection-color: var(--ajui-focus-ring-color);
-  --ajui-input-border: var(--ajui-dark-gray);
-  /* Select */
-  --ajui-select-border: var(--ajui-dark-gray);
   /* Content types */
   --ajui-success-background: #2a5733;
   --ajui-success-color: #d9efd8;
@@ -94,69 +73,58 @@
   --ajui-info-border: #1d8ea4;
 
   --ajui-static-background: var(--ajui-darkest-gray);
-  --ajui-static-color: var(--ajui-default-color);
-  --ajui-static-border: var(--ajui-default-border);
   /* Layer */
   --ajui-layer-backdrop-background: rgba(55, 55, 55, 0.7);
   /* Link */
   --ajui-link-color: #009ef3;
 }
 
-a:focus:not(:focus-visible) {
-  outline: none;
-}
-
-a,
-button {
-  outline-color: var(--ajui-link-color);
-}
-
 .ajui-input-default:not([disabled]):focus-within,
 .ajui-select-container:not([disabled]):focus-within {
   outline: 3px solid var(--ajui-focus-ring-color);
   outline-offset: 0;
 }
 
-.corners--rounded {
+.ajui-corners--rounded {
   border-radius: var(--ajui-rounded-radius);
 }
 
-.corners--pill {
+.ajui-corners--pill {
   border-radius: var(--ajui-pill-radius);
 }
 
-.corners--sharp {
+.ajui-corners--sharp {
   border-radius: var(--ajui-sharp-radius);
 }
 
-.content--success {
+.ajui-content--success {
   background-color: var(--ajui-success-background);
   color: var(--ajui-success-color);
   border-color: var(--ajui-success-border);
 }
 
-.content--warning {
+.ajui-content--warning {
   background-color: var(--ajui-warning-background);
   color: var(--ajui-warning-color);
   border-color: var(--ajui-warning-border);
 }
 
-.content--error {
+.ajui-content--error {
   background-color: var(--ajui-error-background);
   color: var(--ajui-error-color);
   border-color: var(--ajui-error-border);
 }
 
-.content--info {
+.ajui-content--info {
   background-color: var(--ajui-info-background);
   color: var(--ajui-info-color);
   border-color: var(--ajui-info-border);
 }
 
-.content--static {
+.ajui-content--static {
   background-color: var(--ajui-static-background);
-  color: var(--ajui-static-color);
-  border-color: var(--ajui-static-border);
+  color: var(--ajui-default-text-color);
+  border-color: var(--ajui-default-border);
 }
 
 /* Alert */
@@ -185,11 +153,16 @@ button {
   width: 100%;
 }
 
-/* Link */
-a {
+/* Action (link/button) */
+.ajui-action {
   color: inherit;
   text-decoration: none;
   cursor: pointer;
+  outline-color: var(--ajui-link-color);
+}
+
+.ajui-action:focus:not(:focus-visible) {
+  outline: none;
 }
 
 /* Button */
@@ -198,13 +171,12 @@ a {
   color: inherit;
   border: none;
   padding: 0;
-  cursor: pointer;
   font-size: 16px;
-  font-weight: 500;
 }
 
 .ajui-button-size--regular {
   padding: 8px 16px;
+  font-weight: 600;
 }
 
 .ajui-button-size--small {
@@ -232,17 +204,17 @@ a {
   transition: opacity var(--ajui-default-transition);
 }
 
-.ajui-button--transparent,
 .ajui-button--secondary {
-  box-shadow: inset 0 0 0 1px var(--ajui-button-secondary-border);
+  box-shadow: inset 0 0 0 1px var(--ajui-default-border);
   transition: box-shadow var(--ajui-default-transition);
 }
 
 .ajui-button--secondary {
-  background-color: var(--ajui-button-secondary-background);
+  background-color: var(--ajui-default-background);
 }
 
 .ajui-link-default {
+  font-weight: 600;
   color: var(--ajui-link-color);
   transition: opacity var(--ajui-default-transition);
 }
@@ -254,7 +226,6 @@ a {
     opacity: var(--ajui-default-opacity-dim);
   }
 
-  .ajui-button--transparent:not([disabled]):hover,
   .ajui-button--secondary:not([disabled]):hover {
     box-shadow: inset 0 0 0 1px var(--ajui-button-secondary-border-hover);
   }
@@ -272,7 +243,7 @@ a {
 }
 
 .ajui-input-base::selection {
-  background-color: var(--ajui-input-selection-color);
+  background-color: var(--ajui-focus-ring-color);
 }
 
 .ajui-icon-input {
@@ -291,6 +262,7 @@ a {
   transition: outline var(--ajui-default-transition);
   outline: 0px solid transparent;
   box-shadow: inset 0 0 0 1px var(--ajui-default-border);
+  background-color: var(--ajui-default-background);
 }
 
 .ajui-input-default:disabled {
@@ -305,8 +277,8 @@ a {
   width: fit-content;
   transition: outline var(--ajui-default-transition);
   outline: 0px solid transparent;
-  box-shadow: inset 0 0 0 1px var(--ajui-select-border);
-  background-color: inherit;
+  box-shadow: inset 0 0 0 1px var(--ajui-default-border);
+  background-color: var(--ajui-default-background);
 }
 
 .ajui-select-base {
@@ -374,7 +346,7 @@ a {
 /* Inline Code */
 .ajui-inline-code {
   background-color: var(--ajui-default-border);
-  color: var(--ajui-default-color);
+  color: var(--ajui-default-text-color);
   border-radius: var(--ajui-rounded-radius);
   transition: background-color var(--ajui-default-transition);
   word-wrap: break-word;

package/types/index.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 /**
  * The type of corner to display, controlling the border radius property.
  */
@@ -6,3 +7,11 @@ export type CornerType = "pill" | "rounded" | "sharp";
  * The type of message associated with a piece of content.
  */
 export type ContentType = "success" | "warning" | "error" | "info" | "static";
+/**
+ * Standard style object to apply inline styling to components.
+ */
+export type Style = React.CSSProperties;
+/**
+ * Default props for a div element
+ */
+export type DivProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;