@soyfri/shared-library 2.0.0-beta.9 → 2.0.0
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/Button-C17mExpd.cjs.map +1 -1
- package/Button-UkkP-bNw.js.map +1 -1
- package/README.md +182 -150
- package/components/ActionMenu/ActionMenu.cjs +52 -52
- package/components/ActionMenu/ActionMenu.cjs.map +1 -1
- package/components/ActionMenu/ActionMenu.d.ts +20 -36
- package/components/ActionMenu/ActionMenu.js +55 -55
- package/components/ActionMenu/ActionMenu.js.map +1 -1
- package/components/ActionMenu/index.d.ts +2 -2
- package/components/AppBar/AppBar.cjs +2 -219
- package/components/AppBar/AppBar.cjs.map +1 -1
- package/components/AppBar/AppBar.d.ts +6 -6
- package/components/AppBar/AppBar.js +5 -222
- package/components/AppBar/AppBar.js.map +1 -1
- package/components/AppBar/index.d.ts +0 -6
- package/components/Autocomplete/Autocomplete.cjs +93 -94
- package/components/Autocomplete/Autocomplete.cjs.map +1 -1
- package/components/Autocomplete/Autocomplete.d.ts +29 -26
- package/components/Autocomplete/Autocomplete.definitions.d.ts +2 -1
- package/components/Autocomplete/Autocomplete.helpers.d.ts +12 -8
- package/components/Autocomplete/Autocomplete.js +94 -95
- package/components/Autocomplete/Autocomplete.js.map +1 -1
- package/components/Autocomplete/_parts/AutocompleteChips.d.ts +7 -6
- package/components/Autocomplete/_parts/AutocompleteOption.d.ts +10 -13
- package/components/Autocomplete/index.d.ts +1 -1
- package/components/Avatar/Avatar.cjs +17 -18
- package/components/Avatar/Avatar.cjs.map +1 -1
- package/components/Avatar/Avatar.js +17 -18
- package/components/Avatar/Avatar.js.map +1 -1
- package/components/Avatar/index.d.ts +1 -0
- package/components/Button/Button.d.ts +5 -5
- package/components/Button/index.d.ts +1 -0
- package/components/Card/Card.cjs +3 -92
- package/components/Card/Card.cjs.map +1 -1
- package/components/Card/Card.d.ts +3 -50
- package/components/Card/Card.js +5 -94
- package/components/Card/Card.js.map +1 -1
- package/components/Card/Card.sx.d.ts +3 -6
- package/components/Card/index.d.ts +1 -1
- package/components/Checkbox/Checkbox.cjs +189 -0
- package/components/Checkbox/Checkbox.cjs.map +1 -0
- package/components/Checkbox/Checkbox.d.ts +55 -0
- package/components/Checkbox/Checkbox.js +189 -0
- package/components/Checkbox/Checkbox.js.map +1 -0
- package/components/Checkbox/Checkbox.sx.d.ts +13 -0
- package/components/Checkbox/index.d.ts +2 -0
- package/components/Checkbox.d.ts +6 -0
- package/components/Chip/Chip.cjs +2 -1
- package/components/Chip/Chip.cjs.map +1 -1
- package/components/Chip/Chip.js +2 -1
- package/components/Chip/Chip.js.map +1 -1
- package/components/Chip/index.d.ts +2 -1
- package/components/Chip.d.ts +4 -0
- package/components/DatePicker/DatePicker.cjs +40 -63
- package/components/DatePicker/DatePicker.cjs.map +1 -1
- package/components/DatePicker/DatePicker.d.ts +1 -13
- package/components/DatePicker/DatePicker.js +36 -59
- package/components/DatePicker/DatePicker.js.map +1 -1
- package/components/DatePicker/index.d.ts +1 -1
- package/components/DateTimePicker/DateTimePicker.cjs +58 -82
- package/components/DateTimePicker/DateTimePicker.cjs.map +1 -1
- package/components/DateTimePicker/DateTimePicker.d.ts +9 -17
- package/components/DateTimePicker/DateTimePicker.definitions.d.ts +2 -0
- package/components/DateTimePicker/DateTimePicker.helpers.d.ts +4 -2
- package/components/DateTimePicker/DateTimePicker.js +54 -78
- package/components/DateTimePicker/DateTimePicker.js.map +1 -1
- package/components/DateTimePicker/index.d.ts +1 -1
- package/components/Drawer/Drawer.cjs +12 -6
- package/components/Drawer/Drawer.cjs.map +1 -1
- package/components/Drawer/Drawer.d.ts +3 -1
- package/components/Drawer/Drawer.js +13 -7
- package/components/Drawer/Drawer.js.map +1 -1
- package/components/Drawer/DrawerItem.d.ts +6 -1
- package/components/Gallery/Gallery.cjs +154 -79
- package/components/Gallery/Gallery.cjs.map +1 -1
- package/components/Gallery/Gallery.d.ts +25 -9
- package/components/Gallery/Gallery.js +154 -79
- package/components/Gallery/Gallery.js.map +1 -1
- package/components/Gallery/GalleryLightbox.d.ts +6 -10
- package/components/Gallery/GalleryMain.d.ts +3 -7
- package/components/Gallery/GalleryThumbnails.d.ts +7 -11
- package/components/Gallery/index.d.ts +2 -1
- package/components/Gallery.d.ts +4 -0
- package/components/Icon/Icon.cjs +6 -8
- package/components/Icon/Icon.cjs.map +1 -1
- package/components/Icon/Icon.d.ts +11 -17
- package/components/Icon/Icon.js +6 -8
- package/components/Icon/Icon.js.map +1 -1
- package/components/Icon/index.d.ts +2 -1
- package/components/Icon.d.ts +4 -0
- package/components/Input/Input.cjs +26 -13
- package/components/Input/Input.cjs.map +1 -1
- package/components/Input/Input.d.ts +9 -2
- package/components/Input/Input.helpers.d.ts +3 -3
- package/components/Input/Input.js +23 -10
- package/components/Input/Input.js.map +1 -1
- package/components/Input/index.d.ts +1 -1
- package/components/InputGroup/InputGroup.cjs +23 -22
- package/components/InputGroup/InputGroup.cjs.map +1 -1
- package/components/InputGroup/InputGroup.d.ts +4 -4
- package/components/InputGroup/InputGroup.js +22 -21
- package/components/InputGroup/InputGroup.js.map +1 -1
- package/components/InputGroup/index.d.ts +2 -1
- package/components/InputGroup.d.ts +4 -0
- package/components/Modal/Modal.cjs +127 -98
- package/components/Modal/Modal.cjs.map +1 -1
- package/components/Modal/Modal.d.ts +20 -5
- package/components/Modal/Modal.js +130 -101
- package/components/Modal/Modal.js.map +1 -1
- package/components/Modal/ModalBody.d.ts +6 -1
- package/components/Modal/ModalFooter.d.ts +4 -4
- package/components/Modal/ModalHeader.d.ts +6 -1
- package/components/Modal/index.d.ts +4 -2
- package/components/Modal.d.ts +4 -0
- package/components/RadioGroup/RadioGroup.cjs +9 -7
- package/components/RadioGroup/RadioGroup.cjs.map +1 -1
- package/components/RadioGroup/RadioGroup.d.ts +9 -3
- package/components/RadioGroup/RadioGroup.js +9 -7
- package/components/RadioGroup/RadioGroup.js.map +1 -1
- package/components/RadioGroup/index.d.ts +1 -1
- package/components/Select/Select.cjs +129 -264
- package/components/Select/Select.cjs.map +1 -1
- package/components/Select/Select.d.ts +35 -20
- package/components/Select/Select.helpers.d.ts +6 -19
- package/components/Select/Select.js +134 -269
- package/components/Select/Select.js.map +1 -1
- package/components/Select/index.d.ts +1 -1
- package/components/Stat/Stat.cjs +2 -2
- package/components/Stat/Stat.cjs.map +1 -1
- package/components/Stat/Stat.js +2 -2
- package/components/Stat/Stat.js.map +1 -1
- package/components/Stat/index.d.ts +2 -1
- package/components/Stat.d.ts +4 -0
- package/components/StatusMessage/StatusMessage.cjs +84 -55
- package/components/StatusMessage/StatusMessage.cjs.map +1 -1
- package/components/StatusMessage/StatusMessage.d.ts +20 -36
- package/components/StatusMessage/StatusMessage.js +86 -57
- package/components/StatusMessage/StatusMessage.js.map +1 -1
- package/components/StatusMessage/StatusMessageContext.d.ts +16 -0
- package/components/StatusMessage/index.d.ts +4 -1
- package/components/StatusMessage.d.ts +4 -0
- package/components/Stepper/Stepper.cjs +289 -55
- package/components/Stepper/Stepper.cjs.map +1 -1
- package/components/Stepper/Stepper.d.ts +9 -20
- package/components/Stepper/Stepper.js +291 -57
- package/components/Stepper/Stepper.js.map +1 -1
- package/{hooks/Wizard/WizardContext.d.ts → components/Stepper/StepperContext.d.ts} +29 -23
- package/components/Stepper/_hooks/useHorizontalScroll.d.ts +19 -0
- package/components/Stepper/_parts/StepperScrollArrow.d.ts +19 -0
- package/components/Stepper/index.d.ts +6 -2
- package/components/Stepper.d.ts +4 -0
- package/components/Switch/Switch.cjs +5 -2
- package/components/Switch/Switch.cjs.map +1 -1
- package/components/Switch/Switch.d.ts +7 -2
- package/components/Switch/Switch.js +5 -2
- package/components/Switch/Switch.js.map +1 -1
- package/components/Tabs/Tabs.cjs +45 -29
- package/components/Tabs/Tabs.cjs.map +1 -1
- package/components/Tabs/Tabs.d.ts +21 -16
- package/components/Tabs/Tabs.js +46 -30
- package/components/Tabs/Tabs.js.map +1 -1
- package/components/Tabs/index.d.ts +4 -2
- package/components/Tabs.d.ts +4 -0
- package/components/Timeline/Timeline.cjs +3 -2
- package/components/Timeline/Timeline.cjs.map +1 -1
- package/components/Timeline/Timeline.d.ts +4 -8
- package/components/Timeline/Timeline.js +3 -2
- package/components/Timeline/Timeline.js.map +1 -1
- package/components/Timeline/index.d.ts +4 -2
- package/components/Timeline.d.ts +4 -0
- package/components/_shared/mergeSx.d.ts +7 -0
- package/{formField.sx-DfVbMe0V.js → formField.sx-8_QRnKxv.js} +2 -11
- package/formField.sx-8_QRnKxv.js.map +1 -0
- package/{formField.sx-CQ1mbk9M.cjs → formField.sx-BAX7KwMR.cjs} +10 -19
- package/formField.sx-BAX7KwMR.cjs.map +1 -0
- package/index.cjs +31 -2
- package/index.cjs.map +1 -1
- package/index.d.ts +1 -0
- package/index.js +16 -2
- package/index.js.map +1 -1
- package/mergeSx-BXoNZjB_.js +10 -0
- package/mergeSx-BXoNZjB_.js.map +1 -0
- package/mergeSx-Dbccoo_H.cjs +9 -0
- package/mergeSx-Dbccoo_H.cjs.map +1 -0
- package/mui.d.ts +3 -2
- package/package.json +6 -16
- package/theme/componentStyles.d.ts +1 -1
- package/tokens-BRrcP_p_.js +21 -0
- package/tokens-BRrcP_p_.js.map +1 -0
- package/tokens-jaWWNk39.cjs +20 -0
- package/tokens-jaWWNk39.cjs.map +1 -0
- package/utils/index.d.ts +2 -0
- package/{components/ScrollTopButton → utils}/scrollToTop.d.ts +6 -7
- package/components/AppBar/AppBarBrand.d.ts +0 -31
- package/components/AppBar/AppBarUserMenu.d.ts +0 -65
- package/components/Autocomplete/Autocomplete.types.d.ts +0 -1
- package/components/DatePicker/DatePicker.types.d.ts +0 -1
- package/components/DateTimePicker/DateTimePicker.types.d.ts +0 -1
- package/components/Input/Input.types.d.ts +0 -1
- package/components/PageLoader/PageLoader.cjs +0 -61
- package/components/PageLoader/PageLoader.cjs.map +0 -1
- package/components/PageLoader/PageLoader.d.ts +0 -38
- package/components/PageLoader/PageLoader.js +0 -61
- package/components/PageLoader/PageLoader.js.map +0 -1
- package/components/PageLoader/index.d.ts +0 -2
- package/components/PageLoader.d.ts +0 -6
- package/components/RadioGroup/RadioGroup.types.d.ts +0 -1
- package/components/ScrollTopButton/ScrollTopButton.cjs +0 -79
- package/components/ScrollTopButton/ScrollTopButton.cjs.map +0 -1
- package/components/ScrollTopButton/ScrollTopButton.d.ts +0 -48
- package/components/ScrollTopButton/ScrollTopButton.js +0 -79
- package/components/ScrollTopButton/ScrollTopButton.js.map +0 -1
- package/components/ScrollTopButton/index.d.ts +0 -4
- package/components/ScrollTopButton.d.ts +0 -6
- package/components/Select/Select.definitions.d.ts +0 -17
- package/components/Select/Select.types.d.ts +0 -1
- package/components/Select/_parts/SelectSearchHeader.d.ts +0 -15
- package/components/Select/_parts/SelectValue.d.ts +0 -22
- package/formField.sx-CQ1mbk9M.cjs.map +0 -1
- package/formField.sx-DfVbMe0V.js.map +0 -1
- package/hooks/Wizard/Wizard.cjs +0 -7
- package/hooks/Wizard/Wizard.cjs.map +0 -1
- package/hooks/Wizard/Wizard.js +0 -7
- package/hooks/Wizard/Wizard.js.map +0 -1
- package/hooks/Wizard/index.d.ts +0 -3
- package/hooks/Wizard/useWizard.d.ts +0 -9
- package/hooks/Wizard.d.ts +0 -2
- package/useWizard-CWdIxZzX.cjs +0 -94
- package/useWizard-CWdIxZzX.cjs.map +0 -1
- package/useWizard-CWq--C3o.js +0 -95
- package/useWizard-CWq--C3o.js.map +0 -1
- /package/{styles.css → index.css} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.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
|
|
1
|
+
{"version":3,"file":"Tabs.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;;AACrB,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,IACD,KAAK,IAAI,CAAC,KAAK,QAAQ;;AACrB,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,CACP;AAAA,EAAA,GACF;AAEJ;AClJO,MAAM,MAAM,CAAC,MAAsB;AAE1C,IAAI,cAAc;"}
|
package/components/Tabs.d.ts
CHANGED
|
@@ -15,7 +15,7 @@ var __spreadValues = (a, b) => {
|
|
|
15
15
|
}
|
|
16
16
|
return a;
|
|
17
17
|
};
|
|
18
|
-
Object.
|
|
18
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
19
19
|
const jsxRuntime = require("react/jsx-runtime");
|
|
20
20
|
const React = require("react");
|
|
21
21
|
const MuiTimeline = require("@mui/lab/Timeline");
|
|
@@ -59,7 +59,7 @@ const Timeline = ({ children, position = "right", sx }) => {
|
|
|
59
59
|
(child, idx) => {
|
|
60
60
|
var _a;
|
|
61
61
|
return React__namespace.isValidElement(child) ? React__namespace.cloneElement(child, {
|
|
62
|
-
connectorColor: idx < count - 1 ? (_a = child.props.connectorColor) != null ? _a : "
|
|
62
|
+
connectorColor: idx < count - 1 ? (_a = child.props.connectorColor) != null ? _a : "grey" : void 0
|
|
63
63
|
}) : null;
|
|
64
64
|
}
|
|
65
65
|
)
|
|
@@ -82,4 +82,5 @@ const TimelineItem = ({
|
|
|
82
82
|
};
|
|
83
83
|
exports.Timeline = Timeline;
|
|
84
84
|
exports.TimelineItem = TimelineItem;
|
|
85
|
+
exports.default = Timeline;
|
|
85
86
|
//# sourceMappingURL=Timeline.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.cjs","sources":["../../../src/components/Timeline/Timeline.tsx","../../../src/components/Timeline/TimelineItem.tsx"],"sourcesContent":["import * as React from
|
|
1
|
+
{"version":3,"file":"Timeline.cjs","sources":["../../../src/components/Timeline/Timeline.tsx","../../../src/components/Timeline/TimelineItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport MuiTimeline from '@mui/lab/Timeline';\nimport { timelineItemClasses } from '@mui/lab/TimelineItem';\n\nimport type { TimelineItemProps } from './TimelineItem';\n\nexport interface TimelineProps {\n children: React.ReactElement<TimelineItemProps>[];\n position?: 'left' | 'right' | 'alternate' | 'alternate-reverse';\n sx?: object;\n}\n\nexport const Timeline: React.FC<TimelineProps> = ({ children, position = \"right\", sx }) => {\n const count = React.Children.count(children);\n\n const customSx = (position === \"left\" || position === \"right\")\n ? {\n [`& .${timelineItemClasses.root}:before`]: {\n flex: 0,\n padding: 0,\n },\n ...sx,\n }\n : sx;\n \n return (\n <MuiTimeline position={position}\n sx={{...customSx}}\n >\n {React.Children.map(children, (child, idx) =>\n React.isValidElement(child)\n ? React.cloneElement(child, {\n connectorColor: idx < count - 1\n ? child.props.connectorColor ?? 'grey'\n : undefined,\n })\n : null\n )}\n </MuiTimeline>\n\n );\n};\n\nexport default Timeline;","\nimport MuiTimelineItem from \"@mui/lab/TimelineItem\";\nimport MuiTimelineSeparator from \"@mui/lab/TimelineSeparator\";\nimport MuiTimelineConnector from \"@mui/lab/TimelineConnector\";\nimport MuiTimelineContent from \"@mui/lab/TimelineContent\";\nimport MuiTimelineDot from \"@mui/lab/TimelineDot\";\n\nexport interface TimelineItemProps {\n dotColor?: 'primary' | 'secondary' | 'grey' | 'inherit' | 'success' | 'error' | 'info' | 'warning';\n connectorColor?: 'success' | 'error' | 'info' | 'warning' | 'primary' | 'secondary' | 'grey';\n children: React.ReactNode;\n}\n\nexport const TimelineItem: React.FC<TimelineItemProps> = ({\n dotColor = 'grey',\n connectorColor,\n children\n}) => {\n const color = connectorColor ? `${connectorColor}.main` : 'secondary.main';\n return (\n <MuiTimelineItem>\n <MuiTimelineSeparator>\n <MuiTimelineDot color={dotColor} />\n {connectorColor !== undefined && <MuiTimelineConnector sx={{ bgcolor: color }} />}\n </MuiTimelineSeparator>\n <MuiTimelineContent>{children}</MuiTimelineContent>\n </MuiTimelineItem>\n );\n};\n\nexport default TimelineItem"],"names":["React","timelineItemClasses","jsx","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,WAAoC,CAAC,EAAE,UAAU,WAAW,SAAS,SAAS;AACzF,QAAM,QAAQA,iBAAM,SAAS,MAAM,QAAQ;AAEzC,QAAM,WAAY,aAAa,UAAU,aAAa,UACpD;AAAA,IACE,CAAC,MAAMC,gBAAAA,oBAAoB,IAAI,SAAS,GAAG;AAAA,MACzC,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,KAER,MAEL;AAEJ,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MAAY;AAAA,MACX,IAAI,mBAAI;AAAA,MAEP,2BAAM,SAAS;AAAA,QAAI;AAAA,QAAU,CAAC,OAAO,QAAA;;AACpCF,kCAAM,eAAe,KAAK,IACtBA,iBAAM,aAAa,OAAO;AAAA,YAC1B,gBAAgB,MAAM,QAAQ,KAC1B,WAAM,MAAM,mBAAZ,YAA8B,SAC9B;AAAA,UAAA,CACL,IACC;AAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAIN;AC5BO,MAAM,eAA4C,CAAC;AAAA,EACxD,WAAW;AAAA,EACX;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,iBAAiB,GAAG,cAAc,UAAU;AAC1D,yCACG,iBAAA,EACC,UAAA;AAAA,IAAAG,gCAAC,sBAAA,EACC,UAAA;AAAA,MAAAD,2BAAAA,IAAC,gBAAA,EAAe,OAAO,SAAA,CAAU;AAAA,MAChC,mBAAmB,UAAaA,2BAAAA,IAAC,sBAAA,EAAqB,IAAI,EAAE,SAAS,QAAM,CAAG;AAAA,IAAA,GACjF;AAAA,IACAA,+BAAC,sBAAoB,SAAA,CAAS;AAAA,EAAA,GAChC;AAEJ;;;;"}
|
|
@@ -1,12 +1,8 @@
|
|
|
1
|
-
import { TimelineItemProps
|
|
2
|
-
import * as React from
|
|
3
|
-
interface
|
|
4
|
-
connectorColor?: string;
|
|
5
|
-
sx?: object;
|
|
6
|
-
}
|
|
7
|
-
interface TimelineProps {
|
|
1
|
+
import { TimelineItemProps } from './TimelineItem';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
export interface TimelineProps {
|
|
8
4
|
children: React.ReactElement<TimelineItemProps>[];
|
|
9
|
-
position?:
|
|
5
|
+
position?: 'left' | 'right' | 'alternate' | 'alternate-reverse';
|
|
10
6
|
sx?: object;
|
|
11
7
|
}
|
|
12
8
|
export declare const Timeline: React.FC<TimelineProps>;
|
|
@@ -40,7 +40,7 @@ const Timeline = ({ children, position = "right", sx }) => {
|
|
|
40
40
|
(child, idx) => {
|
|
41
41
|
var _a;
|
|
42
42
|
return React.isValidElement(child) ? React.cloneElement(child, {
|
|
43
|
-
connectorColor: idx < count - 1 ? (_a = child.props.connectorColor) != null ? _a : "
|
|
43
|
+
connectorColor: idx < count - 1 ? (_a = child.props.connectorColor) != null ? _a : "grey" : void 0
|
|
44
44
|
}) : null;
|
|
45
45
|
}
|
|
46
46
|
)
|
|
@@ -63,6 +63,7 @@ const TimelineItem = ({
|
|
|
63
63
|
};
|
|
64
64
|
export {
|
|
65
65
|
Timeline,
|
|
66
|
-
TimelineItem
|
|
66
|
+
TimelineItem,
|
|
67
|
+
Timeline as default
|
|
67
68
|
};
|
|
68
69
|
//# sourceMappingURL=Timeline.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.js","sources":["../../../src/components/Timeline/Timeline.tsx","../../../src/components/Timeline/TimelineItem.tsx"],"sourcesContent":["import * as React from
|
|
1
|
+
{"version":3,"file":"Timeline.js","sources":["../../../src/components/Timeline/Timeline.tsx","../../../src/components/Timeline/TimelineItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport MuiTimeline from '@mui/lab/Timeline';\nimport { timelineItemClasses } from '@mui/lab/TimelineItem';\n\nimport type { TimelineItemProps } from './TimelineItem';\n\nexport interface TimelineProps {\n children: React.ReactElement<TimelineItemProps>[];\n position?: 'left' | 'right' | 'alternate' | 'alternate-reverse';\n sx?: object;\n}\n\nexport const Timeline: React.FC<TimelineProps> = ({ children, position = \"right\", sx }) => {\n const count = React.Children.count(children);\n\n const customSx = (position === \"left\" || position === \"right\")\n ? {\n [`& .${timelineItemClasses.root}:before`]: {\n flex: 0,\n padding: 0,\n },\n ...sx,\n }\n : sx;\n \n return (\n <MuiTimeline position={position}\n sx={{...customSx}}\n >\n {React.Children.map(children, (child, idx) =>\n React.isValidElement(child)\n ? React.cloneElement(child, {\n connectorColor: idx < count - 1\n ? child.props.connectorColor ?? 'grey'\n : undefined,\n })\n : null\n )}\n </MuiTimeline>\n\n );\n};\n\nexport default Timeline;","\nimport MuiTimelineItem from \"@mui/lab/TimelineItem\";\nimport MuiTimelineSeparator from \"@mui/lab/TimelineSeparator\";\nimport MuiTimelineConnector from \"@mui/lab/TimelineConnector\";\nimport MuiTimelineContent from \"@mui/lab/TimelineContent\";\nimport MuiTimelineDot from \"@mui/lab/TimelineDot\";\n\nexport interface TimelineItemProps {\n dotColor?: 'primary' | 'secondary' | 'grey' | 'inherit' | 'success' | 'error' | 'info' | 'warning';\n connectorColor?: 'success' | 'error' | 'info' | 'warning' | 'primary' | 'secondary' | 'grey';\n children: React.ReactNode;\n}\n\nexport const TimelineItem: React.FC<TimelineItemProps> = ({\n dotColor = 'grey',\n connectorColor,\n children\n}) => {\n const color = connectorColor ? `${connectorColor}.main` : 'secondary.main';\n return (\n <MuiTimelineItem>\n <MuiTimelineSeparator>\n <MuiTimelineDot color={dotColor} />\n {connectorColor !== undefined && <MuiTimelineConnector sx={{ bgcolor: color }} />}\n </MuiTimelineSeparator>\n <MuiTimelineContent>{children}</MuiTimelineContent>\n </MuiTimelineItem>\n );\n};\n\nexport default TimelineItem"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,WAAoC,CAAC,EAAE,UAAU,WAAW,SAAS,SAAS;AACzF,QAAM,QAAQ,MAAM,SAAS,MAAM,QAAQ;AAEzC,QAAM,WAAY,aAAa,UAAU,aAAa,UACpD;AAAA,IACE,CAAC,MAAM,oBAAoB,IAAI,SAAS,GAAG;AAAA,MACzC,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,KAER,MAEL;AAEJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MAAY;AAAA,MACX,IAAI,mBAAI;AAAA,MAEP,gBAAM,SAAS;AAAA,QAAI;AAAA,QAAU,CAAC,OAAO,QAAA;;AACpC,uBAAM,eAAe,KAAK,IACtB,MAAM,aAAa,OAAO;AAAA,YAC1B,gBAAgB,MAAM,QAAQ,KAC1B,WAAM,MAAM,mBAAZ,YAA8B,SAC9B;AAAA,UAAA,CACL,IACC;AAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAIN;AC5BO,MAAM,eAA4C,CAAC;AAAA,EACxD,WAAW;AAAA,EACX;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,iBAAiB,GAAG,cAAc,UAAU;AAC1D,8BACG,iBAAA,EACC,UAAA;AAAA,IAAA,qBAAC,sBAAA,EACC,UAAA;AAAA,MAAA,oBAAC,gBAAA,EAAe,OAAO,SAAA,CAAU;AAAA,MAChC,mBAAmB,UAAa,oBAAC,sBAAA,EAAqB,IAAI,EAAE,SAAS,QAAM,CAAG;AAAA,IAAA,GACjF;AAAA,IACA,oBAAC,sBAAoB,SAAA,CAAS;AAAA,EAAA,GAChC;AAEJ;"}
|
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
export { default
|
|
2
|
-
export {
|
|
1
|
+
export { Timeline, default } from './Timeline';
|
|
2
|
+
export type { TimelineProps } from './Timeline';
|
|
3
|
+
export { TimelineItem } from './TimelineItem';
|
|
4
|
+
export type { TimelineItemProps } from './TimelineItem';
|
package/components/Timeline.d.ts
CHANGED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { SxProps, Theme } from '@mui/material/styles';
|
|
2
|
+
/**
|
|
3
|
+
* Merge helper para props `sx` de MUI. Acepta formatos objeto o array y
|
|
4
|
+
* devuelve un array combinado. El `extra` se aplica después del `base` —
|
|
5
|
+
* el consumer puede pisar los defaults del componente.
|
|
6
|
+
*/
|
|
7
|
+
export declare const mergeSx: (base: SxProps<Theme>, extra?: SxProps<Theme>) => SxProps<Theme>;
|
|
@@ -14,15 +14,7 @@ var __spreadValues = (a, b) => {
|
|
|
14
14
|
}
|
|
15
15
|
return a;
|
|
16
16
|
};
|
|
17
|
-
|
|
18
|
-
const FIELD_INPUT_PADDING_Y = "8.5px";
|
|
19
|
-
const LABEL_SHRINK_TRANSFORM = "translate(4px, -22px) scale(0.85)";
|
|
20
|
-
const LABEL_TRANSFORM_ORIGIN = "top left";
|
|
21
|
-
const LABEL_TRANSITION = "color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms";
|
|
22
|
-
const LABEL_COLOR_REST = "text.secondary";
|
|
23
|
-
const LABEL_COLOR_FILLED = "text.primary";
|
|
24
|
-
const LABEL_COLOR_FOCUSED = "primary.main";
|
|
25
|
-
const LABEL_FONT_WEIGHT_FILLED = 500;
|
|
17
|
+
import { a as LABEL_COLOR_FOCUSED, b as LABEL_FONT_WEIGHT_FILLED, c as LABEL_COLOR_FILLED, d as LABEL_TRANSFORM_ORIGIN, e as LABEL_SHRINK_TRANSFORM, f as LABEL_TRANSITION, g as LABEL_COLOR_REST, L as LABEL_MARGIN_TOP } from "./tokens-BRrcP_p_.js";
|
|
26
18
|
const toRadius = (borderRadius) => typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
|
|
27
19
|
const buildFormFieldSx = ({
|
|
28
20
|
borderRadius,
|
|
@@ -71,7 +63,6 @@ const buildFormFieldSx = ({
|
|
|
71
63
|
}, extraOutsideSx != null ? extraOutsideSx : {});
|
|
72
64
|
};
|
|
73
65
|
export {
|
|
74
|
-
FIELD_INPUT_PADDING_Y as F,
|
|
75
66
|
buildFormFieldSx as b
|
|
76
67
|
};
|
|
77
|
-
//# sourceMappingURL=formField.sx-
|
|
68
|
+
//# sourceMappingURL=formField.sx-8_QRnKxv.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"formField.sx-8_QRnKxv.js","sources":["../src/components/_shared/formField.sx.ts"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles';\n\nimport {\n LABEL_COLOR_FILLED,\n LABEL_COLOR_FOCUSED,\n LABEL_COLOR_REST,\n LABEL_FONT_WEIGHT_FILLED,\n LABEL_MARGIN_TOP,\n LABEL_SHRINK_TRANSFORM,\n LABEL_TRANSFORM_ORIGIN,\n LABEL_TRANSITION,\n} from '../../theme/tokens';\n\nexport type LabelPosition = 'outside' | 'floating';\n\nexport interface BuildFormFieldSxOptions {\n borderRadius: number | string;\n labelPosition: LabelPosition;\n /**\n * Si es `true`, los selectores incluyen también la API nueva de MUI X\n * Pickers (v8): `MuiPickersInputBase-root`, `MuiPickersOutlinedInput-*`.\n */\n includePickersApi?: boolean;\n /**\n * Selectores/valores extra que se mergean SOLO cuando labelPosition === 'outside'.\n * Usar para paddings específicos del componente (p.ej. MuiAutocomplete-input).\n */\n extraOutsideSx?: Record<string, any>;\n /**\n * Selectores/valores extra que se mergean SOLO cuando labelPosition === 'floating'.\n */\n extraFloatingSx?: Record<string, any>;\n}\n\nconst toRadius = (borderRadius: number | string) =>\n typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;\n\n/**\n * Builder del sx compartido por todos los campos de formulario\n * (Input/Select/Autocomplete/DatePicker/DateTimePicker).\n *\n * Produce:\n * - en modo \"floating\": sólo el border-radius del outlined input;\n * - en modo \"outside\": todo el pack (margen superior, label flotante afuera,\n * input base, notched outline oculto, helper text sin margen izquierdo).\n *\n * Componentes con paddings o selectores propios pueden inyectarlos vía\n * `extraOutsideSx` / `extraFloatingSx`.\n */\nexport const buildFormFieldSx = ({\n borderRadius,\n labelPosition,\n includePickersApi = false,\n extraOutsideSx,\n extraFloatingSx,\n}: BuildFormFieldSxOptions): SxProps<Theme> => {\n const radius = toRadius(borderRadius);\n\n // ── Selectores (alternan según la API de pickers) ────────────────────\n const outlinedRootSelector = includePickersApi\n ? '& .MuiOutlinedInput-root, & .MuiPickersOutlinedInput-root'\n : '& .MuiOutlinedInput-root';\n\n const inputBaseSelector = includePickersApi\n ? '& .MuiInputBase-root, & .MuiPickersInputBase-root'\n : '& .MuiInputBase-root';\n\n const notchedOutlineSelector = includePickersApi\n ? '& .MuiOutlinedInput-notchedOutline, & .MuiPickersOutlinedInput-notchedOutline'\n : '& .MuiOutlinedInput-notchedOutline';\n\n // ── Floating ─────────────────────────────────────────────────────────\n if (labelPosition === 'floating') {\n return {\n [outlinedRootSelector]: { borderRadius: radius },\n ...(extraFloatingSx ?? {}),\n };\n }\n\n // ── Outside ──────────────────────────────────────────────────────────\n return {\n marginTop: LABEL_MARGIN_TOP,\n\n '& .MuiInputLabel-root': {\n color: LABEL_COLOR_REST,\n transition: LABEL_TRANSITION,\n\n // Estado shrunk (focused o con valor): flota ARRIBA del input.\n '&.MuiInputLabel-shrink': {\n transform: LABEL_SHRINK_TRANSFORM,\n transformOrigin: LABEL_TRANSFORM_ORIGIN,\n color: LABEL_COLOR_FILLED,\n fontWeight: LABEL_FONT_WEIGHT_FILLED,\n },\n\n '&.Mui-focused': { color: LABEL_COLOR_FOCUSED },\n },\n\n // Input base — centra verticalmente (clásico y, si aplica, pickers).\n [inputBaseSelector]: {\n borderRadius: radius,\n display: 'flex',\n alignItems: 'center',\n },\n\n // El label flota afuera: ocultar legend del notch.\n [notchedOutlineSelector]: {\n top: 0,\n '& legend': { display: 'none' },\n },\n\n '& .MuiFormHelperText-root': {\n marginLeft: 0,\n },\n\n ...(extraOutsideSx ?? {}),\n };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAkCA,MAAM,WAAW,CAAC,iBAChB,OAAO,iBAAiB,WAAW,GAAG,YAAY,OAAO;AAcpD,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB;AAAA,EACA;AACF,MAA+C;AAC7C,QAAM,SAAS,SAAS,YAAY;AAGpC,QAAM,uBAAuB,oBACzB,8DACA;AAEJ,QAAM,oBAAoB,oBACtB,sDACA;AAEJ,QAAM,yBAAyB,oBAC3B,kFACA;AAGJ,MAAI,kBAAkB,YAAY;AAChC,WAAO;AAAA,MACL,CAAC,oBAAoB,GAAG,EAAE,cAAc,OAAA;AAAA,OACpC,4CAAmB,CAAA;AAAA,EAE3B;AAGA,SAAO;AAAA,IACL,WAAW;AAAA,IAEX,yBAAyB;AAAA,MACvB,OAAO;AAAA,MACP,YAAY;AAAA;AAAA,MAGZ,0BAA0B;AAAA,QACxB,WAAW;AAAA,QACX,iBAAiB;AAAA,QACjB,OAAO;AAAA,QACP,YAAY;AAAA,MAAA;AAAA,MAGd,iBAAiB,EAAE,OAAO,oBAAA;AAAA,IAAoB;AAAA;AAAA,IAIhD,CAAC,iBAAiB,GAAG;AAAA,MACnB,cAAc;AAAA,MACd,SAAS;AAAA,MACT,YAAY;AAAA,IAAA;AAAA;AAAA,IAId,CAAC,sBAAsB,GAAG;AAAA,MACxB,KAAK;AAAA,MACL,YAAY,EAAE,SAAS,OAAA;AAAA,IAAO;AAAA,IAGhC,6BAA6B;AAAA,MAC3B,YAAY;AAAA,IAAA;AAAA,KAGV,0CAAkB,CAAA;AAE1B;"}
|
|
@@ -15,15 +15,7 @@ var __spreadValues = (a, b) => {
|
|
|
15
15
|
}
|
|
16
16
|
return a;
|
|
17
17
|
};
|
|
18
|
-
const
|
|
19
|
-
const FIELD_INPUT_PADDING_Y = "8.5px";
|
|
20
|
-
const LABEL_SHRINK_TRANSFORM = "translate(4px, -22px) scale(0.85)";
|
|
21
|
-
const LABEL_TRANSFORM_ORIGIN = "top left";
|
|
22
|
-
const LABEL_TRANSITION = "color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms";
|
|
23
|
-
const LABEL_COLOR_REST = "text.secondary";
|
|
24
|
-
const LABEL_COLOR_FILLED = "text.primary";
|
|
25
|
-
const LABEL_COLOR_FOCUSED = "primary.main";
|
|
26
|
-
const LABEL_FONT_WEIGHT_FILLED = 500;
|
|
18
|
+
const tokens = require("./tokens-jaWWNk39.cjs");
|
|
27
19
|
const toRadius = (borderRadius) => typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
|
|
28
20
|
const buildFormFieldSx = ({
|
|
29
21
|
borderRadius,
|
|
@@ -42,18 +34,18 @@ const buildFormFieldSx = ({
|
|
|
42
34
|
}, extraFloatingSx != null ? extraFloatingSx : {});
|
|
43
35
|
}
|
|
44
36
|
return __spreadValues({
|
|
45
|
-
marginTop: LABEL_MARGIN_TOP,
|
|
37
|
+
marginTop: tokens.LABEL_MARGIN_TOP,
|
|
46
38
|
"& .MuiInputLabel-root": {
|
|
47
|
-
color: LABEL_COLOR_REST,
|
|
48
|
-
transition: LABEL_TRANSITION,
|
|
39
|
+
color: tokens.LABEL_COLOR_REST,
|
|
40
|
+
transition: tokens.LABEL_TRANSITION,
|
|
49
41
|
// Estado shrunk (focused o con valor): flota ARRIBA del input.
|
|
50
42
|
"&.MuiInputLabel-shrink": {
|
|
51
|
-
transform: LABEL_SHRINK_TRANSFORM,
|
|
52
|
-
transformOrigin: LABEL_TRANSFORM_ORIGIN,
|
|
53
|
-
color: LABEL_COLOR_FILLED,
|
|
54
|
-
fontWeight: LABEL_FONT_WEIGHT_FILLED
|
|
43
|
+
transform: tokens.LABEL_SHRINK_TRANSFORM,
|
|
44
|
+
transformOrigin: tokens.LABEL_TRANSFORM_ORIGIN,
|
|
45
|
+
color: tokens.LABEL_COLOR_FILLED,
|
|
46
|
+
fontWeight: tokens.LABEL_FONT_WEIGHT_FILLED
|
|
55
47
|
},
|
|
56
|
-
"&.Mui-focused": { color: LABEL_COLOR_FOCUSED }
|
|
48
|
+
"&.Mui-focused": { color: tokens.LABEL_COLOR_FOCUSED }
|
|
57
49
|
},
|
|
58
50
|
// Input base — centra verticalmente (clásico y, si aplica, pickers).
|
|
59
51
|
[inputBaseSelector]: {
|
|
@@ -71,6 +63,5 @@ const buildFormFieldSx = ({
|
|
|
71
63
|
}
|
|
72
64
|
}, extraOutsideSx != null ? extraOutsideSx : {});
|
|
73
65
|
};
|
|
74
|
-
exports.FIELD_INPUT_PADDING_Y = FIELD_INPUT_PADDING_Y;
|
|
75
66
|
exports.buildFormFieldSx = buildFormFieldSx;
|
|
76
|
-
//# sourceMappingURL=formField.sx-
|
|
67
|
+
//# sourceMappingURL=formField.sx-BAX7KwMR.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"formField.sx-BAX7KwMR.cjs","sources":["../src/components/_shared/formField.sx.ts"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles';\n\nimport {\n LABEL_COLOR_FILLED,\n LABEL_COLOR_FOCUSED,\n LABEL_COLOR_REST,\n LABEL_FONT_WEIGHT_FILLED,\n LABEL_MARGIN_TOP,\n LABEL_SHRINK_TRANSFORM,\n LABEL_TRANSFORM_ORIGIN,\n LABEL_TRANSITION,\n} from '../../theme/tokens';\n\nexport type LabelPosition = 'outside' | 'floating';\n\nexport interface BuildFormFieldSxOptions {\n borderRadius: number | string;\n labelPosition: LabelPosition;\n /**\n * Si es `true`, los selectores incluyen también la API nueva de MUI X\n * Pickers (v8): `MuiPickersInputBase-root`, `MuiPickersOutlinedInput-*`.\n */\n includePickersApi?: boolean;\n /**\n * Selectores/valores extra que se mergean SOLO cuando labelPosition === 'outside'.\n * Usar para paddings específicos del componente (p.ej. MuiAutocomplete-input).\n */\n extraOutsideSx?: Record<string, any>;\n /**\n * Selectores/valores extra que se mergean SOLO cuando labelPosition === 'floating'.\n */\n extraFloatingSx?: Record<string, any>;\n}\n\nconst toRadius = (borderRadius: number | string) =>\n typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;\n\n/**\n * Builder del sx compartido por todos los campos de formulario\n * (Input/Select/Autocomplete/DatePicker/DateTimePicker).\n *\n * Produce:\n * - en modo \"floating\": sólo el border-radius del outlined input;\n * - en modo \"outside\": todo el pack (margen superior, label flotante afuera,\n * input base, notched outline oculto, helper text sin margen izquierdo).\n *\n * Componentes con paddings o selectores propios pueden inyectarlos vía\n * `extraOutsideSx` / `extraFloatingSx`.\n */\nexport const buildFormFieldSx = ({\n borderRadius,\n labelPosition,\n includePickersApi = false,\n extraOutsideSx,\n extraFloatingSx,\n}: BuildFormFieldSxOptions): SxProps<Theme> => {\n const radius = toRadius(borderRadius);\n\n // ── Selectores (alternan según la API de pickers) ────────────────────\n const outlinedRootSelector = includePickersApi\n ? '& .MuiOutlinedInput-root, & .MuiPickersOutlinedInput-root'\n : '& .MuiOutlinedInput-root';\n\n const inputBaseSelector = includePickersApi\n ? '& .MuiInputBase-root, & .MuiPickersInputBase-root'\n : '& .MuiInputBase-root';\n\n const notchedOutlineSelector = includePickersApi\n ? '& .MuiOutlinedInput-notchedOutline, & .MuiPickersOutlinedInput-notchedOutline'\n : '& .MuiOutlinedInput-notchedOutline';\n\n // ── Floating ─────────────────────────────────────────────────────────\n if (labelPosition === 'floating') {\n return {\n [outlinedRootSelector]: { borderRadius: radius },\n ...(extraFloatingSx ?? {}),\n };\n }\n\n // ── Outside ──────────────────────────────────────────────────────────\n return {\n marginTop: LABEL_MARGIN_TOP,\n\n '& .MuiInputLabel-root': {\n color: LABEL_COLOR_REST,\n transition: LABEL_TRANSITION,\n\n // Estado shrunk (focused o con valor): flota ARRIBA del input.\n '&.MuiInputLabel-shrink': {\n transform: LABEL_SHRINK_TRANSFORM,\n transformOrigin: LABEL_TRANSFORM_ORIGIN,\n color: LABEL_COLOR_FILLED,\n fontWeight: LABEL_FONT_WEIGHT_FILLED,\n },\n\n '&.Mui-focused': { color: LABEL_COLOR_FOCUSED },\n },\n\n // Input base — centra verticalmente (clásico y, si aplica, pickers).\n [inputBaseSelector]: {\n borderRadius: radius,\n display: 'flex',\n alignItems: 'center',\n },\n\n // El label flota afuera: ocultar legend del notch.\n [notchedOutlineSelector]: {\n top: 0,\n '& legend': { display: 'none' },\n },\n\n '& .MuiFormHelperText-root': {\n marginLeft: 0,\n },\n\n ...(extraOutsideSx ?? {}),\n };\n};\n"],"names":["LABEL_MARGIN_TOP","LABEL_COLOR_REST","LABEL_TRANSITION","LABEL_SHRINK_TRANSFORM","LABEL_TRANSFORM_ORIGIN","LABEL_COLOR_FILLED","LABEL_FONT_WEIGHT_FILLED","LABEL_COLOR_FOCUSED"],"mappings":";;;;;;;;;;;;;;;;;;AAkCA,MAAM,WAAW,CAAC,iBAChB,OAAO,iBAAiB,WAAW,GAAG,YAAY,OAAO;AAcpD,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB;AAAA,EACA;AACF,MAA+C;AAC7C,QAAM,SAAS,SAAS,YAAY;AAGpC,QAAM,uBAAuB,oBACzB,8DACA;AAEJ,QAAM,oBAAoB,oBACtB,sDACA;AAEJ,QAAM,yBAAyB,oBAC3B,kFACA;AAGJ,MAAI,kBAAkB,YAAY;AAChC,WAAO;AAAA,MACL,CAAC,oBAAoB,GAAG,EAAE,cAAc,OAAA;AAAA,OACpC,4CAAmB,CAAA;AAAA,EAE3B;AAGA,SAAO;AAAA,IACL,WAAWA,OAAAA;AAAAA,IAEX,yBAAyB;AAAA,MACvB,OAAOC,OAAAA;AAAAA,MACP,YAAYC,OAAAA;AAAAA;AAAAA,MAGZ,0BAA0B;AAAA,QACxB,WAAWC,OAAAA;AAAAA,QACX,iBAAiBC,OAAAA;AAAAA,QACjB,OAAOC,OAAAA;AAAAA,QACP,YAAYC,OAAAA;AAAAA,MAAA;AAAA,MAGd,iBAAiB,EAAE,OAAOC,OAAAA,oBAAA;AAAA,IAAoB;AAAA;AAAA,IAIhD,CAAC,iBAAiB,GAAG;AAAA,MACnB,cAAc;AAAA,MACd,SAAS;AAAA,MACT,YAAY;AAAA,IAAA;AAAA;AAAA,IAId,CAAC,sBAAsB,GAAG;AAAA,MACxB,KAAK;AAAA,MACL,YAAY,EAAE,SAAS,OAAA;AAAA,IAAO;AAAA,IAGhC,6BAA6B;AAAA,MAC3B,YAAY;AAAA,IAAA;AAAA,KAGV,0CAAkB,CAAA;AAE1B;;"}
|
package/index.cjs
CHANGED
|
@@ -1,8 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
require('./
|
|
4
|
-
const resolvePreset = require("./resolvePreset-CT3kU-K2.cjs");
|
|
3
|
+
require('./index.css');const resolvePreset = require("./resolvePreset-CT3kU-K2.cjs");
|
|
5
4
|
const material = require("@mui/material");
|
|
5
|
+
const timeViewRenderers = require("@mui/x-date-pickers/timeViewRenderers");
|
|
6
|
+
function scrollToTop({
|
|
7
|
+
behavior = "smooth",
|
|
8
|
+
target = typeof window !== "undefined" ? window : void 0,
|
|
9
|
+
top = 0
|
|
10
|
+
} = {}) {
|
|
11
|
+
if (!target) return;
|
|
12
|
+
target.scrollTo({ top, left: 0, behavior });
|
|
13
|
+
}
|
|
6
14
|
exports.DEFAULT_PRESET_NAME = resolvePreset.DEFAULT_PRESET_NAME;
|
|
7
15
|
exports.resolvePreset = resolvePreset.resolvePreset;
|
|
8
16
|
Object.defineProperty(exports, "Alert", {
|
|
@@ -49,6 +57,14 @@ Object.defineProperty(exports, "Grow", {
|
|
|
49
57
|
enumerable: true,
|
|
50
58
|
get: () => material.Grow
|
|
51
59
|
});
|
|
60
|
+
Object.defineProperty(exports, "IconButton", {
|
|
61
|
+
enumerable: true,
|
|
62
|
+
get: () => material.IconButton
|
|
63
|
+
});
|
|
64
|
+
Object.defineProperty(exports, "InputAdornment", {
|
|
65
|
+
enumerable: true,
|
|
66
|
+
get: () => material.InputAdornment
|
|
67
|
+
});
|
|
52
68
|
Object.defineProperty(exports, "LinearProgress", {
|
|
53
69
|
enumerable: true,
|
|
54
70
|
get: () => material.LinearProgress
|
|
@@ -97,6 +113,10 @@ Object.defineProperty(exports, "Stack", {
|
|
|
97
113
|
enumerable: true,
|
|
98
114
|
get: () => material.Stack
|
|
99
115
|
});
|
|
116
|
+
Object.defineProperty(exports, "ThemeProvider", {
|
|
117
|
+
enumerable: true,
|
|
118
|
+
get: () => material.ThemeProvider
|
|
119
|
+
});
|
|
100
120
|
Object.defineProperty(exports, "Typography", {
|
|
101
121
|
enumerable: true,
|
|
102
122
|
get: () => material.Typography
|
|
@@ -109,6 +129,10 @@ Object.defineProperty(exports, "alpha", {
|
|
|
109
129
|
enumerable: true,
|
|
110
130
|
get: () => material.alpha
|
|
111
131
|
});
|
|
132
|
+
Object.defineProperty(exports, "createTheme", {
|
|
133
|
+
enumerable: true,
|
|
134
|
+
get: () => material.createTheme
|
|
135
|
+
});
|
|
112
136
|
Object.defineProperty(exports, "styled", {
|
|
113
137
|
enumerable: true,
|
|
114
138
|
get: () => material.styled
|
|
@@ -121,4 +145,9 @@ Object.defineProperty(exports, "useTheme", {
|
|
|
121
145
|
enumerable: true,
|
|
122
146
|
get: () => material.useTheme
|
|
123
147
|
});
|
|
148
|
+
Object.defineProperty(exports, "renderMultiSectionDigitalClockTimeView", {
|
|
149
|
+
enumerable: true,
|
|
150
|
+
get: () => timeViewRenderers.renderMultiSectionDigitalClockTimeView
|
|
151
|
+
});
|
|
152
|
+
exports.scrollToTop = scrollToTop;
|
|
124
153
|
//# sourceMappingURL=index.cjs.map
|
package/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"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
package/index.js
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
|
-
import './styles.css';/* empty css */
|
|
2
1
|
import { D, r } from "./resolvePreset-B-IB0ehH.js";
|
|
3
|
-
import { Alert, AlertTitle, Backdrop, Box, CircularProgress, Collapse, Container, Divider, Fade, Grid, Grow, LinearProgress, Link, List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListSubheader, Paper, Skeleton, Snackbar, Stack, Typography, Zoom, alpha, styled, useMediaQuery, useTheme } from "@mui/material";
|
|
2
|
+
import { Alert, AlertTitle, Backdrop, Box, CircularProgress, Collapse, Container, Divider, Fade, Grid, Grow, IconButton, InputAdornment, LinearProgress, Link, List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListSubheader, Paper, Skeleton, Snackbar, Stack, ThemeProvider, Typography, Zoom, alpha, createTheme, styled, useMediaQuery, useTheme } from "@mui/material";
|
|
3
|
+
import { renderMultiSectionDigitalClockTimeView } from "@mui/x-date-pickers/timeViewRenderers";
|
|
4
|
+
import './index.css';function scrollToTop({
|
|
5
|
+
behavior = "smooth",
|
|
6
|
+
target = typeof window !== "undefined" ? window : void 0,
|
|
7
|
+
top = 0
|
|
8
|
+
} = {}) {
|
|
9
|
+
if (!target) return;
|
|
10
|
+
target.scrollTo({ top, left: 0, behavior });
|
|
11
|
+
}
|
|
4
12
|
export {
|
|
5
13
|
Alert,
|
|
6
14
|
AlertTitle,
|
|
@@ -14,6 +22,8 @@ export {
|
|
|
14
22
|
Fade,
|
|
15
23
|
Grid,
|
|
16
24
|
Grow,
|
|
25
|
+
IconButton,
|
|
26
|
+
InputAdornment,
|
|
17
27
|
LinearProgress,
|
|
18
28
|
Link,
|
|
19
29
|
List,
|
|
@@ -26,10 +36,14 @@ export {
|
|
|
26
36
|
Skeleton,
|
|
27
37
|
Snackbar,
|
|
28
38
|
Stack,
|
|
39
|
+
ThemeProvider,
|
|
29
40
|
Typography,
|
|
30
41
|
Zoom,
|
|
31
42
|
alpha,
|
|
43
|
+
createTheme,
|
|
44
|
+
renderMultiSectionDigitalClockTimeView,
|
|
32
45
|
r as resolvePreset,
|
|
46
|
+
scrollToTop,
|
|
33
47
|
styled,
|
|
34
48
|
useMediaQuery,
|
|
35
49
|
useTheme
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"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;"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
const mergeSx = (base, extra) => {
|
|
2
|
+
if (!extra) return base;
|
|
3
|
+
const baseArr = Array.isArray(base) ? base : [base];
|
|
4
|
+
const extraArr = Array.isArray(extra) ? extra : [extra];
|
|
5
|
+
return [...baseArr, ...extraArr];
|
|
6
|
+
};
|
|
7
|
+
export {
|
|
8
|
+
mergeSx as m
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=mergeSx-BXoNZjB_.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mergeSx-BXoNZjB_.js","sources":["../src/components/_shared/mergeSx.ts"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles';\n\n/**\n * Merge helper para props `sx` de MUI. Acepta formatos objeto o array y\n * devuelve un array combinado. El `extra` se aplica después del `base` —\n * el consumer puede pisar los defaults del componente.\n */\nexport const mergeSx = (\n base: SxProps<Theme>,\n extra?: SxProps<Theme>,\n): SxProps<Theme> => {\n if (!extra) return base;\n const baseArr = Array.isArray(base) ? base : [base];\n const extraArr = Array.isArray(extra) ? extra : [extra];\n return [...baseArr, ...extraArr] as SxProps<Theme>;\n};\n"],"names":[],"mappings":"AAOO,MAAM,UAAU,CACrB,MACA,UACmB;AACnB,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,UAAU,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI;AAClD,QAAM,WAAW,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AACtD,SAAO,CAAC,GAAG,SAAS,GAAG,QAAQ;AACjC;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const mergeSx = (base, extra) => {
|
|
3
|
+
if (!extra) return base;
|
|
4
|
+
const baseArr = Array.isArray(base) ? base : [base];
|
|
5
|
+
const extraArr = Array.isArray(extra) ? extra : [extra];
|
|
6
|
+
return [...baseArr, ...extraArr];
|
|
7
|
+
};
|
|
8
|
+
exports.mergeSx = mergeSx;
|
|
9
|
+
//# sourceMappingURL=mergeSx-Dbccoo_H.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mergeSx-Dbccoo_H.cjs","sources":["../src/components/_shared/mergeSx.ts"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles';\n\n/**\n * Merge helper para props `sx` de MUI. Acepta formatos objeto o array y\n * devuelve un array combinado. El `extra` se aplica después del `base` —\n * el consumer puede pisar los defaults del componente.\n */\nexport const mergeSx = (\n base: SxProps<Theme>,\n extra?: SxProps<Theme>,\n): SxProps<Theme> => {\n if (!extra) return base;\n const baseArr = Array.isArray(base) ? base : [base];\n const extraArr = Array.isArray(extra) ? extra : [extra];\n return [...baseArr, ...extraArr] as SxProps<Theme>;\n};\n"],"names":[],"mappings":";AAOO,MAAM,UAAU,CACrB,MACA,UACmB;AACnB,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,UAAU,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI;AAClD,QAAM,WAAW,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AACtD,SAAO,CAAC,GAAG,SAAS,GAAG,QAAQ;AACjC;;"}
|
package/mui.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { Box, Stack, Grid, Container, Paper, Divider, } from '@mui/material';
|
|
2
2
|
export { Typography, Link } from '@mui/material';
|
|
3
3
|
export { List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListSubheader, } from '@mui/material';
|
|
4
|
-
export { CircularProgress, LinearProgress, Skeleton, Alert, AlertTitle, Snackbar, Backdrop, Fade, Grow, Zoom, Collapse, } from '@mui/material';
|
|
5
|
-
export { useTheme, useMediaQuery, alpha, styled } from '@mui/material';
|
|
4
|
+
export { CircularProgress, LinearProgress, Skeleton, Alert, AlertTitle, Snackbar, Backdrop, Fade, Grow, Zoom, Collapse, IconButton, InputAdornment, } from '@mui/material';
|
|
5
|
+
export { useTheme, useMediaQuery, alpha, styled, createTheme, ThemeProvider } from '@mui/material';
|
|
6
6
|
export type { SxProps, Theme } from '@mui/material/styles';
|
|
7
|
+
export { renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@soyfri/shared-library",
|
|
3
|
-
"version": "2.0.0
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -83,21 +83,11 @@
|
|
|
83
83
|
"require": "./components/Select/Select.cjs",
|
|
84
84
|
"types": "./components/Select/Select.d.ts"
|
|
85
85
|
},
|
|
86
|
-
"./components/ScrollTopButton": {
|
|
87
|
-
"import": "./components/ScrollTopButton/ScrollTopButton.js",
|
|
88
|
-
"require": "./components/ScrollTopButton/ScrollTopButton.cjs",
|
|
89
|
-
"types": "./components/ScrollTopButton/ScrollTopButton.d.ts"
|
|
90
|
-
},
|
|
91
86
|
"./components/RadioGroup": {
|
|
92
87
|
"import": "./components/RadioGroup/RadioGroup.js",
|
|
93
88
|
"require": "./components/RadioGroup/RadioGroup.cjs",
|
|
94
89
|
"types": "./components/RadioGroup/RadioGroup.d.ts"
|
|
95
90
|
},
|
|
96
|
-
"./components/PageLoader": {
|
|
97
|
-
"import": "./components/PageLoader/PageLoader.js",
|
|
98
|
-
"require": "./components/PageLoader/PageLoader.cjs",
|
|
99
|
-
"types": "./components/PageLoader/PageLoader.d.ts"
|
|
100
|
-
},
|
|
101
91
|
"./components/Modal": {
|
|
102
92
|
"import": "./components/Modal/Modal.js",
|
|
103
93
|
"require": "./components/Modal/Modal.cjs",
|
|
@@ -163,6 +153,11 @@
|
|
|
163
153
|
"require": "./components/Chip/Chip.cjs",
|
|
164
154
|
"types": "./components/Chip/Chip.d.ts"
|
|
165
155
|
},
|
|
156
|
+
"./components/Checkbox": {
|
|
157
|
+
"import": "./components/Checkbox/Checkbox.js",
|
|
158
|
+
"require": "./components/Checkbox/Checkbox.cjs",
|
|
159
|
+
"types": "./components/Checkbox/Checkbox.d.ts"
|
|
160
|
+
},
|
|
166
161
|
"./components/Card": {
|
|
167
162
|
"import": "./components/Card/Card.js",
|
|
168
163
|
"require": "./components/Card/Card.cjs",
|
|
@@ -193,11 +188,6 @@
|
|
|
193
188
|
"require": "./components/ActionMenu/ActionMenu.cjs",
|
|
194
189
|
"types": "./components/ActionMenu/ActionMenu.d.ts"
|
|
195
190
|
},
|
|
196
|
-
"./hooks/Wizard": {
|
|
197
|
-
"import": "./hooks/Wizard/Wizard.js",
|
|
198
|
-
"require": "./hooks/Wizard/Wizard.cjs",
|
|
199
|
-
"types": "./hooks/Wizard/Wizard.d.ts"
|
|
200
|
-
},
|
|
201
191
|
"./hooks/ClipBoard": {
|
|
202
192
|
"import": "./hooks/ClipBoard/ClipBoard.js",
|
|
203
193
|
"require": "./hooks/ClipBoard/ClipBoard.cjs",
|
|
@@ -4,7 +4,7 @@ import { SxProps, Theme } from '@mui/material/styles';
|
|
|
4
4
|
* theme. Si en el futuro se agrega otro componente al sistema, se extiende
|
|
5
5
|
* esta union.
|
|
6
6
|
*/
|
|
7
|
-
export type LibraryComponentName = 'Input' | 'Select' | 'Autocomplete' | 'DatePicker' | 'DateTimePicker' | 'Drawer' | 'AppBar' | 'Card' | '
|
|
7
|
+
export type LibraryComponentName = 'Input' | 'Select' | 'Autocomplete' | 'DatePicker' | 'DateTimePicker' | 'Drawer' | 'AppBar' | 'Card' | 'RadioGroup' | 'Switch' | 'Checkbox' | 'Gallery';
|
|
8
8
|
/**
|
|
9
9
|
* Un estilo de preset. Puede ser un objeto sx directo o una función del theme
|
|
10
10
|
* para acceder a palette/typography/etc.
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
const LABEL_MARGIN_TOP = "14px";
|
|
2
|
+
const FIELD_INPUT_PADDING_Y = "8.5px";
|
|
3
|
+
const LABEL_SHRINK_TRANSFORM = "translate(4px, -22px) scale(0.85)";
|
|
4
|
+
const LABEL_TRANSFORM_ORIGIN = "top left";
|
|
5
|
+
const LABEL_TRANSITION = "color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms";
|
|
6
|
+
const LABEL_COLOR_REST = "text.secondary";
|
|
7
|
+
const LABEL_COLOR_FILLED = "text.primary";
|
|
8
|
+
const LABEL_COLOR_FOCUSED = "primary.main";
|
|
9
|
+
const LABEL_FONT_WEIGHT_FILLED = 500;
|
|
10
|
+
export {
|
|
11
|
+
FIELD_INPUT_PADDING_Y as F,
|
|
12
|
+
LABEL_MARGIN_TOP as L,
|
|
13
|
+
LABEL_COLOR_FOCUSED as a,
|
|
14
|
+
LABEL_FONT_WEIGHT_FILLED as b,
|
|
15
|
+
LABEL_COLOR_FILLED as c,
|
|
16
|
+
LABEL_TRANSFORM_ORIGIN as d,
|
|
17
|
+
LABEL_SHRINK_TRANSFORM as e,
|
|
18
|
+
LABEL_TRANSITION as f,
|
|
19
|
+
LABEL_COLOR_REST as g
|
|
20
|
+
};
|
|
21
|
+
//# sourceMappingURL=tokens-BRrcP_p_.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tokens-BRrcP_p_.js","sources":["../src/theme/tokens.ts"],"sourcesContent":["/**\n * Design tokens compartidos por los componentes de formulario\n * (Input, Select, Autocomplete, DatePicker, DateTimePicker).\n *\n * Centralizar estos valores garantiza que:\n * - el espaciado, la tipografía y las animaciones del label sean idénticos\n * en todos los campos;\n * - un cambio visual global (p.ej. cambiar el transform del shrink) se haga\n * en un único archivo.\n */\n\n// ── Spacing ──────────────────────────────────────────────────────────────\n/** Margen superior que deja el aire para el label flotante \"outside\". */\nexport const LABEL_MARGIN_TOP = '14px';\n\n/** Padding vertical interno del input (TextField/Select/Picker sections). */\nexport const FIELD_INPUT_PADDING_Y = '8.5px';\n\n// ── Label animation ──────────────────────────────────────────────────────\n/** Transform que aplica el label cuando sube arriba del input (shrink). */\nexport const LABEL_SHRINK_TRANSFORM = 'translate(4px, -22px) scale(0.85)';\n\n/** Origen del transform para el shrink. */\nexport const LABEL_TRANSFORM_ORIGIN = 'top left';\n\n/** Transición del label (color + transform + max-width). */\nexport const LABEL_TRANSITION =\n 'color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, ' +\n 'transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, ' +\n 'max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms';\n\n// ── Label colors (theme-aware) ───────────────────────────────────────────\n/** Color del label en reposo. */\nexport const LABEL_COLOR_REST = 'text.secondary';\n\n/** Color del label cuando el campo tiene valor (shrink). */\nexport const LABEL_COLOR_FILLED = 'text.primary';\n\n/** Color del label cuando el campo está focused. */\nexport const LABEL_COLOR_FOCUSED = 'primary.main';\n\n/** Peso del label cuando sube (filled/focused). */\nexport const LABEL_FONT_WEIGHT_FILLED = 500;\n"],"names":[],"mappings":"AAaO,MAAM,mBAAmB;AAGzB,MAAM,wBAAwB;AAI9B,MAAM,yBAAyB;AAG/B,MAAM,yBAAyB;AAG/B,MAAM,mBACX;AAMK,MAAM,mBAAmB;AAGzB,MAAM,qBAAqB;AAG3B,MAAM,sBAAsB;AAG5B,MAAM,2BAA2B;"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const LABEL_MARGIN_TOP = "14px";
|
|
3
|
+
const FIELD_INPUT_PADDING_Y = "8.5px";
|
|
4
|
+
const LABEL_SHRINK_TRANSFORM = "translate(4px, -22px) scale(0.85)";
|
|
5
|
+
const LABEL_TRANSFORM_ORIGIN = "top left";
|
|
6
|
+
const LABEL_TRANSITION = "color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms";
|
|
7
|
+
const LABEL_COLOR_REST = "text.secondary";
|
|
8
|
+
const LABEL_COLOR_FILLED = "text.primary";
|
|
9
|
+
const LABEL_COLOR_FOCUSED = "primary.main";
|
|
10
|
+
const LABEL_FONT_WEIGHT_FILLED = 500;
|
|
11
|
+
exports.FIELD_INPUT_PADDING_Y = FIELD_INPUT_PADDING_Y;
|
|
12
|
+
exports.LABEL_COLOR_FILLED = LABEL_COLOR_FILLED;
|
|
13
|
+
exports.LABEL_COLOR_FOCUSED = LABEL_COLOR_FOCUSED;
|
|
14
|
+
exports.LABEL_COLOR_REST = LABEL_COLOR_REST;
|
|
15
|
+
exports.LABEL_FONT_WEIGHT_FILLED = LABEL_FONT_WEIGHT_FILLED;
|
|
16
|
+
exports.LABEL_MARGIN_TOP = LABEL_MARGIN_TOP;
|
|
17
|
+
exports.LABEL_SHRINK_TRANSFORM = LABEL_SHRINK_TRANSFORM;
|
|
18
|
+
exports.LABEL_TRANSFORM_ORIGIN = LABEL_TRANSFORM_ORIGIN;
|
|
19
|
+
exports.LABEL_TRANSITION = LABEL_TRANSITION;
|
|
20
|
+
//# sourceMappingURL=tokens-jaWWNk39.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tokens-jaWWNk39.cjs","sources":["../src/theme/tokens.ts"],"sourcesContent":["/**\n * Design tokens compartidos por los componentes de formulario\n * (Input, Select, Autocomplete, DatePicker, DateTimePicker).\n *\n * Centralizar estos valores garantiza que:\n * - el espaciado, la tipografía y las animaciones del label sean idénticos\n * en todos los campos;\n * - un cambio visual global (p.ej. cambiar el transform del shrink) se haga\n * en un único archivo.\n */\n\n// ── Spacing ──────────────────────────────────────────────────────────────\n/** Margen superior que deja el aire para el label flotante \"outside\". */\nexport const LABEL_MARGIN_TOP = '14px';\n\n/** Padding vertical interno del input (TextField/Select/Picker sections). */\nexport const FIELD_INPUT_PADDING_Y = '8.5px';\n\n// ── Label animation ──────────────────────────────────────────────────────\n/** Transform que aplica el label cuando sube arriba del input (shrink). */\nexport const LABEL_SHRINK_TRANSFORM = 'translate(4px, -22px) scale(0.85)';\n\n/** Origen del transform para el shrink. */\nexport const LABEL_TRANSFORM_ORIGIN = 'top left';\n\n/** Transición del label (color + transform + max-width). */\nexport const LABEL_TRANSITION =\n 'color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, ' +\n 'transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, ' +\n 'max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms';\n\n// ── Label colors (theme-aware) ───────────────────────────────────────────\n/** Color del label en reposo. */\nexport const LABEL_COLOR_REST = 'text.secondary';\n\n/** Color del label cuando el campo tiene valor (shrink). */\nexport const LABEL_COLOR_FILLED = 'text.primary';\n\n/** Color del label cuando el campo está focused. */\nexport const LABEL_COLOR_FOCUSED = 'primary.main';\n\n/** Peso del label cuando sube (filled/focused). */\nexport const LABEL_FONT_WEIGHT_FILLED = 500;\n"],"names":[],"mappings":";AAaO,MAAM,mBAAmB;AAGzB,MAAM,wBAAwB;AAI9B,MAAM,yBAAyB;AAG/B,MAAM,yBAAyB;AAG/B,MAAM,mBACX;AAMK,MAAM,mBAAmB;AAGzB,MAAM,qBAAqB;AAG3B,MAAM,sBAAsB;AAG5B,MAAM,2BAA2B;;;;;;;;;;"}
|
package/utils/index.d.ts
ADDED