@zauru-sdk/components 1.0.13 → 1.0.14

package/dist/Form/FileUpload/index.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DownloadIconSVG, IdeaIconSVG } from "@zauru-sdk/icons";
+import { useAppSelector } from "@zauru-sdk/redux";
+import { useState } from "react";
+export const FileUploadFieldWithoutValidation = (props) => {
+    const { id, name, title, helpText, hint, onChange, disabled = false, readOnly = false, error, fileTypes = [], showAvailableTypes = false, className, defaultValue = undefined, download = false, } = props;
+    const [showTooltip, setShowTooltip] = useState(false);
+    if (typeof defaultValue == "string") {
+        if (download) {
+            return (_jsxs("div", { role: "button", tabIndex: 0, onClick: () => {
+                    window.open(defaultValue, "_blank");
+                }, onKeyDown: (event) => {
+                    // Permite que el evento se active con la tecla Enter
+                    if (event.key === "Enter") {
+                        window.open(defaultValue, "_blank");
+                    }
+                }, children: [title && (_jsx("label", { htmlFor: name, className: "block mb-1 text-sm font-medium text-gray-700", children: title })), " ", _jsx(DownloadIconSVG, {})] }));
+        }
+        return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && (_jsx("label", { htmlFor: name, className: `block mb-1 text-sm font-medium text-gray-700`, children: title })), " ", _jsx("div", { role: "button", tabIndex: 0, onClick: () => {
+                        window.open(defaultValue, "_blank");
+                    }, onKeyDown: (event) => {
+                        // Permite que el evento se active con la tecla Enter
+                        if (event.key === "Enter") {
+                            window.open(defaultValue, "_blank");
+                        }
+                    }, children: _jsx("img", { src: defaultValue, alt: name, className: `h-48 w-48 inline mr-1 pb-1`, style: {
+                            stroke: "currentColor",
+                            strokeWidth: 2,
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            fill: "none",
+                            backgroundColor: "transparent",
+                        } }) })] }));
+    }
+    const handleInputChange = (event) => {
+        onChange && onChange(event);
+    };
+    let hintMessage = hint;
+    if (showAvailableTypes && fileTypes.length > 0) {
+        hintMessage = `${hint} Archivos permitidos: ${fileTypes.join(", ")}`;
+    }
+    const color = error ? "red" : "gray";
+    const isReadOnly = disabled || readOnly;
+    const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
+    const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
+    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-500`;
+    return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && (_jsx("label", { htmlFor: name, className: `block mb-1 text-sm font-medium text-${color}-700`, children: title })), _jsxs("div", { className: "flex relative items-center", children: [_jsx("input", { type: "file", name: name, id: id ?? name, disabled: disabled, readOnly: readOnly, accept: fileTypes.map((ft) => `.${ft}`).join(", "), onChange: handleInputChange, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm` }), helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && hintMessage && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500`, children: hintMessage }))] }));
+};
+export const FileUploadField = (props) => {
+    const { formValidations } = useAppSelector((state) => state.formValidation);
+    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    props = { ...props, error };
+    return _jsx(FileUploadFieldWithoutValidation, { ...props });
+};

package/dist/Form/FormButtons/index.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+type Props = {
+    saveTitle?: string;
+    saveName?: string;
+    onClickSave?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    showCancel?: boolean;
+    cancelTitle?: string;
+    cancelName?: string;
+    showClear?: boolean;
+    clearTitle?: string;
+    clearName?: string;
+    loading?: boolean;
+    loadingSaveText?: string;
+};
+export declare const FormButtons: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Form/FormButtons/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const FormButtons = (props) => {
+    const { saveTitle = "Guardar", saveName = "save", cancelTitle = "Cancelar", cancelName = "cancel", showCancel = true, showClear = false, clearName = "clear", clearTitle = "Limpiar", loading = false, onClickSave, loadingSaveText = "Guardando...", } = props;
+    return (_jsxs(_Fragment, { children: [showClear && (_jsx("button", { type: "reset", name: "action", disabled: loading, value: clearName, className: `ml-5 ${loading ? " bg-opacity-25 cursor-progress" : ""} rounded-md border border-gray-300 bg-white py-2 px-3 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`, children: clearTitle })), showCancel && (_jsx("button", { type: "button", name: "action", disabled: loading, value: cancelName, className: `${showClear ? "ml-2" : "ml-5"} ${loading ? " bg-opacity-25 cursor-progress" : ""} rounded-md border border-gray-300 bg-white py-2 px-3 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`, children: cancelTitle })), _jsx("button", { type: "submit", name: "action", disabled: loading, value: saveName, onClick: onClickSave, className: `ml-2 ${loading ? " bg-opacity-25 cursor-progress" : "hover:bg-indigo-700"} inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`, children: loading ? loadingSaveText : saveTitle })] }));
+};

package/dist/Form/FormLayout/index.d.ts

@@ -0,0 +1,11 @@
+import { type FormMethod } from "@remix-run/react";
+import { type ReactNode } from "react";
+type Props = {
+    formId: string;
+    title?: string;
+    children: ReactNode;
+    buttons?: ReactNode;
+    method?: FormMethod;
+};
+export declare const FormLayout: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Form/FormLayout/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Form } from "@remix-run/react";
+import { ButtonSectionContainer } from "src";
+export const FormLayout = (props) => {
+    const { title, children, buttons, method, formId } = props;
+    return (_jsxs(Form, { id: formId, name: formId, method: method ?? "post", children: [title && (_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-3", children: title })), _jsxs("div", { className: "shadow sm:overflow-hidden sm:rounded-md", children: [_jsx("div", { className: "space-y-6 bg-white px-4 py-5 sm:p-6", children: children }), buttons && (_jsx(ButtonSectionContainer, { children: buttons }))] })] }, formId));
+};

package/dist/Form/SelectField/index.d.ts

@@ -0,0 +1,27 @@
+import { SelectFieldOption } from "@zauru-sdk/types";
+import type { SingleValue, InputActionMeta } from "react-select";
+type Props = {
+    id?: string;
+    formName?: string;
+    name?: string;
+    title?: string;
+    defaultValue?: SingleValue<SelectFieldOption>;
+    defaultValueMulti?: SingleValue<SelectFieldOption>[];
+    helpText?: string;
+    options: Array<SelectFieldOption>;
+    onChange?: (value: SingleValue<SelectFieldOption>) => void;
+    onChangeMulti?: (value: Array<SingleValue<SelectFieldOption>>) => void;
+    onInputChange?: (newValue: string, actionMeta: InputActionMeta) => void;
+    isClearable?: boolean;
+    error?: string | undefined;
+    disabled?: boolean;
+    menuIsOpen?: boolean;
+    readOnly?: boolean;
+    isMulti?: boolean;
+    loading?: boolean;
+    hint?: string;
+    className?: string;
+};
+export declare const SelectFieldWithoutValidation: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectField: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Form/SelectField/index.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { IdeaIconSVG } from "@zauru-sdk/icons";
+import { useAppSelector } from "@zauru-sdk/redux";
+import { useEffect, useState } from "react";
+import Select, { components } from "react-select";
+import { LoadingInputSkeleton } from "src";
+const Input = (props) => (_jsx(components.Input, { ...props, readOnly: props.selectProps.isReadOnly }));
+export const SelectFieldWithoutValidation = (props) => {
+    const { id, name, title, defaultValue, defaultValueMulti = [], helpText, hint, options, onChange, onChangeMulti, isClearable = false, error = false, disabled = false, readOnly = false, isMulti = false, loading = false, className = "", onInputChange, } = props;
+    const [value, setValue] = useState(defaultValue || null);
+    const [valueMulti, setValueMulti] = useState(defaultValueMulti);
+    const [inputValue, setInputValue] = useState("");
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [isClient, setIsClient] = useState(typeof window !== "undefined");
+    const menuIsOpen = readOnly ? false : props?.menuIsOpen;
+    const color = error ? "red" : "gray";
+    let documentRef = null;
+    const isReadOnly = disabled || readOnly;
+    const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
+    const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
+    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-500`;
+    if (typeof window !== "undefined") {
+        documentRef = document;
+    }
+    useEffect(() => {
+        setValue(defaultValue || null);
+    }, [defaultValue]);
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+    if (!isClient || loading || !documentRef) {
+        return (_jsxs(_Fragment, { children: [title && (_jsx("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: title })), _jsx(LoadingInputSkeleton, {}), helpText && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: helpText }))] }));
+    }
+    const handleOnChange = (selection) => {
+        // Verificar si el valor de selección es un objeto con propiedades 'value' y 'label'
+        if (typeof selection === "object" &&
+            selection !== null &&
+            "value" in selection &&
+            "label" in selection) {
+            setValue(selection);
+            onChange && onChange(selection);
+        }
+        else {
+            setValue(null);
+            onChange && onChange(null);
+        }
+    };
+    const handleOnChangeMulti = (selection) => {
+        if (Array.isArray(selection)) {
+            setValueMulti(selection);
+            onChangeMulti &&
+                onChangeMulti(selection);
+        }
+        else {
+            setValueMulti([]);
+            onChangeMulti && onChangeMulti([]);
+        }
+    };
+    const selectComponent = (_jsxs(_Fragment, { children: [_jsx(Select, { className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, id: isMulti ? undefined : id, instanceId: isMulti ? undefined : id, isDisabled: disabled, name: isMulti ? undefined : name, options: options, onChange: isMulti ? handleOnChangeMulti : handleOnChange, defaultValue: isMulti ? valueMulti : value, onInputChange: (newValue, actionMeta) => {
+                    setInputValue(newValue);
+                    onInputChange && onInputChange(newValue, actionMeta);
+                }, inputValue: inputValue, onMenuOpen: () => { }, onMenuClose: () => { }, menuPortalTarget: documentRef?.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 9999 }) }, isClearable: isClearable, isSearchable: true, components: { Input }, menuIsOpen: menuIsOpen, 
+                //windowThreshold={50}
+                isMulti: isMulti }), isMulti && (_jsx("input", { hidden: true, readOnly: true, name: name, value: valueMulti.map((x) => x?.value).join(","), id: id }))] }));
+    return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && (_jsx("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${color === "red"
+                    ? "text-red-700 dark:text-red-500"
+                    : "text-gray-700 dark:text-gray-500"}`, children: title })), _jsxs("div", { className: "flex relative items-center", children: [selectComponent, helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
+};
+export const SelectField = (props) => {
+    const { formValidations } = useAppSelector((state) => state.formValidation);
+    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    props = { ...props, error };
+    return _jsx(SelectFieldWithoutValidation, { ...props });
+};

package/dist/Form/TextArea/index.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+type Props = {
+    id?: string;
+    name: string;
+    formName?: string;
+    title?: string;
+    defaultValue?: string | number;
+    hidden?: boolean;
+    hint?: string;
+    helpText?: string;
+    onChange?: (value: string) => void;
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: string | undefined;
+    rows?: number;
+    cols?: number;
+    stopChangeEvents?: boolean;
+    className?: string;
+};
+export declare const TextAreaWithoutValidation: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const TextArea: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Form/TextArea/index.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAppSelector } from "@zauru-sdk/redux";
+import { useEffect, useState } from "react";
+export const TextAreaWithoutValidation = (props) => {
+    const { id, name, title, defaultValue = "", hidden, hint, onChange, onKeyDown, disabled = false, error = false, readOnly = false, rows, cols, stopChangeEvents, className = "", } = props;
+    const [value, setValue] = useState(defaultValue);
+    const color = error ? "red" : "gray";
+    const isReadOnly = disabled || readOnly;
+    const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
+    const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
+    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-500`;
+    useEffect(() => {
+        setValue(defaultValue);
+    }, [defaultValue]);
+    if (hidden) {
+        return (_jsx("textarea", { id: id ?? name, name: name, value: defaultValue, readOnly: true, hidden: true }));
+    }
+    const handleInputChange = (event) => {
+        if (stopChangeEvents) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+        setValue(event.target.value);
+        onChange && onChange(event.target.value);
+    };
+    return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && (_jsx("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: title })), _jsx("textarea", { name: name, readOnly: readOnly, disabled: disabled, id: id ?? name, autoComplete: "given-name", value: value, rows: rows, cols: cols, onChange: handleInputChange, onKeyDown: (event) => {
+                    onKeyDown && onKeyDown(event);
+                }, className: `mt-1 block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm` }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
+};
+//<reference> https://tailwindui.com/components/application-ui/forms/form-layouts
+export const TextArea = (props) => {
+    const { formValidations } = useAppSelector((state) => state.formValidation);
+    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    props = { ...props, error };
+    return _jsx(TextAreaWithoutValidation, { ...props });
+};

package/dist/Form/TextField/index.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+type Props = {
+    id?: string;
+    name?: string;
+    formName?: string;
+    title?: string;
+    defaultValue?: string | number;
+    hidden?: boolean;
+    type?: React.HTMLInputTypeAttribute;
+    helpText?: string;
+    hint?: string;
+    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: string;
+    min?: string | number;
+    integer?: boolean;
+    stopChangeEvents?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+};
+export declare const TextFieldWithoutValidation: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const TextField: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Form/TextField/index.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IdeaIconSVG } from "@zauru-sdk/icons";
+import { useAppSelector } from "@zauru-sdk/redux";
+import { useEffect, useState } from "react";
+export const TextFieldWithoutValidation = (props) => {
+    const { id, name, defaultValue = "", hidden, type = "text", onChange, onKeyDown, disabled = false, readOnly = false, min, integer = false, stopChangeEvents, style, error, title, helpText, className, hint, } = props;
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [value, setValue] = useState(defaultValue);
+    const color = error ? "red" : "gray";
+    const isReadOnly = disabled || readOnly;
+    const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
+    const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
+    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-500`;
+    useEffect(() => {
+        setValue(defaultValue);
+    }, [defaultValue]);
+    if (hidden) {
+        return (_jsx("input", { type: type, id: id ?? name, name: name, value: defaultValue, readOnly: true, hidden: true }));
+    }
+    const handleInputChange = (event) => {
+        if (stopChangeEvents) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+        if (integer && type === "number") {
+            const value = event.target.value;
+            const isInteger = /^[0-9]*$/.test(value);
+            if (isInteger || value === "") {
+                setValue(value);
+                onChange && onChange(value, event);
+            }
+        }
+        else {
+            setValue(event.target.value);
+            onChange && onChange(event.target.value, event);
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (integer && type === "number") {
+            // Permitir solo números y teclas de control
+            const allowedKeys = [
+                "Backspace",
+                "ArrowLeft",
+                "ArrowRight",
+                "Delete",
+                "Enter",
+                "Tab",
+            ];
+            if (!allowedKeys.includes(event.key) && !/^[0-9]$/.test(event.key)) {
+                event.preventDefault();
+            }
+        }
+    };
+    const inputComponent = (_jsx("input", { type: type, name: name, readOnly: readOnly, disabled: disabled, id: id ?? name, autoComplete: "given-name", value: value, onWheel: (e) => {
+            e.currentTarget.blur();
+        }, step: type === "number" ? 0.01 : undefined, onChange: handleInputChange, onKeyDown: (event) => {
+            handleKeyDown(event);
+            onKeyDown && onKeyDown(event);
+        }, min: min, style: style, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm` }));
+    if (!error && !title) {
+        return _jsx("div", { className: `${className}`, children: inputComponent });
+    }
+    return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && (_jsx("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block mb-1 text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: title })), _jsxs("div", { className: "flex relative items-center", children: [inputComponent, helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50", children: helpText }))] }) }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
+};
+export const TextField = (props) => {
+    const { formValidations } = useAppSelector((state) => state.formValidation);
+    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    props = { ...props, error };
+    return _jsx(TextFieldWithoutValidation, { ...props });
+};

