@uxf/ui 1.0.0-beta.41 → 1.0.0-beta.43

package/avatar-file-input/avatar-file-input.js

@@ -28,10 +28,10 @@ const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
-const forwardRef_1 = require("../utils/forwardRef");
 const error_message_1 = require("../error-message");
-const raster_image_1 = require("../raster-image");
 const icon_1 = require("../icon");
+const raster_image_1 = require("../raster-image");
+const forward_ref_1 = require("../utils/forward-ref");
 function AvatarFileInput(props, ref) {
     const innerRef = (0, react_1.useRef)(null);
     const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
@@ -66,4 +66,4 @@ function AvatarFileInput(props, ref) {
             react_1.default.createElement("input", { accept: "image/*", "aria-describedby": errorId, "aria-invalid": props.invalid, className: "input-reset rounded-inherit absolute left-0 top-0 h-full w-full cursor-pointer opacity-0", disabled: props.disabled, form: props.form, id: props.id, name: props.name, onBlur: input.onBlur, onChange: _onChange, onFocus: input.onFocus, readOnly: props.readOnly, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), required: props.required, tabIndex: props.readOnly ? -1 : undefined, type: "file" })),
         props.invalid && props.error && react_1.default.createElement(error_message_1.ErrorMessage, { id: errorId }, props.error)));
 }
-exports.default = (0, forwardRef_1.forwardRef)("AvatarFileInput", AvatarFileInput);
+exports.default = (0, forward_ref_1.forwardRef)("AvatarFileInput", AvatarFileInput);

package/button/button.d.ts

@@ -1,6 +1,6 @@
-import React, { AnchorHTMLAttributes } from "react";
-import { ButtonColors, ButtonSizes, ButtonVariants } from "@uxf/ui/button/theme";
 import { UseAnchorProps } from "@uxf/core/hooks/useAnchorProps";
+import { ButtonColors, ButtonSizes, ButtonVariants } from "@uxf/ui/button/theme";
+import React, { AnchorHTMLAttributes } from "react";
 export declare type ButtonVariant = keyof ButtonVariants;
 export declare type ButtonSize = keyof ButtonSizes;
 export declare type ButtonColor = keyof ButtonColors;

package/button/button.js

@@ -3,14 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const cx_1 = require("@uxf/core/utils/cx");
-const forwardRef_1 = require("../utils/forwardRef");
-const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
 const classes_1 = require("@uxf/core/constants/classes");
+const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importDefault(require("react"));
+const forward_ref_1 = require("../utils/forward-ref");
 function Button(props, ref) {
     var _a, _b, _c;
-    const className = (0, cx_1.cx)("uxf-button", `uxf-button--color-${(_a = props.color) !== null && _a !== void 0 ? _a : "default"}`, `uxf-button--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, `uxf-button--variant-${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`, props.disabled && classes_1.CLASSES.IS_DISABLED, props.loading && "is-loading", props.isFullWidth && "uxf-button--full-width");
+    const className = (0, cx_1.cx)("uxf-button", `uxf-button--color-${(_a = props.color) !== null && _a !== void 0 ? _a : "default"}`, `uxf-button--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, `uxf-button--variant-${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`, props.disabled && classes_1.CLASSES.IS_DISABLED, props.loading && classes_1.CLASSES.IS_LOADING, props.isFullWidth && "uxf-button--full-width");
     const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
         ...props,
         className,
@@ -19,4 +19,4 @@ function Button(props, ref) {
         typeof props.children === "string" ? (react_1.default.createElement("span", { className: "uxf-button__text" }, props.children)) : (props.children),
         react_1.default.createElement("div", { className: "loader" })));
 }
-exports.default = (0, forwardRef_1.forwardRef)("Button", Button);
+exports.default = (0, forward_ref_1.forwardRef)("Button", Button);

package/checkbox/checkbox.js

@@ -8,16 +8,16 @@ const react_2 = __importDefault(require("react"));
 const cx_1 = require("@uxf/core/utils/cx");
 const classes_1 = require("@uxf/core/constants/classes");
 function CheckIcon() {
-    return (react_2.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", style: { height: "24" } },
-        react_2.default.createElement("path", { d: "M211.8 339.8C200.9 350.7 183.1 350.7 172.2 339.8L108.2 275.8C97.27 264.9 97.27 247.1 108.2 236.2C119.1 225.3 136.9 225.3 147.8 236.2L192 280.4L300.2 172.2C311.1 161.3 328.9 161.3 339.8 172.2C350.7 183.1 350.7 200.9 339.8 211.8L211.8 339.8zM0 96C0 60.65 28.65 32 64 32H384C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96zM48 96V416C48 424.8 55.16 432 64 432H384C392.8 432 400 424.8 400 416V96C400 87.16 392.8 80 384 80H64C55.16 80 48 87.16 48 96z" })));
+    return (react_2.default.createElement("svg", { viewBox: "0 0 448 512", style: { height: 24 } },
+        react_2.default.createElement("path", { fill: "currentColor", d: "M211.8 339.8C200.9 350.7 183.1 350.7 172.2 339.8L108.2 275.8C97.27 264.9 97.27 247.1 108.2 236.2C119.1 225.3 136.9 225.3 147.8 236.2L192 280.4L300.2 172.2C311.1 161.3 328.9 161.3 339.8 172.2C350.7 183.1 350.7 200.9 339.8 211.8L211.8 339.8zM0 96C0 60.65 28.65 32 64 32H384C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96zM48 96V416C48 424.8 55.16 432 64 432H384C392.8 432 400 424.8 400 416V96C400 87.16 392.8 80 384 80H64C55.16 80 48 87.16 48 96z" })));
 }
 function SquareIcon() {
-    return (react_2.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", style: { height: "24" } },
-        react_2.default.createElement("path", { d: "M384 32C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96C0 60.65 28.65 32 64 32H384zM384 80H64C55.16 80 48 87.16 48 96V416C48 424.8 55.16 432 64 432H384C392.8 432 400 424.8 400 416V96C400 87.16 392.8 80 384 80z" })));
+    return (react_2.default.createElement("svg", { viewBox: "0 0 448 512", style: { height: 24 } },
+        react_2.default.createElement("path", { fill: "currentColor", d: "M384 32C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96C0 60.65 28.65 32 64 32H384zM384 80H64C55.16 80 48 87.16 48 96V416C48 424.8 55.16 432 64 432H384C392.8 432 400 424.8 400 416V96C400 87.16 392.8 80 384 80z" })));
 }
 function Checkbox(props) {
     return (react_2.default.createElement(react_1.Switch, { checked: props.checked, className: (0, cx_1.cx)(props.checked && classes_1.CLASSES.IS_SELECTED, props.disabled && classes_1.CLASSES.IS_DISABLED, "uxf-checkbox", props.className), disabled: props.disabled, onChange: props.onChange, style: props.style },
-        react_2.default.createElement("span", { className: "sr-only" }, props.label),
+        react_2.default.createElement("span", { className: "uxf-checkbox__label" }, props.label),
         props.checked ? react_2.default.createElement(CheckIcon, null) : react_2.default.createElement(SquareIcon, null)));
 }
 exports.default = Checkbox;

