@soyfri/shared-library 2.0.0-beta.33 → 2.0.0-beta.35
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.
- package/Breadcrumbs-B9I3vxPb.cjs +25 -0
- package/Breadcrumbs-B9I3vxPb.cjs.map +1 -0
- package/Breadcrumbs-C41SPbtX.js +26 -0
- package/Breadcrumbs-C41SPbtX.js.map +1 -0
- package/ButtonGroup-CNunDofQ.cjs +33 -0
- package/ButtonGroup-CNunDofQ.cjs.map +1 -0
- package/ButtonGroup-CcKUZ-lT.js +34 -0
- package/ButtonGroup-CcKUZ-lT.js.map +1 -0
- package/Divider-BApcM5CV.js +28 -0
- package/Divider-BApcM5CV.js.map +1 -0
- package/Divider-CIY0JK4U.cjs +27 -0
- package/Divider-CIY0JK4U.cjs.map +1 -0
- package/{Tab-BxSxKJsP.js → Tab-B1mpmXRC.js} +33 -8
- package/Tab-B1mpmXRC.js.map +1 -0
- package/{Tab-BbP8jBcK.cjs → Tab-D-zNS5TI.cjs} +33 -8
- package/Tab-D-zNS5TI.cjs.map +1 -0
- package/components/Breadcrumbs/Breadcrumbs.cjs +6 -0
- package/components/Breadcrumbs/Breadcrumbs.cjs.map +1 -0
- package/components/Breadcrumbs/Breadcrumbs.d.ts +16 -0
- package/components/Breadcrumbs/Breadcrumbs.js +6 -0
- package/components/Breadcrumbs/Breadcrumbs.js.map +1 -0
- package/components/Breadcrumbs/index.d.ts +2 -0
- package/components/Breadcrumbs.d.ts +6 -0
- package/components/ButtonGroup/ButtonGroup.cjs +6 -0
- package/components/ButtonGroup/ButtonGroup.cjs.map +1 -0
- package/components/ButtonGroup/ButtonGroup.d.ts +18 -0
- package/components/ButtonGroup/ButtonGroup.js +6 -0
- package/components/ButtonGroup/ButtonGroup.js.map +1 -0
- package/components/ButtonGroup/index.d.ts +2 -0
- package/components/ButtonGroup.d.ts +6 -0
- package/components/Divider/Divider.cjs +6 -0
- package/components/Divider/Divider.cjs.map +1 -0
- package/components/Divider/Divider.d.ts +17 -0
- package/components/Divider/Divider.js +6 -0
- package/components/Divider/Divider.js.map +1 -0
- package/components/Divider/index.d.ts +2 -0
- package/components/Divider.d.ts +6 -0
- package/components/Tabs/Tab.d.ts +13 -2
- package/components/Tabs/Tabs.cjs +1 -1
- package/components/Tabs/Tabs.d.ts +11 -0
- package/components/Tabs/Tabs.js +1 -1
- package/index.cjs +7 -5
- package/index.cjs.map +1 -1
- package/index.d.ts +6 -0
- package/index.js +12 -7
- package/index.js.map +1 -1
- package/package.json +16 -1
- package/Tab-BbP8jBcK.cjs.map +0 -1
- package/Tab-BxSxKJsP.js.map +0 -1
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
3
|
+
const material = require("@mui/material");
|
|
4
|
+
function Breadcrumbs({
|
|
5
|
+
children,
|
|
6
|
+
separator,
|
|
7
|
+
maxItems,
|
|
8
|
+
sx,
|
|
9
|
+
className,
|
|
10
|
+
"aria-label": ariaLabel = "breadcrumb"
|
|
11
|
+
}) {
|
|
12
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
13
|
+
material.Breadcrumbs,
|
|
14
|
+
{
|
|
15
|
+
separator,
|
|
16
|
+
maxItems,
|
|
17
|
+
sx,
|
|
18
|
+
className,
|
|
19
|
+
"aria-label": ariaLabel,
|
|
20
|
+
children
|
|
21
|
+
}
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
exports.Breadcrumbs = Breadcrumbs;
|
|
25
|
+
//# sourceMappingURL=Breadcrumbs-B9I3vxPb.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Breadcrumbs-B9I3vxPb.cjs","sources":["../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { type ReactNode } from 'react';\nimport { Breadcrumbs as MuiBreadcrumbs } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface BreadcrumbsProps {\n /** Items (Links / Typography). */\n children?: ReactNode;\n /** Separador entre items. Default: `/`. */\n separator?: ReactNode;\n /** Colapsa si hay más de N items. */\n maxItems?: number;\n sx?: SxProps<Theme>;\n className?: string;\n 'aria-label'?: string;\n}\n\n/** Migas de pan. Wrapper fino sobre MUI `Breadcrumbs`. */\nexport function Breadcrumbs({\n children,\n separator,\n maxItems,\n sx,\n className,\n 'aria-label': ariaLabel = 'breadcrumb',\n}: BreadcrumbsProps) {\n return (\n <MuiBreadcrumbs\n separator={separator}\n maxItems={maxItems}\n sx={sx}\n className={className}\n aria-label={ariaLabel}\n >\n {children}\n </MuiBreadcrumbs>\n );\n}\n\nexport default Breadcrumbs;\n"],"names":["jsx","MuiBreadcrumbs"],"mappings":";;;AAiBO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc,YAAY;AAC5B,GAAqB;AACnB,SACEA,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAY;AAAA,MAEX;AAAA,IAAA;AAAA,EAAA;AAGP;;"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Breadcrumbs as Breadcrumbs$1 } from "@mui/material";
|
|
3
|
+
function Breadcrumbs({
|
|
4
|
+
children,
|
|
5
|
+
separator,
|
|
6
|
+
maxItems,
|
|
7
|
+
sx,
|
|
8
|
+
className,
|
|
9
|
+
"aria-label": ariaLabel = "breadcrumb"
|
|
10
|
+
}) {
|
|
11
|
+
return /* @__PURE__ */ jsx(
|
|
12
|
+
Breadcrumbs$1,
|
|
13
|
+
{
|
|
14
|
+
separator,
|
|
15
|
+
maxItems,
|
|
16
|
+
sx,
|
|
17
|
+
className,
|
|
18
|
+
"aria-label": ariaLabel,
|
|
19
|
+
children
|
|
20
|
+
}
|
|
21
|
+
);
|
|
22
|
+
}
|
|
23
|
+
export {
|
|
24
|
+
Breadcrumbs as B
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=Breadcrumbs-C41SPbtX.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Breadcrumbs-C41SPbtX.js","sources":["../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { type ReactNode } from 'react';\nimport { Breadcrumbs as MuiBreadcrumbs } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface BreadcrumbsProps {\n /** Items (Links / Typography). */\n children?: ReactNode;\n /** Separador entre items. Default: `/`. */\n separator?: ReactNode;\n /** Colapsa si hay más de N items. */\n maxItems?: number;\n sx?: SxProps<Theme>;\n className?: string;\n 'aria-label'?: string;\n}\n\n/** Migas de pan. Wrapper fino sobre MUI `Breadcrumbs`. */\nexport function Breadcrumbs({\n children,\n separator,\n maxItems,\n sx,\n className,\n 'aria-label': ariaLabel = 'breadcrumb',\n}: BreadcrumbsProps) {\n return (\n <MuiBreadcrumbs\n separator={separator}\n maxItems={maxItems}\n sx={sx}\n className={className}\n aria-label={ariaLabel}\n >\n {children}\n </MuiBreadcrumbs>\n );\n}\n\nexport default Breadcrumbs;\n"],"names":["MuiBreadcrumbs"],"mappings":";;AAiBO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc,YAAY;AAC5B,GAAqB;AACnB,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAY;AAAA,MAEX;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
3
|
+
const material = require("@mui/material");
|
|
4
|
+
function ButtonGroup({
|
|
5
|
+
children,
|
|
6
|
+
size = "medium",
|
|
7
|
+
variant = "outlined",
|
|
8
|
+
orientation = "horizontal",
|
|
9
|
+
color = "primary",
|
|
10
|
+
disabled,
|
|
11
|
+
fullWidth,
|
|
12
|
+
sx,
|
|
13
|
+
className,
|
|
14
|
+
"aria-label": ariaLabel
|
|
15
|
+
}) {
|
|
16
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
17
|
+
material.ButtonGroup,
|
|
18
|
+
{
|
|
19
|
+
size,
|
|
20
|
+
variant,
|
|
21
|
+
orientation,
|
|
22
|
+
color,
|
|
23
|
+
disabled,
|
|
24
|
+
fullWidth,
|
|
25
|
+
sx,
|
|
26
|
+
className,
|
|
27
|
+
"aria-label": ariaLabel,
|
|
28
|
+
children
|
|
29
|
+
}
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
exports.ButtonGroup = ButtonGroup;
|
|
33
|
+
//# sourceMappingURL=ButtonGroup-CNunDofQ.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonGroup-CNunDofQ.cjs","sources":["../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { type ReactNode } from 'react';\nimport { ButtonGroup as MuiButtonGroup } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface ButtonGroupProps {\n /** Botones agrupados. */\n children?: ReactNode;\n size?: 'small' | 'medium' | 'large';\n variant?: 'text' | 'outlined' | 'contained';\n orientation?: 'horizontal' | 'vertical';\n color?: 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';\n disabled?: boolean;\n fullWidth?: boolean;\n sx?: SxProps<Theme>;\n className?: string;\n 'aria-label'?: string;\n}\n\n/** Grupo de botones segmentado. Wrapper fino sobre MUI `ButtonGroup`. */\nexport function ButtonGroup({\n children,\n size = 'medium',\n variant = 'outlined',\n orientation = 'horizontal',\n color = 'primary',\n disabled,\n fullWidth,\n sx,\n className,\n 'aria-label': ariaLabel,\n}: ButtonGroupProps) {\n return (\n <MuiButtonGroup\n size={size}\n variant={variant}\n orientation={orientation}\n color={color}\n disabled={disabled}\n fullWidth={fullWidth}\n sx={sx}\n className={className}\n aria-label={ariaLabel}\n >\n {children}\n </MuiButtonGroup>\n );\n}\n\nexport default ButtonGroup;\n"],"names":["jsx","MuiButtonGroup"],"mappings":";;;AAmBO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GAAqB;AACnB,SACEA,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAY;AAAA,MAEX;AAAA,IAAA;AAAA,EAAA;AAGP;;"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { ButtonGroup as ButtonGroup$1 } from "@mui/material";
|
|
3
|
+
function ButtonGroup({
|
|
4
|
+
children,
|
|
5
|
+
size = "medium",
|
|
6
|
+
variant = "outlined",
|
|
7
|
+
orientation = "horizontal",
|
|
8
|
+
color = "primary",
|
|
9
|
+
disabled,
|
|
10
|
+
fullWidth,
|
|
11
|
+
sx,
|
|
12
|
+
className,
|
|
13
|
+
"aria-label": ariaLabel
|
|
14
|
+
}) {
|
|
15
|
+
return /* @__PURE__ */ jsx(
|
|
16
|
+
ButtonGroup$1,
|
|
17
|
+
{
|
|
18
|
+
size,
|
|
19
|
+
variant,
|
|
20
|
+
orientation,
|
|
21
|
+
color,
|
|
22
|
+
disabled,
|
|
23
|
+
fullWidth,
|
|
24
|
+
sx,
|
|
25
|
+
className,
|
|
26
|
+
"aria-label": ariaLabel,
|
|
27
|
+
children
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
export {
|
|
32
|
+
ButtonGroup as B
|
|
33
|
+
};
|
|
34
|
+
//# sourceMappingURL=ButtonGroup-CcKUZ-lT.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonGroup-CcKUZ-lT.js","sources":["../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { type ReactNode } from 'react';\nimport { ButtonGroup as MuiButtonGroup } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface ButtonGroupProps {\n /** Botones agrupados. */\n children?: ReactNode;\n size?: 'small' | 'medium' | 'large';\n variant?: 'text' | 'outlined' | 'contained';\n orientation?: 'horizontal' | 'vertical';\n color?: 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';\n disabled?: boolean;\n fullWidth?: boolean;\n sx?: SxProps<Theme>;\n className?: string;\n 'aria-label'?: string;\n}\n\n/** Grupo de botones segmentado. Wrapper fino sobre MUI `ButtonGroup`. */\nexport function ButtonGroup({\n children,\n size = 'medium',\n variant = 'outlined',\n orientation = 'horizontal',\n color = 'primary',\n disabled,\n fullWidth,\n sx,\n className,\n 'aria-label': ariaLabel,\n}: ButtonGroupProps) {\n return (\n <MuiButtonGroup\n size={size}\n variant={variant}\n orientation={orientation}\n color={color}\n disabled={disabled}\n fullWidth={fullWidth}\n sx={sx}\n className={className}\n aria-label={ariaLabel}\n >\n {children}\n </MuiButtonGroup>\n );\n}\n\nexport default ButtonGroup;\n"],"names":["MuiButtonGroup"],"mappings":";;AAmBO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GAAqB;AACnB,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAY;AAAA,MAEX;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Divider as Divider$1 } from "@mui/material";
|
|
3
|
+
function Divider({
|
|
4
|
+
orientation = "horizontal",
|
|
5
|
+
variant = "fullWidth",
|
|
6
|
+
flexItem,
|
|
7
|
+
textAlign,
|
|
8
|
+
children,
|
|
9
|
+
sx,
|
|
10
|
+
className
|
|
11
|
+
}) {
|
|
12
|
+
return /* @__PURE__ */ jsx(
|
|
13
|
+
Divider$1,
|
|
14
|
+
{
|
|
15
|
+
orientation,
|
|
16
|
+
variant,
|
|
17
|
+
flexItem,
|
|
18
|
+
textAlign,
|
|
19
|
+
sx,
|
|
20
|
+
className,
|
|
21
|
+
children
|
|
22
|
+
}
|
|
23
|
+
);
|
|
24
|
+
}
|
|
25
|
+
export {
|
|
26
|
+
Divider as D
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=Divider-BApcM5CV.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Divider-BApcM5CV.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["import { type ReactNode } from 'react';\nimport { Divider as MuiDivider } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface DividerProps {\n orientation?: 'horizontal' | 'vertical';\n variant?: 'fullWidth' | 'inset' | 'middle';\n /** Para usar dentro de contenedores flex (ej. divider vertical). */\n flexItem?: boolean;\n /** Alineación del contenido cuando hay `children` (label centrado, etc.). */\n textAlign?: 'center' | 'left' | 'right';\n /** Contenido opcional (label) en medio del divider. */\n children?: ReactNode;\n sx?: SxProps<Theme>;\n className?: string;\n}\n\n/** Separador. Wrapper fino sobre MUI `Divider`. */\nexport function Divider({\n orientation = 'horizontal',\n variant = 'fullWidth',\n flexItem,\n textAlign,\n children,\n sx,\n className,\n}: DividerProps) {\n return (\n <MuiDivider\n orientation={orientation}\n variant={variant}\n flexItem={flexItem}\n textAlign={textAlign}\n sx={sx}\n className={className}\n >\n {children}\n </MuiDivider>\n );\n}\n\nexport default Divider;\n"],"names":["MuiDivider"],"mappings":";;AAkBO,SAAS,QAAQ;AAAA,EACtB,cAAc;AAAA,EACd,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiB;AACf,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
3
|
+
const material = require("@mui/material");
|
|
4
|
+
function Divider({
|
|
5
|
+
orientation = "horizontal",
|
|
6
|
+
variant = "fullWidth",
|
|
7
|
+
flexItem,
|
|
8
|
+
textAlign,
|
|
9
|
+
children,
|
|
10
|
+
sx,
|
|
11
|
+
className
|
|
12
|
+
}) {
|
|
13
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
14
|
+
material.Divider,
|
|
15
|
+
{
|
|
16
|
+
orientation,
|
|
17
|
+
variant,
|
|
18
|
+
flexItem,
|
|
19
|
+
textAlign,
|
|
20
|
+
sx,
|
|
21
|
+
className,
|
|
22
|
+
children
|
|
23
|
+
}
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
exports.Divider = Divider;
|
|
27
|
+
//# sourceMappingURL=Divider-CIY0JK4U.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Divider-CIY0JK4U.cjs","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["import { type ReactNode } from 'react';\nimport { Divider as MuiDivider } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface DividerProps {\n orientation?: 'horizontal' | 'vertical';\n variant?: 'fullWidth' | 'inset' | 'middle';\n /** Para usar dentro de contenedores flex (ej. divider vertical). */\n flexItem?: boolean;\n /** Alineación del contenido cuando hay `children` (label centrado, etc.). */\n textAlign?: 'center' | 'left' | 'right';\n /** Contenido opcional (label) en medio del divider. */\n children?: ReactNode;\n sx?: SxProps<Theme>;\n className?: string;\n}\n\n/** Separador. Wrapper fino sobre MUI `Divider`. */\nexport function Divider({\n orientation = 'horizontal',\n variant = 'fullWidth',\n flexItem,\n textAlign,\n children,\n sx,\n className,\n}: DividerProps) {\n return (\n <MuiDivider\n orientation={orientation}\n variant={variant}\n flexItem={flexItem}\n textAlign={textAlign}\n sx={sx}\n className={className}\n >\n {children}\n </MuiDivider>\n );\n}\n\nexport default Divider;\n"],"names":["jsx","MuiDivider"],"mappings":";;;AAkBO,SAAS,QAAQ;AAAA,EACtB,cAAc;AAAA,EACd,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiB;AACf,SACEA,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGP;;"}
|
|
@@ -1,3 +1,19 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
8
|
+
if (__hasOwnProp.call(b, prop))
|
|
9
|
+
__defNormalProp(a, prop, b[prop]);
|
|
10
|
+
if (__getOwnPropSymbols)
|
|
11
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
+
if (__propIsEnum.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
}
|
|
15
|
+
return a;
|
|
16
|
+
};
|
|
1
17
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
18
|
import { Children, isValidElement, useState } from "react";
|
|
3
19
|
import { Box, Tabs as Tabs$1, Tab as Tab$1 } from "@mui/material";
|
|
@@ -9,6 +25,7 @@ const TAB_DISPLAY_MAP = {
|
|
|
9
25
|
const Tabs = ({
|
|
10
26
|
children,
|
|
11
27
|
defaultValue,
|
|
28
|
+
value: controlledValue,
|
|
12
29
|
onChangeValue,
|
|
13
30
|
centered = true,
|
|
14
31
|
orientation = "horizontal",
|
|
@@ -19,6 +36,7 @@ const Tabs = ({
|
|
|
19
36
|
className,
|
|
20
37
|
allowScrollButtonsMobile = true,
|
|
21
38
|
keepMounted = false,
|
|
39
|
+
nav = false,
|
|
22
40
|
sx
|
|
23
41
|
}) => {
|
|
24
42
|
var _a, _b;
|
|
@@ -29,13 +47,16 @@ const Tabs = ({
|
|
|
29
47
|
}
|
|
30
48
|
);
|
|
31
49
|
const firstValue = (_a = tabs[0]) == null ? void 0 : _a.props.value;
|
|
32
|
-
const
|
|
50
|
+
const isControlled = controlledValue !== void 0;
|
|
51
|
+
const [internalValue, setInternalValue] = useState(
|
|
33
52
|
(_b = defaultValue != null ? defaultValue : firstValue) != null ? _b : 0
|
|
34
53
|
);
|
|
54
|
+
const currentValue = isControlled ? controlledValue : internalValue;
|
|
35
55
|
const handleChange = (_event, newValue) => {
|
|
36
|
-
|
|
56
|
+
if (!isControlled && !nav) setInternalValue(newValue);
|
|
37
57
|
onChangeValue == null ? void 0 : onChangeValue(newValue);
|
|
38
58
|
};
|
|
59
|
+
const effectiveCentered = centered && variant !== "scrollable" && variant !== "fullWidth";
|
|
39
60
|
const { display, flexDirection } = TAB_DISPLAY_MAP[orientation];
|
|
40
61
|
return /* @__PURE__ */ jsxs(Box, { sx: { display, flexDirection }, children: [
|
|
41
62
|
/* @__PURE__ */ jsx(
|
|
@@ -43,7 +64,7 @@ const Tabs = ({
|
|
|
43
64
|
{
|
|
44
65
|
value: currentValue,
|
|
45
66
|
onChange: handleChange,
|
|
46
|
-
centered,
|
|
67
|
+
centered: effectiveCentered,
|
|
47
68
|
indicatorColor,
|
|
48
69
|
orientation,
|
|
49
70
|
scrollButtons,
|
|
@@ -61,11 +82,15 @@ const Tabs = ({
|
|
|
61
82
|
wrapped,
|
|
62
83
|
iconPosition,
|
|
63
84
|
className: tabClassName,
|
|
64
|
-
sx: tabSx
|
|
85
|
+
sx: tabSx,
|
|
86
|
+
component,
|
|
87
|
+
to,
|
|
88
|
+
href,
|
|
89
|
+
onClick
|
|
65
90
|
} = tab.props;
|
|
66
91
|
return /* @__PURE__ */ jsx(
|
|
67
92
|
Tab$1,
|
|
68
|
-
{
|
|
93
|
+
__spreadValues(__spreadValues(__spreadValues(__spreadValues({
|
|
69
94
|
label,
|
|
70
95
|
icon,
|
|
71
96
|
value,
|
|
@@ -74,13 +99,13 @@ const Tabs = ({
|
|
|
74
99
|
iconPosition,
|
|
75
100
|
className: tabClassName,
|
|
76
101
|
sx: tabSx
|
|
77
|
-
},
|
|
102
|
+
}, component ? { component } : {}), to ? { to } : {}), href ? { href } : {}), onClick ? { onClick } : {}),
|
|
78
103
|
value
|
|
79
104
|
);
|
|
80
105
|
})
|
|
81
106
|
}
|
|
82
107
|
),
|
|
83
|
-
/* @__PURE__ */ jsx(Box, { m: 2, sx: { width: "100%" }, children: keepMounted ? tabs.map((tab, idx) => {
|
|
108
|
+
!nav && /* @__PURE__ */ jsx(Box, { m: 2, sx: { width: "100%" }, children: keepMounted ? tabs.map((tab, idx) => {
|
|
84
109
|
var _a2;
|
|
85
110
|
const value = (_a2 = tab.props.value) != null ? _a2 : idx;
|
|
86
111
|
const isActive = value === currentValue;
|
|
@@ -108,4 +133,4 @@ export {
|
|
|
108
133
|
Tabs as T,
|
|
109
134
|
Tab as a
|
|
110
135
|
};
|
|
111
|
-
//# sourceMappingURL=Tab-
|
|
136
|
+
//# sourceMappingURL=Tab-B1mpmXRC.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tab-B1mpmXRC.js","sources":["../src/components/Tabs/_tabUtils.tsx","../src/components/Tabs/Tabs.tsx","../src/components/Tabs/Tab.tsx"],"sourcesContent":["export const TAB_DISPLAY_MAP: Record<\"horizontal\" | \"vertical\", { display: string, flexDirection: string }> = {\n horizontal: { display: \"flex\", flexDirection: \"column\" },\n vertical: { display: \"flex\", flexDirection: \"row\" }\n};","import {\n Children,\n isValidElement,\n useState,\n type FC,\n type ReactElement,\n type ReactNode,\n type SyntheticEvent,\n} from 'react';\nimport {\n Tabs as MuiTabs,\n Tab as MuiTab,\n Box,\n type TabsProps as MuiTabsProps,\n} from '@mui/material';\n\nimport { TabProps } from './Tab';\nimport { TAB_DISPLAY_MAP } from './_tabUtils';\nimport { mergeSx } from '../_shared/mergeSx';\n\ntype PickTabsProps = Pick<\n MuiTabsProps,\n | 'centered'\n | 'indicatorColor'\n | 'orientation'\n | 'scrollButtons'\n | 'variant'\n | 'className'\n | 'sx'\n | 'visibleScrollbar'\n | 'allowScrollButtonsMobile'\n>;\n\nexport interface TabsProps extends PickTabsProps {\n /** Uno o varios `<Tab>`. Children que no sean `<Tab>` se ignoran. */\n children: ReactNode;\n /** Valor del tab inicialmente activo. Si no se provee, toma el `value` del primer `<Tab>` o `0`. */\n defaultValue?: number | string;\n /**\n * Valor activo **controlado**. Si se provee, el consumer maneja el estado\n * (típico en modo `nav`, donde el valor lo dicta la ruta).\n */\n value?: number | string;\n /** Callback al cambiar de tab. Recibe el `value` del tab nuevo. */\n onChangeValue?: (newValue: number | string) => void;\n labelColor?: 'primary' | 'secondary' | 'inherit';\n /**\n * Modo **navegación**: las tabs son enlaces (`<Tab component={Link} to=.. />`),\n * el `value` activo es controlado externamente (por la ruta) y **no** se\n * renderizan paneles. `<Tab>` reenvía `component`/`to`/`href`/`onClick`.\n */\n nav?: boolean;\n /**\n * Cómo se manejan los paneles al cambiar de tab:\n * - `false` (default): **unmount** — solo se renderiza el panel activo; los\n * demás se desmontan. El state interno de los hijos se pierde al navegar.\n * Menor uso de memoria.\n * - `true`: **keep mounted** — renderiza todos los paneles pero oculta los\n * no activos con `display: none`. El state se preserva (inputs, scroll,\n * timers, subscripciones) al navegar entre tabs.\n */\n keepMounted?: boolean;\n}\n\nexport const Tabs: FC<TabsProps> = ({\n children,\n defaultValue,\n value: controlledValue,\n onChangeValue,\n centered = true,\n orientation = 'horizontal',\n scrollButtons = 'auto',\n variant = 'standard',\n indicatorColor = 'primary',\n labelColor = 'primary',\n className,\n allowScrollButtonsMobile = true,\n keepMounted = false,\n nav = false,\n sx,\n}) => {\n // Filtra a solo <Tab> children — acepta arrays, single child, fragments,\n // y descarta cualquier otra cosa (strings, null, condicionales falsy).\n const tabs: ReactElement<TabProps>[] = Children.toArray(children).filter(\n (child): child is ReactElement<TabProps> =>\n isValidElement(child) &&\n (child.type as { displayName?: string })?.displayName === 'Tab',\n );\n\n const firstValue = tabs[0]?.props.value;\n const isControlled = controlledValue !== undefined;\n const [internalValue, setInternalValue] = useState<string | number>(\n defaultValue ?? firstValue ?? 0,\n );\n const currentValue = isControlled ? controlledValue : internalValue;\n\n const handleChange = (_event: SyntheticEvent, newValue: number | string) => {\n // En modo nav (o controlado) el consumer/ruta maneja el valor.\n if (!isControlled && !nav) setInternalValue(newValue);\n onChangeValue?.(newValue);\n };\n\n // MUI no permite `centered` con variant scrollable/fullWidth.\n const effectiveCentered =\n centered && variant !== 'scrollable' && variant !== 'fullWidth';\n\n const { display, flexDirection } = TAB_DISPLAY_MAP[orientation];\n\n return (\n <Box sx={{ display, flexDirection }}>\n <MuiTabs\n value={currentValue}\n onChange={handleChange}\n centered={effectiveCentered}\n indicatorColor={indicatorColor}\n orientation={orientation}\n scrollButtons={scrollButtons}\n variant={variant}\n className={className}\n textColor={labelColor}\n allowScrollButtonsMobile={allowScrollButtonsMobile}\n sx={mergeSx({}, sx)}\n >\n {tabs.map((tab, idx) => {\n const {\n label,\n icon,\n value = idx,\n disabled,\n wrapped,\n iconPosition,\n className: tabClassName,\n sx: tabSx,\n component,\n to,\n href,\n onClick,\n } = tab.props;\n return (\n <MuiTab\n key={value}\n label={label}\n icon={icon}\n value={value}\n disabled={disabled}\n wrapped={wrapped}\n iconPosition={iconPosition}\n className={tabClassName}\n sx={tabSx}\n // Modo nav: reenvía props de enlace/click.\n {...(component ? { component } : {})}\n {...(to ? { to } : {})}\n {...(href ? { href } : {})}\n {...(onClick ? { onClick } : {})}\n />\n );\n })}\n </MuiTabs>\n\n {!nav && (\n <Box m={2} sx={{ width: '100%' }}>\n {keepMounted\n ? tabs.map((tab, idx) => {\n const value = tab.props.value ?? idx;\n const isActive = value === currentValue;\n return (\n <Box\n key={value}\n role=\"tabpanel\"\n // `display: none` mantiene el nodo en el DOM — state de los\n // hijos (inputs, useState, etc.) no se pierde al navegar.\n sx={{ display: isActive ? 'block' : 'none' }}\n aria-hidden={!isActive}\n >\n {tab.props.children}\n </Box>\n );\n })\n : tabs.map((tab, idx) => {\n const value = tab.props.value ?? idx;\n if (value !== currentValue) return null;\n return (\n <Box key={value} role=\"tabpanel\">\n {tab.props.children}\n </Box>\n );\n })}\n </Box>\n )}\n </Box>\n );\n};\n\nexport default Tabs;\n","import React from \"react\";\nimport { TabProps as MuiTabProps } from \"@mui/material\";\n\ntype PickMuiTabProps = Pick<\n MuiTabProps,\n \"label\" | \"icon\" | \"disabled\" | \"sx\" | \"value\" | \"wrapped\" | \"iconPosition\" | \"className\" | \"disabled\"| 'disableRipple'\n>;\n\nexport interface TabProps extends Omit<PickMuiTabProps, 'value'> {\n value?: number | string;\n onChange?: () => void;\n children?: React.ReactNode;\n /**\n * Componente a renderizar (modo `nav`): ej. `Link` de react-router.\n * Junto con `to`/`href` convierte la tab en un enlace de navegación.\n */\n component?: React.ElementType;\n /** Destino de navegación (react-router `Link`). Solo en modo `nav`. */\n to?: string;\n /** Destino de navegación (ancla nativa). Solo en modo `nav`. */\n href?: string;\n /** Click handler (ej. para tabs de navegación sin router). */\n onClick?: () => void;\n}\n\nexport const Tab = (_: TabProps): null => null;\n\nTab.displayName = \"Tab\";\n\nexport default Tab;\n"],"names":["_a","MuiTabs","MuiTab"],"mappings":"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"}
|
|
@@ -1,4 +1,20 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
6
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
7
|
+
var __spreadValues = (a, b) => {
|
|
8
|
+
for (var prop in b || (b = {}))
|
|
9
|
+
if (__hasOwnProp.call(b, prop))
|
|
10
|
+
__defNormalProp(a, prop, b[prop]);
|
|
11
|
+
if (__getOwnPropSymbols)
|
|
12
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
13
|
+
if (__propIsEnum.call(b, prop))
|
|
14
|
+
__defNormalProp(a, prop, b[prop]);
|
|
15
|
+
}
|
|
16
|
+
return a;
|
|
17
|
+
};
|
|
2
18
|
const jsxRuntime = require("react/jsx-runtime");
|
|
3
19
|
const React = require("react");
|
|
4
20
|
const material = require("@mui/material");
|
|
@@ -10,6 +26,7 @@ const TAB_DISPLAY_MAP = {
|
|
|
10
26
|
const Tabs = ({
|
|
11
27
|
children,
|
|
12
28
|
defaultValue,
|
|
29
|
+
value: controlledValue,
|
|
13
30
|
onChangeValue,
|
|
14
31
|
centered = true,
|
|
15
32
|
orientation = "horizontal",
|
|
@@ -20,6 +37,7 @@ const Tabs = ({
|
|
|
20
37
|
className,
|
|
21
38
|
allowScrollButtonsMobile = true,
|
|
22
39
|
keepMounted = false,
|
|
40
|
+
nav = false,
|
|
23
41
|
sx
|
|
24
42
|
}) => {
|
|
25
43
|
var _a, _b;
|
|
@@ -30,13 +48,16 @@ const Tabs = ({
|
|
|
30
48
|
}
|
|
31
49
|
);
|
|
32
50
|
const firstValue = (_a = tabs[0]) == null ? void 0 : _a.props.value;
|
|
33
|
-
const
|
|
51
|
+
const isControlled = controlledValue !== void 0;
|
|
52
|
+
const [internalValue, setInternalValue] = React.useState(
|
|
34
53
|
(_b = defaultValue != null ? defaultValue : firstValue) != null ? _b : 0
|
|
35
54
|
);
|
|
55
|
+
const currentValue = isControlled ? controlledValue : internalValue;
|
|
36
56
|
const handleChange = (_event, newValue) => {
|
|
37
|
-
|
|
57
|
+
if (!isControlled && !nav) setInternalValue(newValue);
|
|
38
58
|
onChangeValue == null ? void 0 : onChangeValue(newValue);
|
|
39
59
|
};
|
|
60
|
+
const effectiveCentered = centered && variant !== "scrollable" && variant !== "fullWidth";
|
|
40
61
|
const { display, flexDirection } = TAB_DISPLAY_MAP[orientation];
|
|
41
62
|
return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display, flexDirection }, children: [
|
|
42
63
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -44,7 +65,7 @@ const Tabs = ({
|
|
|
44
65
|
{
|
|
45
66
|
value: currentValue,
|
|
46
67
|
onChange: handleChange,
|
|
47
|
-
centered,
|
|
68
|
+
centered: effectiveCentered,
|
|
48
69
|
indicatorColor,
|
|
49
70
|
orientation,
|
|
50
71
|
scrollButtons,
|
|
@@ -62,11 +83,15 @@ const Tabs = ({
|
|
|
62
83
|
wrapped,
|
|
63
84
|
iconPosition,
|
|
64
85
|
className: tabClassName,
|
|
65
|
-
sx: tabSx
|
|
86
|
+
sx: tabSx,
|
|
87
|
+
component,
|
|
88
|
+
to,
|
|
89
|
+
href,
|
|
90
|
+
onClick
|
|
66
91
|
} = tab.props;
|
|
67
92
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
68
93
|
material.Tab,
|
|
69
|
-
{
|
|
94
|
+
__spreadValues(__spreadValues(__spreadValues(__spreadValues({
|
|
70
95
|
label,
|
|
71
96
|
icon,
|
|
72
97
|
value,
|
|
@@ -75,13 +100,13 @@ const Tabs = ({
|
|
|
75
100
|
iconPosition,
|
|
76
101
|
className: tabClassName,
|
|
77
102
|
sx: tabSx
|
|
78
|
-
},
|
|
103
|
+
}, component ? { component } : {}), to ? { to } : {}), href ? { href } : {}), onClick ? { onClick } : {}),
|
|
79
104
|
value
|
|
80
105
|
);
|
|
81
106
|
})
|
|
82
107
|
}
|
|
83
108
|
),
|
|
84
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Box, { m: 2, sx: { width: "100%" }, children: keepMounted ? tabs.map((tab, idx) => {
|
|
109
|
+
!nav && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { m: 2, sx: { width: "100%" }, children: keepMounted ? tabs.map((tab, idx) => {
|
|
85
110
|
var _a2;
|
|
86
111
|
const value = (_a2 = tab.props.value) != null ? _a2 : idx;
|
|
87
112
|
const isActive = value === currentValue;
|
|
@@ -107,4 +132,4 @@ const Tab = (_) => null;
|
|
|
107
132
|
Tab.displayName = "Tab";
|
|
108
133
|
exports.Tab = Tab;
|
|
109
134
|
exports.Tabs = Tabs;
|
|
110
|
-
//# sourceMappingURL=Tab-
|
|
135
|
+
//# sourceMappingURL=Tab-D-zNS5TI.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tab-D-zNS5TI.cjs","sources":["../src/components/Tabs/_tabUtils.tsx","../src/components/Tabs/Tabs.tsx","../src/components/Tabs/Tab.tsx"],"sourcesContent":["export const TAB_DISPLAY_MAP: Record<\"horizontal\" | \"vertical\", { display: string, flexDirection: string }> = {\n horizontal: { display: \"flex\", flexDirection: \"column\" },\n vertical: { display: \"flex\", flexDirection: \"row\" }\n};","import {\n Children,\n isValidElement,\n useState,\n type FC,\n type ReactElement,\n type ReactNode,\n type SyntheticEvent,\n} from 'react';\nimport {\n Tabs as MuiTabs,\n Tab as MuiTab,\n Box,\n type TabsProps as MuiTabsProps,\n} from '@mui/material';\n\nimport { TabProps } from './Tab';\nimport { TAB_DISPLAY_MAP } from './_tabUtils';\nimport { mergeSx } from '../_shared/mergeSx';\n\ntype PickTabsProps = Pick<\n MuiTabsProps,\n | 'centered'\n | 'indicatorColor'\n | 'orientation'\n | 'scrollButtons'\n | 'variant'\n | 'className'\n | 'sx'\n | 'visibleScrollbar'\n | 'allowScrollButtonsMobile'\n>;\n\nexport interface TabsProps extends PickTabsProps {\n /** Uno o varios `<Tab>`. Children que no sean `<Tab>` se ignoran. */\n children: ReactNode;\n /** Valor del tab inicialmente activo. Si no se provee, toma el `value` del primer `<Tab>` o `0`. */\n defaultValue?: number | string;\n /**\n * Valor activo **controlado**. Si se provee, el consumer maneja el estado\n * (típico en modo `nav`, donde el valor lo dicta la ruta).\n */\n value?: number | string;\n /** Callback al cambiar de tab. Recibe el `value` del tab nuevo. */\n onChangeValue?: (newValue: number | string) => void;\n labelColor?: 'primary' | 'secondary' | 'inherit';\n /**\n * Modo **navegación**: las tabs son enlaces (`<Tab component={Link} to=.. />`),\n * el `value` activo es controlado externamente (por la ruta) y **no** se\n * renderizan paneles. `<Tab>` reenvía `component`/`to`/`href`/`onClick`.\n */\n nav?: boolean;\n /**\n * Cómo se manejan los paneles al cambiar de tab:\n * - `false` (default): **unmount** — solo se renderiza el panel activo; los\n * demás se desmontan. El state interno de los hijos se pierde al navegar.\n * Menor uso de memoria.\n * - `true`: **keep mounted** — renderiza todos los paneles pero oculta los\n * no activos con `display: none`. El state se preserva (inputs, scroll,\n * timers, subscripciones) al navegar entre tabs.\n */\n keepMounted?: boolean;\n}\n\nexport const Tabs: FC<TabsProps> = ({\n children,\n defaultValue,\n value: controlledValue,\n onChangeValue,\n centered = true,\n orientation = 'horizontal',\n scrollButtons = 'auto',\n variant = 'standard',\n indicatorColor = 'primary',\n labelColor = 'primary',\n className,\n allowScrollButtonsMobile = true,\n keepMounted = false,\n nav = false,\n sx,\n}) => {\n // Filtra a solo <Tab> children — acepta arrays, single child, fragments,\n // y descarta cualquier otra cosa (strings, null, condicionales falsy).\n const tabs: ReactElement<TabProps>[] = Children.toArray(children).filter(\n (child): child is ReactElement<TabProps> =>\n isValidElement(child) &&\n (child.type as { displayName?: string })?.displayName === 'Tab',\n );\n\n const firstValue = tabs[0]?.props.value;\n const isControlled = controlledValue !== undefined;\n const [internalValue, setInternalValue] = useState<string | number>(\n defaultValue ?? firstValue ?? 0,\n );\n const currentValue = isControlled ? controlledValue : internalValue;\n\n const handleChange = (_event: SyntheticEvent, newValue: number | string) => {\n // En modo nav (o controlado) el consumer/ruta maneja el valor.\n if (!isControlled && !nav) setInternalValue(newValue);\n onChangeValue?.(newValue);\n };\n\n // MUI no permite `centered` con variant scrollable/fullWidth.\n const effectiveCentered =\n centered && variant !== 'scrollable' && variant !== 'fullWidth';\n\n const { display, flexDirection } = TAB_DISPLAY_MAP[orientation];\n\n return (\n <Box sx={{ display, flexDirection }}>\n <MuiTabs\n value={currentValue}\n onChange={handleChange}\n centered={effectiveCentered}\n indicatorColor={indicatorColor}\n orientation={orientation}\n scrollButtons={scrollButtons}\n variant={variant}\n className={className}\n textColor={labelColor}\n allowScrollButtonsMobile={allowScrollButtonsMobile}\n sx={mergeSx({}, sx)}\n >\n {tabs.map((tab, idx) => {\n const {\n label,\n icon,\n value = idx,\n disabled,\n wrapped,\n iconPosition,\n className: tabClassName,\n sx: tabSx,\n component,\n to,\n href,\n onClick,\n } = tab.props;\n return (\n <MuiTab\n key={value}\n label={label}\n icon={icon}\n value={value}\n disabled={disabled}\n wrapped={wrapped}\n iconPosition={iconPosition}\n className={tabClassName}\n sx={tabSx}\n // Modo nav: reenvía props de enlace/click.\n {...(component ? { component } : {})}\n {...(to ? { to } : {})}\n {...(href ? { href } : {})}\n {...(onClick ? { onClick } : {})}\n />\n );\n })}\n </MuiTabs>\n\n {!nav && (\n <Box m={2} sx={{ width: '100%' }}>\n {keepMounted\n ? tabs.map((tab, idx) => {\n const value = tab.props.value ?? idx;\n const isActive = value === currentValue;\n return (\n <Box\n key={value}\n role=\"tabpanel\"\n // `display: none` mantiene el nodo en el DOM — state de los\n // hijos (inputs, useState, etc.) no se pierde al navegar.\n sx={{ display: isActive ? 'block' : 'none' }}\n aria-hidden={!isActive}\n >\n {tab.props.children}\n </Box>\n );\n })\n : tabs.map((tab, idx) => {\n const value = tab.props.value ?? idx;\n if (value !== currentValue) return null;\n return (\n <Box key={value} role=\"tabpanel\">\n {tab.props.children}\n </Box>\n );\n })}\n </Box>\n )}\n </Box>\n );\n};\n\nexport default Tabs;\n","import React from \"react\";\nimport { TabProps as MuiTabProps } from \"@mui/material\";\n\ntype PickMuiTabProps = Pick<\n MuiTabProps,\n \"label\" | \"icon\" | \"disabled\" | \"sx\" | \"value\" | \"wrapped\" | \"iconPosition\" | \"className\" | \"disabled\"| 'disableRipple'\n>;\n\nexport interface TabProps extends Omit<PickMuiTabProps, 'value'> {\n value?: number | string;\n onChange?: () => void;\n children?: React.ReactNode;\n /**\n * Componente a renderizar (modo `nav`): ej. `Link` de react-router.\n * Junto con `to`/`href` convierte la tab en un enlace de navegación.\n */\n component?: React.ElementType;\n /** Destino de navegación (react-router `Link`). Solo en modo `nav`. */\n to?: string;\n /** Destino de navegación (ancla nativa). Solo en modo `nav`. */\n href?: string;\n /** Click handler (ej. para tabs de navegación sin router). */\n onClick?: () => void;\n}\n\nexport const Tab = (_: TabProps): null => null;\n\nTab.displayName = \"Tab\";\n\nexport default Tab;\n"],"names":["Children","isValidElement","_a","useState","Box","jsx","MuiTabs","mergeSx","MuiTab"],"mappings":"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"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
+
const Breadcrumbs = require("../../Breadcrumbs-B9I3vxPb.cjs");
|
|
4
|
+
exports.Breadcrumbs = Breadcrumbs.Breadcrumbs;
|
|
5
|
+
exports.default = Breadcrumbs.Breadcrumbs;
|
|
6
|
+
//# sourceMappingURL=Breadcrumbs.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { SxProps, Theme } from '@mui/material/styles';
|
|
3
|
+
export interface BreadcrumbsProps {
|
|
4
|
+
/** Items (Links / Typography). */
|
|
5
|
+
children?: ReactNode;
|
|
6
|
+
/** Separador entre items. Default: `/`. */
|
|
7
|
+
separator?: ReactNode;
|
|
8
|
+
/** Colapsa si hay más de N items. */
|
|
9
|
+
maxItems?: number;
|
|
10
|
+
sx?: SxProps<Theme>;
|
|
11
|
+
className?: string;
|
|
12
|
+
'aria-label'?: string;
|
|
13
|
+
}
|
|
14
|
+
/** Migas de pan. Wrapper fino sobre MUI `Breadcrumbs`. */
|
|
15
|
+
export declare function Breadcrumbs({ children, separator, maxItems, sx, className, 'aria-label': ariaLabel, }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export default Breadcrumbs;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
+
const ButtonGroup = require("../../ButtonGroup-CNunDofQ.cjs");
|
|
4
|
+
exports.ButtonGroup = ButtonGroup.ButtonGroup;
|
|
5
|
+
exports.default = ButtonGroup.ButtonGroup;
|
|
6
|
+
//# sourceMappingURL=ButtonGroup.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonGroup.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { SxProps, Theme } from '@mui/material/styles';
|
|
3
|
+
export interface ButtonGroupProps {
|
|
4
|
+
/** Botones agrupados. */
|
|
5
|
+
children?: ReactNode;
|
|
6
|
+
size?: 'small' | 'medium' | 'large';
|
|
7
|
+
variant?: 'text' | 'outlined' | 'contained';
|
|
8
|
+
orientation?: 'horizontal' | 'vertical';
|
|
9
|
+
color?: 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
fullWidth?: boolean;
|
|
12
|
+
sx?: SxProps<Theme>;
|
|
13
|
+
className?: string;
|
|
14
|
+
'aria-label'?: string;
|
|
15
|
+
}
|
|
16
|
+
/** Grupo de botones segmentado. Wrapper fino sobre MUI `ButtonGroup`. */
|
|
17
|
+
export declare function ButtonGroup({ children, size, variant, orientation, color, disabled, fullWidth, sx, className, 'aria-label': ariaLabel, }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export default ButtonGroup;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonGroup.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
+
const Divider = require("../../Divider-CIY0JK4U.cjs");
|
|
4
|
+
exports.Divider = Divider.Divider;
|
|
5
|
+
exports.default = Divider.Divider;
|
|
6
|
+
//# sourceMappingURL=Divider.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Divider.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { SxProps, Theme } from '@mui/material/styles';
|
|
3
|
+
export interface DividerProps {
|
|
4
|
+
orientation?: 'horizontal' | 'vertical';
|
|
5
|
+
variant?: 'fullWidth' | 'inset' | 'middle';
|
|
6
|
+
/** Para usar dentro de contenedores flex (ej. divider vertical). */
|
|
7
|
+
flexItem?: boolean;
|
|
8
|
+
/** Alineación del contenido cuando hay `children` (label centrado, etc.). */
|
|
9
|
+
textAlign?: 'center' | 'left' | 'right';
|
|
10
|
+
/** Contenido opcional (label) en medio del divider. */
|
|
11
|
+
children?: ReactNode;
|
|
12
|
+
sx?: SxProps<Theme>;
|
|
13
|
+
className?: string;
|
|
14
|
+
}
|
|
15
|
+
/** Separador. Wrapper fino sobre MUI `Divider`. */
|
|
16
|
+
export declare function Divider({ orientation, variant, flexItem, textAlign, children, sx, className, }: DividerProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export default Divider;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Divider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
package/components/Tabs/Tab.d.ts
CHANGED
|
@@ -1,10 +1,21 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { TabProps as MuiTabProps } from '@mui/material';
|
|
3
3
|
type PickMuiTabProps = Pick<MuiTabProps, "label" | "icon" | "disabled" | "sx" | "value" | "wrapped" | "iconPosition" | "className" | "disabled" | 'disableRipple'>;
|
|
4
|
-
export interface TabProps extends PickMuiTabProps {
|
|
5
|
-
value?: number;
|
|
4
|
+
export interface TabProps extends Omit<PickMuiTabProps, 'value'> {
|
|
5
|
+
value?: number | string;
|
|
6
6
|
onChange?: () => void;
|
|
7
7
|
children?: React.ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Componente a renderizar (modo `nav`): ej. `Link` de react-router.
|
|
10
|
+
* Junto con `to`/`href` convierte la tab en un enlace de navegación.
|
|
11
|
+
*/
|
|
12
|
+
component?: React.ElementType;
|
|
13
|
+
/** Destino de navegación (react-router `Link`). Solo en modo `nav`. */
|
|
14
|
+
to?: string;
|
|
15
|
+
/** Destino de navegación (ancla nativa). Solo en modo `nav`. */
|
|
16
|
+
href?: string;
|
|
17
|
+
/** Click handler (ej. para tabs de navegación sin router). */
|
|
18
|
+
onClick?: () => void;
|
|
8
19
|
}
|
|
9
20
|
export declare const Tab: {
|
|
10
21
|
(_: TabProps): null;
|
package/components/Tabs/Tabs.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
-
const Tab = require("../../Tab-
|
|
3
|
+
const Tab = require("../../Tab-D-zNS5TI.cjs");
|
|
4
4
|
exports.Tab = Tab.Tab;
|
|
5
5
|
exports.Tabs = Tab.Tabs;
|
|
6
6
|
exports.default = Tab.Tabs;
|
|
@@ -6,9 +6,20 @@ export interface TabsProps extends PickTabsProps {
|
|
|
6
6
|
children: ReactNode;
|
|
7
7
|
/** Valor del tab inicialmente activo. Si no se provee, toma el `value` del primer `<Tab>` o `0`. */
|
|
8
8
|
defaultValue?: number | string;
|
|
9
|
+
/**
|
|
10
|
+
* Valor activo **controlado**. Si se provee, el consumer maneja el estado
|
|
11
|
+
* (típico en modo `nav`, donde el valor lo dicta la ruta).
|
|
12
|
+
*/
|
|
13
|
+
value?: number | string;
|
|
9
14
|
/** Callback al cambiar de tab. Recibe el `value` del tab nuevo. */
|
|
10
15
|
onChangeValue?: (newValue: number | string) => void;
|
|
11
16
|
labelColor?: 'primary' | 'secondary' | 'inherit';
|
|
17
|
+
/**
|
|
18
|
+
* Modo **navegación**: las tabs son enlaces (`<Tab component={Link} to=.. />`),
|
|
19
|
+
* el `value` activo es controlado externamente (por la ruta) y **no** se
|
|
20
|
+
* renderizan paneles. `<Tab>` reenvía `component`/`to`/`href`/`onClick`.
|
|
21
|
+
*/
|
|
22
|
+
nav?: boolean;
|
|
12
23
|
/**
|
|
13
24
|
* Cómo se manejan los paneles al cambiar de tab:
|
|
14
25
|
* - `false` (default): **unmount** — solo se renderiza el panel activo; los
|
package/components/Tabs/Tabs.js
CHANGED
package/index.cjs
CHANGED
|
@@ -11,8 +11,11 @@ const Avatar = require("./Avatar-Dw5rzayR.cjs");
|
|
|
11
11
|
const Stat = require("./Stat-BUcFCGrz.cjs");
|
|
12
12
|
const Spinner = require("./Spinner-D7qRmNS9.cjs");
|
|
13
13
|
const Alert = require("./Alert-B3SMPD1s.cjs");
|
|
14
|
+
const Divider = require("./Divider-CIY0JK4U.cjs");
|
|
15
|
+
const ButtonGroup = require("./ButtonGroup-CNunDofQ.cjs");
|
|
16
|
+
const Breadcrumbs = require("./Breadcrumbs-B9I3vxPb.cjs");
|
|
14
17
|
const Step = require("./Step-Nd7SJbRZ.cjs");
|
|
15
|
-
const Tab = require("./Tab-
|
|
18
|
+
const Tab = require("./Tab-D-zNS5TI.cjs");
|
|
16
19
|
const Table = require("./Table-C4OM6rrC.cjs");
|
|
17
20
|
const StatusMessage = require("./StatusMessage-B3nXpuRl.cjs");
|
|
18
21
|
const Modal = require("./Modal-D_6ZdSzw.cjs");
|
|
@@ -58,10 +61,6 @@ Object.defineProperty(exports, "Container", {
|
|
|
58
61
|
enumerable: true,
|
|
59
62
|
get: () => material.Container
|
|
60
63
|
});
|
|
61
|
-
Object.defineProperty(exports, "Divider", {
|
|
62
|
-
enumerable: true,
|
|
63
|
-
get: () => material.Divider
|
|
64
|
-
});
|
|
65
64
|
Object.defineProperty(exports, "Fade", {
|
|
66
65
|
enumerable: true,
|
|
67
66
|
get: () => material.Fade
|
|
@@ -166,6 +165,9 @@ exports.Avatar = Avatar.Avatar;
|
|
|
166
165
|
exports.Stat = Stat.Stat;
|
|
167
166
|
exports.Spinner = Spinner.Spinner;
|
|
168
167
|
exports.Alert = Alert.Alert;
|
|
168
|
+
exports.Divider = Divider.Divider;
|
|
169
|
+
exports.ButtonGroup = ButtonGroup.ButtonGroup;
|
|
170
|
+
exports.Breadcrumbs = Breadcrumbs.Breadcrumbs;
|
|
169
171
|
exports.Step = Step.Step;
|
|
170
172
|
exports.Stepper = Step.Stepper;
|
|
171
173
|
exports.Tab = Tab.Tab;
|
package/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/utils/scrollToTop.ts"],"sourcesContent":["export interface ScrollToTopOptions {\n /** Comportamiento del scroll. Default: `'smooth'`. */\n behavior?: ScrollBehavior;\n /**\n * Elemento target del scroll. Default: `window`. Útil cuando el contenedor\n * scrolleable NO es `window` (p.ej. un `<Box>` con `overflow: auto`).\n */\n target?: Window | HTMLElement;\n /** Offset desde el top. Default: `0`. */\n top?: number;\n}\n\n/**\n * Hace scroll al tope (por default con animación suave). Safe en SSR — si\n * `window` no existe, es un no-op.\n *\n * Llamar tras mutaciones / cambios de filtros / apertura de modales para\n * asegurar que el usuario vea el mensaje de confirmación en la parte\n * superior de la página.\n *\n * ```ts\n * import { scrollToTop } from '@soyfri/shared-library';\n *\n * scrollToTop(); // window, smooth\n * scrollToTop({ behavior: 'auto' }); // window, instantáneo\n * scrollToTop({ target: myScrollableRef.current }); // container custom\n * ```\n */\nexport function scrollToTop({\n behavior = 'smooth',\n target = typeof window !== 'undefined' ? window : undefined,\n top = 0,\n}: ScrollToTopOptions = {}): void {\n if (!target) return;\n target.scrollTo({ top, left: 0, behavior });\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/utils/scrollToTop.ts"],"sourcesContent":["export interface ScrollToTopOptions {\n /** Comportamiento del scroll. Default: `'smooth'`. */\n behavior?: ScrollBehavior;\n /**\n * Elemento target del scroll. Default: `window`. Útil cuando el contenedor\n * scrolleable NO es `window` (p.ej. un `<Box>` con `overflow: auto`).\n */\n target?: Window | HTMLElement;\n /** Offset desde el top. Default: `0`. */\n top?: number;\n}\n\n/**\n * Hace scroll al tope (por default con animación suave). Safe en SSR — si\n * `window` no existe, es un no-op.\n *\n * Llamar tras mutaciones / cambios de filtros / apertura de modales para\n * asegurar que el usuario vea el mensaje de confirmación en la parte\n * superior de la página.\n *\n * ```ts\n * import { scrollToTop } from '@soyfri/shared-library';\n *\n * scrollToTop(); // window, smooth\n * scrollToTop({ behavior: 'auto' }); // window, instantáneo\n * scrollToTop({ target: myScrollableRef.current }); // container custom\n * ```\n */\nexport function scrollToTop({\n behavior = 'smooth',\n target = typeof window !== 'undefined' ? window : undefined,\n top = 0,\n}: ScrollToTopOptions = {}): void {\n if (!target) return;\n target.scrollTo({ top, left: 0, behavior });\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BO,SAAS,YAAY;AAAA,EAC1B,WAAW;AAAA,EACX,SAAS,OAAO,WAAW,cAAc,SAAS;AAAA,EAClD,MAAM;AACR,IAAwB,IAAU;AAChC,MAAI,CAAC,OAAQ;AACb,SAAO,SAAS,EAAE,KAAK,MAAM,GAAG,UAAU;AAC5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/index.d.ts
CHANGED
|
@@ -14,6 +14,12 @@ export { Spinner } from './components/Spinner';
|
|
|
14
14
|
export type { SpinnerProps, SpinnerSize, SpinnerColor } from './components/Spinner';
|
|
15
15
|
export { Alert } from './components/Alert';
|
|
16
16
|
export type { AlertProps, AlertSeverity, AlertVariant } from './components/Alert';
|
|
17
|
+
export { Divider } from './components/Divider';
|
|
18
|
+
export type { DividerProps } from './components/Divider';
|
|
19
|
+
export { ButtonGroup } from './components/ButtonGroup';
|
|
20
|
+
export type { ButtonGroupProps } from './components/ButtonGroup';
|
|
21
|
+
export { Breadcrumbs } from './components/Breadcrumbs';
|
|
22
|
+
export type { BreadcrumbsProps } from './components/Breadcrumbs';
|
|
17
23
|
export { Stepper, Step } from './components/Stepper';
|
|
18
24
|
export { Tabs, Tab } from './components/Tabs';
|
|
19
25
|
export { Table } from './components/Table';
|
package/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { D, r } from "./resolvePreset-K6_BfWHD.js";
|
|
2
|
-
import { AlertTitle, Backdrop, Box, CircularProgress, Collapse, Container,
|
|
2
|
+
import { AlertTitle, Backdrop, Box, CircularProgress, Collapse, Container, Fade, Grid, Grow, LinearProgress, Link, List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListSubheader, Paper, Skeleton, Snackbar, Stack, ThemeProvider, Typography, Zoom, alpha, createTheme, styled, useMediaQuery, useTheme } from "@mui/material";
|
|
3
3
|
import { renderMultiSectionDigitalClockTimeView } from "@mui/x-date-pickers/timeViewRenderers";
|
|
4
4
|
import { B } from "./Button-UkkP-bNw.js";
|
|
5
5
|
import { C } from "./Card-DYKGY-NG.js";
|
|
@@ -9,8 +9,11 @@ import { A } from "./Avatar-H8akSege.js";
|
|
|
9
9
|
import { S } from "./Stat-C06A_izS.js";
|
|
10
10
|
import { S as S2 } from "./Spinner-B6sThC1p.js";
|
|
11
11
|
import { A as A2 } from "./Alert-YsPScpSE.js";
|
|
12
|
+
import { D as D2 } from "./Divider-BApcM5CV.js";
|
|
13
|
+
import { B as B2 } from "./ButtonGroup-CcKUZ-lT.js";
|
|
14
|
+
import { B as B3 } from "./Breadcrumbs-C41SPbtX.js";
|
|
12
15
|
import { a, S as S3 } from "./Step-BArsou1V.js";
|
|
13
|
-
import { a as a2, T } from "./Tab-
|
|
16
|
+
import { a as a2, T } from "./Tab-B1mpmXRC.js";
|
|
14
17
|
import { T as T2 } from "./Table-C2LbW0B1.js";
|
|
15
18
|
import { S as S4 } from "./StatusMessage-D0WgSBx7.js";
|
|
16
19
|
import { M, b, c, a as a3 } from "./Modal-C_QY7ZzY.js";
|
|
@@ -20,8 +23,8 @@ import { A as A3, a as a4 } from "./Autocomplete-C_lW1VER.js";
|
|
|
20
23
|
import { S as S6 } from "./Switch-D72dpkH2.js";
|
|
21
24
|
import { R } from "./RadioGroup-bO-ahP9T.js";
|
|
22
25
|
import { C as C3 } from "./Checkbox-gB5YKkVo.js";
|
|
23
|
-
import { D as
|
|
24
|
-
import { D as
|
|
26
|
+
import { D as D3 } from "./DatePicker-_IGWc3I5.js";
|
|
27
|
+
import { D as D4 } from "./DateTimePicker-CrmWav_j.js";
|
|
25
28
|
import './index.css';function scrollToTop({
|
|
26
29
|
behavior = "smooth",
|
|
27
30
|
target = typeof window !== "undefined" ? window : void 0,
|
|
@@ -38,7 +41,9 @@ export {
|
|
|
38
41
|
A as Avatar,
|
|
39
42
|
Backdrop,
|
|
40
43
|
Box,
|
|
44
|
+
B3 as Breadcrumbs,
|
|
41
45
|
B as Button,
|
|
46
|
+
B2 as ButtonGroup,
|
|
42
47
|
C as Card,
|
|
43
48
|
C3 as Checkbox,
|
|
44
49
|
C2 as Chip,
|
|
@@ -47,9 +52,9 @@ export {
|
|
|
47
52
|
Column,
|
|
48
53
|
Container,
|
|
49
54
|
D as DEFAULT_PRESET_NAME,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
Divider,
|
|
55
|
+
D3 as DatePicker,
|
|
56
|
+
D4 as DateTimePicker,
|
|
57
|
+
D2 as Divider,
|
|
53
58
|
Fade,
|
|
54
59
|
Grid,
|
|
55
60
|
Grow,
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/utils/scrollToTop.ts"],"sourcesContent":["export interface ScrollToTopOptions {\n /** Comportamiento del scroll. Default: `'smooth'`. */\n behavior?: ScrollBehavior;\n /**\n * Elemento target del scroll. Default: `window`. Útil cuando el contenedor\n * scrolleable NO es `window` (p.ej. un `<Box>` con `overflow: auto`).\n */\n target?: Window | HTMLElement;\n /** Offset desde el top. Default: `0`. */\n top?: number;\n}\n\n/**\n * Hace scroll al tope (por default con animación suave). Safe en SSR — si\n * `window` no existe, es un no-op.\n *\n * Llamar tras mutaciones / cambios de filtros / apertura de modales para\n * asegurar que el usuario vea el mensaje de confirmación en la parte\n * superior de la página.\n *\n * ```ts\n * import { scrollToTop } from '@soyfri/shared-library';\n *\n * scrollToTop(); // window, smooth\n * scrollToTop({ behavior: 'auto' }); // window, instantáneo\n * scrollToTop({ target: myScrollableRef.current }); // container custom\n * ```\n */\nexport function scrollToTop({\n behavior = 'smooth',\n target = typeof window !== 'undefined' ? window : undefined,\n top = 0,\n}: ScrollToTopOptions = {}): void {\n if (!target) return;\n target.scrollTo({ top, left: 0, behavior });\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/utils/scrollToTop.ts"],"sourcesContent":["export interface ScrollToTopOptions {\n /** Comportamiento del scroll. Default: `'smooth'`. */\n behavior?: ScrollBehavior;\n /**\n * Elemento target del scroll. Default: `window`. Útil cuando el contenedor\n * scrolleable NO es `window` (p.ej. un `<Box>` con `overflow: auto`).\n */\n target?: Window | HTMLElement;\n /** Offset desde el top. Default: `0`. */\n top?: number;\n}\n\n/**\n * Hace scroll al tope (por default con animación suave). Safe en SSR — si\n * `window` no existe, es un no-op.\n *\n * Llamar tras mutaciones / cambios de filtros / apertura de modales para\n * asegurar que el usuario vea el mensaje de confirmación en la parte\n * superior de la página.\n *\n * ```ts\n * import { scrollToTop } from '@soyfri/shared-library';\n *\n * scrollToTop(); // window, smooth\n * scrollToTop({ behavior: 'auto' }); // window, instantáneo\n * scrollToTop({ target: myScrollableRef.current }); // container custom\n * ```\n */\nexport function scrollToTop({\n behavior = 'smooth',\n target = typeof window !== 'undefined' ? window : undefined,\n top = 0,\n}: ScrollToTopOptions = {}): void {\n if (!target) return;\n target.scrollTo({ top, left: 0, behavior });\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BO,SAAS,YAAY;AAAA,EAC1B,WAAW;AAAA,EACX,SAAS,OAAO,WAAW,cAAc,SAAS;AAAA,EAClD,MAAM;AACR,IAAwB,IAAU;AAChC,MAAI,CAAC,OAAQ;AACb,SAAO,SAAS,EAAE,KAAK,MAAM,GAAG,UAAU;AAC5C;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@soyfri/shared-library",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.35",
|
|
4
4
|
"main": "./index.cjs",
|
|
5
5
|
"module": "./index.js",
|
|
6
6
|
"types": "./index.d.ts",
|
|
@@ -128,6 +128,11 @@
|
|
|
128
128
|
"require": "./components/Drawer/Drawer.cjs",
|
|
129
129
|
"types": "./components/Drawer/index.d.ts"
|
|
130
130
|
},
|
|
131
|
+
"./components/Divider": {
|
|
132
|
+
"import": "./components/Divider/Divider.js",
|
|
133
|
+
"require": "./components/Divider/Divider.cjs",
|
|
134
|
+
"types": "./components/Divider/index.d.ts"
|
|
135
|
+
},
|
|
131
136
|
"./components/DateTimePicker": {
|
|
132
137
|
"import": "./components/DateTimePicker/DateTimePicker.js",
|
|
133
138
|
"require": "./components/DateTimePicker/DateTimePicker.cjs",
|
|
@@ -158,11 +163,21 @@
|
|
|
158
163
|
"require": "./components/Card/Card.cjs",
|
|
159
164
|
"types": "./components/Card/index.d.ts"
|
|
160
165
|
},
|
|
166
|
+
"./components/ButtonGroup": {
|
|
167
|
+
"import": "./components/ButtonGroup/ButtonGroup.js",
|
|
168
|
+
"require": "./components/ButtonGroup/ButtonGroup.cjs",
|
|
169
|
+
"types": "./components/ButtonGroup/index.d.ts"
|
|
170
|
+
},
|
|
161
171
|
"./components/Button": {
|
|
162
172
|
"import": "./components/Button/Button.js",
|
|
163
173
|
"require": "./components/Button/Button.cjs",
|
|
164
174
|
"types": "./components/Button/index.d.ts"
|
|
165
175
|
},
|
|
176
|
+
"./components/Breadcrumbs": {
|
|
177
|
+
"import": "./components/Breadcrumbs/Breadcrumbs.js",
|
|
178
|
+
"require": "./components/Breadcrumbs/Breadcrumbs.cjs",
|
|
179
|
+
"types": "./components/Breadcrumbs/index.d.ts"
|
|
180
|
+
},
|
|
166
181
|
"./components/Avatar": {
|
|
167
182
|
"import": "./components/Avatar/Avatar.js",
|
|
168
183
|
"require": "./components/Avatar/Avatar.cjs",
|
package/Tab-BbP8jBcK.cjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tab-BbP8jBcK.cjs","sources":["../src/components/Tabs/_tabUtils.tsx","../src/components/Tabs/Tabs.tsx","../src/components/Tabs/Tab.tsx"],"sourcesContent":["export const TAB_DISPLAY_MAP: Record<\"horizontal\" | \"vertical\", { display: string, flexDirection: string }> = {\n horizontal: { display: \"flex\", flexDirection: \"column\" },\n vertical: { display: \"flex\", flexDirection: \"row\" }\n};","import {\n Children,\n isValidElement,\n useState,\n type FC,\n type ReactElement,\n type ReactNode,\n type SyntheticEvent,\n} from 'react';\nimport {\n Tabs as MuiTabs,\n Tab as MuiTab,\n Box,\n type TabsProps as MuiTabsProps,\n} from '@mui/material';\n\nimport { TabProps } from './Tab';\nimport { TAB_DISPLAY_MAP } from './_tabUtils';\nimport { mergeSx } from '../_shared/mergeSx';\n\ntype PickTabsProps = Pick<\n MuiTabsProps,\n | 'centered'\n | 'indicatorColor'\n | 'orientation'\n | 'scrollButtons'\n | 'variant'\n | 'className'\n | 'sx'\n | 'visibleScrollbar'\n | 'allowScrollButtonsMobile'\n>;\n\nexport interface TabsProps extends PickTabsProps {\n /** Uno o varios `<Tab>`. Children que no sean `<Tab>` se ignoran. */\n children: ReactNode;\n /** Valor del tab inicialmente activo. Si no se provee, toma el `value` del primer `<Tab>` o `0`. */\n defaultValue?: number | string;\n /** Callback al cambiar de tab. Recibe el `value` del tab nuevo. */\n onChangeValue?: (newValue: number | string) => void;\n labelColor?: 'primary' | 'secondary' | 'inherit';\n /**\n * Cómo se manejan los paneles al cambiar de tab:\n * - `false` (default): **unmount** — solo se renderiza el panel activo; los\n * demás se desmontan. El state interno de los hijos se pierde al navegar.\n * Menor uso de memoria.\n * - `true`: **keep mounted** — renderiza todos los paneles pero oculta los\n * no activos con `display: none`. El state se preserva (inputs, scroll,\n * timers, subscripciones) al navegar entre tabs.\n */\n keepMounted?: boolean;\n}\n\nexport const Tabs: FC<TabsProps> = ({\n children,\n defaultValue,\n onChangeValue,\n centered = true,\n orientation = 'horizontal',\n scrollButtons = 'auto',\n variant = 'standard',\n indicatorColor = 'primary',\n labelColor = 'primary',\n className,\n allowScrollButtonsMobile = true,\n keepMounted = false,\n sx,\n}) => {\n // Filtra a solo <Tab> children — acepta arrays, single child, fragments,\n // y descarta cualquier otra cosa (strings, null, condicionales falsy).\n const tabs: ReactElement<TabProps>[] = Children.toArray(children).filter(\n (child): child is ReactElement<TabProps> =>\n isValidElement(child) &&\n (child.type as { displayName?: string })?.displayName === 'Tab',\n );\n\n const firstValue = tabs[0]?.props.value;\n const [currentValue, setCurrentValue] = useState<string | number>(\n defaultValue ?? firstValue ?? 0,\n );\n\n const handleChange = (_event: SyntheticEvent, newValue: number | string) => {\n setCurrentValue(newValue);\n onChangeValue?.(newValue);\n };\n\n const { display, flexDirection } = TAB_DISPLAY_MAP[orientation];\n\n return (\n <Box sx={{ display, flexDirection }}>\n <MuiTabs\n value={currentValue}\n onChange={handleChange}\n centered={centered}\n indicatorColor={indicatorColor}\n orientation={orientation}\n scrollButtons={scrollButtons}\n variant={variant}\n className={className}\n textColor={labelColor}\n allowScrollButtonsMobile={allowScrollButtonsMobile}\n sx={mergeSx({}, sx)}\n >\n {tabs.map((tab, idx) => {\n const {\n label,\n icon,\n value = idx,\n disabled,\n wrapped,\n iconPosition,\n className: tabClassName,\n sx: tabSx,\n } = tab.props;\n return (\n <MuiTab\n key={value}\n label={label}\n icon={icon}\n value={value}\n disabled={disabled}\n wrapped={wrapped}\n iconPosition={iconPosition}\n className={tabClassName}\n sx={tabSx}\n />\n );\n })}\n </MuiTabs>\n\n <Box m={2} sx={{ width: '100%' }}>\n {keepMounted\n ? tabs.map((tab, idx) => {\n const value = tab.props.value ?? idx;\n const isActive = value === currentValue;\n return (\n <Box\n key={value}\n role=\"tabpanel\"\n // `display: none` mantiene el nodo en el DOM — state de los\n // hijos (inputs, useState, etc.) no se pierde al navegar.\n sx={{ display: isActive ? 'block' : 'none' }}\n aria-hidden={!isActive}\n >\n {tab.props.children}\n </Box>\n );\n })\n : tabs.map((tab, idx) => {\n const value = tab.props.value ?? idx;\n if (value !== currentValue) return null;\n return (\n <Box key={value} role=\"tabpanel\">\n {tab.props.children}\n </Box>\n );\n })}\n </Box>\n </Box>\n );\n};\n\nexport default Tabs;\n","import React from \"react\";\nimport { TabProps as MuiTabProps } from \"@mui/material\";\n\ntype PickMuiTabProps = Pick<\n MuiTabProps,\n \"label\" | \"icon\" | \"disabled\" | \"sx\" | \"value\" | \"wrapped\" | \"iconPosition\" | \"className\" | \"disabled\"| 'disableRipple'\n>;\n\nexport interface TabProps extends PickMuiTabProps {\n value?: number;\n onChange?: () => void;\n children?: React.ReactNode;\n}\n\nexport const Tab = (_: TabProps): null => null;\n\nTab.displayName = \"Tab\";\n\nexport default Tab;\n"],"names":["Children","isValidElement","_a","useState","Box","jsx","MuiTabs","mergeSx","MuiTab"],"mappings":";;;;;AAAO,MAAM,kBAAiG;AAAA,EAC5G,YAAY,EAAE,SAAS,QAAQ,eAAe,SAAA;AAAA,EAC9C,UAAU,EAAE,SAAS,QAAQ,eAAe,MAAA;AAC9C;ACkDO,MAAM,OAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb;AAAA,EACA,2BAA2B;AAAA,EAC3B,cAAc;AAAA,EACd;AACF,MAAM;;AAGJ,QAAM,OAAiCA,MAAAA,SAAS,QAAQ,QAAQ,EAAE;AAAA,IAChE,CAAC,UAAA;;AACCC,mBAAAA,eAAe,KAAK,OACnBC,MAAA,MAAM,SAAN,gBAAAA,IAAyC,iBAAgB;AAAA;AAAA,EAAA;AAG9D,QAAM,cAAa,UAAK,CAAC,MAAN,mBAAS,MAAM;AAClC,QAAM,CAAC,cAAc,eAAe,IAAIC,MAAAA;AAAAA,KACtC,2CAAgB,eAAhB,YAA8B;AAAA,EAAA;AAGhC,QAAM,eAAe,CAAC,QAAwB,aAA8B;AAC1E,oBAAgB,QAAQ;AACxB,mDAAgB;AAAA,EAClB;AAEA,QAAM,EAAE,SAAS,kBAAkB,gBAAgB,WAAW;AAE9D,yCACGC,SAAAA,KAAA,EAAI,IAAI,EAAE,SAAS,iBAClB,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA,IAAIC,QAAAA,QAAQ,CAAA,GAAI,EAAE;AAAA,QAEjB,UAAA,KAAK,IAAI,CAAC,KAAK,QAAQ;AACtB,gBAAM;AAAA,YACJ;AAAA,YACA;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW;AAAA,YACX,IAAI;AAAA,UAAA,IACF,IAAI;AACR,iBACEF,2BAAAA;AAAAA,YAACG,SAAAA;AAAAA,YAAA;AAAA,cAEC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,WAAW;AAAA,cACX,IAAI;AAAA,YAAA;AAAA,YARC;AAAA,UAAA;AAAA,QAWX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAGHH,2BAAAA,IAACD,SAAAA,KAAA,EAAI,GAAG,GAAG,IAAI,EAAE,OAAO,OAAA,GACrB,UAAA,cACG,KAAK,IAAI,CAAC,KAAK,QAAQ;;AACvB,YAAM,SAAQF,MAAA,IAAI,MAAM,UAAV,OAAAA,MAAmB;AACjC,YAAM,WAAW,UAAU;AAC3B,aACEG,2BAAAA;AAAAA,QAACD,SAAAA;AAAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UAGL,IAAI,EAAE,SAAS,WAAW,UAAU,OAAA;AAAA,UACpC,eAAa,CAAC;AAAA,UAEb,cAAI,MAAM;AAAA,QAAA;AAAA,QAPN;AAAA,MAAA;AAAA,IAUX,CAAC,IACC,KAAK,IAAI,CAAC,KAAK,QAAQ;;AACvB,YAAM,SAAQF,MAAA,IAAI,MAAM,UAAV,OAAAA,MAAmB;AACjC,UAAI,UAAU,aAAc,QAAO;AACnC,4CACGE,SAAAA,KAAA,EAAgB,MAAK,YACnB,UAAA,IAAI,MAAM,YADH,KAEV;AAAA,IAEJ,CAAC,EAAA,CACL;AAAA,EAAA,GACF;AAEJ;AClJO,MAAM,MAAM,CAAC,MAAsB;AAE1C,IAAI,cAAc;;;"}
|
package/Tab-BxSxKJsP.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tab-BxSxKJsP.js","sources":["../src/components/Tabs/_tabUtils.tsx","../src/components/Tabs/Tabs.tsx","../src/components/Tabs/Tab.tsx"],"sourcesContent":["export const TAB_DISPLAY_MAP: Record<\"horizontal\" | \"vertical\", { display: string, flexDirection: string }> = {\n horizontal: { display: \"flex\", flexDirection: \"column\" },\n vertical: { display: \"flex\", flexDirection: \"row\" }\n};","import {\n Children,\n isValidElement,\n useState,\n type FC,\n type ReactElement,\n type ReactNode,\n type SyntheticEvent,\n} from 'react';\nimport {\n Tabs as MuiTabs,\n Tab as MuiTab,\n Box,\n type TabsProps as MuiTabsProps,\n} from '@mui/material';\n\nimport { TabProps } from './Tab';\nimport { TAB_DISPLAY_MAP } from './_tabUtils';\nimport { mergeSx } from '../_shared/mergeSx';\n\ntype PickTabsProps = Pick<\n MuiTabsProps,\n | 'centered'\n | 'indicatorColor'\n | 'orientation'\n | 'scrollButtons'\n | 'variant'\n | 'className'\n | 'sx'\n | 'visibleScrollbar'\n | 'allowScrollButtonsMobile'\n>;\n\nexport interface TabsProps extends PickTabsProps {\n /** Uno o varios `<Tab>`. Children que no sean `<Tab>` se ignoran. */\n children: ReactNode;\n /** Valor del tab inicialmente activo. Si no se provee, toma el `value` del primer `<Tab>` o `0`. */\n defaultValue?: number | string;\n /** Callback al cambiar de tab. Recibe el `value` del tab nuevo. */\n onChangeValue?: (newValue: number | string) => void;\n labelColor?: 'primary' | 'secondary' | 'inherit';\n /**\n * Cómo se manejan los paneles al cambiar de tab:\n * - `false` (default): **unmount** — solo se renderiza el panel activo; los\n * demás se desmontan. El state interno de los hijos se pierde al navegar.\n * Menor uso de memoria.\n * - `true`: **keep mounted** — renderiza todos los paneles pero oculta los\n * no activos con `display: none`. El state se preserva (inputs, scroll,\n * timers, subscripciones) al navegar entre tabs.\n */\n keepMounted?: boolean;\n}\n\nexport const Tabs: FC<TabsProps> = ({\n children,\n defaultValue,\n onChangeValue,\n centered = true,\n orientation = 'horizontal',\n scrollButtons = 'auto',\n variant = 'standard',\n indicatorColor = 'primary',\n labelColor = 'primary',\n className,\n allowScrollButtonsMobile = true,\n keepMounted = false,\n sx,\n}) => {\n // Filtra a solo <Tab> children — acepta arrays, single child, fragments,\n // y descarta cualquier otra cosa (strings, null, condicionales falsy).\n const tabs: ReactElement<TabProps>[] = Children.toArray(children).filter(\n (child): child is ReactElement<TabProps> =>\n isValidElement(child) &&\n (child.type as { displayName?: string })?.displayName === 'Tab',\n );\n\n const firstValue = tabs[0]?.props.value;\n const [currentValue, setCurrentValue] = useState<string | number>(\n defaultValue ?? firstValue ?? 0,\n );\n\n const handleChange = (_event: SyntheticEvent, newValue: number | string) => {\n setCurrentValue(newValue);\n onChangeValue?.(newValue);\n };\n\n const { display, flexDirection } = TAB_DISPLAY_MAP[orientation];\n\n return (\n <Box sx={{ display, flexDirection }}>\n <MuiTabs\n value={currentValue}\n onChange={handleChange}\n centered={centered}\n indicatorColor={indicatorColor}\n orientation={orientation}\n scrollButtons={scrollButtons}\n variant={variant}\n className={className}\n textColor={labelColor}\n allowScrollButtonsMobile={allowScrollButtonsMobile}\n sx={mergeSx({}, sx)}\n >\n {tabs.map((tab, idx) => {\n const {\n label,\n icon,\n value = idx,\n disabled,\n wrapped,\n iconPosition,\n className: tabClassName,\n sx: tabSx,\n } = tab.props;\n return (\n <MuiTab\n key={value}\n label={label}\n icon={icon}\n value={value}\n disabled={disabled}\n wrapped={wrapped}\n iconPosition={iconPosition}\n className={tabClassName}\n sx={tabSx}\n />\n );\n })}\n </MuiTabs>\n\n <Box m={2} sx={{ width: '100%' }}>\n {keepMounted\n ? tabs.map((tab, idx) => {\n const value = tab.props.value ?? idx;\n const isActive = value === currentValue;\n return (\n <Box\n key={value}\n role=\"tabpanel\"\n // `display: none` mantiene el nodo en el DOM — state de los\n // hijos (inputs, useState, etc.) no se pierde al navegar.\n sx={{ display: isActive ? 'block' : 'none' }}\n aria-hidden={!isActive}\n >\n {tab.props.children}\n </Box>\n );\n })\n : tabs.map((tab, idx) => {\n const value = tab.props.value ?? idx;\n if (value !== currentValue) return null;\n return (\n <Box key={value} role=\"tabpanel\">\n {tab.props.children}\n </Box>\n );\n })}\n </Box>\n </Box>\n );\n};\n\nexport default Tabs;\n","import React from \"react\";\nimport { TabProps as MuiTabProps } from \"@mui/material\";\n\ntype PickMuiTabProps = Pick<\n MuiTabProps,\n \"label\" | \"icon\" | \"disabled\" | \"sx\" | \"value\" | \"wrapped\" | \"iconPosition\" | \"className\" | \"disabled\"| 'disableRipple'\n>;\n\nexport interface TabProps extends PickMuiTabProps {\n value?: number;\n onChange?: () => void;\n children?: React.ReactNode;\n}\n\nexport const Tab = (_: TabProps): null => null;\n\nTab.displayName = \"Tab\";\n\nexport default Tab;\n"],"names":["_a","MuiTabs","MuiTab"],"mappings":";;;;AAAO,MAAM,kBAAiG;AAAA,EAC5G,YAAY,EAAE,SAAS,QAAQ,eAAe,SAAA;AAAA,EAC9C,UAAU,EAAE,SAAS,QAAQ,eAAe,MAAA;AAC9C;ACkDO,MAAM,OAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb;AAAA,EACA,2BAA2B;AAAA,EAC3B,cAAc;AAAA,EACd;AACF,MAAM;;AAGJ,QAAM,OAAiC,SAAS,QAAQ,QAAQ,EAAE;AAAA,IAChE,CAAC,UAAA;;AACC,4BAAe,KAAK,OACnBA,MAAA,MAAM,SAAN,gBAAAA,IAAyC,iBAAgB;AAAA;AAAA,EAAA;AAG9D,QAAM,cAAa,UAAK,CAAC,MAAN,mBAAS,MAAM;AAClC,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,KACtC,2CAAgB,eAAhB,YAA8B;AAAA,EAAA;AAGhC,QAAM,eAAe,CAAC,QAAwB,aAA8B;AAC1E,oBAAgB,QAAQ;AACxB,mDAAgB;AAAA,EAClB;AAEA,QAAM,EAAE,SAAS,kBAAkB,gBAAgB,WAAW;AAE9D,8BACG,KAAA,EAAI,IAAI,EAAE,SAAS,iBAClB,UAAA;AAAA,IAAA;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA,IAAI,QAAQ,CAAA,GAAI,EAAE;AAAA,QAEjB,UAAA,KAAK,IAAI,CAAC,KAAK,QAAQ;AACtB,gBAAM;AAAA,YACJ;AAAA,YACA;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW;AAAA,YACX,IAAI;AAAA,UAAA,IACF,IAAI;AACR,iBACE;AAAA,YAACC;AAAAA,YAAA;AAAA,cAEC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,WAAW;AAAA,cACX,IAAI;AAAA,YAAA;AAAA,YARC;AAAA,UAAA;AAAA,QAWX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAGH,oBAAC,KAAA,EAAI,GAAG,GAAG,IAAI,EAAE,OAAO,OAAA,GACrB,UAAA,cACG,KAAK,IAAI,CAAC,KAAK,QAAQ;;AACvB,YAAM,SAAQF,MAAA,IAAI,MAAM,UAAV,OAAAA,MAAmB;AACjC,YAAM,WAAW,UAAU;AAC3B,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UAGL,IAAI,EAAE,SAAS,WAAW,UAAU,OAAA;AAAA,UACpC,eAAa,CAAC;AAAA,UAEb,cAAI,MAAM;AAAA,QAAA;AAAA,QAPN;AAAA,MAAA;AAAA,IAUX,CAAC,IACC,KAAK,IAAI,CAAC,KAAK,QAAQ;;AACvB,YAAM,SAAQA,MAAA,IAAI,MAAM,UAAV,OAAAA,MAAmB;AACjC,UAAI,UAAU,aAAc,QAAO;AACnC,iCACG,KAAA,EAAgB,MAAK,YACnB,UAAA,IAAI,MAAM,YADH,KAEV;AAAA,IAEJ,CAAC,EAAA,CACL;AAAA,EAAA,GACF;AAEJ;AClJO,MAAM,MAAM,CAAC,MAAsB;AAE1C,IAAI,cAAc;"}
|