package/dist/Form/TimePicker/index.d.ts

@@ -0,0 +1,16 @@
+type Props = {
+    id?: string;
+    name: string;
+    formName?: string;
+    title?: string;
+    hint?: string;
+    helpText?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    tabIndex?: number;
+    error?: string;
+    disabled?: boolean;
+};
+export declare const FormTimePickerWithoutValidation: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const FormTimePicker: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Form/TimePicker/index.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ClockIconSVG, CloseSvgIcon, IdeaIconSVG } from "@zauru-sdk/icons";
+import { useAppSelector } from "@zauru-sdk/redux";
+import { useEffect, useState } from "react";
+export const FormTimePickerWithoutValidation = (props) => {
+    const { id, name, title, defaultValue = "", hint, helpText, onChange, tabIndex, error, disabled = false, } = props;
+    const [value, setValue] = useState(defaultValue);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const color = error ? "red" : "gray";
+    const isReadOnly = disabled;
+    const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
+    const textColor = isReadOnly ? "text-gray-500" : `text-${color}-500`;
+    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
+    useEffect(() => {
+        setValue(defaultValue);
+    }, [defaultValue]);
+    const clearValue = () => {
+        setValue("");
+        onChange && onChange("");
+    };
+    return (_jsxs(_Fragment, { children: [title && (_jsx("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor}`, children: title })), _jsxs("div", { className: "flex relative items-center", children: [_jsx("div", { className: "absolute left-0 flex items-center pl-3 pointer-events-none", children: _jsx(ClockIconSVG, {}) }), _jsx("input", { id: id, name: name, tabIndex: tabIndex, type: "time", onChange: (e) => {
+                            setValue(e.target.value);
+                            onChange && onChange(e.target.value);
+                        }, value: value, pattern: "\\d{2}:\\d{2}", className: `${bgColor} ${borderColor} ${textColor} text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5` }), value && (_jsx("button", { type: "button", onClick: clearValue, className: "absolute right-0 mr-10", children: _jsx(CloseSvgIcon, {}) })), helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black", children: helpText }))] }) }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
+};
+export const FormTimePicker = (props) => {
+    const { formValidations } = useAppSelector((state) => state.formValidation);
+    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    props = { ...props, error };
+    return _jsx(FormTimePickerWithoutValidation, { ...props });
+};

package/dist/Form/YesNo/index.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    id?: string;
+    name: string;
+    formName?: string;
+    title?: string;
+    defaultValue?: boolean;
+    helpText?: string;
+    onChange?: (value: boolean) => void;
+    disabled?: boolean;
+};
+declare const YesNo: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default YesNo;

package/dist/Form/YesNo/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useAppSelector } from "@zauru-sdk/redux";
+import { useState } from "react";
+const YesNo = (props) => {
+    const { id, name, title, defaultValue = false, helpText, onChange, disabled, } = props;
+    const { formValidations } = useAppSelector((state) => state.formValidation);
+    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+    const [value, setValue] = useState(defaultValue);
+    const color = error ? "red" : "gray";
+    const handleOnChange = () => {
+        if (disabled)
+            return; // No hacer nada si está deshabilitado
+        const newValue = !value;
+        setValue(newValue);
+        onChange && onChange(newValue);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("label", { className: `relative inline-flex items-center cursor-pointer ${disabled ? "opacity-50" : ""}`, children: [_jsx("input", { type: "checkbox", id: id ?? name, name: name, checked: value, value: value.toString(), className: "sr-only peer", onChange: handleOnChange, disabled: disabled }), value.toString() === "false" && (_jsx("input", { type: "hidden", name: name, value: "false" })), _jsx("div", { className: "w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600" }), _jsx("span", { className: "ml-3 text-sm font-medium text-gray-900", children: title })] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error] })), !error && helpText && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: helpText }))] }));
+};
+export default YesNo;

