@zauru-sdk/components 6.19.0 → 6.19.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/build/assets/{Alerts.stories-CSBQ8R_t.js → Alerts.stories-Dw0Ct9vA.js} +1 -1
  3. package/build/assets/{Button-HdDVNit0.js → Button-YPU2MaHD.js} +1 -1
  4. package/build/assets/{Button.stories-4PbdRo1_.js → Button.stories-CP6jmzaX.js} +1 -1
  5. package/build/assets/{Card.stories-QwjOcKTY.js → Card.stories-DbFqLafy.js} +1 -1
  6. package/build/assets/{Container.stories-pWk2cF23.js → Container.stories-BhnM3_6Y.js} +1 -1
  7. package/build/assets/{Form.stories-lVdn9hAH.js → Form.stories-BNB6SmSx.js} +1 -1
  8. package/build/assets/{Icons-DjqYUpg9.js → Icons-BxLN_JWC.js} +1 -1
  9. package/build/assets/{Labels.stories-FX8D89vw.js → Labels.stories-Fah6wLSi.js} +1 -1
  10. package/build/assets/Matrix.stories-Dc3-VDms.js +1 -0
  11. package/build/assets/{Modal.stories-CgG40zUJ.js → Modal.stories-D7kIP3bJ.js} +1 -1
  12. package/build/assets/{NavBar.stories-BPC2tPzi.js → NavBar.stories-DuIgKZkc.js} +1 -1
  13. package/build/assets/SidePanel.stories-Xsm8Md4K.js +1 -0
  14. package/build/assets/{Tab.stories-qL5aJzJZ.js → Tab.stories-RKI0m-pt.js} +1 -1
  15. package/build/assets/{Table.stories-JhlKDwAx.js → Table.stories-CGj0WWPk.js} +1 -1
  16. package/build/assets/{Titles.stories-BIaWnH29.js → Titles.stories-CPIRDaJs.js} +1 -1
  17. package/build/assets/{Tooltip.stories-iBejLWUg.js → Tooltip.stories-D8M6F7St.js} +1 -1
  18. package/build/assets/{axe-VDwKxXpa.js → axe-sLlwVNub.js} +1 -1
  19. package/build/assets/{components-TO4aWqdC.js → components-FzdPzEyL.js} +1 -1
  20. package/build/assets/{index-DxYjnckq.js → index-DUSjZECW.js} +3 -3
  21. package/build/assets/{index-TgOqmrBM.js → index-DonOhaBM.js} +1 -1
  22. package/build/assets/{proxy-DgkUxN7K.js → proxy-BETbFm71.js} +1 -1
  23. package/build/index.html +1 -1
  24. package/dist/esm/Form/DatePicker/index.js +2 -2
  25. package/dist/esm/Form/TimePicker/index.js +2 -2
  26. package/dist/esm/Matrix/CheckMatrixCards.js +2 -1
  27. package/dist/esm/SidePanel/index.js +6 -0
  28. package/package.json +2 -2
  29. package/src/Form/DatePicker/index.tsx +2 -2
  30. package/src/Form/TimePicker/index.tsx +3 -3
  31. package/src/Matrix/CheckMatrixCards.tsx +2 -1
  32. package/src/SidePanel/index.tsx +5 -0
  33. package/build/assets/Matrix.stories-Cxd7sZW4.js +0 -1
  34. package/build/assets/SidePanel.stories-Atykcy9h.js +0 -1
@@ -23,11 +23,11 @@ export const FormDatePicker = (props) => {
23
23
  setValue("");
24
24
  onChange && onChange("");
25
25
  };
26
- 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) => {
26
+ return (_jsxs("div", { className: showTooltip ? "relative z-50" : "relative", 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) => {
27
27
  setValue(e.target.value);
28
28
  onChange && onChange(e.target.value);
29
29
  if (register) {
30
30
  register.onChange(e);
31
31
  }
32
- } }), 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.message?.toString()] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
32
+ } }), 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 z-50 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.message?.toString()] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
33
33
  };
