@uxf/ui 1.0.0-beta.8 → 1.0.0-beta.80

package/time-picker-input/time-picker-input.js

@@ -0,0 +1,64 @@
+"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 __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.TimePickerInput = void 0;
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importStar(require("react"));
+const form_control_1 = require("../form-control");
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const react_2 = require("@headlessui/react");
+const time_picker_1 = require("./time-picker");
+exports.TimePickerInput = (0, forwardRef_1.forwardRef)("TimePickerInput", (props, ref) => {
+    var _a;
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const generatedId = (0, react_1.useId)();
+    const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
+    const errorId = props.isInvalid ? `${id}--error-message` : undefined;
+    const rootClassName = (0, cx_1.cx)("uxf-time-picker-input", isFocused && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.leftElement && "uxf-time-picker-input--has-left-element", props.rightElement && "uxf-time-picker-input--has-right-element", props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY);
+    const onFocus = (e) => {
+        var _a;
+        setIsFocused(true);
+        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
+    const onBlur = (e) => {
+        var _a;
+        setIsFocused(false);
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
+    return (react_1.default.createElement(form_control_1.FormControl, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label },
+        react_1.default.createElement(react_2.Popover, { className: "relative" },
+            react_1.default.createElement(react_2.Popover.Button, { as: "div", className: "uxf-time-picker-input__wrapper" },
+                react_1.default.createElement("span", { className: "uxf-time-picker-input__left-element" }, props.leftElement),
+                react_1.default.createElement("input", { "aria-describedby": errorId, "aria-errormessage": props.error && errorId ? `${errorId}__error-message` : undefined, "aria-invalid": !!props.error, "aria-live": "polite", autoComplete: "off", className: "uxf-time-picker-input__element", disabled: props.isDisabled, form: props.form, id: id, inputMode: "text", name: props.name, onBlur: onBlur, onChange: () => props.onChange, onFocus: onFocus, placeholder: "Vyberte \u010Das...", readOnly: props.isReadOnly, ref: ref, required: props.isRequired, tabIndex: props.isReadOnly ? -1 : undefined, value: props.value
+                        ? `${props.value.hour}:${props.value.minute < 10 ? "0" + props.value.minute : props.value.minute}`
+                        : "" }),
+                react_1.default.createElement("span", { className: "uxf-time-picker-input__right-element" }, props.rightElement)),
+            !props.isDisabled && !props.isReadOnly && (react_1.default.createElement(react_2.Transition, { as: react_1.Fragment, enter: "transition duration-200 ease-out", enterFrom: "origin-top scale-50 opacity-0", enterTo: "origin-top scale-100 opacity-100", leave: "transition duration-200 ease-out", leaveFrom: "origin-top scale-50 opacity-100", leaveTo: "origin-top scale-0 opacity-0" },
+                react_1.default.createElement(react_2.Popover.Panel, { className: "uxf-time-picker-input__popover", static: true }, ({ close }) => {
+                    var _a;
+                    return props.onChange ? (react_1.default.createElement(time_picker_1.TimePicker, { closePopoverHandler: close, onChange: props.onChange, selectedTime: (_a = props.value) !== null && _a !== void 0 ? _a : null })) : (react_1.default.createElement(react_1.default.Fragment, null));
+                }))))));
+});

package/time-picker-input/time-picker-input.stories.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./time-picker-input").TimePickerInputProps & React.RefAttributes<HTMLInputElement>>;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/time-picker-input/time-picker-input.stories.js

@@ -0,0 +1,45 @@
+"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 __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.Default = void 0;
+const react_1 = __importStar(require("react"));
+const time_picker_input_1 = require("./time-picker-input");
+const icon_1 = require("../icon");
+exports.default = {
+    title: "UI/TimePickerInput",
+    component: time_picker_input_1.TimePickerInput,
+};
+function Default() {
+    const [time, setTime] = (0, react_1.useState)(null);
+    const testTimePickers = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test", name: "time", label: "\u010Cas \u010Dehokoliv", rightElement: react_1.default.createElement(icon_1.Icon, { name: "clock", size: 24 }), value: time, onChange: (data) => setTime(data) }),
+        react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test-disabled", name: "time-disabled", label: "\u010Cas disabled", rightElement: react_1.default.createElement(icon_1.Icon, { name: "clock", size: 24 }), value: time, onChange: (data) => setTime(data), isDisabled: true }),
+        react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test-readonly", name: "time-readonly", label: "\u010Cas readonly", rightElement: react_1.default.createElement(icon_1.Icon, { name: "clock", size: 24 }), value: time, onChange: (data) => setTime(data), isReadOnly: true }),
+        react_1.default.createElement(time_picker_input_1.TimePickerInput, { id: "time-test-invalid", name: "time-invalid", label: "\u010Cas invalid", rightElement: react_1.default.createElement(icon_1.Icon, { name: "clock", size: 24 }), value: time, onChange: (data) => setTime(data), isInvalid: true })));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "light max-w-[640px] space-y-4 rounded bg-white p-8" }, testTimePickers),
+        react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8 text-white" }, testTimePickers)));
+}
+exports.Default = Default;

