@zauru-sdk/components 1.0.51 → 1.0.52

package/dist/Footer/Footer.d.ts

@@ -1,7 +0,0 @@
-type FooterProps = {
-    href: string;
-    showConnection?: boolean;
-    selectedColor: "purple" | "pink" | "indigo" | "cyan" | "slate" | "green" | "red" | "sky";
-};
-export declare const Footer: ({ href, selectedColor, showConnection, }: FooterProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Footer/Footer.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ConnectionState } from "./../ConnectionState/index.js";
-const COLORS = {
-    purple: "bg-purple-500",
-    pink: "bg-pink-500",
-    indigo: "bg-indigo-500",
-    cyan: "bg-cyan-500",
-    slate: "bg-slate-500",
-    green: "bg-green-500",
-    red: "bg-red-500",
-    sky: "bg-sky-500",
-};
-export const Footer = ({ href, selectedColor, showConnection = false, }) => {
-    const color = COLORS[selectedColor];
-    return (_jsx("footer", { className: `inset-x-0 bottom-0 px-2 py-[20px] ${color}`, children: _jsxs("div", { className: "px-4 mx-auto flex flex-wrap items-center justify-center", children: [_jsxs("p", { className: "text-white text-[1.2rem]", children: [`Creado en `, " ", _jsx("a", { href: href, children: "Zauru" }), " ", `con ❤️ ${new Date().getFullYear()} v.3.2`] }), showConnection && (_jsx("div", { className: "ml-5", children: _jsx(ConnectionState, {}) }))] }) }));
-};

package/dist/Footer/index.d.ts

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

package/dist/Footer/index.js

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

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

