@zauru-sdk/components 1.0.12 → 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/NavBar/NavBar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
-import { DropDownArrowSvgIcon, LogoutDropDownSvgIcon, MenuAlt4Svg, OpcionButtonSvgIcon, } from "../Icons/Icons";
+import { DropDownArrowSvgIcon, LogoutDropDownSvgIcon, MenuAlt4Svg, OpcionButtonSvgIcon, } from "@zauru-sdk/icons";
 import { COLORS } from "./NavBar.utils";
 import { Link } from "@remix-run/react";
 const DropDownLinkButton = ({ text, path, icon, buttonHover, }) => (_jsx(Link, { className: `block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 ${buttonHover ?? ""} dark:hover:bg-gray-700 dark:hover:text-white`, to: path, prefetch: "none", children: _jsxs("div", { className: "mx-auto pt-2", children: [icon, _jsx("span", { children: text })] }) }));
@@ -28,5 +28,5 @@ export const NavBar = ({ title, loggedIn, items, selectedColor, }) => {
                     .map((item, index) => {
                     return (_jsx(NavItem, { name: item.name, link: item.link, icon: item.icon, color: color }, index));
                 })) })] }));
-    return (_jsx("nav", { className: `py-3 ${color.bg600}`, children: _jsxs("div", { className: "flex items-center justify-between ml-5 mr-5", children: [_jsxs("div", { className: "flex justify-between w-full lg:w-auto", children: [_jsx(Link, { className: "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white", to: "/home", prefetch: "none", children: _jsxs(_Fragment, { children: [_jsx("div", { className: "inline-block mr-2 mb-2 align-middle", children: _jsx("img", { className: "w-auto h-7", src: "/logo.png", alt: "logo-zauru" }) }), title] }) }), _jsx("button", { className: `rounded lg:hidden focus:outline-none focus:ring focus:${color.ring600} focus:ring-opacity-50`, "aria-label": "Toggle mobile menu", type: "button", onClick: () => setNavBarOpen(!NavBarOpen), children: _jsx(MenuAlt4Svg, { NavBarOpen: NavBarOpen, setNavBarOpen: undefined }) })] }), _jsx("div", { className: `lg:hidden absolute top-0 left-0 z-50 w-64 h-full ${color.bg700} shadow-lg transform ${NavBarOpen ? "translate-x-0" : "-translate-x-full"} transition-transform duration-300 ease-in-out`, children: options }), _jsx("div", { className: "hidden lg:flex w-full lg:w-auto", children: options })] }) }));
+    return (_jsx("nav", { className: `py-3 ${color.bg600}`, children: _jsxs("div", { className: "flex items-center justify-between ml-5 mr-5", children: [_jsxs("div", { className: "flex justify-between w-full lg:w-auto", children: [_jsx(Link, { className: "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white", to: "/home", prefetch: "none", children: _jsxs(_Fragment, { children: [_jsx("div", { className: "inline-block mr-2 mb-2 align-middle", children: _jsx("img", { className: "w-auto h-7", src: "/logo.png", alt: "logo-zauru" }) }), title] }) }), _jsx("button", { className: `rounded lg:hidden focus:outline-none focus:ring focus:${color.ring600} focus:ring-opacity-50`, "aria-label": "Toggle mobile menu", type: "button", onClick: () => setNavBarOpen(!NavBarOpen), children: _jsx(MenuAlt4Svg, { open: NavBarOpen }) })] }), _jsx("div", { className: `lg:hidden absolute top-0 left-0 z-50 w-64 h-full ${color.bg700} shadow-lg transform ${NavBarOpen ? "translate-x-0" : "-translate-x-full"} transition-transform duration-300 ease-in-out`, children: options }), _jsx("div", { className: "hidden lg:flex w-full lg:w-auto", children: options })] }) }));
 };

package/dist/Table/ZauruTable.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useSearchParams } from "@remix-run/react";
 import { useEffect, useState } from "react";
 import DataTable, { createTheme } from "react-data-table-component";
-import { SearchSVG } from "../Icons/Icons";
+import { SearchSVG } from "@zauru-sdk/icons";
 const customStyles = {
     headCells: {
         style: {

package/dist/Zendesk/Chat.d.ts

@@ -10,5 +10,5 @@ interface ZendeskProps {
     };
     [key: string]: any;
 }
-export declare const Zendesk: React.FC<ZendeskProps>;
-export {};
+declare const Zendesk: React.FC<ZendeskProps>;
+export default Zendesk;

package/dist/Zendesk/Chat.js

@@ -23,7 +23,7 @@ export const ZendeskAPI = (...args) => {
         console.warn("Zendesk is not initialized yet");
     }
 };
-export const Zendesk = (props) => {
+const Zendesk = (props) => {
     const { defer, configuration, token, ...other } = props;
     useEffect(() => {
         const insertScript = () => {
@@ -61,3 +61,4 @@ export const Zendesk = (props) => {
     }, [props, defer, other, configuration, token]);
     return null;
 };
+export default Zendesk;

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

@@ -6,4 +6,4 @@ export declare function zendeskJwt(current_user: {
 }, configuration: {
     zendeskJWTSecret: string;
     zendeskJWTKey: string;
-}): any;
+}): string;

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";

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,6 +15,7 @@
   "author": "Oscar Cuéllar",
   "license": "MIT",
   "devDependencies": {
+    "@types/jsonwebtoken": "^9.0.2",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "eslint": "^8.38.0",
@@ -31,13 +32,13 @@
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/react": "^2.8.1",
-    "@zauru-sdk/common": "^1.0.10",
-    "@zauru-sdk/graphql": "^1.0.9",
-    "@zauru-sdk/services": "^1.0.10",
-    "@zauru-sdk/types": "^1.0.10",
-    "@zauru-sdk/utils": "^1.0.10",
+    "@zauru-sdk/common": "^1.0.13",
+    "@zauru-sdk/hooks": "^1.0.13",
+    "@zauru-sdk/icons": "^1.0.13",
+    "@zauru-sdk/types": "^1.0.13",
+    "@zauru-sdk/utils": "^1.0.13",
     "framer-motion": "^11.0.8",
-    "jsonwebtoken": "9.0.2",
+    "jsonwebtoken": "^9.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
@@ -47,5 +48,5 @@
   "engines": {
     "node": ">=18.0.0"
   },
-  "gitHead": "39d7ad9b27500e7873b58d4222859d5cff7056b2"
+  "gitHead": "47cb7f76fbc0d2b66e4caf7294ed1cc067a19f0f"
 }

package/src/Alerts/index.ts

@@ -1,3 +1,2 @@
 export * from "./ErrorBoundaryAlert/ErrorBoundaryAlert";
-export * from "./Alert";
 export * from "./StaticAlert";