@zauru-sdk/components 1.0.113 → 1.0.115

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.115](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.114...v1.0.115) (2024-09-26)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
+## [1.0.114](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.113...v1.0.114) (2024-09-25)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 ## [1.0.113](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.112...v1.0.113) (2024-09-25)
 
 **Note:** Version bump only for package @zauru-sdk/components

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

@@ -7,6 +7,7 @@ type Props = {
     onSubmit?: SubmitHandler<FieldValues>;
     id?: string;
     method?: "post" | "put" | "delete" | "patch";
+    className?: string;
 };
 export declare const ReactZodForm: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default ReactZodForm;

package/dist/SidePanel/index.d.ts

@@ -0,0 +1,21 @@
+import React, { ReactNode } from "react";
+/**
+ * SidePanel Component
+ *
+ * This component creates a collapsible side panel that can be toggled open and closed.
+ *
+ * @param {ReactNode} children - The content to be displayed inside the side panel.
+ * @param {boolean} [closeOnClickOutside=true] - If true, the panel will close when clicking outside of it.
+ * @param {number} [widthPercentage=25] - The width of the panel as a percentage of the viewport width.
+ * @param {string} [buttonIcon="chevron"] - The icon to use for the toggle button. Can be "chevron", "filter", or a custom ReactNode.
+ *
+ * @returns A toggleable side panel component.
+ */
+interface SidePanelProps {
+    children: ReactNode;
+    closeOnClickOutside?: boolean;
+    widthPercentage?: number;
+    buttonIcon?: "chevron" | "filter" | ReactNode;
+}
+declare const SidePanel: React.FC<SidePanelProps>;
+export default SidePanel;

package/dist/cjs/Form/DatePicker/index.js