@@ -1,4 +1,4 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { ClockIconSVG, CloseSvgIcon, IdeaIconSVG } from "@zauru-sdk/icons";
3
3
  import { useEffect, useState } from "react";
4
4
  import { useFormContext } from "react-hook-form";
@@ -30,5 +30,5 @@ export const FormTimePicker = (props) => {
30
30
  register.onChange(e);
31
31
  }
32
32
  };
33
- return (_jsxs(_Fragment, { children: [title && (_jsxs("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor}`, 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(ClockIconSVG, {}) }), _jsx("input", { id: id, tabIndex: tabIndex, type: "time", value: value, pattern: "\\d{2}:\\d{2}", className: `${bgColor} ${borderColor} ${textColor} text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5`, ...(register ?? {}), name: name, onChange: handleOnChange }), value && (_jsx("button", { type: "button", onClick: clearValue, className: "absolute right-0 mr-10", children: _jsx(CloseSvgIcon, {}) })), helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black", children: helpText }))] }) }))] }), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error.message?.toString()] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
33
+ return (_jsxs("div", { className: showTooltip ? "relative z-50" : "relative", children: [title && (_jsxs("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${textColor}`, 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(ClockIconSVG, {}) }), _jsx("input", { id: id, tabIndex: tabIndex, type: "time", value: value, pattern: "\\d{2}:\\d{2}", className: `${bgColor} ${borderColor} ${textColor} text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5`, ...(register ?? {}), name: name, onChange: handleOnChange }), value && (_jsx("button", { type: "button", onClick: clearValue, className: "absolute right-0 mr-10", children: _jsx(CloseSvgIcon, {}) })), helpText && (_jsx("div", { className: "flex items-center relative ml-3", children: _jsxs("div", { className: "relative cursor-pointer", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [_jsx(IdeaIconSVG, {}), showTooltip && (_jsx("div", { className: "absolute -left-48 top-0 z-50 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.message?.toString()] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
34
34
  };
@@ -3,9 +3,10 @@ import { useEffect, useState } from "react";
3
3
  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 = "", }) => {
4
4
  const safePageSize = Math.max(1, pageSize);
5
5
  const [visibleCount, setVisibleCount] = useState(safePageSize);
6
+ const rowKeys = rows.map((row) => row.key).join("\u0000");
6
7
  useEffect(() => {
7
8
  setVisibleCount(safePageSize);
8
- }, [rows, safePageSize]);
9
+ }, [rowKeys, safePageSize]);
9
10
  if (rows.length === 0) {
10
11
  return _jsx("p", { className: `p-4 text-sm text-gray-600 ${className}`, children: emptyText });
11
12
  }
@@ -42,6 +42,12 @@ export const SidePanel = ({ children, closeOnClickOutside = true, widthPercentag
42
42
  document.addEventListener("keydown", handleEscape);
43
43
  return () => document.removeEventListener("keydown", handleEscape);
44
44
  }, [isOpen]);
45
+ useEffect(() => {
46
+ if (isOpen)
47
+ panelRef.current?.removeAttribute("inert");
48
+ else
49
+ panelRef.current?.setAttribute("inert", "");
50
+ }, [isOpen]);
45
51
  useEffect(() => {
46
52
  if (isOpen) {
47
53
  wasOpenRef.current = true;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zauru-sdk/components",
3
- "version": "6.19.0",
3
+ "version": "6.19.2",
4
4
  "description": "Componentes reutilizables en las WebApps de Zauru.",
5
5
  "main": "./dist/esm/index.js",
6
6
  "module": "./dist/esm/index.js",
@@ -62,5 +62,5 @@
62
62
  "styled-components": "^5.3.5",
63
63
  "zod": "^3.23.8"
64
64
  },
65
- "gitHead": "c0b80c26ce1e4788cb7683fb6514ad449b46ac59"
65
+ "gitHead": "376b5afd123ab7078d3d92315a09d9a26ed12ea2"
66
66
  }
@@ -61,7 +61,7 @@ export const FormDatePicker = (props: Props) => {
61
61
  };
62
62
 
63
63
  return (
64
- <div>
64
+ <div className={showTooltip ? "relative z-50" : "relative"}>
65
65
  {title && (
66
66
  <label
67
67
  htmlFor={error ? `${name}-error` : `${name}-success`}
@@ -110,7 +110,7 @@ export const FormDatePicker = (props: Props) => {
110
110
  >
111
111
  <IdeaIconSVG />
112
112
  {showTooltip && (
113
- <div className="absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black">
113
+ <div className="absolute -left-48 top-0 z-50 mt-8 p-2 bg-white border rounded shadow text-black">
114
114
  {helpText}
115
115
  </div>
116
116
  )}
@@ -65,7 +65,7 @@ export const FormTimePicker = (props: Props) => {
65
65
  };
66
66
 
67
67
  return (
68
- <>
68
+ <div className={showTooltip ? "relative z-50" : "relative"}>
69
69
  {title && (
70
70
  <label
71
71
  htmlFor={error ? `${name}-error` : `${name}-success`}
@@ -108,7 +108,7 @@ export const FormTimePicker = (props: Props) => {
108
108
  >
109
109
  <IdeaIconSVG />
110
110
  {showTooltip && (
111
- <div className="absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black">
111
+ <div className="absolute -left-48 top-0 z-50 mt-8 p-2 bg-white border rounded shadow text-black">
112
112
  {helpText}
113
113
  </div>
114
114
  )}
@@ -128,6 +128,6 @@ export const FormTimePicker = (props: Props) => {
128
128
  {hint}
129
129
  </p>
130
130
  )}
131
- </>
131
+ </div>
132
132
  );
133
133
  };
@@ -46,10 +46,11 @@ export const CheckMatrixCards = ({
46
46
  }: CheckMatrixCardsProps) => {
47
47
  const safePageSize = Math.max(1, pageSize);
48
48
  const [visibleCount, setVisibleCount] = useState(safePageSize);
49
+ const rowKeys = rows.map((row) => row.key).join("\u0000");
49
50
 
50
51
  useEffect(() => {
51
52
  setVisibleCount(safePageSize);
52
- }, [rows, safePageSize]);
53
+ }, [rowKeys, safePageSize]);
53
54
 
54
55
  if (rows.length === 0) {
55
56
  return <p className={`p-4 text-sm text-gray-600 ${className}`}>{emptyText}</p>;
@@ -132,6 +132,11 @@ export const SidePanel: React.FC<SidePanelProps> = ({
132
132
  return () => document.removeEventListener("keydown", handleEscape);
133
133
  }, [isOpen]);
134
134
 
135
+ useEffect(() => {
136
+ if (isOpen) panelRef.current?.removeAttribute("inert");
137
+ else panelRef.current?.setAttribute("inert", "");
138
+ }, [isOpen]);
139
+
135
140
  useEffect(() => {
136
141
  if (isOpen) {
137
142
  wasOpenRef.current = true;
@@ -1 +0,0 @@
1
- import{r as u,j as e}from"./index-DxYjnckq.js";const E=({rows:n,columns:l,isChecked:d,isPending:a=()=>!1,onToggle:g,disabled:s=!1,renderRowAction:t,checkedLabel:o="Marcado",uncheckedLabel:p="Sin marcar",pendingLabel:c="Guardando…",emptyText:m="No hay filas para mostrar.",pageSize:C=20,showMoreLabel:$="Mostrar más",className:f=""})=>{const x=Math.max(1,C),[k,j]=u.useState(x);if(u.useEffect(()=>{j(x)},[n,x]),n.length===0)return e.jsx("p",{className:`p-4 text-sm text-gray-600 ${f}`,children:m});const w=n.slice(0,k);return e.jsxs("div",{className:`space-y-3 ${f}`,children:[w.map(i=>e.jsxs("fieldset",{className:"min-w-0 rounded-lg border border-gray-200 bg-white p-3 shadow-sm",children:[e.jsxs("div",{className:"mb-3 flex min-w-0 items-start justify-between gap-3",children:[e.jsxs("legend",{className:"min-w-0 flex-1 px-0 text-sm font-semibold text-gray-900",children:[e.jsx("span",{className:"block break-words",children:i.label}),i.description?e.jsx("span",{className:"mt-0.5 block break-words text-xs font-normal text-gray-600",children:i.description}):null]}),t?e.jsx("div",{className:"shrink-0",children:t(i)}):null]}),e.jsx("div",{className:"grid gap-2 sm:grid-cols-2",children:l.map(r=>{const h=d(i.key,r.key),b=a(i.key,r.key),v=`check-matrix-${encodeURIComponent(i.key)}-${encodeURIComponent(r.key)}`;return e.jsxs("label",{htmlFor:v,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 ${h?"border-indigo-200 bg-indigo-50 text-indigo-950":"border-gray-200 bg-gray-50 text-gray-800"} ${b||s?"cursor-not-allowed opacity-70":"hover:border-indigo-300"}`,children:[e.jsx("input",{id:v,type:"checkbox",checked:h,disabled:s||b,onChange:S=>g(i.key,r.key,S.target.checked),className:"h-5 w-5 shrink-0 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"}),e.jsx("span",{className:"min-w-0 flex-1 break-words font-medium",children:r.label}),e.jsx("span",{className:`shrink-0 text-xs font-medium ${h?"text-indigo-700":"text-gray-600"}`,"aria-live":b?"polite":void 0,children:b?c:h?o:p})]},r.key)})})]},i.key)),k<n.length?e.jsxs("button",{type:"button",onClick:()=>j(i=>i+x),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:[$," (",n.length-k,")"]}):null]})},R={sm:{mobile:"sm:hidden",desktop:"hidden sm:block"},md:{mobile:"md:hidden",desktop:"hidden md:block"},lg:{mobile:"lg:hidden",desktop:"hidden lg:block"}},M=({desktop:n,desktopBreakpoint:l="md",...d})=>{const a=R[l];return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.mobile,children:e.jsx(E,{...d})}),e.jsx("div",{className:a.desktop,children:n})]})},N=[{key:"129",label:"129 · Cooperativa El Progreso",description:"San Juan"},{key:"302",label:"302 · Productor con un nombre largo para validar el ajuste de texto"}],y=[{key:"brocoli",label:"Brócoli certificado"},{key:"radicchio",label:"Radicchio"},{key:"elotin",label:"Elotín"}],B=()=>{const[n,l]=u.useState(new Set(["129:radicchio"])),d=(s,t)=>!n.has(`${s}:${t}`),a=(s,t,o)=>{l(p=>{const c=new Set(p),m=`${s}:${t}`;return o?c.delete(m):c.add(m),c})},g=e.jsx("div",{className:"overflow-x-auto rounded-md border border-gray-200",children:e.jsxs("table",{className:"min-w-full text-sm",children:[e.jsx("thead",{className:"bg-gray-50",children:e.jsxs("tr",{children:[e.jsx("th",{className:"px-3 py-2 text-left",children:"Proveedor"}),y.map(s=>e.jsx("th",{className:"px-3 py-2 text-center",children:s.label},s.key))]})}),e.jsx("tbody",{children:N.map(s=>e.jsxs("tr",{className:"border-t border-gray-200",children:[e.jsx("th",{className:"px-3 py-2 text-left",children:s.label}),y.map(t=>e.jsx("td",{className:"px-3 py-2 text-center",children:e.jsx("input",{type:"checkbox","aria-label":`${String(s.label)}, ${String(t.label)}`,checked:d(s.key,t.key),onChange:o=>a(s.key,t.key,o.target.checked)})},t.key))]},s.key))})]})});return e.jsx(M,{rows:N,columns:y,desktop:g,isChecked:d,onToggle:a,checkedLabel:"Permitida",uncheckedLabel:"Bloqueada"})};typeof window<"u"&&window.document&&window.document.createElement&&document.documentElement.setAttribute("data-storyloaded","");export{B as Responsive};
@@ -1 +0,0 @@
1
- import{r as s,j as e}from"./index-DxYjnckq.js";import{h as E,i as M,p as k,m as f,A as z}from"./proxy-DgkUxN7K.js";function C(){!E.current&&M();const[r]=s.useState(k.current);return r}const g=()=>e.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:e.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"})}),v=()=>e.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:e.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"})}),L=()=>e.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:e.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"})}),I=({children:r,closeOnClickOutside:a=!0,widthPercentage:b=25,buttonIcon:l="chevron",ariaLabel:y="Panel lateral",openButtonLabel:j="Abrir panel",closeButtonLabel:m="Cerrar panel"})=>{const[t,i]=s.useState(!1),d=s.useRef(null),h=s.useRef(null),p=s.useRef(null),c=s.useRef(!1),x=s.useId(),u=C(),w=()=>{i(n=>!n)};s.useEffect(()=>{const n=o=>{t&&a&&d.current&&!d.current.contains(o.target)&&i(!1)};return document.addEventListener("mousedown",n),()=>{document.removeEventListener("mousedown",n)}},[a,t]),s.useEffect(()=>{if(!t)return;const n=o=>{o.key==="Escape"&&i(!1)};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[t]),s.useEffect(()=>{var n,o;if(t){c.current=!0,(n=h.current)==null||n.focus();const N=document.body.style.overflow;return window.matchMedia("(max-width: 767px)").matches&&(document.body.style.overflow="hidden"),()=>{document.body.style.overflow=N}}c.current&&(c.current=!1,(o=p.current)==null||o.focus())},[t]);const R=()=>{if(typeof l=="string")switch(l){case"chevron":return t?e.jsx(v,{}):e.jsx(g,{});case"filter":return e.jsx(L,{});default:return e.jsx(g,{})}else return l};return e.jsxs(e.Fragment,{children:[e.jsxs(f.div,{id:x,ref:d,role:"dialog","aria-modal":t?"true":void 0,"aria-label":y,"aria-hidden":!t,initial:{x:"100%"},animate:{x:t?0:"100%"},transition:u?{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":`${b}%`},children:[e.jsx("button",{ref:h,type:"button",onClick:w,"aria-label":m,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:e.jsx(v,{})}),e.jsx("div",{className:"mt-16 p-4 sm:p-6",children:r})]}),e.jsxs(z,{children:[t&&a?e.jsx(f.button,{type:"button","aria-label":m,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:u?0:.15},onClick:()=>i(!1),className:"fixed inset-0 z-[9998] cursor-default bg-black/30 md:hidden"}):null,!t&&e.jsx(f.button,{ref:p,type:"button","aria-label":j,"aria-expanded":t,"aria-controls":x,initial:{opacity:0,x:20},animate:{opacity:1,x:0},exit:{opacity:0,x:20},transition:{duration:u?0:.2},onClick:w,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:R()})]})]})},A=()=>e.jsxs("div",{className:"min-h-[36rem] bg-gray-50 p-6",children:[e.jsx("p",{className:"text-sm text-gray-700",children:"Use el botón fijo para abrir los filtros."}),e.jsxs(I,{buttonIcon:"filter",ariaLabel:"Filtros de búsqueda",children:[e.jsx("h2",{className:"text-lg font-semibold text-gray-900",children:"Filtros de búsqueda"}),e.jsxs("label",{className:"mt-4 block text-sm font-medium text-gray-700",children:["Proveedor",e.jsx("input",{className:"mt-1 block w-full rounded-md border-gray-300",placeholder:"Nombre o código"})]})]})]});typeof window<"u"&&window.document&&window.document.createElement&&document.documentElement.setAttribute("data-storyloaded","");export{A as Filters};