@adamjanicki/ui 1.5.4 → 1.5.5

package/components/Animated/Animated.d.ts

@@ -1,37 +1,40 @@
 import React from "react";
 type Props = {
     /**
-     * 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;
     };
-    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;
     };
@@ -48,5 +51,5 @@ type Props = {
      */
     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<Props & React.RefAttributes<HTMLDivElement>>;
 export default Animated;

package/components/Animated/Animated.js

@@ -10,30 +10,49 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 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;
+    var _c = useState(animated || keepMounted), shouldRender = _c[0], setShouldRender = _c[1];
+    var _d = useState(animated ? "forward" : "reverse"), animationState = _d[0], setAnimationState = _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 () {
-        var timeoutId;
-        if (visible && !shouldRender) {
-            // Start enter animation
+        clearRefs();
+        if (animated) {
             setShouldRender(true);
-            setAnimationState("entering");
+            // Use requestAnimationFrame so browser paints shouldRender first
+            animationFrameRef.current = requestAnimationFrame(function () {
+                setAnimationState("forward");
+                animationFrameRef.current = null;
+            });
         }
-        else if (!visible && shouldRender) {
-            // Start exit animation
-            setAnimationState("exiting");
-            timeoutId = setTimeout(function () {
-                if (!keepMountedOnExit) {
+        else {
+            setAnimationState("reverse");
+            timeoutRef.current = window.setTimeout(function () {
+                if (!keepMounted) {
                     setShouldRender(false);
                 }
-            }, duration);
+                timeoutRef.current = null;
+                // convert to ms
+            }, 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, shouldRender]);
+    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 }));
+});
 export default Animated;

package/components/Button/Button.d.ts

@@ -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

package/components/Carousel/Carousel.d.ts

@@ -0,0 +1,63 @@
+import React from "react";
+type ButtonProps = {
+    /**
+     * Children to render inside the button
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional class name to apply to the button
+     */
+    className?: string;
+    /**
+     * Additional styles to apply to the button
+     */
+    style?: React.CSSProperties;
+};
+type Props = {
+    /**
+     * 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;
+    /**
+     * [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>>;
+export default Carousel;

package/components/Carousel/Carousel.js

@@ -0,0 +1,76 @@
+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);
+};
+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, style = props.style, hideArrows = props.hideArrows, hideDots = props.hideDots, dotProps = props.dotProps, leftArrowProps = props.leftArrowProps, rightArrowProps = props.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", { 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)); }) }))] }))] }));
+});
+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/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, props = __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({ 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 })));
+});
+export default InlineCode;

package/components/InlineCode/index.d.ts

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

package/components/InlineCode/index.js

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

package/components/Layer/Layer.d.ts

@@ -33,5 +33,5 @@ type Props = {
      */
     disableScrollLock?: boolean;
 };
-declare const Layer: ({ returnFocusOnEscape, disableScrollLock, ...props }: Props) => JSX.Element;
+declare const Layer: ({ returnFocusOnEscape, disableScrollLock, ...props }: Props) => React.JSX.Element;
 export default Layer;

package/components/Layer/Layer.js

@@ -45,7 +45,7 @@ var BaseLayer = function (_a) {
             onMouseDown: function (e) {
                 var _a, _b;
                 e.stopPropagation();
-                (_b = (_a = children.props).onMouseDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.onMouseDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
             },
         }) }));
 };

package/components/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { CornerType } from "../../types";
-type Props = Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "aria-label"> & {
+type Props = React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> & {
     /**
      * Array of options to display in the select
      */
@@ -24,10 +24,6 @@ type Props = Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectE
      * @default "rounded"
      */
     corners?: CornerType;
-    /**
-     * Name of the select for accessibility purposes
-     */
-    "aria-label": string;
 };
 declare const _default: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLSelectElement>>;
 export default _default;

package/functions/scrollToId.js

@@ -12,6 +12,6 @@ export default function scrollToId(id, behavior) {
         }
     }
     catch (_a) {
-        // do nothing
+        return;
     }
 }

package/hooks/useFocusTrap.d.ts

@@ -5,5 +5,5 @@
  * `true` by default
  * @returns ref object that must be passed to the element that should be trapped
  */
-declare const useFocusTrap: <T extends HTMLElement>(isActive?: boolean) => import("react").MutableRefObject<T | null>;
+declare const useFocusTrap: <T extends HTMLElement>(isActive?: boolean) => import("react").RefObject<T | null>;
 export default useFocusTrap;

package/index.d.ts

