@adamjanicki/ui 1.5.4 → 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,52 +1,44 @@
 import React from "react";
-type Props = {
+import type { DivProps, Style } from "../../types";
+type Props = DivProps & {
     /**
-     * Whether the component is visible or not
+     * Whether to begin the animation.
+     * Set to true to start animation, false to start the exit animation.
      */
-    visible: boolean;
+    animated: boolean;
     /**
-     * Duration of the animation in milliseconds
+     * Duration of the animation in seconds
+     * @default 0.25
      */
     duration?: number;
     /**
-     * Whether to keep the component mounted when it is not visible
+     * Whether to keep the component mounted when it is not animated
+     * @default false
      */
-    keepMountedOnExit?: boolean;
+    keepMounted?: boolean;
     /**
      * Animation configuration for the enter state
      */
-    enter?: {
+    animateTo?: {
         /**
-         * Class name to apply to the component during the enter animation
+         * Class name to apply to the component while animated (after state)
          */
         className?: string;
         /**
-         * Inline styles to apply to the component during the enter animation
+         * Inline styles to apply to the component while animated
          */
-        style?: React.CSSProperties;
+        style?: Style;
     };
-    exit?: {
+    animateFrom?: {
         /**
-         * Class name to apply to the component during the exit animation
+         * Class name to apply to the component when not animated (before state)
          */
         className?: string;
         /**
-         * Inline styles to apply to the component during the exit animation
+         * 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: ({ visible, duration, keepMountedOnExit, enter, exit, children, className, style, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Animated: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Animated;

package/components/Animated/Animated.js

@@ -9,31 +9,66 @@ 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 { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import classNames from "../../functions/classNames";
-var Animated = function (_a) {
-    var visible = _a.visible, _b = _a.duration, duration = _b === void 0 ? 250 : _b, _c = _a.keepMountedOnExit, keepMountedOnExit = _c === void 0 ? false : _c, enter = _a.enter, exit = _a.exit, children = _a.children, className = _a.className, style = _a.style;
-    var _d = useState(visible), shouldRender = _d[0], setShouldRender = _d[1];
-    var _e = useState(visible ? "entering" : "exiting"), animationState = _e[0], setAnimationState = _e[1];
+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, 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(false), isAnimatingForward = _d[0], setIsAnimatingForward = _d[1];
+    var timeoutRef = useRef(null);
+    var animationFrameRef = useRef(null);
+    var clearRefs = function () {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = null;
+        }
+    };
+    useEffect(function () {
+        // initiate forward animation
+        if (animated && shouldRender) {
+            clearRefs();
+            animationFrameRef.current = requestAnimationFrame(function () {
+                return setIsAnimatingForward(true);
+            });
+        }
+        return clearRefs;
+    }, [animated, shouldRender]);
     useEffect(function () {
-        var timeoutId;
-        if (visible && !shouldRender) {
-            // Start enter animation
+        // make container element appear on DOM
+        if (animated) {
             setShouldRender(true);
-            setAnimationState("entering");
         }
-        else if (!visible && shouldRender) {
-            // Start exit animation
-            setAnimationState("exiting");
-            timeoutId = setTimeout(function () {
-                if (!keepMountedOnExit) {
+        // initiate reverse animation
+        else {
+            clearRefs();
+            setIsAnimatingForward(false);
+            timeoutRef.current = window.setTimeout(function () {
+                if (!keepMounted) {
                     setShouldRender(false);
                 }
-            }, duration);
+            }, duration * 1000);
         }
-        return function () { return clearTimeout(timeoutId); };
-    }, [visible, shouldRender, duration, keepMountedOnExit]);
-    return (_jsx("div", { className: classNames(className, animationState === "entering" ? enter === null || enter === void 0 ? void 0 : enter.className : exit === null || exit === void 0 ? void 0 : exit.className), style: __assign(__assign(__assign({}, style), (animationState === "entering" ? enter === null || enter === void 0 ? void 0 : enter.style : exit === null || exit === void 0 ? void 0 : exit.style)), { transition: "all ".concat(duration, "ms ease-in-out") }), "aria-hidden": !visible, children: shouldRender && children }));
-};
+        return clearRefs;
+    }, [animated, duration, keepMounted]);
+    if (!shouldRender)
+        return null;
+    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
@@ -14,11 +14,7 @@ type DefaultButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTM
      */
     LinkElement?: CustomLinkElement;
 };
-type IconButtonProps = Omit<DefaultButtonProps, "children" | "aria-label"> & {
-    /**
-     * Name of the button for accessibility purposes
-     */
-    "aria-label": string;
+type IconButtonProps = Omit<DefaultButtonProps, "children"> & {
     /**
      * Icon to display inside the button
      * I would usually use FontAwesome, but for added flexibility, it's any node
@@ -30,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

@@ -0,0 +1,56 @@
+import React from "react";
+import type { DivProps, Style } from "../../types";
+type ButtonProps = {
+    /**
+     * Children to render inside the button
+     */
+    children?: React.ReactNode | React.ReactNode[];
+    /**
+     * Additional class name to apply to the button
+     */
+    className?: string;
+    /**
+     * Additional styles to apply to the button
+     */
+    style?: Style;
+};
+type Props = DivProps & {
+    /**
+     * The child elements/slides of the carousel
+     */
+    children: React.ReactNode[];
+    /**
+     * How long the transition lasts (in seconds)
+     * @default 1
+     */
+    duration?: number;
+    /**
+     * The interval at which autoplay runs (in seconds)
+     * @default false
+     */
+    autoplayInterval?: number;
+    /**
+     * Whether to hide the arrow controls
+     * @default false
+     */
+    hideArrows?: boolean;
+    /**
+     * Whether to hide the dot controls
+     * @default false
+     */
+    hideDots?: boolean;
+    /**
+     * [Optional] props to supply to the dot buttons
+     */
+    dotProps?: Omit<ButtonProps, "children">;
+    /**
+     * [Optional] props to supply to the left arrow button
+     */
+    leftArrowProps?: ButtonProps;
+    /**
+     * [Optional] props to supply to the right arrow button
+     */
+    rightArrowProps?: ButtonProps;
+};
+declare const Carousel: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Carousel;

package/components/Carousel/Carousel.js

@@ -0,0 +1,87 @@
+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, useEffect, useRef, useCallback } from "react";
+import { classNames } from "../../functions";
+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, 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
+        ? Math.max(duration, props.autoplayInterval)
+        : undefined;
+    var length = children.length;
+    var _d = useState({
+        cur: 0,
+        delta: 0,
+        animating: false,
+    }), state = _d[0], setState = _d[1];
+    var intervalRef = useRef(null);
+    var cur = state.cur, delta = state.delta, animating = state.animating;
+    var next = safeMod(cur + delta, length);
+    var startTransition = useCallback(function (delta) {
+        if (animating || delta === 0)
+            return;
+        setState(function (old) { return (__assign(__assign({}, old), { delta: delta, animating: true })); });
+    }, [animating]);
+    var onTransitionEnd = function () {
+        setState(function (_a) {
+            var delta = _a.delta, cur = _a.cur;
+            return ({
+                delta: delta,
+                animating: false,
+                cur: safeMod(cur + delta, length),
+            });
+        });
+    };
+    useEffect(function () {
+        if (autoplayInterval) {
+            intervalRef.current = window.setInterval(function () {
+                startTransition(1);
+            }, autoplayInterval * 1000);
+        }
+        return function () {
+            var interval = intervalRef.current;
+            intervalRef.current = null;
+            if (interval) {
+                clearInterval(interval);
+            }
+        };
+    }, [autoplayInterval, startTransition]);
+    if (length <= 0)
+        return null;
+    var animatingStyles = animating
+        ? {
+            transform: "translateX(".concat(-(delta / Math.abs(delta)) * 100, "%)"),
+            transition: "transform ".concat(duration, "s ease-in-out"),
+        }
+        : undefined;
+    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;
+}
+export default Carousel;

package/components/Carousel/index.d.ts

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

package/components/Carousel/index.js

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

package/components/ClickOutside/ClickOutside.d.ts

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

package/components/ClickOutside/ClickOutside.js

@@ -1,24 +1,26 @@
 import { cloneElement, useCallback, useEffect, useRef } from "react";
 var ClickOutside = function (_a) {
     var children = _a.children, onClickOutside = _a.onClickOutside;
-    var ref = useRef();
-    var bubbledRef = useRef(false);
+    var ref = useRef(null);
+    var clickWithinChildRef = useRef(false);
     var startedRef = useRef(false);
     useEffect(function () {
-        setTimeout(function () {
+        var timeout = window.setTimeout(function () {
             startedRef.current = true;
         }, 0);
         return function () {
+            clearTimeout(timeout);
             startedRef.current = false;
         };
     }, []);
     var handleClickOutside = useCallback(function (event) {
-        var bubbledUp = bubbledRef.current;
-        bubbledRef.current = false;
-        if (!startedRef.current || !ref.current || bubbledUp)
+        var clickedWithinChild = clickWithinChildRef.current;
+        clickWithinChildRef.current = false;
+        if (!startedRef.current || !ref.current || clickedWithinChild)
             return;
-        var isOnEventPath = event.composedPath().includes(ref.current);
-        !isOnEventPath && onClickOutside(event);
+        if (!event.composedPath().includes(ref.current)) {
+            onClickOutside(event);
+        }
     }, [onClickOutside]);
     useEffect(function () {
         document.addEventListener("click", handleClickOutside);
@@ -28,11 +30,10 @@ var ClickOutside = function (_a) {
         ref: ref,
         onClick: function (event) {
             var _a, _b;
-            // point of this is to let us know that click bubbled up
-            // from the child element, so we can ignore it if it
-            // happens on the element itself
-            bubbledRef.current = true;
-            (_b = (_a = children.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+            // 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
+            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/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.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+type Props = Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "children"> & {
+    /**
+     * Code string to render
+     */
+    children: string;
+    /**
+     * Whether to disable click to copy
+     */
+    disableCopy?: boolean;
+};
+declare const InlineCode: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLElement>>;
+export default InlineCode;

package/components/InlineCode/InlineCode.js

@@ -0,0 +1,50 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useState, 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, rest = __rest(_a, ["className", "disableCopy", "onClick", "children"]);
+    var _b = useState(false), copied = _b[0], setCopied = _b[1];
+    var timeoutRef = useRef(null);
+    var handleCopy = function () {
+        var timeout = timeoutRef.current;
+        if (timeout) {
+            clearTimeout(timeout);
+            timeoutRef.current = null;
+        }
+        navigator.clipboard.writeText(children);
+        setCopied(true);
+        timeoutRef.current = window.setTimeout(function () {
+            setCopied(false);
+            timeoutRef.current = null;
+        }, 3000);
+    };
+    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);
+        }, children: children })));
+});
+export default InlineCode;