package/dist/Form/index.d.ts

@@ -0,0 +1,13 @@
+export * from "./Checkbox";
+export * from "./Checklist";
+export * from "./DatePicker";
+export * from "./DynamicBaculoForm";
+export * from "./FieldContainer";
+export * from "./FileUpload";
+export * from "./FormButtons";
+export * from "./FormLayout";
+export * from "./SelectField";
+export * from "./TextArea";
+export * from "./TextField";
+export * from "./TimePicker";
+export * from "./YesNo";

package/dist/Form/index.js

@@ -0,0 +1,13 @@
+export * from "./Checkbox";
+export * from "./Checklist";
+export * from "./DatePicker";
+export * from "./DynamicBaculoForm";
+export * from "./FieldContainer";
+export * from "./FileUpload";
+export * from "./FormButtons";
+export * from "./FormLayout";
+export * from "./SelectField";
+export * from "./TextArea";
+export * from "./TextField";
+export * from "./TimePicker";
+export * from "./YesNo";

package/dist/Zendesk/Chat.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const logoutFromZendesk: () => void;
+export declare const ZendeskAPI: (...args: any[]) => void;
+interface ZendeskProps {
+    defer?: boolean;
+    onLoaded?: () => void;
+    token: string;
+    configuration: {
+        zendeskChatKey: string;
+    };
+    [key: string]: any;
+}
+declare const Zendesk: React.FC<ZendeskProps>;
+export default Zendesk;