@@ -1,17 +1,20 @@
-export * from "./components/Button";
-export { default as Button } from "./components/Button";
-export * from "./components/Link";
-export { default as Link } from "./components/Link";
-export * from "./components/Input";
-export { default as Input } from "./components/Input";
 export { default as Alert } from "./components/Alert";
 export { default as Animated } from "./components/Animated";
 export { default as Badge } from "./components/Badge";
 export { default as Banner } from "./components/Banner";
-export * from "./components/Hamburger";
-export { default as Hamburger } from "./components/Hamburger";
-export { default as Select } from "./components/Select";
+export { default as Button } from "./components/Button";
+export * from "./components/Button";
+export { default as Carousel } from "./components/Carousel";
 export { default as ClickOutside } from "./components/ClickOutside";
+export { default as Hamburger } from "./components/Hamburger";
+export * from "./components/Hamburger";
+export { default as InlineCode } from "./components/InlineCode";
+export { default as Input } from "./components/Input";
+export * from "./components/Input";
 export { default as Layer } from "./components/Layer";
+export { default as Link } from "./components/Link";
+export * from "./components/Link";
+export { default as Select } from "./components/Select";
 export { default as Spinner } from "./components/Spinner";
 export * from "./hooks";
+export * from "./functions";

package/index.js

@@ -1,19 +1,23 @@
 // Components
-export * from "./components/Button";
-export { default as Button } from "./components/Button";
-export * from "./components/Link";
-export { default as Link } from "./components/Link";
-export * from "./components/Input";
-export { default as Input } from "./components/Input";
 export { default as Alert } from "./components/Alert";
 export { default as Animated } from "./components/Animated";
 export { default as Badge } from "./components/Badge";
 export { default as Banner } from "./components/Banner";
-export * from "./components/Hamburger";
-export { default as Hamburger } from "./components/Hamburger";
-export { default as Select } from "./components/Select";
+export { default as Button } from "./components/Button";
+export * from "./components/Button";
+export { default as Carousel } from "./components/Carousel";
 export { default as ClickOutside } from "./components/ClickOutside";
+export { default as Hamburger } from "./components/Hamburger";
+export * from "./components/Hamburger";
+export { default as InlineCode } from "./components/InlineCode";
+export { default as Input } from "./components/Input";
+export * from "./components/Input";
 export { default as Layer } from "./components/Layer";
+export { default as Link } from "./components/Link";
+export * from "./components/Link";
+export { default as Select } from "./components/Select";
 export { default as Spinner } from "./components/Spinner";
 // Hooks
 export * from "./hooks";
+// Functions
+export * from "./functions";

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@adamjanicki/ui",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "description": "Basic UI components and hooks for React in TypeScript",
+  "type": "module",
   "main": "./index.js",
   "types": "./index.d.ts",
   "author": "Adam Janicki",
@@ -11,39 +12,18 @@
     "url": "git+https://github.com/adamjanicki2/ui.git"
   },
   "scripts": {
-    "build": "tsc; cp src/style.css ./style.css",
     "clean": "./clean.sh",
-    "dev": "nodemon --watch src --ext ts,tsx,css --exec \"npm run build\"",
-    "test": "jest --config jest.config.js",
-    "lint": "eslint --ext .ts,.tsx src",
-    "prepare": "npm run lint; npm test; npm run build"
+    "lint": "eslint src --max-warnings=0",
+    "build": "npm run clean && npm run lint && tsc; cp src/style.css ./style.css",
+    "prepare": "npm run build"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^14.1.0",
-    "@types/jest": "^29.5.8",
-    "@typescript-eslint/eslint-plugin": "^6.11.0",
-    "@typescript-eslint/parser": "^6.11.0",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^29.7.0",
-    "jest-canvas-mock": "^2.5.2",
-    "jest-css-modules": "^2.1.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "nodemon": "^3.1.4",
-    "ts-jest": "^29.2.2",
-    "typescript": "^5.2.2"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "typescript": "^5.9.2"
   }
 }

package/style.css

