@adamjanicki/ui 1.6.5 → 1.6.6

package/components/Accordion/Accordion.js

@@ -43,7 +43,7 @@ var Drawer = function (_a) {
     }, [open, children]);
     // TODO: change this to use calc-size when supported
     // https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size#browser_compatibility
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { layout: { axis: "y" }, children: [_jsx(UnstyledButton, { onClick: function () { return onOpenChange(!open); }, children: _jsxs(Box, { layout: { axis: "x", align: "center", gap: "s", padding: "m" }, children: [_jsx(Icon, { size: "xs", icon: open ? "chevron-down" : "chevron-right", className: "aui-accordion-arrow" }), _jsx("span", { className: "aui-accordion-label", children: item.label })] }) }), _jsx(Animated, { style: { overflow: "hidden" }, keepMounted: true, duration: duration, visible: open, animateFrom: {
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { layout: { axis: "y" }, children: [_jsx(UnstyledButton, { onClick: function () { return onOpenChange(!open); }, children: _jsxs(Box, { layout: { axis: "x", align: "center", gap: "s", padding: "m" }, children: [_jsx(Icon, { size: "xs", icon: open ? "chevron-down" : "chevron-right", className: "aui-accordion-arrow" }), _jsx(Box, { className: "aui-accordion-label", children: item.label })] }) }), _jsx(Animated, { style: { overflow: "hidden" }, keepMounted: true, duration: duration, visible: open, animateFrom: {
                             style: {
                                 visibility: "hidden",
                                 height: 0,

package/components/Box/Box.d.ts

@@ -1,15 +1,6 @@
 import React from "react";
-import type { Layout, Children } from "../../utils/types";
-type Props = Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & {
-    /**
-     * Children to render inside the box
-     */
-    children?: Children;
-    /**
-     * The organization of the container and its children.
-     */
-    layout?: Layout;
-};
-declare const Box: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export type { Props as BoxProps };
+declare const Box: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    layout?: import("../../utils/types").Layout;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type BoxProps = React.ComponentProps<typeof Box>;
 export default Box;

package/components/Box/Box.js

@@ -1,31 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { classNames } from "../../functions";
-import transformLayout from "../../utils/transformLayout";
-var Box = React.forwardRef(function (_a, ref) {
-    var layout = _a.layout, className = _a.className, rest = __rest(_a, ["layout", "className"]);
-    return (_jsx("div", __assign({}, rest, { className: classNames(transformLayout(layout), className), ref: ref })));
-});
+import ui from "../ui";
+var Box = ui.div;
 export default Box;

package/components/Carousel/Carousel.js

@@ -85,7 +85,7 @@ var Carousel = React.forwardRef(function (_a, ref) {
                     axis: delta >= 0 ? "x" : "-x",
                     width: "full",
                     height: "full",
-                }, style: animatingStyles, onTransitionEnd: onTransitionEnd, children: [_jsx(Box, { className: "aui-carousel-item", children: children[cur] }), _jsx(Box, { className: "aui-carousel-item", "aria-hidden": true, children: children[next] })] }), length > 1 && (_jsxs(_Fragment, { children: [!hideArrows && (_jsxs(_Fragment, { children: [_jsx(Button, { className: classNames("aui-flex-x aui-align-center aui-justify-center aui-carousel-arrow", leftArrowProps === null || leftArrowProps === void 0 ? void 0 : leftArrowProps.className), style: __assign({ left: 8 }, leftArrowProps === null || leftArrowProps === void 0 ? void 0 : leftArrowProps.style), corners: "pill", "aria-label": "previous", onClick: function () { return startTransition(-1); }, children: (_b = leftArrowProps === null || leftArrowProps === void 0 ? void 0 : leftArrowProps.children) !== null && _b !== void 0 ? _b : (_jsx(Icon, { icon: "chevron-left", size: "xs", style: { marginRight: 2 } })) }), _jsx(Button, { className: classNames("aui-flex-x aui-align-center aui-justify-center aui-carousel-arrow", rightArrowProps === null || rightArrowProps === void 0 ? void 0 : rightArrowProps.className), style: __assign({ right: 8 }, rightArrowProps === null || rightArrowProps === void 0 ? void 0 : rightArrowProps.style), corners: "pill", "aria-label": "next", onClick: function () { return startTransition(1); }, children: (_c = rightArrowProps === null || rightArrowProps === void 0 ? void 0 : rightArrowProps.children) !== null && _c !== void 0 ? _c : (_jsx(Icon, { icon: "chevron-right", size: "xs", style: { marginLeft: 2 } })) })] })), !hideDots && (_jsx(Box, { layout: { axis: "x", align: "center", gap: "xxs" }, className: "aui-carousel-dots", children: children.map(function (_, i) { return (_jsx(Button, { className: classNames("aui-carousel-dot", dotProps === null || dotProps === void 0 ? void 0 : dotProps.className), corners: "pill", disabled: cur === i || animating, onClick: function () { return startTransition(i - cur); }, style: dotProps === null || dotProps === void 0 ? void 0 : dotProps.style }, i)); }) }))] }))] })));
+                }, style: animatingStyles, onTransitionEnd: onTransitionEnd, children: [_jsx(Box, { className: "aui-carousel-item", children: children[cur] }), _jsx(Box, { className: "aui-carousel-item", "aria-hidden": true, children: children[next] })] }), length > 1 && (_jsxs(_Fragment, { children: [!hideArrows && (_jsxs(_Fragment, { children: [_jsx(Button, { layout: { axis: "x", align: "center", justify: "center" }, className: classNames("aui-carousel-arrow", leftArrowProps === null || leftArrowProps === void 0 ? void 0 : leftArrowProps.className), style: __assign({ left: 8 }, leftArrowProps === null || leftArrowProps === void 0 ? void 0 : leftArrowProps.style), corners: "pill", "aria-label": "previous", onClick: function () { return startTransition(-1); }, children: (_b = leftArrowProps === null || leftArrowProps === void 0 ? void 0 : leftArrowProps.children) !== null && _b !== void 0 ? _b : (_jsx(Icon, { icon: "chevron-left", size: "xs", style: { marginRight: 2 } })) }), _jsx(Button, { layout: { axis: "x", align: "center", justify: "center" }, className: classNames("aui-carousel-arrow", rightArrowProps === null || rightArrowProps === void 0 ? void 0 : rightArrowProps.className), style: __assign({ right: 8 }, rightArrowProps === null || rightArrowProps === void 0 ? void 0 : rightArrowProps.style), corners: "pill", "aria-label": "next", onClick: function () { return startTransition(1); }, children: (_c = rightArrowProps === null || rightArrowProps === void 0 ? void 0 : rightArrowProps.children) !== null && _c !== void 0 ? _c : (_jsx(Icon, { icon: "chevron-right", size: "xs", style: { marginLeft: 2 } })) })] })), !hideDots && (_jsx(Box, { layout: { axis: "x", align: "center", gap: "xxs" }, className: "aui-carousel-dots", children: children.map(function (_, i) { return (_jsx(Button, { className: classNames("aui-carousel-dot", dotProps === null || dotProps === void 0 ? void 0 : dotProps.className), corners: "pill", disabled: cur === i || animating, onClick: function () { return startTransition(i - cur); }, style: dotProps === null || dotProps === void 0 ? void 0 : dotProps.style }, i)); }) }))] }))] })));
 });
 function safeMod(n, m) {
     return ((n % m) + m) % m;

package/components/ui.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { Layout } from "../utils/types";
+type HtmlTag = keyof React.JSX.IntrinsicElements;
+type Props<T extends HtmlTag> = React.ComponentPropsWithRef<T> & {
+    /**
+     * The organization of this element and its children.
+     * Properties are translated to class names before being applied.
+     */
+    layout?: Layout;
+};
+declare function createLayoutElement<T extends HtmlTag>(tag: T): React.ForwardRefExoticComponent<React.PropsWithoutRef<Props<T>> & React.RefAttributes<React.ComponentRef<T>>>;
+type HtmlTags = {
+    [K in HtmlTag]: ReturnType<typeof createLayoutElement<K>>;
+};
+declare const ui: HtmlTags;
+export default ui;

package/components/ui.js

@@ -0,0 +1,44 @@
+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 React from "react";
+import { classNames } from "../functions";
+import transformLayout from "../utils/transformLayout";
+function createLayoutElement(tag) {
+    var Component = React.forwardRef(function (_a, ref) {
+        var layout = _a.layout, className = _a.className, props = __rest(_a, ["layout", "className"]);
+        return React.createElement(tag, __assign(__assign({}, props), { ref: ref, className: classNames(transformLayout(layout), className) }));
+    });
+    return Component;
+}
+var ui = new Proxy({}, {
+    get: function (cache, tag) {
+        var cachedComponent = cache[tag];
+        if (cachedComponent) {
+            return cachedComponent;
+        }
+        var component = createLayoutElement(tag);
+        cache[tag] = component;
+        return component;
+    },
+});
+export default ui;

package/index.d.ts

@@ -20,5 +20,6 @@ export * from "./components/Link";
 export { default as Modal } from "./components/Modal";
 export { default as Select } from "./components/Select";
 export { default as Spinner } from "./components/Spinner";
+export { default as ui } from "./components/ui";
 export * from "./hooks";
 export * from "./functions";

package/index.js

@@ -21,6 +21,7 @@ export * from "./components/Link";
 export { default as Modal } from "./components/Modal";
 export { default as Select } from "./components/Select";
 export { default as Spinner } from "./components/Spinner";
+export { default as ui } from "./components/ui";
 // Hooks
 export * from "./hooks";
 // Functions

package/package.json

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