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

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

@@ -31,15 +31,11 @@ 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");
-function CameraIcon() {
-    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { height: "36px" } },
-        react_1.default.createElement("path", { 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" })));
-}
+const icon_1 = require("../icon");
 function AvatarFileInput(props, ref) {
-    const { className, disabled, error, form, id, invalid, label, name, onBlur, onChange, onFocus, onUploadError, readOnly, required, style, uploadHandler, value, } = props;
     const innerRef = (0, react_1.useRef)(null);
-    const input = (0, useInputFocus_1.useInputFocus)(innerRef, onBlur, onFocus);
-    const errorId = invalid && id ? `${id}--errormessage` : undefined;
+    const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
+    const errorId = props.invalid && props.id ? `${props.id}--errormessage` : undefined;
     const [uploading, setUploading] = (0, react_1.useState)(false);
     const _onChange = (0, react_1.useCallback)(async (e) => {
         var _a;
@@ -49,25 +45,25 @@ function AvatarFileInput(props, ref) {
             const file = files[0];
             try {
                 setUploading(true);
-                const response = await uploadHandler(file);
-                await onChange(response);
+                const response = await props.uploadHandler(file);
+                await props.onChange(response);
             }
             catch (err) {
-                onUploadError(err);
+                props.onUploadError(err);
             }
             finally {
                 setUploading(false);
             }
         }
-    }, [onChange, onUploadError, uploadHandler]);
-    return (react_1.default.createElement("div", { className: `_form-field ${className || ""}`, style: style },
-        react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-avatar-file-input", 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, value && "is-disabled:opacity-50") },
-            react_1.default.createElement("label", { className: "sr-only", htmlFor: id }, label),
+    }, [props]);
+    return (react_1.default.createElement("div", { className: `_form-field ${props.className || ""}`, style: props.style },
+        react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-avatar-file-input", input.focused && classes_1.CLASSES.IS_FOCUSED, props.disabled && classes_1.CLASSES.IS_DISABLED, props.readOnly && classes_1.CLASSES.IS_READONLY, props.invalid && classes_1.CLASSES.IS_INVALID, props.value && "is-disabled:opacity-50") },
+            react_1.default.createElement("label", { className: "sr-only", htmlFor: props.id }, props.label),
             react_1.default.createElement("div", { className: "rounded-inherit relative flex h-full w-full flex-col items-center justify-center" },
-                react_1.default.createElement(CameraIcon, null),
-                react_1.default.createElement("p", { className: "mt-1 text-xs" }, uploading ? "nahrávám..." : value ? "změnit foto" : "přidat foto")),
-            !!value && (react_1.default.createElement(raster_image_1.RasterImage, { alt: "", className: (0, cx_1.cx)("rounded-inherit absolute left-0 top-0 block h-full w-full object-cover", uploading && "opacity-0"), height: 96, src: value, width: 96 })),
-            react_1.default.createElement("input", { accept: "image/*", "aria-describedby": errorId, "aria-invalid": invalid, className: "input-reset rounded-inherit absolute left-0 top-0 h-full w-full cursor-pointer opacity-0", disabled: disabled, form: form, id: id, name: name, onBlur: input.onBlur, onChange: _onChange, onFocus: input.onFocus, readOnly: readOnly, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), required: required, tabIndex: readOnly ? -1 : undefined, type: "file" })),
-        invalid && error && react_1.default.createElement(error_message_1.ErrorMessage, { id: errorId }, error)));
+                react_1.default.createElement(icon_1.Icon, { Component: icon_1.CameraIcon, size: 36, className: "text-gray-800" }),
+                react_1.default.createElement("p", { className: "mt-1 text-xs text-gray-800" }, uploading ? "nahrávám..." : props.value ? "změnit foto" : "přidat foto")),
+            !!props.value && (react_1.default.createElement(raster_image_1.RasterImage, { alt: "", className: (0, cx_1.cx)("rounded-inherit absolute left-0 top-0 block h-full w-full object-cover", uploading && "opacity-0"), height: 96, src: props.value, width: 96 })),
+            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);

package/checkbox/checkbox.js

