@react-fabric/core 1.0.0-beta.9 → 1.0.1
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/{src/components/actionLabel/ActionLabel.module.css → css/components/_actionLabel.css} +4 -4
- package/{src/overlays/alert/Alert.module.css → css/components/_alert.css} +3 -3
- package/css/components/_animations.css +52 -0
- package/css/components/_avatar.css +89 -0
- package/css/components/_button.css +218 -0
- package/css/components/_buttonGroup.css +62 -0
- package/css/components/_callout.css +32 -0
- package/css/components/_card.css +167 -0
- package/css/components/_chip.css +125 -0
- package/css/components/_collapsable.css +32 -0
- package/{src/overlays/message/Message.module.css → css/components/_divider.css} +11 -10
- package/{src/components/dropdown/Dropdown.module.css → css/components/_dropdown.css} +3 -2
- package/{src/overlays/flyout/Flyout.module.css → css/components/_flyout.css} +15 -9
- package/css/components/_media.css +102 -0
- package/{src/components/menu/Menu.module.css → css/components/_menu.css} +21 -20
- package/{src/components/meter/Meter.module.css → css/components/_meter.css} +15 -20
- package/{src/overlays/modal/Modal.module.css → css/components/_modal.css} +9 -9
- package/{src/components/panel/Panel.module.css → css/components/_panel.css} +19 -19
- package/{src/components/progress/Progress.module.css → css/components/_progress.css} +7 -10
- package/css/components/_sonner.css +431 -0
- package/{src/components/tabpanel/TabPanel.module.css → css/components/_tabPanel.css} +125 -85
- package/css/components/_titlebar.css +48 -0
- package/css/components/index.css +47 -0
- package/css/core/_aside.css +176 -0
- package/css/core/_content.css +31 -0
- package/css/core/_errorboundary.css +55 -0
- package/css/core/_responsive.css +45 -0
- package/css/core/_typography.css +69 -0
- package/css/core/_viewport.css +33 -0
- package/{src/hooks/useClientService.tsx → css/core/index.css} +7 -7
- package/css/reset/_gradients.css +36 -33
- package/css/reset/_reset.css +206 -300
- package/css/reset/_text.css +31 -61
- package/css/reset/_theme.css +467 -81
- package/css/reset/index.css +23 -21
- package/css/styles.css +30 -23
- package/css/theme/_colors.css +445 -0
- package/css/theme/_utilities.css +528 -0
- package/css/theme/_variants.css +128 -0
- package/css/theme/index.css +55 -0
- package/dist/cjs/components/actionLabel/ActionLabel.js +25 -12
- package/dist/cjs/{overlays → components}/alert/Alert.js +76 -53
- package/dist/cjs/components/animations/Indicator.js +72 -0
- package/dist/cjs/components/animations/Loader.js +77 -0
- package/dist/cjs/components/animations/LoadingBars.js +37 -0
- package/dist/cjs/components/animations/LoadingLine.js +59 -0
- package/dist/cjs/components/animations/LoadingSpinner.js +37 -0
- package/dist/cjs/components/animations/Skeleton.js +88 -0
- package/dist/cjs/components/avatar/Avatar.js +41 -20
- package/dist/cjs/components/avatar/AvatarGroup.js +37 -16
- package/dist/cjs/components/badge/Badge.js +90 -68
- package/dist/cjs/components/button/Button.js +198 -136
- package/dist/cjs/components/button/ButtonGroup.js +86 -21
- package/dist/cjs/components/button/ConfirmButton.js +55 -41
- package/dist/cjs/components/button/ToggleButtonGroup.js +84 -32
- package/dist/cjs/components/callout/Callout.js +56 -25
- package/dist/cjs/components/card/Card.js +90 -42
- package/dist/cjs/components/card/CardCover.js +38 -27
- package/dist/cjs/components/card/FlipContent.js +47 -0
- package/dist/cjs/components/chip/Chip.js +80 -37
- package/dist/cjs/components/collapsable/Collapsable.js +62 -31
- package/dist/cjs/components/divider/Divider.js +58 -24
- package/dist/cjs/components/dropdown/Dropdown.js +92 -45
- package/dist/cjs/components/dropdown/DropdownTool.js +6 -7
- package/dist/cjs/components/effect/GlassEffect.js +259 -0
- package/dist/cjs/components/effect/MatteEffect.js +127 -0
- package/dist/cjs/components/effect/StyleEffect.js +43 -0
- package/dist/cjs/components/empty/EmptyContent.js +37 -49
- package/dist/cjs/components/flyout/Flyout.js +170 -0
- package/dist/cjs/components/hotkey/HotKey.js +42 -0
- package/dist/cjs/components/icon/Icon.js +81 -80
- package/dist/cjs/components/media/Media.js +154 -77
- package/dist/cjs/components/menu/ContextMenu.js +45 -20
- package/dist/cjs/components/menu/Menu.js +98 -38
- package/dist/cjs/components/menu/MenuItem.js +102 -74
- package/dist/cjs/components/meter/Meter.js +35 -12
- package/dist/cjs/components/modal/Modal.js +152 -0
- package/dist/cjs/components/navigator/Navigator.js +81 -36
- package/dist/cjs/components/panel/Panel.js +115 -60
- package/dist/cjs/components/panel/PanelGroup.js +42 -16
- package/dist/cjs/components/panel/PanelStack.js +47 -16
- package/dist/cjs/components/pillbox/Pillbox.js +118 -0
- package/dist/cjs/components/progress/ProgressBar.js +30 -14
- package/dist/cjs/components/progress/ProgressCircle.js +27 -11
- package/dist/cjs/components/tabpanel/Tab.js +53 -37
- package/dist/cjs/components/tabpanel/TabPanel.js +74 -28
- package/dist/cjs/components/titlebar/Titlebar.js +52 -0
- package/dist/cjs/components/tooltip/Tooltip.js +180 -0
- package/dist/cjs/context/Global.js +159 -80
- package/dist/cjs/context/ModalManager.js +60 -0
- package/dist/cjs/context/context.js +43 -0
- package/dist/cjs/core/areaToggle/AreaToggle.js +41 -0
- package/dist/cjs/core/aside/Aside.js +178 -83
- package/dist/cjs/core/boundary/ErrorBoundary.js +37 -34
- package/dist/cjs/core/boundary/ErrorIcon.js +32 -19
- package/dist/cjs/core/content/Content.js +26 -37
- package/dist/cjs/core/headfoot/HeadFoot.js +133 -35
- package/dist/cjs/core/layout/Layout.js +28 -0
- package/dist/cjs/core/responsive/Responsive.js +62 -26
- package/dist/cjs/core/theme/ThemeProvider.js +35 -41
- package/dist/cjs/core/viewport/Viewport.js +26 -22
- package/dist/cjs/hooks/useClientService.js +39 -18
- package/dist/cjs/hooks/useContextMenu.js +103 -0
- package/dist/cjs/hooks/useControlledValue.js +13 -7
- package/dist/cjs/hooks/useDebounce.js +37 -21
- package/dist/cjs/hooks/useEffectDebugger.js +79 -60
- package/dist/cjs/hooks/useIsDark.js +34 -26
- package/dist/cjs/hooks/useIsRtl.js +13 -3
- package/dist/cjs/hooks/useNavigator.js +12 -9
- package/dist/cjs/hooks/useNotificationService.js +199 -0
- package/dist/cjs/hooks/useOverlayService.js +82 -41
- package/dist/cjs/hooks/usePropState.js +41 -0
- package/dist/cjs/hooks/usePropToggle.js +32 -26
- package/dist/cjs/hooks/useResize.js +47 -38
- package/dist/cjs/hooks/useResizeObserver.js +26 -7
- package/dist/cjs/hooks/useStorage.js +29 -16
- package/dist/cjs/i18n/index.js +25 -23
- package/dist/cjs/index.js +142 -94
- package/dist/cjs/typography/Abbr.js +43 -20
- package/dist/cjs/typography/Anchor.js +39 -0
- package/dist/cjs/typography/Copy.js +28 -28
- package/dist/cjs/typography/Kbd.js +43 -0
- package/dist/cjs/typography/Mark.js +34 -17
- package/dist/cjs/typography/Text.js +36 -54
- package/dist/cjs/typography/Title.js +17 -40
- package/dist/cjs/utils/calculateDimensions.js +38 -23
- package/dist/cjs/utils/cloneElement.js +64 -0
- package/dist/cjs/{core/section/Section.js → utils/getBadgeProps.js} +25 -21
- package/dist/cjs/utils/getColor.js +42 -36
- package/dist/cjs/utils/getIconProps.js +63 -0
- package/dist/cjs/utils/getTooltipProps.js +66 -0
- package/dist/cjs/utils/nodeCheck.js +4 -4
- package/dist/esm/components/actionLabel/ActionLabel.js +25 -12
- package/dist/esm/{overlays → components}/alert/Alert.js +73 -50
- package/dist/esm/components/animations/Indicator.js +72 -0
- package/dist/esm/components/animations/Loader.js +77 -0
- package/dist/esm/components/animations/LoadingBars.js +37 -0
- package/dist/esm/components/animations/LoadingLine.js +59 -0
- package/dist/esm/components/animations/LoadingSpinner.js +37 -0
- package/dist/esm/components/animations/Skeleton.js +88 -0
- package/dist/esm/components/avatar/Avatar.js +42 -21
- package/dist/esm/components/avatar/AvatarGroup.js +37 -16
- package/dist/esm/components/badge/Badge.js +93 -70
- package/dist/esm/components/button/Button.js +199 -137
- package/dist/esm/components/button/ButtonGroup.js +87 -22
- package/dist/esm/components/button/ConfirmButton.js +58 -44
- package/dist/esm/components/button/ToggleButtonGroup.js +86 -34
- package/dist/esm/components/callout/Callout.js +56 -25
- package/dist/esm/components/card/Card.js +92 -44
- package/dist/esm/components/card/CardCover.js +38 -27
- package/dist/esm/components/card/FlipContent.js +47 -0
- package/dist/esm/components/chip/Chip.js +81 -38
- package/dist/esm/components/collapsable/Collapsable.js +63 -32
- package/dist/esm/components/divider/Divider.js +59 -25
- package/dist/esm/components/dropdown/Dropdown.js +95 -48
- package/dist/esm/components/dropdown/DropdownTool.js +6 -7
- package/dist/esm/components/effect/GlassEffect.js +259 -0
- package/dist/esm/components/effect/MatteEffect.js +127 -0
- package/dist/esm/components/effect/StyleEffect.js +43 -0
- package/dist/esm/components/empty/EmptyContent.js +38 -50
- package/dist/esm/components/flyout/Flyout.js +170 -0
- package/dist/esm/components/hotkey/HotKey.js +42 -0
- package/dist/esm/components/icon/Icon.js +83 -82
- package/dist/esm/components/media/Media.js +156 -79
- package/dist/esm/components/menu/ContextMenu.js +46 -21
- package/dist/esm/components/menu/Menu.js +101 -41
- package/dist/esm/components/menu/MenuItem.js +98 -70
- package/dist/esm/components/meter/Meter.js +36 -13
- package/dist/esm/components/modal/Modal.js +152 -0
- package/dist/esm/components/navigator/Navigator.js +81 -36
- package/dist/esm/components/panel/Panel.js +117 -62
- package/dist/esm/components/panel/PanelGroup.js +43 -17
- package/dist/esm/components/panel/PanelStack.js +48 -17
- package/dist/esm/components/pillbox/Pillbox.js +118 -0
- package/dist/esm/components/progress/ProgressBar.js +31 -15
- package/dist/esm/components/progress/ProgressCircle.js +28 -12
- package/dist/esm/components/tabpanel/Tab.js +54 -38
- package/dist/esm/components/tabpanel/TabPanel.js +75 -29
- package/dist/esm/components/titlebar/Titlebar.js +52 -0
- package/dist/esm/components/tooltip/Tooltip.js +180 -0
- package/dist/esm/context/Global.js +161 -78
- package/dist/esm/context/ModalManager.js +60 -0
- package/dist/esm/context/context.js +40 -0
- package/dist/esm/core/areaToggle/AreaToggle.js +41 -0
- package/dist/esm/core/aside/Aside.js +179 -84
- package/dist/esm/core/boundary/ErrorBoundary.js +38 -35
- package/dist/esm/core/boundary/ErrorIcon.js +32 -19
- package/dist/esm/core/content/Content.js +26 -37
- package/dist/esm/core/headfoot/HeadFoot.js +134 -36
- package/dist/esm/core/layout/Layout.js +28 -0
- package/dist/esm/core/responsive/Responsive.js +62 -26
- package/dist/esm/core/theme/ThemeProvider.js +36 -42
- package/dist/esm/core/viewport/Viewport.js +26 -22
- package/dist/esm/hooks/useClientService.js +39 -18
- package/dist/esm/hooks/useContextMenu.js +103 -0
- package/dist/esm/hooks/useControlledValue.js +14 -8
- package/dist/esm/hooks/useDebounce.js +37 -21
- package/dist/esm/hooks/useEffectDebugger.js +81 -62
- package/dist/esm/hooks/useIsDark.js +34 -26
- package/dist/esm/hooks/useIsRtl.js +13 -3
- package/dist/esm/hooks/useNavigator.js +13 -10
- package/dist/esm/hooks/useNotificationService.js +199 -0
- package/dist/esm/hooks/useOverlayService.js +83 -42
- package/dist/esm/hooks/usePropState.js +40 -0
- package/dist/esm/hooks/usePropToggle.js +33 -27
- package/dist/esm/hooks/useResize.js +48 -39
- package/dist/esm/hooks/useResizeObserver.js +27 -8
- package/dist/esm/hooks/useStorage.js +30 -17
- package/dist/esm/i18n/index.js +23 -21
- package/dist/esm/index.js +87 -44
- package/dist/esm/typography/Abbr.js +45 -22
- package/dist/esm/typography/Anchor.js +39 -0
- package/dist/esm/typography/Copy.js +28 -28
- package/dist/esm/typography/Kbd.js +43 -0
- package/dist/esm/typography/Mark.js +35 -18
- package/dist/esm/typography/Text.js +39 -57
- package/dist/esm/typography/Title.js +17 -40
- package/dist/esm/utils/calculateDimensions.js +38 -23
- package/dist/esm/utils/cloneElement.js +64 -0
- package/dist/esm/{core/section/Section.js → utils/getBadgeProps.js} +25 -21
- package/dist/esm/utils/getColor.js +43 -34
- package/dist/esm/utils/getIconProps.js +63 -0
- package/dist/esm/utils/getTooltipProps.js +66 -0
- package/dist/esm/utils/nodeCheck.js +4 -4
- package/dist/types/components/actionLabel/ActionLabel.d.ts +20 -7
- package/dist/types/components/alert/Alert.d.ts +74 -0
- package/dist/types/components/animations/Indicator.d.ts +57 -0
- package/dist/types/components/animations/Loader.d.ts +65 -0
- package/dist/types/components/animations/LoadingBars.d.ts +61 -0
- package/dist/types/components/animations/LoadingLine.d.ts +43 -0
- package/dist/types/components/animations/LoadingSpinner.d.ts +61 -0
- package/dist/types/components/animations/Skeleton.d.ts +61 -0
- package/dist/types/components/avatar/Avatar.d.ts +70 -19
- package/dist/types/components/avatar/AvatarGroup.d.ts +51 -14
- package/dist/types/components/badge/Badge.d.ts +64 -14
- package/dist/types/components/button/Button.d.ts +72 -55
- package/dist/types/components/button/ButtonGroup.d.ts +86 -24
- package/dist/types/components/button/ConfirmButton.d.ts +21 -7
- package/dist/types/components/button/ToggleButtonGroup.d.ts +88 -44
- package/dist/types/components/callout/Callout.d.ts +58 -7
- package/dist/types/components/card/Card.d.ts +66 -25
- package/dist/types/components/card/CardCover.d.ts +52 -7
- package/dist/types/components/card/FlipContent.d.ts +50 -0
- package/dist/types/components/chip/Chip.d.ts +72 -20
- package/dist/types/components/collapsable/Collapsable.d.ts +55 -15
- package/dist/types/components/divider/Divider.d.ts +25 -8
- package/dist/types/components/dropdown/Dropdown.d.ts +42 -9
- package/dist/types/components/dropdown/DropdownTool.d.ts +22 -4
- package/dist/types/components/effect/GlassEffect.d.ts +5 -0
- package/dist/types/components/effect/MatteEffect.d.ts +40 -0
- package/dist/types/components/effect/StyleEffect.d.ts +27 -0
- package/dist/types/components/empty/EmptyContent.d.ts +53 -9
- package/dist/types/components/flyout/Flyout.d.ts +60 -0
- package/dist/types/components/hotkey/HotKey.d.ts +41 -0
- package/dist/types/components/icon/Icon.d.ts +74 -24
- package/dist/types/components/media/Media.d.ts +72 -4
- package/dist/types/components/menu/ContextMenu.d.ts +22 -5
- package/dist/types/components/menu/Menu.d.ts +26 -2
- package/dist/types/components/menu/MenuItem.d.ts +19 -4
- package/dist/types/components/menu/types.d.ts +23 -14
- package/dist/types/components/meter/Meter.d.ts +23 -3
- package/dist/types/components/modal/Modal.d.ts +52 -0
- package/dist/types/components/navigator/Navigator.d.ts +30 -4
- package/dist/types/components/panel/Panel.d.ts +43 -23
- package/dist/types/components/panel/PanelGroup.d.ts +22 -3
- package/dist/types/components/panel/PanelStack.d.ts +28 -2
- package/dist/types/components/pillbox/Pillbox.d.ts +95 -0
- package/dist/types/components/progress/ProgressBar.d.ts +19 -4
- package/dist/types/components/progress/ProgressCircle.d.ts +18 -4
- package/dist/types/components/tabpanel/Tab.d.ts +42 -10
- package/dist/types/components/tabpanel/TabPanel.d.ts +47 -7
- package/dist/types/components/titlebar/Titlebar.d.ts +54 -0
- package/dist/types/components/tooltip/Tooltip.d.ts +76 -0
- package/dist/types/context/Global.d.ts +39 -69
- package/dist/types/context/ModalManager.d.ts +30 -0
- package/dist/types/context/context.d.ts +107 -0
- package/dist/types/core/areaToggle/AreaToggle.d.ts +33 -0
- package/dist/types/core/aside/Aside.d.ts +75 -20
- package/dist/types/core/boundary/ErrorBoundary.d.ts +43 -4
- package/dist/types/core/boundary/ErrorIcon.d.ts +38 -1
- package/dist/types/core/content/Content.d.ts +38 -6
- package/dist/types/core/headfoot/HeadFoot.d.ts +48 -14
- package/dist/types/core/layout/Layout.d.ts +38 -0
- package/dist/types/core/responsive/Responsive.d.ts +45 -15
- package/dist/types/core/theme/ThemeProvider.d.ts +35 -11
- package/dist/types/core/viewport/Viewport.d.ts +27 -3
- package/dist/types/hooks/useClientService.d.ts +43 -1
- package/dist/types/hooks/useContextMenu.d.ts +10 -0
- package/dist/types/hooks/useControlledValue.d.ts +28 -4
- package/dist/types/hooks/useDebounce.d.ts +38 -2
- package/dist/types/hooks/useEffectDebugger.d.ts +73 -4
- package/dist/types/hooks/useIsDark.d.ts +6 -0
- package/dist/types/hooks/useIsRtl.d.ts +35 -1
- package/dist/types/hooks/useNavigator.d.ts +37 -2
- package/dist/types/hooks/useNotificationService.d.ts +60 -0
- package/dist/types/hooks/useOverlayService.d.ts +28 -8
- package/dist/types/hooks/usePropState.d.ts +26 -0
- package/dist/types/hooks/usePropToggle.d.ts +41 -7
- package/dist/types/hooks/useResize.d.ts +46 -4
- package/dist/types/hooks/useResizeObserver.d.ts +45 -3
- package/dist/types/hooks/useStorage.d.ts +32 -2
- package/dist/types/i18n/index.d.ts +27 -3
- package/dist/types/index.d.ts +106 -18
- package/dist/types/types/colors.d.ts +29 -0
- package/dist/types/types/index.d.ts +216 -76
- package/dist/types/typography/Abbr.d.ts +51 -6
- package/dist/types/typography/Anchor.d.ts +41 -0
- package/dist/types/typography/Copy.d.ts +36 -2
- package/dist/types/typography/Kbd.d.ts +40 -0
- package/dist/types/typography/Mark.d.ts +44 -7
- package/dist/types/typography/Text.d.ts +40 -24
- package/dist/types/typography/Title.d.ts +37 -26
- package/dist/types/typography/types.d.ts +32 -0
- package/dist/types/utils/calculateDimensions.d.ts +50 -6
- package/dist/types/utils/cloneElement.d.ts +41 -0
- package/dist/types/utils/getBadgeProps.d.ts +16 -0
- package/dist/types/utils/getColor.d.ts +43 -4
- package/dist/types/utils/getIconProps.d.ts +45 -0
- package/dist/types/utils/getTooltipProps.d.ts +47 -0
- package/dist/types/utils/index.d.ts +28 -0
- package/dist/types/utils/nodeCheck.d.ts +1 -2
- package/package.json +29 -21
- package/src/components/actionLabel/ActionLabel.tsx +28 -39
- package/src/components/alert/Alert.tsx +261 -0
- package/src/components/animations/Indicator.tsx +76 -0
- package/src/components/animations/Loader.tsx +89 -0
- package/src/components/animations/LoadingBars.tsx +70 -0
- package/src/components/animations/LoadingLine.tsx +51 -0
- package/src/components/animations/LoadingSpinner.tsx +70 -0
- package/src/components/animations/Skeleton.tsx +100 -0
- package/src/components/avatar/Avatar.tsx +89 -70
- package/src/components/avatar/AvatarGroup.tsx +65 -74
- package/src/components/badge/Badge.tsx +141 -108
- package/src/components/button/Button.tsx +223 -238
- package/src/components/button/ButtonGroup.tsx +117 -77
- package/src/components/button/ConfirmButton.tsx +60 -90
- package/src/components/button/ToggleButtonGroup.tsx +134 -120
- package/src/components/callout/Callout.tsx +81 -59
- package/src/components/card/Card.tsx +131 -113
- package/src/components/card/CardCover.tsx +61 -61
- package/src/components/card/FlipContent.tsx +78 -0
- package/src/components/chip/Chip.tsx +139 -99
- package/src/components/collapsable/Collapsable.tsx +79 -77
- package/src/components/divider/Divider.tsx +74 -53
- package/src/components/dropdown/Dropdown.tsx +109 -106
- package/src/components/dropdown/DropdownTool.tsx +29 -12
- package/src/components/effect/GlassEffect.tsx +221 -0
- package/src/components/effect/MatteEffect.tsx +99 -0
- package/src/components/effect/StyleEffect.tsx +36 -0
- package/src/components/empty/EmptyContent.tsx +60 -99
- package/src/components/flyout/Flyout.tsx +257 -0
- package/src/components/hotkey/HotKey.tsx +57 -0
- package/src/components/icon/Icon.tsx +131 -130
- package/src/components/media/Media.tsx +184 -154
- package/src/components/menu/ContextMenu.tsx +56 -39
- package/src/components/menu/Menu.tsx +121 -84
- package/src/components/menu/MenuItem.tsx +87 -69
- package/src/components/menu/types.ts +23 -28
- package/src/components/meter/Meter.tsx +34 -17
- package/src/components/modal/Modal.tsx +226 -0
- package/src/components/navigator/Navigator.tsx +93 -38
- package/src/components/panel/Panel.tsx +123 -131
- package/src/components/panel/PanelGroup.tsx +49 -43
- package/src/components/panel/PanelStack.tsx +63 -62
- package/src/components/pillbox/Pillbox.tsx +208 -0
- package/src/components/progress/ProgressBar.tsx +33 -33
- package/src/components/progress/ProgressCircle.tsx +29 -37
- package/src/components/tabpanel/Tab.tsx +84 -73
- package/src/components/tabpanel/TabPanel.tsx +102 -51
- package/src/components/titlebar/Titlebar.tsx +115 -0
- package/src/components/tooltip/Tooltip.tsx +255 -0
- package/src/context/Global.tsx +148 -148
- package/src/context/ModalManager.tsx +68 -0
- package/src/context/context.ts +111 -0
- package/src/core/areaToggle/AreaToggle.tsx +45 -0
- package/src/core/aside/Aside.tsx +200 -155
- package/src/core/boundary/ErrorBoundary.tsx +50 -68
- package/src/core/boundary/ErrorIcon.tsx +34 -32
- package/src/core/content/Content.tsx +41 -50
- package/src/core/headfoot/HeadFoot.tsx +162 -81
- package/src/core/layout/Layout.tsx +54 -0
- package/src/core/responsive/Responsive.tsx +91 -98
- package/src/core/theme/ThemeProvider.tsx +45 -56
- package/src/core/viewport/Viewport.tsx +25 -27
- package/src/hooks/useClientService.ts +47 -0
- package/src/hooks/useContextMenu.tsx +131 -0
- package/src/hooks/useControlledValue.ts +47 -0
- package/src/hooks/useDebounce.ts +41 -24
- package/src/hooks/useEffectDebugger.ts +105 -94
- package/src/hooks/useIsDark.ts +10 -24
- package/src/hooks/useIsRtl.ts +32 -20
- package/src/hooks/useNavigator.tsx +41 -26
- package/src/hooks/useNotificationService.tsx +239 -0
- package/src/hooks/useOverlayService.tsx +67 -20
- package/src/hooks/usePropState.ts +52 -0
- package/src/hooks/usePropToggle.ts +54 -47
- package/src/hooks/useResize.ts +69 -45
- package/src/hooks/useResizeObserver.ts +59 -34
- package/src/hooks/useStorage.ts +40 -48
- package/src/i18n/index.ts +24 -25
- package/src/index.ts +115 -44
- package/src/types/colors.ts +49 -0
- package/src/types/global.d.ts +40 -17
- package/src/types/index.ts +243 -155
- package/src/typography/Abbr.tsx +62 -59
- package/src/typography/Anchor.tsx +63 -0
- package/src/typography/Copy.tsx +39 -29
- package/src/typography/Kbd.tsx +50 -0
- package/src/typography/Mark.tsx +56 -51
- package/src/typography/Text.tsx +57 -128
- package/src/typography/Title.tsx +36 -108
- package/src/typography/types.ts +27 -17
- package/src/utils/calculateDimensions.ts +50 -40
- package/src/utils/cloneElement.ts +61 -0
- package/src/{core/content/Content.module.css → utils/getBadgeProps.ts} +20 -15
- package/src/utils/getColor.ts +42 -36
- package/src/utils/getIconProps.ts +58 -0
- package/src/utils/getTooltipProps.ts +59 -0
- package/src/utils/index.ts +23 -17
- package/src/utils/nodeCheck.ts +4 -8
- package/css/flags.rect.css +0 -1607
- package/css/flags.wavy.css +0 -1606
- package/css/index.js +0 -250
- package/css/tailwind/colors.ts +0 -158
- package/dist/cjs/components/actionLabel/ActionLabel.module.css +0 -1
- package/dist/cjs/components/animations/Animations.js +0 -142
- package/dist/cjs/components/animations/Animations.module.css +0 -1
- package/dist/cjs/components/avatar/Avatar.module.css +0 -1
- package/dist/cjs/components/badge/Badge.module.css +0 -1
- package/dist/cjs/components/breadcrumbs/Breadcrumbs.js +0 -71
- package/dist/cjs/components/breadcrumbs/Breadcrumbs.module.css +0 -1
- package/dist/cjs/components/button/Button.module.css +0 -1
- package/dist/cjs/components/card/Card.module.css +0 -1
- package/dist/cjs/components/chip/Chip.module.css +0 -1
- package/dist/cjs/components/collapsable/Collapsable.module.css +0 -1
- package/dist/cjs/components/dropdown/Dropdown.module.css +0 -1
- package/dist/cjs/components/icon/Icon.module.css +0 -1
- package/dist/cjs/components/media/Media.module.css +0 -1
- package/dist/cjs/components/menu/Menu.module.css +0 -1
- package/dist/cjs/components/meter/Meter.module.css +0 -1
- package/dist/cjs/components/panel/Panel.module.css +0 -1
- package/dist/cjs/components/progress/Progress.module.css +0 -1
- package/dist/cjs/components/tabpanel/TabPanel.module.css +0 -1
- package/dist/cjs/context/NotificationCenter.js +0 -254
- package/dist/cjs/core/aside/Aside.module.css +0 -1
- package/dist/cjs/core/boundary/ErrorBoundary.module.css +0 -1
- package/dist/cjs/core/content/Content.module.css +0 -1
- package/dist/cjs/core/headfoot/HeadFoot.module.css +0 -1
- package/dist/cjs/core/page/Page.js +0 -66
- package/dist/cjs/core/page/Page.module.css +0 -1
- package/dist/cjs/core/responsive/Responsive.module.css +0 -1
- package/dist/cjs/core/section/Section.module.css +0 -1
- package/dist/cjs/core/theme/Theme.module.css +0 -1
- package/dist/cjs/core/viewport/Viewport.module.css +0 -1
- package/dist/cjs/hotkeys/HotKey.js +0 -47
- package/dist/cjs/hotkeys/HotKeyLabel.js +0 -52
- package/dist/cjs/hotkeys/HotKeyWrapper.js +0 -98
- package/dist/cjs/hotkeys/commons.js +0 -56
- package/dist/cjs/overlays/alert/Alert.module.css +0 -1
- package/dist/cjs/overlays/flyout/Flyout.js +0 -152
- package/dist/cjs/overlays/flyout/Flyout.module.css +0 -1
- package/dist/cjs/overlays/message/Message.js +0 -84
- package/dist/cjs/overlays/message/Message.module.css +0 -1
- package/dist/cjs/overlays/modal/Modal.js +0 -132
- package/dist/cjs/overlays/modal/Modal.module.css +0 -1
- package/dist/cjs/overlays/toast/Toast.js +0 -166
- package/dist/cjs/overlays/toast/Toast.module.css +0 -1
- package/dist/cjs/overlays/tooltip/Tooltip.js +0 -133
- package/dist/cjs/overlays/tooltip/Tooltip.module.css +0 -1
- package/dist/cjs/types/icons.js +0 -200
- package/dist/cjs/typography/Link.js +0 -55
- package/dist/cjs/typography/Typography.module.css +0 -1
- package/dist/cjs/typography/types.js +0 -42
- package/dist/esm/components/actionLabel/ActionLabel.module.css +0 -1
- package/dist/esm/components/animations/Animations.js +0 -138
- package/dist/esm/components/animations/Animations.module.css +0 -1
- package/dist/esm/components/avatar/Avatar.module.css +0 -1
- package/dist/esm/components/badge/Badge.module.css +0 -1
- package/dist/esm/components/breadcrumbs/Breadcrumbs.js +0 -71
- package/dist/esm/components/breadcrumbs/Breadcrumbs.module.css +0 -1
- package/dist/esm/components/button/Button.module.css +0 -1
- package/dist/esm/components/card/Card.module.css +0 -1
- package/dist/esm/components/chip/Chip.module.css +0 -1
- package/dist/esm/components/collapsable/Collapsable.module.css +0 -1
- package/dist/esm/components/dropdown/Dropdown.module.css +0 -1
- package/dist/esm/components/icon/Icon.module.css +0 -1
- package/dist/esm/components/media/Media.module.css +0 -1
- package/dist/esm/components/menu/Menu.module.css +0 -1
- package/dist/esm/components/meter/Meter.module.css +0 -1
- package/dist/esm/components/panel/Panel.module.css +0 -1
- package/dist/esm/components/progress/Progress.module.css +0 -1
- package/dist/esm/components/tabpanel/TabPanel.module.css +0 -1
- package/dist/esm/context/NotificationCenter.js +0 -254
- package/dist/esm/core/aside/Aside.module.css +0 -1
- package/dist/esm/core/boundary/ErrorBoundary.module.css +0 -1
- package/dist/esm/core/content/Content.module.css +0 -1
- package/dist/esm/core/headfoot/HeadFoot.module.css +0 -1
- package/dist/esm/core/page/Page.js +0 -66
- package/dist/esm/core/page/Page.module.css +0 -1
- package/dist/esm/core/responsive/Responsive.module.css +0 -1
- package/dist/esm/core/section/Section.module.css +0 -1
- package/dist/esm/core/theme/Theme.module.css +0 -1
- package/dist/esm/core/viewport/Viewport.module.css +0 -1
- package/dist/esm/hotkeys/HotKey.js +0 -47
- package/dist/esm/hotkeys/HotKeyLabel.js +0 -52
- package/dist/esm/hotkeys/HotKeyWrapper.js +0 -96
- package/dist/esm/hotkeys/commons.js +0 -56
- package/dist/esm/overlays/alert/Alert.module.css +0 -1
- package/dist/esm/overlays/flyout/Flyout.js +0 -152
- package/dist/esm/overlays/flyout/Flyout.module.css +0 -1
- package/dist/esm/overlays/message/Message.js +0 -84
- package/dist/esm/overlays/message/Message.module.css +0 -1
- package/dist/esm/overlays/modal/Modal.js +0 -132
- package/dist/esm/overlays/modal/Modal.module.css +0 -1
- package/dist/esm/overlays/toast/Toast.js +0 -166
- package/dist/esm/overlays/toast/Toast.module.css +0 -1
- package/dist/esm/overlays/tooltip/Tooltip.js +0 -132
- package/dist/esm/overlays/tooltip/Tooltip.module.css +0 -1
- package/dist/esm/types/icons.js +0 -202
- package/dist/esm/typography/Link.js +0 -55
- package/dist/esm/typography/Typography.module.css +0 -1
- package/dist/esm/typography/types.js +0 -41
- package/dist/types/components/animations/Animations.d.ts +0 -23
- package/dist/types/components/breadcrumbs/Breadcrumbs.d.ts +0 -17
- package/dist/types/components/index.d.ts +0 -33
- package/dist/types/context/NotificationCenter.d.ts +0 -11
- package/dist/types/core/index.d.ts +0 -9
- package/dist/types/core/page/Page.d.ts +0 -23
- package/dist/types/core/section/Section.d.ts +0 -7
- package/dist/types/hotkeys/HotKey.d.ts +0 -2
- package/dist/types/hotkeys/HotKeyLabel.d.ts +0 -2
- package/dist/types/hotkeys/HotKeyWrapper.d.ts +0 -11
- package/dist/types/hotkeys/commons.d.ts +0 -28
- package/dist/types/overlays/alert/Alert.d.ts +0 -41
- package/dist/types/overlays/flyout/Flyout.d.ts +0 -57
- package/dist/types/overlays/index.d.ts +0 -6
- package/dist/types/overlays/message/Message.d.ts +0 -21
- package/dist/types/overlays/modal/Modal.d.ts +0 -53
- package/dist/types/overlays/toast/Toast.d.ts +0 -33
- package/dist/types/overlays/tooltip/Tooltip.d.ts +0 -18
- package/dist/types/types/icons.d.ts +0 -197
- package/dist/types/typography/Link.d.ts +0 -25
- package/dist/types/typography/index.d.ts +0 -6
- package/src/components/animations/Animations.module.css +0 -253
- package/src/components/animations/Animations.tsx +0 -196
- package/src/components/avatar/Avatar.module.css +0 -90
- package/src/components/badge/Badge.module.css +0 -165
- package/src/components/breadcrumbs/Breadcrumbs.module.css +0 -189
- package/src/components/breadcrumbs/Breadcrumbs.tsx +0 -109
- package/src/components/button/Button.module.css +0 -375
- package/src/components/card/Card.module.css +0 -152
- package/src/components/chip/Chip.module.css +0 -118
- package/src/components/collapsable/Collapsable.module.css +0 -30
- package/src/components/icon/Icon.module.css +0 -71
- package/src/components/index.ts +0 -62
- package/src/components/media/Media.module.css +0 -112
- package/src/context/NotificationCenter.tsx +0 -223
- package/src/core/aside/Aside.module.css +0 -231
- package/src/core/boundary/ErrorBoundary.module.css +0 -65
- package/src/core/headfoot/HeadFoot.module.css +0 -38
- package/src/core/index.ts +0 -32
- package/src/core/page/Page.module.css +0 -46
- package/src/core/page/Page.tsx +0 -101
- package/src/core/responsive/Responsive.module.css +0 -85
- package/src/core/section/Section.module.css +0 -28
- package/src/core/section/Section.tsx +0 -54
- package/src/core/theme/Theme.module.css +0 -30
- package/src/core/viewport/Viewport.module.css +0 -32
- package/src/hooks/useControlledValue.tsx +0 -43
- package/src/hotkeys/HotKey.tsx +0 -39
- package/src/hotkeys/HotKeyLabel.tsx +0 -61
- package/src/hotkeys/HotKeyWrapper.tsx +0 -137
- package/src/hotkeys/commons.ts +0 -74
- package/src/overlays/alert/Alert.tsx +0 -252
- package/src/overlays/flyout/Flyout.tsx +0 -283
- package/src/overlays/index.ts +0 -29
- package/src/overlays/message/Message.tsx +0 -107
- package/src/overlays/modal/Modal.tsx +0 -244
- package/src/overlays/toast/Toast.module.css +0 -37
- package/src/overlays/toast/Toast.tsx +0 -216
- package/src/overlays/tooltip/Tooltip.module.css +0 -53
- package/src/overlays/tooltip/Tooltip.tsx +0 -200
- package/src/types/icons.ts +0 -426
- package/src/typography/Link.tsx +0 -113
- package/src/typography/Typography.module.css +0 -68
- package/src/typography/index.ts +0 -29
- /package/dist/cjs/i18n/{ar.json.js → ar/core.json.js} +0 -0
- /package/dist/cjs/i18n/{en.json.js → en/core.json.js} +0 -0
- /package/dist/esm/i18n/{ar.json.js → ar/core.json.js} +0 -0
- /package/dist/esm/i18n/{en.json.js → en/core.json.js} +0 -0
- /package/src/i18n/{ar.json → ar/core.json} +0 -0
- /package/src/i18n/{en.json → en/core.json} +0 -0
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
/*
|
|
4
|
-
* React Fabric
|
|
5
|
-
* @version: 1.0.0
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* The MIT License (MIT)
|
|
9
|
-
* Copyright (c) 2024 Adarsh Pastakia
|
|
10
|
-
*
|
|
11
|
-
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software
|
|
12
|
-
* and associated documentation files (the "Software"), to deal in the Software without restriction,
|
|
13
|
-
* including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
|
|
14
|
-
* and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
|
|
15
|
-
* subject to the following conditions:
|
|
16
|
-
*
|
|
17
|
-
* The above copyright notice and this permission notice shall be included in all copies or substantial
|
|
18
|
-
* portions of the Software.
|
|
19
|
-
*
|
|
20
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
|
|
21
|
-
* TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
|
|
22
|
-
* THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
|
23
|
-
* TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
24
|
-
*/
|
|
25
|
-
|
|
26
|
-
var reduceHotKey = function reduceHotKey(_ref) {
|
|
27
|
-
var keyCombo = _ref.keyCombo,
|
|
28
|
-
global = _ref.global,
|
|
29
|
-
handler = _ref.handler;
|
|
30
|
-
var item = {
|
|
31
|
-
key: "",
|
|
32
|
-
meta: false,
|
|
33
|
-
shift: false,
|
|
34
|
-
ctrl: false,
|
|
35
|
-
alt: false,
|
|
36
|
-
_key: keyCombo,
|
|
37
|
-
handler: handler,
|
|
38
|
-
global: global
|
|
39
|
-
};
|
|
40
|
-
keyCombo.split("+").forEach(function (e) {
|
|
41
|
-
if (e.trim().toLowerCase() === "ctrl") {
|
|
42
|
-
item.ctrl = true;
|
|
43
|
-
} else if (e.trim().toLowerCase() === "alt") {
|
|
44
|
-
item.alt = true;
|
|
45
|
-
} else if (e.trim().toLowerCase() === "meta") {
|
|
46
|
-
item.meta = true;
|
|
47
|
-
} else if (e.trim().toLowerCase() === "shift") {
|
|
48
|
-
item.shift = true;
|
|
49
|
-
} else {
|
|
50
|
-
if (e.trim().toLowerCase() === "left") item.key = "arrowleft";else if (e.trim().toLowerCase() === "right") item.key = "arrowright";else if (e.trim().toLowerCase() === "up") item.key = "arrowup";else if (e.trim().toLowerCase() === "down") item.key = "arrowdown";else if (e.trim().toLowerCase().startsWith("del")) item.key = "delete";else if (e.trim().toLowerCase().startsWith("esc")) item.key = "escape";else item.key = e.trim().toLowerCase();
|
|
51
|
-
}
|
|
52
|
-
});
|
|
53
|
-
return item;
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
exports.reduceHotKey = reduceHotKey;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.alert{gap:.5rem 1rem;grid-template:"icon title" auto "icon message" auto "input input" auto "actions actions" auto/auto 1fr;margin-top:-100%;opacity:0;transition:margin .4s,opacity .3s .2s;z-index:var(--z-overlay);&[data-show=true]{margin-top:0;opacity:1}}}
|
|
@@ -1,152 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
4
|
-
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
5
|
-
var react = require('@floating-ui/react');
|
|
6
|
-
var classNames = require('classnames');
|
|
7
|
-
var react$1 = require('react');
|
|
8
|
-
var Animations = require('../../components/animations/Animations.js');
|
|
9
|
-
var Icon = require('../../components/icon/Icon.js');
|
|
10
|
-
var HeadFoot = require('../../core/headfoot/HeadFoot.js');
|
|
11
|
-
var HotKeyWrapper = require('../../hotkeys/HotKeyWrapper.js');
|
|
12
|
-
var icons = require('../../types/icons.js');
|
|
13
|
-
var Flyout_module = require('./Flyout.module.css');
|
|
14
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
15
|
-
|
|
16
|
-
var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "closeOnClick", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "minWidth", "hideMask", "align"];
|
|
17
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
18
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
19
|
-
var Flyout = function Flyout(_ref) {
|
|
20
|
-
var icon = _ref.icon,
|
|
21
|
-
iconBg = _ref.iconBg,
|
|
22
|
-
iconColor = _ref.iconColor,
|
|
23
|
-
iconClassName = _ref.iconClassName,
|
|
24
|
-
rtlFlip = _ref.rtlFlip,
|
|
25
|
-
title = _ref.title,
|
|
26
|
-
actions = _ref.actions,
|
|
27
|
-
closeOnClick = _ref.closeOnClick,
|
|
28
|
-
headerClassName = _ref.headerClassName,
|
|
29
|
-
onClose = _ref.onClose,
|
|
30
|
-
onBeforeClose = _ref.onBeforeClose,
|
|
31
|
-
children = _ref.children,
|
|
32
|
-
loading = _ref.loading,
|
|
33
|
-
size = _ref.size,
|
|
34
|
-
width = _ref.width,
|
|
35
|
-
minWidth = _ref.minWidth,
|
|
36
|
-
hideMask = _ref.hideMask,
|
|
37
|
-
_ref$align = _ref.align,
|
|
38
|
-
align = _ref$align === void 0 ? "start" : _ref$align,
|
|
39
|
-
aria = _objectWithoutProperties(_ref, _excluded);
|
|
40
|
-
var _useFloating = react.useFloating({
|
|
41
|
-
open: true,
|
|
42
|
-
onOpenChange: function onOpenChange() {
|
|
43
|
-
handleClose(false);
|
|
44
|
-
}
|
|
45
|
-
}),
|
|
46
|
-
refs = _useFloating.refs,
|
|
47
|
-
context = _useFloating.context;
|
|
48
|
-
var dismiss = react.useDismiss(context, {
|
|
49
|
-
outsidePressEvent: "mousedown",
|
|
50
|
-
escapeKey: true
|
|
51
|
-
});
|
|
52
|
-
var role = react.useRole(context);
|
|
53
|
-
|
|
54
|
-
// Merge all the interactions into prop getters
|
|
55
|
-
var _useInteractions = react.useInteractions([dismiss, role]),
|
|
56
|
-
getFloatingProps = _useInteractions.getFloatingProps;
|
|
57
|
-
var handleClose = react$1.useCallback(function () {
|
|
58
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
59
|
-
args[_key] = arguments[_key];
|
|
60
|
-
}
|
|
61
|
-
void Promise.resolve(onBeforeClose === null || onBeforeClose === void 0 ? void 0 : onBeforeClose.apply(void 0, args)).then(function (ret) {
|
|
62
|
-
if (ret !== false) {
|
|
63
|
-
refs.floating.current && (refs.floating.current.dataset.show = "false");
|
|
64
|
-
setTimeout(function () {
|
|
65
|
-
onClose === null || onClose === void 0 || onClose.apply(void 0, args);
|
|
66
|
-
}, 250);
|
|
67
|
-
}
|
|
68
|
-
ret === false && setTimeout(function () {
|
|
69
|
-
var _refs$floating$curren;
|
|
70
|
-
return (_refs$floating$curren = refs.floating.current) === null || _refs$floating$curren === void 0 || (_refs$floating$curren = _refs$floating$curren.querySelector('[role="dialog"]')) === null || _refs$floating$curren === void 0 ? void 0 : _refs$floating$curren.focus();
|
|
71
|
-
}, 50);
|
|
72
|
-
});
|
|
73
|
-
}, [onBeforeClose, onClose]);
|
|
74
|
-
react$1.useEffect(function () {
|
|
75
|
-
setTimeout(function () {
|
|
76
|
-
var _refs$floating$curren2;
|
|
77
|
-
refs.floating.current && (refs.floating.current.dataset.show = "true");
|
|
78
|
-
(_refs$floating$curren2 = refs.floating.current) === null || _refs$floating$curren2 === void 0 || (_refs$floating$curren2 = _refs$floating$curren2.querySelector('[role="dialog"]')) === null || _refs$floating$curren2 === void 0 || _refs$floating$curren2.focus();
|
|
79
|
-
}, 50);
|
|
80
|
-
}, []);
|
|
81
|
-
var tryClosing = react$1.useCallback(function (e) {
|
|
82
|
-
if (!!closeOnClick || e.target.closest("[data-flyout-dismiss='true']")) {
|
|
83
|
-
setTimeout(function () {
|
|
84
|
-
handleClose();
|
|
85
|
-
}, 100);
|
|
86
|
-
}
|
|
87
|
-
}, [closeOnClick, handleClose]);
|
|
88
|
-
var Wrapper = react$1.useCallback(function (_ref2) {
|
|
89
|
-
var children = _ref2.children;
|
|
90
|
-
if (hideMask) return /*#__PURE__*/jsxRuntime.jsx(react$1.Fragment, {
|
|
91
|
-
children: children
|
|
92
|
-
});
|
|
93
|
-
return /*#__PURE__*/jsxRuntime.jsx(react.FloatingOverlay, {
|
|
94
|
-
lockScroll: true,
|
|
95
|
-
style: {
|
|
96
|
-
zIndex: "var(--z-overlay-mask)"
|
|
97
|
-
},
|
|
98
|
-
className: "bg-base/10 backdrop-blur-sm transition-all",
|
|
99
|
-
children: children
|
|
100
|
-
});
|
|
101
|
-
}, [hideMask, handleClose]);
|
|
102
|
-
return /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
|
|
103
|
-
children: /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
|
|
104
|
-
children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
|
|
105
|
-
context: context,
|
|
106
|
-
children: /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
|
|
107
|
-
children: /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({
|
|
108
|
-
"data-align": align,
|
|
109
|
-
className: classNames(Flyout_module.flyout, "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl", align === "start" ? "start-0" : "end-0", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]"),
|
|
110
|
-
style: {
|
|
111
|
-
width: width,
|
|
112
|
-
minWidth: minWidth
|
|
113
|
-
},
|
|
114
|
-
onMouseUpCapture: tryClosing,
|
|
115
|
-
ref: refs.setFloating
|
|
116
|
-
}, getFloatingProps()), aria), aria), {}, {
|
|
117
|
-
children: /*#__PURE__*/jsxRuntime.jsxs(HotKeyWrapper.HotKeyWrapper, {
|
|
118
|
-
children: [/*#__PURE__*/jsxRuntime.jsxs(HeadFoot.Header, {
|
|
119
|
-
flex: true,
|
|
120
|
-
className: classNames(Flyout_module.flyoutHeader, headerClassName),
|
|
121
|
-
children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
|
|
122
|
-
icon: icon,
|
|
123
|
-
bg: iconBg,
|
|
124
|
-
color: iconColor,
|
|
125
|
-
className: classNames(iconClassName, "p-1"),
|
|
126
|
-
rtlFlip: rtlFlip
|
|
127
|
-
}), /*#__PURE__*/jsxRuntime.jsx("label", {
|
|
128
|
-
className: "flex-1 truncate py-2 px-1",
|
|
129
|
-
children: title
|
|
130
|
-
}), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
|
|
131
|
-
"data-ref": "panelClose",
|
|
132
|
-
className: classNames(Flyout_module.panelAction, "cursor-pointer p-1 text-xl self-stretch"),
|
|
133
|
-
icon: icons.CoreIcons.close,
|
|
134
|
-
onClick: function onClick() {
|
|
135
|
-
return handleClose(false);
|
|
136
|
-
}
|
|
137
|
-
})]
|
|
138
|
-
}), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
139
|
-
role: "dialog",
|
|
140
|
-
className: classNames(Flyout_module.flyoutBody, "flex-1 grid overflow-hidden"),
|
|
141
|
-
tabIndex: 0,
|
|
142
|
-
children: children
|
|
143
|
-
})]
|
|
144
|
-
})
|
|
145
|
-
}))
|
|
146
|
-
})
|
|
147
|
-
})
|
|
148
|
-
})
|
|
149
|
-
});
|
|
150
|
-
};
|
|
151
|
-
|
|
152
|
-
exports.Flyout = Flyout;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.flyout{max-width:70vw;transition:margin .5s;width:32rem;z-index:var(--z-overlay);& .flyoutHeader{background-color:theme(backgroundColor.base);border-bottom:.5px solid theme(borderColor.dimmed)}& .flyoutBody{grid-template:"head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}&[data-align=start]{margin-inline-start:-100%}&[data-align=end]{margin-inline-end:-100%}&[data-show=true]{margin:0}}}
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var classNames = require('classnames');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
var Icon = require('../../components/icon/Icon.js');
|
|
6
|
-
var getColor = require('../../utils/getColor.js');
|
|
7
|
-
require('@react-fabric/utilities');
|
|
8
|
-
var Message_module = require('./Message.module.css');
|
|
9
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
10
|
-
|
|
11
|
-
/*
|
|
12
|
-
* React Fabric
|
|
13
|
-
* @version: 1.0.0
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
* The MIT License (MIT)
|
|
17
|
-
* Copyright (c) 2024 Adarsh Pastakia
|
|
18
|
-
*
|
|
19
|
-
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software
|
|
20
|
-
* and associated documentation files (the "Software"), to deal in the Software without restriction,
|
|
21
|
-
* including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
|
|
22
|
-
* and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
|
|
23
|
-
* subject to the following conditions:
|
|
24
|
-
*
|
|
25
|
-
* The above copyright notice and this permission notice shall be included in all copies or substantial
|
|
26
|
-
* portions of the Software.
|
|
27
|
-
*
|
|
28
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
|
|
29
|
-
* TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
|
|
30
|
-
* THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
|
31
|
-
* TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
32
|
-
*/
|
|
33
|
-
|
|
34
|
-
var Message = function Message(_ref) {
|
|
35
|
-
var title = _ref.title,
|
|
36
|
-
message = _ref.message,
|
|
37
|
-
color = _ref.color,
|
|
38
|
-
icon = _ref.icon,
|
|
39
|
-
rtlFlip = _ref.rtlFlip,
|
|
40
|
-
actions = _ref.actions,
|
|
41
|
-
onClose = _ref.onClose;
|
|
42
|
-
var elRef = react.useRef(null);
|
|
43
|
-
var handleClose = react.useCallback(function (ret) {
|
|
44
|
-
elRef.current && (elRef.current.dataset.show = "false");
|
|
45
|
-
setTimeout(function () {
|
|
46
|
-
onClose(ret);
|
|
47
|
-
}, 250);
|
|
48
|
-
}, [onClose]);
|
|
49
|
-
react.useLayoutEffect(function () {
|
|
50
|
-
setTimeout(function () {
|
|
51
|
-
return elRef.current && (elRef.current.dataset.show = "true");
|
|
52
|
-
}, 100);
|
|
53
|
-
}, []);
|
|
54
|
-
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
55
|
-
className: classNames(Message_module.message, color ? getColor.getBgClass(color + "-300") : "bg-invert", color ? getColor.getColorClass(color + "-900") : "text-invert", "flex flex-nowrap gap-1 px-8 relative justify-center max-w-md pointer-events-auto rounded mb-2 select-none"),
|
|
56
|
-
ref: elRef,
|
|
57
|
-
children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
|
|
58
|
-
icon: icon,
|
|
59
|
-
size: "md",
|
|
60
|
-
rtlFlip: rtlFlip
|
|
61
|
-
}), title && /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
62
|
-
className: "font-medium",
|
|
63
|
-
children: title
|
|
64
|
-
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
65
|
-
className: "truncate flex-initial",
|
|
66
|
-
children: message
|
|
67
|
-
}), actions && /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
68
|
-
className: "flex gap-1 flex-nowrap",
|
|
69
|
-
onClickCapture: function onClickCapture(e) {
|
|
70
|
-
return handleClose(e.target.value);
|
|
71
|
-
},
|
|
72
|
-
children: actions
|
|
73
|
-
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
74
|
-
role: "none",
|
|
75
|
-
className: "cursor-pointer opacity-65 absolute end-1 hover:opacity-90",
|
|
76
|
-
onClick: function onClick() {
|
|
77
|
-
return handleClose();
|
|
78
|
-
},
|
|
79
|
-
children: "\xD7"
|
|
80
|
-
})]
|
|
81
|
-
});
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
exports.Message = Message;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.message{margin-top:-100%;opacity:0;transition:margin .4s,opacity .3s .2s;&[data-show=true]{margin-top:0;opacity:1}}}
|
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
4
|
-
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
5
|
-
var react = require('@floating-ui/react');
|
|
6
|
-
var classNames = require('classnames');
|
|
7
|
-
var react$1 = require('react');
|
|
8
|
-
var Animations = require('../../components/animations/Animations.js');
|
|
9
|
-
var Icon = require('../../components/icon/Icon.js');
|
|
10
|
-
var HeadFoot = require('../../core/headfoot/HeadFoot.js');
|
|
11
|
-
var HotKeyWrapper = require('../../hotkeys/HotKeyWrapper.js');
|
|
12
|
-
var icons = require('../../types/icons.js');
|
|
13
|
-
var Modal_module = require('./Modal.module.css');
|
|
14
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
15
|
-
|
|
16
|
-
var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "height", "minHeight", "minWidth"];
|
|
17
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
18
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
19
|
-
var Modal = function Modal(_ref) {
|
|
20
|
-
var icon = _ref.icon,
|
|
21
|
-
iconBg = _ref.iconBg,
|
|
22
|
-
iconColor = _ref.iconColor,
|
|
23
|
-
iconClassName = _ref.iconClassName,
|
|
24
|
-
rtlFlip = _ref.rtlFlip,
|
|
25
|
-
title = _ref.title,
|
|
26
|
-
actions = _ref.actions,
|
|
27
|
-
headerClassName = _ref.headerClassName,
|
|
28
|
-
onClose = _ref.onClose,
|
|
29
|
-
onBeforeClose = _ref.onBeforeClose,
|
|
30
|
-
children = _ref.children,
|
|
31
|
-
loading = _ref.loading,
|
|
32
|
-
size = _ref.size,
|
|
33
|
-
width = _ref.width,
|
|
34
|
-
height = _ref.height,
|
|
35
|
-
minHeight = _ref.minHeight,
|
|
36
|
-
minWidth = _ref.minWidth,
|
|
37
|
-
aria = _objectWithoutProperties(_ref, _excluded);
|
|
38
|
-
var _useFloating = react.useFloating({
|
|
39
|
-
open: true,
|
|
40
|
-
onOpenChange: function onOpenChange() {
|
|
41
|
-
handleClose(false);
|
|
42
|
-
}
|
|
43
|
-
}),
|
|
44
|
-
refs = _useFloating.refs,
|
|
45
|
-
context = _useFloating.context;
|
|
46
|
-
var dismiss = react.useDismiss(context, {
|
|
47
|
-
outsidePressEvent: "mousedown",
|
|
48
|
-
escapeKey: true
|
|
49
|
-
});
|
|
50
|
-
var role = react.useRole(context);
|
|
51
|
-
|
|
52
|
-
// Merge all the interactions into prop getters
|
|
53
|
-
var _useInteractions = react.useInteractions([dismiss, role]),
|
|
54
|
-
getFloatingProps = _useInteractions.getFloatingProps;
|
|
55
|
-
var handleClose = react$1.useCallback(function () {
|
|
56
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
57
|
-
args[_key] = arguments[_key];
|
|
58
|
-
}
|
|
59
|
-
void Promise.resolve(onBeforeClose === null || onBeforeClose === void 0 ? void 0 : onBeforeClose.apply(void 0, args)).then(function (ret) {
|
|
60
|
-
if (ret !== false) {
|
|
61
|
-
refs.floating.current && (refs.floating.current.dataset.show = "false");
|
|
62
|
-
setTimeout(function () {
|
|
63
|
-
onClose === null || onClose === void 0 || onClose.apply(void 0, args);
|
|
64
|
-
}, 250);
|
|
65
|
-
}
|
|
66
|
-
ret === false && setTimeout(function () {
|
|
67
|
-
var _refs$floating$curren;
|
|
68
|
-
return (_refs$floating$curren = refs.floating.current) === null || _refs$floating$curren === void 0 || (_refs$floating$curren = _refs$floating$curren.querySelector("[role='dialog']")) === null || _refs$floating$curren === void 0 ? void 0 : _refs$floating$curren.focus();
|
|
69
|
-
}, 50);
|
|
70
|
-
});
|
|
71
|
-
}, [onBeforeClose, onClose]);
|
|
72
|
-
react$1.useEffect(function () {
|
|
73
|
-
setTimeout(function () {
|
|
74
|
-
var _refs$floating$curren2;
|
|
75
|
-
refs.floating.current && (refs.floating.current.dataset.show = "true");
|
|
76
|
-
(_refs$floating$curren2 = refs.floating.current) === null || _refs$floating$curren2 === void 0 || (_refs$floating$curren2 = _refs$floating$curren2.querySelector("[role='dialog']")) === null || _refs$floating$curren2 === void 0 || _refs$floating$curren2.focus();
|
|
77
|
-
}, 50);
|
|
78
|
-
}, []);
|
|
79
|
-
return /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
|
|
80
|
-
children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingOverlay, {
|
|
81
|
-
lockScroll: true,
|
|
82
|
-
style: {
|
|
83
|
-
zIndex: "var(--z-overlay-mask)"
|
|
84
|
-
},
|
|
85
|
-
className: "bg-base/20 backdrop-blur-sm grid place-items-center",
|
|
86
|
-
children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
|
|
87
|
-
context: context,
|
|
88
|
-
children: /*#__PURE__*/jsxRuntime.jsx("dialog", _objectSpread(_objectSpread(_objectSpread({
|
|
89
|
-
className: classNames(Modal_module.modal, "rounded-capped relative overflow-hidden flex flex-col flex-nowrap", "ring-1 ring-tint-100 ring-offset-1 focus-within:ring-primary-300 shadow-xl", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]", size === "screen" && "w-screen h-screen"),
|
|
90
|
-
style: {
|
|
91
|
-
width: width,
|
|
92
|
-
height: height,
|
|
93
|
-
minHeight: minHeight,
|
|
94
|
-
minWidth: minWidth
|
|
95
|
-
},
|
|
96
|
-
ref: refs.setFloating
|
|
97
|
-
}, getFloatingProps()), aria), {}, {
|
|
98
|
-
children: /*#__PURE__*/jsxRuntime.jsxs(HotKeyWrapper.HotKeyWrapper, {
|
|
99
|
-
children: [/*#__PURE__*/jsxRuntime.jsxs(HeadFoot.Header, {
|
|
100
|
-
flex: true,
|
|
101
|
-
className: classNames(Modal_module.modalHeader, headerClassName),
|
|
102
|
-
children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
|
|
103
|
-
icon: icon,
|
|
104
|
-
bg: iconBg,
|
|
105
|
-
color: iconColor,
|
|
106
|
-
className: classNames(iconClassName, "p-1"),
|
|
107
|
-
rtlFlip: rtlFlip
|
|
108
|
-
}), /*#__PURE__*/jsxRuntime.jsx("label", {
|
|
109
|
-
className: "flex-1 truncate py-2 px-1",
|
|
110
|
-
children: title
|
|
111
|
-
}), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
|
|
112
|
-
"data-ref": "panelClose",
|
|
113
|
-
className: classNames(Modal_module.panelAction, "cursor-pointer p-1 text-xl self-stretch"),
|
|
114
|
-
icon: icons.CoreIcons.close,
|
|
115
|
-
onClick: function onClick() {
|
|
116
|
-
return handleClose(false);
|
|
117
|
-
}
|
|
118
|
-
})]
|
|
119
|
-
}), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
120
|
-
role: "dialog",
|
|
121
|
-
className: classNames(Modal_module.modalBody, "flex-1 grid overflow-hidden"),
|
|
122
|
-
tabIndex: 0,
|
|
123
|
-
children: children
|
|
124
|
-
})]
|
|
125
|
-
})
|
|
126
|
-
}))
|
|
127
|
-
})
|
|
128
|
-
})
|
|
129
|
-
});
|
|
130
|
-
};
|
|
131
|
-
|
|
132
|
-
exports.Modal = Modal;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.modal{margin-top:-100%;max-height:90vh;max-width:90vw;opacity:0;transition:margin .4s,opacity .3s .2s;width:32rem;z-index:var(--z-overlay);&[data-show=true]{margin-top:0;opacity:1}& .modalHeader{background-color:theme(backgroundColor.base);border-bottom:.5px solid theme(borderColor.dimmed)}& .modalBody{grid-template:"head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}}
|
|
@@ -1,166 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var classNames = require('classnames');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
var reactI18next = require('react-i18next');
|
|
6
|
-
var Animations = require('../../components/animations/Animations.js');
|
|
7
|
-
var Button = require('../../components/button/Button.js');
|
|
8
|
-
var Icon = require('../../components/icon/Icon.js');
|
|
9
|
-
var icons = require('../../types/icons.js');
|
|
10
|
-
var getColor = require('../../utils/getColor.js');
|
|
11
|
-
require('@react-fabric/utilities');
|
|
12
|
-
var Toast_module = require('./Toast.module.css');
|
|
13
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
14
|
-
|
|
15
|
-
/*
|
|
16
|
-
* React Fabric
|
|
17
|
-
* @version: 1.0.0
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
* The MIT License (MIT)
|
|
21
|
-
* Copyright (c) 2024 Adarsh Pastakia
|
|
22
|
-
*
|
|
23
|
-
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software
|
|
24
|
-
* and associated documentation files (the "Software"), to deal in the Software without restriction,
|
|
25
|
-
* including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
|
|
26
|
-
* and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
|
|
27
|
-
* subject to the following conditions:
|
|
28
|
-
*
|
|
29
|
-
* The above copyright notice and this permission notice shall be included in all copies or substantial
|
|
30
|
-
* portions of the Software.
|
|
31
|
-
*
|
|
32
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
|
|
33
|
-
* TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
|
|
34
|
-
* THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
|
35
|
-
* TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
36
|
-
*/
|
|
37
|
-
|
|
38
|
-
var Toast = function Toast(_ref) {
|
|
39
|
-
var title = _ref.title,
|
|
40
|
-
message = _ref.message,
|
|
41
|
-
_ref$color = _ref.color,
|
|
42
|
-
color = _ref$color === void 0 ? "primary" : _ref$color,
|
|
43
|
-
icon = _ref.icon,
|
|
44
|
-
rtlFlip = _ref.rtlFlip,
|
|
45
|
-
actions = _ref.actions,
|
|
46
|
-
onClose = _ref.onClose,
|
|
47
|
-
onCloseAll = _ref.onCloseAll,
|
|
48
|
-
type = _ref.type,
|
|
49
|
-
okLabel = _ref.okLabel,
|
|
50
|
-
cancelLabel = _ref.cancelLabel;
|
|
51
|
-
var _useTranslation = reactI18next.useTranslation("core"),
|
|
52
|
-
t = _useTranslation.t;
|
|
53
|
-
var iconType = react.useMemo(function () {
|
|
54
|
-
if (icon) return /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
|
|
55
|
-
icon: icon,
|
|
56
|
-
size: "md",
|
|
57
|
-
rtlFlip: rtlFlip,
|
|
58
|
-
color: color + "-600"
|
|
59
|
-
});
|
|
60
|
-
switch (color) {
|
|
61
|
-
case "danger":
|
|
62
|
-
return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
|
|
63
|
-
type: "cross",
|
|
64
|
-
className: getColor.getColorClass(color + "-600")
|
|
65
|
-
});
|
|
66
|
-
case "success":
|
|
67
|
-
return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
|
|
68
|
-
type: "check",
|
|
69
|
-
className: getColor.getColorClass(color + "-600")
|
|
70
|
-
});
|
|
71
|
-
case "warning":
|
|
72
|
-
return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
|
|
73
|
-
type: "exclaim",
|
|
74
|
-
className: getColor.getColorClass(color + "-600")
|
|
75
|
-
});
|
|
76
|
-
default:
|
|
77
|
-
return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
|
|
78
|
-
type: type === "confirm" ? "question" : "info",
|
|
79
|
-
className: getColor.getColorClass(color + "-600")
|
|
80
|
-
});
|
|
81
|
-
}
|
|
82
|
-
}, [color, type, icon]);
|
|
83
|
-
var elRef = react.useRef(null);
|
|
84
|
-
var handleClose = react.useCallback(function (ret) {
|
|
85
|
-
elRef.current && (elRef.current.dataset.show = "false");
|
|
86
|
-
setTimeout(function () {
|
|
87
|
-
onClose(ret);
|
|
88
|
-
}, 250);
|
|
89
|
-
}, [onClose]);
|
|
90
|
-
react.useLayoutEffect(function () {
|
|
91
|
-
setTimeout(function () {
|
|
92
|
-
return elRef.current && (elRef.current.dataset.show = "true");
|
|
93
|
-
}, 100);
|
|
94
|
-
}, []);
|
|
95
|
-
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
96
|
-
role: "alert",
|
|
97
|
-
className: classNames(Toast_module.toast, getColor.getBorderClass(color + "-300"), "flex flex-nowrap max-w-sm bg-base min-w-72 border pointer-events-auto relative overflow-hidden rounded-capped mt-4 select-none"),
|
|
98
|
-
ref: elRef,
|
|
99
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
100
|
-
className: classNames("flex-initial p-2", getColor.getBgClass(color + "-100")),
|
|
101
|
-
children: iconType
|
|
102
|
-
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
103
|
-
className: classNames(getColor.getBgClass(color + "-50/50"), "flex flex-col flex-1 flex-nowrap overflow-hidden p-2"),
|
|
104
|
-
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
105
|
-
className: "flex flex-nowrap gap-2 items-start",
|
|
106
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
107
|
-
className: "font-medium flex-1",
|
|
108
|
-
children: title
|
|
109
|
-
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
110
|
-
children: [/*#__PURE__*/jsxRuntime.jsx(Button.Button, {
|
|
111
|
-
size: "sm",
|
|
112
|
-
variant: "link",
|
|
113
|
-
className: "m-0",
|
|
114
|
-
color: color,
|
|
115
|
-
icon: icons.CoreIcons.closeAll,
|
|
116
|
-
"aria-label": "close-all",
|
|
117
|
-
onClick: onCloseAll
|
|
118
|
-
}), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
|
|
119
|
-
size: "sm",
|
|
120
|
-
variant: "link",
|
|
121
|
-
className: "m-0",
|
|
122
|
-
color: color,
|
|
123
|
-
icon: icons.CoreIcons.close,
|
|
124
|
-
"aria-label": "close",
|
|
125
|
-
onClick: function onClick() {
|
|
126
|
-
return handleClose(false);
|
|
127
|
-
}
|
|
128
|
-
})]
|
|
129
|
-
})]
|
|
130
|
-
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
131
|
-
children: message
|
|
132
|
-
}), (type === "confirm" || actions) && /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
133
|
-
className: "flex gap-1 justify-end flex-nowrap pt-2",
|
|
134
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
135
|
-
className: "contents",
|
|
136
|
-
onClickCapture: function onClickCapture(e) {
|
|
137
|
-
return handleClose(e.target.value);
|
|
138
|
-
},
|
|
139
|
-
children: actions
|
|
140
|
-
}), type === "confirm" && /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
|
|
141
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
142
|
-
className: "flex-1"
|
|
143
|
-
}), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
|
|
144
|
-
size: "sm",
|
|
145
|
-
variant: "link",
|
|
146
|
-
color: color,
|
|
147
|
-
onClick: function onClick() {
|
|
148
|
-
return handleClose(false);
|
|
149
|
-
},
|
|
150
|
-
children: cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : t("action.cancel", "Cancel")
|
|
151
|
-
}), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
|
|
152
|
-
size: "sm",
|
|
153
|
-
variant: "solid",
|
|
154
|
-
color: color,
|
|
155
|
-
onClick: function onClick() {
|
|
156
|
-
return handleClose(true);
|
|
157
|
-
},
|
|
158
|
-
children: okLabel !== null && okLabel !== void 0 ? okLabel : t("action.ok", "OK")
|
|
159
|
-
})]
|
|
160
|
-
})]
|
|
161
|
-
})]
|
|
162
|
-
})]
|
|
163
|
-
});
|
|
164
|
-
};
|
|
165
|
-
|
|
166
|
-
exports.Toast = Toast;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.toast{margin-bottom:-100%;opacity:0;transition:margin .4s,opacity .3s .2s;&[data-show=true]{margin-bottom:0;opacity:1}}}
|