@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,28 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
export interface StatusMessageProps {
|
|
3
|
+
/** Título del mensaje. */
|
|
4
|
+
title?: string;
|
|
5
|
+
/** Descripción/contenido detallado. Requerido para que el componente renderice. */
|
|
6
|
+
description?: string;
|
|
7
|
+
/** Tipo de mensaje (controla color + icono). `danger` mapea a `error` de MUI. */
|
|
8
|
+
messageType?: 'success' | 'danger' | 'warning';
|
|
9
|
+
/** Forma de presentación: alerta inline o modal. Default: `'alert'`. */
|
|
10
|
+
displayType?: 'alert' | 'modal';
|
|
11
|
+
/** Callback al cerrar. Si se omite, no se muestra botón de cerrar. */
|
|
12
|
+
close?: () => void;
|
|
13
|
+
/**
|
|
14
|
+
* Controla visibilidad. Si se omite, el componente maneja su propio
|
|
15
|
+
* state (se oculta solo al llamar `close`). Si se pasa, queda controlled
|
|
16
|
+
* y el consumer es responsable de actualizarlo.
|
|
17
|
+
*/
|
|
18
|
+
open?: boolean;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Mensaje de éxito / error / advertencia en forma de alerta inline o modal.
|
|
22
|
+
*
|
|
23
|
+
* - **Uncontrolled**: sin pasar `open`, el componente maneja su propia
|
|
24
|
+
* visibilidad. Al llamar `close`, se oculta automáticamente.
|
|
25
|
+
* - **Controlled**: pasando `open`, el consumer decide cuándo mostrar/ocultar.
|
|
26
|
+
*/
|
|
27
|
+
export declare const StatusMessage: FC<StatusMessageProps>;
|
|
28
|
+
export default StatusMessage;
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useId } from "react";
|
|
3
|
+
import { Dialog, DialogContent, Box, Typography, DialogActions, Button, Alert } from "@mui/material";
|
|
4
|
+
import { CheckCircleOutline, ErrorOutline, WarningAmber } from "@mui/icons-material";
|
|
5
|
+
const StatusMessage = ({
|
|
6
|
+
title,
|
|
7
|
+
description,
|
|
8
|
+
messageType = "success",
|
|
9
|
+
displayType = "alert",
|
|
10
|
+
close,
|
|
11
|
+
open: controlledOpen
|
|
12
|
+
}) => {
|
|
13
|
+
const [internalOpen, setInternalOpen] = useState(true);
|
|
14
|
+
const titleId = useId();
|
|
15
|
+
const descId = useId();
|
|
16
|
+
const isControlled = controlledOpen !== void 0;
|
|
17
|
+
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
18
|
+
const handleClose = () => {
|
|
19
|
+
if (!isControlled) setInternalOpen(false);
|
|
20
|
+
close == null ? void 0 : close();
|
|
21
|
+
};
|
|
22
|
+
const alertVariant = messageType === "danger" ? "error" : messageType;
|
|
23
|
+
const icon = messageType === "success" ? /* @__PURE__ */ jsx(CheckCircleOutline, { sx: { fontSize: 64, color: "success.main" } }) : messageType === "danger" ? /* @__PURE__ */ jsx(ErrorOutline, { sx: { fontSize: 64, color: "error.main" } }) : /* @__PURE__ */ jsx(WarningAmber, { sx: { fontSize: 64, color: "warning.main" } });
|
|
24
|
+
if (!description) return null;
|
|
25
|
+
if (!isOpen) return null;
|
|
26
|
+
if (displayType === "modal") {
|
|
27
|
+
return /* @__PURE__ */ jsxs(
|
|
28
|
+
Dialog,
|
|
29
|
+
{
|
|
30
|
+
open: isOpen,
|
|
31
|
+
onClose: handleClose,
|
|
32
|
+
"aria-labelledby": title ? titleId : void 0,
|
|
33
|
+
"aria-describedby": descId,
|
|
34
|
+
maxWidth: "md",
|
|
35
|
+
slotProps: {
|
|
36
|
+
paper: {
|
|
37
|
+
sx: { borderRadius: "16px", p: 2 }
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
children: [
|
|
41
|
+
/* @__PURE__ */ jsxs(
|
|
42
|
+
DialogContent,
|
|
43
|
+
{
|
|
44
|
+
sx: {
|
|
45
|
+
display: "flex",
|
|
46
|
+
flexDirection: "column",
|
|
47
|
+
alignItems: "center",
|
|
48
|
+
textAlign: "center",
|
|
49
|
+
p: 4,
|
|
50
|
+
gap: 2
|
|
51
|
+
},
|
|
52
|
+
children: [
|
|
53
|
+
/* @__PURE__ */ jsx(Box, { sx: { mb: 2 }, children: icon }),
|
|
54
|
+
title && /* @__PURE__ */ jsx(
|
|
55
|
+
Typography,
|
|
56
|
+
{
|
|
57
|
+
id: titleId,
|
|
58
|
+
variant: "h4",
|
|
59
|
+
component: "h2",
|
|
60
|
+
sx: { fontWeight: "bold" },
|
|
61
|
+
children: title
|
|
62
|
+
}
|
|
63
|
+
),
|
|
64
|
+
/* @__PURE__ */ jsx(Typography, { id: descId, variant: "body1", color: "text.secondary", children: description })
|
|
65
|
+
]
|
|
66
|
+
}
|
|
67
|
+
),
|
|
68
|
+
/* @__PURE__ */ jsx(DialogActions, { sx: { justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx(Button, { onClick: handleClose, variant: "contained", color: alertVariant, children: "Aceptar" }) })
|
|
69
|
+
]
|
|
70
|
+
}
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
return /* @__PURE__ */ jsxs(
|
|
74
|
+
Alert,
|
|
75
|
+
{
|
|
76
|
+
severity: alertVariant,
|
|
77
|
+
sx: { mb: 2, mt: 2 },
|
|
78
|
+
onClose: close !== void 0 ? handleClose : void 0,
|
|
79
|
+
children: [
|
|
80
|
+
title && /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontWeight: "bold" }, children: title }),
|
|
81
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { mt: 1 }, children: description })
|
|
82
|
+
]
|
|
83
|
+
}
|
|
84
|
+
);
|
|
85
|
+
};
|
|
86
|
+
export {
|
|
87
|
+
StatusMessage,
|
|
88
|
+
StatusMessage as default
|
|
89
|
+
};
|
|
90
|
+
//# sourceMappingURL=StatusMessage.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StatusMessage.js","sources":["../../../src/components/StatusMessage/StatusMessage.tsx"],"sourcesContent":["import { useId, useState, type FC } from 'react';\nimport {\n Alert,\n Box,\n Typography,\n Dialog,\n DialogContent,\n DialogActions,\n Button,\n} from '@mui/material';\nimport {\n ErrorOutline as ErrorOutlineIcon,\n CheckCircleOutline as CheckCircleOutlineIcon,\n WarningAmber as WarningAmberIcon,\n} from '@mui/icons-material';\n\nexport interface StatusMessageProps {\n /** Título del mensaje. */\n title?: string;\n /** Descripción/contenido detallado. Requerido para que el componente renderice. */\n description?: string;\n /** Tipo de mensaje (controla color + icono). `danger` mapea a `error` de MUI. */\n messageType?: 'success' | 'danger' | 'warning';\n /** Forma de presentación: alerta inline o modal. Default: `'alert'`. */\n displayType?: 'alert' | 'modal';\n /** Callback al cerrar. Si se omite, no se muestra botón de cerrar. */\n close?: () => void;\n /**\n * Controla visibilidad. Si se omite, el componente maneja su propio\n * state (se oculta solo al llamar `close`). Si se pasa, queda controlled\n * y el consumer es responsable de actualizarlo.\n */\n open?: boolean;\n}\n\n/**\n * Mensaje de éxito / error / advertencia en forma de alerta inline o modal.\n *\n * - **Uncontrolled**: sin pasar `open`, el componente maneja su propia\n * visibilidad. Al llamar `close`, se oculta automáticamente.\n * - **Controlled**: pasando `open`, el consumer decide cuándo mostrar/ocultar.\n */\nexport const StatusMessage: FC<StatusMessageProps> = ({\n title,\n description,\n messageType = 'success',\n displayType = 'alert',\n close,\n open: controlledOpen,\n}) => {\n const [internalOpen, setInternalOpen] = useState(true);\n const titleId = useId();\n const descId = useId();\n\n const isControlled = controlledOpen !== undefined;\n const isOpen = isControlled ? controlledOpen : internalOpen;\n\n const handleClose = () => {\n if (!isControlled) setInternalOpen(false);\n close?.();\n };\n\n const alertVariant = messageType === 'danger' ? 'error' : messageType;\n\n const icon =\n messageType === 'success' ? (\n <CheckCircleOutlineIcon sx={{ fontSize: 64, color: 'success.main' }} />\n ) : messageType === 'danger' ? (\n <ErrorOutlineIcon sx={{ fontSize: 64, color: 'error.main' }} />\n ) : (\n <WarningAmberIcon sx={{ fontSize: 64, color: 'warning.main' }} />\n );\n\n if (!description) return null;\n if (!isOpen) return null;\n\n if (displayType === 'modal') {\n return (\n <Dialog\n open={isOpen}\n onClose={handleClose}\n aria-labelledby={title ? titleId : undefined}\n aria-describedby={descId}\n maxWidth=\"md\"\n slotProps={{\n paper: {\n sx: { borderRadius: '16px', p: 2 },\n },\n }}\n >\n <DialogContent\n sx={{\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n textAlign: 'center',\n p: 4,\n gap: 2,\n }}\n >\n <Box sx={{ mb: 2 }}>{icon}</Box>\n {title && (\n <Typography\n id={titleId}\n variant=\"h4\"\n component=\"h2\"\n sx={{ fontWeight: 'bold' }}\n >\n {title}\n </Typography>\n )}\n <Typography id={descId} variant=\"body1\" color=\"text.secondary\">\n {description}\n </Typography>\n </DialogContent>\n <DialogActions sx={{ justifyContent: 'center', p: 2 }}>\n <Button onClick={handleClose} variant=\"contained\" color={alertVariant}>\n Aceptar\n </Button>\n </DialogActions>\n </Dialog>\n );\n }\n\n return (\n <Alert\n severity={alertVariant}\n sx={{ mb: 2, mt: 2 }}\n onClose={close !== undefined ? handleClose : undefined}\n >\n {title && (\n <Typography variant=\"h6\" sx={{ fontWeight: 'bold' }}>\n {title}\n </Typography>\n )}\n <Typography variant=\"body2\" sx={{ mt: 1 }}>\n {description}\n </Typography>\n </Alert>\n );\n};\n\nexport default StatusMessage;\n"],"names":["CheckCircleOutlineIcon","ErrorOutlineIcon","WarningAmberIcon"],"mappings":";;;;AA0CO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AAAA,EACA,MAAM;AACR,MAAM;AACJ,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,IAAI;AACrD,QAAM,UAAU,MAAA;AAChB,QAAM,SAAS,MAAA;AAEf,QAAM,eAAe,mBAAmB;AACxC,QAAM,SAAS,eAAe,iBAAiB;AAE/C,QAAM,cAAc,MAAM;AACxB,QAAI,CAAC,aAAc,iBAAgB,KAAK;AACxC;AAAA,EACF;AAEA,QAAM,eAAe,gBAAgB,WAAW,UAAU;AAE1D,QAAM,OACJ,gBAAgB,YACd,oBAACA,sBAAuB,IAAI,EAAE,UAAU,IAAI,OAAO,eAAA,EAAe,CAAG,IACnE,gBAAgB,WAClB,oBAACC,cAAA,EAAiB,IAAI,EAAE,UAAU,IAAI,OAAO,eAAa,CAAG,IAE7D,oBAACC,cAAA,EAAiB,IAAI,EAAE,UAAU,IAAI,OAAO,kBAAkB;AAGnE,MAAI,CAAC,YAAa,QAAO;AACzB,MAAI,CAAC,OAAQ,QAAO;AAEpB,MAAI,gBAAgB,SAAS;AAC3B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,SAAS;AAAA,QACT,mBAAiB,QAAQ,UAAU;AAAA,QACnC,oBAAkB;AAAA,QAClB,UAAS;AAAA,QACT,WAAW;AAAA,UACT,OAAO;AAAA,YACL,IAAI,EAAE,cAAc,QAAQ,GAAG,EAAA;AAAA,UAAE;AAAA,QACnC;AAAA,QAGF,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,gBACF,SAAS;AAAA,gBACT,eAAe;AAAA,gBACf,YAAY;AAAA,gBACZ,WAAW;AAAA,gBACX,GAAG;AAAA,gBACH,KAAK;AAAA,cAAA;AAAA,cAGP,UAAA;AAAA,gBAAA,oBAAC,OAAI,IAAI,EAAE,IAAI,EAAA,GAAM,UAAA,MAAK;AAAA,gBACzB,SACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,SAAQ;AAAA,oBACR,WAAU;AAAA,oBACV,IAAI,EAAE,YAAY,OAAA;AAAA,oBAEjB,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGL,oBAAC,cAAW,IAAI,QAAQ,SAAQ,SAAQ,OAAM,kBAC3C,UAAA,YAAA,CACH;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,8BAED,eAAA,EAAc,IAAI,EAAE,gBAAgB,UAAU,GAAG,EAAA,GAChD,UAAA,oBAAC,QAAA,EAAO,SAAS,aAAa,SAAQ,aAAY,OAAO,cAAc,qBAEvE,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,IAAI,EAAE,IAAI,GAAG,IAAI,EAAA;AAAA,MACjB,SAAS,UAAU,SAAY,cAAc;AAAA,MAE5C,UAAA;AAAA,QAAA,SACC,oBAAC,cAAW,SAAQ,MAAK,IAAI,EAAE,YAAY,OAAA,GACxC,UAAA,MAAA,CACH;AAAA,QAEF,oBAAC,cAAW,SAAQ,SAAQ,IAAI,EAAE,IAAI,EAAA,GACnC,UAAA,YAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -0,0 +1,302 @@
|
|
|
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 ChevronLeftIcon = require("@mui/icons-material/ChevronLeft");
|
|
7
|
+
const ChevronRightIcon = require("@mui/icons-material/ChevronRight");
|
|
8
|
+
const defaultValue = {
|
|
9
|
+
currentStep: 0,
|
|
10
|
+
totalSteps: 0,
|
|
11
|
+
isFirst: true,
|
|
12
|
+
isLast: true,
|
|
13
|
+
completed: false,
|
|
14
|
+
nextStep: () => {
|
|
15
|
+
},
|
|
16
|
+
prevStep: () => {
|
|
17
|
+
},
|
|
18
|
+
goToStep: () => {
|
|
19
|
+
},
|
|
20
|
+
submitStep: () => {
|
|
21
|
+
},
|
|
22
|
+
reset: () => {
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
const StepperContext = React.createContext(defaultValue);
|
|
26
|
+
function useStepper() {
|
|
27
|
+
return React.useContext(StepperContext);
|
|
28
|
+
}
|
|
29
|
+
const StepperProvider = ({
|
|
30
|
+
totalSteps,
|
|
31
|
+
initialStep = 0,
|
|
32
|
+
onSubmit,
|
|
33
|
+
onStepChange,
|
|
34
|
+
children
|
|
35
|
+
}) => {
|
|
36
|
+
const [currentStep, setCurrentStep] = React.useState(initialStep);
|
|
37
|
+
const [completed, setCompleted] = React.useState(false);
|
|
38
|
+
const changeStep = React.useCallback(
|
|
39
|
+
(newStep) => {
|
|
40
|
+
setCurrentStep((prev) => {
|
|
41
|
+
if (newStep === prev) return prev;
|
|
42
|
+
if (newStep < 0 || newStep >= totalSteps) return prev;
|
|
43
|
+
onStepChange == null ? void 0 : onStepChange(newStep, prev);
|
|
44
|
+
return newStep;
|
|
45
|
+
});
|
|
46
|
+
},
|
|
47
|
+
[totalSteps, onStepChange]
|
|
48
|
+
);
|
|
49
|
+
const nextStep = React.useCallback(() => {
|
|
50
|
+
changeStep(currentStep + 1);
|
|
51
|
+
}, [changeStep, currentStep]);
|
|
52
|
+
const prevStep = React.useCallback(() => {
|
|
53
|
+
changeStep(currentStep - 1);
|
|
54
|
+
}, [changeStep, currentStep]);
|
|
55
|
+
const goToStep = React.useCallback(
|
|
56
|
+
(stepNumber) => {
|
|
57
|
+
changeStep(stepNumber);
|
|
58
|
+
},
|
|
59
|
+
[changeStep]
|
|
60
|
+
);
|
|
61
|
+
const submitStep = React.useCallback(() => {
|
|
62
|
+
setCompleted(true);
|
|
63
|
+
onSubmit == null ? void 0 : onSubmit(currentStep);
|
|
64
|
+
}, [currentStep, onSubmit]);
|
|
65
|
+
const reset = React.useCallback(() => {
|
|
66
|
+
setCurrentStep(initialStep);
|
|
67
|
+
setCompleted(false);
|
|
68
|
+
}, [initialStep]);
|
|
69
|
+
const value = React.useMemo(
|
|
70
|
+
() => ({
|
|
71
|
+
currentStep,
|
|
72
|
+
totalSteps,
|
|
73
|
+
isFirst: currentStep === 0,
|
|
74
|
+
isLast: currentStep === totalSteps - 1,
|
|
75
|
+
completed,
|
|
76
|
+
nextStep,
|
|
77
|
+
prevStep,
|
|
78
|
+
goToStep,
|
|
79
|
+
submitStep,
|
|
80
|
+
reset
|
|
81
|
+
}),
|
|
82
|
+
[
|
|
83
|
+
currentStep,
|
|
84
|
+
totalSteps,
|
|
85
|
+
completed,
|
|
86
|
+
nextStep,
|
|
87
|
+
prevStep,
|
|
88
|
+
goToStep,
|
|
89
|
+
submitStep,
|
|
90
|
+
reset
|
|
91
|
+
]
|
|
92
|
+
);
|
|
93
|
+
return /* @__PURE__ */ jsxRuntime.jsx(StepperContext.Provider, { value, children });
|
|
94
|
+
};
|
|
95
|
+
function useHorizontalScroll(enabled, deps = []) {
|
|
96
|
+
const scrollRef = React.useRef(null);
|
|
97
|
+
const [canScrollLeft, setCanScrollLeft] = React.useState(false);
|
|
98
|
+
const [canScrollRight, setCanScrollRight] = React.useState(false);
|
|
99
|
+
const updateScrollState = React.useCallback(() => {
|
|
100
|
+
const el = scrollRef.current;
|
|
101
|
+
if (!el) return;
|
|
102
|
+
const { scrollLeft, scrollWidth, clientWidth } = el;
|
|
103
|
+
setCanScrollLeft(scrollLeft > 1);
|
|
104
|
+
setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);
|
|
105
|
+
}, []);
|
|
106
|
+
React.useLayoutEffect(() => {
|
|
107
|
+
if (!enabled) return;
|
|
108
|
+
updateScrollState();
|
|
109
|
+
}, [enabled, updateScrollState, ...deps]);
|
|
110
|
+
React.useEffect(() => {
|
|
111
|
+
if (!enabled) return;
|
|
112
|
+
const el = scrollRef.current;
|
|
113
|
+
if (!el) return;
|
|
114
|
+
el.addEventListener("scroll", updateScrollState, { passive: true });
|
|
115
|
+
const ro = new ResizeObserver(updateScrollState);
|
|
116
|
+
ro.observe(el);
|
|
117
|
+
return () => {
|
|
118
|
+
el.removeEventListener("scroll", updateScrollState);
|
|
119
|
+
ro.disconnect();
|
|
120
|
+
};
|
|
121
|
+
}, [enabled, updateScrollState]);
|
|
122
|
+
const scrollBy = React.useCallback((delta) => {
|
|
123
|
+
const el = scrollRef.current;
|
|
124
|
+
if (!el) return;
|
|
125
|
+
el.scrollBy({ left: delta, behavior: "smooth" });
|
|
126
|
+
}, []);
|
|
127
|
+
return { scrollRef, canScrollLeft, canScrollRight, scrollBy };
|
|
128
|
+
}
|
|
129
|
+
const StepperScrollArrow = ({
|
|
130
|
+
direction,
|
|
131
|
+
enabled,
|
|
132
|
+
visible,
|
|
133
|
+
onClick
|
|
134
|
+
}) => {
|
|
135
|
+
const isLeft = direction === "left";
|
|
136
|
+
const Icon = isLeft ? ChevronLeftIcon : ChevronRightIcon;
|
|
137
|
+
const ariaLabel = isLeft ? "Anterior" : "Siguiente";
|
|
138
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
139
|
+
material.IconButton,
|
|
140
|
+
{
|
|
141
|
+
"aria-label": ariaLabel,
|
|
142
|
+
size: "small",
|
|
143
|
+
onClick,
|
|
144
|
+
disabled: !enabled,
|
|
145
|
+
sx: {
|
|
146
|
+
flex: "0 0 auto",
|
|
147
|
+
// Reservamos el slot siempre que haya overflow en algún lado,
|
|
148
|
+
// así el área scroll tiene un ancho estable (no saltan los
|
|
149
|
+
// steps cuando aparece/desaparece la flecha).
|
|
150
|
+
visibility: visible ? "visible" : "hidden"
|
|
151
|
+
},
|
|
152
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { fontSize: "small" })
|
|
153
|
+
}
|
|
154
|
+
);
|
|
155
|
+
};
|
|
156
|
+
const Stepper = ({
|
|
157
|
+
children,
|
|
158
|
+
orientation = "horizontal",
|
|
159
|
+
alternateLabel = false,
|
|
160
|
+
currentStep: currentStepProp,
|
|
161
|
+
keepMounted = false,
|
|
162
|
+
sx
|
|
163
|
+
}) => {
|
|
164
|
+
const stepperCtx = useStepper();
|
|
165
|
+
const currentStep = currentStepProp !== void 0 ? currentStepProp : stepperCtx.totalSteps > 0 ? stepperCtx.currentStep : 0;
|
|
166
|
+
const isHorizontal = orientation === "horizontal";
|
|
167
|
+
const steps = React.Children.toArray(children).filter(
|
|
168
|
+
(child) => {
|
|
169
|
+
var _a;
|
|
170
|
+
return React.isValidElement(child) && ((_a = child.type) == null ? void 0 : _a.displayName) === "Step";
|
|
171
|
+
}
|
|
172
|
+
);
|
|
173
|
+
const { scrollRef, canScrollLeft, canScrollRight, scrollBy } = useHorizontalScroll(
|
|
174
|
+
isHorizontal,
|
|
175
|
+
[steps.length, currentStep]
|
|
176
|
+
);
|
|
177
|
+
const showArrows = isHorizontal && (canScrollLeft || canScrollRight);
|
|
178
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx, children: [
|
|
179
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
180
|
+
material.Box,
|
|
181
|
+
{
|
|
182
|
+
sx: isHorizontal ? { display: "flex", alignItems: "center", width: "100%", gap: 0.5 } : void 0,
|
|
183
|
+
children: [
|
|
184
|
+
isHorizontal && /* @__PURE__ */ jsxRuntime.jsx(
|
|
185
|
+
StepperScrollArrow,
|
|
186
|
+
{
|
|
187
|
+
direction: "left",
|
|
188
|
+
enabled: canScrollLeft,
|
|
189
|
+
visible: showArrows,
|
|
190
|
+
onClick: () => scrollBy(-160)
|
|
191
|
+
}
|
|
192
|
+
),
|
|
193
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
194
|
+
material.Box,
|
|
195
|
+
{
|
|
196
|
+
ref: scrollRef,
|
|
197
|
+
sx: isHorizontal ? {
|
|
198
|
+
flex: "1 1 auto",
|
|
199
|
+
minWidth: 0,
|
|
200
|
+
overflowX: "auto",
|
|
201
|
+
scrollBehavior: "smooth",
|
|
202
|
+
WebkitOverflowScrolling: "touch",
|
|
203
|
+
scrollbarWidth: "none",
|
|
204
|
+
"&::-webkit-scrollbar": { display: "none" }
|
|
205
|
+
} : void 0,
|
|
206
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
207
|
+
material.Stepper,
|
|
208
|
+
{
|
|
209
|
+
activeStep: currentStep,
|
|
210
|
+
orientation,
|
|
211
|
+
alternativeLabel: alternateLabel,
|
|
212
|
+
sx: isHorizontal ? {
|
|
213
|
+
display: "inline-flex",
|
|
214
|
+
flexWrap: "nowrap",
|
|
215
|
+
minWidth: "100%",
|
|
216
|
+
width: "max-content",
|
|
217
|
+
"& .MuiStep-root": { flex: "0 0 auto", minWidth: 120 }
|
|
218
|
+
} : void 0,
|
|
219
|
+
children: steps.map((step, idx) => {
|
|
220
|
+
var _a;
|
|
221
|
+
const {
|
|
222
|
+
label,
|
|
223
|
+
completed,
|
|
224
|
+
disabled,
|
|
225
|
+
className,
|
|
226
|
+
sx: stepSx,
|
|
227
|
+
dotColor,
|
|
228
|
+
activeDotColor,
|
|
229
|
+
completedDotColor,
|
|
230
|
+
iconTextColor
|
|
231
|
+
} = step.props;
|
|
232
|
+
const key = (_a = step.key) != null ? _a : idx;
|
|
233
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
234
|
+
material.Step,
|
|
235
|
+
{
|
|
236
|
+
completed,
|
|
237
|
+
disabled,
|
|
238
|
+
className,
|
|
239
|
+
sx: stepSx,
|
|
240
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
241
|
+
material.StepLabel,
|
|
242
|
+
{
|
|
243
|
+
sx: {
|
|
244
|
+
pointerEvents: "none",
|
|
245
|
+
"& .MuiStepIcon-root": { color: dotColor },
|
|
246
|
+
"& .MuiStepIcon-active": { color: activeDotColor },
|
|
247
|
+
"& .MuiStepIcon-completed": { color: completedDotColor },
|
|
248
|
+
"& .MuiStepIcon-text": { fill: iconTextColor }
|
|
249
|
+
},
|
|
250
|
+
children: label
|
|
251
|
+
}
|
|
252
|
+
)
|
|
253
|
+
},
|
|
254
|
+
key
|
|
255
|
+
);
|
|
256
|
+
})
|
|
257
|
+
}
|
|
258
|
+
)
|
|
259
|
+
}
|
|
260
|
+
),
|
|
261
|
+
isHorizontal && /* @__PURE__ */ jsxRuntime.jsx(
|
|
262
|
+
StepperScrollArrow,
|
|
263
|
+
{
|
|
264
|
+
direction: "right",
|
|
265
|
+
enabled: canScrollRight,
|
|
266
|
+
visible: showArrows,
|
|
267
|
+
onClick: () => scrollBy(160)
|
|
268
|
+
}
|
|
269
|
+
)
|
|
270
|
+
]
|
|
271
|
+
}
|
|
272
|
+
),
|
|
273
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Box, { mt: 2, children: keepMounted ? steps.map((step, idx) => {
|
|
274
|
+
var _a;
|
|
275
|
+
const key = (_a = step.key) != null ? _a : idx;
|
|
276
|
+
const isActive = idx === currentStep;
|
|
277
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
278
|
+
material.Box,
|
|
279
|
+
{
|
|
280
|
+
sx: { display: isActive ? "block" : "none" },
|
|
281
|
+
"aria-hidden": !isActive,
|
|
282
|
+
children: step.props.children
|
|
283
|
+
},
|
|
284
|
+
key
|
|
285
|
+
);
|
|
286
|
+
}) : steps.map((step, idx) => {
|
|
287
|
+
var _a;
|
|
288
|
+
if (idx !== currentStep) return null;
|
|
289
|
+
const key = (_a = step.key) != null ? _a : idx;
|
|
290
|
+
return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: step.props.children }, key);
|
|
291
|
+
}) })
|
|
292
|
+
] });
|
|
293
|
+
};
|
|
294
|
+
const Step = (_) => null;
|
|
295
|
+
Step.displayName = "Step";
|
|
296
|
+
exports.Step = Step;
|
|
297
|
+
exports.Stepper = Stepper;
|
|
298
|
+
exports.StepperContext = StepperContext;
|
|
299
|
+
exports.StepperProvider = StepperProvider;
|
|
300
|
+
exports.default = Stepper;
|
|
301
|
+
exports.useStepper = useStepper;
|
|
302
|
+
//# sourceMappingURL=Stepper.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Stepper.cjs","sources":["../../../src/components/Stepper/StepperContext.tsx","../../../src/components/Stepper/_hooks/useHorizontalScroll.ts","../../../src/components/Stepper/_parts/StepperScrollArrow.tsx","../../../src/components/Stepper/Stepper.tsx","../../../src/components/Stepper/Step.tsx"],"sourcesContent":["import {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useState,\n type FC,\n type ReactNode,\n} from 'react';\n\n/**\n * API expuesta por `useStepper()`.\n */\nexport interface StepperContextValue {\n /** Índice del paso actual (0-based). */\n currentStep: number;\n /** Total de pasos del stepper. */\n totalSteps: number;\n /** True si `currentStep === 0`. */\n isFirst: boolean;\n /** True si `currentStep === totalSteps - 1`. */\n isLast: boolean;\n /** True tras ejecutar `submitStep()` desde el último paso. */\n completed: boolean;\n /** Avanza al siguiente paso (no pasa de `totalSteps - 1`). */\n nextStep: () => void;\n /** Retrocede al paso anterior (no baja de 0). */\n prevStep: () => void;\n /** Salta a un paso específico (0-based). No-op si fuera de rango. */\n goToStep: (stepNumber: number) => void;\n /**\n * Envía el stepper. Marca `completed = true` y dispara el callback\n * `onSubmit` del provider. En el último paso suele reemplazar a `nextStep`.\n */\n submitStep: () => void;\n /** Resetea al paso inicial y limpia `completed`. */\n reset: () => void;\n}\n\nconst defaultValue: StepperContextValue = {\n currentStep: 0,\n totalSteps: 0,\n isFirst: true,\n isLast: true,\n completed: false,\n nextStep: () => {},\n prevStep: () => {},\n goToStep: () => {},\n submitStep: () => {},\n reset: () => {},\n};\n\nexport const StepperContext = createContext<StepperContextValue>(defaultValue);\n\n/**\n * Hook para consumir el `StepperContext` desde cualquier descendiente de\n * `<StepperProvider>`.\n *\n * Si se llama fuera de un provider, devuelve los valores por defecto (no-op)\n * para que componentes como `<Stepper>` puedan leerlo sin romper cuando no\n * hay provider envolvente.\n */\nexport function useStepper(): StepperContextValue {\n return useContext(StepperContext);\n}\n\nexport interface StepperProviderProps {\n /** Número total de pasos. Requerido. */\n totalSteps: number;\n /** Paso inicial (0-based). Default: 0. */\n initialStep?: number;\n /**\n * Callback disparado cuando se llama `submitStep()`. Recibe el paso actual.\n * El paquete NO ejecuta ninguna petición; queda a cargo del consumer.\n */\n onSubmit?: (currentStep: number) => void;\n /**\n * Callback disparado en cada cambio de paso (next/prev/goTo).\n * Útil para tracking o validaciones externas.\n */\n onStepChange?: (newStep: number, prevStep: number) => void;\n children?: ReactNode;\n}\n\n/**\n * Provider del stepper. Administra el `currentStep` internamente. El consumer\n * no necesita gestionar estado — solo consumirlo con `useStepper()` desde\n * cualquier descendiente.\n *\n * ```tsx\n * <StepperProvider totalSteps={3} onSubmit={handleFinalSubmit}>\n * <Stepper>\n * <Step label=\"Paso 1\"><StepOne /></Step>\n * <Step label=\"Paso 2\"><StepTwo /></Step>\n * <Step label=\"Paso 3\"><StepThree /></Step>\n * </Stepper>\n * <StepperControls />\n * </StepperProvider>\n * ```\n */\nexport const StepperProvider: FC<StepperProviderProps> = ({\n totalSteps,\n initialStep = 0,\n onSubmit,\n onStepChange,\n children,\n}) => {\n const [currentStep, setCurrentStep] = useState(initialStep);\n const [completed, setCompleted] = useState(false);\n\n const changeStep = useCallback(\n (newStep: number) => {\n setCurrentStep((prev) => {\n if (newStep === prev) return prev;\n if (newStep < 0 || newStep >= totalSteps) return prev;\n onStepChange?.(newStep, prev);\n return newStep;\n });\n },\n [totalSteps, onStepChange],\n );\n\n const nextStep = useCallback(() => {\n changeStep(currentStep + 1);\n }, [changeStep, currentStep]);\n\n const prevStep = useCallback(() => {\n changeStep(currentStep - 1);\n }, [changeStep, currentStep]);\n\n const goToStep = useCallback(\n (stepNumber: number) => {\n changeStep(stepNumber);\n },\n [changeStep],\n );\n\n const submitStep = useCallback(() => {\n setCompleted(true);\n onSubmit?.(currentStep);\n }, [currentStep, onSubmit]);\n\n const reset = useCallback(() => {\n setCurrentStep(initialStep);\n setCompleted(false);\n }, [initialStep]);\n\n const value = useMemo<StepperContextValue>(\n () => ({\n currentStep,\n totalSteps,\n isFirst: currentStep === 0,\n isLast: currentStep === totalSteps - 1,\n completed,\n nextStep,\n prevStep,\n goToStep,\n submitStep,\n reset,\n }),\n [\n currentStep,\n totalSteps,\n completed,\n nextStep,\n prevStep,\n goToStep,\n submitStep,\n reset,\n ],\n );\n\n return (\n <StepperContext.Provider value={value}>{children}</StepperContext.Provider>\n );\n};\n","import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\n/**\n * Hook interno del Stepper para manejar scroll horizontal cuando los steps\n * no caben en el contenedor. No se exporta desde el barrel — es un detalle\n * de implementación.\n *\n * @param enabled - Si el scroll está activo (típicamente sólo en orientación horizontal).\n * @param deps - Cosas que afectan el layout y disparan un recompute (ej. cantidad de steps, paso activo).\n *\n * Retorna:\n * - `scrollRef`: ref a asignar al contenedor con `overflow-x: auto`.\n * - `canScrollLeft` / `canScrollRight`: flags para habilitar/deshabilitar flechas.\n * - `scrollBy(delta)`: imperativo con scroll suave.\n */\nexport function useHorizontalScroll(enabled: boolean, deps: unknown[] = []) {\n const scrollRef = useRef<HTMLDivElement | null>(null);\n const [canScrollLeft, setCanScrollLeft] = useState(false);\n const [canScrollRight, setCanScrollRight] = useState(false);\n\n const updateScrollState = useCallback(() => {\n const el = scrollRef.current;\n if (!el) return;\n const { scrollLeft, scrollWidth, clientWidth } = el;\n // Tolerancia de 1px por redondeos de subpixel.\n setCanScrollLeft(scrollLeft > 1);\n setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n }, []);\n\n useLayoutEffect(() => {\n if (!enabled) return;\n updateScrollState();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [enabled, updateScrollState, ...deps]);\n\n useEffect(() => {\n if (!enabled) return;\n const el = scrollRef.current;\n if (!el) return;\n el.addEventListener('scroll', updateScrollState, { passive: true });\n const ro = new ResizeObserver(updateScrollState);\n ro.observe(el);\n return () => {\n el.removeEventListener('scroll', updateScrollState);\n ro.disconnect();\n };\n }, [enabled, updateScrollState]);\n\n const scrollBy = useCallback((delta: number) => {\n const el = scrollRef.current;\n if (!el) return;\n el.scrollBy({ left: delta, behavior: 'smooth' });\n }, []);\n\n return { scrollRef, canScrollLeft, canScrollRight, scrollBy };\n}\n","import { IconButton } from '@mui/material';\nimport ChevronLeftIcon from '@mui/icons-material/ChevronLeft';\nimport ChevronRightIcon from '@mui/icons-material/ChevronRight';\n\ninterface StepperScrollArrowProps {\n direction: 'left' | 'right';\n /** Cuando `false`, el botón está deshabilitado (por ejemplo, ya estás al inicio). */\n enabled: boolean;\n /**\n * Cuando `false`, el botón queda con `visibility: hidden` (reserva su\n * espacio pero no se ve). Útil para que el área de scroll no se corra\n * horizontalmente cuando no hay overflow en ningún lado.\n */\n visible: boolean;\n onClick: () => void;\n}\n\n/**\n * Flecha de scroll (`<` / `>`) del Stepper horizontal. Se muestra a los\n * costados del área scrollable cuando hay overflow. Componente privado —\n * no se exporta del barrel.\n */\nexport const StepperScrollArrow = ({\n direction,\n enabled,\n visible,\n onClick,\n}: StepperScrollArrowProps) => {\n const isLeft = direction === 'left';\n const Icon = isLeft ? ChevronLeftIcon : ChevronRightIcon;\n const ariaLabel = isLeft ? 'Anterior' : 'Siguiente';\n\n return (\n <IconButton\n aria-label={ariaLabel}\n size=\"small\"\n onClick={onClick}\n disabled={!enabled}\n sx={{\n flex: '0 0 auto',\n // Reservamos el slot siempre que haya overflow en algún lado,\n // así el área scroll tiene un ancho estable (no saltan los\n // steps cuando aparece/desaparece la flecha).\n visibility: visible ? 'visible' : 'hidden',\n }}\n >\n <Icon fontSize=\"small\" />\n </IconButton>\n );\n};\n","import {\n Children,\n isValidElement,\n type FC,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport {\n Stepper as MuiStepper,\n Step as MuiStep,\n StepLabel as MuiStepLabel,\n Box,\n} from '@mui/material';\n\nimport { StepProps } from './Step';\nimport { useStepper } from './StepperContext';\nimport { useHorizontalScroll } from './_hooks/useHorizontalScroll';\nimport { StepperScrollArrow } from './_parts/StepperScrollArrow';\n\nexport interface StepperProps {\n /** Uno o varios `<Step>`. Children que no sean `<Step>` se ignoran. */\n children: ReactNode;\n orientation?: 'horizontal' | 'vertical';\n alternateLabel?: boolean;\n /**\n * Índice 0-based del paso activo. Si no se provee, el Stepper intenta\n * leerlo del `StepperContext` (si está dentro de un `<StepperProvider>`).\n * Si tampoco hay provider, el default es 0.\n */\n currentStep?: number;\n keepMounted?: boolean;\n sx?: object;\n}\n\nexport const Stepper: FC<StepperProps> = ({\n children,\n orientation = 'horizontal',\n alternateLabel = false,\n currentStep: currentStepProp,\n keepMounted = false,\n sx,\n}) => {\n // Lee el paso desde el StepperContext cuando el consumer no lo pasa como prop.\n const stepperCtx = useStepper();\n const currentStep =\n currentStepProp !== undefined\n ? currentStepProp\n : stepperCtx.totalSteps > 0\n ? stepperCtx.currentStep\n : 0;\n\n const isHorizontal = orientation === 'horizontal';\n\n // Filtra los children a los que tengan displayName=\"Step\" — acepta arrays,\n // single child, fragments, y descarta cualquier otra cosa (strings, null, etc.).\n const steps: ReactElement<StepProps>[] = Children.toArray(children).filter(\n (child): child is ReactElement<StepProps> =>\n isValidElement(child) &&\n (child.type as { displayName?: string })?.displayName === 'Step',\n );\n\n const { scrollRef, canScrollLeft, canScrollRight, scrollBy } = useHorizontalScroll(\n isHorizontal,\n [steps.length, currentStep],\n );\n\n const showArrows = isHorizontal && (canScrollLeft || canScrollRight);\n\n return (\n <Box sx={sx}>\n <Box\n sx={\n isHorizontal\n ? { display: 'flex', alignItems: 'center', width: '100%', gap: 0.5 }\n : undefined\n }\n >\n {isHorizontal && (\n <StepperScrollArrow\n direction=\"left\"\n enabled={canScrollLeft}\n visible={showArrows}\n onClick={() => scrollBy(-160)}\n />\n )}\n <Box\n ref={scrollRef}\n sx={\n isHorizontal\n ? {\n flex: '1 1 auto',\n minWidth: 0,\n overflowX: 'auto',\n scrollBehavior: 'smooth',\n WebkitOverflowScrolling: 'touch',\n scrollbarWidth: 'none',\n '&::-webkit-scrollbar': { display: 'none' },\n }\n : undefined\n }\n >\n <MuiStepper\n activeStep={currentStep}\n orientation={orientation}\n alternativeLabel={alternateLabel}\n sx={\n isHorizontal\n ? {\n display: 'inline-flex',\n flexWrap: 'nowrap',\n minWidth: '100%',\n width: 'max-content',\n '& .MuiStep-root': { flex: '0 0 auto', minWidth: 120 },\n }\n : undefined\n }\n >\n {steps.map((step, idx) => {\n const {\n label,\n completed,\n disabled,\n className,\n sx: stepSx,\n dotColor,\n activeDotColor,\n completedDotColor,\n iconTextColor,\n } = step.props;\n const key = step.key ?? idx;\n return (\n <MuiStep\n key={key}\n completed={completed}\n disabled={disabled}\n className={className}\n sx={stepSx}\n >\n <MuiStepLabel\n sx={{\n pointerEvents: 'none',\n '& .MuiStepIcon-root': { color: dotColor },\n '& .MuiStepIcon-active': { color: activeDotColor },\n '& .MuiStepIcon-completed': { color: completedDotColor },\n '& .MuiStepIcon-text': { fill: iconTextColor },\n }}\n >\n {label}\n </MuiStepLabel>\n </MuiStep>\n );\n })}\n </MuiStepper>\n </Box>\n {isHorizontal && (\n <StepperScrollArrow\n direction=\"right\"\n enabled={canScrollRight}\n visible={showArrows}\n onClick={() => scrollBy(160)}\n />\n )}\n </Box>\n\n {/* Cuerpos de los steps — render según el modo `keepMounted` */}\n <Box mt={2}>\n {keepMounted\n ? steps.map((step, idx) => {\n const key = step.key ?? idx;\n const isActive = idx === currentStep;\n return (\n <Box\n key={key}\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 // Accesibilidad: oculta del flujo de lectura pero no del DOM.\n aria-hidden={!isActive}\n >\n {step.props.children}\n </Box>\n );\n })\n : steps.map((step, idx) => {\n if (idx !== currentStep) return null;\n const key = step.key ?? idx;\n return <Box key={key}>{step.props.children}</Box>;\n })}\n </Box>\n </Box>\n );\n};\n\nexport default Stepper;\n","import React from \"react\";\nimport { StepProps as MuiStepProps } from \"@mui/material\";\n\ntype PickMuiStepProps = Pick<MuiStepProps, \"completed\" | \"disabled\" | \"sx\" | \"className\">;\n\nexport interface StepProps extends PickMuiStepProps {\n label: React.ReactNode;\n children?: React.ReactNode;\n disabled?: boolean;\n sx?: object;\n dotColor?: string; // dot base\n activeDotColor?: string; // dot activa\n completedDotColor?: string; // dot completada\n iconTextColor?: string; // número o check dentro\n}\n\nexport const Step = (_: StepProps): null => null;\n\nStep.displayName = \"Step\";\n\nexport default Step;"],"names":["createContext","useContext","useState","useCallback","useMemo","jsx","useRef","useLayoutEffect","useEffect","IconButton","Children","isValidElement","jsxs","Box","MuiStepper","MuiStep","MuiStepLabel"],"mappings":";;;;;;;AAuCA,MAAM,eAAoC;AAAA,EACxC,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,OAAO,MAAM;AAAA,EAAC;AAChB;AAEO,MAAM,iBAAiBA,MAAAA,cAAmC,YAAY;AAUtE,SAAS,aAAkC;AAChD,SAAOC,MAAAA,WAAW,cAAc;AAClC;AAoCO,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,aAAa,cAAc,IAAIC,MAAAA,SAAS,WAAW;AAC1D,QAAM,CAAC,WAAW,YAAY,IAAIA,MAAAA,SAAS,KAAK;AAEhD,QAAM,aAAaC,MAAAA;AAAAA,IACjB,CAAC,YAAoB;AACnB,qBAAe,CAAC,SAAS;AACvB,YAAI,YAAY,KAAM,QAAO;AAC7B,YAAI,UAAU,KAAK,WAAW,WAAY,QAAO;AACjD,qDAAe,SAAS;AACxB,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAC,YAAY,YAAY;AAAA,EAAA;AAG3B,QAAM,WAAWA,MAAAA,YAAY,MAAM;AACjC,eAAW,cAAc,CAAC;AAAA,EAC5B,GAAG,CAAC,YAAY,WAAW,CAAC;AAE5B,QAAM,WAAWA,MAAAA,YAAY,MAAM;AACjC,eAAW,cAAc,CAAC;AAAA,EAC5B,GAAG,CAAC,YAAY,WAAW,CAAC;AAE5B,QAAM,WAAWA,MAAAA;AAAAA,IACf,CAAC,eAAuB;AACtB,iBAAW,UAAU;AAAA,IACvB;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAGb,QAAM,aAAaA,MAAAA,YAAY,MAAM;AACnC,iBAAa,IAAI;AACjB,yCAAW;AAAA,EACb,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,QAAM,QAAQA,MAAAA,YAAY,MAAM;AAC9B,mBAAe,WAAW;AAC1B,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,QAAQC,MAAAA;AAAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,gBAAgB;AAAA,MACzB,QAAQ,gBAAgB,aAAa;AAAA,MACrC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAGF,SACEC,2BAAAA,IAAC,eAAe,UAAf,EAAwB,OAAe,SAAA,CAAS;AAErD;AChKO,SAAS,oBAAoB,SAAkB,OAAkB,IAAI;AAC1E,QAAM,YAAYC,MAAAA,OAA8B,IAAI;AACpD,QAAM,CAAC,eAAe,gBAAgB,IAAIJ,MAAAA,SAAS,KAAK;AACxD,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,MAAAA,SAAS,KAAK;AAE1D,QAAM,oBAAoBC,MAAAA,YAAY,MAAM;AAC1C,UAAM,KAAK,UAAU;AACrB,QAAI,CAAC,GAAI;AACT,UAAM,EAAE,YAAY,aAAa,YAAA,IAAgB;AAEjD,qBAAiB,aAAa,CAAC;AAC/B,sBAAkB,aAAa,cAAc,cAAc,CAAC;AAAA,EAC9D,GAAG,CAAA,CAAE;AAELI,QAAAA,gBAAgB,MAAM;AACpB,QAAI,CAAC,QAAS;AACd,sBAAA;AAAA,EAEF,GAAG,CAAC,SAAS,mBAAmB,GAAG,IAAI,CAAC;AAExCC,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,QAAS;AACd,UAAM,KAAK,UAAU;AACrB,QAAI,CAAC,GAAI;AACT,OAAG,iBAAiB,UAAU,mBAAmB,EAAE,SAAS,MAAM;AAClE,UAAM,KAAK,IAAI,eAAe,iBAAiB;AAC/C,OAAG,QAAQ,EAAE;AACb,WAAO,MAAM;AACX,SAAG,oBAAoB,UAAU,iBAAiB;AAClD,SAAG,WAAA;AAAA,IACL;AAAA,EACF,GAAG,CAAC,SAAS,iBAAiB,CAAC;AAE/B,QAAM,WAAWL,kBAAY,CAAC,UAAkB;AAC9C,UAAM,KAAK,UAAU;AACrB,QAAI,CAAC,GAAI;AACT,OAAG,SAAS,EAAE,MAAM,OAAO,UAAU,UAAU;AAAA,EACjD,GAAG,CAAA,CAAE;AAEL,SAAO,EAAE,WAAW,eAAe,gBAAgB,SAAA;AACrD;ACjCO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA+B;AAC7B,QAAM,SAAS,cAAc;AAC7B,QAAM,OAAO,SAAS,kBAAkB;AACxC,QAAM,YAAY,SAAS,aAAa;AAExC,SACEE,2BAAAA;AAAAA,IAACI,SAAAA;AAAAA,IAAA;AAAA,MACC,cAAY;AAAA,MACZ,MAAK;AAAA,MACL;AAAA,MACA,UAAU,CAAC;AAAA,MACX,IAAI;AAAA,QACF,MAAM;AAAA;AAAA;AAAA;AAAA,QAIN,YAAY,UAAU,YAAY;AAAA,MAAA;AAAA,MAGpC,UAAAJ,2BAAAA,IAAC,MAAA,EAAK,UAAS,QAAA,CAAQ;AAAA,IAAA;AAAA,EAAA;AAG7B;ACfO,MAAM,UAA4B,CAAC;AAAA,EACxC;AAAA,EACA,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,cAAc;AAAA,EACd;AACF,MAAM;AAEJ,QAAM,aAAa,WAAA;AACnB,QAAM,cACJ,oBAAoB,SAChB,kBACA,WAAW,aAAa,IACtB,WAAW,cACX;AAER,QAAM,eAAe,gBAAgB;AAIrC,QAAM,QAAmCK,MAAAA,SAAS,QAAQ,QAAQ,EAAE;AAAA,IAClE,CAAC,UAAA;;AACCC,mBAAAA,eAAe,KAAK,OACnB,WAAM,SAAN,mBAAyC,iBAAgB;AAAA;AAAA,EAAA;AAG9D,QAAM,EAAE,WAAW,eAAe,gBAAgB,aAAa;AAAA,IAC7D;AAAA,IACA,CAAC,MAAM,QAAQ,WAAW;AAAA,EAAA;AAG5B,QAAM,aAAa,iBAAiB,iBAAiB;AAErD,SACEC,gCAACC,SAAAA,OAAI,IACH,UAAA;AAAA,IAAAD,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC,IACE,eACI,EAAE,SAAS,QAAQ,YAAY,UAAU,OAAO,QAAQ,KAAK,IAAA,IAC7D;AAAA,QAGL,UAAA;AAAA,UAAA,gBACCR,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAS;AAAA,cACT,SAAS;AAAA,cACT,SAAS,MAAM,SAAS,IAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAGhCA,2BAAAA;AAAAA,YAACQ,SAAAA;AAAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,IACE,eACI;AAAA,gBACA,MAAM;AAAA,gBACN,UAAU;AAAA,gBACV,WAAW;AAAA,gBACX,gBAAgB;AAAA,gBAChB,yBAAyB;AAAA,gBACzB,gBAAgB;AAAA,gBAChB,wBAAwB,EAAE,SAAS,OAAA;AAAA,cAAO,IAE1C;AAAA,cAGN,UAAAR,2BAAAA;AAAAA,gBAACS,SAAAA;AAAAA,gBAAA;AAAA,kBACC,YAAY;AAAA,kBACZ;AAAA,kBACA,kBAAkB;AAAA,kBAClB,IACE,eACI;AAAA,oBACA,SAAS;AAAA,oBACT,UAAU;AAAA,oBACV,UAAU;AAAA,oBACV,OAAO;AAAA,oBACP,mBAAmB,EAAE,MAAM,YAAY,UAAU,IAAA;AAAA,kBAAI,IAErD;AAAA,kBAGL,UAAA,MAAM,IAAI,CAAC,MAAM,QAAQ;;AACxB,0BAAM;AAAA,sBACJ;AAAA,sBACA;AAAA,sBACA;AAAA,sBACA;AAAA,sBACA,IAAI;AAAA,sBACJ;AAAA,sBACA;AAAA,sBACA;AAAA,sBACA;AAAA,oBAAA,IACE,KAAK;AACT,0BAAM,OAAM,UAAK,QAAL,YAAY;AACxB,2BACET,2BAAAA;AAAAA,sBAACU,SAAAA;AAAAA,sBAAA;AAAA,wBAEC;AAAA,wBACA;AAAA,wBACA;AAAA,wBACA,IAAI;AAAA,wBAEJ,UAAAV,2BAAAA;AAAAA,0BAACW,SAAAA;AAAAA,0BAAA;AAAA,4BACC,IAAI;AAAA,8BACF,eAAe;AAAA,8BACf,uBAAuB,EAAE,OAAO,SAAA;AAAA,8BAChC,yBAAyB,EAAE,OAAO,eAAA;AAAA,8BAClC,4BAA4B,EAAE,OAAO,kBAAA;AAAA,8BACrC,uBAAuB,EAAE,MAAM,cAAA;AAAA,4BAAc;AAAA,4BAG9C,UAAA;AAAA,0BAAA;AAAA,wBAAA;AAAA,sBACH;AAAA,sBAhBK;AAAA,oBAAA;AAAA,kBAmBX,CAAC;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH;AAAA,UAAA;AAAA,UAED,gBACCX,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAS;AAAA,cACT,SAAS;AAAA,cACT,SAAS,MAAM,SAAS,GAAG;AAAA,YAAA;AAAA,UAAA;AAAA,QAC7B;AAAA,MAAA;AAAA,IAAA;AAAA,IAKJA,2BAAAA,IAACQ,SAAAA,OAAI,IAAI,GACN,wBACG,MAAM,IAAI,CAAC,MAAM,QAAQ;;AACzB,YAAM,OAAM,UAAK,QAAL,YAAY;AACxB,YAAM,WAAW,QAAQ;AACzB,aACER,2BAAAA;AAAAA,QAACQ,SAAAA;AAAAA,QAAA;AAAA,UAIC,IAAI,EAAE,SAAS,WAAW,UAAU,OAAA;AAAA,UAEpC,eAAa,CAAC;AAAA,UAEb,eAAK,MAAM;AAAA,QAAA;AAAA,QAPP;AAAA,MAAA;AAAA,IAUX,CAAC,IACC,MAAM,IAAI,CAAC,MAAM,QAAQ;;AACzB,UAAI,QAAQ,YAAa,QAAO;AAChC,YAAM,OAAM,UAAK,QAAL,YAAY;AACxB,aAAOR,2BAAAA,IAACQ,SAAAA,KAAA,EAAe,UAAA,KAAK,MAAM,YAAjB,GAA0B;AAAA,IAC7C,CAAC,EAAA,CACL;AAAA,EAAA,GACF;AAEJ;AC/KO,MAAM,OAAO,CAAC,MAAuB;AAE5C,KAAK,cAAc;;;;;;;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
export interface StepperProps {
|
|
3
|
+
/** Uno o varios `<Step>`. Children que no sean `<Step>` se ignoran. */
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
orientation?: 'horizontal' | 'vertical';
|
|
6
|
+
alternateLabel?: boolean;
|
|
7
|
+
/**
|
|
8
|
+
* Índice 0-based del paso activo. Si no se provee, el Stepper intenta
|
|
9
|
+
* leerlo del `StepperContext` (si está dentro de un `<StepperProvider>`).
|
|
10
|
+
* Si tampoco hay provider, el default es 0.
|
|
11
|
+
*/
|
|
12
|
+
currentStep?: number;
|
|
13
|
+
keepMounted?: boolean;
|
|
14
|
+
sx?: object;
|
|
15
|
+
}
|
|
16
|
+
export declare const Stepper: FC<StepperProps>;
|
|
17
|
+
export default Stepper;
|