@uxf/ui 1.0.0-beta.98 → 1.0.1

package/input/index.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
-import { InputLeftAddon } from "./input-left-addon";
-import { InputLeftElement } from "./input-left-element";
-import { InputRightAddon } from "./input-right-addon";
-import { InputRightElement } from "./input-right-element";
+export type { InputProps } from "./input";
+export type { InputElementProps } from "./input-element";
+export type { InputRemoveButtonProps } from "./input-remove-button";
+export type { InputGroupSize, InputGroupVariant } from "./theme";
 export declare const Input: import("react").ForwardRefExoticComponent<import("./input").InputProps & import("react").RefAttributes<HTMLInputElement>> & {
     Element: import("react").ForwardRefExoticComponent<import("./input-element").InputElementProps & import("react").RefAttributes<HTMLInputElement>>;
-    LeftElement: typeof InputLeftElement;
-    RightElement: typeof InputRightElement;
-    LeftAddon: typeof InputLeftAddon;
-    RightAddon: typeof InputRightAddon;
+    LeftAddon: import("react").FC<import("./input-left-addon").InputLeftAddonProps>;
+    LeftElement: import("react").FC<import("./input-left-element").InputLeftElementProps>;
+    RemoveButton: import("react").FC<import("./input-remove-button").InputRemoveButtonProps>;
+    RightAddon: import("react").FC<import("./input-right-addon").InputRightAddonProps>;
+    RightElement: import("react").FC<import("./input-right-element").InputRightElementProps>;
 };

package/input/index.js

@@ -5,12 +5,14 @@ const input_1 = require("./input");
 const input_element_1 = require("./input-element");
 const input_left_addon_1 = require("./input-left-addon");
 const input_left_element_1 = require("./input-left-element");
+const input_remove_button_1 = require("./input-remove-button");
 const input_right_addon_1 = require("./input-right-addon");
 const input_right_element_1 = require("./input-right-element");
 exports.Input = Object.assign(input_1.Input, {
     Element: input_element_1.InputElement,
-    LeftElement: input_left_element_1.InputLeftElement,
-    RightElement: input_right_element_1.InputRightElement,
     LeftAddon: input_left_addon_1.InputLeftAddon,
+    LeftElement: input_left_element_1.InputLeftElement,
+    RemoveButton: input_remove_button_1.InputRemoveButton,
     RightAddon: input_right_addon_1.InputRightAddon,
+    RightElement: input_right_element_1.InputRightElement,
 });

package/input/input-element.d.ts

@@ -1,9 +1,10 @@
 import { FormControlProps } from "@uxf/ui/types/form-control-props";
 import React, { KeyboardEventHandler } from "react";
