@adamjanicki/ui 1.7.1 → 1.7.2

package/components/Select/Select.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { type BoxProps } from "../Box/Box";
 import ui from "../ui";
 type SelectProps = React.ComponentProps<typeof ui.select>;
-type Props = Omit<BoxProps, "children"> & {
+type Props = Omit<BoxProps, "children" | "onChange"> & {
     /**
      * Array of options to display in the select
      */
@@ -14,10 +14,18 @@ type Props = Omit<BoxProps, "children"> & {
      * @returns the label of the option
      */
     getOptionLabel?: (option: string) => string;
+    /**
+     * Current value of the select
+     */
+    value?: SelectProps["value"];
+    /**
+     * Change handler for the select
+     */
+    onChange?: SelectProps["onChange"];
     /**
      * Props to pass to the underlying select element
      */
-    selectProps?: SelectProps;
+    selectProps?: Omit<SelectProps, "value" | "onChange">;
 };
 declare const Select: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLSelectElement>>;
 export default Select;

package/components/Select/Select.js

@@ -27,8 +27,8 @@ import Box from "../Box/Box";
 import Icon from "../Icon";
 import ui from "../ui";
 var Select = React.forwardRef(function (_a, ref) {
-    var className = _a.className, options = _a.options, vfx = _a.vfx, getOptionLabel = _a.getOptionLabel, selectProps = _a.selectProps, rest = __rest(_a, ["className", "options", "vfx", "getOptionLabel", "selectProps"]);
+    var className = _a.className, options = _a.options, vfx = _a.vfx, getOptionLabel = _a.getOptionLabel, selectProps = _a.selectProps, value = _a.value, onChange = _a.onChange, rest = __rest(_a, ["className", "options", "vfx", "getOptionLabel", "selectProps", "value", "onChange"]);
     var selectClassName = (selectProps || {}).className;
-    return (_jsxs(Box, __assign({ vfx: __assign({ pos: "relative", width: "fit", axis: "x", align: "center", radius: "rounded", backgroundColor: "default", color: "default", padding: "none" }, vfx), className: classNames("aui-select-container", (selectProps === null || selectProps === void 0 ? void 0 : selectProps.disabled) ? "aui-select-disabled" : undefined, className) }, rest, { children: [_jsx(ui.select, __assign({}, selectProps, { className: classNames("aui-select", selectClassName), ref: ref, children: options.map(function (option, index) { return (_jsx("option", { value: option, children: (getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(option)) || option }, index)); }) })), _jsx(Icon, { icon: "chevron-down", className: "aui-select-icon", "aria-hidden": true })] })));
+    return (_jsxs(Box, __assign({ vfx: __assign({ pos: "relative", width: "fit", axis: "x", align: "center", radius: "rounded", backgroundColor: "default", color: "default", padding: "none" }, vfx), className: classNames("aui-select-container", (selectProps === null || selectProps === void 0 ? void 0 : selectProps.disabled) ? "aui-select-disabled" : undefined, className) }, rest, { children: [_jsx(ui.select, __assign({}, selectProps, { value: value, onChange: onChange, className: classNames("aui-select", selectClassName), ref: ref, children: options.map(function (option, index) { return (_jsx("option", { value: option, children: (getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(option)) || option }, index)); }) })), _jsx(Icon, { icon: "chevron-down", className: "aui-select-icon", "aria-hidden": true })] })));
 });
 export default Select;

package/package.json

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

package/utils/transformVfx.js

@@ -1,194 +1,186 @@
 var transformers = {
     // --- Layout ---
-    pos: function (_a) {
+    pos: function (classes, _a) {
         var pos = _a.pos;
-        return "aui-pos-".concat(pos);
+        return classes.push("aui-pos-".concat(pos));
     },
-    axis: function (_a) {
+    axis: function (classes, _a) {
         var axis = _a.axis;
-        return "aui-flex-".concat(axis);
+        return classes.push("aui-flex-".concat(axis));
     },
-    gap: function (_a) {
+    gap: function (classes, _a) {
         var gap = _a.gap;
-        return "aui-gap-".concat(gap);
+        return classes.push("aui-gap-".concat(gap));
     },
-    align: function (_a) {
+    align: function (classes, _a) {
         var align = _a.align;
-        return "aui-align-".concat(align);
+        return classes.push("aui-align-".concat(align));
     },
-    justify: function (_a) {
+    justify: function (classes, _a) {
         var justify = _a.justify;
-        return "aui-justify-".concat(justify);
+        return classes.push("aui-justify-".concat(justify));
     },
-    wrap: function () { return "aui-flex-wrap"; },
-    overflow: function (_a) {
+    wrap: function (classes) { return classes.push("aui-flex-wrap"); },
+    overflow: function (classes, _a) {
         var overflow = _a.overflow;
-        return "aui-ov-".concat(overflow);
+        return classes.push("aui-ov-".concat(overflow));
     },
-    overflowX: function (_a) {
+    overflowX: function (classes, _a) {
         var overflowX = _a.overflowX;
-        return "aui-ov-x-".concat(overflowX);
+        return classes.push("aui-ov-x-".concat(overflowX));
     },
-    overflowY: function (_a) {
+    overflowY: function (classes, _a) {
         var overflowY = _a.overflowY;
-        return "aui-ov-y-".concat(overflowY);
+        return classes.push("aui-ov-y-".concat(overflowY));
     },
-    z: function (_a) {
+    z: function (classes, _a) {
         var z = _a.z;
-        return "aui-z-".concat(z);
+        return classes.push("aui-z-".concat(z));
     },
     // --- Spacing ---
-    padding: function (_a) {
+    padding: function (classes, _a) {
         var padding = _a.padding;
-        return "aui-pa-".concat(padding);
+        return classes.push("aui-pa-".concat(padding));
     },
-    paddingX: function (_a) {
+    paddingX: function (classes, _a) {
         var paddingX = _a.paddingX, paddingLeft = _a.paddingLeft, paddingRight = _a.paddingRight;
-        var result = [];
         if (!paddingLeft)
-            result.push("aui-pl-".concat(paddingX));
+            classes.push("aui-pl-".concat(paddingX));
         if (!paddingRight)
-            result.push("aui-pr-".concat(paddingX));
-        return result.join(" ");
+            classes.push("aui-pr-".concat(paddingX));
     },
-    paddingY: function (_a) {
+    paddingY: function (classes, _a) {
         var paddingY = _a.paddingY, paddingTop = _a.paddingTop, paddingBottom = _a.paddingBottom;
-        var result = [];
         if (!paddingTop)
-            result.push("aui-pt-".concat(paddingY));
+            classes.push("aui-pt-".concat(paddingY));
         if (!paddingBottom)
-            result.push("aui-pb-".concat(paddingY));
-        return result.join(" ");
+            classes.push("aui-pb-".concat(paddingY));
     },
-    paddingTop: function (_a) {
+    paddingTop: function (classes, _a) {
         var paddingTop = _a.paddingTop;
-        return "aui-pt-".concat(paddingTop);
+        return classes.push("aui-pt-".concat(paddingTop));
     },
-    paddingBottom: function (_a) {
+    paddingBottom: function (classes, _a) {
         var paddingBottom = _a.paddingBottom;
-        return "aui-pb-".concat(paddingBottom);
+        return classes.push("aui-pb-".concat(paddingBottom));
     },
-    paddingLeft: function (_a) {
+    paddingLeft: function (classes, _a) {
         var paddingLeft = _a.paddingLeft;
-        return "aui-pl-".concat(paddingLeft);
+        return classes.push("aui-pl-".concat(paddingLeft));
     },
-    paddingRight: function (_a) {
+    paddingRight: function (classes, _a) {
         var paddingRight = _a.paddingRight;
-        return "aui-pr-".concat(paddingRight);
+        return classes.push("aui-pr-".concat(paddingRight));
     },
-    margin: function (_a) {
+    margin: function (classes, _a) {
         var margin = _a.margin;
-        return "aui-ma-".concat(margin);
+        return classes.push("aui-ma-".concat(margin));
     },
-    marginX: function (_a) {
+    marginX: function (classes, _a) {
         var marginX = _a.marginX, marginLeft = _a.marginLeft, marginRight = _a.marginRight;
-        var result = [];
         if (!marginLeft)
-            result.push("aui-ml-".concat(marginX));
+            classes.push("aui-ml-".concat(marginX));
         if (!marginRight)
-            result.push("aui-mr-".concat(marginX));
-        return result.join(" ");
+            classes.push("aui-mr-".concat(marginX));
     },
-    marginY: function (_a) {
+    marginY: function (classes, _a) {
         var marginY = _a.marginY, marginTop = _a.marginTop, marginBottom = _a.marginBottom;
-        var result = [];
         if (!marginTop)
-            result.push("aui-mt-".concat(marginY));
+            classes.push("aui-mt-".concat(marginY));
         if (!marginBottom)
-            result.push("aui-mb-".concat(marginY));
-        return result.join(" ");
+            classes.push("aui-mb-".concat(marginY));
     },
-    marginTop: function (_a) {
+    marginTop: function (classes, _a) {
         var marginTop = _a.marginTop;
-        return "aui-mt-".concat(marginTop);
+        return classes.push("aui-mt-".concat(marginTop));
     },
-    marginBottom: function (_a) {
+    marginBottom: function (classes, _a) {
         var marginBottom = _a.marginBottom;
-        return "aui-mb-".concat(marginBottom);
+        return classes.push("aui-mb-".concat(marginBottom));
     },
-    marginLeft: function (_a) {
+    marginLeft: function (classes, _a) {
         var marginLeft = _a.marginLeft;
-        return "aui-ml-".concat(marginLeft);
+        return classes.push("aui-ml-".concat(marginLeft));
     },
-    marginRight: function (_a) {
+    marginRight: function (classes, _a) {
         var marginRight = _a.marginRight;
-        return "aui-mr-".concat(marginRight);
+        return classes.push("aui-mr-".concat(marginRight));
     },
     // --- Dimensions ---
-    width: function (_a) {
+    width: function (classes, _a) {
         var width = _a.width;
-        return "aui-w-".concat(width);
+        return classes.push("aui-w-".concat(width));
     },
-    maxWidth: function (_a) {
+    maxWidth: function (classes, _a) {
         var maxWidth = _a.maxWidth;
-        return "aui-mw-".concat(maxWidth);
+        return classes.push("aui-mw-".concat(maxWidth));
     },
-    height: function (_a) {
+    height: function (classes, _a) {
         var height = _a.height;
-        return "aui-h-".concat(height);
+        return classes.push("aui-h-".concat(height));
     },
-    maxHeight: function (_a) {
+    maxHeight: function (classes, _a) {
         var maxHeight = _a.maxHeight;
-        return "aui-mh-".concat(maxHeight);
+        return classes.push("aui-mh-".concat(maxHeight));
     },
     // --- Borders ---
-    radius: function (_a) {
+    radius: function (classes, _a) {
         var radius = _a.radius;
-        return "aui-radius-".concat(radius);
-    },
-    border: function () { return "aui-ba"; },
-    borderTop: function () { return "aui-bt"; },
-    borderBottom: function () { return "aui-bb"; },
-    borderLeft: function () { return "aui-bl"; },
-    borderRight: function () { return "aui-br"; },
-    borderWidth: function (_a) {
+        return classes.push("aui-radius-".concat(radius));
+    },
+    border: function (classes) { return classes.push("aui-ba"); },
+    borderTop: function (classes) { return classes.push("aui-bt"); },
+    borderBottom: function (classes) { return classes.push("aui-bb"); },
+    borderLeft: function (classes) { return classes.push("aui-bl"); },
+    borderRight: function (classes) { return classes.push("aui-br"); },
+    borderWidth: function (classes, _a) {
         var borderWidth = _a.borderWidth;
-        return "aui-bw-".concat(borderWidth);
+        return classes.push("aui-bw-".concat(borderWidth));
     },
-    borderStyle: function (_a) {
+    borderStyle: function (classes, _a) {
         var borderStyle = _a.borderStyle;
-        return "aui-bs-".concat(borderStyle);
+        return classes.push("aui-bs-".concat(borderStyle));
     },
-    borderColor: function (_a) {
+    borderColor: function (classes, _a) {
         var borderColor = _a.borderColor;
-        return "aui-bc-".concat(borderColor);
+        return classes.push("aui-bc-".concat(borderColor));
     },
     // --- Effects ---
-    shadow: function (_a) {
+    shadow: function (classes, _a) {
         var shadow = _a.shadow;
-        return "aui-shadow-".concat(shadow);
+        return classes.push("aui-shadow-".concat(shadow));
     },
-    opacity: function (_a) {
+    opacity: function (classes, _a) {
         var opacity = _a.opacity;
-        return "aui-op-".concat(opacity);
+        return classes.push("aui-op-".concat(opacity));
     },
     // --- Typography ---
-    fontSize: function (_a) {
+    fontSize: function (classes, _a) {
         var fontSize = _a.fontSize;
-        return "aui-f-".concat(fontSize);
+        return classes.push("aui-f-".concat(fontSize));
     },
-    fontWeight: function (_a) {
+    fontWeight: function (classes, _a) {
         var fontWeight = _a.fontWeight;
-        return "aui-fw-".concat(fontWeight);
+        return classes.push("aui-fw-".concat(fontWeight));
     },
-    textAlign: function (_a) {
+    textAlign: function (classes, _a) {
         var textAlign = _a.textAlign;
-        return "aui-ta-".concat(textAlign);
+        return classes.push("aui-ta-".concat(textAlign));
     },
-    italics: function () { return "aui-it"; },
+    italics: function (classes) { return classes.push("aui-it"); },
     // --- Colors ---
-    color: function (_a) {
+    color: function (classes, _a) {
         var color = _a.color;
-        return "aui-c-".concat(color);
+        return classes.push("aui-c-".concat(color));
     },
-    backgroundColor: function (_a) {
+    backgroundColor: function (classes, _a) {
         var backgroundColor = _a.backgroundColor;
-        return "aui-bg-".concat(backgroundColor);
+        return classes.push("aui-bg-".concat(backgroundColor));
     },
     // --- Misc ---
-    cursor: function (_a) {
+    cursor: function (classes, _a) {
         var cursor = _a.cursor;
-        return "aui-cur-".concat(cursor);
+        return classes.push("aui-cursor-".concat(cursor));
     },
 };
 // Main function
@@ -198,10 +190,7 @@ export default function transformVfx(vfx) {
     var classes = [];
     for (var key in vfx) {
         var transformer = transformers[key];
-        var result = transformer(vfx);
-        if (result) {
-            classes.push(result);
-        }
+        transformer(classes, vfx);
     }
     return classes.join(" ") || null;
 }