package/dist/Zendesk/Chat.js

@@ -0,0 +1,64 @@
+import { useEffect } from "react";
+const canUseDOM = () => {
+    if (typeof window === "undefined" ||
+        !window.document ||
+        !window.document.createElement) {
+        return false;
+    }
+    return true;
+};
+export const logoutFromZendesk = () => {
+    if (canUseDOM() && window.zE) {
+        window.zE("messenger", "logoutUser");
+    }
+    else {
+        console.warn("Zendesk is not initialized yet");
+    }
+};
+export const ZendeskAPI = (...args) => {
+    if (canUseDOM() && window.zE) {
+        window.zE.apply(null, args);
+    }
+    else {
+        console.warn("Zendesk is not initialized yet");
+    }
+};
+const Zendesk = (props) => {
+    const { defer, configuration, token, ...other } = props;
+    useEffect(() => {
+        const insertScript = () => {
+            const zendeskScript = document.createElement("script");
+            if (defer) {
+                zendeskScript.defer = true;
+            }
+            else {
+                zendeskScript.async = true;
+            }
+            zendeskScript.id = "ze-snippet";
+            zendeskScript.src = `https://static.zdassets.com/ekr/snippet.js?key=${configuration.zendeskChatKey}`;
+            zendeskScript.addEventListener("load", () => {
+                if (props.onLoaded) {
+                    props.onLoaded();
+                }
+                window.zE("messenger", "loginUser", function (callback) {
+                    callback(token);
+                });
+            });
+            document.body.appendChild(zendeskScript);
+            return zendeskScript; // Devolvemos la referencia del script
+        };
+        let script; // Guardamos la referencia del script aquí
+        if (canUseDOM() && !window.zE) {
+            script = insertScript();
+            window.zESettings = other;
+        }
+        return () => {
+            if (script) {
+                // Si el script existe, lo eliminamos del DOM
+                script.remove();
+            }
+        };
+    }, [props, defer, other, configuration, token]);
+    return null;
+};
+export default Zendesk;

