@uxf/ui 1.0.0-beta.70 → 1.0.0-beta.71

package/color-radio-group/color-radio-group.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from "react";
+import React, { CSSProperties, ReactNode } from "react";
 import { FormControlProps } from "../types";
 import { HexCodeString } from "../utils/is-light-background";
 export declare type ColorRadioGroupOptionValue = HexCodeString;
@@ -8,6 +8,7 @@ export interface ColorRadioGroupOption {
 }
 export interface ColorRadioGroupProps extends FormControlProps<ColorRadioGroupOptionValue | null> {
     className?: string;
+    helperText?: ReactNode;
     hiddenLabel?: boolean;
     id: string;
     label: string;

package/color-radio-group/color-radio-group.js

@@ -33,15 +33,15 @@ const classes_1 = require("@uxf/core/constants/classes");
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const color_radio_1 = require("./color-radio");
 exports.ColorRadioGroup = (0, forwardRef_1.forwardRef)("ColorRadioGroup", (props, ref) => {
-    // eslint-disable-next-line react/destructuring-assignment
-    const { className, hiddenLabel, id, isDisabled, label, onChange, options, style, value } = props;
     const innerRef = (0, react_2.useRef)(null);
-    (0, use_input_submit_1.useInputSubmit)(innerRef, "radio-group", isDisabled);
-    const rootClassName = (0, cx_1.cx)("uxf-color-radio-group-group", className);
-    return (react_2.default.createElement(react_1.RadioGroup, { className: rootClassName, id: id, onChange: onChange, style: style, value: value },
-        react_2.default.createElement(react_1.RadioGroup.Label, { as: label_1.Label, className: "uxf-color-radio-group__label", isHidden: hiddenLabel, ref: ref }, label),
-        react_2.default.createElement("div", { className: "uxf-color-radio-group__options-wrapper" }, options.map((option) => {
+    (0, use_input_submit_1.useInputSubmit)(innerRef, "radio-group", props.isDisabled);
+    const errorId = props.isInvalid ? `${props.id}--errormessage` : undefined;
+    const rootClassName = (0, cx_1.cx)("uxf-color-radio-group-group", props.className);
+    return (react_2.default.createElement(react_1.RadioGroup, { className: rootClassName, id: props.id, onChange: props.onChange, style: props.style, value: props.value },
+        react_2.default.createElement(react_1.RadioGroup.Label, { as: label_1.Label, className: "uxf-color-radio-group__label", isHidden: props.hiddenLabel, ref: ref }, props.label),
+        react_2.default.createElement("div", { className: "uxf-color-radio-group__options-wrapper" }, props.options.map((option) => {
             const optionStyle = { "--option-color": option.value };
-            return (react_2.default.createElement(react_1.RadioGroup.Option, { className: (0, cx_1.cx)("uxf-color-radio-group__option", props.isDisabled && classes_1.CLASSES.IS_DISABLED), key: option.value.toString(), value: option.value, style: optionStyle }, (o) => (react_2.default.createElement(color_radio_1.ColorRadio, { isDisabled: isDisabled || o.disabled, colorLabel: option.label, color: option.value, ref: o.checked ? innerRef : undefined, value: o.checked }))));
-        }))));
+            return (react_2.default.createElement(react_1.RadioGroup.Option, { className: (0, cx_1.cx)("uxf-color-radio-group__option", props.isDisabled && classes_1.CLASSES.IS_DISABLED), key: option.value.toString(), value: option.value, style: optionStyle }, (o) => (react_2.default.createElement(color_radio_1.ColorRadio, { isDisabled: props.isDisabled || o.disabled, colorLabel: option.label, color: option.value, ref: o.checked ? innerRef : undefined, value: o.checked }))));
+        })),
+        props.helperText && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText))));
 });

package/color-radio-group/color-radio-group.stories.js

@@ -74,6 +74,6 @@ function Default() {
         react_1.default.createElement("div", { className: "light w-1/2 p-20" },
             react_1.default.createElement(index_1.ColorRadioGroup, { id: "radiogroup", label: "Light Color Radio group", onChange: (v) => setValue(v), options: options, value: value })),
         react_1.default.createElement("div", { className: "dark w-1/2 bg-gray-900 p-20" },
-            react_1.default.createElement(index_1.ColorRadioGroup, { id: "radiogroup", label: "Dark Color Radio group", onChange: (v) => setValue(v), options: options, value: value }))));
+            react_1.default.createElement(index_1.ColorRadioGroup, { id: "radiogroup", label: "Dark Color Radio group with helper text", helperText: "Some helper text", onChange: (v) => setValue(v), options: options, value: value }))));
 }
 exports.Default = Default;

package/color-radio-group/index.d.ts

@@ -1 +1 @@
-export { ColorRadioGroup } from "./color-radio-group";
+export * from "./color-radio-group";

package/color-radio-group/index.js