@@ -16,9 +16,8 @@ function SquareIcon() {
         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" })));
 }
 function Checkbox(props) {
-    const { checked, className, disabled, label, onChange, style } = props;
-    return (react_2.default.createElement(react_1.Switch, { checked: checked, className: (0, cx_1.cx)(checked && classes_1.CLASSES.IS_SELECTED, disabled && classes_1.CLASSES.IS_DISABLED, "uxf-checkbox", className), disabled: disabled, onChange: onChange, style: style },
-        react_2.default.createElement("span", { className: "sr-only" }, label),
-        checked ? react_2.default.createElement(CheckIcon, null) : react_2.default.createElement(SquareIcon, null)));
+    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),
+        props.checked ? react_2.default.createElement(CheckIcon, null) : react_2.default.createElement(SquareIcon, null)));
 }
 exports.default = Checkbox;

package/combobox/combobox.d.ts

@@ -1,27 +1,21 @@
-import React, { FocusEventHandler } from "react";
-declare type ComboboxValue = number | string;
+import React, { ReactNode } from "react";
+import { FormControlProps } from "../types";
+export declare type ComboboxValue = number | string;
 export declare type ComboboxOption<T = ComboboxValue> = {
-    key?: number | string;
     id: T;
     label: string;
     disabled?: boolean;
 };
-export interface ComboboxProps<V = ComboboxValue, O = ComboboxOption<V>> {
-    className?: string;
-    disabled?: boolean;
-    error?: string;
-    invalid?: boolean;
-    onChange: (value: O | null) => void;
-    onBlur?: FocusEventHandler<HTMLDivElement>;
-    onFocus?: FocusEventHandler<HTMLDivElement>;
-    name: string;
+export interface ComboboxProps<Value = ComboboxValue, Option = ComboboxOption<Value>> extends FormControlProps<Value | null> {
     id: string;
+    className?: string;
+    helperText?: ReactNode;
     label: string;
     placeholder?: string;
-    options: O[];
-    readOnly?: boolean;
-    required?: boolean;
-    value?: V;
+    options: Option[];
+    error?: string;
+    keyExtractor?: (option: Option) => string | number;
+    renderOption?: (option: Option) => ReactNode;
 }
 declare const _default: React.ForwardRefExoticComponent<ComboboxProps<ComboboxValue, ComboboxOption<ComboboxValue>> & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/combobox/combobox.js

@@ -24,33 +24,35 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("@headlessui/react");
-const dropdown_1 = require("../dropdown");
 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 error_message_1 = require("../error-message");
 const label_1 = require("../label");
 const forwardRef_1 = require("@uxf/ui/utils/forwardRef");
+const icon_1 = require("../icon");
 function Combobox(props, ref) {
-    const { className, disabled, error, id, invalid, label, onBlur, onChange, onFocus, options, placeholder, readOnly, value, } = props;
     const [query, setQuery] = (0, react_2.useState)("");
-    const selectedOption = options.find((option) => option.id === value);
+    const selectedOption = props.options.find((option) => option.id === props.value);
     const filteredData = query === ""
-        ? options
-        : options.filter((item) => String(item.label).toLowerCase().includes(query.toLowerCase()));
+        ? props.options
+        : props.options.filter((item) => String(item.label).toLowerCase().includes(query.toLowerCase()));
     const innerRef = (0, react_2.useRef)(null);
-    const disabledOrReadOnly = disabled || readOnly;
-    const errorId = invalid ? `${id}--errormessage` : undefined;
-    const input = (0, useInputFocus_1.useInputFocus)(innerRef, onBlur, onFocus);
+    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.Combobox, { as: "div", className: `autocomplete-form-field ${className || ""}`, onChange: onChange, value: selectedOption },
-        react_2.default.createElement(react_1.Combobox.Label, { as: label_1.Label, onClick: !disabledOrReadOnly ? input.focus : undefined }, label),
-        react_2.default.createElement(react_1.Combobox.Input, { className: (0, cx_1.cx)("border-grey w-full rounded-lg border p-4 tracking-wider outline-none", invalid && error && "outline-red border-transparent outline"), displayValue: (item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : ""; }, onBlur: onBlur, onChange: (event) => setQuery(event.target.value), placeholder: placeholder, ref: stableRef, type: "text" }),
-        invalid && error && react_2.default.createElement(error_message_1.ErrorMessage, { id: errorId }, error),
-        react_2.default.createElement(react_1.Combobox.Options, { as: dropdown_1.Dropdown.Items, className: "w-full", ref: dropdown.floating, style: dropdown.style }, filteredData.map((option) => (react_2.default.createElement(react_1.Combobox.Option, { as: react_2.Fragment, key: option.key || option.id, value: option }, (o) => (react_2.default.createElement(dropdown_1.Dropdown.Item, { className: (0, cx_1.cx)(o.active && classes_1.CLASSES.IS_ACTIVE, o.disabled && classes_1.CLASSES.IS_DISABLED, o.selected && classes_1.CLASSES.IS_SELECTED) }, option.label))))))));
+    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,
+        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 }))),
+        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));
+        })),
+        react_2.default.createElement("div", { className: "uxf-combobox__helper-text" }, props.isInvalid && props.error ? props.error : props.helperText)))));
 }
 exports.default = (0, forwardRef_1.forwardRef)("Combobox", Combobox);