package/combobox/combobox.d.ts

@@ -2,19 +2,18 @@ import React, { ReactNode } from "react";
 import { FormControlProps } from "../types";
 export declare type ComboboxValue = number | string;
 export declare type ComboboxOption<T = ComboboxValue> = {
+    disabled?: boolean;
     id: T;
     label: string;
-    disabled?: boolean;
 };
 export interface ComboboxProps<Value = ComboboxValue, Option = ComboboxOption<Value>> extends FormControlProps<Value | null> {
-    id: string;
     className?: string;
     helperText?: ReactNode;
+    id?: string;
+    keyExtractor?: (option: Option) => string | number;
     label: string;
-    placeholder?: string;
     options: Option[];
-    error?: string;
-    keyExtractor?: (option: Option) => string | number;
+    placeholder?: string;
     renderOption?: (option: Option) => ReactNode;
 }
 declare const _default: React.ForwardRefExoticComponent<ComboboxProps<ComboboxValue, ComboboxOption<ComboboxValue>> & React.RefAttributes<HTMLDivElement>>;

package/combobox/combobox.js

@@ -24,34 +24,37 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("@headlessui/react");
-const use_dropdown_1 = require("../hooks/use-dropdown");
 const classes_1 = require("@uxf/core/constants/classes");
 const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
+const slugify_1 = require("@uxf/core/utils/slugify");
 const react_2 = __importStar(require("react"));
-const label_1 = require("../label");
-const forwardRef_1 = require("@uxf/ui/utils/forwardRef");
+const use_dropdown_1 = require("../hooks/use-dropdown");
 const icon_1 = require("../icon");
-const slugify_1 = require("@uxf/core/utils/slugify");
+const label_1 = require("../label");
+const forward_ref_1 = require("../utils/forward-ref");
 function Combobox(props, ref) {
+    var _a;
+    const generatedId = (0, react_2.useId)();
+    const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const [query, setQuery] = (0, react_2.useState)("");
     const selectedOption = props.options.find((option) => option.id === props.value);
     const filteredData = query === "" ? props.options : props.options.filter((item) => (0, slugify_1.slugify)(item.label).includes((0, slugify_1.slugify)(query)));
     const innerRef = (0, react_2.useRef)(null);
+    const errorId = props.isInvalid ? `${id}--error-message` : undefined;
     const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const dropdown = (0, use_dropdown_1.useDropdown)("bottom", true);
     const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.reference), [ref, dropdown.reference]);
-    const errorId = props.isInvalid ? `${props.id}--error-message` : undefined;
-    return (react_2.default.createElement(react_1.Combobox, { as: "div", className: (0, cx_1.cx)("uxf-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && "is-required", props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), onChange: (v) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.id); }, value: selectedOption, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
+    return (react_2.default.createElement(react_1.Combobox, { as: "div", className: (0, cx_1.cx)("uxf-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), onChange: (v) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.id); }, value: selectedOption, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
         react_2.default.createElement(react_1.Combobox.Label, { as: label_1.Label, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
         react_2.default.createElement(react_1.Combobox.Button, { as: "div", className: (0, cx_1.cx)("uxf-combobox__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
             react_2.default.createElement(react_1.Combobox.Input, { className: (0, cx_1.cx)("uxf-combobox__input"), displayValue: (item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : ""; }, onBlur: props.onBlur, onChange: (event) => setQuery(event.target.value), placeholder: props.placeholder, ref: stableRef, type: "text" }),
             renderProps.open ? (react_2.default.createElement(icon_1.Icon, { Component: icon_1.ChevronUpIcon, size: 12 })) : (react_2.default.createElement(icon_1.Icon, { Component: icon_1.ChevronDownIcon, size: 12 }))),
-        props.helperText && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID) }, props.helperText)),
+        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)),
         react_2.default.createElement(react_1.Combobox.Options, { className: "uxf-dropdown", ref: dropdown.floating, style: dropdown.style }, filteredData.map((option) => {
             var _a, _b, _c, _d;
             return (react_2.default.createElement(react_1.Combobox.Option, { key: (_b = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.id, value: option, className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED) }, (_d = (_c = props.renderOption) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.label));
         }))))));
 }
-exports.default = (0, forwardRef_1.forwardRef)("Combobox", Combobox);
+exports.default = (0, forward_ref_1.forwardRef)("Combobox", Combobox);

package/combobox/combobox.stories.js

@@ -49,7 +49,7 @@ function Default() {
     return (react_1.default.createElement("div", { className: "space-y-8" },
         react_1.default.createElement(index_1.Combobox, { id: "combobox-1", name: "combobox", label: "Combobox", options: options, onChange: handleChange, value: value }),
         react_1.default.createElement(index_1.Combobox, { id: "combobox-1", name: "combobox", label: "Combobox with helper text", options: options, onChange: handleChange, value: value, helperText: "Start typing to see options..." }),
-        react_1.default.createElement(index_1.Combobox, { id: "combobox-1", name: "combobox", label: "Combobox invalid", options: options, onChange: handleChange, value: value, helperText: "Start typing to see options...", isInvalid: true, isRequired: true, error: "Error message" })));
+        react_1.default.createElement(index_1.Combobox, { id: "combobox-1", name: "combobox", label: "Combobox invalid", options: options, onChange: handleChange, value: value, helperText: "Error message", isInvalid: true, isRequired: true })));
 }
 exports.Default = Default;
 function ComponentStructure() {

package/dropdown/dropdown.js

@@ -5,23 +5,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = void 0;
 const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
-const react_1 = __importDefault(require("react"));
-const forwardRef_1 = require("@uxf/ui/utils/forwardRef");
 const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importDefault(require("react"));
+const forward_ref_1 = require("../utils/forward-ref");
 function Item(props, ref) {
     // eslint-disable-next-line react/destructuring-assignment
     const { children, className, ...restProps } = props;
     const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
-        className: `uxf-dropdown-item ${className || ""}`,
+        className: `uxf-dropdown__item ${className || ""}`,
         role: "menuitem",
         ...restProps,
     });
     return (react_1.default.createElement("a", { ref: ref, ...anchorProps }, children));
 }
 function Items(props, ref) {
-    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-dropdown-items", props.className), ref: ref, role: props.role }, props.children));
+    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-dropdown__items", props.className), ref: ref, role: props.role }, props.children));
 }
 exports.Dropdown = {
-    Item: (0, forwardRef_1.forwardRef)("Item.", Item),
-    Items: (0, forwardRef_1.forwardRef)("Items", Items),
+    Item: (0, forward_ref_1.forwardRef)("Item.", Item),
+    Items: (0, forward_ref_1.forwardRef)("Items", Items),
 };

