@uxf/ui 1.0.0-beta.159 → 1.0.0-beta.160

package/checkbox/checkbox.d.ts

@@ -3,6 +3,7 @@ import { FormControlProps } from "../types";
 import { CheckboxSize } from "./theme";
 export interface CheckboxProps extends FormControlProps<boolean | undefined> {
     className?: string;
+    id?: string;
     indeterminate?: boolean;
     renderContent?: (className: string, checked: boolean | undefined) => ReactNode;
     size?: CheckboxSize;

package/checkbox/checkbox.js

@@ -39,6 +39,7 @@ exports.Checkbox = (0, react_1.forwardRef)((props, ref) => {
         "aria-readonly": props.isReadOnly,
         "aria-required": props.isRequired,
         className: (0, cx_1.cx)("uxf-checkbox", `uxf-checkbox--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, props.className, props.indeterminate && classes_1.CLASSES.IS_INDETERMINATE, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isFocused && classes_1.CLASSES.IS_FOCUSED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED),
+        id: props.id,
         onBlur: props.onBlur,
         onClick: onChange,
         onFocus: props.onFocus,

package/checkbox-button/checkbox-button.d.ts

@@ -2,6 +2,7 @@ import React, { CSSProperties, ReactNode } from "react";
 import { FormControlProps } from "../types";
 export interface CheckboxButtonProps extends FormControlProps<boolean | undefined> {
     className?: string;
+    id?: string;
     label: ReactNode;
     style?: CSSProperties;
 }

package/checkbox-button/checkbox-button.js

@@ -30,7 +30,7 @@ const cx_1 = require("@uxf/core/utils/cx");
 const classes_1 = require("@uxf/core/constants/classes");
 const icon_1 = require("../icon");
 exports.CheckboxButton = (0, react_2.forwardRef)((props, ref) => {
-    return (react_2.default.createElement(react_1.Switch, { checked: props.value, className: (0, cx_1.cx)("uxf-checkbox-button", props.className, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED), disabled: props.isDisabled, name: props.name, onChange: props.onChange, ref: ref, style: props.style },
+    return (react_2.default.createElement(react_1.Switch, { checked: props.value, className: (0, cx_1.cx)("uxf-checkbox-button", props.className, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED), disabled: props.isDisabled, id: props.id, name: props.name, onChange: props.onChange, ref: ref, style: props.style },
         react_2.default.createElement("span", { className: "uxf-checkbox-button__label" }, props.label),
         react_2.default.createElement("span", { className: "uxf-checkbox-button__icon" },
             react_2.default.createElement(icon_1.Icon, { name: "check" }))));

package/checkbox-input/checkbox-input.d.ts

@@ -3,6 +3,7 @@ import { FormControlProps } from "../types";
 import { CheckboxSize } from "../checkbox";
 export interface CheckboxInputProps extends FormControlProps<boolean | undefined> {
     className?: string;
+    id?: string;
     indeterminate?: boolean;
     label: ReactNode;
     size?: CheckboxSize;

package/checkbox-input/checkbox-input.js

@@ -31,7 +31,7 @@ exports.CheckboxInput = (0, react_2.forwardRef)((props, ref) => {
     var _a;
     return (react_2.default.createElement(react_1.Switch.Group, null,
         react_2.default.createElement("div", { className: `uxf-checkbox-input__wrapper ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
-            react_2.default.createElement(react_1.Switch, { as: react_2.Fragment, checked: props.value, name: props.name, onChange: props.onChange }, ({ checked }) => (react_2.default.createElement(checkbox_1.Checkbox, { className: "uxf-checkbox-input", indeterminate: props.indeterminate, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, onChange: props.onChange, ref: ref, size: props.size, style: props.style, value: checked }))),
+            react_2.default.createElement(react_1.Switch, { as: react_2.Fragment, checked: props.value, name: props.name, onChange: props.onChange }, ({ checked }) => (react_2.default.createElement(checkbox_1.Checkbox, { className: "uxf-checkbox-input", id: props.id, indeterminate: props.indeterminate, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, onChange: props.onChange, ref: ref, size: props.size, style: props.style, value: checked }))),
             react_2.default.createElement(react_1.Switch.Label, { className: "uxf-checkbox-input__label" }, props.label))));
 });
 exports.CheckboxInput.displayName = "UxfUiCheckboxInput";

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

@@ -10,7 +10,7 @@ export interface ColorRadioGroupProps extends FormControlProps<ColorRadioGroupOp
     className?: string;
     helperText?: ReactNode;
     hiddenLabel?: boolean;
-    id: string;
+    id?: string;
     label: string;
     options: ColorRadioGroupOption[];
     style?: CSSProperties;

package/dropzone/dropzone-input.d.ts

@@ -6,6 +6,7 @@ export interface DropzoneInputProps extends FormControlProps<DropzoneFile[] | un
     accept?: Accept;
     helperText?: ReactNode;
     icon?: IconName;
+    id?: string;
     label?: ReactNode;
     maxFileSize?: number;
     maxFilesCount?: number;

package/dropzone/dropzone-input.js

@@ -112,6 +112,7 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
             typeof props.label === "string" ? react_1.default.createElement("span", null, props.label) : props.label,
             react_1.default.createElement("input", { ...getInputProps({
                     className: "uxf-dropzone__input",
+                    id: props.id,
                     name: props.name,
                     type: "file",
                 }) })),

package/package.json

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

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

@@ -13,7 +13,7 @@ export interface RadioGroupProps extends FormControlProps<RadioGroupOptionValue
     helperText?: ReactNode;
     forceColumn?: boolean;
     hiddenLabel?: boolean;
-    id: string;
+    id?: string;
     label: string;
     options: RadioGroupOption[];
     radioSize?: RadioSize;

package/toggle/toggle.d.ts

@@ -4,6 +4,7 @@ import { ToggleVariant } from "./theme";
 export interface ToggleProps extends FormControlProps<boolean | undefined> {
     className?: string;
     hiddenLabel?: boolean;
+    id?: string;
     label: ReactNode;
     style?: CSSProperties;
     variant?: ToggleVariant;

package/toggle/toggle.js

@@ -32,7 +32,7 @@ exports.Toggle = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
     return (react_1.default.createElement(react_2.Switch.Group, null,
         react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-toggle__wrapper", `uxf-toggle__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.hiddenLabel && "uxf-toggle__wrapper--hiddenLabel", props.className) },
-            react_1.default.createElement(react_2.Switch, { checked: props.value, className: (0, cx_1.cx)(props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED, "uxf-toggle", `uxf-toggle--${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), disabled: props.isDisabled, name: props.name, onChange: props.onChange, style: props.style, ref: ref },
+            react_1.default.createElement(react_2.Switch, { checked: props.value, className: (0, cx_1.cx)(props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED, "uxf-toggle", `uxf-toggle--${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), disabled: props.isDisabled, id: props.id, name: props.name, onChange: props.onChange, ref: ref, style: props.style },
                 react_1.default.createElement("span", { className: "uxf-toggle__inner" })),
             react_1.default.createElement(react_2.Switch.Label, { hidden: props.hiddenLabel, className: "uxf-toggle__label" }, props.label))));
 });