@zauru-sdk/components 6.18.1 → 6.19.0

package/build/meta.json

@@ -0,0 +1,416 @@
+{
+  "about": {
+    "homepage": "https://www.ladle.dev",
+    "github": "https://github.com/tajo/ladle",
+    "version": 1
+  },
+  "stories": {
+    "alerts--info": {
+      "name": "Info",
+      "levels": [
+        "Alerts"
+      ],
+      "locStart": 3,
+      "locEnd": 5,
+      "filePath": "stories/Alerts.stories.tsx",
+      "namedExport": "Info",
+      "meta": {}
+    },
+    "alerts--success": {
+      "name": "Success",
+      "levels": [
+        "Alerts"
+      ],
+      "locStart": 7,
+      "locEnd": 9,
+      "filePath": "stories/Alerts.stories.tsx",
+      "namedExport": "Success",
+      "meta": {}
+    },
+    "alerts--warning": {
+      "name": "Warning",
+      "levels": [
+        "Alerts"
+      ],
+      "locStart": 11,
+      "locEnd": 17,
+      "filePath": "stories/Alerts.stories.tsx",
+      "namedExport": "Warning",
+      "meta": {}
+    },
+    "button--actions": {
+      "name": "Actions",
+      "levels": [
+        "Button"
+      ],
+      "locStart": 33,
+      "locEnd": 52,
+      "filePath": "stories/Button.stories.tsx",
+      "namedExport": "Actions",
+      "meta": {}
+    },
+    "button--colors": {
+      "name": "Colors",
+      "levels": [
+        "Button"
+      ],
+      "locStart": 12,
+      "locEnd": 20,
+      "filePath": "stories/Button.stories.tsx",
+      "namedExport": "Colors",
+      "meta": {}
+    },
+    "button--default": {
+      "name": "Default",
+      "levels": [
+        "Button"
+      ],
+      "locStart": 4,
+      "locEnd": 4,
+      "filePath": "stories/Button.stories.tsx",
+      "namedExport": "Default",
+      "meta": {}
+    },
+    "button--disabled": {
+      "name": "Disabled",
+      "levels": [
+        "Button"
+      ],
+      "locStart": 10,
+      "locEnd": 10,
+      "filePath": "stories/Button.stories.tsx",
+      "namedExport": "Disabled",
+      "meta": {}
+    },
+    "button--dropdown": {
+      "name": "Dropdown",
+      "levels": [
+        "Button"
+      ],
+      "locStart": 22,
+      "locEnd": 31,
+      "filePath": "stories/Button.stories.tsx",
+      "namedExport": "Dropdown",
+      "meta": {}
+    },
+    "button--loading": {
+      "name": "Loading",
+      "levels": [
+        "Button"
+      ],
+      "locStart": 6,
+      "locEnd": 8,
+      "filePath": "stories/Button.stories.tsx",
+      "namedExport": "Loading",
+      "meta": {}
+    },
+    "card--default": {
+      "name": "Default",
+      "levels": [
+        "Card"
+      ],
+      "locStart": 3,
+      "locEnd": 7,
+      "filePath": "stories/Card.stories.tsx",
+      "namedExport": "Default",
+      "meta": {}
+    },
+    "container--collapsible": {
+      "name": "Collapsible",
+      "levels": [
+        "Container"
+      ],
+      "locStart": 20,
+      "locEnd": 24,
+      "filePath": "stories/Container.stories.tsx",
+      "namedExport": "Collapsible",
+      "meta": {}
+    },
+    "container--default": {
+      "name": "Default",
+      "levels": [
+        "Container"
+      ],
+      "locStart": 4,
+      "locEnd": 8,
+      "filePath": "stories/Container.stories.tsx",
+      "namedExport": "Default",
+      "meta": {}
+    },
+    "container--with-right-content": {
+      "name": "With right content",
+      "levels": [
+        "Container"
+      ],
+      "locStart": 10,
+      "locEnd": 18,
+      "filePath": "stories/Container.stories.tsx",
+      "namedExport": "WithRightContent",
+      "meta": {}
+    },
+    "form--checkbox": {
+      "name": "Checkbox",
+      "levels": [
+        "Form"
+      ],
+      "locStart": 26,
+      "locEnd": 28,
+      "filePath": "stories/Form.stories.tsx",
+      "namedExport": "Checkbox",
+      "meta": {}
+    },
+    "form--date-picker": {
+      "name": "Date picker",
+      "levels": [
+        "Form"
+      ],
+      "locStart": 30,
+      "locEnd": 32,
+      "filePath": "stories/Form.stories.tsx",
+      "namedExport": "DatePicker",
+      "meta": {}
+    },
+    "form--file-upload": {
+      "name": "File upload",
+      "levels": [
+        "Form"
+      ],
+      "locStart": 34,
+      "locEnd": 36,
+      "filePath": "stories/Form.stories.tsx",
+      "namedExport": "FileUpload",
+      "meta": {}
+    },
+    "form--layout": {
+      "name": "Layout",
+      "levels": [
+        "Form"
+      ],
+      "locStart": 38,
+      "locEnd": 46,
+      "filePath": "stories/Form.stories.tsx",
+      "namedExport": "Layout",
+      "meta": {}
+    },
+    "form--radios": {
+      "name": "Radios",
+      "levels": [
+        "Form"
+      ],
+      "locStart": 48,
+      "locEnd": 58,
+      "filePath": "stories/Form.stories.tsx",
+      "namedExport": "Radios",
+      "meta": {}
+    },
+    "form--select": {
+      "name": "Select",
+      "levels": [
+        "Form"
+      ],
+      "locStart": 14,
+      "locEnd": 24,
+      "filePath": "stories/Form.stories.tsx",
+      "namedExport": "Select",
+      "meta": {}
+    },
+    "form--text": {
+      "name": "Text",
+      "levels": [
+        "Form"
+      ],
+      "locStart": 10,
+      "locEnd": 12,
+      "filePath": "stories/Form.stories.tsx",
+      "namedExport": "Text",
+      "meta": {}
+    },
+    "labels--filters": {
+      "name": "Filters",
+      "levels": [
+        "Labels"
+      ],
+      "locStart": 8,
+      "locEnd": 15,
+      "filePath": "stories/Labels.stories.tsx",
+      "namedExport": "Filters",
+      "meta": {}
+    },
+    "labels--filters-empty": {
+      "name": "Filters empty",
+      "levels": [
+        "Labels"
+      ],
+      "locStart": 17,
+      "locEnd": 17,
+      "filePath": "stories/Labels.stories.tsx",
+      "namedExport": "FiltersEmpty",
+      "meta": {}
+    },
+    "labels--info": {
+      "name": "Info",
+      "levels": [
+        "Labels"
+      ],
+      "locStart": 4,
+      "locEnd": 6,
+      "filePath": "stories/Labels.stories.tsx",
+      "namedExport": "Info",
+      "meta": {}
+    },
+    "matrix--responsive": {
+      "name": "Responsive",
+      "levels": [
+        "Matrix"
+      ],
+      "locStart": 14,
+      "locEnd": 75,
+      "filePath": "stories/Matrix.stories.tsx",
+      "namedExport": "Responsive",
+      "meta": {}
+    },
+    "modal--progress": {
+      "name": "Progress",
+      "levels": [
+        "Modal"
+      ],
+      "locStart": 5,
+      "locEnd": 21,
+      "filePath": "stories/Modal.stories.tsx",
+      "namedExport": "Progress",
+      "meta": {}
+    },
+    "nav-bar--calidad-yellow": {
+      "name": "Calidad yellow",
+      "levels": [
+        "Nav bar"
+      ],
+      "locStart": 56,
+      "locEnd": 67,
+      "filePath": "stories/NavBar.stories.tsx",
+      "namedExport": "CalidadYellow",
+      "meta": {}
+    },
+    "nav-bar--costos-green": {
+      "name": "Costos green",
+      "levels": [
+        "Nav bar"
+      ],
+      "locStart": 44,
+      "locEnd": 54,
+      "filePath": "stories/NavBar.stories.tsx",
+      "namedExport": "CostosGreen",
+      "meta": {}
+    },
+    "nav-bar--envios-red": {
+      "name": "Envios red",
+      "levels": [
+        "Nav bar"
+      ],
+      "locStart": 81,
+      "locEnd": 92,
+      "filePath": "stories/NavBar.stories.tsx",
+      "namedExport": "EnviosRed",
+      "meta": {}
+    },
+    "nav-bar--laboratorio-sky": {
+      "name": "Laboratorio sky",
+      "levels": [
+        "Nav bar"
+      ],
+      "locStart": 69,
+      "locEnd": 79,
+      "filePath": "stories/NavBar.stories.tsx",
+      "namedExport": "LaboratorioSky",
+      "meta": {}
+    },
+    "nav-bar--recepciones-slate": {
+      "name": "Recepciones slate",
+      "levels": [
+        "Nav bar"
+      ],
+      "locStart": 31,
+      "locEnd": 42,
+      "filePath": "stories/NavBar.stories.tsx",
+      "namedExport": "RecepcionesSlate",
+      "meta": {}
+    },
+    "side-panel--filters": {
+      "name": "Filters",
+      "levels": [
+        "Side panel"
+      ],
+      "locStart": 3,
+      "locEnd": 21,
+      "filePath": "stories/SidePanel.stories.tsx",
+      "namedExport": "Filters",
+      "meta": {}
+    },
+    "tab--default": {
+      "name": "Default",
+      "levels": [
+        "Tab"
+      ],
+      "locStart": 3,
+      "locEnd": 10,
+      "filePath": "stories/Tab.stories.tsx",
+      "namedExport": "Default",
+      "meta": {}
+    },
+    "table--data-table": {
+      "name": "Data table",
+      "levels": [
+        "Table"
+      ],
+      "locStart": 23,
+      "locEnd": 37,
+      "filePath": "stories/Table.stories.tsx",
+      "namedExport": "DataTable",
+      "meta": {}
+    },
+    "table--dynamic": {
+      "name": "Dynamic",
+      "levels": [
+        "Table"
+      ],
+      "locStart": 4,
+      "locEnd": 21,
+      "filePath": "stories/Table.stories.tsx",
+      "namedExport": "Dynamic",
+      "meta": {}
+    },
+    "titles--hierarchy": {
+      "name": "Hierarchy",
+      "levels": [
+        "Titles"
+      ],
+      "locStart": 5,
+      "locEnd": 11,
+      "filePath": "stories/Titles.stories.tsx",
+      "namedExport": "Hierarchy",
+      "meta": {}
+    },
+    "tooltip--css-tooltip": {
+      "name": "Css tooltip",
+      "levels": [
+        "Tooltip"
+      ],
+      "locStart": 11,
+      "locEnd": 15,
+      "filePath": "stories/Tooltip.stories.tsx",
+      "namedExport": "CssTooltip",
+      "meta": {}
+    },
+    "tooltip--hover-tooltip": {
+      "name": "Hover tooltip",
+      "levels": [
+        "Tooltip"
+      ],
+      "locStart": 5,
+      "locEnd": 9,
+      "filePath": "stories/Tooltip.stories.tsx",
+      "namedExport": "HoverTooltip",
+      "meta": {}
+    }
+  }
+}