package/form-control/form-control.d.ts

@@ -1,13 +1,12 @@
-import { ReactElement, ReactNode } from "react";
-interface FormControlProps {
+import React, { ReactElement, ReactNode } from "react";
+export interface FormControlProps {
+    children?: ReactElement;
+    className?: string;
+    errorId?: string;
     form?: string;
+    helperText?: ReactNode;
     inputId: string;
-    errorId?: string;
     isRequired?: boolean;
-    className?: string;
     label?: ReactNode;
-    helperText?: ReactNode;
-    children?: ReactElement;
 }
-export declare function FormControl(props: FormControlProps): JSX.Element;
-export {};
+export declare const FormControl: React.ForwardRefExoticComponent<FormControlProps & React.RefAttributes<HTMLDivElement>>;

package/form-control/form-control.js

@@ -4,16 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormControl = void 0;
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importDefault(require("react"));
 const label_1 = require("../label");
-const cx_1 = require("@uxf/core/utils/cx");
-const classes_1 = require("@uxf/core/constants/classes");
+const forward_ref_1 = require("../utils/forward-ref");
 // TODO - tohle asi ještě nějak předělám (ten interface je trochu nelogickej)
-function FormControl(props) {
+exports.FormControl = (0, forward_ref_1.forwardRef)("FormControl", (props, ref) => {
     const helperTextClassName = (0, cx_1.cx)("uxf-helper-text", props.errorId && classes_1.CLASSES.IS_INVALID);
-    return (react_1.default.createElement("div", { className: props.className },
+    return (react_1.default.createElement("div", { className: props.className, ref: ref },
         react_1.default.createElement(label_1.Label, { isRequired: props.isRequired, htmlFor: props.inputId, form: props.form }, props.label),
         props.children,
-        react_1.default.createElement("div", { className: helperTextClassName }, props.helperText)));
-}
-exports.FormControl = FormControl;
+        props.helperText && (react_1.default.createElement("div", { className: helperTextClassName, id: props.errorId }, props.helperText))));
+});

package/form-control/form-control.stories.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-import { FormControl } from "./form-control";
+import React from "react";
 declare const _default: {
     title: string;
-    component: typeof FormControl;
+    component: React.ForwardRefExoticComponent<import("./form-control").FormControlProps & React.RefAttributes<HTMLDivElement>>;
     parameters: {
         actions: {
             argTypesRegex: string;

package/hooks/use-input-submit.d.ts

@@ -1,4 +1,4 @@
 import { RefObject } from "react";
-declare type SubmitResolverType = "checkbox" | "radio-group" | "text-input";
+declare type SubmitResolverType = "checkbox" | "radio-group";
 export declare function useInputSubmit<T extends HTMLElement>(ref: RefObject<T>, type: SubmitResolverType, disabled: boolean | undefined): void;
 export {};

package/hooks/use-input-submit.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInputSubmit = void 0;
-const use_latest_1 = require("./use-latest");
 const react_1 = require("react");
 function childrenHasFocus(node) {
     node.childNodes.forEach((child) => {
@@ -17,12 +16,9 @@ function submitResolver(type, node) {
             return document.activeElement === node.firstChild;
         case "radio-group":
             return childrenHasFocus(node);
-        case "text-input":
-            return document.activeElement === node;
     }
 }
 function useInputSubmit(ref, type, disabled) {
-    const latestType = (0, use_latest_1.useLatest)(type);
     (0, react_1.useEffect)(() => {
         const node = ref.current;
         if (!node || disabled) {
@@ -30,7 +26,7 @@ function useInputSubmit(ref, type, disabled) {
         }
         const handleSubmit = (e) => {
             var _a;
-            if (e instanceof KeyboardEvent && e.key === "Enter" && submitResolver(latestType.current, node)) {
+            if (e instanceof KeyboardEvent && e.key === "Enter" && submitResolver(type, node)) {
                 const closestForm = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest("form");
                 if (closestForm) {
                     closestForm.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
@@ -39,6 +35,6 @@ function useInputSubmit(ref, type, disabled) {
         };
         node.addEventListener("keydown", handleSubmit);
         return () => node.removeEventListener("keydown", handleSubmit);
-    }, [disabled, latestType, ref]);
+    }, [disabled, ref, type]);
 }
 exports.useInputSubmit = useInputSubmit;

package/icon/camera-icon.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 function CameraIcon(props) {
-    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props },
+    return (react_1.default.createElement("svg", { viewBox: "0 0 512 512", ...props },
         react_1.default.createElement("path", { fill: "currentColor", d: "M144 288C144 226.1 194.1 176 256 176C317.9 176 368 226.1 368 288C368 349.9 317.9 400 256 400C194.1 400 144 349.9 144 288zM256 224C220.7 224 192 252.7 192 288C192 323.3 220.7 352 256 352C291.3 352 320 323.3 320 288C320 252.7 291.3 224 256 224zM362.9 64.82L373.3 96H448C483.3 96 512 124.7 512 160V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V160C0 124.7 28.65 96 64 96H138.7L149.1 64.82C155.6 45.22 173.9 32 194.6 32H317.4C338.1 32 356.4 45.22 362.9 64.82H362.9zM64 144C55.16 144 48 151.2 48 160V416C48 424.8 55.16 432 64 432H448C456.8 432 464 424.8 464 416V160C464 151.2 456.8 144 448 144H338.7L317.4 80H194.6L173.3 144H64z" })));
 }
 exports.default = CameraIcon;

package/icon/chevron-down-icon.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 function ChevronDownIcon(props) {
-    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props },
+    return (react_1.default.createElement("svg", { viewBox: "0 0 512 512", ...props },
         react_1.default.createElement("path", { fill: "currentColor", d: "M256 429.3l22.6-22.6 192-192L493.3 192 448 146.7l-22.6 22.6L256 338.7 86.6 169.4 64 146.7 18.7 192l22.6 22.6 192 192L256 429.3z" })));
 }
 exports.default = ChevronDownIcon;

package/icon/chevron-up-icon.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 function ChevronUpIcon(props) {
-    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props },
+    return (react_1.default.createElement("svg", { viewBox: "0 0 512 512", ...props },
         react_1.default.createElement("path", { fill: "currentColor", d: "M256 82.7l22.6 22.6 192 192L493.3 320 448 365.3l-22.6-22.6L256 173.3 86.6 342.6 64 365.3 18.7 320l22.6-22.6 192-192L256 82.7z" })));
 }
 exports.default = ChevronUpIcon;

package/icon/icon.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
 import { IconsSet } from "@uxf/ui/icon/theme";
+import React, { CSSProperties } from "react";
 export declare type IconName = keyof IconsSet;
 declare type NameOrComponentType = {
     name: IconName;
@@ -12,6 +12,7 @@ export declare type IconProps = {
     className?: string;
     mode?: "meet" | "slice";
     size?: number;
+    style?: Partial<CSSProperties>;
 } & NameOrComponentType;
 declare const _default: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
 export default _default;

package/icon/icon.js

@@ -4,22 +4,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const rem_1 = require("../utils/rem");
-const forwardRef_1 = require("../utils/forwardRef");
 const cx_1 = require("../utils/cx");
+const forward_ref_1 = require("../utils/forward-ref");
+const rem_1 = require("../utils/rem");
 function Icon(props, ref) {
-    var _a;
+    var _a, _b;
     const CustomComponent = props.Component;
-    const _className = (0, cx_1.cx)("uxf-icon", props.className);
-    const _preserveAspectRatio = `xMidYMid ${(_a = props.mode) !== null && _a !== void 0 ? _a : "meet"}`;
-    return CustomComponent ? (react_1.default.createElement(CustomComponent, { className: _className, preserveAspectRatio: _preserveAspectRatio, ref: ref, role: "img", style: props.size &&
-            {
-                "--i-h": (0, rem_1.rem)(props.size),
-                "--i-w": (0, rem_1.rem)(props.size),
-            } })) : (react_1.default.createElement("svg", { className: _className, preserveAspectRatio: _preserveAspectRatio, ref: ref, role: "img", style: {
+    const className = (0, cx_1.cx)("uxf-icon", props.className);
+    const preserveAspectRatio = `xMidYMid ${(_a = props.mode) !== null && _a !== void 0 ? _a : "meet"}`;
+    const style = props.size
+        ? {
             "--i-h": (0, rem_1.rem)(props.size),
             "--i-w": (0, rem_1.rem)(props.size),
-        } },
+            ...((_b = props.style) !== null && _b !== void 0 ? _b : {}),
+        }
+        : props.style;
+    return CustomComponent ? (react_1.default.createElement(CustomComponent, { className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style })) : (react_1.default.createElement("svg", { className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style },
         react_1.default.createElement("use", { xlinkHref: `/icons-generated/_icon-sprite.svg#icon-sprite--${props.name}` })));
 }
-exports.default = (0, forwardRef_1.forwardRef)("Icon", Icon);
+exports.default = (0, forward_ref_1.forwardRef)("Icon", Icon);

package/icon/pin-icon.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 function PinIcon(props) {
-    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 29.65 40", ...props },
+    return (react_1.default.createElement("svg", { viewBox: "0 0 29.65 40", ...props },
         react_1.default.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M0 14.83C0 6.61 6.61 0 14.83 0c8.11 0 14.83 6.61 14.83 14.83 0 8.64-8.85 19.41-14.83 25.17C8.75 34.24 0 23.47 0 14.83zm9.28 0c0-3.09 2.45-5.55 5.55-5.55 2.99 0 5.44 2.45 5.44 5.55 0 2.99-2.45 5.44-5.44 5.44-3.1 0-5.55-2.46-5.55-5.44z", clipRule: "evenodd" })));
 }
 exports.default = PinIcon;

package/image-gallery/components/icon-chevron-left.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 function IconChevronLeft() {
-    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-10 w-10 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 },
+    return (react_1.default.createElement("svg", { className: "h-10 w-10 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 },
         react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" })));
 }
 exports.default = IconChevronLeft;

package/image-gallery/components/icon-chevron-right.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 function IconChevronRight() {
-    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-10 w-10 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 },
+    return (react_1.default.createElement("svg", { className: "h-10 w-10 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 },
         react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })));
 }
 exports.default = IconChevronRight;

package/image-gallery/components/icon-close.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 function IconClose() {
-    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, className: "h-10 w-10 text-white" },
+    return (react_1.default.createElement("svg", { fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, className: "h-10 w-10 text-white" },
         react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })));
 }
 exports.default = IconClose;

package/input/input-element.d.ts

@@ -1,10 +1,11 @@
-import React from "react";
 import { FormControlProps } from "@uxf/ui/types/form-control-props";
+import React from "react";
 export interface InputElementProps extends FormControlProps<string> {
-    id?: string;
-    placeholder?: string;
     "aria-describedby"?: string;
     "aria-invalid"?: boolean;
+    form?: string;
+    id?: string;
+    placeholder?: string;
     type?: "email" | "number" | "password" | "tel" | "text" | "url";
 }
 declare const _default: React.ForwardRefExoticComponent<InputElementProps & React.RefAttributes<HTMLInputElement>>;

package/input/input-element.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const forwardRef_1 = require("@uxf/ui/utils/forwardRef");
+const forward_ref_1 = require("../utils/forward-ref");
 function InputElement(props, ref) {
-    return (react_1.default.createElement("input", { id: props.id, ref: ref, className: "uxf-input__element", value: props.value, onFocus: props.onFocus, onBlur: props.onBlur, onChange: (event) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, event.target.value, event); }, placeholder: props.placeholder, "aria-invalid": props.isInvalid, "aria-describedby": props["aria-describedby"], readOnly: props.isReadOnly, disabled: props.isDisabled, type: props.type }));
+    return (react_1.default.createElement("input", { "aria-describedby": props["aria-describedby"], "aria-invalid": props.isInvalid, className: "uxf-input__element", disabled: props.isDisabled, form: props.form, id: props.id, onBlur: props.onBlur, onChange: (event) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, event.target.value, event); }, onFocus: props.onFocus, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: ref, type: props.type, value: props.value }));
 }
-exports.default = (0, forwardRef_1.forwardRef)("InputElement", InputElement);
+exports.default = (0, forward_ref_1.forwardRef)("InputElement", InputElement);

package/label/label.d.ts

@@ -2,10 +2,10 @@ import React, { MouseEventHandler, ReactNode } from "react";
 export interface LabelProps {
     children?: ReactNode;
     className?: string;
-    htmlFor?: string;
     form?: string;
-    onClick?: MouseEventHandler<HTMLLabelElement>;
+    htmlFor?: string;
     isRequired?: boolean;
+    onClick?: MouseEventHandler<HTMLLabelElement>;
 }
 declare const _default: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
 export default _default;

package/label/label.js

@@ -3,11 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const forwardRef_1 = require("@uxf/ui/utils/forwardRef");
-const react_1 = __importDefault(require("react"));
+const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importDefault(require("react"));
+const forward_ref_1 = require("../utils/forward-ref");
 function Label(props, ref) {
-    const className = (0, cx_1.cx)("uxf-label", props.isRequired && "is-required", props.className);
+    const className = (0, cx_1.cx)("uxf-label", props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
     return (react_1.default.createElement("label", { className: className, ref: ref, htmlFor: props.htmlFor, form: props.form, onClick: props.onClick }, props.children));
 }
-exports.default = (0, forwardRef_1.forwardRef)("Label", Label);
+exports.default = (0, forward_ref_1.forwardRef)("Label", Label);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.41",
+  "version": "1.0.0-beta.43",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -15,12 +15,10 @@
   "dependencies": {
     "@floating-ui/react-dom": "^0.6.0",
     "@headlessui/react": "^1.6.6",
-    "@uxf/core": "^2.2.5",
-    "jump.js": "^1.0.2",
-    "ua-parser-js": "^1.0.2"
+    "@uxf/core": "^3.0.0",
+    "jump.js": "^1.0.2"
   },
   "devDependencies": {
-    "@types/jump.js": "^1.0.4",
-    "@types/ua-parser-js": "^0.7.36"
+    "@types/jump.js": "^1.0.4"
   }
 }

package/radio/radio.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importDefault(require("react"));
-const forwardRef_1 = require("../utils/forwardRef");
+const forward_ref_1 = require("../utils/forward-ref");
 function Radio(props, ref) {
     return (react_1.default.createElement("div", { ref: ref, className: (0, cx_1.cx)("uxf-radio", props.value && classes_1.CLASSES.IS_SELECTED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY), onClick: () => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, !props.value); } },
         react_1.default.createElement("div", { className: "uxf-radio__inner" })));
 }
-exports.default = (0, forwardRef_1.forwardRef)("Radio", Radio);
+exports.default = (0, forward_ref_1.forwardRef)("Radio", Radio);

package/radio-group/radio-group.js

@@ -23,23 +23,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const forwardRef_1 = require("../utils/forwardRef");
-const react_2 = require("@headlessui/react");
+const react_1 = require("@headlessui/react");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
-const label_1 = require("../label");
-const radio_1 = require("../radio");
+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 forward_ref_1 = require("../utils/forward-ref");
 function RadioGroup(props, ref) {
     // eslint-disable-next-line react/destructuring-assignment
     const { className, disabled, error, forceColumn, hiddenLabel, id, invalid, label, onBlur, onChange, onFocus, options, style, value, } = props;
-    const innerRef = (0, react_1.useRef)(null);
+    const innerRef = (0, react_2.useRef)(null);
     (0, use_input_submit_1.useInputSubmit)(innerRef, "radio-group", disabled);
     const errorId = invalid ? `${id}--errormessage` : undefined;
-    return (react_1.default.createElement(react_2.RadioGroup, { className: `_form-field ${className || ""}`, disabled: disabled, id: id, value: value, onChange: onChange, style: style },
-        !hiddenLabel && (react_1.default.createElement(react_2.RadioGroup.Label, { as: label_1.Label, className: "mb-2" }, label)),
-        react_1.default.createElement("div", { className: `flex ${forceColumn ? "flex-col" : "flex-wrap items-center"} focus-visible:ring-gray-dark outline-none focus-visible:ring-2`, onBlur: onBlur, onFocus: onFocus, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), tabIndex: disabled ? -1 : 0 }, options.map((option) => (react_1.default.createElement(react_2.RadioGroup.Option, { as: react_1.Fragment, disabled: option.disabled, key: option.value.toString(), value: option.value }, (o) => react_1.default.createElement(radio_1.Radio, { value: o.checked, isDisabled: disabled || o.disabled, isInvalid: invalid }))))),
-        invalid && error && react_1.default.createElement(error_message_1.ErrorMessage, { id: errorId }, error)));
+    return (react_2.default.createElement(react_1.RadioGroup, { className: `_form-field ${className || ""}`, disabled: disabled, id: id, value: value, onChange: onChange, style: style },
+        !hiddenLabel && (react_2.default.createElement(react_1.RadioGroup.Label, { as: label_1.Label, className: "uxf-radio-group__label" }, label)),
+        react_2.default.createElement("div", { className: `flex ${forceColumn ? "flex-col" : "flex-wrap items-center"} focus-visible:ring-gray-dark outline-none focus-visible:ring-2`, onBlur: onBlur, onFocus: onFocus, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), tabIndex: disabled ? -1 : 0 }, options.map((option) => (react_2.default.createElement(react_1.RadioGroup.Option, { as: react_2.Fragment, disabled: option.disabled, key: option.value.toString(), value: option.value }, (o) => react_2.default.createElement(radio_1.Radio, { value: o.checked, isDisabled: disabled || o.disabled, isInvalid: invalid }))))),
+        invalid && error && react_2.default.createElement(error_message_1.ErrorMessage, { id: errorId }, error)));
 }