package/combobox/combobox.stories.d.ts

@@ -1,8 +1,9 @@
-import { ComboboxOption } from "./combobox";
+import { ComboboxValue } from "./combobox";
 import React from "react";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./combobox").ComboboxProps<string | number, ComboboxOption<string | number>> & React.RefAttributes<HTMLDivElement>>;
+    component: React.ForwardRefExoticComponent<import("./combobox").ComboboxProps<ComboboxValue, import("./combobox").ComboboxOption<ComboboxValue>> & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;
 export declare function Default(): JSX.Element;
+export declare function ComponentStructure(): JSX.Element;

package/combobox/combobox.stories.js

@@ -22,27 +22,42 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.ComponentStructure = exports.Default = void 0;
 const react_1 = __importStar(require("react"));
 const index_1 = require("./index");
+const component_structure_analyzer_1 = __importDefault(require("../utils/component-structure-analyzer"));
 exports.default = {
     title: "UI/Combobox",
     component: index_1.Combobox,
 };
 const options = [
     { id: "one", label: "Option one" },
-    // { id: "two", label: "Option two" },
-    // { id: "three", label: "Option three" },
+    { id: "two", label: "Option two" },
+    { id: "three", label: "Option three" },
 ];
 function Default() {
     const [value, setValue] = (0, react_1.useState)();
     const handleChange = (v) => {
         // eslint-disable-next-line no-console
         console.log("Select value: ", v);
-        setValue(v === null || v === void 0 ? void 0 : v.id);
+        setValue(v);
     };
-    return (react_1.default.createElement("div", { className: "space-y-2" },
-        react_1.default.createElement(index_1.Combobox, { id: "combobox-1", name: "combobox", label: "Start typing to see options...", options: options, onChange: handleChange, value: value })));
+    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" })));
 }
 exports.Default = Default;
+function ComponentStructure() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    const handleChange = (v) => {
+        setValue(v);
+    };
+    return (react_1.default.createElement(component_structure_analyzer_1.default, null,
+        react_1.default.createElement(index_1.Combobox, { id: "combobox-structure", name: "combobox", label: "Combobox with helper text", options: options, onChange: handleChange, value: value, helperText: "Start typing to see options..." })));
+}
+exports.ComponentStructure = ComponentStructure;

package/dropdown/dropdown.js

