@rackbops/ui-react 0.2.20 → 0.2.21

package/dist/feedback.js

@@ -1,6 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, } from "react";
+import { createElement, forwardRef, } from "react";
 import { cx } from "./cx.js";
+/** A forwardRef DOM wrapper that adds a base rb-* class and any fixed static attributes. */
+function styled(tag, cls, attrs = {}) {
+    return forwardRef(function Styled({ className, ...rest }, ref) {
+        return createElement(tag, { ref, ...attrs, className: cx(cls, className), ...rest });
+    });
+}
 export const Badge = forwardRef(function Badge({ variant, className, ...rest }, ref) {
     return (_jsx("span", { ref: ref, className: cx("rb-badge", variant && `rb-badge--${variant}`, className), ...rest }));
 });
@@ -10,11 +16,10 @@ export const Alert = forwardRef(function Alert({ variant, title, className, chil
     return (_jsxs("div", { ref: ref, role: "alert", className: cx("rb-alert", variant && `rb-alert--${variant}`, className), ...rest, children: [title !== undefined && _jsx("div", { className: "rb-alert__title", children: title }), children] }));
 });
 Alert.displayName = "Alert";
-export const Progress = forwardRef(function Progress({ className, ...rest }, ref) {
-    return _jsx("progress", { ref: ref, className: cx("rb-progress", className), ...rest });
-});
+export const Progress = styled("progress", "rb-progress");
 Progress.displayName = "Progress";
-export const Spinner = forwardRef(function Spinner({ className, ...rest }, ref) {
-    return (_jsx("span", { ref: ref, role: "status", "aria-label": "Loading", className: cx("rb-spinner", className), ...rest }));
+export const Spinner = styled("span", "rb-spinner", {
+    role: "status",
+    "aria-label": "Loading",
 });
 Spinner.displayName = "Spinner";

package/dist/form.js

@@ -1,25 +1,21 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, } from "react";
+import { createElement, forwardRef, } from "react";
 import { cx } from "./cx.js";
-export const Input = forwardRef(function Input({ className, ...rest }, ref) {
-    return _jsx("input", { ref: ref, className: cx("rb-input", className), ...rest });
-});
+/** A forwardRef DOM wrapper that only adds a base rb-* class -- Input, Textarea, Select, Label, Field. */
+function styled(tag, cls) {
+    return forwardRef(function Styled({ className, ...rest }, ref) {
+        return createElement(tag, { ref, className: cx(cls, className), ...rest });
+    });
+}
+export const Input = styled("input", "rb-input");
 Input.displayName = "Input";
-export const Textarea = forwardRef(function Textarea({ className, ...rest }, ref) {
-    return _jsx("textarea", { ref: ref, className: cx("rb-textarea", className), ...rest });
-});
+export const Textarea = styled("textarea", "rb-textarea");
 Textarea.displayName = "Textarea";
-export const Select = forwardRef(function Select({ className, ...rest }, ref) {
-    return _jsx("select", { ref: ref, className: cx("rb-select", className), ...rest });
-});
+export const Select = styled("select", "rb-select");
 Select.displayName = "Select";
-export const Label = forwardRef(function Label({ className, ...rest }, ref) {
-    return _jsx("label", { ref: ref, className: cx("rb-label", className), ...rest });
-});
+export const Label = styled("label", "rb-label");
 Label.displayName = "Label";
-export const Field = forwardRef(function Field({ className, ...rest }, ref) {
-    return _jsx("div", { ref: ref, className: cx("rb-field", className), ...rest });
-});
+export const Field = styled("div", "rb-field");
 Field.displayName = "Field";
 /** A checkbox/radio/switch control, optionally wrapped with its label. */
 function ChoiceControl({ label, control, wrapperClassName, wrapperStyle, }) {
@@ -27,15 +23,14 @@ function ChoiceControl({ label, control, wrapperClassName, wrapperStyle, }) {
         return _jsx(_Fragment, { children: control });
     return (_jsxs("label", { className: cx("rb-choice", wrapperClassName), style: wrapperStyle, children: [control, label] }));
 }
-export const Checkbox = forwardRef(function Checkbox({ label, className, wrapperClassName, wrapperStyle, ...rest }, ref) {
-    return (_jsx(ChoiceControl, { label: label, wrapperClassName: wrapperClassName, wrapperStyle: wrapperStyle, control: _jsx("input", { ref: ref, type: "checkbox", className: cx("rb-checkbox", className), ...rest }) }));
-});
-Checkbox.displayName = "Checkbox";
-export const Radio = forwardRef(function Radio({ label, className, wrapperClassName, wrapperStyle, ...rest }, ref) {
-    return (_jsx(ChoiceControl, { label: label, wrapperClassName: wrapperClassName, wrapperStyle: wrapperStyle, control: _jsx("input", { ref: ref, type: "radio", className: cx("rb-radio", className), ...rest }) }));
-});
-Radio.displayName = "Radio";
-export const Switch = forwardRef(function Switch({ label, className, wrapperClassName, wrapperStyle, ...rest }, ref) {
-    return (_jsx(ChoiceControl, { label: label, wrapperClassName: wrapperClassName, wrapperStyle: wrapperStyle, control: _jsx("input", { ref: ref, type: "checkbox", role: "switch", className: cx("rb-switch", className), ...rest }) }));
-});
-Switch.displayName = "Switch";
+/** A Checkbox/Radio/Switch factory: wraps an `<input>` carrying its fixed `type`/`role` in ChoiceControl. */
+function choiceControl(displayName, cls, attrs) {
+    const Component = forwardRef(function Choice({ label, className, wrapperClassName, wrapperStyle, ...rest }, ref) {
+        return (_jsx(ChoiceControl, { label: label, wrapperClassName: wrapperClassName, wrapperStyle: wrapperStyle, control: _jsx("input", { ref: ref, ...attrs, className: cx(cls, className), ...rest }) }));
+    });
+    Component.displayName = displayName;
+    return Component;
+}
+export const Checkbox = choiceControl("Checkbox", "rb-checkbox", { type: "checkbox" });
+export const Radio = choiceControl("Radio", "rb-radio", { type: "radio" });
+export const Switch = choiceControl("Switch", "rb-switch", { type: "checkbox", role: "switch" });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rackbops/ui-react",
-  "version": "0.2.20",
+  "version": "0.2.21",
   "description": "React components styled by @rackbops/styles rackbops themes.",
   "license": "MIT",
   "repository": {