-exports.default = (0, forwardRef_1.forwardRef)("RadioGroup", RadioGroup);
+exports.default = (0, forward_ref_1.forwardRef)("RadioGroup", RadioGroup);

package/select/select.d.ts

@@ -2,18 +2,18 @@ import React, { ReactNode } from "react";
 import { FormControlProps } from "../types";
 export declare type SelectValue = number | string;
 export declare type SelectOption<T = SelectValue> = {
+    disabled?: boolean;
     id: T;
     label: ReactNode;
-    disabled?: boolean;
 };
 export interface SelectProps<Value = SelectValue, Option = SelectOption<Value>> extends FormControlProps<Value | null> {
-    id?: string;
     className?: string;
     helperText?: ReactNode;
+    id?: string;
+    keyExtractor?: (option: Option) => string | number;
     label?: ReactNode;
-    placeholder?: ReactNode;
     options: Option[];
-    keyExtractor?: (option: Option) => string | number;
+    placeholder?: string;
     renderOption?: (option: Option) => ReactNode;
 }
 declare const _default: React.ForwardRefExoticComponent<SelectProps<SelectValue, SelectOption<SelectValue>> & React.RefAttributes<HTMLDivElement>>;

package/select/select.js

@@ -24,15 +24,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("@headlessui/react");
-const use_dropdown_1 = require("../hooks/use-dropdown");
 const classes_1 = require("@uxf/core/constants/classes");
 const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_2 = __importStar(require("react"));
