@soyfri/shared-library 1.5.0 → 1.6.0-beta.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 -0
- package/Button-UkkP-bNw.js.map +1 -0
- package/components/ActionMenu/ActionMenu.cjs +107 -0
- package/components/ActionMenu/ActionMenu.cjs.map +1 -0
- package/components/ActionMenu/ActionMenu.d.ts +44 -0
- package/components/ActionMenu/ActionMenu.js +107 -0
- package/components/ActionMenu/ActionMenu.js.map +1 -0
- package/components/ActionMenu/index.d.ts +2 -0
- package/components/ActionMenu.d.ts +6 -0
- package/components/AppBar/AppBar.cjs +129 -0
- package/components/AppBar/AppBar.cjs.map +1 -0
- package/components/AppBar/AppBar.d.ts +55 -0
- package/components/AppBar/AppBar.js +129 -0
- package/components/AppBar/AppBar.js.map +1 -0
- package/components/AppBar/AppBar.sx.d.ts +12 -0
- package/components/AppBar/AppBarContext.d.ts +18 -0
- package/components/AppBar/AppBarMenuToggle.d.ts +39 -0
- package/components/AppBar/index.d.ts +6 -0
- package/components/AppBar.d.ts +6 -0
- package/components/Autocomplete/Autocomplete.cjs +313 -0
- package/components/Autocomplete/Autocomplete.cjs.map +1 -0
- package/components/Autocomplete/Autocomplete.d.ts +86 -0
- package/components/Autocomplete/Autocomplete.definitions.d.ts +16 -0
- package/components/Autocomplete/Autocomplete.helpers.d.ts +22 -0
- package/components/Autocomplete/Autocomplete.js +313 -0
- package/components/Autocomplete/Autocomplete.js.map +1 -0
- package/components/Autocomplete/Autocomplete.sx.d.ts +7 -0
- package/components/Autocomplete/_parts/AutocompleteChips.d.ts +20 -0
- package/components/Autocomplete/_parts/AutocompleteLoader.d.ts +9 -0
- package/components/Autocomplete/_parts/AutocompleteOption.d.ts +16 -0
- package/components/Autocomplete/index.d.ts +2 -0
- package/components/Autocomplete.d.ts +6 -0
- package/components/Avatar/Avatar.cjs +162 -0
- package/components/Avatar/Avatar.cjs.map +1 -0
- package/components/Avatar/Avatar.d.ts +33 -0
- package/components/Avatar/Avatar.definitions.d.ts +11 -0
- package/components/Avatar/Avatar.js +162 -0
- package/components/Avatar/Avatar.js.map +1 -0
- package/components/Avatar/index.d.ts +2 -0
- package/{dist/components → components}/Button/Button.d.ts +5 -5
- package/{dist/components → components}/Button/index.d.ts +1 -0
- package/components/Card/Card.cjs +99 -0
- package/components/Card/Card.cjs.map +1 -0
- package/components/Card/Card.d.ts +36 -0
- package/components/Card/Card.js +99 -0
- package/components/Card/Card.js.map +1 -0
- package/components/Card/Card.sx.d.ts +14 -0
- package/components/Card/index.d.ts +4 -0
- package/components/Card.d.ts +6 -0
- 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/{dist/components → components}/Chip/Chip.cjs +2 -1
- package/components/Chip/Chip.cjs.map +1 -0
- package/{dist/components → components}/Chip/Chip.js +2 -1
- package/components/Chip/Chip.js.map +1 -0
- package/components/Chip/index.d.ts +2 -0
- package/components/Chip.d.ts +6 -0
- package/components/DatePicker/DatePicker.cjs +180 -0
- package/components/DatePicker/DatePicker.cjs.map +1 -0
- package/components/DatePicker/DatePicker.d.ts +44 -0
- package/{dist/components → components}/DatePicker/DatePicker.definitions.d.ts +1 -0
- package/components/DatePicker/DatePicker.helpers.d.ts +7 -0
- package/components/DatePicker/DatePicker.js +180 -0
- package/components/DatePicker/DatePicker.js.map +1 -0
- package/components/DatePicker/DatePicker.sx.d.ts +9 -0
- package/components/DatePicker/index.d.ts +2 -0
- package/components/DatePicker.d.ts +6 -0
- package/components/DateTimePicker/DateTimePicker.cjs +198 -0
- package/components/DateTimePicker/DateTimePicker.cjs.map +1 -0
- package/components/DateTimePicker/DateTimePicker.d.ts +57 -0
- package/{dist/components → components}/DateTimePicker/DateTimePicker.definitions.d.ts +3 -0
- package/components/DateTimePicker/DateTimePicker.helpers.d.ts +13 -0
- package/components/DateTimePicker/DateTimePicker.js +198 -0
- package/components/DateTimePicker/DateTimePicker.js.map +1 -0
- package/components/DateTimePicker/DateTimePicker.sx.d.ts +7 -0
- package/components/DateTimePicker/index.d.ts +2 -0
- package/components/DateTimePicker.d.ts +6 -0
- package/components/Drawer/Drawer.cjs +272 -0
- package/components/Drawer/Drawer.cjs.map +1 -0
- package/components/Drawer/Drawer.d.ts +58 -0
- package/components/Drawer/Drawer.js +272 -0
- package/components/Drawer/Drawer.js.map +1 -0
- package/components/Drawer/Drawer.sx.d.ts +23 -0
- package/components/Drawer/DrawerContext.d.ts +18 -0
- package/components/Drawer/DrawerItem.d.ts +40 -0
- package/components/Drawer/index.d.ts +6 -0
- package/components/Drawer.d.ts +6 -0
- package/{dist/components → components}/Gallery/Gallery.cjs +154 -79
- package/components/Gallery/Gallery.cjs.map +1 -0
- package/components/Gallery/Gallery.d.ts +28 -0
- package/{dist/components → components}/Gallery/Gallery.js +154 -79
- package/components/Gallery/Gallery.js.map +1 -0
- package/components/Gallery/GalleryLightbox.d.ts +16 -0
- package/{dist/components → components}/Gallery/GalleryMain.d.ts +3 -7
- package/components/Gallery/GalleryThumbnails.d.ts +13 -0
- package/components/Gallery/index.d.ts +2 -0
- package/components/Gallery.d.ts +6 -0
- package/{dist/components → components}/Icon/Icon.cjs +49 -10
- package/components/Icon/Icon.cjs.map +1 -0
- package/components/Icon/Icon.d.ts +48 -0
- package/{dist/components → components}/Icon/Icon.js +49 -10
- package/components/Icon/Icon.js.map +1 -0
- package/components/Icon/index.d.ts +2 -0
- package/components/Icon.d.ts +6 -0
- package/components/Input/Input.cjs +188 -0
- package/components/Input/Input.cjs.map +1 -0
- package/components/Input/Input.d.ts +44 -0
- package/{dist/components → components}/Input/Input.definitions.d.ts +6 -2
- package/components/Input/Input.helpers.d.ts +14 -0
- package/components/Input/Input.js +188 -0
- package/components/Input/Input.js.map +1 -0
- package/components/Input/Input.sx.d.ts +8 -0
- package/components/Input/index.d.ts +2 -0
- package/components/Input.d.ts +6 -0
- package/components/InputGroup/InputGroup.cjs +140 -0
- package/components/InputGroup/InputGroup.cjs.map +1 -0
- package/components/InputGroup/InputGroup.d.ts +42 -0
- package/components/InputGroup/InputGroup.definitions.d.ts +6 -0
- package/components/InputGroup/InputGroup.js +140 -0
- package/components/InputGroup/InputGroup.js.map +1 -0
- package/components/InputGroup/index.d.ts +2 -0
- package/components/InputGroup.d.ts +6 -0
- package/components/Modal/Modal.cjs +348 -0
- package/components/Modal/Modal.cjs.map +1 -0
- package/components/Modal/Modal.d.ts +80 -0
- package/components/Modal/Modal.js +348 -0
- package/components/Modal/Modal.js.map +1 -0
- package/components/Modal/ModalBody.d.ts +11 -0
- package/components/Modal/ModalFooter.d.ts +27 -0
- package/components/Modal/ModalHeader.d.ts +11 -0
- package/components/Modal/index.d.ts +8 -0
- package/components/Modal.d.ts +6 -0
- package/components/RadioGroup/RadioGroup.cjs +204 -0
- package/components/RadioGroup/RadioGroup.cjs.map +1 -0
- package/components/RadioGroup/RadioGroup.d.ts +59 -0
- package/components/RadioGroup/RadioGroup.definitions.d.ts +6 -0
- package/components/RadioGroup/RadioGroup.js +204 -0
- package/components/RadioGroup/RadioGroup.js.map +1 -0
- package/components/RadioGroup/RadioGroup.sx.d.ts +20 -0
- package/components/RadioGroup/index.d.ts +2 -0
- package/components/RadioGroup.d.ts +6 -0
- package/components/Select/Select.cjs +313 -0
- package/components/Select/Select.cjs.map +1 -0
- package/components/Select/Select.d.ts +95 -0
- package/components/Select/Select.helpers.d.ts +15 -0
- package/components/Select/Select.js +313 -0
- package/components/Select/Select.js.map +1 -0
- package/components/Select/Select.sx.d.ts +7 -0
- package/components/Select/_parts/SelectMenuItem.d.ts +20 -0
- package/components/Select/index.d.ts +2 -0
- package/components/Select.d.ts +6 -0
- package/{dist/components → components}/Stat/Stat.cjs +2 -2
- package/{dist/components → components}/Stat/Stat.cjs.map +1 -1
- package/{dist/components → components}/Stat/Stat.js +2 -2
- package/{dist/components → components}/Stat/Stat.js.map +1 -1
- package/components/Stat/index.d.ts +2 -0
- package/components/Stat.d.ts +6 -0
- package/components/StatusMessage/StatusMessage.cjs +90 -0
- package/components/StatusMessage/StatusMessage.cjs.map +1 -0
- package/components/StatusMessage/StatusMessage.d.ts +28 -0
- package/components/StatusMessage/StatusMessage.js +90 -0
- package/components/StatusMessage/StatusMessage.js.map +1 -0
- package/components/StatusMessage/index.d.ts +2 -0
- package/components/StatusMessage.d.ts +6 -0
- package/components/Stepper/Stepper.cjs +302 -0
- package/components/Stepper/Stepper.cjs.map +1 -0
- package/components/Stepper/Stepper.d.ts +17 -0
- package/components/Stepper/Stepper.js +302 -0
- package/components/Stepper/Stepper.js.map +1 -0
- package/components/Stepper/StepperContext.d.ts +73 -0
- 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 -0
- package/components/Stepper.d.ts +6 -0
- package/components/Switch/Switch.cjs +184 -0
- package/components/Switch/Switch.cjs.map +1 -0
- package/components/Switch/Switch.d.ts +48 -0
- package/components/Switch/Switch.definitions.d.ts +7 -0
- package/components/Switch/Switch.js +184 -0
- package/components/Switch/Switch.js.map +1 -0
- package/components/Switch/Switch.sx.d.ts +22 -0
- package/components/Switch/Switch.types.d.ts +1 -0
- package/components/Switch/index.d.ts +2 -0
- package/components/Switch.d.ts +6 -0
- package/components/Tabs/Tabs.cjs +112 -0
- package/components/Tabs/Tabs.cjs.map +1 -0
- package/components/Tabs/Tabs.d.ts +24 -0
- package/components/Tabs/Tabs.js +112 -0
- package/components/Tabs/Tabs.js.map +1 -0
- package/components/Tabs/index.d.ts +4 -0
- package/components/Tabs.d.ts +6 -0
- package/{dist/components → components}/Timeline/Timeline.cjs +3 -2
- package/components/Timeline/Timeline.cjs.map +1 -0
- package/components/Timeline/Timeline.d.ts +9 -0
- package/{dist/components → components}/Timeline/Timeline.js +3 -2
- package/components/Timeline/Timeline.js.map +1 -0
- package/components/Timeline/index.d.ts +4 -0
- package/components/Timeline.d.ts +6 -0
- package/components/_shared/formField.sx.d.ts +33 -0
- package/components/_shared/mergeSx.d.ts +7 -0
- package/components/_shared/resolvePreset.d.ts +18 -0
- package/formField.sx-8_QRnKxv.js +68 -0
- package/formField.sx-8_QRnKxv.js.map +1 -0
- package/formField.sx-BAX7KwMR.cjs +67 -0
- package/formField.sx-BAX7KwMR.cjs.map +1 -0
- package/index.cjs +145 -0
- package/index.cjs.map +1 -0
- package/index.d.ts +4 -0
- package/index.js +49 -0
- package/index.js.map +1 -0
- 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 +7 -0
- package/package.json +164 -43
- package/resolvePreset-B-IB0ehH.js +15 -0
- package/resolvePreset-B-IB0ehH.js.map +1 -0
- package/resolvePreset-CT3kU-K2.cjs +14 -0
- package/resolvePreset-CT3kU-K2.cjs.map +1 -0
- package/theme/componentStyles.d.ts +32 -0
- package/theme/tokens.d.ts +28 -0
- 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/utils/scrollToTop.d.ts +28 -0
- package/.dockerignore +0 -8
- package/.github/workflows/publish.yml +0 -107
- package/.prettierrc +0 -3
- package/.storybook/main.ts +0 -19
- package/.storybook/preview.ts +0 -14
- package/.storybook/vitest.setup.ts +0 -9
- package/Dockerfile +0 -37
- package/build.js +0 -102
- package/chromatic.config.json +0 -5
- package/cleanDirectories.js +0 -40
- package/dist/Button-C17mExpd.cjs.map +0 -1
- package/dist/Button-UkkP-bNw.js.map +0 -1
- package/dist/DatePicker-BSNboVhN.js +0 -201
- package/dist/DatePicker-BSNboVhN.js.map +0 -1
- package/dist/DatePicker-BoqxWAhj.cjs +0 -200
- package/dist/DatePicker-BoqxWAhj.cjs.map +0 -1
- package/dist/Input-DFHs7cJ_.js +0 -171
- package/dist/Input-DFHs7cJ_.js.map +0 -1
- package/dist/Input-c8MwNNPg.cjs +0 -170
- package/dist/Input-c8MwNNPg.cjs.map +0 -1
- package/dist/Select-BO2N56sm.cjs +0 -411
- package/dist/Select-BO2N56sm.cjs.map +0 -1
- package/dist/Select-BcLkyHSE.js +0 -412
- package/dist/Select-BcLkyHSE.js.map +0 -1
- package/dist/components/Autocomplete/Autocomplete.cjs +0 -109
- package/dist/components/Autocomplete/Autocomplete.cjs.map +0 -1
- package/dist/components/Autocomplete/Autocomplete.d.ts +0 -28
- package/dist/components/Autocomplete/Autocomplete.definitions.d.ts +0 -9
- package/dist/components/Autocomplete/Autocomplete.js +0 -109
- package/dist/components/Autocomplete/Autocomplete.js.map +0 -1
- package/dist/components/Autocomplete/index.d.ts +0 -1
- package/dist/components/Autocomplete.d.ts +0 -2
- package/dist/components/Avatar/Avatar.cjs +0 -126
- package/dist/components/Avatar/Avatar.cjs.map +0 -1
- package/dist/components/Avatar/Avatar.d.ts +0 -19
- package/dist/components/Avatar/Avatar.js +0 -126
- package/dist/components/Avatar/Avatar.js.map +0 -1
- package/dist/components/Avatar/index.d.ts +0 -1
- package/dist/components/Card/Card.cjs +0 -28
- package/dist/components/Card/Card.cjs.map +0 -1
- package/dist/components/Card/Card.d.ts +0 -13
- package/dist/components/Card/Card.js +0 -28
- package/dist/components/Card/Card.js.map +0 -1
- package/dist/components/Card/index.d.ts +0 -1
- package/dist/components/Card.d.ts +0 -2
- package/dist/components/Chip/Chip.cjs.map +0 -1
- package/dist/components/Chip/Chip.js.map +0 -1
- package/dist/components/Chip/index.d.ts +0 -1
- package/dist/components/Chip.d.ts +0 -2
- package/dist/components/DatePicker/DatePicker.cjs +0 -5
- package/dist/components/DatePicker/DatePicker.cjs.map +0 -1
- package/dist/components/DatePicker/DatePicker.d.ts +0 -18
- package/dist/components/DatePicker/DatePicker.js +0 -5
- package/dist/components/DatePicker/DatePicker.js.map +0 -1
- package/dist/components/DatePicker/index.d.ts +0 -1
- package/dist/components/DatePicker.d.ts +0 -2
- package/dist/components/DateTimePicker/DateTimePicker.cjs +0 -208
- package/dist/components/DateTimePicker/DateTimePicker.cjs.map +0 -1
- package/dist/components/DateTimePicker/DateTimePicker.d.ts +0 -28
- package/dist/components/DateTimePicker/DateTimePicker.js +0 -208
- package/dist/components/DateTimePicker/DateTimePicker.js.map +0 -1
- package/dist/components/DateTimePicker/index.d.ts +0 -1
- package/dist/components/DateTimePicker.d.ts +0 -2
- package/dist/components/Gallery/Gallery.cjs.map +0 -1
- package/dist/components/Gallery/Gallery.d.ts +0 -12
- package/dist/components/Gallery/Gallery.js.map +0 -1
- package/dist/components/Gallery/GalleryLightbox.d.ts +0 -20
- package/dist/components/Gallery/GalleryThumbnails.d.ts +0 -17
- package/dist/components/Gallery/index.d.ts +0 -1
- package/dist/components/Gallery.d.ts +0 -2
- package/dist/components/Icon/Icon.cjs.map +0 -1
- package/dist/components/Icon/Icon.d.ts +0 -21
- package/dist/components/Icon/Icon.js.map +0 -1
- package/dist/components/Icon/index.d.ts +0 -1
- package/dist/components/Icon.d.ts +0 -2
- package/dist/components/Input/Input.cjs +0 -5
- package/dist/components/Input/Input.cjs.map +0 -1
- package/dist/components/Input/Input.d.ts +0 -32
- package/dist/components/Input/Input.js +0 -5
- package/dist/components/Input/Input.js.map +0 -1
- package/dist/components/Input/index.d.ts +0 -1
- package/dist/components/Input.d.ts +0 -2
- package/dist/components/InputGroup/InputGroup.cjs +0 -126
- package/dist/components/InputGroup/InputGroup.cjs.map +0 -1
- package/dist/components/InputGroup/InputGroup.d.ts +0 -6
- package/dist/components/InputGroup/InputGroup.js +0 -126
- package/dist/components/InputGroup/InputGroup.js.map +0 -1
- package/dist/components/InputGroup/index.d.ts +0 -1
- package/dist/components/InputGroup.d.ts +0 -2
- package/dist/components/Modal/Modal.cjs +0 -209
- package/dist/components/Modal/Modal.cjs.map +0 -1
- package/dist/components/Modal/Modal.d.ts +0 -29
- package/dist/components/Modal/Modal.js +0 -209
- package/dist/components/Modal/Modal.js.map +0 -1
- package/dist/components/Modal/ModalBody.d.ts +0 -6
- package/dist/components/Modal/ModalFooter.d.ts +0 -19
- package/dist/components/Modal/ModalHeader.d.ts +0 -6
- package/dist/components/Modal/index.d.ts +0 -1
- package/dist/components/Modal.d.ts +0 -2
- package/dist/components/Select/Select.cjs +0 -6
- package/dist/components/Select/Select.cjs.map +0 -1
- package/dist/components/Select/Select.d.ts +0 -60
- package/dist/components/Select/Select.definitions.d.ts +0 -14
- package/dist/components/Select/Select.js +0 -6
- package/dist/components/Select/Select.js.map +0 -1
- package/dist/components/Select/index.d.ts +0 -1
- package/dist/components/Select.d.ts +0 -2
- package/dist/components/Stat/index.d.ts +0 -1
- package/dist/components/Stat.d.ts +0 -2
- package/dist/components/StatusMessage/StatusMessage.cjs +0 -79
- package/dist/components/StatusMessage/StatusMessage.cjs.map +0 -1
- package/dist/components/StatusMessage/StatusMessage.d.ts +0 -44
- package/dist/components/StatusMessage/StatusMessage.js +0 -79
- package/dist/components/StatusMessage/StatusMessage.js.map +0 -1
- package/dist/components/StatusMessage/index.d.ts +0 -1
- package/dist/components/StatusMessage.d.ts +0 -2
- package/dist/components/Stepper/Stepper.cjs +0 -46
- package/dist/components/Stepper/Stepper.cjs.map +0 -1
- package/dist/components/Stepper/Stepper.d.ts +0 -11
- package/dist/components/Stepper/Stepper.js +0 -46
- package/dist/components/Stepper/Stepper.js.map +0 -1
- package/dist/components/Stepper/index.d.ts +0 -2
- package/dist/components/Stepper.d.ts +0 -2
- package/dist/components/Tabs/Tabs.cjs +0 -96
- package/dist/components/Tabs/Tabs.cjs.map +0 -1
- package/dist/components/Tabs/Tabs.d.ts +0 -19
- package/dist/components/Tabs/Tabs.js +0 -96
- package/dist/components/Tabs/Tabs.js.map +0 -1
- package/dist/components/Tabs/index.d.ts +0 -2
- package/dist/components/Tabs.d.ts +0 -2
- package/dist/components/Timeline/Timeline.cjs.map +0 -1
- package/dist/components/Timeline/Timeline.d.ts +0 -13
- package/dist/components/Timeline/Timeline.js.map +0 -1
- package/dist/components/Timeline/index.d.ts +0 -2
- package/dist/components/Timeline.d.ts +0 -2
- package/dist/index.cjs +0 -2
- package/dist/index.cjs.map +0 -1
- package/dist/index.d.ts +0 -0
- package/dist/index.js +0 -2
- package/dist/index.js.map +0 -1
- package/dist/styles.css +0 -112
- package/rollup.config.cjs +0 -87
- package/src/components/Autocomplete/Autocomplete.definitions.ts +0 -254
- package/src/components/Autocomplete/Autocomplete.stories.tsx +0 -387
- package/src/components/Autocomplete/Autocomplete.tsx +0 -139
- package/src/components/Autocomplete/index.ts +0 -1
- package/src/components/Avatar/Avatar.stories.tsx +0 -54
- package/src/components/Avatar/Avatar.tsx +0 -143
- package/src/components/Avatar/index.ts +0 -1
- package/src/components/Button/Button.definition.ts +0 -97
- package/src/components/Button/Button.stories.tsx +0 -285
- package/src/components/Button/Button.tsx +0 -67
- package/src/components/Button/index.ts +0 -1
- package/src/components/Card/Card.definition.ts +0 -5
- package/src/components/Card/Card.stories.tsx +0 -32
- package/src/components/Card/Card.tsx +0 -44
- package/src/components/Card/index.ts +0 -1
- package/src/components/Chip/Chip.definitions.ts +0 -167
- package/src/components/Chip/Chip.stories.tsx +0 -265
- package/src/components/Chip/Chip.tsx +0 -61
- package/src/components/Chip/index.ts +0 -1
- package/src/components/Column/Column.tsx +0 -29
- package/src/components/Column/index.ts +0 -1
- package/src/components/DatePicker/DatePicker.definitions.ts +0 -205
- package/src/components/DatePicker/DatePicker.stories.tsx +0 -282
- package/src/components/DatePicker/DatePicker.tsx +0 -165
- package/src/components/DatePicker/index.ts +0 -1
- package/src/components/DateRangePicker/DateRangePicker.definitions.ts +0 -191
- package/src/components/DateRangePicker/DateRangePicker.stories.tsx +0 -252
- package/src/components/DateRangePicker/DateRangePicker.tsx +0 -56
- package/src/components/DateRangePicker/index.ts +0 -1
- package/src/components/DateTimePicker/DateTimePicker.definitions.ts +0 -232
- package/src/components/DateTimePicker/DateTimePicker.stories.tsx +0 -390
- package/src/components/DateTimePicker/DateTimePicker.tsx +0 -191
- package/src/components/DateTimePicker/index.ts +0 -1
- package/src/components/Flyout/Flyout.stories.tsx +0 -274
- package/src/components/Flyout/Flyout.tsx +0 -122
- package/src/components/Flyout/index.ts +0 -1
- package/src/components/Gallery/Gallery.definition.tsx +0 -37
- package/src/components/Gallery/Gallery.stories.tsx +0 -82
- package/src/components/Gallery/Gallery.tsx +0 -118
- package/src/components/Gallery/GalleryLightbox.tsx +0 -170
- package/src/components/Gallery/GalleryMain.tsx +0 -84
- package/src/components/Gallery/GalleryThumbnails.tsx +0 -106
- package/src/components/Gallery/index.ts +0 -1
- package/src/components/Icon/Icon.stories.tsx +0 -54
- package/src/components/Icon/Icon.tsx +0 -94
- package/src/components/Icon/index.ts +0 -2
- package/src/components/Input/Input.definitions.ts +0 -252
- package/src/components/Input/Input.stories.tsx +0 -387
- package/src/components/Input/Input.tsx +0 -186
- package/src/components/Input/index.ts +0 -1
- package/src/components/InputGroup/InputGroup.stories.tsx +0 -136
- package/src/components/InputGroup/InputGroup.tsx +0 -136
- package/src/components/InputGroup/index.ts +0 -1
- package/src/components/MenuButton/MenuButton.stories.tsx +0 -197
- package/src/components/MenuButton/MenuButton.tsx +0 -100
- package/src/components/MenuButton/index.ts +0 -1
- package/src/components/Modal/Modal.stories.tsx +0 -293
- package/src/components/Modal/Modal.tsx +0 -173
- package/src/components/Modal/ModalBody.tsx +0 -16
- package/src/components/Modal/ModalFooter.tsx +0 -61
- package/src/components/Modal/ModalHeader.tsx +0 -18
- package/src/components/Modal/index.ts +0 -1
- package/src/components/Select/Select.definitions.ts +0 -488
- package/src/components/Select/Select.stories.tsx +0 -569
- package/src/components/Select/Select.tsx +0 -468
- package/src/components/Select/index.ts +0 -1
- package/src/components/Stat/Stat.stories.tsx +0 -85
- package/src/components/Stat/Stat.tsx +0 -117
- package/src/components/Stat/index.ts +0 -2
- package/src/components/StatusMessage/StatusMessage.stories.tsx +0 -130
- package/src/components/StatusMessage/StatusMessage.tsx +0 -162
- package/src/components/StatusMessage/index.ts +0 -2
- package/src/components/Stepper/Step.tsx +0 -21
- package/src/components/Stepper/Stepper.definition.ts +0 -75
- package/src/components/Stepper/Stepper.stories.tsx +0 -122
- package/src/components/Stepper/Stepper.tsx +0 -59
- package/src/components/Stepper/index.ts +0 -2
- package/src/components/Table/EmptyTable.png +0 -0
- package/src/components/Table/Table.definition.ts +0 -580
- package/src/components/Table/Table.stories.tsx +0 -853
- package/src/components/Table/Table.tsx +0 -495
- package/src/components/Table/data.ts +0 -134
- package/src/components/Table/exportsUtils.ts +0 -195
- package/src/components/Table/index.ts +0 -3
- package/src/components/Table/types.ts +0 -34
- package/src/components/Tabs/Tab.definition.ts +0 -53
- package/src/components/Tabs/Tab.tsx +0 -19
- package/src/components/Tabs/Tabs.stories.tsx +0 -118
- package/src/components/Tabs/Tabs.tsx +0 -99
- package/src/components/Tabs/_tabUtils.tsx +0 -4
- package/src/components/Tabs/index.ts +0 -2
- package/src/components/Timeline/Timeline.definition.ts +0 -43
- package/src/components/Timeline/Timeline.stories.tsx +0 -108
- package/src/components/Timeline/Timeline.tsx +0 -49
- package/src/components/Timeline/TimelineItem.tsx +0 -31
- package/src/components/Timeline/index.ts +0 -2
- package/src/components/Tooltip/Tooltip.stories.tsx +0 -117
- package/src/components/Tooltip/Tooltip.tsx +0 -58
- package/src/components/Tooltip/index.ts +0 -1
- package/src/hooks/ClipBoard/ClipBoard.stories.tsx +0 -168
- package/src/hooks/ClipBoard/ClipBoard.tsx +0 -131
- package/src/hooks/ClipBoard/ClipboardUnifiedDemo.tsx +0 -111
- package/src/hooks/ClipBoard/index.ts +0 -1
- package/src/index.ts +0 -1
- package/src/styles.css +0 -3
- package/tailwind.config.js +0 -10
- package/tsconfig.json +0 -48
- package/tsup.config.js +0 -41
- package/vite.config.js +0 -132
- package/vitest.config.ts +0 -35
- /package/{dist/Button-C17mExpd.cjs → Button-C17mExpd.cjs} +0 -0
- /package/{dist/Button-UkkP-bNw.js → Button-UkkP-bNw.js} +0 -0
- /package/{Readme.md → README.md} +0 -0
- /package/{dist/components → components}/Avatar.d.ts +0 -0
- /package/{dist/components → components}/Button/Button.cjs +0 -0
- /package/{dist/components → components}/Button/Button.cjs.map +0 -0
- /package/{dist/components → components}/Button/Button.definition.d.ts +0 -0
- /package/{dist/components → components}/Button/Button.js +0 -0
- /package/{dist/components → components}/Button/Button.js.map +0 -0
- /package/{dist/components → components}/Button.d.ts +0 -0
- /package/{dist/components → components}/Card/Card.definition.d.ts +0 -0
- /package/{dist/components → components}/Chip/Chip.d.ts +0 -0
- /package/{dist/components → components}/Chip/Chip.definitions.d.ts +0 -0
- /package/{dist/components → components}/Column/Column.cjs +0 -0
- /package/{dist/components → components}/Column/Column.cjs.map +0 -0
- /package/{dist/components → components}/Column/Column.d.ts +0 -0
- /package/{dist/components → components}/Column/Column.js +0 -0
- /package/{dist/components → components}/Column/Column.js.map +0 -0
- /package/{dist/components → components}/Column/index.d.ts +0 -0
- /package/{dist/components → components}/Column.d.ts +0 -0
- /package/{dist/components → components}/DateRangePicker/DateRangePicker.cjs +0 -0
- /package/{dist/components → components}/DateRangePicker/DateRangePicker.cjs.map +0 -0
- /package/{dist/components → components}/DateRangePicker/DateRangePicker.d.ts +0 -0
- /package/{dist/components → components}/DateRangePicker/DateRangePicker.definitions.d.ts +0 -0
- /package/{dist/components → components}/DateRangePicker/DateRangePicker.js +0 -0
- /package/{dist/components → components}/DateRangePicker/DateRangePicker.js.map +0 -0
- /package/{dist/components → components}/DateRangePicker/index.d.ts +0 -0
- /package/{dist/components → components}/DateRangePicker.d.ts +0 -0
- /package/{dist/components → components}/Flyout/Flyout.cjs +0 -0
- /package/{dist/components → components}/Flyout/Flyout.cjs.map +0 -0
- /package/{dist/components → components}/Flyout/Flyout.d.ts +0 -0
- /package/{dist/components → components}/Flyout/Flyout.js +0 -0
- /package/{dist/components → components}/Flyout/Flyout.js.map +0 -0
- /package/{dist/components → components}/Flyout/index.d.ts +0 -0
- /package/{dist/components → components}/Flyout.d.ts +0 -0
- /package/{dist/components → components}/Gallery/Gallery.definition.d.ts +0 -0
- /package/{dist/components → components}/MenuButton/MenuButton.cjs +0 -0
- /package/{dist/components → components}/MenuButton/MenuButton.cjs.map +0 -0
- /package/{dist/components → components}/MenuButton/MenuButton.d.ts +0 -0
- /package/{dist/components → components}/MenuButton/MenuButton.js +0 -0
- /package/{dist/components → components}/MenuButton/MenuButton.js.map +0 -0
- /package/{dist/components → components}/MenuButton/index.d.ts +0 -0
- /package/{dist/components → components}/MenuButton.d.ts +0 -0
- /package/{dist/components → components}/Stat/Stat.d.ts +0 -0
- /package/{dist/components → components}/Stepper/Step.d.ts +0 -0
- /package/{dist/components → components}/Stepper/Stepper.definition.d.ts +0 -0
- /package/{dist/components → components}/Table/Table.cjs +0 -0
- /package/{dist/components → components}/Table/Table.cjs.map +0 -0
- /package/{dist/components → components}/Table/Table.d.ts +0 -0
- /package/{dist/components → components}/Table/Table.definition.d.ts +0 -0
- /package/{dist/components → components}/Table/Table.js +0 -0
- /package/{dist/components → components}/Table/Table.js.map +0 -0
- /package/{dist/components → components}/Table/data.d.ts +0 -0
- /package/{dist/components → components}/Table/exportsUtils.d.ts +0 -0
- /package/{dist/components → components}/Table/index.d.ts +0 -0
- /package/{dist/components → components}/Table/types.d.ts +0 -0
- /package/{dist/components → components}/Table.d.ts +0 -0
- /package/{dist/components → components}/Tabs/Tab.d.ts +0 -0
- /package/{dist/components → components}/Tabs/Tab.definition.d.ts +0 -0
- /package/{dist/components → components}/Tabs/_tabUtils.d.ts +0 -0
- /package/{dist/components → components}/Timeline/Timeline.definition.d.ts +0 -0
- /package/{dist/components → components}/Timeline/TimelineItem.d.ts +0 -0
- /package/{dist/components → components}/Tooltip/Tooltip.cjs +0 -0
- /package/{dist/components → components}/Tooltip/Tooltip.cjs.map +0 -0
- /package/{dist/components → components}/Tooltip/Tooltip.d.ts +0 -0
- /package/{dist/components → components}/Tooltip/Tooltip.js +0 -0
- /package/{dist/components → components}/Tooltip/Tooltip.js.map +0 -0
- /package/{dist/components → components}/Tooltip/index.d.ts +0 -0
- /package/{dist/components → components}/Tooltip.d.ts +0 -0
- /package/{dist/hooks → hooks}/ClipBoard/ClipBoard.cjs +0 -0
- /package/{dist/hooks → hooks}/ClipBoard/ClipBoard.cjs.map +0 -0
- /package/{dist/hooks → hooks}/ClipBoard/ClipBoard.d.ts +0 -0
- /package/{dist/hooks → hooks}/ClipBoard/ClipBoard.js +0 -0
- /package/{dist/hooks → hooks}/ClipBoard/ClipBoard.js.map +0 -0
- /package/{dist/hooks → hooks}/ClipBoard/ClipboardUnifiedDemo.d.ts +0 -0
- /package/{dist/hooks → hooks}/ClipBoard/index.d.ts +0 -0
- /package/{dist/hooks → hooks}/ClipBoard.d.ts +0 -0
- /package/{dist/index.css → index.css} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.cjs","sources":["../../../src/components/Switch/Switch.sx.ts","../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface BuildSwitchSxOptions {\n bordered: boolean;\n borderRadius: number | string;\n hasLabel: boolean;\n error: boolean;\n}\n\nconst toRadius = (borderRadius: number | string) =>\n typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;\n\n/**\n * Transición compartida (matchea el InputGroup y el RadioGroup).\n */\nconst FOCUS_TRANSITION =\n 'border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, ' +\n 'box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms';\n\n/**\n * Builder de sx para Switch. Reproduce el estilo del antiguo\n * `FormToggleInput` legacy cuando `bordered=true`: contenedor con borde,\n * label a la izquierda y switch a la derecha (vía justify-content: space-between).\n *\n * Cuando `bordered=true`, el contenedor gana:\n * - `:focus-within` → borde + shadow primario (mismo patrón que `InputGroup`).\n * - `error=true` → borde + shadow de error (palette.error.main).\n *\n * El shadow es de 1px, así que no hay shift de layout — sólo se intensifica\n * visualmente el borde sin empujar nada alrededor.\n *\n * Si `bordered=false`, sólo aplica un reset de margin del helper text.\n */\nexport const buildSwitchSx = ({\n bordered,\n borderRadius,\n hasLabel,\n error,\n}: BuildSwitchSxOptions): SxProps<Theme> => {\n const radius = toRadius(borderRadius);\n\n if (!bordered) {\n return {\n '& .MuiFormHelperText-root': { marginLeft: 0 },\n };\n }\n\n return (theme) => ({\n '& .MuiFormControlLabel-root': {\n marginLeft: 0,\n marginRight: 0,\n paddingX: 1.5,\n paddingY: 1.25,\n border: `1px solid ${\n error ? theme.palette.error.main : theme.palette.divider\n }`,\n borderRadius: radius,\n transition: FOCUS_TRANSITION,\n ...(error && {\n boxShadow: `0 0 0 1px ${theme.palette.error.main}`,\n }),\n // Focus del usuario sobre el switch interno.\n '&:focus-within': {\n borderColor: error\n ? theme.palette.error.main\n : theme.palette.primary.main,\n boxShadow: `0 0 0 1px ${\n error ? theme.palette.error.main : theme.palette.primary.main\n }`,\n },\n // Si hay label, separar el switch al borde opuesto.\n ...(hasLabel && {\n width: '100%',\n justifyContent: 'space-between',\n }),\n },\n '& .MuiFormHelperText-root': {\n marginLeft: 0,\n },\n });\n};\n","import { useTheme } from '@mui/material/styles';\nimport {\n FormControl,\n FormControlLabel,\n FormHelperText,\n Switch as MuiSwitch,\n type SwitchProps as MuiSwitchProps,\n type SxProps,\n type Theme,\n} from '@mui/material';\nimport { Controller, type Control, type RegisterOptions } from 'react-hook-form';\n\nimport { buildSwitchSx } from './Switch.sx';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\n// ── Tipos de dominio ─────────────────────────────────────────────────────\nexport type SwitchSize = 'small' | 'medium';\nexport type SwitchLabelPlacement = 'start' | 'end' | 'top' | 'bottom';\n\n// ── Props base (todo lo común entre RHF y controlado) ────────────────────\nexport interface BaseSwitchProps\n extends Omit<MuiSwitchProps, 'value' | 'onChange' | 'checked' | 'defaultChecked' | 'size'> {\n /** Texto al lado del switch. Si está ausente, no se renderiza FormControlLabel. */\n label?: string;\n size?: SwitchSize;\n /** Posición del label. Default: 'end' (legacy `FormToggleInput` lo ponía a la izquierda con su flex-stack). */\n labelPlacement?: SwitchLabelPlacement;\n disabled?: boolean;\n error?: boolean;\n helperText?: string;\n /** Renderiza un contenedor con borde alrededor del switch + label. Default: false. */\n bordered?: boolean;\n /** Border radius del contenedor (cuando bordered). Default: 10. */\n borderRadius?: number | string;\n defaultChecked?: boolean;\n /**\n * Nombre del preset de estilo registrado en `theme.styles.Switch`.\n * - `\"default\"` (o ausente) = estilo built-in del paquete.\n * - Cualquier otro string = mergea el preset encima del estilo built-in.\n */\n preset?: string;\n sx?: SxProps<Theme>;\n}\n\n// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────\nexport interface RHFSwitchProps extends BaseSwitchProps {\n name: string;\n // `any` plano (no `Control<any>`): RHF tipa `Control<T>` con generics en\n // posiciones tanto contravariantes como covariantes (ej. `_subjects.state`).\n // Cuando el componente o su uso involucra generics adicionales, TS se\n // confunde narroweando el discriminated union y `Control<any>` no logra\n // absorber `Control<MyForm>` en la comparación estructural profunda. El\n // `any` plano elimina ese ruido. RHF adentro sigue teniendo sus tipos\n // fuertes — solo degradamos la superficie del prop del componente.\n control: any;\n validation?: RegisterOptions;\n /**\n * Side-effect que corre después de que RHF actualiza el form state.\n * Útil para cascadas entre campos. NO reemplaza al handler de RHF.\n */\n onValueChange?: (checked: boolean) => void;\n checked?: never;\n onChange?: never;\n}\n\nexport interface ControlledSwitchProps extends BaseSwitchProps {\n name?: string;\n control?: never;\n validation?: never;\n checked: boolean;\n onChange: (checked: boolean) => void;\n}\n\n// ── API pública final ────────────────────────────────────────────────────\nexport type SwitchProps = RHFSwitchProps | ControlledSwitchProps;\n\nexport const Switch: React.FC<SwitchProps> = (props) => {\n const {\n label,\n size = 'medium',\n labelPlacement = 'end',\n disabled = false,\n error = false,\n helperText,\n bordered = false,\n borderRadius = 10,\n defaultChecked,\n preset,\n sx,\n ...rest\n } = props as ControlledSwitchProps & {\n control?: Control<any>;\n validation?: RegisterOptions;\n };\n\n const theme = useTheme();\n const presetSx = resolvePreset('Switch', preset, theme);\n\n // Construye el sx con el estado de error efectivo; se llama por rama\n // (RHF usa el error del Controller, controlado usa el prop `error`).\n const buildSx = (effectiveError: boolean) => [\n buildSwitchSx({\n bordered,\n borderRadius,\n hasLabel: !!label,\n error: effectiveError,\n }),\n ...(presetSx ? [presetSx] : []),\n ...(Array.isArray(sx) ? sx : [sx]),\n ];\n\n const renderSwitch = (\n checked: boolean,\n onChange: (next: boolean) => void,\n onBlur?: () => void,\n inputRef?: React.Ref<HTMLInputElement>,\n ) => {\n const switchEl = (\n <MuiSwitch\n {...rest}\n size={size}\n checked={!!checked}\n onChange={(_e, next) => onChange(next)}\n onBlur={onBlur}\n inputRef={inputRef}\n disabled={disabled}\n />\n );\n\n return label ? (\n <FormControlLabel\n control={switchEl}\n label={label}\n labelPlacement={labelPlacement}\n disabled={disabled}\n />\n ) : (\n switchEl\n );\n };\n\n // ── RHF mode ──────────────────────────────────────────────────────────\n if ('control' in props && props.control) {\n const { name, control, validation, onValueChange } = props as RHFSwitchProps;\n return (\n <Controller\n name={name}\n control={control}\n rules={validation}\n defaultValue={defaultChecked}\n render={({ field, fieldState: { error: fieldError } }) => {\n const finalError = !!fieldError || error;\n const finalHelperText = fieldError?.message ?? helperText;\n return (\n <FormControl\n error={finalError}\n disabled={disabled}\n sx={buildSx(finalError)}\n >\n {renderSwitch(\n !!field.value,\n (next) => {\n field.onChange(next);\n onValueChange?.(next);\n },\n field.onBlur,\n field.ref,\n )}\n {finalHelperText && <FormHelperText>{finalHelperText}</FormHelperText>}\n </FormControl>\n );\n }}\n />\n );\n }\n\n // ── Controlled mode ───────────────────────────────────────────────────\n const { checked, onChange } = props as ControlledSwitchProps;\n return (\n <FormControl error={error} disabled={disabled} sx={buildSx(error)}>\n {renderSwitch(checked, onChange)}\n {helperText && <FormHelperText>{helperText}</FormHelperText>}\n </FormControl>\n );\n};\n\nexport default Switch;\n"],"names":["useTheme","resolvePreset","checked","onChange","jsx","MuiSwitch","FormControlLabel","Controller","_a","jsxs","FormControl","FormHelperText"],"mappings":"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"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { SwitchProps as MuiSwitchProps, SxProps, Theme } from '@mui/material';
|
|
2
|
+
import { RegisterOptions } from 'react-hook-form';
|
|
3
|
+
export type SwitchSize = 'small' | 'medium';
|
|
4
|
+
export type SwitchLabelPlacement = 'start' | 'end' | 'top' | 'bottom';
|
|
5
|
+
export interface BaseSwitchProps extends Omit<MuiSwitchProps, 'value' | 'onChange' | 'checked' | 'defaultChecked' | 'size'> {
|
|
6
|
+
/** Texto al lado del switch. Si está ausente, no se renderiza FormControlLabel. */
|
|
7
|
+
label?: string;
|
|
8
|
+
size?: SwitchSize;
|
|
9
|
+
/** Posición del label. Default: 'end' (legacy `FormToggleInput` lo ponía a la izquierda con su flex-stack). */
|
|
10
|
+
labelPlacement?: SwitchLabelPlacement;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
error?: boolean;
|
|
13
|
+
helperText?: string;
|
|
14
|
+
/** Renderiza un contenedor con borde alrededor del switch + label. Default: false. */
|
|
15
|
+
bordered?: boolean;
|
|
16
|
+
/** Border radius del contenedor (cuando bordered). Default: 10. */
|
|
17
|
+
borderRadius?: number | string;
|
|
18
|
+
defaultChecked?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Nombre del preset de estilo registrado en `theme.styles.Switch`.
|
|
21
|
+
* - `"default"` (o ausente) = estilo built-in del paquete.
|
|
22
|
+
* - Cualquier otro string = mergea el preset encima del estilo built-in.
|
|
23
|
+
*/
|
|
24
|
+
preset?: string;
|
|
25
|
+
sx?: SxProps<Theme>;
|
|
26
|
+
}
|
|
27
|
+
export interface RHFSwitchProps extends BaseSwitchProps {
|
|
28
|
+
name: string;
|
|
29
|
+
control: any;
|
|
30
|
+
validation?: RegisterOptions;
|
|
31
|
+
/**
|
|
32
|
+
* Side-effect que corre después de que RHF actualiza el form state.
|
|
33
|
+
* Útil para cascadas entre campos. NO reemplaza al handler de RHF.
|
|
34
|
+
*/
|
|
35
|
+
onValueChange?: (checked: boolean) => void;
|
|
36
|
+
checked?: never;
|
|
37
|
+
onChange?: never;
|
|
38
|
+
}
|
|
39
|
+
export interface ControlledSwitchProps extends BaseSwitchProps {
|
|
40
|
+
name?: string;
|
|
41
|
+
control?: never;
|
|
42
|
+
validation?: never;
|
|
43
|
+
checked: boolean;
|
|
44
|
+
onChange: (checked: boolean) => void;
|
|
45
|
+
}
|
|
46
|
+
export type SwitchProps = RHFSwitchProps | ControlledSwitchProps;
|
|
47
|
+
export declare const Switch: React.FC<SwitchProps>;
|
|
48
|
+
export default Switch;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export declare const BasicSwitchDefinition = "\nimport React, { useState } from 'react';\nimport { Switch } from './Switch';\nimport { Box, Typography } from '@mui/material';\n\nexport const BasicSwitchExample = () => {\n const [checked, setChecked] = useState(false);\n return (\n <Box sx={{ width: 280 }}>\n <Switch checked={checked} onChange={setChecked} />\n <Typography sx={{ mt: 2 }}>Estado: {checked ? 'ON' : 'OFF'}</Typography>\n </Box>\n );\n};\n";
|
|
2
|
+
export declare const SwitchWithLabelDefinition = "\nimport React, { useState } from 'react';\nimport { Switch } from './Switch';\nimport { Box } from '@mui/material';\n\nexport const SwitchWithLabelExample = () => {\n const [checked, setChecked] = useState(true);\n return (\n <Box sx={{ width: 280 }}>\n <Switch\n label=\"Notificaciones por email\"\n checked={checked}\n onChange={setChecked}\n />\n </Box>\n );\n};\n";
|
|
3
|
+
export declare const BorderedSwitchDefinition = "\nimport React, { useState } from 'react';\nimport { Switch } from './Switch';\nimport { Box } from '@mui/material';\n\nexport const BorderedSwitchExample = () => {\n const [checked, setChecked] = useState(true);\n return (\n <Box sx={{ width: 360 }}>\n <Switch\n label=\"Recibir reportes diarios\"\n checked={checked}\n onChange={setChecked}\n bordered\n />\n </Box>\n );\n};\n";
|
|
4
|
+
export declare const SwitchSizesDefinition = "\nimport React, { useState } from 'react';\nimport { Switch } from './Switch';\nimport { Box } from '@mui/material';\n\nexport const SwitchSizesExample = () => {\n const [a, setA] = useState(false);\n const [b, setB] = useState(true);\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: 280 }}>\n <Switch label=\"Peque\u00F1o\" size=\"small\" checked={a} onChange={setA} />\n <Switch label=\"Mediano (default)\" size=\"medium\" checked={b} onChange={setB} />\n </Box>\n );\n};\n";
|
|
5
|
+
export declare const SwitchWithErrorDefinition = "\nimport React, { useState } from 'react';\nimport { Switch } from './Switch';\nimport { Box } from '@mui/material';\n\nexport const SwitchWithErrorExample = () => {\n const [checked, setChecked] = useState(false);\n const hasError = !checked;\n return (\n <Box sx={{ width: 320 }}>\n <Switch\n label=\"Aceptar t\u00E9rminos y condiciones\"\n checked={checked}\n onChange={setChecked}\n error={hasError}\n helperText={hasError ? 'Debes aceptar los t\u00E9rminos para continuar' : ''}\n />\n </Box>\n );\n};\n";
|
|
6
|
+
export declare const DisabledSwitchDefinition = "\nimport React from 'react';\nimport { Switch } from './Switch';\nimport { Box } from '@mui/material';\n\nexport const DisabledSwitchExample = () => (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: 280 }}>\n <Switch label=\"Off bloqueado\" checked={false} onChange={() => {}} disabled />\n <Switch label=\"On bloqueado\" checked={true} onChange={() => {}} disabled />\n </Box>\n);\n";
|
|
7
|
+
export declare const RHFSwitchDefinition = "\nimport React from 'react';\nimport { useForm } from 'react-hook-form';\nimport { Switch } from './Switch';\nimport { Box, Button, Typography } from '@mui/material';\n\nexport const RHFSwitchExample = () => {\n const { control, handleSubmit, watch } = useForm({\n defaultValues: { darkMode: false },\n });\n const value = watch('darkMode');\n return (\n <Box sx={{ width: 320 }} component=\"form\" onSubmit={handleSubmit(console.log)}>\n <Switch\n label=\"Modo oscuro\"\n name=\"darkMode\"\n control={control}\n bordered\n />\n <Typography sx={{ mt: 2 }}>Valor en el form: {String(value)}</Typography>\n <Button type=\"submit\" sx={{ mt: 1 }}>Enviar</Button>\n </Box>\n );\n};\n";
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
32
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
33
|
+
import { useTheme } from "@mui/material/styles";
|
|
34
|
+
import { FormControl, FormHelperText, Switch as Switch$1, FormControlLabel } from "@mui/material";
|
|
35
|
+
import { Controller } from "react-hook-form";
|
|
36
|
+
import { r as resolvePreset } from "../../resolvePreset-B-IB0ehH.js";
|
|
37
|
+
const toRadius = (borderRadius) => typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
|
|
38
|
+
const FOCUS_TRANSITION = "border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms";
|
|
39
|
+
const buildSwitchSx = ({
|
|
40
|
+
bordered,
|
|
41
|
+
borderRadius,
|
|
42
|
+
hasLabel,
|
|
43
|
+
error
|
|
44
|
+
}) => {
|
|
45
|
+
const radius = toRadius(borderRadius);
|
|
46
|
+
if (!bordered) {
|
|
47
|
+
return {
|
|
48
|
+
"& .MuiFormHelperText-root": { marginLeft: 0 }
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
return (theme) => ({
|
|
52
|
+
"& .MuiFormControlLabel-root": __spreadValues(__spreadProps(__spreadValues({
|
|
53
|
+
marginLeft: 0,
|
|
54
|
+
marginRight: 0,
|
|
55
|
+
paddingX: 1.5,
|
|
56
|
+
paddingY: 1.25,
|
|
57
|
+
border: `1px solid ${error ? theme.palette.error.main : theme.palette.divider}`,
|
|
58
|
+
borderRadius: radius,
|
|
59
|
+
transition: FOCUS_TRANSITION
|
|
60
|
+
}, error && {
|
|
61
|
+
boxShadow: `0 0 0 1px ${theme.palette.error.main}`
|
|
62
|
+
}), {
|
|
63
|
+
// Focus del usuario sobre el switch interno.
|
|
64
|
+
"&:focus-within": {
|
|
65
|
+
borderColor: error ? theme.palette.error.main : theme.palette.primary.main,
|
|
66
|
+
boxShadow: `0 0 0 1px ${error ? theme.palette.error.main : theme.palette.primary.main}`
|
|
67
|
+
}
|
|
68
|
+
}), hasLabel && {
|
|
69
|
+
width: "100%",
|
|
70
|
+
justifyContent: "space-between"
|
|
71
|
+
}),
|
|
72
|
+
"& .MuiFormHelperText-root": {
|
|
73
|
+
marginLeft: 0
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
};
|
|
77
|
+
const Switch = (props) => {
|
|
78
|
+
const _a = props, {
|
|
79
|
+
label,
|
|
80
|
+
size = "medium",
|
|
81
|
+
labelPlacement = "end",
|
|
82
|
+
disabled = false,
|
|
83
|
+
error = false,
|
|
84
|
+
helperText,
|
|
85
|
+
bordered = false,
|
|
86
|
+
borderRadius = 10,
|
|
87
|
+
defaultChecked,
|
|
88
|
+
preset,
|
|
89
|
+
sx
|
|
90
|
+
} = _a, rest = __objRest(_a, [
|
|
91
|
+
"label",
|
|
92
|
+
"size",
|
|
93
|
+
"labelPlacement",
|
|
94
|
+
"disabled",
|
|
95
|
+
"error",
|
|
96
|
+
"helperText",
|
|
97
|
+
"bordered",
|
|
98
|
+
"borderRadius",
|
|
99
|
+
"defaultChecked",
|
|
100
|
+
"preset",
|
|
101
|
+
"sx"
|
|
102
|
+
]);
|
|
103
|
+
const theme = useTheme();
|
|
104
|
+
const presetSx = resolvePreset("Switch", preset, theme);
|
|
105
|
+
const buildSx = (effectiveError) => [
|
|
106
|
+
buildSwitchSx({
|
|
107
|
+
bordered,
|
|
108
|
+
borderRadius,
|
|
109
|
+
hasLabel: !!label,
|
|
110
|
+
error: effectiveError
|
|
111
|
+
}),
|
|
112
|
+
...presetSx ? [presetSx] : [],
|
|
113
|
+
...Array.isArray(sx) ? sx : [sx]
|
|
114
|
+
];
|
|
115
|
+
const renderSwitch = (checked2, onChange2, onBlur, inputRef) => {
|
|
116
|
+
const switchEl = /* @__PURE__ */ jsx(
|
|
117
|
+
Switch$1,
|
|
118
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
119
|
+
size,
|
|
120
|
+
checked: !!checked2,
|
|
121
|
+
onChange: (_e, next) => onChange2(next),
|
|
122
|
+
onBlur,
|
|
123
|
+
inputRef,
|
|
124
|
+
disabled
|
|
125
|
+
})
|
|
126
|
+
);
|
|
127
|
+
return label ? /* @__PURE__ */ jsx(
|
|
128
|
+
FormControlLabel,
|
|
129
|
+
{
|
|
130
|
+
control: switchEl,
|
|
131
|
+
label,
|
|
132
|
+
labelPlacement,
|
|
133
|
+
disabled
|
|
134
|
+
}
|
|
135
|
+
) : switchEl;
|
|
136
|
+
};
|
|
137
|
+
if ("control" in props && props.control) {
|
|
138
|
+
const { name, control, validation, onValueChange } = props;
|
|
139
|
+
return /* @__PURE__ */ jsx(
|
|
140
|
+
Controller,
|
|
141
|
+
{
|
|
142
|
+
name,
|
|
143
|
+
control,
|
|
144
|
+
rules: validation,
|
|
145
|
+
defaultValue: defaultChecked,
|
|
146
|
+
render: ({ field, fieldState: { error: fieldError } }) => {
|
|
147
|
+
var _a2;
|
|
148
|
+
const finalError = !!fieldError || error;
|
|
149
|
+
const finalHelperText = (_a2 = fieldError == null ? void 0 : fieldError.message) != null ? _a2 : helperText;
|
|
150
|
+
return /* @__PURE__ */ jsxs(
|
|
151
|
+
FormControl,
|
|
152
|
+
{
|
|
153
|
+
error: finalError,
|
|
154
|
+
disabled,
|
|
155
|
+
sx: buildSx(finalError),
|
|
156
|
+
children: [
|
|
157
|
+
renderSwitch(
|
|
158
|
+
!!field.value,
|
|
159
|
+
(next) => {
|
|
160
|
+
field.onChange(next);
|
|
161
|
+
onValueChange == null ? void 0 : onValueChange(next);
|
|
162
|
+
},
|
|
163
|
+
field.onBlur,
|
|
164
|
+
field.ref
|
|
165
|
+
),
|
|
166
|
+
finalHelperText && /* @__PURE__ */ jsx(FormHelperText, { children: finalHelperText })
|
|
167
|
+
]
|
|
168
|
+
}
|
|
169
|
+
);
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
);
|
|
173
|
+
}
|
|
174
|
+
const { checked, onChange } = props;
|
|
175
|
+
return /* @__PURE__ */ jsxs(FormControl, { error, disabled, sx: buildSx(error), children: [
|
|
176
|
+
renderSwitch(checked, onChange),
|
|
177
|
+
helperText && /* @__PURE__ */ jsx(FormHelperText, { children: helperText })
|
|
178
|
+
] });
|
|
179
|
+
};
|
|
180
|
+
export {
|
|
181
|
+
Switch,
|
|
182
|
+
Switch as default
|
|
183
|
+
};
|
|
184
|
+
//# sourceMappingURL=Switch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../../../src/components/Switch/Switch.sx.ts","../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface BuildSwitchSxOptions {\n bordered: boolean;\n borderRadius: number | string;\n hasLabel: boolean;\n error: boolean;\n}\n\nconst toRadius = (borderRadius: number | string) =>\n typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;\n\n/**\n * Transición compartida (matchea el InputGroup y el RadioGroup).\n */\nconst FOCUS_TRANSITION =\n 'border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, ' +\n 'box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms';\n\n/**\n * Builder de sx para Switch. Reproduce el estilo del antiguo\n * `FormToggleInput` legacy cuando `bordered=true`: contenedor con borde,\n * label a la izquierda y switch a la derecha (vía justify-content: space-between).\n *\n * Cuando `bordered=true`, el contenedor gana:\n * - `:focus-within` → borde + shadow primario (mismo patrón que `InputGroup`).\n * - `error=true` → borde + shadow de error (palette.error.main).\n *\n * El shadow es de 1px, así que no hay shift de layout — sólo se intensifica\n * visualmente el borde sin empujar nada alrededor.\n *\n * Si `bordered=false`, sólo aplica un reset de margin del helper text.\n */\nexport const buildSwitchSx = ({\n bordered,\n borderRadius,\n hasLabel,\n error,\n}: BuildSwitchSxOptions): SxProps<Theme> => {\n const radius = toRadius(borderRadius);\n\n if (!bordered) {\n return {\n '& .MuiFormHelperText-root': { marginLeft: 0 },\n };\n }\n\n return (theme) => ({\n '& .MuiFormControlLabel-root': {\n marginLeft: 0,\n marginRight: 0,\n paddingX: 1.5,\n paddingY: 1.25,\n border: `1px solid ${\n error ? theme.palette.error.main : theme.palette.divider\n }`,\n borderRadius: radius,\n transition: FOCUS_TRANSITION,\n ...(error && {\n boxShadow: `0 0 0 1px ${theme.palette.error.main}`,\n }),\n // Focus del usuario sobre el switch interno.\n '&:focus-within': {\n borderColor: error\n ? theme.palette.error.main\n : theme.palette.primary.main,\n boxShadow: `0 0 0 1px ${\n error ? theme.palette.error.main : theme.palette.primary.main\n }`,\n },\n // Si hay label, separar el switch al borde opuesto.\n ...(hasLabel && {\n width: '100%',\n justifyContent: 'space-between',\n }),\n },\n '& .MuiFormHelperText-root': {\n marginLeft: 0,\n },\n });\n};\n","import { useTheme } from '@mui/material/styles';\nimport {\n FormControl,\n FormControlLabel,\n FormHelperText,\n Switch as MuiSwitch,\n type SwitchProps as MuiSwitchProps,\n type SxProps,\n type Theme,\n} from '@mui/material';\nimport { Controller, type Control, type RegisterOptions } from 'react-hook-form';\n\nimport { buildSwitchSx } from './Switch.sx';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\n// ── Tipos de dominio ─────────────────────────────────────────────────────\nexport type SwitchSize = 'small' | 'medium';\nexport type SwitchLabelPlacement = 'start' | 'end' | 'top' | 'bottom';\n\n// ── Props base (todo lo común entre RHF y controlado) ────────────────────\nexport interface BaseSwitchProps\n extends Omit<MuiSwitchProps, 'value' | 'onChange' | 'checked' | 'defaultChecked' | 'size'> {\n /** Texto al lado del switch. Si está ausente, no se renderiza FormControlLabel. */\n label?: string;\n size?: SwitchSize;\n /** Posición del label. Default: 'end' (legacy `FormToggleInput` lo ponía a la izquierda con su flex-stack). */\n labelPlacement?: SwitchLabelPlacement;\n disabled?: boolean;\n error?: boolean;\n helperText?: string;\n /** Renderiza un contenedor con borde alrededor del switch + label. Default: false. */\n bordered?: boolean;\n /** Border radius del contenedor (cuando bordered). Default: 10. */\n borderRadius?: number | string;\n defaultChecked?: boolean;\n /**\n * Nombre del preset de estilo registrado en `theme.styles.Switch`.\n * - `\"default\"` (o ausente) = estilo built-in del paquete.\n * - Cualquier otro string = mergea el preset encima del estilo built-in.\n */\n preset?: string;\n sx?: SxProps<Theme>;\n}\n\n// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────\nexport interface RHFSwitchProps extends BaseSwitchProps {\n name: string;\n // `any` plano (no `Control<any>`): RHF tipa `Control<T>` con generics en\n // posiciones tanto contravariantes como covariantes (ej. `_subjects.state`).\n // Cuando el componente o su uso involucra generics adicionales, TS se\n // confunde narroweando el discriminated union y `Control<any>` no logra\n // absorber `Control<MyForm>` en la comparación estructural profunda. El\n // `any` plano elimina ese ruido. RHF adentro sigue teniendo sus tipos\n // fuertes — solo degradamos la superficie del prop del componente.\n control: any;\n validation?: RegisterOptions;\n /**\n * Side-effect que corre después de que RHF actualiza el form state.\n * Útil para cascadas entre campos. NO reemplaza al handler de RHF.\n */\n onValueChange?: (checked: boolean) => void;\n checked?: never;\n onChange?: never;\n}\n\nexport interface ControlledSwitchProps extends BaseSwitchProps {\n name?: string;\n control?: never;\n validation?: never;\n checked: boolean;\n onChange: (checked: boolean) => void;\n}\n\n// ── API pública final ────────────────────────────────────────────────────\nexport type SwitchProps = RHFSwitchProps | ControlledSwitchProps;\n\nexport const Switch: React.FC<SwitchProps> = (props) => {\n const {\n label,\n size = 'medium',\n labelPlacement = 'end',\n disabled = false,\n error = false,\n helperText,\n bordered = false,\n borderRadius = 10,\n defaultChecked,\n preset,\n sx,\n ...rest\n } = props as ControlledSwitchProps & {\n control?: Control<any>;\n validation?: RegisterOptions;\n };\n\n const theme = useTheme();\n const presetSx = resolvePreset('Switch', preset, theme);\n\n // Construye el sx con el estado de error efectivo; se llama por rama\n // (RHF usa el error del Controller, controlado usa el prop `error`).\n const buildSx = (effectiveError: boolean) => [\n buildSwitchSx({\n bordered,\n borderRadius,\n hasLabel: !!label,\n error: effectiveError,\n }),\n ...(presetSx ? [presetSx] : []),\n ...(Array.isArray(sx) ? sx : [sx]),\n ];\n\n const renderSwitch = (\n checked: boolean,\n onChange: (next: boolean) => void,\n onBlur?: () => void,\n inputRef?: React.Ref<HTMLInputElement>,\n ) => {\n const switchEl = (\n <MuiSwitch\n {...rest}\n size={size}\n checked={!!checked}\n onChange={(_e, next) => onChange(next)}\n onBlur={onBlur}\n inputRef={inputRef}\n disabled={disabled}\n />\n );\n\n return label ? (\n <FormControlLabel\n control={switchEl}\n label={label}\n labelPlacement={labelPlacement}\n disabled={disabled}\n />\n ) : (\n switchEl\n );\n };\n\n // ── RHF mode ──────────────────────────────────────────────────────────\n if ('control' in props && props.control) {\n const { name, control, validation, onValueChange } = props as RHFSwitchProps;\n return (\n <Controller\n name={name}\n control={control}\n rules={validation}\n defaultValue={defaultChecked}\n render={({ field, fieldState: { error: fieldError } }) => {\n const finalError = !!fieldError || error;\n const finalHelperText = fieldError?.message ?? helperText;\n return (\n <FormControl\n error={finalError}\n disabled={disabled}\n sx={buildSx(finalError)}\n >\n {renderSwitch(\n !!field.value,\n (next) => {\n field.onChange(next);\n onValueChange?.(next);\n },\n field.onBlur,\n field.ref,\n )}\n {finalHelperText && <FormHelperText>{finalHelperText}</FormHelperText>}\n </FormControl>\n );\n }}\n />\n );\n }\n\n // ── Controlled mode ───────────────────────────────────────────────────\n const { checked, onChange } = props as ControlledSwitchProps;\n return (\n <FormControl error={error} disabled={disabled} sx={buildSx(error)}>\n {renderSwitch(checked, onChange)}\n {helperText && <FormHelperText>{helperText}</FormHelperText>}\n </FormControl>\n );\n};\n\nexport default Switch;\n"],"names":["checked","onChange","MuiSwitch","_a"],"mappings":"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"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { SxProps, Theme } from '@mui/material/styles';
|
|
2
|
+
export interface BuildSwitchSxOptions {
|
|
3
|
+
bordered: boolean;
|
|
4
|
+
borderRadius: number | string;
|
|
5
|
+
hasLabel: boolean;
|
|
6
|
+
error: boolean;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Builder de sx para Switch. Reproduce el estilo del antiguo
|
|
10
|
+
* `FormToggleInput` legacy cuando `bordered=true`: contenedor con borde,
|
|
11
|
+
* label a la izquierda y switch a la derecha (vía justify-content: space-between).
|
|
12
|
+
*
|
|
13
|
+
* Cuando `bordered=true`, el contenedor gana:
|
|
14
|
+
* - `:focus-within` → borde + shadow primario (mismo patrón que `InputGroup`).
|
|
15
|
+
* - `error=true` → borde + shadow de error (palette.error.main).
|
|
16
|
+
*
|
|
17
|
+
* El shadow es de 1px, así que no hay shift de layout — sólo se intensifica
|
|
18
|
+
* visualmente el borde sin empujar nada alrededor.
|
|
19
|
+
*
|
|
20
|
+
* Si `bordered=false`, sólo aplica un reset de margin del helper text.
|
|
21
|
+
*/
|
|
22
|
+
export declare const buildSwitchSx: ({ bordered, borderRadius, hasLabel, error, }: BuildSwitchSxOptions) => SxProps<Theme>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type { SwitchSize, SwitchLabelPlacement, BaseSwitchProps, RHFSwitchProps, ControlledSwitchProps, SwitchProps, } from './Switch';
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const React = require("react");
|
|
5
|
+
const material = require("@mui/material");
|
|
6
|
+
const mergeSx = require("../../mergeSx-Dbccoo_H.cjs");
|
|
7
|
+
const TAB_DISPLAY_MAP = {
|
|
8
|
+
horizontal: { display: "flex", flexDirection: "column" },
|
|
9
|
+
vertical: { display: "flex", flexDirection: "row" }
|
|
10
|
+
};
|
|
11
|
+
const Tabs = ({
|
|
12
|
+
children,
|
|
13
|
+
defaultValue,
|
|
14
|
+
onChangeValue,
|
|
15
|
+
centered = true,
|
|
16
|
+
orientation = "horizontal",
|
|
17
|
+
scrollButtons = "auto",
|
|
18
|
+
variant = "standard",
|
|
19
|
+
indicatorColor = "primary",
|
|
20
|
+
labelColor = "primary",
|
|
21
|
+
className,
|
|
22
|
+
allowScrollButtonsMobile = true,
|
|
23
|
+
keepMounted = false,
|
|
24
|
+
sx
|
|
25
|
+
}) => {
|
|
26
|
+
var _a, _b;
|
|
27
|
+
const tabs = React.Children.toArray(children).filter(
|
|
28
|
+
(child) => {
|
|
29
|
+
var _a2;
|
|
30
|
+
return React.isValidElement(child) && ((_a2 = child.type) == null ? void 0 : _a2.displayName) === "Tab";
|
|
31
|
+
}
|
|
32
|
+
);
|
|
33
|
+
const firstValue = (_a = tabs[0]) == null ? void 0 : _a.props.value;
|
|
34
|
+
const [currentValue, setCurrentValue] = React.useState(
|
|
35
|
+
(_b = defaultValue != null ? defaultValue : firstValue) != null ? _b : 0
|
|
36
|
+
);
|
|
37
|
+
const handleChange = (_event, newValue) => {
|
|
38
|
+
setCurrentValue(newValue);
|
|
39
|
+
onChangeValue == null ? void 0 : onChangeValue(newValue);
|
|
40
|
+
};
|
|
41
|
+
const { display, flexDirection } = TAB_DISPLAY_MAP[orientation];
|
|
42
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display, flexDirection }, children: [
|
|
43
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
44
|
+
material.Tabs,
|
|
45
|
+
{
|
|
46
|
+
value: currentValue,
|
|
47
|
+
onChange: handleChange,
|
|
48
|
+
centered,
|
|
49
|
+
indicatorColor,
|
|
50
|
+
orientation,
|
|
51
|
+
scrollButtons,
|
|
52
|
+
variant,
|
|
53
|
+
className,
|
|
54
|
+
textColor: labelColor,
|
|
55
|
+
allowScrollButtonsMobile,
|
|
56
|
+
sx: mergeSx.mergeSx({}, sx),
|
|
57
|
+
children: tabs.map((tab, idx) => {
|
|
58
|
+
const {
|
|
59
|
+
label,
|
|
60
|
+
icon,
|
|
61
|
+
value = idx,
|
|
62
|
+
disabled,
|
|
63
|
+
wrapped,
|
|
64
|
+
iconPosition,
|
|
65
|
+
className: tabClassName,
|
|
66
|
+
sx: tabSx
|
|
67
|
+
} = tab.props;
|
|
68
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
69
|
+
material.Tab,
|
|
70
|
+
{
|
|
71
|
+
label,
|
|
72
|
+
icon,
|
|
73
|
+
value,
|
|
74
|
+
disabled,
|
|
75
|
+
wrapped,
|
|
76
|
+
iconPosition,
|
|
77
|
+
className: tabClassName,
|
|
78
|
+
sx: tabSx
|
|
79
|
+
},
|
|
80
|
+
value
|
|
81
|
+
);
|
|
82
|
+
})
|
|
83
|
+
}
|
|
84
|
+
),
|
|
85
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Box, { m: 2, sx: { width: "100%" }, children: keepMounted ? tabs.map((tab, idx) => {
|
|
86
|
+
var _a2;
|
|
87
|
+
const value = (_a2 = tab.props.value) != null ? _a2 : idx;
|
|
88
|
+
const isActive = value === currentValue;
|
|
89
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
90
|
+
material.Box,
|
|
91
|
+
{
|
|
92
|
+
role: "tabpanel",
|
|
93
|
+
sx: { display: isActive ? "block" : "none" },
|
|
94
|
+
"aria-hidden": !isActive,
|
|
95
|
+
children: tab.props.children
|
|
96
|
+
},
|
|
97
|
+
value
|
|
98
|
+
);
|
|
99
|
+
}) : tabs.map((tab, idx) => {
|
|
100
|
+
var _a2;
|
|
101
|
+
const value = (_a2 = tab.props.value) != null ? _a2 : idx;
|
|
102
|
+
if (value !== currentValue) return null;
|
|
103
|
+
return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { role: "tabpanel", children: tab.props.children }, value);
|
|
104
|
+
}) })
|
|
105
|
+
] });
|
|
106
|
+
};
|
|
107
|
+
const Tab = (_) => null;
|
|
108
|
+
Tab.displayName = "Tab";
|
|
109
|
+
exports.Tab = Tab;
|
|
110
|
+
exports.Tabs = Tabs;
|
|
111
|
+
exports.default = Tabs;
|
|
112
|
+
//# sourceMappingURL=Tabs.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tabs.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;;AACrB,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,IACD,KAAK,IAAI,CAAC,KAAK,QAAQ;;AACrB,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,CACP;AAAA,EAAA,GACF;AAEJ;AClJO,MAAM,MAAM,CAAC,MAAsB;AAE1C,IAAI,cAAc;;;;"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
import { TabsProps as MuiTabsProps } from '@mui/material';
|
|
3
|
+
type PickTabsProps = Pick<MuiTabsProps, 'centered' | 'indicatorColor' | 'orientation' | 'scrollButtons' | 'variant' | 'className' | 'sx' | 'visibleScrollbar' | 'allowScrollButtonsMobile'>;
|
|
4
|
+
export interface TabsProps extends PickTabsProps {
|
|
5
|
+
/** Uno o varios `<Tab>`. Children que no sean `<Tab>` se ignoran. */
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
/** Valor del tab inicialmente activo. Si no se provee, toma el `value` del primer `<Tab>` o `0`. */
|
|
8
|
+
defaultValue?: number | string;
|
|
9
|
+
/** Callback al cambiar de tab. Recibe el `value` del tab nuevo. */
|
|
10
|
+
onChangeValue?: (newValue: number | string) => void;
|
|
11
|
+
labelColor?: 'primary' | 'secondary' | 'inherit';
|
|
12
|
+
/**
|
|
13
|
+
* Cómo se manejan los paneles al cambiar de tab:
|
|
14
|
+
* - `false` (default): **unmount** — solo se renderiza el panel activo; los
|
|
15
|
+
* demás se desmontan. El state interno de los hijos se pierde al navegar.
|
|
16
|
+
* Menor uso de memoria.
|
|
17
|
+
* - `true`: **keep mounted** — renderiza todos los paneles pero oculta los
|
|
18
|
+
* no activos con `display: none`. El state se preserva (inputs, scroll,
|
|
19
|
+
* timers, subscripciones) al navegar entre tabs.
|
|
20
|
+
*/
|
|
21
|
+
keepMounted?: boolean;
|
|
22
|
+
}
|
|
23
|
+
export declare const Tabs: FC<TabsProps>;
|
|
24
|
+
export default Tabs;
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Children, isValidElement, useState } from "react";
|
|
3
|
+
import { Box, Tabs as Tabs$1, Tab as Tab$1 } from "@mui/material";
|
|
4
|
+
import { m as mergeSx } from "../../mergeSx-BXoNZjB_.js";
|
|
5
|
+
const TAB_DISPLAY_MAP = {
|
|
6
|
+
horizontal: { display: "flex", flexDirection: "column" },
|
|
7
|
+
vertical: { display: "flex", flexDirection: "row" }
|
|
8
|
+
};
|
|
9
|
+
const Tabs = ({
|
|
10
|
+
children,
|
|
11
|
+
defaultValue,
|
|
12
|
+
onChangeValue,
|
|
13
|
+
centered = true,
|
|
14
|
+
orientation = "horizontal",
|
|
15
|
+
scrollButtons = "auto",
|
|
16
|
+
variant = "standard",
|
|
17
|
+
indicatorColor = "primary",
|
|
18
|
+
labelColor = "primary",
|
|
19
|
+
className,
|
|
20
|
+
allowScrollButtonsMobile = true,
|
|
21
|
+
keepMounted = false,
|
|
22
|
+
sx
|
|
23
|
+
}) => {
|
|
24
|
+
var _a, _b;
|
|
25
|
+
const tabs = Children.toArray(children).filter(
|
|
26
|
+
(child) => {
|
|
27
|
+
var _a2;
|
|
28
|
+
return isValidElement(child) && ((_a2 = child.type) == null ? void 0 : _a2.displayName) === "Tab";
|
|
29
|
+
}
|
|
30
|
+
);
|
|
31
|
+
const firstValue = (_a = tabs[0]) == null ? void 0 : _a.props.value;
|
|
32
|
+
const [currentValue, setCurrentValue] = useState(
|
|
33
|
+
(_b = defaultValue != null ? defaultValue : firstValue) != null ? _b : 0
|
|
34
|
+
);
|
|
35
|
+
const handleChange = (_event, newValue) => {
|
|
36
|
+
setCurrentValue(newValue);
|
|
37
|
+
onChangeValue == null ? void 0 : onChangeValue(newValue);
|
|
38
|
+
};
|
|
39
|
+
const { display, flexDirection } = TAB_DISPLAY_MAP[orientation];
|
|
40
|
+
return /* @__PURE__ */ jsxs(Box, { sx: { display, flexDirection }, children: [
|
|
41
|
+
/* @__PURE__ */ jsx(
|
|
42
|
+
Tabs$1,
|
|
43
|
+
{
|
|
44
|
+
value: currentValue,
|
|
45
|
+
onChange: handleChange,
|
|
46
|
+
centered,
|
|
47
|
+
indicatorColor,
|
|
48
|
+
orientation,
|
|
49
|
+
scrollButtons,
|
|
50
|
+
variant,
|
|
51
|
+
className,
|
|
52
|
+
textColor: labelColor,
|
|
53
|
+
allowScrollButtonsMobile,
|
|
54
|
+
sx: mergeSx({}, sx),
|
|
55
|
+
children: tabs.map((tab, idx) => {
|
|
56
|
+
const {
|
|
57
|
+
label,
|
|
58
|
+
icon,
|
|
59
|
+
value = idx,
|
|
60
|
+
disabled,
|
|
61
|
+
wrapped,
|
|
62
|
+
iconPosition,
|
|
63
|
+
className: tabClassName,
|
|
64
|
+
sx: tabSx
|
|
65
|
+
} = tab.props;
|
|
66
|
+
return /* @__PURE__ */ jsx(
|
|
67
|
+
Tab$1,
|
|
68
|
+
{
|
|
69
|
+
label,
|
|
70
|
+
icon,
|
|
71
|
+
value,
|
|
72
|
+
disabled,
|
|
73
|
+
wrapped,
|
|
74
|
+
iconPosition,
|
|
75
|
+
className: tabClassName,
|
|
76
|
+
sx: tabSx
|
|
77
|
+
},
|
|
78
|
+
value
|
|
79
|
+
);
|
|
80
|
+
})
|
|
81
|
+
}
|
|
82
|
+
),
|
|
83
|
+
/* @__PURE__ */ jsx(Box, { m: 2, sx: { width: "100%" }, children: keepMounted ? tabs.map((tab, idx) => {
|
|
84
|
+
var _a2;
|
|
85
|
+
const value = (_a2 = tab.props.value) != null ? _a2 : idx;
|
|
86
|
+
const isActive = value === currentValue;
|
|
87
|
+
return /* @__PURE__ */ jsx(
|
|
88
|
+
Box,
|
|
89
|
+
{
|
|
90
|
+
role: "tabpanel",
|
|
91
|
+
sx: { display: isActive ? "block" : "none" },
|
|
92
|
+
"aria-hidden": !isActive,
|
|
93
|
+
children: tab.props.children
|
|
94
|
+
},
|
|
95
|
+
value
|
|
96
|
+
);
|
|
97
|
+
}) : tabs.map((tab, idx) => {
|
|
98
|
+
var _a2;
|
|
99
|
+
const value = (_a2 = tab.props.value) != null ? _a2 : idx;
|
|
100
|
+
if (value !== currentValue) return null;
|
|
101
|
+
return /* @__PURE__ */ jsx(Box, { role: "tabpanel", children: tab.props.children }, value);
|
|
102
|
+
}) })
|
|
103
|
+
] });
|
|
104
|
+
};
|
|
105
|
+
const Tab = (_) => null;
|
|
106
|
+
Tab.displayName = "Tab";
|
|
107
|
+
export {
|
|
108
|
+
Tab,
|
|
109
|
+
Tabs,
|
|
110
|
+
Tabs as default
|
|
111
|
+
};
|
|
112
|
+
//# sourceMappingURL=Tabs.js.map
|
|
@@ -0,0 +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 {\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;"}
|