@@ -1,5 +1,17 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorRadioGroup = void 0;
-var color_radio_group_1 = require("./color-radio-group");
-Object.defineProperty(exports, "ColorRadioGroup", { enumerable: true, get: function () { return color_radio_group_1.ColorRadioGroup; } });
+__exportStar(require("./color-radio-group"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.70",
+  "version": "1.0.0-beta.71",
   "description": "",
   "publishConfig": {
     "access": "public"

package/radio-group/radio-group.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from "react";
+import React, { CSSProperties, ReactNode } from "react";
 import { FormControlProps } from "../types";
 export declare type RadioGroupOptionValue = string | number;
 export interface RadioGroupOption {
@@ -8,7 +8,7 @@ export interface RadioGroupOption {
 }
 export interface RadioGroupProps extends FormControlProps<RadioGroupOptionValue | null> {
     className?: string;
-    error?: string;
+    helperText?: ReactNode;
     forceColumn?: boolean;
     hiddenLabel?: boolean;
     id: string;

package/radio-group/radio-group.js

@@ -25,25 +25,24 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioGroup = void 0;
 const react_1 = require("@headlessui/react");
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const react_2 = __importStar(require("react"));
-const error_message_1 = require("../error-message");
 const use_input_submit_1 = require("../hooks/use-input-submit");
 const label_1 = require("../label");
 const radio_1 = require("../radio");
-const cx_1 = require("@uxf/core/utils/cx");
-const classes_1 = require("@uxf/core/constants/classes");
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 exports.RadioGroup = (0, forwardRef_1.forwardRef)("RadioGroup", (props, ref) => {
-    // eslint-disable-next-line react/destructuring-assignment
-    const { className, error, hiddenLabel, id, isDisabled, isInvalid, label, onChange, options, style, value, variant = "list", } = props;
+    var _a;
     const innerRef = (0, react_2.useRef)(null);
-    (0, use_input_submit_1.useInputSubmit)(innerRef, "radio-group", isDisabled);
-    const errorId = isInvalid ? `${id}--errormessage` : undefined;
-    const rootClassName = (0, cx_1.cx)("uxf-radio-group", variant === "list" && "uxf-radio-group--list", variant === "radioButton" && "uxf-radio-group--radioButton", isDisabled && classes_1.CLASSES.IS_DISABLED, isInvalid && classes_1.CLASSES.IS_INVALID, className);
-    return (react_2.default.createElement(react_1.RadioGroup, { className: rootClassName, disabled: isDisabled, id: id, onChange: onChange, style: style, value: value },
-        react_2.default.createElement(react_1.RadioGroup.Label, { as: label_1.Label, className: "uxf-radio-group__label", isHidden: hiddenLabel, ref: ref }, label),
-        react_2.default.createElement("div", { className: "uxf-radio-group__options-wrapper" }, options.map((option) => (react_2.default.createElement(react_1.RadioGroup.Option, { className: (0, cx_1.cx)("uxf-radio-group__option", props.isDisabled && classes_1.CLASSES.IS_DISABLED), disabled: option.disabled, key: option.value.toString(), value: option.value }, (o) => (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-radio-group__option__wrapper", o.checked && classes_1.CLASSES.IS_SELECTED) },
+    (0, use_input_submit_1.useInputSubmit)(innerRef, "radio-group", props.isDisabled);
+    const errorId = props.isInvalid ? `${props.id}--errormessage` : undefined;
+    const variant = (_a = props.variant) !== null && _a !== void 0 ? _a : "list";
+    const rootClassName = (0, cx_1.cx)("uxf-radio-group", variant === "list" && "uxf-radio-group--list", variant === "radioButton" && "uxf-radio-group--radioButton", props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.className);
+    return (react_2.default.createElement(react_1.RadioGroup, { className: rootClassName, disabled: props.isDisabled, id: props.id, onChange: props.onChange, style: props.style, value: props.value },
+        react_2.default.createElement(react_1.RadioGroup.Label, { as: label_1.Label, className: "uxf-radio-group__label", isHidden: props.hiddenLabel, ref: ref }, props.label),
+        react_2.default.createElement("div", { className: "uxf-radio-group__options-wrapper" }, props.options.map((option) => (react_2.default.createElement(react_1.RadioGroup.Option, { className: (0, cx_1.cx)("uxf-radio-group__option", props.isDisabled && classes_1.CLASSES.IS_DISABLED), disabled: option.disabled, key: option.value.toString(), value: option.value }, (o) => (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-radio-group__option__wrapper", o.checked && classes_1.CLASSES.IS_SELECTED) },
             react_2.default.createElement("span", { className: "uxf-radio-group__option__label" }, option.label),
-            react_2.default.createElement(radio_1.Radio, { isDisabled: isDisabled || o.disabled, isInvalid: isInvalid, label: option.label, ref: o.checked ? innerRef : undefined, value: o.checked }))))))),
-        isInvalid && error && react_2.default.createElement(error_message_1.ErrorMessage, { id: errorId }, error)));
+            react_2.default.createElement(radio_1.Radio, { isDisabled: props.isDisabled || o.disabled, isInvalid: props.isInvalid, label: option.label, ref: o.checked ? innerRef : undefined, value: o.checked }))))))),
+        props.helperText && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText))));
 });

package/tabs/tabs.d.ts

@@ -1,7 +1,7 @@
 import React, { FC, HTMLAttributes, ReactNode } from "react";
 export interface TabProps {
     children: ReactNode;
-    className: string;
+    className?: string;
     tabTitle: ReactNode;
 }
 export declare const TabPanel: FC<TabProps>;