-const label_1 = require("../label");
-const forwardRef_1 = require("@uxf/ui/utils/forwardRef");
+const use_dropdown_1 = require("../hooks/use-dropdown");
 const icon_1 = require("../icon");
+const label_1 = require("../label");
+const forward_ref_1 = require("../utils/forward-ref");
 function Select(props, ref) {
     var _a;
     const generatedId = (0, react_2.useId)();
@@ -43,15 +43,15 @@ function Select(props, ref) {
     const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const dropdown = (0, use_dropdown_1.useDropdown)("bottom", true);
     const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.reference), [ref, dropdown.reference]);
-    return (react_2.default.createElement(react_1.Listbox, { as: "div", className: (0, cx_1.cx)("uxf-select", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && "is-required", props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), onChange: (v) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.id); }, value: selectedOption, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
+    return (react_2.default.createElement(react_1.Listbox, { as: "div", className: (0, cx_1.cx)("uxf-select", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), onChange: (v) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.id); }, value: selectedOption, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
         react_2.default.createElement(react_1.Listbox.Label, { as: label_1.Label, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
         react_2.default.createElement(react_1.Listbox.Button, { as: "div", className: (0, cx_1.cx)("uxf-select__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
             react_2.default.createElement("div", { className: "uxf-select__button-text" }, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || props.placeholder),
             renderProps.open ? (react_2.default.createElement(icon_1.Icon, { Component: icon_1.ChevronUpIcon, size: 12 })) : (react_2.default.createElement(icon_1.Icon, { Component: icon_1.ChevronDownIcon, size: 12 }))),
-        props.helperText && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID) }, props.helperText)),
+        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)),
         react_2.default.createElement(react_1.Listbox.Options, { ref: dropdown.floating, style: dropdown.style, className: "uxf-dropdown" }, props.options.map((option) => {
             var _a, _b, _c, _d;
             return (react_2.default.createElement(react_1.Listbox.Option, { key: (_b = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.id, value: option, className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED) }, (_d = (_c = props.renderOption) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.label));
         }))))));
 }