package/dist/Zendesk/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Chat";
+export * from "./zendesk.config";

package/dist/Zendesk/index.js

@@ -0,0 +1,2 @@
+export * from "./Chat";
+export * from "./zendesk.config";

package/dist/Zendesk/zendesk.config.d.ts

@@ -0,0 +1,9 @@
+export declare function zendeskJwt(current_user: {
+    selected_entity_id: number;
+    id: number;
+    email: string;
+    name: string;
+}, configuration: {
+    zendeskJWTSecret: string;
+    zendeskJWTKey: string;
+}): string;

package/dist/Zendesk/zendesk.config.js

@@ -0,0 +1,24 @@
+import jwt from "jsonwebtoken";
+export function zendeskJwt(current_user, configuration) {
+    // get the INFO
+    const jwtSecret = configuration.zendeskJWTSecret;
+    const jwtKey = configuration.zendeskJWTKey;
+    const expiresIn = Math.floor(Date.now() / 1000) + 60 * 60 * 24; // Expires in 1 day
+    // create the payload
+    const payload = {
+        external_id: "z" +
+            current_user.selected_entity_id.toString() +
+            "-" +
+            current_user.id.toString(),
+        email: current_user.email,
+        name: current_user.name,
+        organization_id: current_user.selected_entity_id.toString(),
+        scope: "user",
+        exp: expiresIn,
+    };
+    const jwtHeader = { kid: jwtKey, typ: "JWT", alg: "HS256" };
+    return jwt.sign(payload, jwtSecret, {
+        algorithm: "HS256",
+        header: jwtHeader,
+    });
+}

package/dist/index.d.ts

@@ -2,8 +2,11 @@ export * from "./Alerts";
 export * from "./BlockUI";
 export * from "./Buttons";
 export * from "./Card";
+export * from "./ConnectionState";
+export * from "./Chat";
 export * from "./Containers";
 export * from "./Footer";
+export * from "./Form";
 export * from "./Labels";
 export * from "./Layouts";
 export * from "./LineSeparator";
@@ -17,3 +20,4 @@ export * from "./Titles";
 export * from "./Tooltip";
 export * from "./WithTooltip";
 export * from "./Wizards";
+export * from "./Zendesk";