@react-fabric/core 1.0.0-beta.9 → 1.0.2
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 +66 -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 +66 -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 +30 -21
- package/src/components/actionLabel/ActionLabel.tsx +28 -39
- package/src/components/alert/Alert.tsx +261 -0
- package/src/components/animations/Indicator.tsx +75 -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,138 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
4
|
-
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
5
|
-
import classNames from 'classnames';
|
|
6
|
-
import { useMemo } from 'react';
|
|
7
|
-
import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
|
|
8
|
-
import { getColor, getColorClass } from '../../utils/getColor.js';
|
|
9
|
-
import '@react-fabric/utilities';
|
|
10
|
-
import classes from './Animations.module.css';
|
|
11
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
12
|
-
|
|
13
|
-
var _excluded = ["className", "color", "strokeColor", "type"],
|
|
14
|
-
_excluded2 = ["className"];
|
|
15
|
-
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; }
|
|
16
|
-
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; }
|
|
17
|
-
var AnimationIndicator = function AnimationIndicator(_ref) {
|
|
18
|
-
var className = _ref.className,
|
|
19
|
-
color = _ref.color,
|
|
20
|
-
strokeColor = _ref.strokeColor,
|
|
21
|
-
type = _ref.type,
|
|
22
|
-
aria = _objectWithoutProperties(_ref, _excluded);
|
|
23
|
-
var styles = useMemoDebugger(function () {
|
|
24
|
-
var s = {};
|
|
25
|
-
if (color) {
|
|
26
|
-
s.color = getColor(color);
|
|
27
|
-
}
|
|
28
|
-
if (strokeColor) {
|
|
29
|
-
s.stroke = getColor(strokeColor);
|
|
30
|
-
}
|
|
31
|
-
return s;
|
|
32
|
-
}, [color, strokeColor], "Animation styles");
|
|
33
|
-
var path = useMemo(function () {
|
|
34
|
-
if (type === "check") return "M14.1 27.2l7.1 7.2 16.7-16.8";
|
|
35
|
-
if (type === "cross") return "M14.1 14.1l23.8 23.8 m0,-23.8 l-23.8,23.8";
|
|
36
|
-
if (type === "question") return "M18.949 17.621c0.426-0.787 1.354-1.6 2.108-2.223 1.279-0.984 3.87-1.778 5.805-1.778 3.837 0 6.189 2.689 6.189 6.034 0 2.23-1.193 4.214-3.751 6.346-2.886 2.361-3.497 3.362-3.497 5.788v0c0-2.263 0.689-3.509 3.476-5.772 2.689-2.23 3.772-3.968 3.772-6.362 0-3.772-2.492-6.034-6.789-6.034-2.132 0-3.903 0.722-5.28 1.804-0.82 0.623-1.476 1.377-2.033 2.197zM26 41.329v0-2.948z";
|
|
37
|
-
if (type === "exclaim") return "M26.611 10.873c-0.002 1.015-0.002 2.071-0.002 3.086v11.777c0 3.086 0.002 2.232 0 3.288h-0.018c-0.001-1.056 0-0.202 0-3.288v-11.777c0-1.015 0-2.071-0.002-3.086zM26.59 37.472h0.018v3.655h-0.018z";
|
|
38
|
-
return "M26 22L26 41M27 22L27 41M25 22L25 41M26 11L26 16M27 11L27 16M25 11L25 16Z";
|
|
39
|
-
}, [type]);
|
|
40
|
-
/** ***************** component *******************/
|
|
41
|
-
return /*#__PURE__*/jsxs("svg", _objectSpread(_objectSpread({
|
|
42
|
-
"data-ref": "animated-indicator",
|
|
43
|
-
className: classNames(classes.checkAnimation, className, "inline-block rounded-full", color && getColorClass(color)),
|
|
44
|
-
style: styles,
|
|
45
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
46
|
-
viewBox: "0 0 52 52",
|
|
47
|
-
"aria-hidden": "true"
|
|
48
|
-
}, aria), {}, {
|
|
49
|
-
children: [/*#__PURE__*/jsx("circle", {
|
|
50
|
-
className: classes.circlePart,
|
|
51
|
-
cx: "26",
|
|
52
|
-
cy: "26",
|
|
53
|
-
r: "25"
|
|
54
|
-
}), /*#__PURE__*/jsx("path", {
|
|
55
|
-
className: classNames(classes.iconPart, getColorClass(strokeColor !== null && strokeColor !== void 0 ? strokeColor : "invert")),
|
|
56
|
-
d: path
|
|
57
|
-
})]
|
|
58
|
-
}));
|
|
59
|
-
};
|
|
60
|
-
var AnimationBars = function AnimationBars(_ref2) {
|
|
61
|
-
var _ref2$color = _ref2.color,
|
|
62
|
-
color = _ref2$color === void 0 ? "tint" : _ref2$color,
|
|
63
|
-
_ref2$size = _ref2.size,
|
|
64
|
-
size = _ref2$size === void 0 ? "2rem" : _ref2$size;
|
|
65
|
-
return /*#__PURE__*/jsx("div", {
|
|
66
|
-
className: classNames("absolute inset-0 z-10 flex justify-center items-center cursor-wait"),
|
|
67
|
-
children: /*#__PURE__*/jsx("div", {
|
|
68
|
-
className: classNames("outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded"),
|
|
69
|
-
children: /*#__PURE__*/jsx("div", {
|
|
70
|
-
className: classNames(classes.bars, getColorClass(color + "-500/50")),
|
|
71
|
-
style: {
|
|
72
|
-
width: size
|
|
73
|
-
}
|
|
74
|
-
})
|
|
75
|
-
})
|
|
76
|
-
});
|
|
77
|
-
};
|
|
78
|
-
var AnimationSpinner = function AnimationSpinner(_ref3) {
|
|
79
|
-
var _ref3$color = _ref3.color,
|
|
80
|
-
color = _ref3$color === void 0 ? "tint-700" : _ref3$color,
|
|
81
|
-
_ref3$size = _ref3.size,
|
|
82
|
-
size = _ref3$size === void 0 ? "2rem" : _ref3$size;
|
|
83
|
-
return /*#__PURE__*/jsx("div", {
|
|
84
|
-
className: classNames("absolute inset-0 z-10 flex justify-center items-center cursor-wait"),
|
|
85
|
-
"data-testid": "spinner",
|
|
86
|
-
children: /*#__PURE__*/jsx("div", {
|
|
87
|
-
className: classNames("outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded"),
|
|
88
|
-
children: /*#__PURE__*/jsx("div", {
|
|
89
|
-
className: classNames(classes.spinner, getColorClass(color)),
|
|
90
|
-
style: {
|
|
91
|
-
width: size
|
|
92
|
-
}
|
|
93
|
-
})
|
|
94
|
-
})
|
|
95
|
-
});
|
|
96
|
-
};
|
|
97
|
-
var Loading = function Loading() {
|
|
98
|
-
return /*#__PURE__*/jsx("div", {
|
|
99
|
-
className: classNames(classes.loader, "area-[loader] relative overflow-x-clip"),
|
|
100
|
-
"data-testid": "loading",
|
|
101
|
-
children: /*#__PURE__*/jsx("div", {
|
|
102
|
-
className: "absolute z-10 py-px inset-x-0 top-0 after:h-0.5 after:block after:bg-primary-500"
|
|
103
|
-
})
|
|
104
|
-
});
|
|
105
|
-
};
|
|
106
|
-
var Skeleton = function Skeleton(_ref4) {
|
|
107
|
-
var className = _ref4.className,
|
|
108
|
-
rest = _objectWithoutProperties(_ref4, _excluded2);
|
|
109
|
-
return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
|
|
110
|
-
className: classNames(className, "p-2 animate-pulse flex gap-2 max-w-lg"),
|
|
111
|
-
"data-testid": "skeleton"
|
|
112
|
-
}, rest), {}, {
|
|
113
|
-
children: [/*#__PURE__*/jsx("div", {
|
|
114
|
-
className: "bg-tint-100 rounded aspect-square h-12"
|
|
115
|
-
}), /*#__PURE__*/jsxs("div", {
|
|
116
|
-
className: "flex-1 flex flex-col gap-2",
|
|
117
|
-
children: [/*#__PURE__*/jsx("div", {
|
|
118
|
-
className: "bg-tint-100 h-3 rounded-full"
|
|
119
|
-
}), /*#__PURE__*/jsxs("div", {
|
|
120
|
-
className: "flex gap-2",
|
|
121
|
-
children: [/*#__PURE__*/jsx("div", {
|
|
122
|
-
className: "bg-tint-100 h-2 rounded-full basis-[30%]"
|
|
123
|
-
}), /*#__PURE__*/jsx("div", {
|
|
124
|
-
className: "bg-tint-100 h-2 rounded-full basis-[60%]"
|
|
125
|
-
})]
|
|
126
|
-
}), /*#__PURE__*/jsxs("div", {
|
|
127
|
-
className: "flex gap-2",
|
|
128
|
-
children: [/*#__PURE__*/jsx("div", {
|
|
129
|
-
className: "bg-tint-100 h-2 rounded-full basis-[30%]"
|
|
130
|
-
}), /*#__PURE__*/jsx("div", {
|
|
131
|
-
className: "bg-tint-100 h-2 rounded-full basis-[60%]"
|
|
132
|
-
})]
|
|
133
|
-
})]
|
|
134
|
-
})]
|
|
135
|
-
}));
|
|
136
|
-
};
|
|
137
|
-
|
|
138
|
-
export { AnimationBars, AnimationIndicator, AnimationSpinner, Loading, Skeleton };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{@keyframes l2{0%,25%{background-position:0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);background-size:8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px}50%{background-position:0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);background-size:8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px}75%{background-position:0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% -2px,50% calc(100% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);background-size:8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px}95%,to{background-position:0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% -2px,50% calc(100% + 2px),100% 50%,100% -2px,100% calc(100% + 2px);background-size:8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px}}.bars{--c:linear-gradient(currentcolor 0 0);--r1:radial-gradient(farthest-side at bottom,currentcolor 93%,#0000);--r2:radial-gradient(farthest-side at top,currentcolor 93%,#0000);animation:l2 1s infinite alternate;aspect-ratio:1;background:var(--c),var(--r1),var(--r2),var(--c),var(--r1),var(--r2),var(--c),var(--r1),var(--r2);background-repeat:no-repeat}@keyframes l4{to{transform:rotate(1turn)}}.spinner{--b:8px;animation:l4 2s steps(10) infinite;aspect-ratio:1;background:conic-gradient(#0000 10%,currentcolor) content-box;border-radius:50%;mask:repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));mask-composite:destination-in;mask-composite:intersect}@keyframes loader{0%{transform:translateX(calc(-100%*var(--multiplier)))}to{transform:translateX(calc(100%*var(--multiplier)))}}.loader{--multiplier:1;&>div{height:calc(.125rem + 2px);&:after{animation:loader 1s cubic-bezier(.65,0,.45,1) infinite}}:global([dir=rtl]) &{--multiplier:-1}}@keyframes check-stroke{to{stroke-dashoffset:0}}@keyframes check-scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes check-fill{to{box-shadow:inset 0 0 0 1em currentcolor}}.checkAnimation{box-shadow:inset 0 0 0 currentcolor;color:theme(colors.primary.DEFAULT);height:1.5em;width:1.5em;fill:transparent;stroke-miterlimit:10;stroke-width:4px;animation:check-fill .4s ease-in-out .4s forwards,check-scale .3s ease-in-out .9s both;animation-delay:.75s;& .circlePart{fill:transparent;stroke:currentcolor;stroke-dasharray:166;stroke-dashoffset:166;stroke-miterlimit:10;stroke-width:8px;animation:check-stroke .6s cubic-bezier(.65,0,.45,1) forwards;animation-delay:.25s}& .iconPart{transform-origin:50% 50%;stroke:currentcolor;stroke-dasharray:48;stroke-dashoffset:48;animation:check-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation-delay:.75s}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.avatar{border-radius:var(--rounding);box-shadow:0 0 1px theme(borderColor.base);height:1em;vertical-align:-.125em;width:1em;&>i,&>img,&>svg{background-color:theme(backgroundColor.dimmed);border-radius:inherit;display:block;height:1em;line-height:1;object-fit:cover;overflow:hidden;pointer-events:none;width:1em;fill:currentcolor}&>i:before{line-height:1}&>.imagePlaceholder{z-index:-1}}.avatarGroup{&>.avatar{box-shadow:0 0 0 1px theme(borderColor.muted),0 0 0 .125em var(--fabric-bg);&:not(:first-child){margin-inline-start:-.125em}}& .avatarGroup--extra{border-radius:inherit;font-size:inherit;height:1em;width:1em}}}@layer util{.avatarGroup{&>.avatar{border-radius:inherit;font-size:inherit}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{@keyframes pinger{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(3)}}.badge{--tw-bg-opacity:1;background-color:theme(colors.tint.200/var(--tw-bg-opacity));box-sizing:content-box;color:theme(textColor.base);outline:.5px solid theme(backgroundColor.base);&>span{font-size:.625em;font-weight:500;line-height:1;vertical-align:.125em}&[data-ping=true]{--translate:50%;&:before{animation:pinger 1s linear infinite;background-color:inherit;border-radius:999px;content:"";inset:0;position:absolute;z-index:-1}}&:not([data-ping=true]){--translate:0.75rem;min-width:1em}&[data-placement=top]{left:50%;top:0;transform:translate(-50%,-50%)}&[data-placement=top-start]{inset-inline-start:0;top:0;:global([dir=ltr]) &{transform:translate(calc(var(--translate)*-1),-50%)}:global([dir=rtl]) &{transform:translate(calc(var(--translate)*1),-50%)}}&[data-placement=top-end]{inset-inline-end:0;top:0;:global([dir=ltr]) &{transform:translate(calc(var(--translate)*1),-50%)}:global([dir=rtl]) &{transform:translate(calc(var(--translate)*-1),-50%)}}&[data-placement=bottom]{bottom:0;left:50%;transform:translate(-50%,50%)}&[data-placement=bottom-start]{bottom:0;inset-inline-start:0;:global([dir=ltr]) &{transform:translate(calc(var(--translate)*-1),-50%)}:global([dir=rtl]) &{transform:translate(calc(var(--translate)*1),-50%)}}&[data-placement=bottom-end]{bottom:0;inset-inline-end:0;:global([dir=ltr]) &{transform:translate(calc(var(--translate)*1),-50%)}:global([dir=rtl]) &{transform:translate(calc(var(--translate)*-1),-50%)}}&[data-placement=start]{inset-inline-start:0;top:50%;:global([dir=ltr]) &{transform:translate(-50%,-50%)}:global([dir=rtl]) &{transform:translate(50%,-50%)}}&[data-placement=end]{inset-inline-end:0;top:50%;:global([dir=ltr]) &{transform:translate(50%,-50%)}:global([dir=rtl]) &{transform:translate(-50%,-50%)}}}}
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
4
|
-
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
5
|
-
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
6
|
-
import classNames from 'classnames';
|
|
7
|
-
import { useMemo, Children } from 'react';
|
|
8
|
-
import { Link } from '../../typography/Link.js';
|
|
9
|
-
import { Dropdown } from '../dropdown/Dropdown.js';
|
|
10
|
-
import classes from './Breadcrumbs.module.css';
|
|
11
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
12
|
-
|
|
13
|
-
var _excluded = ["variant", "className", "separator", "children", "color"];
|
|
14
|
-
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; }
|
|
15
|
-
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; }
|
|
16
|
-
var Breadcrumbs = function Breadcrumbs(_ref) {
|
|
17
|
-
var _ref$variant = _ref.variant,
|
|
18
|
-
variant = _ref$variant === void 0 ? "classic" : _ref$variant,
|
|
19
|
-
className = _ref.className,
|
|
20
|
-
_ref$separator = _ref.separator,
|
|
21
|
-
separator = _ref$separator === void 0 ? "/" : _ref$separator,
|
|
22
|
-
children = _ref.children,
|
|
23
|
-
color = _ref.color,
|
|
24
|
-
aria = _objectWithoutProperties(_ref, _excluded);
|
|
25
|
-
var _useMemo = useMemo(function () {
|
|
26
|
-
var nodeList = Children.toArray(children);
|
|
27
|
-
if (nodeList.length > 7) {
|
|
28
|
-
return [nodeList.slice(0, 3), nodeList.slice(3, -3), nodeList.slice(-3)];
|
|
29
|
-
}
|
|
30
|
-
return [nodeList];
|
|
31
|
-
}, [children]),
|
|
32
|
-
_useMemo2 = _slicedToArray(_useMemo, 3),
|
|
33
|
-
start = _useMemo2[0],
|
|
34
|
-
overflow = _useMemo2[1],
|
|
35
|
-
end = _useMemo2[2];
|
|
36
|
-
return /*#__PURE__*/jsxs("nav", _objectSpread(_objectSpread({
|
|
37
|
-
"data-color": color,
|
|
38
|
-
"data-variant": variant,
|
|
39
|
-
className: classNames(classes.breadcrumbs, className, "flex flex-nowrap items-center")
|
|
40
|
-
}, aria), {}, {
|
|
41
|
-
children: [start.map(function (link, idx) {
|
|
42
|
-
return /*#__PURE__*/jsx("li", {
|
|
43
|
-
className: classes.breadcrumbLink,
|
|
44
|
-
"data-separator": separator,
|
|
45
|
-
children: link
|
|
46
|
-
}, idx);
|
|
47
|
-
}), overflow && /*#__PURE__*/jsxs(Dropdown, {
|
|
48
|
-
closeOnClick: true,
|
|
49
|
-
showArrow: true,
|
|
50
|
-
children: [/*#__PURE__*/jsx("li", {
|
|
51
|
-
className: classes.breadcrumbLink,
|
|
52
|
-
"data-separator": separator,
|
|
53
|
-
children: /*#__PURE__*/jsx(Link, {
|
|
54
|
-
children: "..."
|
|
55
|
-
})
|
|
56
|
-
}), /*#__PURE__*/jsx("div", {
|
|
57
|
-
"data-color": color,
|
|
58
|
-
className: classNames(classes.breadcrumbOverflow, "flex flex-col"),
|
|
59
|
-
children: overflow
|
|
60
|
-
})]
|
|
61
|
-
}), end === null || end === void 0 ? void 0 : end.map(function (link, idx) {
|
|
62
|
-
return /*#__PURE__*/jsx("li", {
|
|
63
|
-
className: classes.breadcrumbLink,
|
|
64
|
-
"data-separator": separator,
|
|
65
|
-
children: link
|
|
66
|
-
}, idx);
|
|
67
|
-
})]
|
|
68
|
-
}));
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
export { Breadcrumbs };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.breadcrumbOverflow,.breadcrumbs{--color:theme(colors.primary.DEFAULT);&[data-color=accent]{--color:theme(colors.accent.DEFAULT)}&[data-color=info]{--color:theme(colors.info.DEFAULT)}&[data-color=danger]{--color:theme(colors.danger.DEFAULT)}&[data-color=success]{--color:theme(colors.success.DEFAULT)}&[data-color=warning]{--color:theme(colors.warning.DEFAULT)}& :global(.link){padding:.25em .5em;text-decoration:none}}.breadcrumbOverflow,.breadcrumbs[data-variant=classic]{& :global(.link){color:color-mix(in lab,var(--color) 90%,var(--fabric-text))}& :global(.link):hover{background-color:theme(colors.tint.50/50%);color:color-mix(in lab,var(--color) 99%,var(--fabric-text));text-decoration:underline}& :global(.link):active{background-color:theme(colors.tint.50);color:color-mix(in lab,var(--color) 85%,var(--fabric-text))}}.breadcrumbs[data-variant=classic]{&>.breadcrumbLink{list-style:none;&:after{color:theme(colors.tint.300);content:attr(data-separator);display:inline-block;margin-inline:.125em}&:last-child:after{content:unset}}}[data-ref=viewport] .breadcrumbs{grid-area:crumbbar;padding:0 .25rem}}@layer var{.breadcrumbs[data-variant=classic]{&>:global(.link){max-width:24rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}&>.breadcrumbLink:last-child>:global(.link){color:theme(colors.tint.600);pointer-events:none}}.breadcrumbs[data-variant=modern]{&>.breadcrumbLink{--linkcolor:color-mix(in lab,var(--color) 50%,var(--fabric-bg));border-radius:var(--rounding);list-style:none;position:relative;&:last-child{--color:theme(colors.tint.500);pointer-events:none}&:first-child>:global(.link){border-end-start-radius:var(--rounding);border-start-start-radius:var(--rounding)}&:last-child>:global(.link){border-end-end-radius:var(--rounding);border-start-end-radius:var(--rounding)}&:not(:first-child){margin-inline-start:-1em;&:before{border:.625em solid transparent;border-block-color:var(--linkcolor);border-inline-end-color:var(--linkcolor);content:"";display:inline-block;vertical-align:middle}&>:global(.link){margin-inline-start:-.625em}}&:not(:last-child){&:after{border:.625em solid transparent;border-inline-start-color:var(--linkcolor);content:"";display:inline-block;vertical-align:middle}}&>:global(.link){background-color:var(--linkcolor);color:color-mix(in lab,var(--color) 50%,var(--fabric-text));display:inline-block;line-height:1;padding:.125em .5em;vertical-align:middle}&:hover{--linkcolor:color-mix(in lab,var(--color) 65%,var(--fabric-bg))}&:active{--linkcolor:color-mix(in lab,var(--color) 35%,var(--fabric-bg))}}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.buttonWrapper{--color:theme(colors.primary.500);border-radius:var(--rounding);font-size:1rem;& .button{background-color:var(--bg);background-image:var(--click-gradient);border-radius:inherit;color:var(--text);outline:1px solid var(--outline);&.spinOnHover:hover .buttonIcon{& :global{animation:spin 2s linear infinite}}&>*{pointer-events:none}&:not(:disabled) input[type=file]{pointer-events:auto;&::-webkit-file-upload-button{cursor:pointer;inset:0;position:absolute}}}& .rounded{border-radius:9999px}& .buttonLabel{line-height:1;order:1;padding:.5em 1em;&+.altIcon{margin-inline-start:-1em}}& .buttonChild{line-height:1;order:1;padding:.5em}& .buttonIcon{font-size:1.125em;padding:.3889em}& :global(.hotkey-label){align-self:center;order:3}& .altIcon{align-self:center;order:4;padding:.125em .5em}& [data-ref=badge]{align-self:center;margin-inline-end:.5em;order:2}}.buttonGroup{&>.buttonWrapper{flex:0 1 1em}&:not(.flex)+&:not(.flex){margin-inline-start:.5rem}}}@layer util{.buttonWrapper{&[data-size=xs]{font-size:.625rem}&[data-size=sm]{font-size:.875rem}&[data-size=md]{font-size:1.125rem}&[data-size=lg]{font-size:1.25rem}&[data-size=xl]{font-size:1.5rem}}.button{--bg:color-mix(in lab,var(--fabric-bg) 99%,var(--tint));--outline:color-mix(in lab,var(--bg) 90%,var(--fabric-text));--text:color-mix(in lab,var(--color) 80%,var(--fabric-text));--bg-hover:color-mix(in lab,var(--color) 18%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 25%,var(--fabric-bg));--bg-active:color-mix(in lab,var(--color) 36%,var(--fabric-bg));&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&[data-variant=outline]{--outline:var(--color)}&[data-variant=solid]{--outline:var(--color);--bg:color-mix(in lab,var(--color) 96%,var(--fabric-text));--text:theme(colors.white);--bg-hover:color-mix(in lab,var(--color) 90%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 80%,theme(colors.black));--bg-active:color-mix(in lab,var(--color) 70%,theme(colors.black));& :global(.hotkey-label){background-color:theme(backgroundColor.dark/30%);color:theme(colors.white/70%)}}&[data-variant=link]{--bg:transparent;--outline:transparent;background-image:none;box-shadow:none}&[data-color=invert]{--bg:theme(backgroundColor.invert);--text:color-mix(in lab,var(--color) 90%,theme(textColor.invert));--bg-hover:color-mix(in lab,var(--color) 15%,theme(backgroundColor.invert));--bg-click:color-mix(in lab,var(--color) 35%,theme(backgroundColor.invert))}}.buttonIcon[data-align=start]{order:0;&+.buttonLabel[data-colored-icon=false]{margin-inline-start:-1em}}.buttonIcon[data-align=end]{order:2;&~.buttonLabel[data-colored-icon=false]{margin-inline-end:-1em}}}@layer var{.buttonWrapper{height:unset;padding:unset;&[data-disabled=true]{cursor:not-allowed;& .button{background-image:var(--active-gradient);opacity:.5;pointer-events:none}}&[data-loading=true]{cursor:wait;& .button{background-image:var(--progress-gradient);background-size:1em 1em;pointer-events:none;& :global{animation:bgprogress .75s linear infinite}}& .button:not([data-variant=solid]){background-color:color-mix(in lab,var(--color) 15%,var(--fabric-bg))}}&:global(.btn-dashed)>.button{color:theme(colors.tint.600);outline:1px dashed theme(colors.tint.600);&[data-invalid=true]{background-color:theme(colors.danger.100);color:theme(colors.danger.600);outline:1px dashed theme(colors.danger.600)}}}.button{--tw-ring-color:var(--color);&:hover{background-color:var(--bg-hover)}&:active{background-color:var(--bg-click);background-image:var(--active-gradient);.buttonIcon,.buttonLabel{transform:translateY(1px)}}&[data-active=true],&[data-checked=true],&[data-dropdown-open=true]{background-color:var(--bg-active);background-image:none}&[data-active=true],&[data-dropdown-open=true]{pointer-events:none}}.buttonGroup{&>.buttonWrapper{margin:0;& .button[data-variant=link]{--outline:theme(backgroundColor.base)}}&:not(.vertical){&>:not(:first-child){&:before{border-inline-start:.5px solid theme(borderColor.base);content:"";inset-block:5%;inset-inline-start:-.5px;position:absolute}}&.separator>:not(:first-child){margin-inline-start:2px;&:before{inset-inline-start:-1.5px}}&>:not(:last-child) .button{border-end-end-radius:0;border-start-end-radius:0}&>:not(:first-child) .button{border-end-start-radius:0;border-start-start-radius:0}}&.vertical{&>:not(:first-child){&:before{border-block-start:.5px solid theme(borderColor.base);content:"";inset-block-start:-.5px;inset-inline:5%;position:absolute}}&.separator>:not(:first-child){margin-block-start:1px;&:before{inset-block-start:-1px}}&>:not(:last-child) .button{border-end-end-radius:0;border-end-start-radius:0}&>:not(:first-child) .button{border-start-end-radius:0;border-start-start-radius:0}}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.cardWrapper.selected{&:before{border-bottom:1rem solid transparent;border-inline-end:1rem solid transparent;border-inline-start:1rem solid theme(colors.accent.500);border-start-start-radius:var(--rounding-cap);border-top:1rem solid theme(colors.accent.500);content:""}&:after,&:before{inset-inline-start:-4px;position:absolute;top:-4px;z-index:5}&:after{color:theme(colors.white);content:"✓";line-height:1;padding:4px}}.card{background-color:var(--fabric-bg);box-shadow:0 0 0 1px theme(borderColor.muted);&>*{background-color:transparent}& .cardCover{&.dark>.cardCoverContent,&.inheritScheme:has([data-colorset=dark])>.cardCoverContent{background-image:linear-gradient(180deg,#0000 0,#0006);color:var(--white);text-shadow:0 0 2px var(--black)}&.inheritScheme:has([data-colorset=light])>.cardCoverContent,&.light>.cardCoverContent{background-image:linear-gradient(180deg,#fff0 0,#fff6);color:var(--black);text-shadow:0 0 2px var(--white)}}& .cardBody{padding:1rem}&.clickable{box-shadow:0 0 0 1px theme(borderColor.dimmed),0 1px 2px 0 var(--fabric-shadow);transition:box-shadow 0ms;&:has(.cardBody:hover):not(:has([data-inner-clickable=true]:hover)){box-shadow:0 0 0 1px theme(borderColor.dimmed),0 1px 4px 0 var(--fabric-shadow),0 8px 16px 0 color-mix(in lab,var(--fabric-shadow) 35%,#0000);transition-delay:.15s}&:has(.cardBody:active):not(:has([data-inner-clickable=true]:hover)){box-shadow:0 0 0 1px theme(borderColor.dimmed);transform:translateY(1px);transition-delay:0ms}& .cardBody{cursor:pointer;&:after{background-image:linear-gradient(175deg,hsla(0,0%,100%,.05),transparent 18%,transparent 72%,rgb(0 0 0/5%));content:"";inset:0;pointer-events:none;position:absolute;z-index:5}}}}}@layer util{.card{& .cardBody{&>*{background-color:transparent;grid-area:unset}}& .cardCover{&>[data-ref=image],&>[data-ref=video]{inset:0;position:absolute;z-index:0}& .cardCoverContent{&>*{flex:0 0 auto}}}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{padding:0 .5em}&>.chipIcon{&+.chipLabel{margin-inline-start:-.5em}}&.clickable{background-image:var(--click-gradient);cursor:pointer;&.disabled{opacity:.5;pointer-events:none}}}}@layer var{.chip{background-color:color-mix(in lab,currentcolor 10%,var(--fabric-bg));height:unset;padding:unset;&[data-variant=outline]{box-shadow:0 0 2px color-mix(in lab,currentcolor 50%,var(--tint)) inset;outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg))}>*{color:color-mix(in lab,currentcolor 50%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 20%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 15%,var(--fabric-bg));background-image:var(--active-gradient)}&[data-dropdown-open=true]{pointer-events:none}}&[data-variant=solid]{background-color:color-mix(in lab,currentcolor 35%,var(--fabric-bg));outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg));&>*{color:color-mix(in lab,currentcolor 5%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 45%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 30%,var(--fabric-bg))}}}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.collapsable{&+&{border-top:1px solid theme(borderColor.base)}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer var{.dropdownBody{grid-template:1fr/1fr;& [data-ref=card],& [data-ref=panelGroup],& [data-ref=panel]{border-inline:0;border-top:0;box-shadow:none;grid-area:unset;outline:0}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.icon{height:1em;position:relative;vertical-align:-.125em;width:1em;&>i,&>img,&>svg{border-radius:inherit;display:block;height:1em;line-height:1;object-fit:cover;overflow:hidden;pointer-events:none;width:1em;fill:currentcolor}&>i:before{line-height:1}&[data-clickable=true]{opacity:.75;&:hover{background-color:theme(colors.text/10%);opacity:.9}&:active{opacity:.5}}}[dir=rtl] .icon[data-flip=true]{transform:scaleX(-1)}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.mediaContainer{&.mediaReel{&:after,&:before{background-image:linear-gradient(90deg,#222c 0,#222c .25rem,#fff8 0,#fff8 .75rem,#222c 0,#222c 1rem);background-position:50%;background-repeat:repeat-x;background-size:1rem;border:.125rem solid #222c;content:"";height:.5rem;inset-inline:0;position:absolute}&:before{top:0}&:after{bottom:0}}& .mediaControls{& [data-ref=button]{margin:0;&>:first-child{background-color:theme(colors.black/50%);color:#fff;&:hover{background-color:theme(colors.black/80%);color:theme(colors.primary.600)}}}& .mediaControlAction>:first-child{background-color:theme(colors.black/70%)}& .mediaControlAction+.mediaControlAction{margin-top:8px}}}}@layer util{& .mediaControls{&:hover{& .mediaControlPlaceholder{display:none}}&:not(:hover){& .mediaControlAction{display:none}}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.menuItem{--color:theme(colors.primary.DEFAULT);&[data-color=accent]{--color:theme(colors.accent.DEFAULT)}&[data-color=info]{--color:theme(colors.info.DEFAULT)}&[data-color=danger]{--color:theme(colors.danger.DEFAULT)}&[data-color=success]{--color:theme(colors.success.DEFAULT)}&[data-color=warning]{--color:theme(colors.warning.DEFAULT)}}}@layer var{.menuItem{color:color-mix(in lab,var(--color) 80%,var(--fabric-text));>*{pointer-events:none}&[data-focus=true]{background-color:color(from var(--color) srgb r g b/15%)}&:active{background-color:color(from var(--color) srgb r g b/35%)}&[data-open=true]{background-color:color(from var(--color) srgb r g b/10%)}&.active,&:global(.active){background-color:color(from var(--color) srgb r g b/20%);pointer-events:none;&>div{box-shadow:4px 0 0 var(--color) inset;:global([dir=rtl]) &{box-shadow:-4px 0 0 var(--color) inset}}}&.disabled{color:theme(textColor.tint.500);opacity:.5;pointer-events:none;&>label~*{display:none}}}.menuIcon{font-size:1.25em;padding:.3em;&.minimal{font-size:1.5em;font-weight:500;padding:.375em}}:global(.menu-list.hide-icons) .menuIcon{width:.125em}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.meter{& .meterBar{flex:1 1 1rem;height:.5em;line-height:1;max-width:12rem;min-width:1rem;&:after{width:var(--width)}}&>label{font-size:max(.75rem,.5em);line-height:1}& .meterBar[data-active=true]{&:first-child,&:nth-child(2),&:nth-child(3),&:nth-child(4),&:nth-child(5),&:nth-child(6){&:after{background-color:currentColor;opacity:.85}}&:first-child{color:#eb5e28}&:nth-child(2){color:#f9a03f}&:nth-child(3){color:#f3c053}&:nth-child(4){color:#a1c349}&:nth-child(5){color:#87a330}&:nth-child(6){color:#6a8532}}&[class*=text-accent] .meterBar[data-active=true],&[class*=text-danger] .meterBar[data-active=true],&[class*=text-info] .meterBar[data-active=true],&[class*=text-primary] .meterBar[data-active=true],&[class*=text-success] .meterBar[data-active=true],&[class*=text-warning] .meterBar[data-active=true]{color:currentColor;&:first-child:after{opacity:.2}&:nth-child(2):after{opacity:.35}&:nth-child(3):after{opacity:.5}&:nth-child(4):after{opacity:.65}&:nth-child(5):after{opacity:.8}&:nth-child(6):after{opacity:.95}}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.panel{background-color:theme(colors.bg);grid-template:"head" auto "content" 1fr/1fr;&>*{background-color:transparent}&:global(.fixed){box-shadow:0 0 18px theme(boxShadowColor.base)}& .panelHeader{background-color:theme(backgroundColor.dimmed)}& .panelAction{padding:.25rem}& .panelBody{grid-template:"head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}}@layer util{.panelGroup{&>.panel{&[data-collapsed=true]{flex:0 0 auto}&[data-collapsed=false]{flex:1 1 auto;min-height:15rem;[data-ref=panelCollapse]{color:var(--tint);opacity:.25;pointer-events:none}}}&>.panel:not(:first-child){border-start-end-radius:0;border-start-start-radius:0}&>.panel:not(:last-child){border-bottom:1px solid theme(backgroundColor.base);border-end-end-radius:0;border-end-start-radius:0}}[data-ref=asideBody]>.panelGroup>.panel{border-radius:0;outline:0}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.progressbar{box-shadow:inset 0 0 4px 0 theme(boxShadowColor.dimmed);height:1em;&>div:last-child{width:calc(var(--progress)*1%);&:after{color:var(--white);content:attr(data-label);font-size:.5em;inset-block:0;inset-inline-start:0;line-height:.5em;padding:.75em;position:absolute;text-align:center;vertical-align:middle;width:calc((100/var(--progress))*100%)}}.progressTrack{transition:width .5s;width:calc(var(--progress)*1%)}&>div:first-child{font-size:.5em;line-height:.5em;padding:.75em}}.progressAnimate{background-image:var(--progress-gradient);background-size:1rem 1rem;& :global{animation:progress .75s linear infinite}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.tabPanel{--color:theme(colors.primary.500);&>.tabList{grid-area:tablist;&>.tabButton{&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&:not(:global(.active)):hover{background-color:theme(colors.tint.100/50%);color:color-mix(in lab,var(--color) 65%,var(--fabric-text))}&:global(.active){--active-color:var(--color);color:color-mix(in lab,var(--color) 65%,var(--fabric-text));font-weight:500}}}&[data-variant=outline]{&>.tabList>.tabButton:global(.active){--active-color:theme(backgroundColor.base);--active-border:0 0 0 1px theme(borderColor.base) inset;background-color:theme(backgroundColor.base)}}&[data-variant=solid]{&>.tabList>.tabButton:global(.active){background-color:var(--color);color:theme(colors.white)}}&[data-variant=soft]{&>.tabList>.tabButton:global(.active){background-color:color-mix(in lab,var(--color) 20%,var(--fabric-bg))}}&[data-orientation=top]{grid-template:"tablist" auto "content" 1fr/1fr;padding-inline:2px;&[data-variant=outline]>.tabList,&[data-variant=soft]>.tabList,&[data-variant=solid]>.tabList{box-shadow:inset 0 -1px 0 theme(borderColor.dimmed)}}&[data-orientation=bottom]{grid-template:"content" 1fr "tablist" auto/1fr;padding-inline:2px;&[data-variant=outline]>.tabList,&[data-variant=soft]>.tabList,&[data-variant=solid]>.tabList{box-shadow:inset 0 1px 0 theme(borderColor.dimmed)}}&[data-orientation=start]{grid-template:"tablist content" 1fr/auto 1fr;padding-block:2px;&[data-variant=outline]>.tabList,&[data-variant=soft]>.tabList,&[data-variant=solid]>.tabList{box-shadow:inset -1px 0 0 theme(borderColor.dimmed)}}&[data-orientation=end]{grid-template:"content tablist" 1fr/1fr auto;padding-block:2px;&[data-variant=outline]>.tabList,&[data-variant=soft]>.tabList,&[data-variant=solid]>.tabList{box-shadow:inset 1px 0 0 theme(borderColor.dimmed)}}}}@layer util{.tabPanel{&>.tabList>.tabButton:global(.active){pointer-events:none}&[data-orientation=top]>.tabList{&>.tabButton:global(.active){box-shadow:0 -2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=bottom]>.tabList{&>.tabButton:global(.active){box-shadow:0 2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=start]>.tabList{&>.tabButton:global(.active){box-shadow:-2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=end]>.tabList{&>.tabButton:global(.active){box-shadow:2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=top]>.tabList>.tabButton{border-end-end-radius:0;border-end-start-radius:0;margin-top:2px;margin-inline:1px}&[data-orientation=bottom]>.tabList>.tabButton{border-start-end-radius:0;border-start-start-radius:0;margin-bottom:2px;margin-inline:1px}&[data-orientation=start]>.tabList>.tabButton{border-end-end-radius:0;border-start-end-radius:0;margin-block:1px;margin-inline-start:2px}&[data-orientation=end]>.tabList>.tabButton{border-end-start-radius:0;border-start-start-radius:0;margin-block:1px;margin-inline-end:2px}}}
|
|
@@ -1,254 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
|
|
4
|
-
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
5
|
-
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
6
|
-
import _regeneratorRuntime from '@babel/runtime/regenerator';
|
|
7
|
-
import { uuid, isString, isObject } from '@react-fabric/utilities';
|
|
8
|
-
import { useRef, useState, useEffect, Fragment } from 'react';
|
|
9
|
-
import { createPortal } from 'react-dom';
|
|
10
|
-
import { Alert } from '../overlays/alert/Alert.js';
|
|
11
|
-
import { Message } from '../overlays/message/Message.js';
|
|
12
|
-
import { Toast } from '../overlays/toast/Toast.js';
|
|
13
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
14
|
-
|
|
15
|
-
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; }
|
|
16
|
-
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; }
|
|
17
|
-
/** ***************** refactor props *******************/
|
|
18
|
-
var makeProps = function makeProps(obj) {
|
|
19
|
-
if (isString(obj)) {
|
|
20
|
-
return {
|
|
21
|
-
message: obj
|
|
22
|
-
};
|
|
23
|
-
} else if (isObject(obj)) {
|
|
24
|
-
return _objectSpread({}, obj);
|
|
25
|
-
}
|
|
26
|
-
return {
|
|
27
|
-
message: ""
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
|
-
var NotificationManager = function NotificationManager(_ref) {
|
|
31
|
-
var onLoad = _ref.onLoad;
|
|
32
|
-
var refItems = useRef({
|
|
33
|
-
toasts: {},
|
|
34
|
-
messages: {},
|
|
35
|
-
alerts: {}
|
|
36
|
-
});
|
|
37
|
-
var _useState = useState({}),
|
|
38
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
39
|
-
messages = _useState2[0],
|
|
40
|
-
setMessages = _useState2[1];
|
|
41
|
-
var _useState3 = useState({}),
|
|
42
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
43
|
-
toasts = _useState4[0],
|
|
44
|
-
setToasts = _useState4[1];
|
|
45
|
-
var _useState5 = useState({}),
|
|
46
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
47
|
-
alerts = _useState6[0],
|
|
48
|
-
setAlerts = _useState6[1];
|
|
49
|
-
var updateMessages = useRef(function () {
|
|
50
|
-
setMessages(_objectSpread({}, refItems.current.messages));
|
|
51
|
-
});
|
|
52
|
-
var updateToasts = useRef(function () {
|
|
53
|
-
setToasts(_objectSpread({}, refItems.current.toasts));
|
|
54
|
-
});
|
|
55
|
-
var updateAlerts = useRef(function () {
|
|
56
|
-
setAlerts(_objectSpread({}, refItems.current.alerts));
|
|
57
|
-
});
|
|
58
|
-
var handleCloseAll = useRef(function () {
|
|
59
|
-
Object.values(refItems.current.messages).forEach(function (msg) {
|
|
60
|
-
var _msg$;
|
|
61
|
-
return (_msg$ = msg[1]) === null || _msg$ === void 0 ? void 0 : _msg$.call(msg, false);
|
|
62
|
-
});
|
|
63
|
-
Object.values(refItems.current.toasts).forEach(function (msg) {
|
|
64
|
-
var _msg$2;
|
|
65
|
-
return (_msg$2 = msg[1]) === null || _msg$2 === void 0 ? void 0 : _msg$2.call(msg, false);
|
|
66
|
-
});
|
|
67
|
-
Object.values(refItems.current.alerts).forEach(function (msg) {
|
|
68
|
-
var _msg$3;
|
|
69
|
-
return (_msg$3 = msg[1]) === null || _msg$3 === void 0 ? void 0 : _msg$3.call(msg, false);
|
|
70
|
-
});
|
|
71
|
-
refItems.current.messages = {};
|
|
72
|
-
refItems.current.toasts = {};
|
|
73
|
-
refItems.current.alerts = {};
|
|
74
|
-
updateMessages.current();
|
|
75
|
-
updateToasts.current();
|
|
76
|
-
updateAlerts.current();
|
|
77
|
-
});
|
|
78
|
-
var openNotification = useRef( /*#__PURE__*/function () {
|
|
79
|
-
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(map, update, Notif, props) {
|
|
80
|
-
var timeout,
|
|
81
|
-
timerRef,
|
|
82
|
-
obj,
|
|
83
|
-
_args = arguments;
|
|
84
|
-
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
85
|
-
while (1) switch (_context.prev = _context.next) {
|
|
86
|
-
case 0:
|
|
87
|
-
timeout = _args.length > 4 && _args[4] !== undefined ? _args[4] : 5000;
|
|
88
|
-
timerRef = null;
|
|
89
|
-
obj = makeProps(props);
|
|
90
|
-
_context.next = 5;
|
|
91
|
-
return new Promise(function (resolve) {
|
|
92
|
-
var key = uuid();
|
|
93
|
-
var handleClose = function handleClose() {
|
|
94
|
-
var b = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
95
|
-
clearTimeout(timerRef);
|
|
96
|
-
setTimeout(function () {
|
|
97
|
-
// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
|
|
98
|
-
delete map[key];
|
|
99
|
-
update();
|
|
100
|
-
resolve(b);
|
|
101
|
-
}, 250);
|
|
102
|
-
};
|
|
103
|
-
map[key] = [/*#__PURE__*/jsx("div", {
|
|
104
|
-
children: /*#__PURE__*/jsx(Notif, _objectSpread(_objectSpread({}, obj), {}, {
|
|
105
|
-
onClose: handleClose,
|
|
106
|
-
onCloseAll: handleCloseAll.current
|
|
107
|
-
}))
|
|
108
|
-
}, key), handleClose];
|
|
109
|
-
update();
|
|
110
|
-
if (obj.type !== "confirm" && timeout > 0) {
|
|
111
|
-
timerRef = setTimeout(handleClose, timeout);
|
|
112
|
-
}
|
|
113
|
-
});
|
|
114
|
-
case 5:
|
|
115
|
-
return _context.abrupt("return", _context.sent);
|
|
116
|
-
case 6:
|
|
117
|
-
case "end":
|
|
118
|
-
return _context.stop();
|
|
119
|
-
}
|
|
120
|
-
}, _callee);
|
|
121
|
-
}));
|
|
122
|
-
return function (_x, _x2, _x3, _x4) {
|
|
123
|
-
return _ref2.apply(this, arguments);
|
|
124
|
-
};
|
|
125
|
-
}());
|
|
126
|
-
var showMessage = useRef( /*#__PURE__*/function () {
|
|
127
|
-
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(props) {
|
|
128
|
-
var timeout,
|
|
129
|
-
_args2 = arguments;
|
|
130
|
-
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
|
|
131
|
-
while (1) switch (_context2.prev = _context2.next) {
|
|
132
|
-
case 0:
|
|
133
|
-
timeout = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : 5000;
|
|
134
|
-
_context2.next = 3;
|
|
135
|
-
return openNotification.current(refItems.current.messages, updateMessages.current, Message, props, timeout);
|
|
136
|
-
case 3:
|
|
137
|
-
return _context2.abrupt("return", _context2.sent);
|
|
138
|
-
case 4:
|
|
139
|
-
case "end":
|
|
140
|
-
return _context2.stop();
|
|
141
|
-
}
|
|
142
|
-
}, _callee2);
|
|
143
|
-
}));
|
|
144
|
-
return function (_x5) {
|
|
145
|
-
return _ref3.apply(this, arguments);
|
|
146
|
-
};
|
|
147
|
-
}());
|
|
148
|
-
var showToast = useRef( /*#__PURE__*/function () {
|
|
149
|
-
var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(props) {
|
|
150
|
-
var timeout,
|
|
151
|
-
_args3 = arguments;
|
|
152
|
-
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
|
|
153
|
-
while (1) switch (_context3.prev = _context3.next) {
|
|
154
|
-
case 0:
|
|
155
|
-
timeout = _args3.length > 1 && _args3[1] !== undefined ? _args3[1] : 5000;
|
|
156
|
-
_context3.next = 3;
|
|
157
|
-
return openNotification.current(refItems.current.toasts, updateToasts.current, Toast, props, timeout);
|
|
158
|
-
case 3:
|
|
159
|
-
return _context3.abrupt("return", _context3.sent);
|
|
160
|
-
case 4:
|
|
161
|
-
case "end":
|
|
162
|
-
return _context3.stop();
|
|
163
|
-
}
|
|
164
|
-
}, _callee3);
|
|
165
|
-
}));
|
|
166
|
-
return function (_x6) {
|
|
167
|
-
return _ref4.apply(this, arguments);
|
|
168
|
-
};
|
|
169
|
-
}());
|
|
170
|
-
var showAlert = useRef( /*#__PURE__*/function () {
|
|
171
|
-
var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(props) {
|
|
172
|
-
return _regeneratorRuntime.wrap(function _callee4$(_context4) {
|
|
173
|
-
while (1) switch (_context4.prev = _context4.next) {
|
|
174
|
-
case 0:
|
|
175
|
-
_context4.next = 2;
|
|
176
|
-
return openNotification.current(refItems.current.alerts, updateAlerts.current, Alert, props, 0);
|
|
177
|
-
case 2:
|
|
178
|
-
return _context4.abrupt("return", _context4.sent);
|
|
179
|
-
case 3:
|
|
180
|
-
case "end":
|
|
181
|
-
return _context4.stop();
|
|
182
|
-
}
|
|
183
|
-
}, _callee4);
|
|
184
|
-
}));
|
|
185
|
-
return function (_x7) {
|
|
186
|
-
return _ref5.apply(this, arguments);
|
|
187
|
-
};
|
|
188
|
-
}());
|
|
189
|
-
var showError = useRef( /*#__PURE__*/function () {
|
|
190
|
-
var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(props) {
|
|
191
|
-
return _regeneratorRuntime.wrap(function _callee5$(_context5) {
|
|
192
|
-
while (1) switch (_context5.prev = _context5.next) {
|
|
193
|
-
case 0:
|
|
194
|
-
_context5.next = 3;
|
|
195
|
-
return openNotification.current(refItems.current.toasts, Toast, _objectSpread(_objectSpread({}, makeProps(props)), {}, {
|
|
196
|
-
color: "danger"
|
|
197
|
-
}), 0);
|
|
198
|
-
case 3:
|
|
199
|
-
return _context5.abrupt("return", _context5.sent);
|
|
200
|
-
case 4:
|
|
201
|
-
case "end":
|
|
202
|
-
return _context5.stop();
|
|
203
|
-
}
|
|
204
|
-
}, _callee5);
|
|
205
|
-
}));
|
|
206
|
-
return function (_x8) {
|
|
207
|
-
return _ref6.apply(this, arguments);
|
|
208
|
-
};
|
|
209
|
-
}());
|
|
210
|
-
useEffect(function () {
|
|
211
|
-
onLoad({
|
|
212
|
-
showMessage: showMessage.current,
|
|
213
|
-
showToast: showToast.current,
|
|
214
|
-
showAlert: showAlert.current,
|
|
215
|
-
showError: showError.current,
|
|
216
|
-
closeAll: handleCloseAll.current
|
|
217
|
-
});
|
|
218
|
-
}, []);
|
|
219
|
-
return /*#__PURE__*/jsxs(Fragment, {
|
|
220
|
-
children: [/*#__PURE__*/createPortal( /*#__PURE__*/jsx("div", {
|
|
221
|
-
style: {
|
|
222
|
-
zIndex: "var(--z-overlay)"
|
|
223
|
-
},
|
|
224
|
-
className: "ruf-container__overlays pointer-events-none fixed inset-0 p-4 bg-transparent",
|
|
225
|
-
children: Object.values(alerts).map(function (_ref7) {
|
|
226
|
-
var _ref8 = _slicedToArray(_ref7, 1),
|
|
227
|
-
el = _ref8[0];
|
|
228
|
-
return el;
|
|
229
|
-
})
|
|
230
|
-
}), document.body), /*#__PURE__*/createPortal( /*#__PURE__*/jsx("div", {
|
|
231
|
-
style: {
|
|
232
|
-
zIndex: "var(--z-notifications)"
|
|
233
|
-
},
|
|
234
|
-
className: "ruf-container__notifs flex flex-nowrap pointer-events-none fixed inset-0 p-2 bg-transparent flex-col-reverse items-center justify-end",
|
|
235
|
-
children: Object.values(messages).map(function (_ref9) {
|
|
236
|
-
var _ref10 = _slicedToArray(_ref9, 1),
|
|
237
|
-
el = _ref10[0];
|
|
238
|
-
return el;
|
|
239
|
-
})
|
|
240
|
-
}), document.body), /*#__PURE__*/createPortal( /*#__PURE__*/jsx("div", {
|
|
241
|
-
style: {
|
|
242
|
-
zIndex: "var(--z-notifications)"
|
|
243
|
-
},
|
|
244
|
-
className: "ruf-container__toasts flex flex-nowrap pointer-events-none fixed inset-0 p-4 bg-transparent flex-col items-end justify-end overflow-auto scroll-hide",
|
|
245
|
-
children: Object.values(toasts).map(function (_ref11) {
|
|
246
|
-
var _ref12 = _slicedToArray(_ref11, 1),
|
|
247
|
-
el = _ref12[0];
|
|
248
|
-
return el;
|
|
249
|
-
})
|
|
250
|
-
}), document.body)]
|
|
251
|
-
});
|
|
252
|
-
};
|
|
253
|
-
|
|
254
|
-
export { NotificationManager };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.aside{--aside-bg:color-mix(in lab,var(--fabric-bg) 95%,var(--tint));--aside-border:color-mix(in lab,var(--fabric-bg) 75%,var(--tint));background-color:var(--aside-bg);&[data-align=start]{border-inline-end:1px solid var(--aside-border);grid-area:side-s;grid-template:"head resizer" auto "loader resizer" auto "content resizer" 1fr/1fr auto;& .asideHeader{grid-template-areas:"icon title actions collapse";grid-template-columns:auto 1fr auto auto}}&[data-align=end]{border-inline-start:1px solid var(--aside-border);grid-area:side-e;grid-template:"resizer head" auto "resizer loader" auto "resizer content" 1fr/auto 1fr;& .asideHeader{grid-template-areas:"collapse icon title actions";grid-template-columns:auto auto 1fr auto}& .asideCollapse{transform:scaleX(-1)}}& .asideBody{grid-area:content;grid-template:"head" auto "content" 1fr "foot" auto/1fr;&>[data-ref=content]{background-color:transparent}}& .asideHeader{color:theme(colors.primary.600);font-weight:500;&:not(:empty){border-bottom:1px solid var(--aside-border)}}& .asideTitle{grid-area:title}& .asideIcon{grid-area:icon}.asideActions{grid-area:actions}& .asideCollapse{grid-area:collapse;&:hover{background-color:color-mix(in lab,var(--fabric-text) 10%,#0000)}}& .asidePlaceholder{background-color:var(--aside-bg);grid-area:content;z-index:4}& .asideResizer{cursor:col-resize;grid-area:resizer;position:relative;width:.25rem;&:before{border:1px solid theme(colors.tint.700);border-width:0 1.5px;height:32px}&:active:before,&:hover:before{background-color:theme(colors.primary.600);border-color:theme(backgroundColor.base);border-width:0 1.25px;height:100%}}}}@layer util{.asideBody,.asideHeader{height:unset;margin:unset;width:unset}.asideBody{&>[data-ref=content]{background-color:transparent}}.aside[data-collapsed=true]{overflow:visible;position:relative;width:2rem;& .asideBody{background-color:var(--aside-bg);inset:0;position:absolute;transition:transform .15s cubic-bezier(.4,0,.2,1);z-index:-1}& .asideHeader{position:absolute;width:2rem;z-index:5}& .asideTitle{font-size:1rem;grid-area:unset;position:absolute;top:1rem}.asideIcon{margin-inline:2px}& .asideCollapse+.asideIcon,& .asideResizer{display:none}}[dir=ltr] .aside[data-align=start][data-collapsed=true],[dir=rtl] .aside[data-align=end][data-collapsed=true]{& .asideBody{grid-area:unset;right:unset;transform:translateX(-100%)}& .asideTitle{right:calc(2rem + 2px);transform:rotate(-90deg) translateY(2rem);transform-origin:100% 100%}& .asideCollapse{transform:scaleX(-1)}&[data-flyout=true] .asideBody{box-shadow:0 0 1rem 0 var(--fabric-shadow);transform:translateX(2rem);z-index:3}}[dir=ltr] .aside[data-align=end][data-collapsed=true],[dir=rtl] .aside[data-align=start][data-collapsed=true]{& .asideBody{grid-area:unset;left:unset;transform:translateX(100%)}& .asideTitle{left:calc(2rem + 2px);transform:rotate(90deg) translateY(2rem);transform-origin:0 100%}& .asideCollapse{transform:scaleX(1)}&[data-flyout=true] .asideBody{box-shadow:0 0 1rem 0 var(--fabric-shadow);transform:translateX(-2rem);z-index:3}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.errorBoundary{align-self:flex-start;background-color:theme(colors.danger.500);background-image:repeating-linear-gradient(135deg,hsla(0,0%,100%,.5) 0 4px,hsla(0,0%,100%,.2) 4px 8px);grid-area:inherit;margin:1rem;max-height:calc(100% - 2rem);& .boundaryContent{background-color:var(--fabric-bg);grid-template:"icon message" auto "detail detail" auto/auto 1fr}& .boundaryIcon{grid-area:icon}& .boundaryMessage{grid-area:message}& .boundaryDetail{grid-area:detail;grid-template-rows:auto 1fr}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.content{--fabric-content:color-mix(in lab,var(--fabric-bg) 97%,var(--tint));background-color:var(--fabric-content);overflow:auto;padding:1rem}}@layer util{.content{height:unset;margin:unset;width:unset}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.headfoot{.buttonWrapper+.buttonWrapper{margin-inline-start:.25rem}}}@layer util{.headfoot{height:unset;margin:unset;width:unset}}
|