-exports.default = (0, forwardRef_1.forwardRef)("Select", Select);
+exports.default = (0, forward_ref_1.forwardRef)("Select", Select);

package/text-input/text-input.d.ts

@@ -1,5 +1,5 @@
 import { FormControlProps } from "@uxf/ui/types";
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { InputProps } from "@uxf/ui/input/input";
 declare type EnterKeyHint = "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
 declare type InputMode = "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
@@ -8,16 +8,16 @@ export interface TextInputProps extends FormControlProps<string>, Pick<InputProp
     className?: string;
     enterKeyHint?: EnterKeyHint;
     form?: string;
+    helperText?: ReactNode;
     id?: string;
     inputMode?: InputMode;
     label?: ReactNode;
-    helperText?: ReactNode;
-    placeholder?: string;
-    leftElement?: ReactNode;
-    rightElement?: ReactNode;
     leftAddon?: ReactNode;
+    leftElement?: ReactNode;
+    placeholder?: string;
     rightAddon?: ReactNode;
+    rightElement?: ReactNode;
     type?: "email" | "number" | "password" | "tel" | "text" | "url";
 }
-export declare function TextInput(props: TextInputProps): JSX.Element;
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/text-input/text-input.js

@@ -29,13 +29,14 @@ const react_1 = __importStar(require("react"));
 const cx_1 = require("@uxf/core/utils/cx");
 const form_control_1 = require("../form-control");
 const classes_1 = require("@uxf/core/constants/classes");