@@ -9,6 +9,7 @@ const react_1 = __importDefault(require("react"));
 const forwardRef_1 = require("@uxf/ui/utils/forwardRef");
 const cx_1 = require("@uxf/core/utils/cx");
 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 || ""}`,

package/icon/camera-icon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function CameraIcon(props: any): JSX.Element;
+export default CameraIcon;

package/icon/camera-icon.js

@@ -0,0 +1,11 @@
+"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"));
+function CameraIcon(props) {
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/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.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function ChevronDownIcon(props: any): JSX.Element;
+export default ChevronDownIcon;

package/icon/chevron-down-icon.js

@@ -0,0 +1,11 @@
+"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"));
+function ChevronDownIcon(props) {
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/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.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function ChevronUpIcon(props: any): JSX.Element;
+export default ChevronUpIcon;

package/icon/chevron-up-icon.js

@@ -0,0 +1,11 @@
+"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"));
+function ChevronUpIcon(props) {
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/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.stories.js

@@ -10,8 +10,6 @@ exports.default = {
     title: "UI/Icon",
     component: index_1.Icon,
 };
-const CameraIcon = (props) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/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" })));
 function Default() {
     return (react_1.default.createElement("div", { className: "space-y-2" },
         react_1.default.createElement("div", { className: "mb-2 text-sm" },
@@ -22,7 +20,7 @@ function Default() {
             react_1.default.createElement("span", { className: "font-semibold" }, "Red"),
             ", Size: ",
             react_1.default.createElement("span", { className: "font-semibold" }, "16")),
-        react_1.default.createElement(index_1.Icon, { Component: CameraIcon, size: 16, className: "text-red-600" }),
+        react_1.default.createElement(index_1.Icon, { Component: index_1.PinIcon, size: 16, className: "text-red-600" }),
         react_1.default.createElement("div", { className: "mb-2 text-sm" },
             "Type: ",
             react_1.default.createElement("span", { className: "font-semibold" }, "Custom component"),
@@ -31,7 +29,7 @@ function Default() {
             react_1.default.createElement("span", { className: "font-semibold" }, "Blue"),
             ", Size: ",
             react_1.default.createElement("span", { className: "font-semibold" }, "24")),
-        react_1.default.createElement(index_1.Icon, { Component: CameraIcon, size: 24, className: "text-blue-600" }),
+        react_1.default.createElement(index_1.Icon, { Component: index_1.PinIcon, size: 24, className: "text-blue-600" }),
         react_1.default.createElement("div", { className: "mb-2 text-sm" },
             "Type: ",
             react_1.default.createElement("span", { className: "font-semibold" }, "Custom component"),
@@ -40,7 +38,7 @@ function Default() {
             react_1.default.createElement("span", { className: "font-semibold" }, "Green"),
             ", Size: ",
             react_1.default.createElement("span", { className: "font-semibold" }, "48")),
-        react_1.default.createElement(index_1.Icon, { Component: CameraIcon, size: 48, className: "text-green-600" }),
+        react_1.default.createElement(index_1.Icon, { Component: index_1.PinIcon, size: 48, className: "text-green-600" }),
         react_1.default.createElement("div", { className: "mb-2 text-sm" },
             "Type: ",
             react_1.default.createElement("span", { className: "font-semibold" }, "SVG sprite"),

package/icon/index.d.ts

@@ -1 +1,5 @@
 export { default as Icon } from "./icon";
+export { default as PinIcon } from "./pin-icon";
+export { default as ChevronDownIcon } from "./chevron-down-icon";
+export { default as ChevronUpIcon } from "./chevron-up-icon";
+export { default as CameraIcon } from "./camera-icon";

package/icon/index.js

@@ -3,6 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Icon = void 0;
+exports.CameraIcon = exports.ChevronUpIcon = exports.ChevronDownIcon = exports.PinIcon = exports.Icon = void 0;
 var icon_1 = require("./icon");
 Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return __importDefault(icon_1).default; } });
+var pin_icon_1 = require("./pin-icon");
+Object.defineProperty(exports, "PinIcon", { enumerable: true, get: function () { return __importDefault(pin_icon_1).default; } });
+var chevron_down_icon_1 = require("./chevron-down-icon");
+Object.defineProperty(exports, "ChevronDownIcon", { enumerable: true, get: function () { return __importDefault(chevron_down_icon_1).default; } });
+var chevron_up_icon_1 = require("./chevron-up-icon");
+Object.defineProperty(exports, "ChevronUpIcon", { enumerable: true, get: function () { return __importDefault(chevron_up_icon_1).default; } });
+var camera_icon_1 = require("./camera-icon");
+Object.defineProperty(exports, "CameraIcon", { enumerable: true, get: function () { return __importDefault(camera_icon_1).default; } });

package/icon/pin-icon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function PinIcon(props: any): JSX.Element;
+export default PinIcon;

package/icon/pin-icon.js

@@ -0,0 +1,11 @@
+"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"));
+function PinIcon(props) {
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/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/package.json

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

package/radio/radio.js

@@ -8,6 +8,7 @@ const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importDefault(require("react"));
 const forwardRef_1 = require("../utils/forwardRef");
 function Radio(props, ref) {
+    // eslint-disable-next-line react/destructuring-assignment
     const { active, checked, className, disabled, invalid, label, ...restProps } = props;
     return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-radio__control", active && classes_1.CLASSES.IS_FOCUSED, checked && classes_1.CLASSES.IS_SELECTED, disabled && classes_1.CLASSES.IS_DISABLED, invalid && classes_1.CLASSES.IS_INVALID, className), ref: ref, ...restProps },
         react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-radio", active && classes_1.CLASSES.IS_FOCUSED, checked && classes_1.CLASSES.IS_SELECTED, disabled && classes_1.CLASSES.IS_DISABLED, invalid && classes_1.CLASSES.IS_INVALID) },

package/radio-group/radio-group.js

@@ -32,6 +32,7 @@ const radio_1 = require("../radio");
 const error_message_1 = require("../error-message");
 const use_input_submit_1 = require("../hooks/use-input-submit");
 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);
     (0, use_input_submit_1.useInputSubmit)(innerRef, "radio-group", disabled);

package/raster-image/raster-image.js

@@ -9,6 +9,7 @@ const image_1 = require("../utils/image");
 const resizer_1 = require("@uxf/core/utils/resizer");
 function RasterImage(props) {
     var _a, _b;
+    // eslint-disable-next-line react/destructuring-assignment
     const { alt, className, height, imgClassName, loading = "lazy", mode = "responsive", src, width, ...restProps } = props;
     const Element = src ? "picture" : "div";
     return (react_1.default.createElement(Element, { className: `uxf-raster-image ${className || ""}` }, src ? (react_1.default.createElement(react_1.default.Fragment, null,

package/select/select.d.ts

@@ -1,27 +1,20 @@
-import React, { FocusEventHandler } from "react";
+import React, { ReactNode } from "react";
+import { FormControlProps } from "../types";
 export declare type SelectValue = number | string;
 export declare type SelectOption<T = SelectValue> = {
-    key?: number | string;
     id: T;
-    label: string;
+    label: ReactNode;
     disabled?: boolean;
 };
-export interface SelectProps<V = SelectValue, O = SelectOption<V>> {
+export interface SelectProps<Value = SelectValue, Option = SelectOption<Value>> extends FormControlProps<Value | null> {
+    id?: string;
     className?: string;
-    disabled?: boolean;
-    error?: string;
-    invalid?: boolean;
-    onChange: (value: O | null) => void;
-    onBlur?: FocusEventHandler<HTMLDivElement>;
-    onFocus?: FocusEventHandler<HTMLDivElement>;
-    name: string;
-    id: string;
-    label: string;
-    placeholder?: string;
-    options: O[];
-    readOnly?: boolean;
-    required?: boolean;
-    value?: V;
+    helperText?: ReactNode;
+    label?: ReactNode;
+    placeholder?: ReactNode;
+    options: Option[];
+    keyExtractor?: (option: Option) => string | number;
+    renderOption?: (option: Option) => ReactNode;
 }
 declare const _default: React.ForwardRefExoticComponent<SelectProps<SelectValue, SelectOption<SelectValue>> & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/select/select.js

@@ -24,42 +24,35 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("@headlessui/react");
-const dropdown_1 = require("../dropdown");
 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 error_message_1 = require("../error-message");
 const label_1 = require("../label");
 const forwardRef_1 = require("@uxf/ui/utils/forwardRef");
-function ChevronDown() {
-    return (react_2.default.createElement("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fass", "data-icon": "chevron-down", className: "svg-inline--fa fa-chevron-down ", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { height: "1em" } },
-        react_2.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" })));
-}
-function ChevronUp() {
-    return (react_2.default.createElement("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fass", "data-icon": "chevron-up", className: "svg-inline--fa fa-chevron-up ", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { height: "1em" } },
-        react_2.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" })));
-}
+const icon_1 = require("../icon");
 function Select(props, ref) {
-    const { className, disabled, error, id, invalid, label, onBlur, onChange, onFocus, options, placeholder = "Vyberte z možností...", readOnly, value, } = props;
-    //const selectedOption = useMemo(() => options.find((option) => option.id === value), [options, value]);
-    const selectedOption = options.find((option) => option.id === value);
+    var _a;
+    const generatedId = (0, react_2.useId)();
+    const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
+    const selectedOption = props.options.find((option) => option.id === props.value);
     const innerRef = (0, react_2.useRef)(null);
-    const disabledOrReadOnly = disabled || readOnly;
-    const errorId = invalid ? `${id}--errormessage` : undefined;
-    const input = (0, useInputFocus_1.useInputFocus)(innerRef, onBlur, onFocus);
+    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]);
-    return (react_2.default.createElement(react_1.Listbox, { as: "div", className: `select-form-field ${className || ""}`, onChange: onChange, value: selectedOption },
-        react_2.default.createElement(react_1.Listbox.Label, { as: label_1.Label, onClick: !disabledOrReadOnly ? input.focus : undefined }, label),
-        react_2.default.createElement(react_1.Listbox.Button, { as: "div", className: "" }, (b) => (
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-        react_2.default.createElement("div", { "aria-invalid": invalid, "aria-describedby": errorId, className: (0, cx_1.cx)("select-text-input select-text-input__control--select", (b.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, b.disabled && classes_1.CLASSES.IS_DISABLED, readOnly && classes_1.CLASSES.IS_READONLY, invalid && classes_1.CLASSES.IS_INVALID), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: !disabledOrReadOnly ? 0 : undefined, ref: stableRef },
-            react_2.default.createElement("div", { className: `w-full ${!value ? "text-gray-muted" : ""}` }, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || placeholder),
-            b.open ? react_2.default.createElement(ChevronUp, null) : react_2.default.createElement(ChevronDown, null)))),
-        invalid && error && react_2.default.createElement(error_message_1.ErrorMessage, { id: errorId }, error),
-        react_2.default.createElement(react_1.Listbox.Options, { as: dropdown_1.Dropdown.Items, className: "w-full", ref: dropdown.floating, style: dropdown.style }, options.map((option) => (react_2.default.createElement(react_1.Listbox.Option, { as: react_2.Fragment, key: option.key || option.id, value: option }, (o) => (react_2.default.createElement(dropdown_1.Dropdown.Item, { className: (0, cx_1.cx)(o.active && classes_1.CLASSES.IS_ACTIVE, o.disabled && classes_1.CLASSES.IS_DISABLED, o.selected && classes_1.CLASSES.IS_SELECTED) }, option.label))))))));
+    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,
+        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 })),
+            " "),
+        react_2.default.createElement("div", { className: "uxf-select__helper-text" }, 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);

package/select/select.stories.d.ts

@@ -1,8 +1,9 @@
-import { SelectOption } from "./select";
+import { SelectValue } from "./select";
 import React from "react";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./select").SelectProps<import("./select").SelectValue, SelectOption<import("./select").SelectValue>> & React.RefAttributes<HTMLDivElement>>;
+    component: React.ForwardRefExoticComponent<import("./select").SelectProps<SelectValue, import("./select").SelectOption<SelectValue>> & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;
 export declare function Default(): JSX.Element;
+export declare function ComponentStructure(): JSX.Element;

package/select/select.stories.js

@@ -22,10 +22,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.ComponentStructure = exports.Default = void 0;
 const index_1 = require("./index");
 const react_1 = __importStar(require("react"));
+const component_structure_analyzer_1 = __importDefault(require("../utils/component-structure-analyzer"));
 exports.default = {
     title: "UI/Select",
     component: index_1.Select,
@@ -40,9 +44,24 @@ function Default() {
     const handleChange = (v) => {
         // eslint-disable-next-line no-console
         console.log("Select value: ", v);
-        setValue(v === null || v === void 0 ? void 0 : v.id);
+        setValue(v);
     };
-    return (react_1.default.createElement("div", { className: "space-y-2" },
-        react_1.default.createElement(index_1.Select, { id: "select-1", name: "select", label: "Choose option...", options: options, onChange: handleChange, value: value })));
+    return (react_1.default.createElement("div", { className: "space-y-4" },
+        react_1.default.createElement(index_1.Select, { label: "Default select", options: options, onChange: handleChange, value: value, helperText: "Helper text" }),
+        react_1.default.createElement(index_1.Select, { label: "Invalid select", options: options, onChange: handleChange, value: value, helperText: "Helper text", isInvalid: true }),
+        react_1.default.createElement(index_1.Select, { label: "Disabled select", options: options, onChange: handleChange, value: value, helperText: "Helper text", isDisabled: true }),
+        react_1.default.createElement(index_1.Select, { label: "Read only select", options: options, onChange: handleChange, value: value, helperText: "Helper text", isReadOnly: true }),
+        react_1.default.createElement(index_1.Select, { label: "Required select", options: options, onChange: handleChange, value: value, helperText: "Helper text", isRequired: true })));
 }
 exports.Default = Default;
+function ComponentStructure() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    const handleChange = (v) => {
+        // eslint-disable-next-line no-console
+        console.log("Select value: ", v);
+        setValue(v);
+    };
+    return (react_1.default.createElement(component_structure_analyzer_1.default, null,
+        react_1.default.createElement(index_1.Select, { id: "select-1", name: "select", label: "Choose option...", options: options, onChange: handleChange, value: value })));
+}
+exports.ComponentStructure = ComponentStructure;

package/textarea/textarea.js

@@ -45,6 +45,7 @@ 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;
     const innerRef = (0, react_1.useRef)(null);
     const input = (0, useInputFocus_1.useInputFocus)(innerRef, onBlur, onFocus);