package/dist/Matrix/CheckMatrixCards.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+export type CheckMatrixColumn = {
+    key: string;
+    label: ReactNode;
+};
+export type CheckMatrixRow = {
+    key: string;
+    label: ReactNode;
+    description?: ReactNode;
+};
+export interface CheckMatrixCardsProps {
+    rows: CheckMatrixRow[];
+    columns: CheckMatrixColumn[];
+    isChecked: (rowKey: string, columnKey: string) => boolean;
+    isPending?: (rowKey: string, columnKey: string) => boolean;
+    onToggle: (rowKey: string, columnKey: string, checked: boolean) => void;
+    disabled?: boolean;
+    renderRowAction?: (row: CheckMatrixRow) => ReactNode;
+    checkedLabel?: string;
+    uncheckedLabel?: string;
+    pendingLabel?: string;
+    emptyText?: string;
+    pageSize?: number;
+    showMoreLabel?: string;
+    className?: string;
+}
+export declare const CheckMatrixCards: ({ rows, columns, isChecked, isPending, onToggle, disabled, renderRowAction, checkedLabel, uncheckedLabel, pendingLabel, emptyText, pageSize, showMoreLabel, className, }: CheckMatrixCardsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Matrix/ResponsiveCheckMatrix.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+import { CheckMatrixCardsProps } from "./CheckMatrixCards.js";
+export interface ResponsiveCheckMatrixProps extends CheckMatrixCardsProps {
+    desktop: ReactNode;
+    desktopBreakpoint?: "sm" | "md" | "lg";
+}
+export declare const ResponsiveCheckMatrix: ({ desktop, desktopBreakpoint, ...cardProps }: ResponsiveCheckMatrixProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Matrix/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./CheckMatrixCards.js";
+export * from "./ResponsiveCheckMatrix.js";

package/dist/SidePanel/index.d.ts

@@ -11,11 +11,13 @@ import React, { ReactNode } from "react";
  *
  * @returns A toggleable side panel component.
  */
-interface SidePanelProps {
+export interface SidePanelProps {
     children: ReactNode;
     closeOnClickOutside?: boolean;
     widthPercentage?: number;
     buttonIcon?: "chevron" | "filter" | ReactNode;
+    ariaLabel?: string;
+    openButtonLabel?: string;
+    closeButtonLabel?: string;
 }
 export declare const SidePanel: React.FC<SidePanelProps>;
-export {};

package/dist/esm/Matrix/CheckMatrixCards.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+export const CheckMatrixCards = ({ rows, columns, isChecked, isPending = () => false, onToggle, disabled = false, renderRowAction, checkedLabel = "Marcado", uncheckedLabel = "Sin marcar", pendingLabel = "Guardando…", emptyText = "No hay filas para mostrar.", pageSize = 20, showMoreLabel = "Mostrar más", className = "", }) => {
+    const safePageSize = Math.max(1, pageSize);
+    const [visibleCount, setVisibleCount] = useState(safePageSize);
+    useEffect(() => {
+        setVisibleCount(safePageSize);
+    }, [rows, safePageSize]);
+    if (rows.length === 0) {
+        return _jsx("p", { className: `p-4 text-sm text-gray-600 ${className}`, children: emptyText });
+    }
+    const visibleRows = rows.slice(0, visibleCount);
+    return (_jsxs("div", { className: `space-y-3 ${className}`, children: [visibleRows.map((row) => (_jsxs("fieldset", { className: "min-w-0 rounded-lg border border-gray-200 bg-white p-3 shadow-sm", children: [_jsxs("div", { className: "mb-3 flex min-w-0 items-start justify-between gap-3", children: [_jsxs("legend", { className: "min-w-0 flex-1 px-0 text-sm font-semibold text-gray-900", children: [_jsx("span", { className: "block break-words", children: row.label }), row.description ? (_jsx("span", { className: "mt-0.5 block break-words text-xs font-normal text-gray-600", children: row.description })) : null] }), renderRowAction ? (_jsx("div", { className: "shrink-0", children: renderRowAction(row) })) : null] }), _jsx("div", { className: "grid gap-2 sm:grid-cols-2", children: columns.map((column) => {
+                            const checked = isChecked(row.key, column.key);
+                            const pending = isPending(row.key, column.key);
+                            const inputId = `check-matrix-${encodeURIComponent(row.key)}-${encodeURIComponent(column.key)}`;
+                            return (_jsxs("label", { htmlFor: inputId, className: `flex min-h-11 cursor-pointer items-center gap-3 rounded-md border px-3 py-2 text-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-1 ${checked
+                                    ? "border-indigo-200 bg-indigo-50 text-indigo-950"
+                                    : "border-gray-200 bg-gray-50 text-gray-800"} ${pending || disabled ? "cursor-not-allowed opacity-70" : "hover:border-indigo-300"}`, children: [_jsx("input", { id: inputId, type: "checkbox", checked: checked, disabled: disabled || pending, onChange: (event) => onToggle(row.key, column.key, event.target.checked), className: "h-5 w-5 shrink-0 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" }), _jsx("span", { className: "min-w-0 flex-1 break-words font-medium", children: column.label }), _jsx("span", { className: `shrink-0 text-xs font-medium ${checked ? "text-indigo-700" : "text-gray-600"}`, "aria-live": pending ? "polite" : undefined, children: pending
+                                            ? pendingLabel
+                                            : checked
+                                                ? checkedLabel
+                                                : uncheckedLabel })] }, column.key));
+                        }) })] }, row.key))), visibleCount < rows.length ? (_jsxs("button", { type: "button", onClick: () => setVisibleCount((count) => count + safePageSize), className: "min-h-11 w-full cursor-pointer rounded-md border border-indigo-300 bg-white px-4 py-2 text-sm font-semibold text-indigo-700 hover:bg-indigo-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2", children: [showMoreLabel, " (", rows.length - visibleCount, ")"] })) : null] }));
+};

package/dist/esm/Matrix/ResponsiveCheckMatrix.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckMatrixCards, } from "./CheckMatrixCards.js";
+const visibilityClasses = {
+    sm: { mobile: "sm:hidden", desktop: "hidden sm:block" },
+    md: { mobile: "md:hidden", desktop: "hidden md:block" },
+    lg: { mobile: "lg:hidden", desktop: "hidden lg:block" },
+};
+export const ResponsiveCheckMatrix = ({ desktop, desktopBreakpoint = "md", ...cardProps }) => {
+    const visibility = visibilityClasses[desktopBreakpoint];
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: visibility.mobile, children: _jsx(CheckMatrixCards, { ...cardProps }) }), _jsx("div", { className: visibility.desktop, children: desktop })] }));
+};