-function TextInput(props) {
+const forward_ref_1 = require("../utils/forward-ref");
+exports.TextInput = (0, forward_ref_1.forwardRef)("TextInput", (props, ref) => {
     var _a;
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const generatedId = (0, react_1.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const errorId = props.isInvalid ? `${id}--error-message` : undefined;
-    const rootClassName = (0, cx_1.cx)("uxf-text-input", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isRequired && "is-required", isFocused && classes_1.CLASSES.IS_FOCUSED);
+    const rootClassName = (0, cx_1.cx)("uxf-text-input", isFocused && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED);
     const onFocus = (e) => {
         var _a;
         setIsFocused(true);
@@ -46,12 +47,11 @@ function TextInput(props) {
         setIsFocused(false);
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     };
-    return (react_1.default.createElement(form_control_1.FormControl, { inputId: id, errorId: errorId, className: rootClassName, isRequired: props.isRequired, helperText: props.helperText, label: props.label, form: props.form },
+    return (react_1.default.createElement(form_control_1.FormControl, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label },
         react_1.default.createElement(input_1.Input, { size: props.size, variant: props.variant },
             props.leftAddon && react_1.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
             props.leftElement && react_1.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
-            react_1.default.createElement(input_1.Input.Element, { id: id, name: props.name, value: props.value, onChange: props.onChange, onFocus: onFocus, onBlur: onBlur, isInvalid: props.isInvalid, isRequired: props.isRequired, isReadOnly: props.isReadOnly, isDisabled: props.isDisabled, placeholder: props.placeholder, "aria-describedby": errorId, type: props.type }),
+            react_1.default.createElement(input_1.Input.Element, { "aria-describedby": errorId, form: props.form, id: id, isDisabled: props.isDisabled, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onBlur: onBlur, onChange: props.onChange, onFocus: onFocus, placeholder: props.placeholder, ref: ref, type: props.type, value: props.value }),
             props.rightElement && react_1.default.createElement(input_1.Input.RightElement, null, props.rightElement),
             props.rightAddon && react_1.default.createElement(input_1.Input.RightAddon, null, props.rightAddon))));
-}
-exports.TextInput = TextInput;
+});

package/text-input/text-input.stories.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-import { TextInput } from "@uxf/ui/text-input";
+import React from "react";
 declare const _default: {
     title: string;
-    component: typeof TextInput;
+    component: React.ForwardRefExoticComponent<import("@uxf/ui/text-input").TextInputProps & React.RefAttributes<HTMLInputElement>>;
 };
 export default _default;
 export declare function Full(): JSX.Element;

package/textarea/textarea.d.ts

@@ -1,26 +1,18 @@
-import React, { ChangeEventHandler, CSSProperties, FocusEventHandler } from "react";
-export interface TextareaProps {
+import React, { ReactNode } from "react";
+import { FormControlProps } from "../types";
+export interface TextareaProps extends FormControlProps<string, HTMLTextAreaElement> {
     autoComplete?: string;
     className?: string;
-    disabled?: boolean;
     disableAutoHeight?: boolean;
-    error?: string;
     form?: string;
-    id: string;
-    invalid?: boolean;
-    label: string;
+    helperText?: ReactNode;
+    id?: string;
+    label?: ReactNode;
     maxLength?: number | undefined;
     minLength?: number | undefined;
     name?: string;
-    onBlur?: FocusEventHandler<HTMLTextAreaElement>;
-    onChange: ChangeEventHandler<HTMLTextAreaElement>;
-    onFocus?: FocusEventHandler<HTMLTextAreaElement>;
     placeholder?: string;
-    readOnly?: boolean;
-    required?: boolean;
     rows?: number;
-    style?: CSSProperties;
-    value?: string | null;
 }
 declare const _default: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default _default;

package/textarea/textarea.js

@@ -23,16 +23,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const forwardRef_1 = require("../utils/forwardRef");
-const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
-const label_1 = require("../label");
-const cx_1 = require("@uxf/core/utils/cx");
-const error_message_1 = require("../error-message");
-const use_fix_android_on_focus_1 = require("../hooks/use-fix-android-on-focus");
-const use_latest_1 = require("../hooks/use-latest");
 const classes_1 = require("@uxf/core/constants/classes");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importStar(require("react"));
+const form_control_1 = require("../form-control");
+const use_latest_1 = require("../hooks/use-latest");
+const forward_ref_1 = require("../utils/forward-ref");
 function autoHeightHandler(element, rows = 4) {
     element.style.height = "auto";
     if (rows > 1) {
@@ -45,16 +42,27 @@ function autoHeightHandler(element, rows = 4) {
 }
 const EVENTS = ["input", "cut", "paste", "drop"];
 function Textarea(props, ref) {
-    // eslint-disable-next-line react/destructuring-assignment
-    const { autoComplete, className, disabled, disableAutoHeight, error, form, id, invalid, label, maxLength, minLength, name, onBlur, onChange, onFocus, placeholder, readOnly, required, rows, style, value, } = props;
+    var _a;
     const innerRef = (0, react_1.useRef)(null);
-    const input = (0, useInputFocus_1.useInputFocus)(innerRef, onBlur, onFocus);
-    const fixedOnFocus = (0, use_fix_android_on_focus_1.useFixAndroidOnFocus)(input.onFocus);
-    const errorId = invalid && id ? `${id}--errormessage` : undefined;
-    const latestRows = (0, use_latest_1.useLatest)(rows);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const generatedId = (0, react_1.useId)();
+    const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
+    const errorId = props.isInvalid ? `${id}--error-message` : undefined;
+    const rootClassName = (0, cx_1.cx)("uxf-textarea", isFocused && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED);
+    const onFocus = (e) => {
+        var _a;
+        setIsFocused(true);
+        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
+    const onBlur = (e) => {
+        var _a;
+        setIsFocused(false);
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
+    const latestRows = (0, use_latest_1.useLatest)(props.rows);
     (0, react_1.useEffect)(() => {
         const node = innerRef.current;
-        if (!node || disableAutoHeight) {
+        if (!node || props.disableAutoHeight) {
             return;
         }
         const handler = () => autoHeightHandler(node, latestRows.current);
@@ -65,11 +73,9 @@ function Textarea(props, ref) {
             EVENTS.map((e) => node.removeEventListener(e, handler));
             window.removeEventListener("resize", handler);
         };
-    }, [disableAutoHeight, latestRows]);
-    return (react_1.default.createElement("div", { className: `uxf-textarea-wrapper ${className || ""}`, style: style },
-        react_1.default.createElement(label_1.Label, { htmlFor: id }, label),
-        react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-textarea-nextwrapper h-auto", input.focused && classes_1.CLASSES.IS_FOCUSED, disabled && classes_1.CLASSES.IS_DISABLED, readOnly && classes_1.CLASSES.IS_READONLY, invalid && classes_1.CLASSES.IS_INVALID), onClick: !disabled ? input.focus : undefined },
-            react_1.default.createElement("textarea", { "aria-describedby": errorId, "aria-invalid": invalid, autoComplete: autoComplete, className: "uxf-textarea-textarea", disabled: disabled, form: form, id: id, maxLength: maxLength, minLength: minLength, name: name, onBlur: input.onBlur, onChange: onChange, onFocus: fixedOnFocus, placeholder: placeholder, readOnly: readOnly, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), required: required, value: value !== null && value !== void 0 ? value : undefined })),
-        invalid && error && react_1.default.createElement(error_message_1.ErrorMessage, { id: errorId }, error)));
+    }, [props.disableAutoHeight, latestRows]);
+    return (react_1.default.createElement(form_control_1.FormControl, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label },
+        react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-textarea__wrapper", isFocused && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY), onClick: () => { var _a; return (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } },
+            react_1.default.createElement("textarea", { "aria-describedby": errorId, "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, className: "uxf-textarea__element", disabled: props.isDisabled, form: props.form, id: id, maxLength: props.maxLength, minLength: props.minLength, name: props.name, onBlur: onBlur, onChange: (event) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, event.target.value, event); }, onFocus: onFocus, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), required: props.isRequired, value: props.value }))));
 }
-exports.default = (0, forwardRef_1.forwardRef)("Textarea", Textarea);
+exports.default = (0, forward_ref_1.forwardRef)("Textarea", Textarea);

package/textarea/textarea.stories.js

@@ -16,11 +16,11 @@ function Default() {
                 // eslint-disable-next-line no-console
                 console.log("textarea onChange");
             }, placeholder: "Placeholder text...." }),
-        react_1.default.createElement(index_1.Textarea, { id: "textarea-readonly", label: "Readonly", readOnly: true, onChange: () => {
+        react_1.default.createElement(index_1.Textarea, { id: "textarea-readonly", label: "Readonly", isReadOnly: true, onChange: () => {
                 // eslint-disable-next-line no-console
                 console.log("textarea OnChange");
             } }),
-        react_1.default.createElement(index_1.Textarea, { disabled: true, id: "textarea-disabled", label: "Textarea disabled", onChange: () => {
+        react_1.default.createElement(index_1.Textarea, { isDisabled: true, id: "textarea-disabled", label: "Textarea disabled", onChange: () => {
                 // eslint-disable-next-line no-console
                 console.log("textarea OnChange");
             } }),

package/utils/sr-only-mixin.d.ts

@@ -0,0 +1,2 @@
+import { CSSProperties } from "react";
+export declare const srOnlyMixin: Partial<CSSProperties>;

package/utils/sr-only-mixin.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.srOnlyMixin = void 0;
+exports.srOnlyMixin = {
+    borderWidth: "0",
+    clip: "rect(0, 0, 0, 0)",
+    height: "1px",
+    margin: "-1px",
+    overflow: "hidden",
+    padding: "0",
+    position: "absolute",
+    whiteSpace: "nowrap",
+    width: "1px",
+};

package/hooks/use-fix-android-on-focus.d.ts

@@ -1,2 +0,0 @@
-import { FocusEventHandler } from "react";
-export declare function useFixAndroidOnFocus<T extends HTMLElement>(onFocus?: FocusEventHandler<T>): FocusEventHandler<T>;

package/hooks/use-fix-android-on-focus.js

@@ -1,31 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFixAndroidOnFocus = void 0;
-const jump_js_1 = __importDefault(require("jump.js"));
-const react_1 = require("react");
-const ua_parser_js_1 = __importDefault(require("ua-parser-js"));
-function useFixAndroidOnFocus(onFocus) {
-    return (0, react_1.useCallback)((e) => {
-        const ua = typeof navigator !== "undefined" && navigator.userAgent;
-        if (ua && window.visualViewport) {
-            const uaParser = new ua_parser_js_1.default(ua);
-            if (uaParser.getOS().name === "Android" && uaParser.getEngine().name === "Blink") {
-                const target = e.target;
-                const rect = target.getBoundingClientRect();
-                if (rect.top < 60 || window.visualViewport.height - rect.bottom < 140) {
-                    (0, jump_js_1.default)(rect.y, {
-                        duration: 0,
-                        offset: -60,
-                    });
-                }
-            }
-        }
-        if (onFocus) {
-            onFocus(e);
-        }
-    }, [onFocus]);
-}
-exports.useFixAndroidOnFocus = useFixAndroidOnFocus;