@@ -1,17 +0,0 @@
-import React from "react";
-type Props = {
-    id?: string;
-    name?: string;
-    formName?: string;
-    label?: string;
-    defaultValue?: boolean;
-    onChange?: (value: boolean, event: React.ChangeEvent<HTMLInputElement>) => {
-        stopUIChange: boolean;
-    } | void;
-    disabled?: boolean;
-    error?: string | undefined;
-    borderColor?: string;
-};
-export declare const CheckboxWithoutValidation: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export declare const CheckBox: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Form/Checkbox/index.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAppSelector } from "@zauru-sdk/redux";
-import { useEffect, useState } from "react";
-export const CheckboxWithoutValidation = (props) => {
-    const { id, name, defaultValue = false, onChange, disabled = false, error, label, } = props;
-    const [checked, setChecked] = useState(defaultValue);
-    useEffect(() => {
-        setChecked(defaultValue);
-    }, [defaultValue]);
-    const handleInputChange = (event) => {
-        const isChecked = event.target.checked;
-        if (onChange) {
-            const result = onChange(isChecked, event);
-            if (result?.stopUIChange) {
-                return;
-            }
-        }
-        setChecked(isChecked);
-    };
-    const color = error ? "red" : "gray";
-    const borderColor = disabled ? "border-gray-300" : `border-${color}-500`;
-    const inputComponent = (_jsx("input", { type: "checkbox", id: id ?? name, name: name, checked: checked, onChange: handleInputChange, className: `form-checkbox h-4 w-4 text-indigo-600 ${borderColor} focus:border-indigo-500 focus:ring-indigo-500`, disabled: disabled }));
-    if (!error && !label) {
-        return inputComponent;
-    }
-    return (_jsxs("div", { className: "col-span-6 sm:col-span-3", children: [_jsxs("div", { className: `flex items-center ${borderColor}`, children: [inputComponent, label && (_jsx("label", { htmlFor: id ?? name, className: `ml-2 block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: label }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error] }))] }));
-};
-//<reference> https://tailwindui.com/components/application-ui/forms/form-layouts
-export const CheckBox = (props) => {
-    const { formValidations } = useAppSelector((state) => state.formValidation);
-    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
-    props = { ...props, error };
-    return _jsx(CheckboxWithoutValidation, { ...props });
-};

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

@@ -1,14 +0,0 @@
-import React from "react";
-export type ChecklistItem = {
-    id: string;
-    name: string;
-    label: string;
-    defaultValue?: boolean;
-    disabled?: boolean;
-};
-type ChecklistProps = {
-    items: ChecklistItem[];
-    onChange?: (name: string, value: boolean) => void;
-};
-export declare const Checklist: React.FC<ChecklistProps>;
-export {};

package/dist/Form/Checklist/index.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { CheckboxWithoutValidation } from "../Checkbox/index.js";
-export const Checklist = ({ items, onChange }) => {
-    const handleCheckboxChange = (name, value) => {
-        if (onChange) {
-            onChange(name, value);
-        }
-    };
-    return (_jsx("div", { children: items.map((item) => (_jsx(CheckboxWithoutValidation, { ...item, onChange: (value) => handleCheckboxChange(item.name, value) }, item.id))) }));
-};

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

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

package/dist/Form/DatePicker/index.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { CalendarIconSVG, CloseSvgIcon, IdeaIconSVG } from "@zauru-sdk/icons";
-import { useAppSelector } from "@zauru-sdk/redux";
-export const FormDatePickerWithoutValidation = (props) => {
-    const { id, name, title, defaultValue = "", hint, helpText, onChange, tabIndex, error, disabled = false, className = "", isClearable = 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} ${className}`, 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(CalendarIconSVG, {}) }), _jsx("input", { id: id, name: name, tabIndex: tabIndex, type: "date", onChange: (e) => {
-                            setValue(e.target.value);
-                            onChange && onChange(e.target.value);
-                        }, value: value ?? "", pattern: "\\d{4}-\\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 && isClearable && (_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 FormDatePicker = (props) => {
-    const { formValidations } = useAppSelector((state) => state.formValidation);
-    const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
-    props = { ...props, error };
-    return _jsx(FormDatePickerWithoutValidation, { ...props });
-};

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

@@ -1,18 +0,0 @@
-import { FormGraphQL, FormSubmissionValueGraphQL } from "@zauru-sdk/types";
-type Props = {
-    formName?: string;
-    form?: FormGraphQL;
-    options?: {
-        showTitle: boolean;
-        showDescription: boolean;
-    };
-    defaultValues?: FormSubmissionValueGraphQL[];
-    namesStr?: string;
-    showingRules?: {
-        name: string;
-        show: boolean;
-    }[];
-    readOnly?: boolean;
-};
-export declare function DynamicBaculoForm(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Form/DynamicBaculoForm/index.js

@@ -1,140 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TextField, TextFieldWithoutValidation } from "../TextField/index.js";
-import { TripleFieldContainer } from "../FieldContainer/index.js";
-import { DoubleFieldContainer } from "../FieldContainer/index.js";
-import { YesNo } from "../YesNo/index.js";
-import { TextArea } from "../TextArea/index.js";
-import { SelectField } from "../SelectField/index.js";
-import { FileUploadField } from "../FileUpload/index.js";
-import { FormDatePicker } from "../DatePicker/index.js";
-import { FormTimePicker } from "../TimePicker/index.js";
-import { GenericDynamicTable } from "../../DynamicTable/GenericDynamicTable.js";
-import { getDepSelectOptions, getMunSelectOptions } from "@zauru-sdk/common";
-import { StaticAlert } from "../../Alerts/index.js";
-import { SubContainer } from "../../Containers/index.js";
-import { LineSeparator } from "../../LineSeparator/index.js";
-export function DynamicBaculoForm(props) {
-    const { form, options = { showDescription: false, showTitle: false }, formName = "", namesStr = "", defaultValues = [], showingRules = [], readOnly = false, } = props;
-    if (!form) {
-        return (_jsx(StaticAlert, { title: "No se encontr\u00F3 el formulario din\u00E1mico", description: `Ocurrió un error encontrando el formulario para ${formName}, contacte al administrador con este mensaje de error.`, type: "info" }));
-    }
-    const renderFieldComponent = (field) => {
-        const defaultValue = defaultValues?.find((x) => x.settings_form_field.print_var_name === field.print_var_name);
-        switch (field.field_type) {
-            case "fixed_rows_table":
-            case "fixed_columns_table": {
-                const columns = field.settings_form_field_table_headers?.map((x) => {
-                    return {
-                        label: x.name,
-                        name: `${namesStr}${x.id}_${field.id}`,
-                        type: x.cell_type === "yes_no" ? "checkbox" : "textField",
-                    };
-                }) ?? [];
-                return (_jsx(SubContainer, { title: field.name, children: _jsx(GenericDynamicTable, { name: "fixed_columns_table", columns: columns }) }, field.id));
-            }
-            case "zauru_data":
-                return (_jsx(TextFieldWithoutValidation, { title: `${field.required ? "*" : ""}${field.name}`, hint: field.hint, defaultValue: defaultValue?.value ?? field.default_value, disabled: true }, field.id));
-            case "hour":
-                return (_jsx(FormTimePicker, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, disabled: readOnly, defaultValue: defaultValue?.value }, field.id));
-            case "date":
-                return (_jsx(FormDatePicker, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, disabled: readOnly, defaultValue: defaultValue?.value }, field.id));
-            case "file":
-                return (_jsx(FileUploadField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, disabled: readOnly, defaultValue: defaultValue?.value, download: true }, field.id));
-            case "image":
-                return (_jsx(FileUploadField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, showAvailableTypes: true, fileTypes: ["png", "jpg", "jpeg"], disabled: readOnly, defaultValue: defaultValue?.value }, field.id));
-            case "pdf":
-                return (_jsx(FileUploadField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, showAvailableTypes: true, fileTypes: ["pdf"], disabled: readOnly, defaultValue: defaultValue?.value, download: true }, field.id));
-            case "email":
-            case "url":
-            case "text":
-            case "currency":
-            case "country":
-                return (_jsx(TextField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, defaultValue: defaultValue?.value ?? field.default_value, disabled: readOnly }, field.id));
-            case "percentage":
-            case "number":
-                return (_jsx(TextField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, defaultValue: defaultValue?.value ?? field.default_value, type: "number", disabled: readOnly }, field.id));
-            case "yes_no":
-                return (_jsx(YesNo, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, disabled: readOnly, defaultValue: field.default_value === "true" || defaultValue?.value === "true" }, field.id));
-            case "section":
-                return (_jsxs("div", { children: [_jsx(LineSeparator, {}), _jsx("h3", { className: "mb-10 text-3xl font-bold leading-8 text-gray-900", children: field.name })] }, field.id));
-            case "multi_line_text":
-                return (_jsx(TextArea, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, defaultValue: defaultValue?.value ?? field.default_value, hint: field.hint, disabled: readOnly }, field.id));
-            case "gt_departamentos": {
-                const optionsDep = getDepSelectOptions();
-                return (_jsx(SelectField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, isClearable: !field.required, options: optionsDep, disabled: readOnly, defaultValue: optionsDep.find((x) => x.value === defaultValue?.value) }, field.id));
-            }
-            case "gt_municipios": {
-                const options = getMunSelectOptions();
-                return (_jsx(SelectField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, isClearable: !field.required, options: options, disabled: readOnly, defaultValue: options.find((x) => x.value === defaultValue?.value) }, field.id));
-            }
-            case "single_select_options": {
-                const formFieldOptions = field.settings_form_field_options?.map((x) => {
-                    return { label: x.label, value: x.value };
-                }) ?? [];
-                return (_jsx(SelectField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, isClearable: !field.required, options: formFieldOptions, disabled: readOnly, defaultValue: formFieldOptions.find((x) => x.value === defaultValue?.value) }, field.id));
-            }
-            case "multi_select_options": {
-                const formFieldOptions2 = field.settings_form_field_options?.map((x) => {
-                    return { label: x.label, value: x.value };
-                }) ?? [];
-                const defaultValuesMulti = (() => {
-                    const values = defaultValue?.value?.split(",").map((str) => str.trim()) ?? [];
-                    return formFieldOptions2.filter((x) => values.includes(x.value));
-                })();
-                return (_jsx(SelectField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, isClearable: !field.required, isMulti: true, options: formFieldOptions2, defaultValueMulti: defaultValuesMulti, disabled: readOnly }, field.id));
-            }
-            default:
-                return (_jsxs("div", { children: ["Componente no encontrado para: ", field.field_type] }, field.id)); // o algún componente por defecto si lo prefieres
-        }
-    };
-    const renderFields = () => {
-        const fields = form.settings_form_fields;
-        const fieldGroups = [];
-        let tempGroup = [];
-        fields.forEach((field, i) => {
-            const rule = showingRules.find((x) => x.name === field.name);
-            if (!(rule && !rule.show)) {
-                const renderedField = renderFieldComponent(field);
-                if (renderedField === null) {
-                    return;
-                }
-                tempGroup.push(renderedField);
-                const isLastField = i === fields.length - 1;
-                const isSectionField = field.field_type === "section";
-                if (isSectionField) {
-                    tempGroup.pop();
-                    if (tempGroup.length === 1) {
-                        fieldGroups.push(tempGroup[0]);
-                    }
-                    else if (tempGroup.length === 2) {
-                        fieldGroups.push(_jsx(DoubleFieldContainer, { children: tempGroup }, i));
-                    }
-                    else if (tempGroup.length === 3) {
-                        fieldGroups.push(_jsx(TripleFieldContainer, { children: tempGroup }, i));
-                    }
-                    fieldGroups.push(renderedField);
-                    tempGroup = [];
-                }
-                else if (isLastField) {
-                    if (tempGroup.length === 1) {
-                        fieldGroups.push(tempGroup[0]);
-                    }
-                    else if (tempGroup.length === 2) {
-                        fieldGroups.push(_jsx(DoubleFieldContainer, { children: tempGroup }, i));
-                    }
-                    else if (tempGroup.length === 3) {
-                        fieldGroups.push(_jsx(TripleFieldContainer, { children: tempGroup }, i));
-                    }
-                    tempGroup = [];
-                }
-                else if (tempGroup.length === 3) {
-                    // Si hay 3 elementos en el grupo temporal y el siguiente campo no es 'section', se agrega a fieldGroups
-                    fieldGroups.push(_jsx(TripleFieldContainer, { children: tempGroup }, i));
-                    tempGroup = [];
-                }
-            }
-        });
-        return fieldGroups;
-    };
-    return (_jsx(SubContainer, { title: options?.showTitle ? form.name : undefined, description: options?.showDescription ? form.description : undefined, children: renderFields() }));
-}

