@clicoh/orion-library 1.2.0-beta.2 → 1.2.0-beta.21
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/assets/avatares/caja-chispa.png +0 -0
- package/assets/avatares/caja.png +0 -0
- package/assets/avatares/cohete.png +0 -0
- package/assets/avatares/dino.png +0 -0
- package/assets/avatares/pulpo-lentes.png +0 -0
- package/assets/avatares/pulpo-verde.png +0 -0
- package/assets/avatares/pulpo.png +0 -0
- package/assets/cifras/alerta.png +0 -0
- package/assets/cifras/duda.png +0 -0
- package/assets/cifras/error.png +0 -0
- package/assets/cifras/monedas.png +0 -0
- package/assets/cifras/reloj.png +0 -0
- package/assets/cifras/visto.png +0 -0
- package/assets/css/expresivo.css +1069 -0
- package/assets/logos/oculus-icon.svg +1 -0
- package/assets/logos/oculus-logo-sm-dark.svg +1 -0
- package/assets/logos/oculus-logo-sm.svg +1 -0
- package/assets/mascotas/svg/bugi-mascota-01-alerta.svg +39 -0
- package/assets/mascotas/svg/bugi-mascota-02-investigando.svg +36 -0
- package/assets/mascotas/svg/bugi-mascota-05-sorprendido.svg +38 -0
- package/assets/mascotas/svg/oculus-mascota-01-feliz.svg +52 -0
- package/assets/mascotas/svg/oculus-mascota-02-investigando.svg +51 -0
- package/assets/mascotas/svg/oculus-mascota-03-dudando.svg +51 -0
- package/assets/mascotas/svg/oculus-mascota-04-analizando-documento.svg +53 -0
- package/assets/mascotas/svg/oculus-mascota-06-celebrando.svg +54 -0
- package/assets/mascotas/svg/oculus-mascota-07-buscando-rapido.svg +57 -0
- package/assets/mascotas/svg/oculus-mascota-08-satisfecho.svg +55 -0
- package/assets/mascotas/webp/fixi-mascota-01-feliz-sm.webp +0 -0
- package/assets/mascotas/webp/fixi-mascota-02-investigando-sm.webp +0 -0
- package/assets/mascotas/webp/fixi-mascota-03-dudando-sm.webp +0 -0
- package/assets/mascotas/webp/fixi-mascota-04-reparando-sm.webp +0 -0
- package/assets/mascotas/webp/fixi-mascota-05-sorprendido-sm.webp +0 -0
- package/assets/mascotas/webp/fixi-mascota-06-celebrando-sm.webp +0 -0
- package/assets/mascotas/webp/fixi-mascota-07-corriendo-sm.webp +0 -0
- package/dist/components/01-atoms/Button/Button.d.ts +21 -1
- package/dist/components/01-atoms/Button/Button.d.ts.map +1 -1
- package/dist/components/01-atoms/Button/Button.jsx +38 -4
- package/dist/components/01-atoms/Button/Button.jsx.map +1 -1
- package/dist/components/01-atoms/CodeBlock/CodeBlock.d.ts +56 -0
- package/dist/components/01-atoms/CodeBlock/CodeBlock.d.ts.map +1 -0
- package/dist/components/01-atoms/CodeBlock/CodeBlock.jsx +97 -0
- package/dist/components/01-atoms/CodeBlock/CodeBlock.jsx.map +1 -0
- package/dist/components/01-atoms/CodeBlock/index.d.ts +2 -0
- package/dist/components/01-atoms/CodeBlock/index.d.ts.map +1 -0
- package/dist/components/01-atoms/CodeBlock/index.js +2 -0
- package/dist/components/01-atoms/CodeBlock/index.js.map +1 -0
- package/dist/components/01-atoms/Heading/Heading.jsx +1 -1
- package/dist/components/01-atoms/Heading/Heading.jsx.map +1 -1
- package/dist/components/01-atoms/IconButton/IconButton.d.ts +28 -0
- package/dist/components/01-atoms/IconButton/IconButton.d.ts.map +1 -0
- package/dist/components/01-atoms/IconButton/IconButton.jsx +32 -0
- package/dist/components/01-atoms/IconButton/IconButton.jsx.map +1 -0
- package/dist/components/01-atoms/IconButton/index.d.ts +2 -0
- package/dist/components/01-atoms/IconButton/index.d.ts.map +1 -0
- package/dist/components/01-atoms/IconButton/index.js +2 -0
- package/dist/components/01-atoms/IconButton/index.js.map +1 -0
- package/dist/components/01-atoms/Input/Input.d.ts +1 -1
- package/dist/components/01-atoms/Input/Input.d.ts.map +1 -1
- package/dist/components/01-atoms/Input/Input.jsx +13 -9
- package/dist/components/01-atoms/Input/Input.jsx.map +1 -1
- package/dist/components/01-atoms/Input/utils/RenderErrorOrHelperText.d.ts.map +1 -1
- package/dist/components/01-atoms/Input/utils/RenderErrorOrHelperText.jsx +1 -1
- package/dist/components/01-atoms/Input/utils/RenderErrorOrHelperText.jsx.map +1 -1
- package/dist/components/01-atoms/MultiSelect/MultiSelect.d.ts.map +1 -1
- package/dist/components/01-atoms/MultiSelect/MultiSelect.jsx +2 -1
- package/dist/components/01-atoms/MultiSelect/MultiSelect.jsx.map +1 -1
- package/dist/components/01-atoms/ProgressBar/ProgressBar.d.ts +12 -1
- package/dist/components/01-atoms/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/components/01-atoms/ProgressBar/ProgressBar.jsx +18 -2
- package/dist/components/01-atoms/ProgressBar/ProgressBar.jsx.map +1 -1
- package/dist/components/01-atoms/Select/Select.d.ts +7 -1
- package/dist/components/01-atoms/Select/Select.d.ts.map +1 -1
- package/dist/components/01-atoms/Select/Select.jsx +61 -13
- package/dist/components/01-atoms/Select/Select.jsx.map +1 -1
- package/dist/components/01-atoms/Select/SelectList.d.ts +41 -0
- package/dist/components/01-atoms/Select/SelectList.d.ts.map +1 -0
- package/dist/components/01-atoms/Select/SelectList.jsx +116 -0
- package/dist/components/01-atoms/Select/SelectList.jsx.map +1 -0
- package/dist/components/01-atoms/SmallInput/SmallInput.d.ts.map +1 -1
- package/dist/components/01-atoms/SmallInput/SmallInput.jsx +1 -0
- package/dist/components/01-atoms/SmallInput/SmallInput.jsx.map +1 -1
- package/dist/components/01-atoms/Spinner/Spinner.d.ts +24 -3
- package/dist/components/01-atoms/Spinner/Spinner.d.ts.map +1 -1
- package/dist/components/01-atoms/Spinner/Spinner.jsx +30 -4
- package/dist/components/01-atoms/Spinner/Spinner.jsx.map +1 -1
- package/dist/components/01-atoms/Spinner/index.d.ts +1 -0
- package/dist/components/01-atoms/Spinner/index.d.ts.map +1 -1
- package/dist/components/01-atoms/Stat/Stat.d.ts +47 -0
- package/dist/components/01-atoms/Stat/Stat.d.ts.map +1 -0
- package/dist/components/01-atoms/Stat/Stat.jsx +64 -0
- package/dist/components/01-atoms/Stat/Stat.jsx.map +1 -0
- package/dist/components/01-atoms/Stat/index.d.ts +2 -0
- package/dist/components/01-atoms/Stat/index.d.ts.map +1 -0
- package/dist/components/01-atoms/Stat/index.js +2 -0
- package/dist/components/01-atoms/Stat/index.js.map +1 -0
- package/dist/components/01-atoms/Switch/Switch.d.ts +5 -2
- package/dist/components/01-atoms/Switch/Switch.d.ts.map +1 -1
- package/dist/components/01-atoms/Switch/Switch.jsx +15 -12
- package/dist/components/01-atoms/Switch/Switch.jsx.map +1 -1
- package/dist/components/01-atoms/Textarea/Textarea.d.ts +38 -0
- package/dist/components/01-atoms/Textarea/Textarea.d.ts.map +1 -0
- package/dist/components/01-atoms/Textarea/Textarea.jsx +50 -0
- package/dist/components/01-atoms/Textarea/Textarea.jsx.map +1 -0
- package/dist/components/01-atoms/Textarea/index.d.ts +2 -0
- package/dist/components/01-atoms/Textarea/index.d.ts.map +1 -0
- package/dist/components/01-atoms/Textarea/index.js +2 -0
- package/dist/components/01-atoms/Textarea/index.js.map +1 -0
- package/dist/components/01-atoms/Toast/Toast.d.ts.map +1 -1
- package/dist/components/01-atoms/Toast/Toast.jsx +3 -1
- package/dist/components/01-atoms/Toast/Toast.jsx.map +1 -1
- package/dist/components/01-atoms/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/components/01-atoms/Tooltip/Tooltip.jsx +4 -1
- package/dist/components/01-atoms/Tooltip/Tooltip.jsx.map +1 -1
- package/dist/components/01-atoms/index.d.ts +4 -0
- package/dist/components/01-atoms/index.d.ts.map +1 -1
- package/dist/components/01-atoms/index.js +4 -0
- package/dist/components/01-atoms/index.js.map +1 -1
- package/dist/components/02-molecules/Accordion/Accordion.d.ts +15 -4
- package/dist/components/02-molecules/Accordion/Accordion.d.ts.map +1 -1
- package/dist/components/02-molecules/Accordion/Accordion.jsx +20 -6
- package/dist/components/02-molecules/Accordion/Accordion.jsx.map +1 -1
- package/dist/components/02-molecules/Accordion/AccordionContext.d.ts +5 -1
- package/dist/components/02-molecules/Accordion/AccordionContext.d.ts.map +1 -1
- package/dist/components/02-molecules/Accordion/AccordionContext.jsx +7 -6
- package/dist/components/02-molecules/Accordion/AccordionContext.jsx.map +1 -1
- package/dist/components/02-molecules/Accordion/AccordionSection.d.ts +2 -1
- package/dist/components/02-molecules/Accordion/AccordionSection.d.ts.map +1 -1
- package/dist/components/02-molecules/Accordion/AccordionSection.jsx +62 -11
- package/dist/components/02-molecules/Accordion/AccordionSection.jsx.map +1 -1
- package/dist/components/02-molecules/Accordion/index.d.ts +1 -0
- package/dist/components/02-molecules/Accordion/index.d.ts.map +1 -1
- package/dist/components/02-molecules/Accordion/index.js.map +1 -1
- package/dist/components/02-molecules/Autocomplete/Autocomplete.d.ts +4 -1
- package/dist/components/02-molecules/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/dist/components/02-molecules/Autocomplete/Autocomplete.jsx +34 -15
- package/dist/components/02-molecules/Autocomplete/Autocomplete.jsx.map +1 -1
- package/dist/components/02-molecules/Card/Card.d.ts +74 -0
- package/dist/components/02-molecules/Card/Card.d.ts.map +1 -0
- package/dist/components/02-molecules/Card/Card.jsx +87 -0
- package/dist/components/02-molecules/Card/Card.jsx.map +1 -0
- package/dist/components/02-molecules/Card/index.d.ts +2 -0
- package/dist/components/02-molecules/Card/index.d.ts.map +1 -0
- package/dist/components/02-molecules/Card/index.js +2 -0
- package/dist/components/02-molecules/Card/index.js.map +1 -0
- package/dist/components/02-molecules/DatePicker/DatePicker.d.ts +41 -3
- package/dist/components/02-molecules/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/components/02-molecules/DatePicker/DatePicker.jsx +190 -34
- package/dist/components/02-molecules/DatePicker/DatePicker.jsx.map +1 -1
- package/dist/components/02-molecules/Dropdown/Dropdown.d.ts.map +1 -1
- package/dist/components/02-molecules/Dropdown/Dropdown.jsx +1 -0
- package/dist/components/02-molecules/Dropdown/Dropdown.jsx.map +1 -1
- package/dist/components/02-molecules/EmptyState/EmptyState.d.ts +52 -0
- package/dist/components/02-molecules/EmptyState/EmptyState.d.ts.map +1 -0
- package/dist/components/02-molecules/EmptyState/EmptyState.jsx +66 -0
- package/dist/components/02-molecules/EmptyState/EmptyState.jsx.map +1 -0
- package/dist/components/02-molecules/EmptyState/index.d.ts +2 -0
- package/dist/components/02-molecules/EmptyState/index.d.ts.map +1 -0
- package/dist/components/02-molecules/EmptyState/index.js +2 -0
- package/dist/components/02-molecules/EmptyState/index.js.map +1 -0
- package/dist/components/02-molecules/Filter/Filter.d.ts +8 -1
- package/dist/components/02-molecules/Filter/Filter.d.ts.map +1 -1
- package/dist/components/02-molecules/Filter/Filter.jsx +35 -11
- package/dist/components/02-molecules/Filter/Filter.jsx.map +1 -1
- package/dist/components/02-molecules/Filter/index.d.ts +1 -0
- package/dist/components/02-molecules/Filter/index.d.ts.map +1 -1
- package/dist/components/02-molecules/Filter/index.js +1 -0
- package/dist/components/02-molecules/Filter/index.js.map +1 -1
- package/dist/components/02-molecules/Filter/types.d.ts +24 -5
- package/dist/components/02-molecules/Filter/types.d.ts.map +1 -1
- package/dist/components/02-molecules/Filter/utils/pruneOrphanValues.d.ts +34 -0
- package/dist/components/02-molecules/Filter/utils/pruneOrphanValues.d.ts.map +1 -0
- package/dist/components/02-molecules/Filter/utils/pruneOrphanValues.js +70 -0
- package/dist/components/02-molecules/Filter/utils/pruneOrphanValues.js.map +1 -0
- package/dist/components/02-molecules/ImageViewer/ImageViewer.d.ts +55 -5
- package/dist/components/02-molecules/ImageViewer/ImageViewer.d.ts.map +1 -1
- package/dist/components/02-molecules/ImageViewer/ImageViewer.jsx +118 -27
- package/dist/components/02-molecules/ImageViewer/ImageViewer.jsx.map +1 -1
- package/dist/components/02-molecules/ImageViewer/ImageViewerImage.d.ts +40 -0
- package/dist/components/02-molecules/ImageViewer/ImageViewerImage.d.ts.map +1 -0
- package/dist/components/02-molecules/ImageViewer/ImageViewerImage.jsx +109 -0
- package/dist/components/02-molecules/ImageViewer/ImageViewerImage.jsx.map +1 -0
- package/dist/components/02-molecules/InlineMessage/InlineMessage.d.ts +15 -1
- package/dist/components/02-molecules/InlineMessage/InlineMessage.d.ts.map +1 -1
- package/dist/components/02-molecules/InlineMessage/InlineMessage.jsx +18 -3
- package/dist/components/02-molecules/InlineMessage/InlineMessage.jsx.map +1 -1
- package/dist/components/02-molecules/Menu/MenuItem.d.ts.map +1 -1
- package/dist/components/02-molecules/Menu/MenuItem.jsx +2 -2
- package/dist/components/02-molecules/Menu/MenuItem.jsx.map +1 -1
- package/dist/components/02-molecules/Menu/MenuList.d.ts.map +1 -1
- package/dist/components/02-molecules/Menu/MenuList.jsx +1 -1
- package/dist/components/02-molecules/Menu/MenuList.jsx.map +1 -1
- package/dist/components/02-molecules/Modal/Modal.d.ts +5 -1
- package/dist/components/02-molecules/Modal/Modal.d.ts.map +1 -1
- package/dist/components/02-molecules/Modal/Modal.jsx +4 -2
- package/dist/components/02-molecules/Modal/Modal.jsx.map +1 -1
- package/dist/components/02-molecules/MultiAutocomplete/MultiAutocomplete.d.ts +80 -0
- package/dist/components/02-molecules/MultiAutocomplete/MultiAutocomplete.d.ts.map +1 -0
- package/dist/components/02-molecules/MultiAutocomplete/MultiAutocomplete.jsx +261 -0
- package/dist/components/02-molecules/MultiAutocomplete/MultiAutocomplete.jsx.map +1 -0
- package/dist/components/02-molecules/MultiAutocomplete/index.d.ts +2 -0
- package/dist/components/02-molecules/MultiAutocomplete/index.d.ts.map +1 -0
- package/dist/components/02-molecules/MultiAutocomplete/index.js +2 -0
- package/dist/components/02-molecules/MultiAutocomplete/index.js.map +1 -0
- package/dist/components/02-molecules/Stepper/Stepper.d.ts +70 -0
- package/dist/components/02-molecules/Stepper/Stepper.d.ts.map +1 -0
- package/dist/components/02-molecules/Stepper/Stepper.jsx +204 -0
- package/dist/components/02-molecules/Stepper/Stepper.jsx.map +1 -0
- package/dist/components/02-molecules/Stepper/index.d.ts +2 -0
- package/dist/components/02-molecules/Stepper/index.d.ts.map +1 -0
- package/dist/components/02-molecules/Stepper/index.js +2 -0
- package/dist/components/02-molecules/Stepper/index.js.map +1 -0
- package/dist/components/02-molecules/Table/Table.d.ts +3 -1
- package/dist/components/02-molecules/Table/Table.d.ts.map +1 -1
- package/dist/components/02-molecules/Table/Table.jsx +6 -5
- package/dist/components/02-molecules/Table/Table.jsx.map +1 -1
- package/dist/components/02-molecules/Timeline/Timeline.d.ts +47 -0
- package/dist/components/02-molecules/Timeline/Timeline.d.ts.map +1 -0
- package/dist/components/02-molecules/Timeline/Timeline.jsx +65 -0
- package/dist/components/02-molecules/Timeline/Timeline.jsx.map +1 -0
- package/dist/components/02-molecules/Timeline/index.d.ts +2 -0
- package/dist/components/02-molecules/Timeline/index.d.ts.map +1 -0
- package/dist/components/02-molecules/Timeline/index.js +2 -0
- package/dist/components/02-molecules/Timeline/index.js.map +1 -0
- package/dist/components/02-molecules/index.d.ts +5 -0
- package/dist/components/02-molecules/index.d.ts.map +1 -1
- package/dist/components/02-molecules/index.js +5 -0
- package/dist/components/02-molecules/index.js.map +1 -1
- package/dist/components/03-organisms/DataTable/DataTable.d.ts +1 -1
- package/dist/components/03-organisms/DataTable/DataTable.d.ts.map +1 -1
- package/dist/components/03-organisms/DataTable/DataTable.jsx +1 -1
- package/dist/components/03-organisms/DataTable/DataTable.jsx.map +1 -1
- package/dist/components/03-organisms/Header/Header.d.ts +3 -1
- package/dist/components/03-organisms/Header/Header.d.ts.map +1 -1
- package/dist/components/03-organisms/Header/Header.jsx +4 -5
- package/dist/components/03-organisms/Header/Header.jsx.map +1 -1
- package/dist/components/03-organisms/MapView/MapView.d.ts +14 -3
- package/dist/components/03-organisms/MapView/MapView.d.ts.map +1 -1
- package/dist/components/03-organisms/MapView/MapView.jsx +40 -9
- package/dist/components/03-organisms/MapView/MapView.jsx.map +1 -1
- package/dist/components/03-organisms/ModalMultiple/ModalMultiple.d.ts.map +1 -1
- package/dist/components/03-organisms/ModalMultiple/ModalMultiple.jsx +1 -0
- package/dist/components/03-organisms/ModalMultiple/ModalMultiple.jsx.map +1 -1
- package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.d.ts +36 -4
- package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.d.ts.map +1 -1
- package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.jsx +44 -10
- package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.jsx.map +1 -1
- package/dist/components/04-templates/DashboardTemplate/HeadingWithTitle.d.ts +6 -2
- package/dist/components/04-templates/DashboardTemplate/HeadingWithTitle.d.ts.map +1 -1
- package/dist/components/04-templates/DashboardTemplate/HeadingWithTitle.jsx +7 -3
- package/dist/components/04-templates/DashboardTemplate/HeadingWithTitle.jsx.map +1 -1
- package/dist/components/04-templates/LoginTemplate/LoginForm.d.ts +66 -3
- package/dist/components/04-templates/LoginTemplate/LoginForm.d.ts.map +1 -1
- package/dist/components/04-templates/LoginTemplate/LoginForm.jsx +80 -16
- package/dist/components/04-templates/LoginTemplate/LoginForm.jsx.map +1 -1
- package/dist/components/04-templates/LoginTemplate/LoginTemplate.d.ts +24 -4
- package/dist/components/04-templates/LoginTemplate/LoginTemplate.d.ts.map +1 -1
- package/dist/components/04-templates/LoginTemplate/LoginTemplate.jsx +27 -7
- package/dist/components/04-templates/LoginTemplate/LoginTemplate.jsx.map +1 -1
- package/dist/components/04-templates/LoginTemplate/index.d.ts +1 -0
- package/dist/components/04-templates/LoginTemplate/index.d.ts.map +1 -1
- package/dist/components/04-templates/SideFilterTemplate/SideFilterTemplate.d.ts.map +1 -1
- package/dist/components/04-templates/SideFilterTemplate/SideFilterTemplate.jsx +4 -1
- package/dist/components/04-templates/SideFilterTemplate/SideFilterTemplate.jsx.map +1 -1
- package/dist/hooks/useSegments.d.ts.map +1 -1
- package/dist/hooks/useSegments.js +2 -3
- package/dist/hooks/useSegments.js.map +1 -1
- package/dist/hooks/useTheme.d.ts.map +1 -1
- package/dist/hooks/useTheme.jsx +1 -0
- package/dist/hooks/useTheme.jsx.map +1 -1
- package/expresivo/ExpBubble/ExpBubble.d.ts +51 -0
- package/expresivo/ExpBubble/ExpBubble.d.ts.map +1 -0
- package/expresivo/ExpBubble/ExpBubble.jsx +74 -0
- package/expresivo/ExpBubble/ExpBubble.jsx.map +1 -0
- package/expresivo/ExpBubble/index.d.ts +3 -0
- package/expresivo/ExpBubble/index.d.ts.map +1 -0
- package/expresivo/ExpBubble/index.js +2 -0
- package/expresivo/ExpBubble/index.js.map +1 -0
- package/expresivo/ExpChip/ExpChip.d.ts +40 -0
- package/expresivo/ExpChip/ExpChip.d.ts.map +1 -0
- package/expresivo/ExpChip/ExpChip.jsx +67 -0
- package/expresivo/ExpChip/ExpChip.jsx.map +1 -0
- package/expresivo/ExpChip/index.d.ts +3 -0
- package/expresivo/ExpChip/index.d.ts.map +1 -0
- package/expresivo/ExpChip/index.js +2 -0
- package/expresivo/ExpChip/index.js.map +1 -0
- package/expresivo/ExpCollapseToggle/ExpCollapseToggle.d.ts +37 -0
- package/expresivo/ExpCollapseToggle/ExpCollapseToggle.d.ts.map +1 -0
- package/expresivo/ExpCollapseToggle/ExpCollapseToggle.jsx +43 -0
- package/expresivo/ExpCollapseToggle/ExpCollapseToggle.jsx.map +1 -0
- package/expresivo/ExpCollapseToggle/index.d.ts +3 -0
- package/expresivo/ExpCollapseToggle/index.d.ts.map +1 -0
- package/expresivo/ExpCollapseToggle/index.js +2 -0
- package/expresivo/ExpCollapseToggle/index.js.map +1 -0
- package/expresivo/ExpEnterIcon/ExpEnterIcon.d.ts +32 -0
- package/expresivo/ExpEnterIcon/ExpEnterIcon.d.ts.map +1 -0
- package/expresivo/ExpEnterIcon/ExpEnterIcon.jsx +32 -0
- package/expresivo/ExpEnterIcon/ExpEnterIcon.jsx.map +1 -0
- package/expresivo/ExpEnterIcon/index.d.ts +3 -0
- package/expresivo/ExpEnterIcon/index.d.ts.map +1 -0
- package/expresivo/ExpEnterIcon/index.js +2 -0
- package/expresivo/ExpEnterIcon/index.js.map +1 -0
- package/expresivo/ExpGrowBar/ExpGrowBar.d.ts +26 -0
- package/expresivo/ExpGrowBar/ExpGrowBar.d.ts.map +1 -0
- package/expresivo/ExpGrowBar/ExpGrowBar.jsx +39 -0
- package/expresivo/ExpGrowBar/ExpGrowBar.jsx.map +1 -0
- package/expresivo/ExpGrowBar/index.d.ts +3 -0
- package/expresivo/ExpGrowBar/index.d.ts.map +1 -0
- package/expresivo/ExpGrowBar/index.js +2 -0
- package/expresivo/ExpGrowBar/index.js.map +1 -0
- package/expresivo/ExpJourneyTrack/ExpJourneyTrack.d.ts +69 -0
- package/expresivo/ExpJourneyTrack/ExpJourneyTrack.d.ts.map +1 -0
- package/expresivo/ExpJourneyTrack/ExpJourneyTrack.jsx +160 -0
- package/expresivo/ExpJourneyTrack/ExpJourneyTrack.jsx.map +1 -0
- package/expresivo/ExpJourneyTrack/index.d.ts +3 -0
- package/expresivo/ExpJourneyTrack/index.d.ts.map +1 -0
- package/expresivo/ExpJourneyTrack/index.js +2 -0
- package/expresivo/ExpJourneyTrack/index.js.map +1 -0
- package/expresivo/ExpKeyButton/ExpKeyButton.d.ts +49 -0
- package/expresivo/ExpKeyButton/ExpKeyButton.d.ts.map +1 -0
- package/expresivo/ExpKeyButton/ExpKeyButton.jsx +60 -0
- package/expresivo/ExpKeyButton/ExpKeyButton.jsx.map +1 -0
- package/expresivo/ExpKeyButton/index.d.ts +3 -0
- package/expresivo/ExpKeyButton/index.d.ts.map +1 -0
- package/expresivo/ExpKeyButton/index.js +2 -0
- package/expresivo/ExpKeyButton/index.js.map +1 -0
- package/expresivo/ExpLadder/ExpLadder.d.ts +42 -0
- package/expresivo/ExpLadder/ExpLadder.d.ts.map +1 -0
- package/expresivo/ExpLadder/ExpLadder.jsx +82 -0
- package/expresivo/ExpLadder/ExpLadder.jsx.map +1 -0
- package/expresivo/ExpLadder/index.d.ts +3 -0
- package/expresivo/ExpLadder/index.d.ts.map +1 -0
- package/expresivo/ExpLadder/index.js +2 -0
- package/expresivo/ExpLadder/index.js.map +1 -0
- package/expresivo/ExpLensIcon/ExpLensIcon.d.ts +29 -0
- package/expresivo/ExpLensIcon/ExpLensIcon.d.ts.map +1 -0
- package/expresivo/ExpLensIcon/ExpLensIcon.jsx +29 -0
- package/expresivo/ExpLensIcon/ExpLensIcon.jsx.map +1 -0
- package/expresivo/ExpLensIcon/index.d.ts +3 -0
- package/expresivo/ExpLensIcon/index.d.ts.map +1 -0
- package/expresivo/ExpLensIcon/index.js +2 -0
- package/expresivo/ExpLensIcon/index.js.map +1 -0
- package/expresivo/ExpLogo/ExpLogo.d.ts +33 -0
- package/expresivo/ExpLogo/ExpLogo.d.ts.map +1 -0
- package/expresivo/ExpLogo/ExpLogo.jsx +42 -0
- package/expresivo/ExpLogo/ExpLogo.jsx.map +1 -0
- package/expresivo/ExpLogo/catalog.d.ts +17 -0
- package/expresivo/ExpLogo/catalog.d.ts.map +1 -0
- package/expresivo/ExpLogo/catalog.js +11 -0
- package/expresivo/ExpLogo/catalog.js.map +1 -0
- package/expresivo/ExpLogo/index.d.ts +4 -0
- package/expresivo/ExpLogo/index.d.ts.map +1 -0
- package/expresivo/ExpLogo/index.js +2 -0
- package/expresivo/ExpLogo/index.js.map +1 -0
- package/expresivo/ExpMascot/ExpMascot.d.ts +42 -0
- package/expresivo/ExpMascot/ExpMascot.d.ts.map +1 -0
- package/expresivo/ExpMascot/ExpMascot.jsx +46 -0
- package/expresivo/ExpMascot/ExpMascot.jsx.map +1 -0
- package/expresivo/ExpMascot/catalog.d.ts +12 -0
- package/expresivo/ExpMascot/catalog.d.ts.map +1 -0
- package/expresivo/ExpMascot/catalog.js +41 -0
- package/expresivo/ExpMascot/catalog.js.map +1 -0
- package/expresivo/ExpMascot/index.d.ts +4 -0
- package/expresivo/ExpMascot/index.d.ts.map +1 -0
- package/expresivo/ExpMascot/index.js +2 -0
- package/expresivo/ExpMascot/index.js.map +1 -0
- package/expresivo/ExpMedalBadge/ExpMedalBadge.d.ts +29 -0
- package/expresivo/ExpMedalBadge/ExpMedalBadge.d.ts.map +1 -0
- package/expresivo/ExpMedalBadge/ExpMedalBadge.jsx +87 -0
- package/expresivo/ExpMedalBadge/ExpMedalBadge.jsx.map +1 -0
- package/expresivo/ExpMedalBadge/index.d.ts +3 -0
- package/expresivo/ExpMedalBadge/index.d.ts.map +1 -0
- package/expresivo/ExpMedalBadge/index.js +2 -0
- package/expresivo/ExpMedalBadge/index.js.map +1 -0
- package/expresivo/ExpPageHero/ExpPageHero.d.ts +82 -0
- package/expresivo/ExpPageHero/ExpPageHero.d.ts.map +1 -0
- package/expresivo/ExpPageHero/ExpPageHero.jsx +113 -0
- package/expresivo/ExpPageHero/ExpPageHero.jsx.map +1 -0
- package/expresivo/ExpPageHero/index.d.ts +3 -0
- package/expresivo/ExpPageHero/index.d.ts.map +1 -0
- package/expresivo/ExpPageHero/index.js +2 -0
- package/expresivo/ExpPageHero/index.js.map +1 -0
- package/expresivo/ExpPeek/ExpPeek.d.ts +56 -0
- package/expresivo/ExpPeek/ExpPeek.d.ts.map +1 -0
- package/expresivo/ExpPeek/ExpPeek.jsx +131 -0
- package/expresivo/ExpPeek/ExpPeek.jsx.map +1 -0
- package/expresivo/ExpPeek/index.d.ts +3 -0
- package/expresivo/ExpPeek/index.d.ts.map +1 -0
- package/expresivo/ExpPeek/index.js +2 -0
- package/expresivo/ExpPeek/index.js.map +1 -0
- package/expresivo/ExpPillButton/ExpPillButton.d.ts +47 -0
- package/expresivo/ExpPillButton/ExpPillButton.d.ts.map +1 -0
- package/expresivo/ExpPillButton/ExpPillButton.jsx +77 -0
- package/expresivo/ExpPillButton/ExpPillButton.jsx.map +1 -0
- package/expresivo/ExpPillButton/index.d.ts +3 -0
- package/expresivo/ExpPillButton/index.d.ts.map +1 -0
- package/expresivo/ExpPillButton/index.js +2 -0
- package/expresivo/ExpPillButton/index.js.map +1 -0
- package/expresivo/ExpRepoAvatar/ExpRepoAvatar.d.ts +28 -0
- package/expresivo/ExpRepoAvatar/ExpRepoAvatar.d.ts.map +1 -0
- package/expresivo/ExpRepoAvatar/ExpRepoAvatar.jsx +32 -0
- package/expresivo/ExpRepoAvatar/ExpRepoAvatar.jsx.map +1 -0
- package/expresivo/ExpRepoAvatar/catalog.d.ts +6 -0
- package/expresivo/ExpRepoAvatar/catalog.d.ts.map +1 -0
- package/expresivo/ExpRepoAvatar/catalog.js +18 -0
- package/expresivo/ExpRepoAvatar/catalog.js.map +1 -0
- package/expresivo/ExpRepoAvatar/index.d.ts +4 -0
- package/expresivo/ExpRepoAvatar/index.d.ts.map +1 -0
- package/expresivo/ExpRepoAvatar/index.js +2 -0
- package/expresivo/ExpRepoAvatar/index.js.map +1 -0
- package/expresivo/ExpScope/ExpScope.d.ts +63 -0
- package/expresivo/ExpScope/ExpScope.d.ts.map +1 -0
- package/expresivo/ExpScope/ExpScope.jsx +67 -0
- package/expresivo/ExpScope/ExpScope.jsx.map +1 -0
- package/expresivo/ExpScope/index.d.ts +3 -0
- package/expresivo/ExpScope/index.d.ts.map +1 -0
- package/expresivo/ExpScope/index.js +2 -0
- package/expresivo/ExpScope/index.js.map +1 -0
- package/expresivo/ExpScoreRing/ExpScoreRing.d.ts +35 -0
- package/expresivo/ExpScoreRing/ExpScoreRing.d.ts.map +1 -0
- package/expresivo/ExpScoreRing/ExpScoreRing.jsx +67 -0
- package/expresivo/ExpScoreRing/ExpScoreRing.jsx.map +1 -0
- package/expresivo/ExpScoreRing/index.d.ts +3 -0
- package/expresivo/ExpScoreRing/index.d.ts.map +1 -0
- package/expresivo/ExpScoreRing/index.js +2 -0
- package/expresivo/ExpScoreRing/index.js.map +1 -0
- package/expresivo/ExpSearchField/ExpSearchField.d.ts +49 -0
- package/expresivo/ExpSearchField/ExpSearchField.d.ts.map +1 -0
- package/expresivo/ExpSearchField/ExpSearchField.jsx +81 -0
- package/expresivo/ExpSearchField/ExpSearchField.jsx.map +1 -0
- package/expresivo/ExpSearchField/index.d.ts +3 -0
- package/expresivo/ExpSearchField/index.d.ts.map +1 -0
- package/expresivo/ExpSearchField/index.js +2 -0
- package/expresivo/ExpSearchField/index.js.map +1 -0
- package/expresivo/ExpStatIcon/ExpStatIcon.d.ts +25 -0
- package/expresivo/ExpStatIcon/ExpStatIcon.d.ts.map +1 -0
- package/expresivo/ExpStatIcon/ExpStatIcon.jsx +29 -0
- package/expresivo/ExpStatIcon/ExpStatIcon.jsx.map +1 -0
- package/expresivo/ExpStatIcon/catalog.d.ts +6 -0
- package/expresivo/ExpStatIcon/catalog.d.ts.map +1 -0
- package/expresivo/ExpStatIcon/catalog.js +16 -0
- package/expresivo/ExpStatIcon/catalog.js.map +1 -0
- package/expresivo/ExpStatIcon/index.d.ts +4 -0
- package/expresivo/ExpStatIcon/index.d.ts.map +1 -0
- package/expresivo/ExpStatIcon/index.js +2 -0
- package/expresivo/ExpStatIcon/index.js.map +1 -0
- package/expresivo/ExpStepBadge/ExpStepBadge.d.ts +25 -0
- package/expresivo/ExpStepBadge/ExpStepBadge.d.ts.map +1 -0
- package/expresivo/ExpStepBadge/ExpStepBadge.jsx +30 -0
- package/expresivo/ExpStepBadge/ExpStepBadge.jsx.map +1 -0
- package/expresivo/ExpStepBadge/index.d.ts +2 -0
- package/expresivo/ExpStepBadge/index.d.ts.map +1 -0
- package/expresivo/ExpStepBadge/index.js +2 -0
- package/expresivo/ExpStepBadge/index.js.map +1 -0
- package/expresivo/index.d.ts +22 -0
- package/expresivo/index.d.ts.map +1 -0
- package/expresivo/index.js +22 -0
- package/expresivo/index.js.map +1 -0
- package/expresivo/shared/glyphs.d.ts +20 -0
- package/expresivo/shared/glyphs.d.ts.map +1 -0
- package/expresivo/shared/glyphs.jsx +60 -0
- package/expresivo/shared/glyphs.jsx.map +1 -0
- package/package.json +6 -4
|
@@ -2,9 +2,30 @@
|
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { useCallback, useEffect, useId, useRef, useState, } from 'react';
|
|
4
4
|
import { FaChevronDown } from 'react-icons/fa';
|
|
5
|
-
import { useAccordionContext } from './AccordionContext';
|
|
5
|
+
import { useAccordionContext, } from './AccordionContext';
|
|
6
|
+
const triggerStyleMap = {
|
|
7
|
+
pill: 'mb-2 rounded-full border-b-[3px] px-4 py-2',
|
|
8
|
+
plain: 'rounded-sm py-3',
|
|
9
|
+
};
|
|
10
|
+
const triggerStateStyleMap = {
|
|
11
|
+
pill: {
|
|
12
|
+
active: 'border-lavender dark:border-lavender-dark',
|
|
13
|
+
inactive: 'border-gray-2 dark:border-gray-1',
|
|
14
|
+
},
|
|
15
|
+
plain: {
|
|
16
|
+
active: '',
|
|
17
|
+
inactive: '',
|
|
18
|
+
},
|
|
19
|
+
};
|
|
20
|
+
const chevronStyleMap = {
|
|
21
|
+
pill: '',
|
|
22
|
+
plain: 'size-3 text-gray-1 dark:text-gray-2',
|
|
23
|
+
};
|
|
24
|
+
/** Matches `duration-300` on the content. */
|
|
25
|
+
const OPEN_DURATION_MS = 300;
|
|
6
26
|
/**
|
|
7
27
|
* AccordionSection component for displaying a collapsible section within an Accordion.
|
|
28
|
+
* The header takes the `modifier` of the parent Accordion.
|
|
8
29
|
*
|
|
9
30
|
* @component
|
|
10
31
|
* @example
|
|
@@ -16,7 +37,7 @@ import { useAccordionContext } from './AccordionContext';
|
|
|
16
37
|
* @param {Object} props - The properties of the AccordionSection component.
|
|
17
38
|
* @param {string} props.title - The title of the section.
|
|
18
39
|
* @param {ReactNode} props.children - The content to be displayed within the section.
|
|
19
|
-
* @param {string} props.id - The unique identifier for the section.
|
|
40
|
+
* @param {string} props.id - The unique identifier for the section, also used by the Accordion `defaultActivated` prop.
|
|
20
41
|
*
|
|
21
42
|
* @returns {ReactNode} The rendered AccordionSection component.
|
|
22
43
|
*/
|
|
@@ -24,7 +45,11 @@ export function AccordionSection({ title, children, id, }) {
|
|
|
24
45
|
const context = useAccordionContext();
|
|
25
46
|
const isActivated = context.activated.includes(id);
|
|
26
47
|
const contentRef = useRef(null);
|
|
27
|
-
|
|
48
|
+
// A section that starts open renders at full height instead of animating in.
|
|
49
|
+
const [maxHeight, setMaxHeight] = useState(isActivated ? 'none' : '0px');
|
|
50
|
+
// Once fully open the content stops clipping, so a popover inside it
|
|
51
|
+
// (DatePicker, Autocomplete) can overflow the section.
|
|
52
|
+
const [isSettled, setIsSettled] = useState(isActivated);
|
|
28
53
|
const generatedId = useId();
|
|
29
54
|
const triggerId = `${generatedId}-trigger`;
|
|
30
55
|
const panelId = `${generatedId}-panel`;
|
|
@@ -32,24 +57,50 @@ export function AccordionSection({ title, children, id, }) {
|
|
|
32
57
|
if (!contentRef.current) {
|
|
33
58
|
return;
|
|
34
59
|
}
|
|
35
|
-
|
|
36
|
-
|
|
60
|
+
if (!isActivated) {
|
|
61
|
+
setIsSettled(false);
|
|
62
|
+
setMaxHeight('0px');
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
if (isSettled) {
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
setMaxHeight(`${contentRef.current.scrollHeight}px`);
|
|
69
|
+
}, [isActivated, isSettled]);
|
|
37
70
|
useEffect(() => {
|
|
71
|
+
// eslint-disable-next-line react-hooks/set-state-in-effect -- the height is measured from the rendered content, which only exists after commit
|
|
38
72
|
updateHeight();
|
|
39
73
|
}, [isActivated, updateHeight]);
|
|
74
|
+
useEffect(() => {
|
|
75
|
+
if (!isActivated || isSettled) {
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
const timer = window.setTimeout(() => {
|
|
79
|
+
setIsSettled(true);
|
|
80
|
+
setMaxHeight('none');
|
|
81
|
+
}, OPEN_DURATION_MS);
|
|
82
|
+
return () => window.clearTimeout(timer);
|
|
83
|
+
}, [isActivated, isSettled]);
|
|
40
84
|
useEffect(() => {
|
|
41
85
|
window.addEventListener('resize', updateHeight);
|
|
42
86
|
return () => window.removeEventListener('resize', updateHeight);
|
|
43
87
|
}, [updateHeight]);
|
|
88
|
+
useEffect(() => {
|
|
89
|
+
const content = contentRef.current?.firstElementChild;
|
|
90
|
+
if (!content || typeof ResizeObserver === 'undefined') {
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
const observer = new ResizeObserver(updateHeight);
|
|
94
|
+
observer.observe(content);
|
|
95
|
+
return () => observer.disconnect();
|
|
96
|
+
}, [updateHeight]);
|
|
44
97
|
return (<section className="text-black dark:text-white">
|
|
45
|
-
<button type="button" id={triggerId} aria-expanded={isActivated} aria-controls={panelId} className={clsx('focus-visible:ring-lavender
|
|
46
|
-
? 'border-lavender dark:border-lavender-dark'
|
|
47
|
-
: 'border-gray-2 dark:border-gray-1')} onClick={() => context.toggleId(id)}>
|
|
98
|
+
<button type="button" id={triggerId} aria-expanded={isActivated} aria-controls={panelId} className={clsx('focus-visible:ring-lavender flex w-full cursor-pointer items-center justify-between text-left text-sm font-semibold transition-colors duration-300 ease-in-out focus-visible:ring-2 focus-visible:outline-none', triggerStyleMap[context.modifier], triggerStateStyleMap[context.modifier][isActivated ? 'active' : 'inactive'])} onClick={() => context.toggleId(id)}>
|
|
48
99
|
<span>{title}</span>
|
|
49
|
-
<FaChevronDown aria-hidden className={clsx('transition-transform duration-300 ease-in-out', isActivated && 'rotate-180 transform')}/>
|
|
100
|
+
<FaChevronDown aria-hidden className={clsx('transition-transform duration-300 ease-in-out', chevronStyleMap[context.modifier], isActivated && 'rotate-180 transform')}/>
|
|
50
101
|
</button>
|
|
51
|
-
<div ref={contentRef} id={panelId} role="region" aria-labelledby={triggerId} hidden={!isActivated} style={{ maxHeight }} className=
|
|
52
|
-
{children}
|
|
102
|
+
<div ref={contentRef} id={panelId} role="region" aria-labelledby={triggerId} hidden={!isActivated} style={{ maxHeight }} className={clsx('text-black transition-all duration-300 ease-in-out dark:text-white', isSettled ? 'overflow-visible' : 'overflow-hidden')}>
|
|
103
|
+
<div>{children}</div>
|
|
53
104
|
</div>
|
|
54
105
|
</section>);
|
|
55
106
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionSection.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/AccordionSection.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAEL,WAAW,EACX,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,
|
|
1
|
+
{"version":3,"file":"AccordionSection.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/AccordionSection.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/02-molecules/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}
|
|
@@ -17,6 +17,8 @@ type AutocompleteInput = {
|
|
|
17
17
|
hideLabel?: boolean;
|
|
18
18
|
placeholder?: string;
|
|
19
19
|
toggleButtonLabel?: string;
|
|
20
|
+
/** Hides the dropdown-toggle chevron — use for search-as-you-type fields with no closed list to browse. */
|
|
21
|
+
hideToggleButton?: boolean;
|
|
20
22
|
noOptionsText?: string;
|
|
21
23
|
};
|
|
22
24
|
/**
|
|
@@ -46,12 +48,13 @@ type AutocompleteInput = {
|
|
|
46
48
|
* @param {boolean} [props.hideLabel] - Keeps the label for assistive technology only and drops the floating label. Use it when a heading outside the field already names it.
|
|
47
49
|
* @param {string} [props.placeholder] - Placeholder shown inside the field. Only rendered together with `hideLabel`.
|
|
48
50
|
* @param {string} [props.toggleButtonLabel] - Accessible name of the button that opens and closes the list.
|
|
51
|
+
* @param {boolean} [props.hideToggleButton] - Hides the dropdown-toggle chevron, for search-as-you-type fields with no closed list to browse.
|
|
49
52
|
* @param {string} [props.noOptionsText='No hay opciones'] - Text shown when the query matches nothing.
|
|
50
53
|
* @param {string} [props.error] - Error message displayed below the input.
|
|
51
54
|
* @param {string} [props.value=''] - The controlled value of the input.
|
|
52
55
|
*
|
|
53
56
|
* @returns {ReactNode} The rendered Autocomplete component.
|
|
54
57
|
*/
|
|
55
|
-
export declare function Autocomplete({ options, onSelect, onChange, onDebouncedChange, debounceDelay, onHandleKeyDown, disabled, label, helperText, error, value, isMutedWhenEmpty, hideLabel, placeholder, toggleButtonLabel, noOptionsText, }: Readonly<AutocompleteInput>): ReactNode;
|
|
58
|
+
export declare function Autocomplete({ options, onSelect, onChange, onDebouncedChange, debounceDelay, onHandleKeyDown, disabled, label, helperText, error, value, isMutedWhenEmpty, hideLabel, placeholder, toggleButtonLabel, hideToggleButton, noOptionsText, }: Readonly<AutocompleteInput>): ReactNode;
|
|
56
59
|
export {};
|
|
57
60
|
//# sourceMappingURL=Autocomplete.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI5C,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,iBAAiB,CAAC,EAAE,CAClB,KAAK,EAAE,MAAM,KACV,IAAI,GAAG,UAAU,EAAE,GAAG,OAAO,CAAC,IAAI,GAAG,UAAU,EAAE,CAAC,CAAC;IACxD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,UAAU,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2GAA2G;IAC3G,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,aAAmB,EACnB,eAAe,EACf,QAAQ,EACR,KAAK,EACL,UAAU,EACV,KAAK,EACL,KAAK,EACL,gBAAgB,EAChB,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,aAAiC,GAClC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,GAAG,SAAS,CA+SzC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
|
-
import { useEffect, useId, useMemo, useRef, useState, } from 'react';
|
|
3
|
+
import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
|
|
4
4
|
import { FaSortDown } from 'react-icons/fa';
|
|
5
5
|
import { Input } from '../../01-atoms';
|
|
6
6
|
import { debounce } from '../../../utils';
|
|
@@ -31,17 +31,21 @@ import { debounce } from '../../../utils';
|
|
|
31
31
|
* @param {boolean} [props.hideLabel] - Keeps the label for assistive technology only and drops the floating label. Use it when a heading outside the field already names it.
|
|
32
32
|
* @param {string} [props.placeholder] - Placeholder shown inside the field. Only rendered together with `hideLabel`.
|
|
33
33
|
* @param {string} [props.toggleButtonLabel] - Accessible name of the button that opens and closes the list.
|
|
34
|
+
* @param {boolean} [props.hideToggleButton] - Hides the dropdown-toggle chevron, for search-as-you-type fields with no closed list to browse.
|
|
34
35
|
* @param {string} [props.noOptionsText='No hay opciones'] - Text shown when the query matches nothing.
|
|
35
36
|
* @param {string} [props.error] - Error message displayed below the input.
|
|
36
37
|
* @param {string} [props.value=''] - The controlled value of the input.
|
|
37
38
|
*
|
|
38
39
|
* @returns {ReactNode} The rendered Autocomplete component.
|
|
39
40
|
*/
|
|
40
|
-
export function Autocomplete({ options, onSelect, onChange, onDebouncedChange, debounceDelay = 200, onHandleKeyDown, disabled, label, helperText, error, value, isMutedWhenEmpty, hideLabel, placeholder, toggleButtonLabel, noOptionsText = 'No hay opciones', }) {
|
|
41
|
+
export function Autocomplete({ options, onSelect, onChange, onDebouncedChange, debounceDelay = 200, onHandleKeyDown, disabled, label, helperText, error, value, isMutedWhenEmpty, hideLabel, placeholder, toggleButtonLabel, hideToggleButton, noOptionsText = 'No hay opciones', }) {
|
|
41
42
|
const [query, setQuery] = useState(value ?? '');
|
|
42
43
|
const [filteredOptions, setFilteredOptions] = useState([]);
|
|
43
44
|
const [isOpen, setIsOpen] = useState(false);
|
|
44
45
|
const [activeIndex, setActiveIndex] = useState(-1);
|
|
46
|
+
// True between a keystroke and its debounced remote result: the "no options" row
|
|
47
|
+
// must not flash while the consumer is still fetching.
|
|
48
|
+
const [isSearching, setIsSearching] = useState(false);
|
|
45
49
|
const listboxId = useId();
|
|
46
50
|
const containerRef = useRef(null);
|
|
47
51
|
const justSelectedRef = useRef(false);
|
|
@@ -51,17 +55,30 @@ export function Autocomplete({ options, onSelect, onChange, onDebouncedChange, d
|
|
|
51
55
|
const latestQueryRef = useRef(query);
|
|
52
56
|
const queryRef = useRef(query);
|
|
53
57
|
const isOpenRef = useRef(isOpen);
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
+
useLayoutEffect(() => {
|
|
59
|
+
onDebouncedChangeRef.current = onDebouncedChange;
|
|
60
|
+
queryRef.current = query;
|
|
61
|
+
isOpenRef.current = isOpen;
|
|
62
|
+
});
|
|
63
|
+
const debouncedCallback = useMemo(() =>
|
|
64
|
+
// eslint-disable-next-line react-hooks/refs -- the debounced callback reads the refs only when it runs, outside render
|
|
65
|
+
debounce(async (q) => {
|
|
58
66
|
if (!q.trim()) {
|
|
59
67
|
setFilteredOptions([]);
|
|
60
68
|
setIsOpen(false);
|
|
61
69
|
setActiveIndex(-1);
|
|
70
|
+
setIsSearching(false);
|
|
62
71
|
return;
|
|
63
72
|
}
|
|
64
|
-
|
|
73
|
+
let result;
|
|
74
|
+
try {
|
|
75
|
+
result = await onDebouncedChangeRef.current?.(q);
|
|
76
|
+
}
|
|
77
|
+
finally {
|
|
78
|
+
if (latestQueryRef.current === q) {
|
|
79
|
+
setIsSearching(false);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
65
82
|
if (latestQueryRef.current !== q) {
|
|
66
83
|
return;
|
|
67
84
|
}
|
|
@@ -88,6 +105,7 @@ export function Autocomplete({ options, onSelect, onChange, onDebouncedChange, d
|
|
|
88
105
|
}
|
|
89
106
|
setFilteredOptions(options.filter((option) => option.label.toLowerCase().includes(newQuery.toLowerCase())));
|
|
90
107
|
setIsOpen(true);
|
|
108
|
+
setIsSearching(Boolean(onDebouncedChangeRef.current));
|
|
91
109
|
onChange?.(newQuery);
|
|
92
110
|
debouncedCallback(newQuery);
|
|
93
111
|
};
|
|
@@ -218,14 +236,15 @@ export function Autocomplete({ options, onSelect, onChange, onDebouncedChange, d
|
|
|
218
236
|
'aria-activedescendant': isOpen && activeIndex >= 0
|
|
219
237
|
? `${listboxId}-option-${activeIndex}`
|
|
220
238
|
: undefined,
|
|
221
|
-
}} iconR={handleIcon()} helperText={helperText} error={error} isMutedWhenEmpty={isMutedWhenEmpty} hideLabel={hideLabel} placeholder={placeholder}/>
|
|
222
|
-
{!!isOpen &&
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
239
|
+
}} iconR={hideToggleButton ? undefined : handleIcon()} helperText={helperText} error={error} isMutedWhenEmpty={isMutedWhenEmpty} hideLabel={hideLabel} placeholder={placeholder}/>
|
|
240
|
+
{!!isOpen &&
|
|
241
|
+
!!(filteredOptions.length > 0 || (hasSearchQuery && !isSearching)) && (<ul id={listboxId} role="listbox" className="dark:bg-black-1 absolute z-40 flex max-h-28 w-full flex-col gap-y-1 overflow-y-auto rounded-md bg-white px-3 py-2 shadow-lg dark:text-white">
|
|
242
|
+
{filteredOptions?.length > 0 ? (filteredOptions.map((option, index) => (<li key={option.value} id={`${listboxId}-option-${index}`} role="option" aria-selected={activeIndex === index} className={clsx('hover:bg-gray-5 dark:hover:bg-gray-1 cursor-pointer rounded-sm px-1 py-0.5', activeIndex === index && 'bg-gray-5 dark:bg-gray-1')} onMouseEnter={() => setActiveIndex(index)} onMouseDown={(event) => event.preventDefault()} onClick={() => handleOptionClick(option)}>
|
|
243
|
+
{option.label}
|
|
244
|
+
</li>))) : hasSearchQuery && !isSearching ? (<li role="option" aria-disabled="true" className="autocomplete-option no-options">
|
|
245
|
+
{noOptionsText}
|
|
246
|
+
</li>) : null}
|
|
247
|
+
</ul>)}
|
|
229
248
|
</div>);
|
|
230
249
|
}
|
|
231
250
|
//# sourceMappingURL=Autocomplete.jsx.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Autocomplete.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAIL,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Autocomplete.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export type CardModifier = 'outline' | 'accent' | 'tinted';
|
|
3
|
+
export type CardPadding = 'lg' | 'md' | 'sm';
|
|
4
|
+
export type CardElement = 'div' | 'section' | 'article' | 'li' | 'aside';
|
|
5
|
+
type CardBaseProps = {
|
|
6
|
+
as?: CardElement;
|
|
7
|
+
modifier?: CardModifier;
|
|
8
|
+
padding?: CardPadding;
|
|
9
|
+
titleLevel?: 'h6' | 'h7';
|
|
10
|
+
/** Content at the right of the title: a badge, a menu, a secondary action. */
|
|
11
|
+
headerEnd?: ReactNode;
|
|
12
|
+
/** Zone at the bottom, separated by a border. */
|
|
13
|
+
footer?: ReactNode;
|
|
14
|
+
children?: ReactNode;
|
|
15
|
+
} & Omit<HTMLAttributes<HTMLElement>, 'title' | 'onClick'>;
|
|
16
|
+
type CardStaticProps = {
|
|
17
|
+
title?: ReactNode;
|
|
18
|
+
href?: never;
|
|
19
|
+
onClick?: never;
|
|
20
|
+
};
|
|
21
|
+
type CardLinkProps = {
|
|
22
|
+
title: ReactNode;
|
|
23
|
+
href: string;
|
|
24
|
+
onClick?: never;
|
|
25
|
+
};
|
|
26
|
+
type CardButtonProps = {
|
|
27
|
+
title: ReactNode;
|
|
28
|
+
onClick: () => void;
|
|
29
|
+
href?: never;
|
|
30
|
+
};
|
|
31
|
+
export type CardProps = CardBaseProps & (CardStaticProps | CardLinkProps | CardButtonProps);
|
|
32
|
+
/**
|
|
33
|
+
* Bordered container that groups content inside a page: a summary, a form
|
|
34
|
+
* section, an item of a list on mobile.
|
|
35
|
+
*
|
|
36
|
+
* With `href` or `onClick` the whole card navigates or acts. The title becomes
|
|
37
|
+
* the link or button and stretches over the card, so its text is the
|
|
38
|
+
* accessible name and a control inside `headerEnd` or `footer` keeps its own
|
|
39
|
+
* click.
|
|
40
|
+
*
|
|
41
|
+
* @component
|
|
42
|
+
* @example
|
|
43
|
+
* <Card title="Shipping address" headerEnd={<Badge>Default</Badge>}>
|
|
44
|
+
* <Paragraph>Av. Siempre Viva 742</Paragraph>
|
|
45
|
+
* </Card>
|
|
46
|
+
*
|
|
47
|
+
* @example
|
|
48
|
+
* // The whole card opens a detail, with its own action in the footer
|
|
49
|
+
* <Card
|
|
50
|
+
* as="li"
|
|
51
|
+
* title="Order 1043"
|
|
52
|
+
* onClick={() => openOrder('1043')}
|
|
53
|
+
* footer={<Button size="sm" modifier="second">Cancel</Button>}
|
|
54
|
+
* >
|
|
55
|
+
* 3 items · Delivered
|
|
56
|
+
* </Card>
|
|
57
|
+
*
|
|
58
|
+
* @param {Object} props - The properties of the Card component.
|
|
59
|
+
* @param {'div' | 'section' | 'article' | 'li' | 'aside'} [props.as='div'] - The HTML element to render.
|
|
60
|
+
* @param {'outline' | 'accent' | 'tinted'} [props.modifier='outline'] - `outline` has a gray border, `accent` a lavender border, `tinted` a light lavender background with a lavender border.
|
|
61
|
+
* @param {'lg' | 'md' | 'sm'} [props.padding='md'] - `lg` is 28px from `md` up and 20px below, for the main surface of a page such as a form; `md` is 20px; `sm` is 16px, for dense lists and mobile.
|
|
62
|
+
* @param {ReactNode} [props.title] - Card title. Required with `href` or `onClick`: it is the accessible name.
|
|
63
|
+
* @param {'h6' | 'h7'} [props.titleLevel='h7'] - Heading level of the title.
|
|
64
|
+
* @param {ReactNode} [props.headerEnd] - Content at the right of the title.
|
|
65
|
+
* @param {ReactNode} [props.footer] - Zone at the bottom separated by a border. The consumer decides if an action takes the full width.
|
|
66
|
+
* @param {string} [props.href] - The whole card navigates to this URL.
|
|
67
|
+
* @param {() => void} [props.onClick] - The whole card is a button; Enter and Space activate it.
|
|
68
|
+
* @param {ReactNode} [props.children] - Card content.
|
|
69
|
+
*
|
|
70
|
+
* @returns {ReactNode} The rendered Card component.
|
|
71
|
+
*/
|
|
72
|
+
export declare function Card({ as: Element, modifier, padding, title, titleLevel, headerEnd, footer, href, onClick, children, ...restProps }: CardProps): ReactNode;
|
|
73
|
+
export {};
|
|
74
|
+
//# sourceMappingURL=Card.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Card/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC3D,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7C,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,IAAI,GAAG,OAAO,CAAC;AAEzE,KAAK,aAAa,GAAG;IACnB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iDAAiD;IACjD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC,CAAC;AAE3D,KAAK,eAAe,GAAG;IAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAC5E,KAAK,aAAa,GAAG;IAAE,KAAK,EAAE,SAAS,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACzE,KAAK,eAAe,GAAG;IAAE,KAAK,EAAE,SAAS,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAE/E,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,CAAC,eAAe,GAAG,aAAa,GAAG,eAAe,CAAC,CAAC;AA8BtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,IAAI,CAAC,EACnB,EAAE,EAAE,OAAe,EACnB,QAAoB,EACpB,OAAc,EACd,KAAK,EACL,UAAiB,EACjB,SAAS,EACT,MAAM,EACN,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,SAAS,GAAG,SAAS,CA2DvB"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import clsx from 'clsx';
|
|
2
|
+
import Link from 'next/link';
|
|
3
|
+
import { Heading } from '../../01-atoms/Heading';
|
|
4
|
+
const styleMap = {
|
|
5
|
+
outline: 'border-gray-5 dark:border-gray-1 bg-white dark:bg-black',
|
|
6
|
+
accent: 'border-lavender dark:border-lavender-dark bg-white dark:bg-black',
|
|
7
|
+
tinted: 'border-lavender-1 bg-lavender-3 dark:border-lavender-dark-1 dark:bg-lavender-dark-1/40',
|
|
8
|
+
};
|
|
9
|
+
const interactiveMap = {
|
|
10
|
+
outline: 'hover:border-gray-2 dark:hover:border-gray-2',
|
|
11
|
+
accent: 'hover:bg-lavender-3 dark:hover:bg-lavender-dark-1/40',
|
|
12
|
+
tinted: 'hover:border-lavender dark:hover:border-lavender-dark',
|
|
13
|
+
};
|
|
14
|
+
const paddingMap = {
|
|
15
|
+
lg: {
|
|
16
|
+
box: 'p-5 md:p-7',
|
|
17
|
+
footer: '-mx-5 px-5 pt-4 md:-mx-7 md:px-7 md:pt-5',
|
|
18
|
+
},
|
|
19
|
+
md: { box: 'p-5', footer: '-mx-5 px-5 pt-4' },
|
|
20
|
+
sm: { box: 'p-4', footer: '-mx-4 px-4 pt-3' },
|
|
21
|
+
};
|
|
22
|
+
const triggerClassName = clsx('cursor-pointer text-left focus-visible:outline-none', 'after:absolute after:-inset-px after:rounded-lg', 'focus-visible:after:outline-lavender dark:focus-visible:after:outline-lavender-dark focus-visible:after:outline-2 focus-visible:after:outline-offset-2');
|
|
23
|
+
/**
|
|
24
|
+
* Bordered container that groups content inside a page: a summary, a form
|
|
25
|
+
* section, an item of a list on mobile.
|
|
26
|
+
*
|
|
27
|
+
* With `href` or `onClick` the whole card navigates or acts. The title becomes
|
|
28
|
+
* the link or button and stretches over the card, so its text is the
|
|
29
|
+
* accessible name and a control inside `headerEnd` or `footer` keeps its own
|
|
30
|
+
* click.
|
|
31
|
+
*
|
|
32
|
+
* @component
|
|
33
|
+
* @example
|
|
34
|
+
* <Card title="Shipping address" headerEnd={<Badge>Default</Badge>}>
|
|
35
|
+
* <Paragraph>Av. Siempre Viva 742</Paragraph>
|
|
36
|
+
* </Card>
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* // The whole card opens a detail, with its own action in the footer
|
|
40
|
+
* <Card
|
|
41
|
+
* as="li"
|
|
42
|
+
* title="Order 1043"
|
|
43
|
+
* onClick={() => openOrder('1043')}
|
|
44
|
+
* footer={<Button size="sm" modifier="second">Cancel</Button>}
|
|
45
|
+
* >
|
|
46
|
+
* 3 items · Delivered
|
|
47
|
+
* </Card>
|
|
48
|
+
*
|
|
49
|
+
* @param {Object} props - The properties of the Card component.
|
|
50
|
+
* @param {'div' | 'section' | 'article' | 'li' | 'aside'} [props.as='div'] - The HTML element to render.
|
|
51
|
+
* @param {'outline' | 'accent' | 'tinted'} [props.modifier='outline'] - `outline` has a gray border, `accent` a lavender border, `tinted` a light lavender background with a lavender border.
|
|
52
|
+
* @param {'lg' | 'md' | 'sm'} [props.padding='md'] - `lg` is 28px from `md` up and 20px below, for the main surface of a page such as a form; `md` is 20px; `sm` is 16px, for dense lists and mobile.
|
|
53
|
+
* @param {ReactNode} [props.title] - Card title. Required with `href` or `onClick`: it is the accessible name.
|
|
54
|
+
* @param {'h6' | 'h7'} [props.titleLevel='h7'] - Heading level of the title.
|
|
55
|
+
* @param {ReactNode} [props.headerEnd] - Content at the right of the title.
|
|
56
|
+
* @param {ReactNode} [props.footer] - Zone at the bottom separated by a border. The consumer decides if an action takes the full width.
|
|
57
|
+
* @param {string} [props.href] - The whole card navigates to this URL.
|
|
58
|
+
* @param {() => void} [props.onClick] - The whole card is a button; Enter and Space activate it.
|
|
59
|
+
* @param {ReactNode} [props.children] - Card content.
|
|
60
|
+
*
|
|
61
|
+
* @returns {ReactNode} The rendered Card component.
|
|
62
|
+
*/
|
|
63
|
+
export function Card({ as: Element = 'div', modifier = 'outline', padding = 'md', title, titleLevel = 'h7', headerEnd, footer, href, onClick, children, ...restProps }) {
|
|
64
|
+
const isInteractive = !!href || !!onClick;
|
|
65
|
+
const sizing = paddingMap[padding];
|
|
66
|
+
return (<Element {...restProps} data-orion-part="card" data-modifier={modifier} className={clsx('flex flex-col gap-3 rounded-lg border text-black transition-colors dark:text-white', isInteractive && 'relative', styleMap[modifier], isInteractive && interactiveMap[modifier], sizing.box, restProps.className)}>
|
|
67
|
+
{(!!title || !!headerEnd) && (<div className="flex items-start justify-between gap-3">
|
|
68
|
+
{!!title && (<Heading level={titleLevel} className="min-w-0">
|
|
69
|
+
{!!href && (<Link href={href} className={triggerClassName}>
|
|
70
|
+
{title}
|
|
71
|
+
</Link>)}
|
|
72
|
+
{!!onClick && (<button type="button" onClick={onClick} className={triggerClassName}>
|
|
73
|
+
{title}
|
|
74
|
+
</button>)}
|
|
75
|
+
{!isInteractive && title}
|
|
76
|
+
</Heading>)}
|
|
77
|
+
{!!headerEnd && (<div className="relative z-10 flex shrink-0 items-center gap-2">
|
|
78
|
+
{headerEnd}
|
|
79
|
+
</div>)}
|
|
80
|
+
</div>)}
|
|
81
|
+
{children}
|
|
82
|
+
{!!footer && (<div className={clsx('border-gray-5 dark:border-gray-1 relative z-10 mt-1 border-t', sizing.footer)}>
|
|
83
|
+
{footer}
|
|
84
|
+
</div>)}
|
|
85
|
+
</Element>);
|
|
86
|
+
}
|
|
87
|
+
//# sourceMappingURL=Card.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/Card/Card.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Card/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/02-molecules/Card/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
|
|
@@ -3,6 +3,18 @@ export type DatePickerQuickAction = {
|
|
|
3
3
|
readonly label: string;
|
|
4
4
|
readonly value: string;
|
|
5
5
|
};
|
|
6
|
+
export type DatePickerTime = {
|
|
7
|
+
readonly label: string;
|
|
8
|
+
/** `HH:mm` in 24 h, or `''` without a time. */
|
|
9
|
+
readonly value: string;
|
|
10
|
+
readonly onChange: (value: string) => void;
|
|
11
|
+
readonly hourLabel: string;
|
|
12
|
+
readonly minuteLabel: string;
|
|
13
|
+
readonly incrementLabel: string;
|
|
14
|
+
readonly decrementLabel: string;
|
|
15
|
+
readonly clearLabel?: string;
|
|
16
|
+
readonly doneLabel: string;
|
|
17
|
+
};
|
|
6
18
|
export type DatePickerProps = {
|
|
7
19
|
readonly value?: string;
|
|
8
20
|
readonly onChange?: (iso: string) => void;
|
|
@@ -39,11 +51,18 @@ export type DatePickerProps = {
|
|
|
39
51
|
readonly error?: string;
|
|
40
52
|
readonly disabled?: boolean;
|
|
41
53
|
readonly placeholder?: string;
|
|
42
|
-
|
|
54
|
+
readonly time?: DatePickerTime;
|
|
55
|
+
/** Id of the trigger button. The wrapper gets none, so the id stays unique in the page. */
|
|
56
|
+
readonly id?: string;
|
|
57
|
+
} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'id'>;
|
|
43
58
|
/**
|
|
44
59
|
* DatePicker renders a pill-shaped date field with a calendar popover.
|
|
45
60
|
* All visible labels are provided by the consumer.
|
|
46
61
|
*
|
|
62
|
+
* With `time`, picking a day keeps the calendar open and shows the hour and
|
|
63
|
+
* the minute under it, with a button to remove the time and one to finish.
|
|
64
|
+
* The field then shows the date and the time joined by "·".
|
|
65
|
+
*
|
|
47
66
|
* @component
|
|
48
67
|
* @example
|
|
49
68
|
* <DatePicker
|
|
@@ -57,6 +76,23 @@ export type DatePickerProps = {
|
|
|
57
76
|
* quickActions={[{ label: 'Today', value: '2026-09-14' }]}
|
|
58
77
|
* />
|
|
59
78
|
*
|
|
79
|
+
* @example
|
|
80
|
+
* // Date and an optional time
|
|
81
|
+
* <DatePicker
|
|
82
|
+
* {...dateProps}
|
|
83
|
+
* time={{
|
|
84
|
+
* label: 'Time',
|
|
85
|
+
* value: time,
|
|
86
|
+
* onChange: setTime,
|
|
87
|
+
* hourLabel: 'Hour',
|
|
88
|
+
* minuteLabel: 'Minute',
|
|
89
|
+
* incrementLabel: 'Increase',
|
|
90
|
+
* decrementLabel: 'Decrease',
|
|
91
|
+
* clearLabel: 'Remove time',
|
|
92
|
+
* doneLabel: 'Done',
|
|
93
|
+
* }}
|
|
94
|
+
* />
|
|
95
|
+
*
|
|
60
96
|
* @param {DatePickerProps} props - The properties of the DatePicker component.
|
|
61
97
|
* @param {string} [props.value] - Controlled ISO date `YYYY-MM-DD`.
|
|
62
98
|
* @param {(iso: string) => void} [props.onChange] - Fired when a date is selected.
|
|
@@ -67,13 +103,15 @@ export type DatePickerProps = {
|
|
|
67
103
|
* @param {string} props.prevMonthLabel - Accessible label for previous month.
|
|
68
104
|
* @param {string} props.nextMonthLabel - Accessible label for next month.
|
|
69
105
|
* @param {readonly DatePickerQuickAction[]} [props.quickActions] - Shortcut buttons above the calendar.
|
|
70
|
-
* @param {string} [props.label] -
|
|
106
|
+
* @param {string} [props.label] - Label in the notch of the border, like `Input` and `Select`.
|
|
71
107
|
* @param {string} [props.helperText] - Helper text below the field.
|
|
72
108
|
* @param {string} [props.error] - Error message below the field.
|
|
73
109
|
* @param {boolean} [props.disabled] - Disables the control.
|
|
74
110
|
* @param {string} [props.placeholder] - Placeholder when no value is set.
|
|
111
|
+
* @param {string} [props.id] - Id of the trigger button; the label and the description hang from it.
|
|
112
|
+
* @param {DatePickerTime} [props.time] - Optional time of day. `value` is `HH:mm` in 24 h, or `''` without a time; `onChange` receives the same format. The labels name the group, each part and its step buttons; `clearLabel` adds the button that removes the time.
|
|
75
113
|
*
|
|
76
114
|
* @returns {ReactNode} The rendered DatePicker component.
|
|
77
115
|
*/
|
|
78
|
-
export declare function DatePicker({ value, onChange, minDate, maxDate, monthLabels, weekdayLabels, prevMonthLabel, nextMonthLabel, quickActions, label, helperText, error, disabled, placeholder, ...restProps }: DatePickerProps): ReactNode;
|
|
116
|
+
export declare function DatePicker({ value, onChange, minDate, maxDate, monthLabels, weekdayLabels, prevMonthLabel, nextMonthLabel, quickActions, label, helperText, error, disabled, placeholder, time, id: idProp, ...restProps }: DatePickerProps): ReactNode;
|
|
79
117
|
//# sourceMappingURL=DatePicker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,
|
|
1
|
+
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAaf,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,+CAA+C;IAC/C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,WAAW,EAAE,SAAS;QAC7B,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;KACP,CAAC;IACF,QAAQ,CAAC,aAAa,EAAE,SAAS;QAC/B,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;QACN,MAAM;KACP,CAAC;IACF,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,qBAAqB,EAAE,CAAC;IACzD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAC/B,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC,CAAC;AAuS5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,WAAW,EACX,aAAa,EACb,cAAc,EACd,cAAc,EACd,YAAY,EACZ,KAAK,EACL,UAAU,EACV,KAAK,EACL,QAAgB,EAChB,WAAW,EACX,IAAI,EACJ,EAAE,EAAE,MAAM,EACV,GAAG,SAAS,EACb,EAAE,eAAe,GAAG,SAAS,CA8Q7B"}
|