package/time-picker-input/time-picker-minute.d.ts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+export declare const TimePickerMinute: FC<{
+    minute: number;
+    label: string;
+}>;

package/time-picker-input/time-picker-minute.js

@@ -0,0 +1,47 @@
+"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 __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.TimePickerMinute = void 0;
+const react_1 = __importStar(require("react"));
+const time_picker_context_1 = require("@uxf/datepicker/contexts/time-picker-context");
+const use_minute_1 = require("@uxf/datepicker/hooks/use-minute");
+const cx_1 = require("@uxf/core/utils/cx");
+const classes_1 = require("@uxf/core/constants/classes");
+const button_1 = require("../button");
+const TimePickerMinute = (props) => {
+    const minuteRef = (0, react_1.useRef)(null);
+    const { focusedMinute, isMinuteFocused, isMinuteSelected, onMinuteSelect, onMinuteFocus } = (0, react_1.useContext)(time_picker_context_1.TimePickerContext);
+    const { isSelected, onClick, onKeyDown, tabIndex } = (0, use_minute_1.useMinute)({
+        minute: props.minute,
+        minuteRef,
+        focusedMinute,
+        isMinuteFocused,
+        isMinuteSelected,
+        onMinuteFocus,
+        onMinuteSelect,
+    });
+    return (react_1.default.createElement(button_1.Button, { variant: "text", tabIndex: tabIndex, onKeyDown: onKeyDown, onClick: onClick, className: (0, cx_1.cx)("uxf-time-picker__minute", isSelected && classes_1.CLASSES.IS_SELECTED), ref: minuteRef }, props.label));
+};
+exports.TimePickerMinute = TimePickerMinute;

package/time-picker-input/time-picker-minutes.d.ts

@@ -0,0 +1,2 @@
+import { FC } from "react";
+export declare const TimePickerMinutes: FC;

package/time-picker-input/time-picker-minutes.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimePickerMinutes = void 0;
+const react_1 = __importDefault(require("react"));
+const time_picker_minute_1 = require("./time-picker-minute");
+const use_minutes_1 = require("@uxf/datepicker/hooks/use-minutes");
+const TimePickerMinutes = () => {
+    const { minutes } = (0, use_minutes_1.useMinutes)({});
+    return (react_1.default.createElement("div", { className: "uxf-time-picker__minutes" }, minutes.map((minute) => (react_1.default.createElement(time_picker_minute_1.TimePickerMinute, { minute: minute.value, label: minute.label, key: minute.value })))));
+};
+exports.TimePickerMinutes = TimePickerMinutes;