package/dist/Form/FieldContainer/DoubleFieldContainer.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-type Props = {
-    children: React.ReactNode;
-    className?: string;
-    alignCenter?: boolean;
-};
-export declare const DoubleFieldContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Form/FieldContainer/DoubleFieldContainer.js

@@ -1,14 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const DoubleFieldContainer = (props) => {
-    const { children, className, alignCenter = true } = props;
-    const getChildren = (index) => {
-        if (children && Array.isArray(children) && children[index]) {
-            return children[index];
-        }
-        if (children && index === 0) {
-            return children;
-        }
-        return _jsx(_Fragment, {});
-    };
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: `grid md:grid-cols-2 sm:grid-cols-1 gap-4 ${className}`, style: alignCenter ? { alignItems: "center" } : {}, children: [_jsx("div", { className: "col-span-1", children: getChildren(0) }), _jsx("div", { className: "col-span-1", children: getChildren(1) })] }) }));
-};

package/dist/Form/FieldContainer/QuadrupleFieldContainer.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-type Props = {
-    children: React.ReactNode;
-    className?: string;
-};
-export declare const QuadrupleFieldContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Form/FieldContainer/QuadrupleFieldContainer.js

@@ -1,14 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const QuadrupleFieldContainer = (props) => {
-    const { children, className } = props;
-    const getChildren = (index) => {
-        if (children && Array.isArray(children) && children[index]) {
-            return children[index];
-        }
-        if (children && index === 0) {
-            return children;
-        }
-        return _jsx(_Fragment, {});
-    };
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: `grid lg:grid-cols-4 sm:grid-cols-2 xs:grid-cols-1 gap-4 ${className}`, style: { alignItems: "center" }, children: [_jsx("div", { className: "col-span-1", children: getChildren(0) }), _jsx("div", { className: "col-span-1", children: getChildren(1) }), _jsx("div", { className: "col-span-1", children: getChildren(2) }), _jsx("div", { className: "col-span-1", children: getChildren(3) })] }) }));
-};