@@ -1,7 +1,6 @@
 /* General styles */
 :root {
   /* General colors */
-  --ajui-light-gray: #eee;
   --ajui-moon-gray: #ccc;
   --ajui-dark-gray: #555;
   --ajui-darkest-gray: #333;
@@ -16,7 +15,7 @@
   --ajui-default-opacity-dim: 0.75;
   /* Corners */
   --ajui-sharp-radius: 0;
-  --ajui-rounded-radius: 0.5rem;
+  --ajui-rounded-radius: 8px;
   --ajui-pill-radius: 9999px;
   --ajui-circle-radius: 50%;
   /* Buttons */
@@ -162,7 +161,7 @@ button {
 
 /* Alert */
 .ajui-alert {
-  padding: 1rem;
+  padding: 16px;
   border-style: solid;
   border-width: 1px;
   font-weight: 400;
@@ -180,10 +179,10 @@ button {
 
 /* Banner */
 .ajui-banner {
-  padding: 1.5rem 2rem;
+  padding: 24px 32px;
   border: none;
   font-weight: 400;
-  width: 100vw;
+  width: 100%;
 }
 
 /* Link */
@@ -200,12 +199,12 @@ a {
   border: none;
   padding: 0;
   cursor: pointer;
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 500;
 }
 
 .ajui-button-size--regular {
-  padding: 0.5rem 1rem;
+  padding: 8px 16px;
 }
 
 .ajui-button-size--small {
@@ -219,11 +218,11 @@ a {
   justify-content: center;
   align-items: center;
   transition: opacity var(--ajui-default-transition);
-  padding: 0.25rem;
+  padding: 4px;
 }
 
 .ajui-button-base:disabled {
-  cursor: not-allowed !important;
+  cursor: default !important;
   opacity: var(--ajui-disabled-opacity);
 }
 
@@ -267,8 +266,8 @@ a {
   border: none;
   background-color: inherit;
   color: inherit;
-  padding: 0.75rem 0.5rem;
-  font-size: 1rem;
+  padding: 12px 8px;
+  font-size: 16px;
   font-weight: 400;
 }
 
@@ -296,7 +295,7 @@ a {
 
 .ajui-input-default:disabled {
   opacity: var(--ajui-disabled-opacity);
-  cursor: not-allowed;
+  cursor: default;
 }
 
 /* Select */
@@ -310,11 +309,6 @@ a {
   background-color: inherit;
 }
 
-.ajui-select-disabled {
-  opacity: var(--ajui-disabled-opacity);
-  cursor: not-allowed !important;
-}
-
 .ajui-select-base {
   width: 100%;
   color: inherit;
@@ -323,22 +317,27 @@ a {
   box-shadow: none;
   cursor: pointer;
   background-color: transparent;
-  padding: 0.75rem 1.75rem 0.75rem 0.5rem;
-  font-size: 1rem;
+  padding: 12px 28px 12px 8px;
+  font-size: 16px;
   font-weight: 400;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
 }
 
+.ajui-select-disabled * {
+  opacity: var(--ajui-disabled-opacity);
+  cursor: default;
+}
+
 .ajui-select-triangle {
-  --size: 0.75rem;
+  --size: 12px;
   width: var(--size);
   height: var(--size);
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  right: calc(var(--size) - 0.25rem);
+  right: calc(var(--size) - 4px);
   pointer-events: none;
 }
 
@@ -360,7 +359,7 @@ a {
 .ajui-spinner {
   animation: ajui-spinner-animation 1s linear infinite;
   transform-origin: center;
-  height: 1.5rem;
+  height: 24px;
 }
 
 @keyframes ajui-spinner-animation {
@@ -371,3 +370,79 @@ a {
     transform: rotate(360deg);
   }
 }
+
+/* Inline Code */
+.ajui-inline-code {
+  background-color: var(--ajui-default-border);
+  color: var(--ajui-default-color);
+  border-radius: var(--ajui-rounded-radius);
+  transition: background-color var(--ajui-default-transition);
+  word-wrap: break-word;
+}
+
+.ajui-copy-cursor {
+  cursor: copy;
+}
+
+.ajui-inline-code-copied {
+  background-color: var(--ajui-success-background);
+}
+
+/* Carousel */
+.ajui-carousel {
+  max-width: 100%;
+  position: relative;
+  overflow: hidden;
+  min-height: 64px;
+  min-width: 64px;
+  width: fit-content;
+}
+
+.ajui-carousel-slider {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.ajui-carousel-item {
+  flex: 0 0 100%;
+  width: 100%;
+  height: 100%;
+}
+
+.ajui-carousel-arrow-prev,
+.ajui-carousel-arrow-next {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  font-weight: 800;
+}
+
+.ajui-carousel-arrow-prev {
+  left: 8px;
+}
+.ajui-carousel-arrow-next {
+  right: 8px;
+}
+
+.ajui-carousel-dots {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  bottom: 8px;
+  transform: translateX(-50%);
+  left: 50%;
+}
+
+.ajui-carousel-dot {
+  width: 16px;
+  height: 8px;
+  padding: 0;
+  margin: 0 2px;
+}