-declare type InputMode = "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+type InputMode = "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
 export interface InputElementProps extends FormControlProps<string> {
     "aria-describedby"?: string;
     "aria-invalid"?: boolean;
+    autoComplete?: string | undefined;
     form?: string;
     id?: string;
     inputMode?: InputMode;

package/input/input-element.js

@@ -1,11 +1,33 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputElement = void 0;
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
-const react_1 = __importDefault(require("react"));
-exports.InputElement = (0, forwardRef_1.forwardRef)("InputElement", (props, ref) => {
-    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, inputMode: props.inputMode, max: props.max, maxLength: props.maxLength, min: props.min, minLength: props.minLength, 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, onKeyDown: props.onKeyDown, pattern: props.pattern, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: ref, step: props.step, tabIndex: props.isReadOnly ? -1 : undefined, type: props.type, value: props.value }));
+const react_1 = __importStar(require("react"));
+exports.InputElement = (0, react_1.forwardRef)((props, ref) => {
+    const onChange = (event) => props.onChange(event.target.value, event);
+    const filteredProps = Object.fromEntries(Object.entries(props).filter((p) => p[0].startsWith("aria-") || p[0].startsWith("data-")));
+    return (react_1.default.createElement("input", { ...filteredProps, "aria-describedby": props["aria-describedby"], "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, className: "uxf-input__element", disabled: props.isDisabled, form: props.form, id: props.id, inputMode: props.inputMode, max: props.max, maxLength: props.maxLength, min: props.min, minLength: props.minLength, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: props.onKeyDown, pattern: props.pattern, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: ref, step: props.step, tabIndex: props.isReadOnly ? -1 : undefined, type: props.type, value: props.value }));
 });
+exports.InputElement.displayName = "UxfUiInputElement";

package/input/input-left-addon.d.ts

@@ -1,9 +1,5 @@
-import { ReactNode } from "react";
-interface InputLeftAddonProps {
+import { FC, ReactNode } from "react";
+export interface InputLeftAddonProps {
     children: ReactNode;
 }
-export declare function InputLeftAddon(props: InputLeftAddonProps): JSX.Element;
-export declare namespace InputLeftAddon {
-    var displayName: string;
-}
-export {};
+export declare const InputLeftAddon: FC<InputLeftAddonProps>;

package/input/input-left-addon.js

@@ -4,9 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputLeftAddon = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importDefault(require("react"));
-function InputLeftAddon(props) {
-    return react_1.default.createElement("div", { className: "uxf-input__left-addon" }, props.children);
-}
+const InputLeftAddon = (props) => {
+    const isText = typeof props.children === "string";
+    return react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-input__left-addon", isText && "uxf-input__left-addon--text") }, props.children);
+};
 exports.InputLeftAddon = InputLeftAddon;
-InputLeftAddon.displayName = "InputLeftAddon";
+exports.InputLeftAddon.displayName = "UxfUiInputLeftAddon";

package/input/input-left-element.d.ts

@@ -1,9 +1,5 @@
-import { ReactNode } from "react";
-interface InputLeftElementProps {
+import { FC, ReactNode } from "react";
+export interface InputLeftElementProps {
     children?: ReactNode;
 }
-export declare function InputLeftElement(props: InputLeftElementProps): JSX.Element;
-export declare namespace InputLeftElement {
-    var displayName: string;
-}
-export {};
+export declare const InputLeftElement: FC<InputLeftElementProps>;

package/input/input-left-element.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputLeftElement = void 0;
 const react_1 = __importDefault(require("react"));
-function InputLeftElement(props) {
+const InputLeftElement = (props) => {
     return react_1.default.createElement("div", { className: "uxf-input__left-element" }, props.children);
-}
+};
 exports.InputLeftElement = InputLeftElement;
-InputLeftElement.displayName = "InputLeftElement";
+exports.InputLeftElement.displayName = "UxfUiInputLeftElement";

package/input/input-remove-button.d.ts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+export interface InputRemoveButtonProps {
+    onChange?: (value: any) => void;
+}
+export declare const InputRemoveButton: FC<InputRemoveButtonProps>;

package/input/input-remove-button.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputRemoveButton = void 0;
+const icon_1 = require("@uxf/ui/icon");
+const react_1 = __importDefault(require("react"));
+const InputRemoveButton = (props) => {
+    const onRemoveClick = (e) => {
+        var _a;
+        e.preventDefault();
+        e.stopPropagation();
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, null);
+    };
+    const onRemoveKeyDown = (e) => {
+        var _a;
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, null);
+        }
+    };
+    return (react_1.default.createElement("button", { className: "uxf-input__remove-button", onClick: onRemoveClick, onKeyDown: onRemoveKeyDown, type: "button" },
+        react_1.default.createElement("span", { className: "uxf-input__remove-button-inner" },
+            react_1.default.createElement(icon_1.Icon, { className: "uxf-input__remove-button-icon", name: "xmarkLarge" }))));
+};
+exports.InputRemoveButton = InputRemoveButton;
+exports.InputRemoveButton.displayName = "UxfUiInputRemoveButton";

package/input/input-right-addon.d.ts

@@ -1,8 +1,5 @@
-import { ReactNode } from "react";
+import { FC, ReactNode } from "react";
 export interface InputRightAddonProps {
     children: ReactNode;
 }
-export declare function InputRightAddon(props: InputRightAddonProps): JSX.Element;
-export declare namespace InputRightAddon {
-    var displayName: string;
-}
+export declare const InputRightAddon: FC<InputRightAddonProps>;

package/input/input-right-addon.js

@@ -4,9 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputRightAddon = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importDefault(require("react"));
-function InputRightAddon(props) {
-    return react_1.default.createElement("div", { className: "uxf-input__right-addon" }, props.children);
-}
+const InputRightAddon = (props) => {
+    const isText = typeof props.children === "string";
+    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-input__right-addon", isText && "uxf-input__right-addon--text") }, props.children));
+};
 exports.InputRightAddon = InputRightAddon;
-InputRightAddon.displayName = "InputRightAddon";
+exports.InputRightAddon.displayName = "UxfUiInputRightAddon";

package/input/input-right-element.d.ts

@@ -1,9 +1,5 @@
-import { ReactNode } from "react";
-interface InputRightElementProps {
+import { FC, ReactNode } from "react";
+export interface InputRightElementProps {
     children?: ReactNode;
 }
-export declare function InputRightElement(props: InputRightElementProps): JSX.Element;
-export declare namespace InputRightElement {
-    var displayName: string;
-}
-export {};
+export declare const InputRightElement: FC<InputRightElementProps>;

package/input/input-right-element.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputRightElement = void 0;
 const react_1 = __importDefault(require("react"));
-function InputRightElement(props) {
+const InputRightElement = (props) => {
     return react_1.default.createElement("div", { className: "uxf-input__right-element" }, props.children);
-}
+};
 exports.InputRightElement = InputRightElement;
-InputRightElement.displayName = "InputRightElement";
+exports.InputRightElement.displayName = "UxfUiInputRightElement";

package/input/input.d.ts

@@ -1,8 +1,18 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, Ref } from "react";
 import { InputGroupSizes, InputGroupVariants } from "@uxf/ui/input/theme";
+import { useInputFocus } from "@uxf/core/hooks/useInputFocus";
 export interface InputProps {
     children: ReactNode;
+    customInputElementDisplayName?: string;
+    className?: string;
+    inputFocus?: ReturnType<typeof useInputFocus>;
     variant?: keyof InputGroupVariants;
     size?: keyof InputGroupSizes;
+    isDisabled?: boolean;
+    isFocused?: boolean;
+    isInvalid?: boolean;
+    isReadOnly?: boolean;
+    wrapperRef?: Ref<HTMLDivElement> | undefined;
+    tabIndex?: number;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/input/input.js

@@ -25,41 +25,41 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const react_1 = __importStar(require("react"));
 const cx_1 = require("@uxf/core/utils/cx");
 const classes_1 = require("@uxf/core/constants/classes");
+const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
+const isApplicable = (...args) => {
+    return args.some((i) => !!i);
+};
 function getChildrenById(children, componentName) {
     return react_1.Children.toArray(children)
         .filter(react_1.isValidElement)
         .find((ch) => ch.type.displayName === componentName);
 }
-exports.Input = (0, forwardRef_1.forwardRef)("Input", (props, ref) => {
+exports.Input = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
-    const inputWrapperRef = (0, react_1.useRef)(null);
     const inputRef = (0, react_1.useRef)(null);
-    const [focused, setFocused] = (0, react_1.useState)(false);
-    const mainInput = getChildrenById(props.children, "InputElement");
-    const leftAddon = getChildrenById(props.children, "InputLeftAddon");
-    const rightAddon = getChildrenById(props.children, "InputRightAddon");
-    const leftElement = getChildrenById(props.children, "InputLeftElement");
-    const rightElement = getChildrenById(props.children, "InputRightElement");
-    const inputGroupClasses = (0, cx_1.cx)("uxf-input", leftAddon && "uxf-input--has-left-addon", leftElement && "uxf-input--has-left-element", rightElement && "uxf-input--has-right-element", rightAddon && "uxf-input--has-right-addon", focused && classes_1.CLASSES.IS_FOCUSED, (mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isInvalid) && classes_1.CLASSES.IS_INVALID, (mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isDisabled) && classes_1.CLASSES.IS_DISABLED, (mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isReadOnly) && classes_1.CLASSES.IS_READONLY, `uxf-input--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-input--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`);
-    const onFocus = (e) => {
-        var _a, _b;
-        setFocused(true);
-        (_b = mainInput === null || mainInput === void 0 ? void 0 : (_a = mainInput.props).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-    };
-    const onBlur = (e) => {
-        var _a, _b;
-        setFocused(false);
-        (_b = mainInput === null || mainInput === void 0 ? void 0 : (_a = mainInput.props).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-    };
-    return (react_1.default.createElement("div", { className: inputGroupClasses },
+    const { children, className, customInputElementDisplayName, inputFocus, isDisabled, isFocused, isInvalid, isReadOnly, variant, size, wrapperRef, tabIndex, ...restProps } = props;
+    const mainInput = getChildrenById(children, customInputElementDisplayName !== null && customInputElementDisplayName !== void 0 ? customInputElementDisplayName : "UxfUiInputElement");
+    const leftAddon = getChildrenById(children, "UxfUiInputLeftAddon");
+    const rightAddon = getChildrenById(children, "UxfUiInputRightAddon");
+    const leftElement = getChildrenById(children, "UxfUiInputLeftElement");
+    const rightElement = getChildrenById(children, "UxfUiInputRightElement");
+    const input = (0, useInputFocus_1.useInputFocus)(inputRef, (_a = inputFocus === null || inputFocus === void 0 ? void 0 : inputFocus.onBlur) !== null && _a !== void 0 ? _a : mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.onBlur, (_b = inputFocus === null || inputFocus === void 0 ? void 0 : inputFocus.onFocus) !== null && _b !== void 0 ? _b : mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.onFocus);
+    const inputGroupClasses = (0, cx_1.cx)("uxf-input", leftAddon && "uxf-input--has-left-addon", leftElement && "uxf-input--has-left-element", rightElement && "uxf-input--has-right-element", rightAddon && "uxf-input--has-right-addon", isApplicable(isFocused, mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isFocused, inputFocus === null || inputFocus === void 0 ? void 0 : inputFocus.focused, input.focused) && classes_1.CLASSES.IS_FOCUSED, isApplicable(isInvalid, mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isInvalid) && classes_1.CLASSES.IS_INVALID, isApplicable(isDisabled, mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isDisabled) && classes_1.CLASSES.IS_DISABLED, isApplicable(isReadOnly, mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isReadOnly) && classes_1.CLASSES.IS_READONLY, `uxf-input--size-${size !== null && size !== void 0 ? size : "default"}`, `uxf-input--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, className);
+    return (react_1.default.createElement("div", { className: inputGroupClasses, ref: wrapperRef, tabIndex: tabIndex },
         leftAddon,
-        react_1.default.createElement("div", { className: "uxf-input__wrapper", ref: inputWrapperRef, onClick: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } },
+        react_1.default.createElement("div", { className: "uxf-input__wrapper", onClick: input.focus, ...restProps },
             leftElement,
-            mainInput ? (0, react_1.cloneElement)(mainInput, { ref: (0, composeRefs_1.composeRefs)(ref, inputRef), onFocus, onBlur }) : null,
+            mainInput
+                ? (0, react_1.cloneElement)(mainInput, {
+                    onBlur: input.onBlur,
+                    onFocus: input.onFocus,
+                    ref: (0, composeRefs_1.composeRefs)(ref, inputRef),
+                })
+                : null,
             rightElement),
         rightAddon));
 });
+exports.Input.displayName = "UxfUiInput";

package/input/input.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/input/input.spec.js

@@ -0,0 +1,10 @@
+"use strict";
+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 snap_test_1 = require("../utils/snap-test");
+const input_stories_1 = require("./input.stories");
+(0, snap_test_1.snapTest)("render default stories", react_1.default.createElement(input_stories_1.Default, null));
+(0, snap_test_1.snapTest)("render sizes stories", react_1.default.createElement(input_stories_1.Sizes, null));

package/input/input.stories.d.ts

@@ -1,15 +1,16 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./input").InputProps & React.RefAttributes<HTMLInputElement>> & {
-        Element: React.ForwardRefExoticComponent<import("./input-element").InputElementProps & React.RefAttributes<HTMLInputElement>>;
-        LeftElement: typeof import("./input-left-element").InputLeftElement;
-        RightElement: typeof import("./input-right-element").InputRightElement;
-        LeftAddon: typeof import("./input-left-addon").InputLeftAddon;
-        RightAddon: typeof import("./input-right-addon").InputRightAddon;
+    component: React.ForwardRefExoticComponent<import("@uxf/ui/input").InputProps & React.RefAttributes<HTMLInputElement>> & {
+        Element: React.ForwardRefExoticComponent<import("@uxf/ui/input").InputElementProps & React.RefAttributes<HTMLInputElement>>;
+        LeftAddon: React.FC<import("./input-left-addon").InputLeftAddonProps>;
+        LeftElement: React.FC<import("./input-left-element").InputLeftElementProps>;
+        RemoveButton: React.FC<import("@uxf/ui/input").InputRemoveButtonProps>;
+        RightAddon: React.FC<import("./input-right-addon").InputRightAddonProps>;
+        RightElement: React.FC<import("./input-right-element").InputRightElementProps>;
     };
 };
 export default _default;
-export declare function Default(): JSX.Element;
-export declare function Sizes(): JSX.Element;
-export declare function ComponentStructure(): JSX.Element;
+export declare function Default(): React.JSX.Element;
+export declare function Sizes(): React.JSX.Element;
+export declare function ComponentStructure(): React.JSX.Element;

package/input/input.stories.js

@@ -37,34 +37,36 @@ exports.default = {
     component: input_1.Input,
 };
 function Default() {
-    const [value, onChange] = (0, react_1.useState)("");
+    const [value, setValue] = (0, react_1.useState)("");
     const [isInvalid, setInvalid] = (0, react_1.useState)(false);
+    const onChange = (0, action_1.action)("onChange", setValue);
     const storyInputs = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(input_1.Input, null,
             react_1.default.createElement(input_1.Input.LeftAddon, null, "InputLeftAddon"),
             react_1.default.createElement(input_1.Input.LeftElement, null, "InputLeftElement"),
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: (0, action_1.action)("onChange", onChange), placeholder: "Placeholder", isInvalid: isInvalid }),
+            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid }),
             react_1.default.createElement(input_1.Input.RightElement, null, "InputRightElement"),
             react_1.default.createElement(input_1.Input.RightAddon, null, "InputRightAddon")),
         react_1.default.createElement(input_1.Input, null,
             react_1.default.createElement(input_1.Input.LeftAddon, null, "https://"),
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: (0, action_1.action)("onChange", onChange), placeholder: "Placeholder", isInvalid: isInvalid }),
+            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid }),
             react_1.default.createElement(input_1.Input.RightAddon, null, ".uxf.cz")),
         react_1.default.createElement(input_1.Input, null,
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: (0, action_1.action)("onChange", onChange), placeholder: "Placeholder", isInvalid: isInvalid }),
+            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid }),
             react_1.default.createElement(input_1.Input.RightAddon, null, ".test.cz")),
         react_1.default.createElement(input_1.Input, null,
             react_1.default.createElement(input_1.Input.LeftElement, null, "\uD83C\uDF37"),
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: (0, action_1.action)("onChange", onChange), placeholder: "Placeholder", isInvalid: isInvalid }),
+            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid }),
             react_1.default.createElement(input_1.Input.RightElement, null, "\uD83D\uDD14")),
         react_1.default.createElement(input_1.Input, null,
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: (0, action_1.action)("onChange", onChange), placeholder: "Placeholder", isInvalid: isInvalid })),
+            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid })),
         react_1.default.createElement(input_1.Input, null,
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: (0, action_1.action)("onChange", onChange), placeholder: "Disabled", isInvalid: isInvalid, isDisabled: true })),
+            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Disabled", isInvalid: isInvalid, isDisabled: true })),
         react_1.default.createElement(input_1.Input, null,
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: (0, action_1.action)("onChange", onChange), placeholder: "Read Only", isInvalid: isInvalid, isReadOnly: true }))));
+            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Read Only", isInvalid: isInvalid, isReadOnly: true }))));
+    const onInvalidChange = (e) => setInvalid(e.target.checked);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("input", { type: "checkbox", checked: isInvalid, onChange: (e) => setInvalid(e.target.checked) }),
+        react_1.default.createElement("input", { type: "checkbox", checked: isInvalid, onChange: onInvalidChange }),
         react_1.default.createElement("div", { className: "light space-y-2 p-20" }, storyInputs),
         react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20" }, storyInputs)));
 }
@@ -72,10 +74,11 @@ exports.Default = Default;
 function Sizes() {
     const config = (0, storybook_config_1.useStorybookConfig)("Input");
     const [value, setValue] = (0, react_1.useState)("");
+    const onChange = (0, action_1.action)("onChange", setValue);
     return (react_1.default.createElement("div", { className: "space-y-4" }, config.sizes.map((size) => (react_1.default.createElement(input_1.Input, { key: size, size: size },
         react_1.default.createElement(input_1.Input.LeftAddon, null, "LeftAddon"),
         react_1.default.createElement(input_1.Input.LeftElement, null, "\uD83C\uDF37"),
-        react_1.default.createElement(input_1.Input.Element, { value: value, onChange: (0, action_1.action)("onChange", setValue), placeholder: size }),
+        react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: size }),
         react_1.default.createElement(input_1.Input.RightElement, null, "\uD83D\uDD14"),
         react_1.default.createElement(input_1.Input.RightAddon, null, "RightAddon"))))));
 }

package/input/theme.d.ts

@@ -1,8 +1,10 @@
 export interface InputGroupVariants {
     default: true;
 }
+export type InputGroupVariant = keyof InputGroupVariants;
 export interface InputGroupSizes {
     small: true;
     default: true;
     large: true;
 }
+export type InputGroupSize = keyof InputGroupSizes;

package/label/index.d.ts

@@ -1 +1,2 @@
-export * from "./label";
+export type { LabelProps } from "./label";
+export { Label } from "./label";

package/label/index.js

@@ -1,17 +1,5 @@
 "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 });
-__exportStar(require("./label"), exports);
+exports.Label = void 0;
+var label_1 = require("./label");
+Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return label_1.Label; } });

package/label/label.js

@@ -1,14 +1,36 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Label = void 0;
 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_1 = __importDefault(require("react"));
-exports.Label = (0, forwardRef_1.forwardRef)("Label", (props, ref) => {
+const react_1 = __importStar(require("react"));
+exports.Label = (0, react_1.forwardRef)((props, ref) => {
     const className = (0, cx_1.cx)("uxf-label", props.isHidden && "uxf-label--hidden", props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
-    return (react_1.default.createElement("label", { className: className, form: props.form, htmlFor: props.htmlFor, id: props.id, onClick: props.onClick, ref: ref }, props.children));
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
+    react_1.default.createElement("label", { className: className, form: props.form, htmlFor: props.htmlFor, id: props.id, onClick: props.onClick, ref: ref }, props.children));
 });
+exports.Label.displayName = "UxfUiLabel";

package/label/label.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/label/label.spec.js

@@ -0,0 +1,9 @@
+"use strict";
+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 snap_test_1 = require("../utils/snap-test");
+const label_stories_1 = require("./label.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(label_stories_1.Default, null));

package/label/label.stories.d.ts

@@ -4,4 +4,4 @@ declare const _default: {
     component: React.ForwardRefExoticComponent<import("./label").LabelProps & React.RefAttributes<HTMLLabelElement>>;
 };
 export default _default;
-export declare function Default(): JSX.Element;
+export declare function Default(): React.JSX.Element;

package/layout/index.d.ts

@@ -1 +1,2 @@
-export * from "./layout";
+export type { LayoutProps } from "./layout";
+export { Layout } from "./layout";

package/layout/index.js

@@ -1,17 +1,5 @@
 "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 });
-__exportStar(require("./layout"), exports);
+exports.Layout = void 0;
+var layout_1 = require("./layout");
+Object.defineProperty(exports, "Layout", { enumerable: true, get: function () { return layout_1.Layout; } });

package/layout/layout.js

@@ -43,18 +43,19 @@ const Layout = (props) => {
         react_1.default.createElement(react_2.Transition.Root, { show: sidebarOpen, as: react_1.Fragment },
             react_1.default.createElement(react_2.Dialog, { as: "div", className: "relative z-40 md:hidden", onClose: setSidebarOpen },
                 react_1.default.createElement(react_2.Transition.Child, { as: react_1.Fragment, enter: "transition-opacity ease-linear duration-300", enterFrom: "opacity-0", enterTo: "opacity-100", leave: "transition-opacity ease-linear duration-300", leaveFrom: "opacity-100", leaveTo: "opacity-0" },
-                    react_1.default.createElement("div", { className: "fixed inset-0 bg-gray-600 bg-opacity-75" })),
+                    react_1.default.createElement("div", { className: "fixed inset-0 bg-gray-600/75" })),
                 react_1.default.createElement("div", { className: "fixed inset-0 z-40 flex" },
                     react_1.default.createElement(react_2.Transition.Child, { as: react_1.Fragment, enter: "transition ease-in-out duration-300 transform", enterFrom: "-translate-x-full", enterTo: "translate-x-0", leave: "transition ease-in-out duration-300 transform", leaveFrom: "translate-x-0", leaveTo: "-translate-x-full" },
-                        react_1.default.createElement(react_2.Dialog.Panel, { className: "relative flex w-full max-w-xs flex-1 flex-col bg-white pt-5 pb-4" },
+                        react_1.default.createElement(react_2.Dialog.Panel, { className: "relative flex w-full max-w-xs flex-1 flex-col bg-white pb-4 pt-5" },
                             react_1.default.createElement(react_2.Transition.Child, { as: react_1.Fragment, enter: "ease-in-out duration-300", enterFrom: "opacity-0", enterTo: "opacity-100", leave: "ease-in-out duration-300", leaveFrom: "opacity-100", leaveTo: "opacity-0" },
-                                react_1.default.createElement("div", { className: "absolute top-0 right-0 -mr-12 pt-2" },
+                                react_1.default.createElement("div", { className: "absolute right-0 top-0 -mr-12 pt-2" },
                                     react_1.default.createElement("button", { type: "button", className: "ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white", onClick: () => setSidebarOpen(false) },
                                         react_1.default.createElement("span", { className: "sr-only" }, "Close sidebar"),
                                         react_1.default.createElement(icon_1.Icon, { name: "xmarkLarge", size: 24, className: "text-white" })))),
                             react_1.default.createElement("div", { className: "uxf-drawer__logo" }, (_b = props.logo) !== null && _b !== void 0 ? _b : react_1.default.createElement(uxf_logo_1.UxfLogo, { isDark: true })),
                             react_1.default.createElement("div", { className: "uxf-drawer__content" }, props.sidebar))),
-                    react_1.default.createElement("div", { className: "w-14 flex-shrink-0", "aria-hidden": "true" })))),
+                    react_1.default.createElement("div", { className: "w-14 shrink-0", "aria-hidden": "true" })))),
         react_1.default.createElement("main", { className: "uxf-layout__content" }, props.children)));
 };
 exports.Layout = Layout;
+exports.Layout.displayName = "UxfUiLayout";

package/layout/layout.spec.d.ts

@@ -0,0 +1 @@
+export {};