package/dist/esm/Matrix/index.js

@@ -0,0 +1,2 @@
+export * from "./CheckMatrixCards.js";
+export * from "./ResponsiveCheckMatrix.js";

package/dist/esm/SidePanel/index.js

@@ -1,21 +1,27 @@
 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";
+import { useState, useEffect, useId, useRef, } from "react";
+import { motion, AnimatePresence, useReducedMotion } 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" }) }));
+const ChevronLeftIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "h-6 w-6", "aria-hidden": "true", focusable: "false", 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" }) }));
+const ChevronRightIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "h-6 w-6", "aria-hidden": "true", focusable: "false", 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" }) }));
-export const SidePanel = ({ children, closeOnClickOutside = true, widthPercentage = 25, buttonIcon = "chevron", }) => {
+const FilterIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "h-6 w-6", "aria-hidden": "true", focusable: "false", 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" }) }));
+export const SidePanel = ({ children, closeOnClickOutside = true, widthPercentage = 25, buttonIcon = "chevron", ariaLabel = "Panel lateral", openButtonLabel = "Abrir panel", closeButtonLabel = "Cerrar panel", }) => {
     const [isOpen, setIsOpen] = useState(false);
     const panelRef = useRef(null);
+    const closeButtonRef = useRef(null);
+    const triggerButtonRef = useRef(null);
+    const wasOpenRef = useRef(false);
+    const panelId = useId();
+    const shouldReduceMotion = useReducedMotion();
     const togglePanel = () => {
-        setIsOpen(!isOpen);
+        setIsOpen((open) => !open);
     };
     useEffect(() => {
         const handleClickOutside = (event) => {
-            if (closeOnClickOutside &&
+            if (isOpen &&
+                closeOnClickOutside &&
                 panelRef.current &&
                 !panelRef.current.contains(event.target)) {
                 setIsOpen(false);
@@ -25,7 +31,34 @@ export const SidePanel = ({ children, closeOnClickOutside = true, widthPercentag
         return () => {
             document.removeEventListener("mousedown", handleClickOutside);
         };
-    }, [closeOnClickOutside]);
+    }, [closeOnClickOutside, isOpen]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleEscape = (event) => {
+            if (event.key === "Escape")
+                setIsOpen(false);
+        };
+        document.addEventListener("keydown", handleEscape);
+        return () => document.removeEventListener("keydown", handleEscape);
+    }, [isOpen]);
+    useEffect(() => {
+        if (isOpen) {
+            wasOpenRef.current = true;
+            closeButtonRef.current?.focus();
+            const previousOverflow = document.body.style.overflow;
+            if (window.matchMedia("(max-width: 767px)").matches) {
+                document.body.style.overflow = "hidden";
+            }
+            return () => {
+                document.body.style.overflow = previousOverflow;
+            };
+        }
+        if (wasOpenRef.current) {
+            wasOpenRef.current = false;
+            triggerButtonRef.current?.focus();
+        }
+    }, [isOpen]);
     const renderIcon = () => {
         if (typeof buttonIcon === "string") {
             switch (buttonIcon) {
@@ -41,5 +74,9 @@ export const SidePanel = ({ children, closeOnClickOutside = true, widthPercentag
             return buttonIcon;
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(motion.div, { ref: panelRef, initial: { x: "100%" }, animate: { x: isOpen ? 0 : "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 })] }), _jsx(AnimatePresence, { children: !isOpen && (_jsx(motion.button, { initial: { opacity: 0, x: 20 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 20 }, transition: { duration: 0.2 }, 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() })) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(motion.div, { id: panelId, ref: panelRef, role: "dialog", "aria-modal": isOpen ? "true" : undefined, "aria-label": ariaLabel, "aria-hidden": !isOpen, initial: { x: "100%" }, animate: { x: isOpen ? 0 : "100%" }, transition: shouldReduceMotion
+                    ? { duration: 0 }
+                    : { type: "spring", stiffness: 300, damping: 30 }, className: "fixed right-0 top-0 z-[9999] h-full w-[calc(100%-1rem)] overflow-y-auto bg-white shadow-lg sm:w-[min(28rem,calc(100%-2rem))] md:w-[var(--side-panel-width)]", style: {
+                    "--side-panel-width": `${widthPercentage}%`,
+                }, children: [_jsx("button", { ref: closeButtonRef, type: "button", onClick: togglePanel, "aria-label": closeButtonLabel, className: "absolute left-4 top-4 min-h-11 min-w-11 cursor-pointer rounded-full bg-gray-200 p-2 transition-colors hover:bg-gray-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 md:min-h-0 md:min-w-0", children: _jsx(ChevronRightIcon, {}) }), _jsx("div", { className: "mt-16 p-4 sm:p-6", children: children })] }), _jsxs(AnimatePresence, { children: [isOpen && closeOnClickOutside ? (_jsx(motion.button, { type: "button", "aria-label": closeButtonLabel, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: shouldReduceMotion ? 0 : 0.15 }, onClick: () => setIsOpen(false), className: "fixed inset-0 z-[9998] cursor-default bg-black/30 md:hidden" })) : null, !isOpen && (_jsx(motion.button, { ref: triggerButtonRef, type: "button", "aria-label": openButtonLabel, "aria-expanded": isOpen, "aria-controls": panelId, initial: { opacity: 0, x: 20 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 20 }, transition: { duration: shouldReduceMotion ? 0 : 0.2 }, onClick: togglePanel, className: "fixed right-0 top-1/2 z-[10000] min-h-11 min-w-11 -translate-y-1/2 cursor-pointer rounded-l-lg bg-indigo-600 p-3 text-white shadow-md transition-colors hover:bg-indigo-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2", children: renderIcon() }))] })] }));
 };

package/dist/esm/index.js

@@ -3,6 +3,7 @@ export * from "./AccessControl/index.js";
 export * from "./BlockUI/index.js";
 export * from "./Buttons/index.js";
 export * from "./Card/index.js";
+export * from "./Matrix/index.js";
 export * from "./ConnectionState/index.js";
 export * from "./Chat/index.js";
 export * from "./Containers/index.js";

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from "./AccessControl/index.js";
 export * from "./BlockUI/index.js";
 export * from "./Buttons/index.js";
 export * from "./Card/index.js";
+export * from "./Matrix/index.js";
 export * from "./ConnectionState/index.js";
 export * from "./Chat/index.js";
 export * from "./Containers/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "6.18.1",
+  "version": "6.19.0",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -27,8 +27,8 @@
     "@tailwindcss/forms": "^0.5.7",
     "@types/jsonwebtoken": "^9.0.2",
     "@types/rails__activestorage": "^7.1.1",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
     "@types/styled-components": "^5.1.34",
     "autoprefixer": "^10.6.0",
     "postcss": "^8.4.35",
@@ -44,12 +44,12 @@
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/node": "^2.8.1",
     "@remix-run/react": "^2.8.1",
-    "@zauru-sdk/common": "^6.14.1",
-    "@zauru-sdk/hooks": "^6.4.3",
+    "@zauru-sdk/common": "^6.14.2",
+    "@zauru-sdk/hooks": "^6.4.4",
     "@zauru-sdk/icons": "^6.2.0",
-    "@zauru-sdk/redux": "^6.8.3",
-    "@zauru-sdk/types": "^6.30.0",
-    "@zauru-sdk/utils": "^6.30.1",
+    "@zauru-sdk/redux": "^6.8.4",
+    "@zauru-sdk/types": "^6.30.2",
+    "@zauru-sdk/utils": "^6.30.3",
     "browser-image-compression": "^2.0.2",
     "framer-motion": "^12.0.0",
     "jsonwebtoken": "^9.0.2",
@@ -62,5 +62,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "dc5f6e04a2c4254710cbd86cb7016beefd84b9be"
+  "gitHead": "c0b80c26ce1e4788cb7683fb6514ad449b46ac59"
 }