package/time-picker-input/time-picker.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { OnTimeChangeType, TimeType } from "@uxf/datepicker/hooks/use-time-picker";
+export interface TimePickerProps {
+    closePopoverHandler: () => void;
+    onChange: (data: OnTimeChangeType) => void;
+    selectedTime: TimeType | null;
+}
+export declare const TimePicker: FC<TimePickerProps>;

package/time-picker-input/time-picker.js

@@ -0,0 +1,69 @@
+"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 __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.TimePicker = void 0;
+const react_1 = __importStar(require("react"));
+const time_picker_hours_1 = require("./time-picker-hours");
+const time_picker_minutes_1 = require("./time-picker-minutes");
+const use_time_picker_1 = require("@uxf/datepicker/hooks/use-time-picker");
+const icon_1 = require("../icon");
+const button_1 = require("../button");
+const time_picker_context_1 = require("@uxf/datepicker/contexts/time-picker-context");
+const TimePicker = (props) => {
+    const [viewMode, setViewMode] = (0, react_1.useState)("global");
+    const { goToNextMinute, goToPrevHour, goToPrevMinute, goToNextHour, ...contextProps } = (0, use_time_picker_1.useTimePicker)({
+        selectedTime: props.selectedTime,
+        onTimeChange: props.onChange,
+        onSelectCallback: () => setViewMode("global"),
+    });
+    const timePickerComponents = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        return ({
+            global: (react_1.default.createElement("div", { className: "uxf-time-picker__global" },
+                react_1.default.createElement("div", { className: "uxf-time-picker__global__column" },
+                    react_1.default.createElement(button_1.Button, { iconButton: true, onClick: goToNextHour, title: "Dal\u0161\u00ED", variant: "text" },
+                        react_1.default.createElement(icon_1.Icon, { name: "chevronUp", size: 16 })),
+                    react_1.default.createElement(button_1.Button, { variant: "text", onClick: () => setViewMode("hour") }, (_b = (_a = props.selectedTime) === null || _a === void 0 ? void 0 : _a.hour) !== null && _b !== void 0 ? _b : "0"),
+                    react_1.default.createElement(button_1.Button, { iconButton: true, onClick: goToPrevHour, title: "P\u0159edchoz\u00ED", variant: "text" },
+                        react_1.default.createElement(icon_1.Icon, { name: "chevronDown", size: 16 }))),
+                react_1.default.createElement("div", null, ":"),
+                react_1.default.createElement("div", { className: "uxf-time-picker__global__column" },
+                    react_1.default.createElement(button_1.Button, { iconButton: true, onClick: goToNextMinute, title: "Dal\u0161\u00ED", variant: "text" },
+                        react_1.default.createElement(icon_1.Icon, { name: "chevronUp", size: 16 })),
+                    react_1.default.createElement(button_1.Button, { variant: "text", onClick: () => setViewMode("minute") }, props.selectedTime
+                        ? props.selectedTime.minute < 10
+                            ? "0" + props.selectedTime.minute
+                            : props.selectedTime.minute
+                        : "00"),
+                    react_1.default.createElement(button_1.Button, { iconButton: true, onClick: goToPrevMinute, title: "P\u0159edchoz\u00ED", variant: "text" },
+                        react_1.default.createElement(icon_1.Icon, { name: "chevronDown", size: 16 }))))),
+            hour: react_1.default.createElement(time_picker_hours_1.TimePickerHours, null),
+            minute: react_1.default.createElement(time_picker_minutes_1.TimePickerMinutes, null),
+        });
+    }, [goToPrevHour, props.selectedTime, goToNextHour, goToPrevMinute, goToNextMinute]);
+    return (react_1.default.createElement(time_picker_context_1.TimePickerContext.Provider, { value: contextProps },
+        react_1.default.createElement("div", null, timePickerComponents[viewMode])));
+};
+exports.TimePicker = TimePicker;

package/toggle/index.d.ts

@@ -0,0 +1 @@
+export * from "./toggle";

package/toggle/index.js

