@uxf/ui 1.0.0-beta.28 → 1.0.0-beta.30

package/input/input-element.d.ts

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

package/input/input-element.js

@@ -6,6 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const forwardRef_1 = require("@uxf/ui/utils/forwardRef");
 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 }));
+    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 }));
 }
 exports.default = (0, forwardRef_1.forwardRef)("InputElement", InputElement);

package/input/input.js

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
 const react_1 = __importStar(require("react"));
 const cx_1 = require("@uxf/core/utils/cx");
+const classes_1 = require("@uxf/core/constants/classes");
 function getChildrenById(children, componentName) {
     return react_1.Children.toArray(children)
         .filter(react_1.isValidElement)
@@ -40,7 +41,7 @@ function Input(props) {
     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 && "uxf-input--focused", (mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isInvalid) && "uxf-input--invalid");
+    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);
     const onFocus = (e) => {
         var _a, _b;
         setFocused(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.28",
+  "version": "1.0.0-beta.30",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -15,7 +15,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "^0.6.0",
     "@headlessui/react": "^1.6.6",
-    "@uxf/core": "latest",
+    "@uxf/core": "^2.2.5",
     "jump.js": "^1.0.2",
     "ua-parser-js": "^1.0.2"
   },

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

@@ -17,6 +17,7 @@ export interface TextInputProps extends FormControlProps<string>, Pick<InputProp
     rightElement?: ReactNode;
     leftAddon?: ReactNode;
     rightAddon?: ReactNode;
+    type?: "email" | "number" | "password" | "tel" | "text" | "url";
 }
 export declare function TextInput(props: TextInputProps): JSX.Element;
 export {};

package/text-input/text-input.js

@@ -28,7 +28,11 @@ const input_1 = require("@uxf/ui/input");
 const react_1 = __importStar(require("react"));
 const cx_1 = require("@uxf/core/utils/cx");
 function TextInput(props) {
+    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 && "uxf-text-input--invalid", props.isDisabled && "uxf-text-input--disabled", props.isRequired && "uxf-text-input--required", isFocused && "uxf-text-input--focused");
     const onFocus = (e) => {
         var _a;
@@ -41,13 +45,13 @@ function TextInput(props) {
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     };
     return (react_1.default.createElement("div", { className: rootClassName },
-        react_1.default.createElement("label", { className: "uxf-text-input__label" }, props.label),
+        react_1.default.createElement("label", { className: "uxf-text-input__label", htmlFor: id }, 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, { 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 }),
+            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 }),
             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)),
-        react_1.default.createElement("div", { className: "uxf-text-input__helper-text" }, props.helperText)));
+        react_1.default.createElement("div", { className: "uxf-text-input__helper-text", id: errorId }, props.helperText)));
 }
 exports.TextInput = TextInput;

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

@@ -5,5 +5,5 @@ declare const _default: {
     component: typeof TextInput;
 };
 export default _default;
-export declare function Default(): JSX.Element;
+export declare function Full(): JSX.Element;
 export declare function ComponentStructure(): JSX.Element;

package/text-input/text-input.stories.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentStructure = exports.Default = void 0;
+exports.ComponentStructure = exports.Full = void 0;
 const react_1 = __importStar(require("react"));
 const text_input_1 = require("@uxf/ui/text-input");
 const component_structure_analyzer_1 = __importDefault(require("@uxf/ui/utils/component-structure-analyzer"));
@@ -34,16 +34,15 @@ exports.default = {
     title: "UI/TextInput",
     component: text_input_1.TextInput,
 };
-function Default() {
+function Full() {
     const [value, onChange] = (0, react_1.useState)("");
-    const [isInvalid, setInvalid] = (0, react_1.useState)(false);
     return (react_1.default.createElement("div", { className: "space-y-4" },
-        react_1.default.createElement("input", { type: "checkbox", checked: isInvalid, onChange: (e) => setInvalid(e.target.checked) }),
-        react_1.default.createElement(text_input_1.TextInput, { label: "Label", value: value, onChange: onChange, isInvalid: isInvalid, helperText: "Helper text", isRequired: true }),
-        react_1.default.createElement(text_input_1.TextInput, { label: "Label", value: value, onChange: onChange, isInvalid: isInvalid, helperText: "Helper text", leftElement: "USD" }),
-        react_1.default.createElement(text_input_1.TextInput, { label: "Label", value: value, onChange: onChange, isInvalid: isInvalid, helperText: "Helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14" })));
+        react_1.default.createElement(text_input_1.TextInput, { label: "Default input", value: value, onChange: onChange, helperText: "Helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", placeholder: "Some beautiful placeholder..." }),
+        react_1.default.createElement(text_input_1.TextInput, { label: "Error input", value: value, onChange: onChange, helperText: "Error helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", placeholder: "Some beautiful placeholder...", isInvalid: true }),
+        react_1.default.createElement(text_input_1.TextInput, { label: "Read only input", value: value, onChange: onChange, helperText: "Error helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", placeholder: "Some beautiful placeholder...", isReadOnly: true }),
+        react_1.default.createElement(text_input_1.TextInput, { label: "Disabled input", value: value, onChange: onChange, helperText: "Error helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", placeholder: "Some beautiful placeholder...", isDisabled: true })));
 }
-exports.Default = Default;
+exports.Full = Full;
 function ComponentStructure() {
     const [value, onChange] = (0, react_1.useState)("");
     return (react_1.default.createElement(component_structure_analyzer_1.default, null,