@@ -26,7 +26,7 @@ const FormDatePicker = (props) => {
         setValue("");
         onChange && onChange("");
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor} ${className}`, children: [title, required && (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "*" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex relative items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute left-0 flex items-center pl-3 pointer-events-none", children: (0, jsx_runtime_1.jsx)(icons_1.CalendarIconSVG, {}) }), (0, jsx_runtime_1.jsx)("input", { id: id, tabIndex: tabIndex, type: "date", 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`, ...(register ?? {}), name: name, onChange: (e) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [title && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor} ${className}`, children: [title, required && (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "*" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex relative items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute left-0 flex items-center pl-3 pointer-events-none", children: (0, jsx_runtime_1.jsx)(icons_1.CalendarIconSVG, {}) }), (0, jsx_runtime_1.jsx)("input", { id: id, tabIndex: tabIndex, type: "date", 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`, ...(register ?? {}), name: name, onChange: (e) => {
                             setValue(e.target.value);
                             onChange && onChange(e.target.value);
                             if (register) {

package/dist/cjs/Form/ReactZodForm/index.js

@@ -8,7 +8,7 @@ const react_hook_form_1 = require("react-hook-form");
 const zod_2 = require("zod");
 const emptySchema = zod_2.z.any();
 const ReactZodForm = (props) => {
-    const { children, method = "post", schema = emptySchema, onSubmit, id, } = props;
+    const { children, method = "post", schema = emptySchema, onSubmit, id, className, } = props;
     const submit = (0, react_1.useSubmit)();
     const methods = (0, react_hook_form_1.useForm)({
         resolver: (0, zod_1.zodResolver)(schema),
@@ -23,7 +23,7 @@ const ReactZodForm = (props) => {
             submit(event?.target, { method });
         }
     };
-    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, { ...methods, children: (0, jsx_runtime_1.jsx)(react_1.Form, { onSubmit: methods.handleSubmit(handleSubmit), method: method, id: id, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, { ...methods, children: (0, jsx_runtime_1.jsx)(react_1.Form, { onSubmit: methods.handleSubmit(handleSubmit), method: method, id: id, className: className, children: children }) }));
 };
 exports.ReactZodForm = ReactZodForm;
 exports.default = exports.ReactZodForm;

package/dist/cjs/Form/SelectField/index.js

@@ -31,7 +31,7 @@ const SelectField = (props) => {
     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`;
+    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
     (0, react_1.useEffect)(() => {
         setFilteredOptions(options);
     }, [options]);
@@ -45,7 +45,9 @@ const SelectField = (props) => {
         if (defaultValue) {
             setValue(defaultValue);
             setInputValue(defaultValue.label);
-            setFormValue(name || "", defaultValue.value);
+            if (setFormValue) {
+                setFormValue(name || "", defaultValue.value);
+            }
         }
         document.addEventListener("mousedown", handleClickOutside);
         return () => {
@@ -69,13 +71,17 @@ const SelectField = (props) => {
                 : [...valueMulti, option];
             setValueMulti(newValue);
             onChangeMulti && onChangeMulti(newValue);
-            setFormValue(name || "", newValue.map((v) => v.value));
+            if (setFormValue) {
+                setFormValue(name || "", newValue.map((v) => v.value));
+            }
         }
         else {
             setValue(option);
             setInputValue(option.label);
             onChange && onChange(option);
-            setFormValue(name || "", option.value);
+            if (setFormValue) {
+                setFormValue(name || "", option.value);
+            }
         }
         setIsOpen(false);
     };
@@ -83,12 +89,16 @@ const SelectField = (props) => {
         if (isMulti) {
             setValueMulti([]);
             onChangeMulti && onChangeMulti([]);
-            setFormValue(name || "", []);
+            if (setFormValue) {
+                setFormValue(name || "", []);
+            }
         }
         else {
             setValue(null);
             onChange && onChange(null);
-            setFormValue(name || "", "");
+            if (setFormValue) {
+                setFormValue(name || "", "");
+            }
         }
         setInputValue("");
     };

package/dist/cjs/Form/TextField/index.js

@@ -21,9 +21,11 @@ const TextField = (props) => {
     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`;
+    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
     (0, react_1.useEffect)(() => {
-        setOnFormValue(name ?? "-1", defaultValue);
+        if (setOnFormValue) {
+            setOnFormValue(name ?? "-1", defaultValue);
+        }
         setValue(defaultValue);
     }, [defaultValue]);
     const handleInputChange = (event) => {

package/dist/cjs/Form/TimePicker/index.js

@@ -17,7 +17,7 @@ const FormTimePicker = (props) => {
     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 textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
     const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
     (0, react_1.useEffect)(() => {
         setValue(defaultValue);

package/dist/cjs/SidePanel/index.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const framer_motion_1 = require("framer-motion");
+// SVG icon for the left-pointing chevron
+const ChevronLeftIcon = () => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "h-6 w-6", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M7.72 12.53a.75.75 0 010-1.06l7.5-7.5a.75.75 0 111.06 1.06L9.31 12l6.97 6.97a.75.75 0 11-1.06 1.06l-7.5-7.5z", clipRule: "evenodd" }) }));
+// SVG icon for the right-pointing chevron
+const ChevronRightIcon = () => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "h-6 w-6", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z", clipRule: "evenodd" }) }));
+// SVG icon for the filter (bars filter icon)
+const FilterIcon = () => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "h-6 w-6", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M3 6a1 1 0 011-1h16a1 1 0 110 2H4a1 1 0 01-1-1zm0 6a1 1 0 011-1h10a1 1 0 110 2H4a1 1 0 01-1-1zm0 6a1 1 0 011-1h4a1 1 0 110 2H4a1 1 0 01-1-1z", clipRule: "evenodd" }) }));
+const SidePanel = ({ children, closeOnClickOutside = true, widthPercentage = 25, buttonIcon = "chevron", }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const panelRef = (0, react_1.useRef)(null);
+    const togglePanel = () => {
+        setIsOpen(!isOpen);
+    };
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (closeOnClickOutside &&
+                panelRef.current &&
+                !panelRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [closeOnClickOutside]);
+    const renderIcon = () => {
+        if (typeof buttonIcon === "string") {
+            switch (buttonIcon) {
+                case "chevron":
+                    return isOpen ? (0, jsx_runtime_1.jsx)(ChevronRightIcon, {}) : (0, jsx_runtime_1.jsx)(ChevronLeftIcon, {});
+                case "filter":
+                    return (0, jsx_runtime_1.jsx)(FilterIcon, {});
+                default:
+                    return (0, jsx_runtime_1.jsx)(ChevronLeftIcon, {});
+            }
+        }
+        else {
+            return buttonIcon;
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isOpen && ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { ref: panelRef, initial: { x: "100%" }, animate: { x: 0 }, exit: { x: "100%" }, transition: { type: "spring", stiffness: 300, damping: 30 }, className: "fixed top-0 right-0 h-full bg-white shadow-lg z-[9999] overflow-y-auto", style: { width: `${widthPercentage}%` }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: togglePanel, className: "absolute top-4 left-4 p-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors", children: (0, jsx_runtime_1.jsx)(ChevronRightIcon, {}) }), (0, jsx_runtime_1.jsx)("div", { className: "p-6 mt-16", children: children })] })) }), !isOpen && ((0, jsx_runtime_1.jsx)("button", { onClick: togglePanel, className: "fixed top-1/2 right-0 transform -translate-y-1/2 bg-indigo-600 text-white p-3 rounded-l-lg shadow-md hover:bg-indigo-700 transition-colors z-[10000]", children: renderIcon() }))] }));
+};
+exports.default = SidePanel;