@@ -0,0 +1,17 @@
+"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("./toggle"), exports);

package/toggle/theme.d.ts

@@ -0,0 +1,4 @@
+export interface ToggleVariants {
+    default: true;
+    reversed: true;
+}

package/toggle/theme.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/toggle/toggle.d.ts

@@ -0,0 +1,12 @@
+import React, { CSSProperties } from "react";
+import { FormControlProps } from "../types";
+import { ToggleVariants } from "./theme";
+export declare type ToggleVariant = keyof ToggleVariants;
+export interface ToggleProps extends FormControlProps<boolean> {
+    className?: string;
+    hiddenLabel?: boolean;
+    label: string;
+    style?: Partial<CSSProperties>;
+    variant?: ToggleVariant;
+}
+export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;

package/toggle/toggle.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toggle = 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"));
+const react_2 = require("@headlessui/react");
+exports.Toggle = (0, forwardRef_1.forwardRef)("Toggle", (props, ref) => {
+    var _a, _b;
+    return (react_1.default.createElement(react_2.Switch.Group, null,
+        react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-toggle__wrapper", `uxf-toggle__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.hiddenLabel && "uxf-toggle__wrapper--hiddenLabel", props.className) },
+            react_1.default.createElement(react_2.Switch, { checked: props.value, className: (0, cx_1.cx)(props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED, "uxf-toggle", `uxf-toggle--${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), disabled: props.isDisabled, name: props.name, onChange: props.onChange, style: props.style, ref: ref },
+                react_1.default.createElement("span", { className: "uxf-toggle__inner" })),
+            react_1.default.createElement(react_2.Switch.Label, { hidden: props.hiddenLabel, className: "uxf-toggle__label" }, props.label))));
+});

package/toggle/toggle.stories.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./toggle").ToggleProps & React.RefAttributes<HTMLButtonElement>>;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/toggle/toggle.stories.js

@@ -0,0 +1,52 @@
+"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 __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.Default = void 0;
+const index_1 = require("./index");
+const react_1 = __importStar(require("react"));
+exports.default = {
+    title: "UI/Toggle",
+    component: index_1.Toggle,
+};
+function Default() {
+    const [checked, setChecked] = (0, react_1.useState)(true);
+    const storyToggles = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: () => {
+                setChecked((prev) => !prev);
+            }, value: checked }),
+        react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: () => {
+                setChecked((prev) => !prev);
+            }, value: checked, isDisabled: true }),
+        react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: () => {
+                setChecked((prev) => !prev);
+            }, value: checked, hiddenLabel: true }),
+        react_1.default.createElement(index_1.Toggle, { label: "Opravdu? (reversed)", onChange: () => {
+                setChecked((prev) => !prev);
+            }, value: checked, variant: "reversed" })));
+    return (react_1.default.createElement("div", { className: "flex" },
+        react_1.default.createElement("div", { className: "light w-1/2 gap-4 p-20" }, storyToggles),
+        react_1.default.createElement("div", { className: "dark w-1/2 gap-4 bg-gray-900 p-20 text-white" }, storyToggles)));
+}
+exports.Default = Default;

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

@@ -0,0 +1,24 @@
+import { ChangeEvent, FocusEventHandler } from "react";
+export interface FormControlProps<ValueType, ElementType = HTMLInputElement, RestParams extends unknown[] = []> {
+    value?: ValueType;
+    onChange?: (value: ValueType, event?: ChangeEvent<ElementType>, ...args: RestParams) => void;
+    onBlur?: FocusEventHandler<ElementType>;
+    onFocus?: FocusEventHandler<ElementType>;
+    name?: string;
+    /**
+     * @about
+     * The input element will be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * @about
+     * It prevents the user from changing the value of the field (not from interacting with the field).
+     */
+    isReadOnly?: boolean;
+    isInvalid?: boolean;
+    isRequired?: boolean;
+}
+export declare type OptionType<ValueType = string, LabelType = string> = {
+    value: ValueType;
+    label: LabelType;
+};

package/types/form-control-props.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/types/index.d.ts

@@ -0,0 +1 @@
+export * from "./form-control-props";

package/types/index.js

@@ -0,0 +1,17 @@
+"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("./form-control-props"), exports);

package/utils/action.d.ts

@@ -0,0 +1,2 @@
+import { HandlerFunction } from "@storybook/addon-actions";
+export declare function action(name: string, handler: HandlerFunction): HandlerFunction;

package/utils/action.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.action = void 0;
+const addon_actions_1 = require("@storybook/addon-actions");
+function action(name, handler) {
+    return function (...args) {
+        (0, addon_actions_1.action)(name)(...args);
+        handler(...args);
+    };
+}
+exports.action = action;

package/utils/component-structure-analyzer.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+interface ComponentStructureAnalyzerProps {
+    children: ReactNode;
+}
+declare function ComponentStructureAnalyzer(props: ComponentStructureAnalyzerProps): JSX.Element;
+export default ComponentStructureAnalyzer;

package/utils/component-structure-analyzer.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"));
+function ComponentStructureAnalyzer(props) {
+    return react_1.default.createElement("div", { className: "uxf-component-structure-analyzer" }, props.children);
+}
+exports.default = ComponentStructureAnalyzer;

package/utils/icons-config.js

@@ -0,0 +1,73 @@
+/** @type {import('@uxf/icons-generator/types').Config['icons']} */
+module.exports = {
+    calendar: {
+        width: 448,
+        height: 512,
+        data: `<path d="M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z" fill="currentColor" />`,
+    },
+    camera: {
+        width: 512,
+        height: 512,
+        data: `<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" fill="currentColor"/>`,
+    },
+    caretDown: {
+        width: 320,
+        height: 512,
+        data: `<path d="M137.4 374.6a32.05 32.05 0 0 0 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9S301 191.9 288 191.9L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z" fill="currentColor"/>`,
+    },
+    clock: {
+        width: 512,
+        height: 512,
+        data: `<path d="M232 120c0-13.3 10.7-24 24-24s24 10.7 24 24v123.2l85.3 56.8c11 7.4 14 22.3 5.8 33.3-6.5 11-21.4 14-32.4 5.8l-96-64c-6.7-3.6-10.7-11.1-10.7-20V120zM256 0c141.4 0 256 114.6 256 256S397.4 512 256 512 0 397.4 0 256 114.6 0 256 0zM48 256c0 114.9 93.1 208 208 208s208-93.1 208-208S370.9 48 256 48 48 141.1 48 256z" fill="currentColor"/>`,
+    },
+    bars: {
+        width: 448,
+        height: 512,
+        data: `<path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z" fill="currentColor" />`,
+    },
+    check: {
+        width: 512,
+        height: 512,
+        data: `<path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" fill="currentColor"/>`,
+    },
+    chevronDown: {
+        width: 512,
+        height: 512,
+        data: `<path 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" fill="currentColor"/>`,
+    },
+    chevronLeft: {
+        width: 384,
+        height: 512,
+        data: `<path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 278.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" fill="currentColor"/>`,
+    },
+    chevronsLeft: {
+        width: 512,
+        height: 512,
+        data: `<path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 278.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192zm384-192l-192 192c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 470.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z" fill="currentColor"/>`,
+    },
+    chevronRight: {
+        width: 384,
+        height: 512,
+        data: `<path d="M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" fill="currentColor"/>`,
+    },
+    chevronsRight: {
+        width: 512,
+        height: 512,
+        data: `<path d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-192-192c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 233.4 425.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l192-192zm-384 192l192-192c12.5-12.5 12.5-32.8 0-45.3l-192-192c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 41.4 425.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z" fill="currentColor"/>`,
+    },
+    chevronUp: {
+        width: 512,
+        height: 512,
+        data: `<path 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" fill="currentColor"/>`,
+    },
+    user: {
+        width: 448,
+        height: 512,
+        data: `<path d="M272 304h-96C78.8 304 0 382.8 0 480a32 32 0 0 0 32 32h384a32 32 0 0 0 32-32c0-97.2-78.8-176-176-176zM48.99 464c7.9-63.1 61.81-112 127.01-112h96c65.16 0 119.1 48.95 127 112H48.99zM224 256c70.69 0 128-57.31 128-128S294.69 0 224 0 96 57.31 96 128c0 70.7 57.3 128 128 128zm0-208c44.11 0 80 35.89 80 80s-35.89 80-80 80-80-35.9-80-80c0-44.11 35.9-80 80-80z" fill="currentColor"/>`,
+    },
+    xmarkLarge: {
+        width: 448,
+        height: 512,
+        data: `<path d="M393.4 41.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L269.3 256l169.3 169.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 301.3 54.6 470.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L178.7 256 9.4 86.6c-12.5-12.5-12.5-32.7 0-45.2s32.8-12.5 45.3 0L224 210.7 393.4 41.4z" fill="currentColor"/>`,
+    },
+};

package/utils/image.d.ts

@@ -0,0 +1,9 @@
+import { ResizerImageProps } from "@uxf/core/utils/resizer";
+import { ReactElement } from "react";
+export interface FileResponse {
+    extension: string;
+    namespace?: string | null;
+    uuid: string;
+}
+export declare function getImgSrcSet(file?: FileResponse, width?: number, height?: number, options?: ResizerImageProps): string | null;
+export declare function getImgSources(file?: FileResponse, width?: number, height?: number): ReactElement | null;

package/utils/image.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getImgSources = exports.getImgSrcSet = void 0;
+const resizer_1 = require("@uxf/core/utils/resizer");
+const react_1 = __importDefault(require("react"));
+const TYPES = ["avif", "webp"];
+function getImgSrcSet(file, width = 200, height = 300, options = {}) {
+    if (!file || !file.uuid || !file.extension || file.extension === "svg") {
+        return null;
+    }
+    const toFormat = TYPES.includes(file.extension) ? "png" : file.extension;
+    return [3, 2, 1]
+        .map((size) => (0, resizer_1.resizerImageUrl)(file, width * size, height * size, { toFormat, ...options }) +
+        (size > 1 ? ` ${size}x` : ""))
+        .join(", ");
+}
+exports.getImgSrcSet = getImgSrcSet;
+function getImgSources(file, width = 200, height = 300) {
+    if (!file || !file.uuid || !file.extension || file.extension === "svg") {
+        return null;
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null, TYPES.map((type) => {
+        var _a;
+        return (react_1.default.createElement("source", { key: type, srcSet: (_a = getImgSrcSet(file, width, height, { toFormat: type })) !== null && _a !== void 0 ? _a : undefined, type: `image/${type}` }));
+    })));
+}
+exports.getImgSources = getImgSources;

package/utils/is-light-background.d.ts

@@ -0,0 +1,2 @@
+export declare type HexCodeString = `#${string}`;
+export declare function isLightBackground(bgColor: HexCodeString): boolean;

package/utils/is-light-background.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isLightBackground = void 0;
+function isLightBackground(bgColor) {
+    const color = bgColor.substring(1, 7);
+    const r = parseInt(color.substring(0, 2), 16); // hexToR
+    const g = parseInt(color.substring(2, 4), 16); // hexToG
+    const b = parseInt(color.substring(4, 6), 16); // hexToB
+    return r * 0.299 + g * 0.587 + b * 0.114 > 146;
+}
+exports.isLightBackground = isLightBackground;

package/utils/localized-dayjs.d.ts

@@ -0,0 +1,2 @@
+import dayjs, { ConfigType } from "dayjs";
+export declare const localizedDayjs: (value?: ConfigType) => dayjs.Dayjs;