package/dist/Form/FieldContainer/TripleFieldContainer.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-type Props = {
-    children: React.ReactNode;
-    className?: string;
-};
-export declare const TripleFieldContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Form/FieldContainer/TripleFieldContainer.js

@@ -1,14 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const TripleFieldContainer = (props) => {
-    const { children, className } = props;
-    const getChildren = (index) => {
-        if (children && Array.isArray(children) && children[index]) {
-            return children[index];
-        }
-        if (children && index === 0) {
-            return children;
-        }
-        return _jsx(_Fragment, {});
-    };
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: `grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ${className}`, style: { alignItems: "center" }, children: [_jsx("div", { className: "col-span-1", children: getChildren(0) }), _jsx("div", { className: "col-span-1", children: getChildren(1) }), _jsx("div", { className: "col-span-1", children: getChildren(2) })] }) }));
-};

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

@@ -1,3 +0,0 @@
-export * from "./DoubleFieldContainer.js";
-export * from "./QuadrupleFieldContainer.js";
-export * from "./TripleFieldContainer.js";

package/dist/Form/FieldContainer/index.js

@@ -1,3 +0,0 @@
-export * from "./DoubleFieldContainer.js";
-export * from "./QuadrupleFieldContainer.js";
-export * from "./TripleFieldContainer.js";

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

@@ -1,21 +0,0 @@
-import React from "react";
-type Props = {
-    id?: string;
-    name: string;
-    formName?: string;
-    title?: string;
-    helpText?: string;
-    hint?: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    disabled?: boolean;
-    readOnly?: boolean;
-    error?: string | undefined;
-    fileTypes?: string[];
-    showAvailableTypes?: boolean;
-    className?: string;
-    defaultValue?: string | File;
-    download?: boolean;
-};
-export declare const FileUploadFieldWithoutValidation: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export declare const FileUploadField: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Form/FileUpload/index.js

@@ -1,54 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Form } from "@remix-run/react";
-import { ButtonSectionContainer } from "../../Containers/index.js";
-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

@@ -1,27 +0,0 @@
-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 {};