package/dist/cjs/index.js

@@ -40,3 +40,4 @@ __exportStar(require("./WithTooltip/index.js"), exports);
 __exportStar(require("./Wizards/index.js"), exports);
 __exportStar(require("./Zendesk/index.js"), exports);
 __exportStar(require("./HOC/ValidateEmployeeAccess/index.js"), exports);
+__exportStar(require("./SidePanel/index.js"), exports);

package/dist/esm/Form/DatePicker/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { CalendarIconSVG, CloseSvgIcon, IdeaIconSVG } from "@zauru-sdk/icons";
 import { useFormContext } from "react-hook-form";
@@ -23,7 +23,7 @@ export const FormDatePicker = (props) => {
         setValue("");
         onChange && onChange("");
     };
-    return (_jsxs(_Fragment, { children: [title && (_jsxs("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor} ${className}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _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, tabIndex: tabIndex, type: "date", 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`, ...(register ?? {}), name: name, onChange: (e) => {
+    return (_jsxs("div", { children: [title && (_jsxs("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor} ${className}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _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, tabIndex: tabIndex, type: "date", 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`, ...(register ?? {}), name: name, onChange: (e) => {
                             setValue(e.target.value);
                             onChange && onChange(e.target.value);
                             if (register) {

package/dist/esm/Form/ReactZodForm/index.js

@@ -5,7 +5,7 @@ import { FormProvider, useForm, } from "react-hook-form";
 import { z } from "zod";
 const emptySchema = z.any();
 export const ReactZodForm = (props) => {
-    const { children, method = "post", schema = emptySchema, onSubmit, id, } = props;
+    const { children, method = "post", schema = emptySchema, onSubmit, id, className, } = props;
     const submit = useSubmit();
     const methods = useForm({
         resolver: zodResolver(schema),
@@ -20,6 +20,6 @@ export const ReactZodForm = (props) => {
             submit(event?.target, { method });
         }
     };
-    return (_jsx(FormProvider, { ...methods, children: _jsx(Form, { onSubmit: methods.handleSubmit(handleSubmit), method: method, id: id, children: children }) }));
+    return (_jsx(FormProvider, { ...methods, children: _jsx(Form, { onSubmit: methods.handleSubmit(handleSubmit), method: method, id: id, className: className, children: children }) }));
 };
 export default ReactZodForm;

package/dist/esm/Form/SelectField/index.js

@@ -28,7 +28,7 @@ export const SelectField = (props) => {
     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`;
+    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
     useEffect(() => {
         setFilteredOptions(options);
     }, [options]);
@@ -42,7 +42,9 @@ export const SelectField = (props) => {
         if (defaultValue) {
             setValue(defaultValue);
             setInputValue(defaultValue.label);
-            setFormValue(name || "", defaultValue.value);
+            if (setFormValue) {
+                setFormValue(name || "", defaultValue.value);
+            }
         }
         document.addEventListener("mousedown", handleClickOutside);
         return () => {
@@ -66,13 +68,17 @@ export const SelectField = (props) => {
                 : [...valueMulti, option];
             setValueMulti(newValue);
             onChangeMulti && onChangeMulti(newValue);
-            setFormValue(name || "", newValue.map((v) => v.value));
+            if (setFormValue) {
+                setFormValue(name || "", newValue.map((v) => v.value));
+            }
         }
         else {
             setValue(option);
             setInputValue(option.label);
             onChange && onChange(option);
-            setFormValue(name || "", option.value);
+            if (setFormValue) {
+                setFormValue(name || "", option.value);
+            }
         }
         setIsOpen(false);
     };
@@ -80,12 +86,16 @@ export const SelectField = (props) => {
         if (isMulti) {
             setValueMulti([]);
             onChangeMulti && onChangeMulti([]);
-            setFormValue(name || "", []);
+            if (setFormValue) {
+                setFormValue(name || "", []);
+            }
         }
         else {
             setValue(null);
             onChange && onChange(null);
-            setFormValue(name || "", "");
+            if (setFormValue) {
+                setFormValue(name || "", "");
+            }
         }
         setInputValue("");
     };

package/dist/esm/Form/TextField/index.js

@@ -18,9 +18,11 @@ export const TextField = (props) => {
     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`;
+    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
     useEffect(() => {
-        setOnFormValue(name ?? "-1", defaultValue);
+        if (setOnFormValue) {
+            setOnFormValue(name ?? "-1", defaultValue);
+        }
         setValue(defaultValue);
     }, [defaultValue]);
     const handleInputChange = (event) => {

package/dist/esm/Form/TimePicker/index.js

@@ -14,7 +14,7 @@ export const FormTimePicker = (props) => {
     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 textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
     const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
     useEffect(() => {
         setValue(defaultValue);

package/dist/esm/SidePanel/index.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+// SVG icon for the left-pointing chevron
+const ChevronLeftIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "h-6 w-6", children: _jsx("path", { fillRule: "evenodd", d: "M7.72 12.53a.75.75 0 010-1.06l7.5-7.5a.75.75 0 111.06 1.06L9.31 12l6.97 6.97a.75.75 0 11-1.06 1.06l-7.5-7.5z", clipRule: "evenodd" }) }));
+// SVG icon for the right-pointing chevron
+const ChevronRightIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "h-6 w-6", children: _jsx("path", { fillRule: "evenodd", d: "M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z", clipRule: "evenodd" }) }));
+// SVG icon for the filter (bars filter icon)
+const FilterIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "h-6 w-6", children: _jsx("path", { fillRule: "evenodd", d: "M3 6a1 1 0 011-1h16a1 1 0 110 2H4a1 1 0 01-1-1zm0 6a1 1 0 011-1h10a1 1 0 110 2H4a1 1 0 01-1-1zm0 6a1 1 0 011-1h4a1 1 0 110 2H4a1 1 0 01-1-1z", clipRule: "evenodd" }) }));
+const SidePanel = ({ children, closeOnClickOutside = true, widthPercentage = 25, buttonIcon = "chevron", }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const panelRef = useRef(null);
+    const togglePanel = () => {
+        setIsOpen(!isOpen);
+    };
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (closeOnClickOutside &&
+                panelRef.current &&
+                !panelRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [closeOnClickOutside]);
+    const renderIcon = () => {
+        if (typeof buttonIcon === "string") {
+            switch (buttonIcon) {
+                case "chevron":
+                    return isOpen ? _jsx(ChevronRightIcon, {}) : _jsx(ChevronLeftIcon, {});
+                case "filter":
+                    return _jsx(FilterIcon, {});
+                default:
+                    return _jsx(ChevronLeftIcon, {});
+            }
+        }
+        else {
+            return buttonIcon;
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(AnimatePresence, { children: isOpen && (_jsxs(motion.div, { ref: panelRef, initial: { x: "100%" }, animate: { x: 0 }, exit: { x: "100%" }, transition: { type: "spring", stiffness: 300, damping: 30 }, className: "fixed top-0 right-0 h-full bg-white shadow-lg z-[9999] overflow-y-auto", style: { width: `${widthPercentage}%` }, children: [_jsx("button", { onClick: togglePanel, className: "absolute top-4 left-4 p-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors", children: _jsx(ChevronRightIcon, {}) }), _jsx("div", { className: "p-6 mt-16", children: children })] })) }), !isOpen && (_jsx("button", { onClick: togglePanel, className: "fixed top-1/2 right-0 transform -translate-y-1/2 bg-indigo-600 text-white p-3 rounded-l-lg shadow-md hover:bg-indigo-700 transition-colors z-[10000]", children: renderIcon() }))] }));
+};
+export default SidePanel;

package/dist/esm/index.js

@@ -24,3 +24,4 @@ export * from "./WithTooltip/index.js";
 export * from "./Wizards/index.js";
 export * from "./Zendesk/index.js";
 export * from "./HOC/ValidateEmployeeAccess/index.js";
+export * from "./SidePanel/index.js";

package/dist/index.d.ts

@@ -24,3 +24,4 @@ export * from "./WithTooltip/index.js";
 export * from "./Wizards/index.js";
 export * from "./Zendesk/index.js";
 export * from "./HOC/ValidateEmployeeAccess/index.js";
+export * from "./SidePanel/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "1.0.113",
+  "version": "1.0.115",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -38,8 +38,8 @@
     "@zauru-sdk/hooks": "^1.0.112",
     "@zauru-sdk/icons": "^1.0.60",
     "@zauru-sdk/types": "^1.0.109",
-    "@zauru-sdk/utils": "^1.0.113",
-    "framer-motion": "^11.0.8",
+    "@zauru-sdk/utils": "^1.0.115",
+    "framer-motion": "^11.7.0",
     "jsonwebtoken": "^9.0.2",
     "react": "^18.2.0",
     "react-data-table-component": "^7.6.2",
@@ -50,5 +50,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "32d6e9f7c23ac5b58be802d23f007f86b4aea904"
+  "gitHead": "9a49125d2c7974621d59f96389b9e08e3fa68dc9"
 }

package/src/Form/DatePicker/index.tsx

@@ -61,7 +61,7 @@ export const FormDatePicker = (props: Props) => {
   };
 
   return (
-    <>
+    <div>
       {title && (
         <label
           htmlFor={error ? `${name}-error` : `${name}-success`}
@@ -130,6 +130,6 @@ export const FormDatePicker = (props: Props) => {
           {hint}
         </p>
       )}
-    </>
+    </div>
   );
 };

package/src/Form/ReactZodForm/index.tsx

@@ -15,6 +15,7 @@ type Props = {
   onSubmit?: SubmitHandler<FieldValues>;
   id?: string;
   method?: "post" | "put" | "delete" | "patch";
+  className?: string;
 };
 
 const emptySchema = z.any();
@@ -26,6 +27,7 @@ export const ReactZodForm = (props: Props) => {
     schema = emptySchema,
     onSubmit,
     id,
+    className,
   } = props;
 
   const submit = useSubmit();
@@ -49,6 +51,7 @@ export const ReactZodForm = (props: Props) => {
         onSubmit={methods.handleSubmit(handleSubmit)}
         method={method}
         id={id}
+        className={className}
       >
         {children}
       </Form>

package/src/Form/SelectField/index.tsx

@@ -79,7 +79,7 @@ export const SelectField = (props: Props) => {
   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`;
+  const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
 
   useEffect(() => {
     setFilteredOptions(options);
@@ -98,7 +98,9 @@ export const SelectField = (props: Props) => {
     if (defaultValue) {
       setValue(defaultValue);
       setInputValue(defaultValue.label);
-      setFormValue(name || "", defaultValue.value);
+      if (setFormValue) {
+        setFormValue(name || "", defaultValue.value);
+      }
     }
 
     document.addEventListener("mousedown", handleClickOutside);
@@ -129,15 +131,19 @@ export const SelectField = (props: Props) => {
         : [...valueMulti, option];
       setValueMulti(newValue);
       onChangeMulti && onChangeMulti(newValue);
-      setFormValue(
-        name || "",
-        newValue.map((v) => v.value)
-      );
+      if (setFormValue) {
+        setFormValue(
+          name || "",
+          newValue.map((v) => v.value)
+        );
+      }
     } else {
       setValue(option);
       setInputValue(option.label);
       onChange && onChange(option);
-      setFormValue(name || "", option.value);
+      if (setFormValue) {
+        setFormValue(name || "", option.value);
+      }
     }
     setIsOpen(false);
   };
@@ -146,11 +152,15 @@ export const SelectField = (props: Props) => {
     if (isMulti) {
       setValueMulti([]);
       onChangeMulti && onChangeMulti([]);
-      setFormValue(name || "", []);
+      if (setFormValue) {
+        setFormValue(name || "", []);
+      }
     } else {
       setValue(null);
       onChange && onChange(null);
-      setFormValue(name || "", "");
+      if (setFormValue) {
+        setFormValue(name || "", "");
+      }
     }
     setInputValue("");
   };

package/src/Form/TextField/index.tsx

@@ -68,10 +68,12 @@ export const TextField = (props: Props) => {
   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`;
+  const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
 
   useEffect(() => {
-    setOnFormValue(name ?? "-1", defaultValue);
+    if (setOnFormValue) {
+      setOnFormValue(name ?? "-1", defaultValue);
+    }
     setValue(defaultValue);
   }, [defaultValue]);
 

package/src/Form/TimePicker/index.tsx

@@ -45,7 +45,7 @@ export const FormTimePicker = (props: Props) => {
 
   const isReadOnly = disabled;
   const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
-  const textColor = isReadOnly ? "text-gray-500" : `text-${color}-500`;
+  const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
   const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
 
   useEffect(() => {

package/src/SidePanel/index.tsx

@@ -0,0 +1,153 @@
+import React, { useState, ReactNode, useEffect, useRef } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+/**
+ * SidePanel Component
+ *
+ * This component creates a collapsible side panel that can be toggled open and closed.
+ *
+ * @param {ReactNode} children - The content to be displayed inside the side panel.
+ * @param {boolean} [closeOnClickOutside=true] - If true, the panel will close when clicking outside of it.
+ * @param {number} [widthPercentage=25] - The width of the panel as a percentage of the viewport width.
+ * @param {string} [buttonIcon="chevron"] - The icon to use for the toggle button. Can be "chevron", "filter", or a custom ReactNode.
+ *
+ * @returns A toggleable side panel component.
+ */
+
+interface SidePanelProps {
+  children: ReactNode;
+  closeOnClickOutside?: boolean;
+  widthPercentage?: number;
+  buttonIcon?: "chevron" | "filter" | ReactNode;
+}
+
+// SVG icon for the left-pointing chevron
+const ChevronLeftIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    className="h-6 w-6"
+  >
+    <path
+      fillRule="evenodd"
+      d="M7.72 12.53a.75.75 0 010-1.06l7.5-7.5a.75.75 0 111.06 1.06L9.31 12l6.97 6.97a.75.75 0 11-1.06 1.06l-7.5-7.5z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+// SVG icon for the right-pointing chevron
+const ChevronRightIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    className="h-6 w-6"
+  >
+    <path
+      fillRule="evenodd"
+      d="M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+// SVG icon for the filter (bars filter icon)
+const FilterIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    className="h-6 w-6"
+  >
+    <path
+      fillRule="evenodd"
+      d="M3 6a1 1 0 011-1h16a1 1 0 110 2H4a1 1 0 01-1-1zm0 6a1 1 0 011-1h10a1 1 0 110 2H4a1 1 0 01-1-1zm0 6a1 1 0 011-1h4a1 1 0 110 2H4a1 1 0 01-1-1z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+const SidePanel: React.FC<SidePanelProps> = ({
+  children,
+  closeOnClickOutside = true,
+  widthPercentage = 25,
+  buttonIcon = "chevron",
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  const togglePanel = () => {
+    setIsOpen(!isOpen);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        closeOnClickOutside &&
+        panelRef.current &&
+        !panelRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [closeOnClickOutside]);
+
+  const renderIcon = () => {
+    if (typeof buttonIcon === "string") {
+      switch (buttonIcon) {
+        case "chevron":
+          return isOpen ? <ChevronRightIcon /> : <ChevronLeftIcon />;
+        case "filter":
+          return <FilterIcon />;
+        default:
+          return <ChevronLeftIcon />;
+      }
+    } else {
+      return buttonIcon;
+    }
+  };
+
+  return (
+    <>
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            ref={panelRef}
+            initial={{ x: "100%" }}
+            animate={{ x: 0 }}
+            exit={{ x: "100%" }}
+            transition={{ type: "spring", stiffness: 300, damping: 30 }}
+            className="fixed top-0 right-0 h-full bg-white shadow-lg z-[9999] overflow-y-auto"
+            style={{ width: `${widthPercentage}%` }}
+          >
+            <button
+              onClick={togglePanel}
+              className="absolute top-4 left-4 p-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors"
+            >
+              <ChevronRightIcon />
+            </button>
+            <div className="p-6 mt-16">{children}</div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {!isOpen && (
+        <button
+          onClick={togglePanel}
+          className="fixed top-1/2 right-0 transform -translate-y-1/2 bg-indigo-600 text-white p-3 rounded-l-lg shadow-md hover:bg-indigo-700 transition-colors z-[10000]"
+        >
+          {renderIcon()}
+        </button>
+      )}
+    </>
+  );
+};
+
+export default SidePanel;

package/src/index.ts

@@ -24,3 +24,4 @@ export * from "./WithTooltip/index.js";
 export * from "./Wizards/index.js";
 export * from "./Zendesk/index.js";
 export * from "./HOC/ValidateEmployeeAccess/index.js";
+export * from "./SidePanel/index.js";