@forgedevstack/bear 1.0.7 → 1.0.9
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/dist/components/ActivityItem/ActivityItem.cjs +1 -1
- package/dist/components/ActivityItem/ActivityItem.js +1 -0
- package/dist/components/Alert/Alert.cjs +1 -1
- package/dist/components/Alert/Alert.const.cjs +1 -1
- package/dist/components/Alert/Alert.const.d.ts +4 -0
- package/dist/components/Alert/Alert.const.js +10 -15
- package/dist/components/Alert/Alert.js +43 -38
- package/dist/components/AppBar/AppBar.cjs +1 -1
- package/dist/components/AppBar/AppBar.js +19 -14
- package/dist/components/BackTop/BackTop.cjs +1 -0
- package/dist/components/BackTop/BackTop.const.cjs +1 -0
- package/dist/components/BackTop/BackTop.const.d.ts +34 -0
- package/dist/components/BackTop/BackTop.const.js +29 -0
- package/dist/components/BackTop/BackTop.d.ts +21 -0
- package/dist/components/BackTop/BackTop.js +87 -0
- package/dist/components/BackTop/BackTop.types.d.ts +28 -0
- package/dist/components/BackTop/index.d.ts +3 -0
- package/dist/components/Badge/Badge.cjs +1 -1
- package/dist/components/Badge/Badge.constants.d.ts +4 -4
- package/dist/components/Badge/Badge.js +15 -14
- package/dist/components/Badge/Badge.types.d.ts +3 -3
- package/dist/components/BearLogo/EmberLogo.cjs +1 -1
- package/dist/components/BearLogo/EmberLogo.js +3 -2
- package/dist/components/BottomNavigation/BottomNavigation.cjs +1 -1
- package/dist/components/BottomNavigation/BottomNavigation.js +3 -2
- package/dist/components/BottomSheet/BottomSheet.cjs +1 -1
- package/dist/components/BottomSheet/BottomSheet.js +39 -38
- package/dist/components/Button/Button.cjs +1 -1
- package/dist/components/Button/Button.constants.cjs +38 -48
- package/dist/components/Button/Button.constants.d.ts +22 -3
- package/dist/components/Button/Button.constants.js +51 -50
- package/dist/components/Button/Button.d.ts +14 -7
- package/dist/components/Button/Button.js +123 -45
- package/dist/components/Button/Button.types.d.ts +22 -4
- package/dist/components/Calendar/Calendar.cjs +1 -1
- package/dist/components/Calendar/Calendar.js +3 -2
- package/dist/components/Card/Card.const.d.ts +2 -2
- package/dist/components/Card/Card.types.d.ts +2 -2
- package/dist/components/Carousel/Carousel.cjs +1 -1
- package/dist/components/Carousel/Carousel.const.cjs +1 -0
- package/dist/components/Carousel/Carousel.const.d.ts +12 -0
- package/dist/components/Carousel/Carousel.const.js +9 -0
- package/dist/components/Carousel/Carousel.d.ts +14 -3
- package/dist/components/Carousel/Carousel.js +222 -75
- package/dist/components/Carousel/Carousel.types.d.ts +32 -2
- package/dist/components/Carousel/index.d.ts +1 -1
- package/dist/components/Chat/Chat.cjs +1 -0
- package/dist/components/Chat/Chat.const.cjs +1 -0
- package/dist/components/Chat/Chat.const.d.ts +26 -0
- package/dist/components/Chat/Chat.const.js +29 -0
- package/dist/components/Chat/Chat.d.ts +21 -0
- package/dist/components/Chat/Chat.js +179 -0
- package/dist/components/Chat/Chat.types.d.ts +55 -0
- package/dist/components/Chat/index.d.ts +2 -0
- package/dist/components/Chip/Chip.cjs +1 -1
- package/dist/components/Chip/Chip.js +3 -2
- package/dist/components/CodeEditor/CodeEditor.cjs +5 -0
- package/dist/components/CodeEditor/CodeEditor.const.cjs +1 -0
- package/dist/components/CodeEditor/CodeEditor.const.d.ts +21 -0
- package/dist/components/CodeEditor/CodeEditor.const.js +119 -0
- package/dist/components/CodeEditor/CodeEditor.d.ts +22 -0
- package/dist/components/CodeEditor/CodeEditor.js +250 -0
- package/dist/components/CodeEditor/CodeEditor.types.d.ts +80 -0
- package/dist/components/CodeEditor/CodeEditor.utils.cjs +1 -0
- package/dist/components/CodeEditor/CodeEditor.utils.d.ts +6 -0
- package/dist/components/CodeEditor/CodeEditor.utils.js +75 -0
- package/dist/components/CodeEditor/index.d.ts +2 -0
- package/dist/components/Columns/Columns.cjs +1 -1
- package/dist/components/Columns/Columns.js +9 -8
- package/dist/components/Confetti/Confetti.cjs +1 -0
- package/dist/components/Confetti/Confetti.const.cjs +1 -0
- package/dist/components/Confetti/Confetti.const.d.ts +16 -0
- package/dist/components/Confetti/Confetti.const.js +36 -0
- package/dist/components/Confetti/Confetti.d.ts +23 -0
- package/dist/components/Confetti/Confetti.js +94 -0
- package/dist/components/Confetti/Confetti.types.d.ts +50 -0
- package/dist/components/Confetti/index.d.ts +4 -0
- package/dist/components/Confetti/useConfetti.cjs +1 -0
- package/dist/components/Confetti/useConfetti.d.ts +13 -0
- package/dist/components/Confetti/useConfetti.js +12 -0
- package/dist/components/CountdownTimer/CountdownTimer.cjs +1 -0
- package/dist/components/CountdownTimer/CountdownTimer.const.cjs +1 -0
- package/dist/components/CountdownTimer/CountdownTimer.const.d.ts +27 -0
- package/dist/components/CountdownTimer/CountdownTimer.const.js +35 -0
- package/dist/components/CountdownTimer/CountdownTimer.d.ts +7 -0
- package/dist/components/CountdownTimer/CountdownTimer.js +115 -0
- package/dist/components/CountdownTimer/CountdownTimer.types.d.ts +56 -0
- package/dist/components/CountdownTimer/index.d.ts +2 -0
- package/dist/components/Cropper/Cropper.cjs +1 -0
- package/dist/components/Cropper/Cropper.const.cjs +1 -0
- package/dist/components/Cropper/Cropper.const.d.ts +31 -0
- package/dist/components/Cropper/Cropper.const.js +33 -0
- package/dist/components/Cropper/Cropper.d.ts +21 -0
- package/dist/components/Cropper/Cropper.js +362 -0
- package/dist/components/Cropper/Cropper.types.d.ts +72 -0
- package/dist/components/Cropper/index.d.ts +2 -0
- package/dist/components/DataTable/DataTable.cjs +1 -1
- package/dist/components/DataTable/DataTable.js +5 -4
- package/dist/components/DatePicker/DatePicker.cjs +1 -1
- package/dist/components/DatePicker/DatePicker.js +3 -2
- package/dist/components/DiffViewer/DiffViewer.cjs +1 -0
- package/dist/components/DiffViewer/DiffViewer.const.cjs +1 -0
- package/dist/components/DiffViewer/DiffViewer.const.d.ts +18 -0
- package/dist/components/DiffViewer/DiffViewer.const.js +21 -0
- package/dist/components/DiffViewer/DiffViewer.d.ts +18 -0
- package/dist/components/DiffViewer/DiffViewer.js +127 -0
- package/dist/components/DiffViewer/DiffViewer.types.d.ts +40 -0
- package/dist/components/DiffViewer/DiffViewer.utils.cjs +3 -0
- package/dist/components/DiffViewer/DiffViewer.utils.d.ts +9 -0
- package/dist/components/DiffViewer/DiffViewer.utils.js +39 -0
- package/dist/components/DiffViewer/index.d.ts +2 -0
- package/dist/components/Divider/Divider.cjs +1 -1
- package/dist/components/Divider/Divider.js +15 -14
- package/dist/components/Dock/Dock.cjs +1 -0
- package/dist/components/Dock/Dock.const.cjs +1 -0
- package/dist/components/Dock/Dock.const.d.ts +25 -0
- package/dist/components/Dock/Dock.const.js +22 -0
- package/dist/components/Dock/Dock.d.ts +7 -0
- package/dist/components/Dock/Dock.js +144 -0
- package/dist/components/Dock/Dock.types.d.ts +42 -0
- package/dist/components/Dock/index.d.ts +2 -0
- package/dist/components/Drawer/Drawer.cjs +1 -1
- package/dist/components/Drawer/Drawer.js +35 -35
- package/dist/components/EmptyState/EmptyState.cjs +1 -1
- package/dist/components/EmptyState/EmptyState.js +7 -6
- package/dist/components/FloatingChat/FloatingChat.cjs +1 -0
- package/dist/components/FloatingChat/FloatingChat.const.cjs +1 -0
- package/dist/components/FloatingChat/FloatingChat.const.d.ts +12 -0
- package/dist/components/FloatingChat/FloatingChat.const.js +15 -0
- package/dist/components/FloatingChat/FloatingChat.d.ts +19 -0
- package/dist/components/FloatingChat/FloatingChat.js +144 -0
- package/dist/components/FloatingChat/FloatingChat.types.d.ts +44 -0
- package/dist/components/FloatingChat/index.d.ts +2 -0
- package/dist/components/GradientText/GradientText.cjs +1 -0
- package/dist/components/GradientText/GradientText.const.cjs +1 -0
- package/dist/components/GradientText/GradientText.const.d.ts +15 -0
- package/dist/components/GradientText/GradientText.const.js +36 -0
- package/dist/components/GradientText/GradientText.d.ts +7 -0
- package/dist/components/GradientText/GradientText.js +52 -0
- package/dist/components/GradientText/GradientText.types.d.ts +27 -0
- package/dist/components/GradientText/index.d.ts +2 -0
- package/dist/components/Highlight/Highlight.cjs +1 -1
- package/dist/components/Highlight/Highlight.const.cjs +1 -0
- package/dist/components/Highlight/Highlight.const.d.ts +8 -0
- package/dist/components/Highlight/Highlight.const.js +15 -0
- package/dist/components/Highlight/Highlight.d.ts +4 -0
- package/dist/components/Highlight/Highlight.js +32 -24
- package/dist/components/Highlight/Highlight.types.d.ts +9 -1
- package/dist/components/Highlight/index.d.ts +1 -1
- package/dist/components/Icon/Icon.cjs +1 -1
- package/dist/components/Icon/Icon.js +17 -16
- package/dist/components/Icon/index.cjs +1 -1
- package/dist/components/Icon/index.js +12 -11
- package/dist/components/JsonViewer/JsonViewer.cjs +1 -0
- package/dist/components/JsonViewer/JsonViewer.const.cjs +1 -0
- package/dist/components/JsonViewer/JsonViewer.const.d.ts +4 -0
- package/dist/components/JsonViewer/JsonViewer.const.js +24 -0
- package/dist/components/JsonViewer/JsonViewer.d.ts +17 -0
- package/dist/components/JsonViewer/JsonViewer.js +195 -0
- package/dist/components/JsonViewer/JsonViewer.types.d.ts +54 -0
- package/dist/components/JsonViewer/index.d.ts +2 -0
- package/dist/components/Kanban/Kanban.cjs +1 -1
- package/dist/components/Kanban/Kanban.js +18 -17
- package/dist/components/Kbd/Kbd.cjs +1 -1
- package/dist/components/Kbd/Kbd.js +17 -16
- package/dist/components/Map/Map.cjs +1 -0
- package/dist/components/Map/Map.const.cjs +1 -0
- package/dist/components/Map/Map.const.d.ts +20 -0
- package/dist/components/Map/Map.const.js +26 -0
- package/dist/components/Map/Map.d.ts +20 -0
- package/dist/components/Map/Map.js +259 -0
- package/dist/components/Map/Map.types.d.ts +81 -0
- package/dist/components/Map/index.d.ts +2 -0
- package/dist/components/Marquee/Marquee.cjs +1 -0
- package/dist/components/Marquee/Marquee.const.cjs +1 -0
- package/dist/components/Marquee/Marquee.const.d.ts +11 -0
- package/dist/components/Marquee/Marquee.const.js +12 -0
- package/dist/components/Marquee/Marquee.d.ts +7 -0
- package/dist/components/Marquee/Marquee.js +106 -0
- package/dist/components/Marquee/Marquee.types.d.ts +32 -0
- package/dist/components/Marquee/index.d.ts +2 -0
- package/dist/components/Masonry/Masonry.cjs +1 -0
- package/dist/components/Masonry/Masonry.const.cjs +1 -0
- package/dist/components/Masonry/Masonry.const.d.ts +9 -0
- package/dist/components/Masonry/Masonry.const.js +9 -0
- package/dist/components/Masonry/Masonry.d.ts +7 -0
- package/dist/components/Masonry/Masonry.js +51 -0
- package/dist/components/Masonry/Masonry.types.d.ts +21 -0
- package/dist/components/Masonry/index.d.ts +2 -0
- package/dist/components/NavigableSelect/NavigableSelect.cjs +1 -0
- package/dist/components/NavigableSelect/NavigableSelect.const.cjs +1 -0
- package/dist/components/NavigableSelect/NavigableSelect.const.d.ts +23 -0
- package/dist/components/NavigableSelect/NavigableSelect.const.js +33 -0
- package/dist/components/NavigableSelect/NavigableSelect.d.ts +7 -0
- package/dist/components/NavigableSelect/NavigableSelect.js +361 -0
- package/dist/components/NavigableSelect/NavigableSelect.types.d.ts +56 -0
- package/dist/components/NavigableSelect/index.d.ts +2 -0
- package/dist/components/Progress/Progress.cjs +1 -1
- package/dist/components/Progress/Progress.js +3 -2
- package/dist/components/QRCode/QRCode.cjs +1 -0
- package/dist/components/QRCode/QRCode.const.cjs +1 -0
- package/dist/components/QRCode/QRCode.const.d.ts +21 -0
- package/dist/components/QRCode/QRCode.const.js +11 -0
- package/dist/components/QRCode/QRCode.d.ts +29 -0
- package/dist/components/QRCode/QRCode.js +68 -0
- package/dist/components/QRCode/QRCode.types.d.ts +32 -0
- package/dist/components/QRCode/QRCode.utils.cjs +1 -0
- package/dist/components/QRCode/QRCode.utils.d.ts +12 -0
- package/dist/components/QRCode/QRCode.utils.js +74 -0
- package/dist/components/QRCode/index.d.ts +3 -0
- package/dist/components/RichEditor/components/ToolbarButton/ToolbarButton.cjs +1 -1
- package/dist/components/RichEditor/components/ToolbarButton/ToolbarButton.js +3 -2
- package/dist/components/ScrollArea/ScrollArea.cjs +1 -1
- package/dist/components/ScrollArea/ScrollArea.js +3 -2
- package/dist/components/Sidebar/Sidebar.cjs +1 -1
- package/dist/components/Sidebar/Sidebar.js +13 -12
- package/dist/components/Spinner/Spinner.cjs +1 -1
- package/dist/components/Spinner/Spinner.js +3 -2
- package/dist/components/Spinner/Spinner.types.d.ts +2 -2
- package/dist/components/Spotlight/Spotlight.cjs +1 -0
- package/dist/components/Spotlight/Spotlight.const.cjs +1 -0
- package/dist/components/Spotlight/Spotlight.const.d.ts +18 -0
- package/dist/components/Spotlight/Spotlight.const.js +9 -0
- package/dist/components/Spotlight/Spotlight.d.ts +7 -0
- package/dist/components/Spotlight/Spotlight.js +220 -0
- package/dist/components/Spotlight/Spotlight.types.d.ts +51 -0
- package/dist/components/Spotlight/index.d.ts +2 -0
- package/dist/components/StatCard/StatCard.cjs +1 -1
- package/dist/components/StatCard/StatCard.js +9 -8
- package/dist/components/Statistic/Statistic.cjs +1 -1
- package/dist/components/Statistic/Statistic.js +7 -6
- package/dist/components/Switch/Switch.cjs +1 -1
- package/dist/components/Switch/Switch.js +11 -10
- package/dist/components/Terminal/Terminal.cjs +1 -0
- package/dist/components/Terminal/Terminal.const.cjs +1 -0
- package/dist/components/Terminal/Terminal.const.d.ts +32 -0
- package/dist/components/Terminal/Terminal.const.js +42 -0
- package/dist/components/Terminal/Terminal.d.ts +27 -0
- package/dist/components/Terminal/Terminal.js +155 -0
- package/dist/components/Terminal/Terminal.types.d.ts +49 -0
- package/dist/components/Terminal/index.d.ts +2 -0
- package/dist/components/TimePicker/components/TimePickerColumnsDropdown/TimePickerColumnsDropdown.cjs +1 -1
- package/dist/components/TimePicker/components/TimePickerColumnsDropdown/TimePickerColumnsDropdown.js +16 -15
- package/dist/components/TimePicker/helpers/ClockFaceSvg.cjs +1 -1
- package/dist/components/TimePicker/helpers/ClockFaceSvg.js +13 -12
- package/dist/components/Tour/Tour.cjs +1 -0
- package/dist/components/Tour/Tour.const.cjs +1 -0
- package/dist/components/Tour/Tour.const.d.ts +25 -0
- package/dist/components/Tour/Tour.const.js +38 -0
- package/dist/components/Tour/Tour.d.ts +17 -0
- package/dist/components/Tour/Tour.js +179 -0
- package/dist/components/Tour/Tour.types.d.ts +80 -0
- package/dist/components/Tour/index.d.ts +4 -0
- package/dist/components/Tour/useTour.cjs +1 -0
- package/dist/components/Tour/useTour.d.ts +14 -0
- package/dist/components/Tour/useTour.js +27 -0
- package/dist/components/Transition/Transition.cjs +1 -0
- package/dist/components/Transition/Transition.const.cjs +1 -0
- package/dist/components/Transition/Transition.const.d.ts +15 -0
- package/dist/components/Transition/Transition.const.js +73 -0
- package/dist/components/Transition/Transition.d.ts +37 -0
- package/dist/components/Transition/Transition.js +107 -0
- package/dist/components/Transition/Transition.types.d.ts +69 -0
- package/dist/components/Transition/index.d.ts +2 -0
- package/dist/components/Typewriter/Typewriter.cjs +1 -0
- package/dist/components/Typewriter/Typewriter.const.cjs +1 -0
- package/dist/components/Typewriter/Typewriter.const.d.ts +22 -0
- package/dist/components/Typewriter/Typewriter.const.js +11 -0
- package/dist/components/Typewriter/Typewriter.d.ts +7 -0
- package/dist/components/Typewriter/Typewriter.js +88 -0
- package/dist/components/Typewriter/Typewriter.types.d.ts +32 -0
- package/dist/components/Typewriter/index.d.ts +2 -0
- package/dist/components/Typography/Typography.cjs +1 -1
- package/dist/components/Typography/Typography.d.ts +5 -1
- package/dist/components/Typography/Typography.js +93 -57
- package/dist/components/Typography/Typography.types.d.ts +29 -2
- package/dist/components/Watermark/Watermark.cjs +1 -0
- package/dist/components/Watermark/Watermark.const.cjs +1 -0
- package/dist/components/Watermark/Watermark.const.d.ts +30 -0
- package/dist/components/Watermark/Watermark.const.js +18 -0
- package/dist/components/Watermark/Watermark.d.ts +7 -0
- package/dist/components/Watermark/Watermark.js +96 -0
- package/dist/components/Watermark/Watermark.types.d.ts +35 -0
- package/dist/components/Watermark/index.d.ts +2 -0
- package/dist/components/index.cjs +1 -1
- package/dist/components/index.d.ts +46 -2
- package/dist/components/index.js +288 -237
- package/dist/context/BearProvider.cjs +1 -1
- package/dist/context/BearProvider.d.ts +110 -5
- package/dist/context/BearProvider.js +198 -53
- package/dist/context/defaultTheme.cjs +1 -1
- package/dist/context/defaultTheme.js +11 -11
- package/dist/hooks/index.cjs +1 -1
- package/dist/hooks/index.d.ts +18 -0
- package/dist/hooks/index.js +61 -39
- package/dist/hooks/useAnimate.cjs +1 -0
- package/dist/hooks/useAnimate.d.ts +61 -0
- package/dist/hooks/useAnimate.js +125 -0
- package/dist/hooks/useBearComponent/index.d.ts +2 -0
- package/dist/hooks/useBearComponent/useBearComponent.cjs +1 -0
- package/dist/hooks/useBearComponent/useBearComponent.d.ts +71 -0
- package/dist/hooks/useBearComponent/useBearComponent.js +54 -0
- package/dist/hooks/useBearComponent/useBearComponent.types.d.ts +40 -0
- package/dist/hooks/useIdle/index.d.ts +2 -0
- package/dist/hooks/useIdle/useIdle.cjs +1 -0
- package/dist/hooks/useIdle/useIdle.d.ts +22 -0
- package/dist/hooks/useIdle/useIdle.js +66 -0
- package/dist/hooks/useIdle/useIdle.types.d.ts +29 -0
- package/dist/hooks/useLongPress/index.d.ts +2 -0
- package/dist/hooks/useLongPress/useLongPress.cjs +1 -0
- package/dist/hooks/useLongPress/useLongPress.d.ts +17 -0
- package/dist/hooks/useLongPress/useLongPress.js +44 -0
- package/dist/hooks/useLongPress/useLongPress.types.d.ts +26 -0
- package/dist/hooks/useOnline/index.d.ts +2 -0
- package/dist/hooks/useOnline/useOnline.cjs +1 -0
- package/dist/hooks/useOnline/useOnline.d.ts +16 -0
- package/dist/hooks/useOnline/useOnline.js +25 -0
- package/dist/hooks/useOnline/useOnline.types.d.ts +15 -0
- package/dist/hooks/usePageVisibility/index.d.ts +2 -0
- package/dist/hooks/usePageVisibility/usePageVisibility.cjs +1 -0
- package/dist/hooks/usePageVisibility/usePageVisibility.d.ts +19 -0
- package/dist/hooks/usePageVisibility/usePageVisibility.js +26 -0
- package/dist/hooks/usePageVisibility/usePageVisibility.types.d.ts +15 -0
- package/dist/hooks/useResponsive.cjs +1 -0
- package/dist/hooks/useResponsive.d.ts +35 -0
- package/dist/hooks/useResponsive.js +74 -0
- package/dist/hooks/useSpotlight/index.d.ts +2 -0
- package/dist/hooks/useSpotlight/useSpotlight.cjs +1 -0
- package/dist/hooks/useSpotlight/useSpotlight.d.ts +24 -0
- package/dist/hooks/useSpotlight/useSpotlight.js +49 -0
- package/dist/hooks/useSpotlight/useSpotlight.types.d.ts +23 -0
- package/dist/hooks/useWebSocket/index.d.ts +2 -0
- package/dist/hooks/useWebSocket/useWebSocket.cjs +1 -0
- package/dist/hooks/useWebSocket/useWebSocket.d.ts +22 -0
- package/dist/hooks/useWebSocket/useWebSocket.js +75 -0
- package/dist/hooks/useWebSocket/useWebSocket.types.d.ts +44 -0
- package/dist/index.cjs +1 -1
- package/dist/index.js +363 -288
- package/dist/styles.css +1 -1
- package/dist/types/component.types.d.ts +125 -42
- package/dist/types/theme.types.d.ts +82 -0
- package/dist/utils/createSlots.cjs +1 -0
- package/dist/utils/createSlots.d.ts +70 -0
- package/dist/utils/createSlots.js +65 -0
- package/dist/utils/index.cjs +1 -1
- package/dist/utils/index.d.ts +2 -0
- package/dist/utils/index.js +4 -2
- package/package.json +1 -1
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface TourStep {
|
|
3
|
+
/** Target element selector or ref */
|
|
4
|
+
target: string | (() => HTMLElement | null);
|
|
5
|
+
/** Step title */
|
|
6
|
+
title?: ReactNode;
|
|
7
|
+
/** Step description */
|
|
8
|
+
description?: ReactNode;
|
|
9
|
+
/** Custom content */
|
|
10
|
+
content?: ReactNode;
|
|
11
|
+
/** Placement of the tooltip */
|
|
12
|
+
placement?: TourPlacement;
|
|
13
|
+
/** Disable interaction with target */
|
|
14
|
+
disableInteraction?: boolean;
|
|
15
|
+
/** Show spotlight on target */
|
|
16
|
+
spotlightPadding?: number;
|
|
17
|
+
/** Custom next button text */
|
|
18
|
+
nextText?: string;
|
|
19
|
+
/** Custom prev button text */
|
|
20
|
+
prevText?: string;
|
|
21
|
+
/** Before step callback */
|
|
22
|
+
onBeforeStep?: () => Promise<void> | void;
|
|
23
|
+
/** After step callback */
|
|
24
|
+
onAfterStep?: () => Promise<void> | void;
|
|
25
|
+
}
|
|
26
|
+
export type TourPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
|
|
27
|
+
export interface TourProps {
|
|
28
|
+
/** Array of tour steps */
|
|
29
|
+
steps: TourStep[];
|
|
30
|
+
/** Whether tour is open */
|
|
31
|
+
open?: boolean;
|
|
32
|
+
/** Current step index */
|
|
33
|
+
current?: number;
|
|
34
|
+
/** Called when tour closes */
|
|
35
|
+
onClose?: () => void;
|
|
36
|
+
/** Called when step changes */
|
|
37
|
+
onStepChange?: (current: number) => void;
|
|
38
|
+
/** Called when tour finishes */
|
|
39
|
+
onFinish?: () => void;
|
|
40
|
+
/** Show step indicators */
|
|
41
|
+
showIndicators?: boolean;
|
|
42
|
+
/** Show close button */
|
|
43
|
+
showCloseButton?: boolean;
|
|
44
|
+
/** Show skip button */
|
|
45
|
+
showSkipButton?: boolean;
|
|
46
|
+
/** Show prev button */
|
|
47
|
+
showPrevButton?: boolean;
|
|
48
|
+
/** Finish button text */
|
|
49
|
+
finishText?: string;
|
|
50
|
+
/** Skip button text */
|
|
51
|
+
skipText?: string;
|
|
52
|
+
/** Custom class name */
|
|
53
|
+
className?: string;
|
|
54
|
+
/** Mask/overlay opacity */
|
|
55
|
+
maskOpacity?: number;
|
|
56
|
+
/** Mask color */
|
|
57
|
+
maskColor?: string;
|
|
58
|
+
/** Animation enabled */
|
|
59
|
+
animated?: boolean;
|
|
60
|
+
/** Test ID */
|
|
61
|
+
testId?: string;
|
|
62
|
+
}
|
|
63
|
+
export interface UseTourReturn {
|
|
64
|
+
/** Start the tour */
|
|
65
|
+
start: () => void;
|
|
66
|
+
/** Stop the tour */
|
|
67
|
+
stop: () => void;
|
|
68
|
+
/** Go to next step */
|
|
69
|
+
next: () => void;
|
|
70
|
+
/** Go to previous step */
|
|
71
|
+
prev: () => void;
|
|
72
|
+
/** Go to specific step */
|
|
73
|
+
goTo: (step: number) => void;
|
|
74
|
+
/** Whether tour is active */
|
|
75
|
+
isActive: boolean;
|
|
76
|
+
/** Current step index */
|
|
77
|
+
currentStep: number;
|
|
78
|
+
/** Total steps count */
|
|
79
|
+
totalSteps: number;
|
|
80
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),b=l=>{const[o,a]=t.useState(!1),[c,n]=t.useState(0),u=t.useCallback(()=>{n(0),a(!0)},[]),s=t.useCallback(()=>{a(!1),n(0)},[]),r=t.useCallback(()=>{c<l.length-1?n(e=>e+1):s()},[c,l.length,s]),i=t.useCallback(()=>{c>0&&n(e=>e-1)},[c]),g=t.useCallback(e=>{e>=0&&e<l.length&&n(e)},[l.length]);return{start:u,stop:s,next:r,prev:i,goTo:g,isActive:o,currentStep:c,totalSteps:l.length}};exports.useTour=b;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { UseTourReturn, TourStep } from './Tour.types';
|
|
2
|
+
/**
|
|
3
|
+
* useTour - Hook to control tour programmatically
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
* ```tsx
|
|
7
|
+
* const steps = [...];
|
|
8
|
+
* const { start, stop, next, prev, isActive, currentStep } = useTour(steps);
|
|
9
|
+
*
|
|
10
|
+
* <Tour steps={steps} open={isActive} current={currentStep} onClose={stop} />
|
|
11
|
+
* <Button onClick={start}>Start Tour</Button>
|
|
12
|
+
* ```
|
|
13
|
+
*/
|
|
14
|
+
export declare const useTour: (steps: TourStep[]) => UseTourReturn;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { useState as s, useCallback as r } from "react";
|
|
2
|
+
const S = (e) => {
|
|
3
|
+
const [u, l] = s(!1), [n, o] = s(0), a = r(() => {
|
|
4
|
+
o(0), l(!0);
|
|
5
|
+
}, []), c = r(() => {
|
|
6
|
+
l(!1), o(0);
|
|
7
|
+
}, []), i = r(() => {
|
|
8
|
+
n < e.length - 1 ? o((t) => t + 1) : c();
|
|
9
|
+
}, [n, e.length, c]), f = r(() => {
|
|
10
|
+
n > 0 && o((t) => t - 1);
|
|
11
|
+
}, [n]), g = r((t) => {
|
|
12
|
+
t >= 0 && t < e.length && o(t);
|
|
13
|
+
}, [e.length]);
|
|
14
|
+
return {
|
|
15
|
+
start: a,
|
|
16
|
+
stop: c,
|
|
17
|
+
next: i,
|
|
18
|
+
prev: f,
|
|
19
|
+
goTo: g,
|
|
20
|
+
isActive: u,
|
|
21
|
+
currentStep: n,
|
|
22
|
+
totalSteps: e.length
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
export {
|
|
26
|
+
S as useTour
|
|
27
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),x=require("../../utils/cn.cjs"),M=require("./Transition.const.cjs"),P=({show:a,name:y="fade",duration:i=M.DEFAULT_DURATION,delay:n=0,easing:I=M.DEFAULT_EASING,enterFrom:l,enterTo:o,leaveFrom:f,leaveTo:N,unmountOnHide:T=!0,onEnter:m,onEntered:d,onLeave:c,onLeft:S,children:v,className:R,as:A="div"})=>{const[q,F]=s.useState(a),[b,u]=s.useState(a?"idle":"exit-active"),e=s.useRef(null);if(s.useEffect(()=>(e.current&&clearTimeout(e.current),a?(F(!0),u("enter"),m==null||m(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{u("enter-active"),e.current=setTimeout(()=>{u("idle"),d==null||d()},i+n)})})):(u("exit"),c==null||c(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{u("exit-active"),e.current=setTimeout(()=>{T&&F(!1),S==null||S()},i+n)})})),()=>{e.current&&clearTimeout(e.current)}),[a]),!q&&T)return null;const t=M.TRANSITION_PRESETS[y];let r={transition:`all ${i}ms ${I} ${n}ms`};switch(b){case"enter":r={...r,...l??(t==null?void 0:t.enter)};break;case"enter-active":case"idle":r={...r,...o??(t==null?void 0:t.enterActive)};break;case"exit":r={...r,...f??(t==null?void 0:t.exit)};break;case"exit-active":r={...r,...N??(t==null?void 0:t.exitActive)};break}return s.createElement(A,{className:x.cn(R),style:r},v)},$=({children:a,initial:y,animate:i,exit:n,transition:I={},whileHover:l,whileTap:o,inView:f=!0,as:N="div",className:T,testId:m})=>{const[d,c]=s.useState(y??{}),[S,v]=s.useState(!1),[R,A]=s.useState(!1),q=s.useRef(!1),{duration:F=300,delay:b=0,easing:u=M.DEFAULT_EASING}=I;s.useEffect(()=>{q.current?f&&i?c(i):!f&&n&&c(n):(q.current=!0,requestAnimationFrame(()=>{f&&i&&c(i)}))},[f]);let e={...d,transition:`all ${F}ms ${u} ${b}ms`};return R&&o?e={...e,...o}:S&&l&&(e={...e,...l}),s.createElement(N,{className:x.cn(T),style:e,"data-testid":m,onMouseEnter:l?()=>v(!0):void 0,onMouseLeave:l?()=>{v(!1),A(!1)}:void 0,onMouseDown:o?()=>A(!0):void 0,onMouseUp:o?()=>A(!1):void 0},a)};exports.Motion=$;exports.Transition=P;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=300,e="cubic-bezier(0.4, 0, 0.2, 1)",a={fade:{enter:{opacity:0},enterActive:{opacity:1},exit:{opacity:1},exitActive:{opacity:0}},"slide-up":{enter:{opacity:0,transform:"translateY(16px)"},enterActive:{opacity:1,transform:"translateY(0)"},exit:{opacity:1,transform:"translateY(0)"},exitActive:{opacity:0,transform:"translateY(16px)"}},"slide-down":{enter:{opacity:0,transform:"translateY(-16px)"},enterActive:{opacity:1,transform:"translateY(0)"},exit:{opacity:1,transform:"translateY(0)"},exitActive:{opacity:0,transform:"translateY(-16px)"}},"slide-left":{enter:{opacity:0,transform:"translateX(-16px)"},enterActive:{opacity:1,transform:"translateX(0)"},exit:{opacity:1,transform:"translateX(0)"},exitActive:{opacity:0,transform:"translateX(-16px)"}},"slide-right":{enter:{opacity:0,transform:"translateX(16px)"},enterActive:{opacity:1,transform:"translateX(0)"},exit:{opacity:1,transform:"translateX(0)"},exitActive:{opacity:0,transform:"translateX(16px)"}},scale:{enter:{opacity:0,transform:"scale(0.9)"},enterActive:{opacity:1,transform:"scale(1)"},exit:{opacity:1,transform:"scale(1)"},exitActive:{opacity:0,transform:"scale(0.9)"}},"scale-y":{enter:{opacity:0,transform:"scaleY(0)"},enterActive:{opacity:1,transform:"scaleY(1)"},exit:{opacity:1,transform:"scaleY(1)"},exitActive:{opacity:0,transform:"scaleY(0)"}},"scale-x":{enter:{opacity:0,transform:"scaleX(0)"},enterActive:{opacity:1,transform:"scaleX(1)"},exit:{opacity:1,transform:"scaleX(1)"},exitActive:{opacity:0,transform:"scaleX(0)"}},rotate:{enter:{opacity:0,transform:"rotate(-90deg)"},enterActive:{opacity:1,transform:"rotate(0)"},exit:{opacity:1,transform:"rotate(0)"},exitActive:{opacity:0,transform:"rotate(90deg)"}},flip:{enter:{opacity:0,transform:"perspective(400px) rotateY(-90deg)"},enterActive:{opacity:1,transform:"perspective(400px) rotateY(0)"},exit:{opacity:1,transform:"perspective(400px) rotateY(0)"},exitActive:{opacity:0,transform:"perspective(400px) rotateY(90deg)"}},collapse:{enter:{height:"0px",overflow:"hidden",opacity:0},enterActive:{height:"auto",overflow:"hidden",opacity:1},exit:{height:"auto",overflow:"hidden",opacity:1},exitActive:{height:"0px",overflow:"hidden",opacity:0}}};exports.DEFAULT_DURATION=t;exports.DEFAULT_EASING=e;exports.TRANSITION_PRESETS=a;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
import { TransitionName } from './Transition.types';
|
|
3
|
+
/** Default transition duration (ms) */
|
|
4
|
+
export declare const DEFAULT_DURATION = 300;
|
|
5
|
+
/** Default easing */
|
|
6
|
+
export declare const DEFAULT_EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
|
|
7
|
+
interface TransitionStyles {
|
|
8
|
+
enter: CSSProperties;
|
|
9
|
+
enterActive: CSSProperties;
|
|
10
|
+
exit: CSSProperties;
|
|
11
|
+
exitActive: CSSProperties;
|
|
12
|
+
}
|
|
13
|
+
/** Built-in transition presets */
|
|
14
|
+
export declare const TRANSITION_PRESETS: Record<TransitionName, TransitionStyles>;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
const t = 300, e = "cubic-bezier(0.4, 0, 0.2, 1)", a = {
|
|
2
|
+
fade: {
|
|
3
|
+
enter: { opacity: 0 },
|
|
4
|
+
enterActive: { opacity: 1 },
|
|
5
|
+
exit: { opacity: 1 },
|
|
6
|
+
exitActive: { opacity: 0 }
|
|
7
|
+
},
|
|
8
|
+
"slide-up": {
|
|
9
|
+
enter: { opacity: 0, transform: "translateY(16px)" },
|
|
10
|
+
enterActive: { opacity: 1, transform: "translateY(0)" },
|
|
11
|
+
exit: { opacity: 1, transform: "translateY(0)" },
|
|
12
|
+
exitActive: { opacity: 0, transform: "translateY(16px)" }
|
|
13
|
+
},
|
|
14
|
+
"slide-down": {
|
|
15
|
+
enter: { opacity: 0, transform: "translateY(-16px)" },
|
|
16
|
+
enterActive: { opacity: 1, transform: "translateY(0)" },
|
|
17
|
+
exit: { opacity: 1, transform: "translateY(0)" },
|
|
18
|
+
exitActive: { opacity: 0, transform: "translateY(-16px)" }
|
|
19
|
+
},
|
|
20
|
+
"slide-left": {
|
|
21
|
+
enter: { opacity: 0, transform: "translateX(-16px)" },
|
|
22
|
+
enterActive: { opacity: 1, transform: "translateX(0)" },
|
|
23
|
+
exit: { opacity: 1, transform: "translateX(0)" },
|
|
24
|
+
exitActive: { opacity: 0, transform: "translateX(-16px)" }
|
|
25
|
+
},
|
|
26
|
+
"slide-right": {
|
|
27
|
+
enter: { opacity: 0, transform: "translateX(16px)" },
|
|
28
|
+
enterActive: { opacity: 1, transform: "translateX(0)" },
|
|
29
|
+
exit: { opacity: 1, transform: "translateX(0)" },
|
|
30
|
+
exitActive: { opacity: 0, transform: "translateX(16px)" }
|
|
31
|
+
},
|
|
32
|
+
scale: {
|
|
33
|
+
enter: { opacity: 0, transform: "scale(0.9)" },
|
|
34
|
+
enterActive: { opacity: 1, transform: "scale(1)" },
|
|
35
|
+
exit: { opacity: 1, transform: "scale(1)" },
|
|
36
|
+
exitActive: { opacity: 0, transform: "scale(0.9)" }
|
|
37
|
+
},
|
|
38
|
+
"scale-y": {
|
|
39
|
+
enter: { opacity: 0, transform: "scaleY(0)" },
|
|
40
|
+
enterActive: { opacity: 1, transform: "scaleY(1)" },
|
|
41
|
+
exit: { opacity: 1, transform: "scaleY(1)" },
|
|
42
|
+
exitActive: { opacity: 0, transform: "scaleY(0)" }
|
|
43
|
+
},
|
|
44
|
+
"scale-x": {
|
|
45
|
+
enter: { opacity: 0, transform: "scaleX(0)" },
|
|
46
|
+
enterActive: { opacity: 1, transform: "scaleX(1)" },
|
|
47
|
+
exit: { opacity: 1, transform: "scaleX(1)" },
|
|
48
|
+
exitActive: { opacity: 0, transform: "scaleX(0)" }
|
|
49
|
+
},
|
|
50
|
+
rotate: {
|
|
51
|
+
enter: { opacity: 0, transform: "rotate(-90deg)" },
|
|
52
|
+
enterActive: { opacity: 1, transform: "rotate(0)" },
|
|
53
|
+
exit: { opacity: 1, transform: "rotate(0)" },
|
|
54
|
+
exitActive: { opacity: 0, transform: "rotate(90deg)" }
|
|
55
|
+
},
|
|
56
|
+
flip: {
|
|
57
|
+
enter: { opacity: 0, transform: "perspective(400px) rotateY(-90deg)" },
|
|
58
|
+
enterActive: { opacity: 1, transform: "perspective(400px) rotateY(0)" },
|
|
59
|
+
exit: { opacity: 1, transform: "perspective(400px) rotateY(0)" },
|
|
60
|
+
exitActive: { opacity: 0, transform: "perspective(400px) rotateY(90deg)" }
|
|
61
|
+
},
|
|
62
|
+
collapse: {
|
|
63
|
+
enter: { height: "0px", overflow: "hidden", opacity: 0 },
|
|
64
|
+
enterActive: { height: "auto", overflow: "hidden", opacity: 1 },
|
|
65
|
+
exit: { height: "auto", overflow: "hidden", opacity: 1 },
|
|
66
|
+
exitActive: { height: "0px", overflow: "hidden", opacity: 0 }
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
export {
|
|
70
|
+
t as DEFAULT_DURATION,
|
|
71
|
+
e as DEFAULT_EASING,
|
|
72
|
+
a as TRANSITION_PRESETS
|
|
73
|
+
};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { TransitionProps, MotionProps } from './Transition.types';
|
|
3
|
+
/**
|
|
4
|
+
* Transition - Declarative enter/leave transitions
|
|
5
|
+
*
|
|
6
|
+
* @description
|
|
7
|
+
* Wraps children with CSS transitions for show/hide animations.
|
|
8
|
+
* Supports built-in presets and custom enter/leave styles.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* <Transition show={isOpen} name="slide-up" duration={300}>
|
|
13
|
+
* <div>Content</div>
|
|
14
|
+
* </Transition>
|
|
15
|
+
* ```
|
|
16
|
+
*/
|
|
17
|
+
export declare const Transition: FC<TransitionProps>;
|
|
18
|
+
/**
|
|
19
|
+
* Motion - Framer Motion-inspired declarative animation component
|
|
20
|
+
*
|
|
21
|
+
* @description
|
|
22
|
+
* Animates between initial, animate, and exit states with
|
|
23
|
+
* optional hover and tap interactions.
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* ```tsx
|
|
27
|
+
* <Motion
|
|
28
|
+
* initial={{ opacity: 0, y: 20 }}
|
|
29
|
+
* animate={{ opacity: 1, y: 0 }}
|
|
30
|
+
* whileHover={{ scale: 1.05 }}
|
|
31
|
+
* transition={{ duration: 500 }}
|
|
32
|
+
* >
|
|
33
|
+
* <Card>Content</Card>
|
|
34
|
+
* </Motion>
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
37
|
+
export declare const Motion: FC<MotionProps>;
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import { useState as v, useRef as y, useEffect as P, createElement as R } from "react";
|
|
2
|
+
import { cn as b } from "../../utils/cn.js";
|
|
3
|
+
import { DEFAULT_EASING as k, DEFAULT_DURATION as D, TRANSITION_PRESETS as U } from "./Transition.const.js";
|
|
4
|
+
const G = ({
|
|
5
|
+
show: u,
|
|
6
|
+
name: I = "fade",
|
|
7
|
+
duration: r = D,
|
|
8
|
+
delay: a = 0,
|
|
9
|
+
easing: M = k,
|
|
10
|
+
enterFrom: n,
|
|
11
|
+
enterTo: l,
|
|
12
|
+
leaveFrom: m,
|
|
13
|
+
leaveTo: N,
|
|
14
|
+
unmountOnHide: S = !0,
|
|
15
|
+
onEnter: o,
|
|
16
|
+
onEntered: f,
|
|
17
|
+
onLeave: i,
|
|
18
|
+
onLeft: d,
|
|
19
|
+
children: T,
|
|
20
|
+
className: $,
|
|
21
|
+
as: A = "div"
|
|
22
|
+
}) => {
|
|
23
|
+
const [x, F] = v(u), [q, c] = v(
|
|
24
|
+
u ? "idle" : "exit-active"
|
|
25
|
+
), e = y(null);
|
|
26
|
+
if (P(() => (e.current && clearTimeout(e.current), u ? (F(!0), c("enter"), o == null || o(), requestAnimationFrame(() => {
|
|
27
|
+
requestAnimationFrame(() => {
|
|
28
|
+
c("enter-active"), e.current = setTimeout(() => {
|
|
29
|
+
c("idle"), f == null || f();
|
|
30
|
+
}, r + a);
|
|
31
|
+
});
|
|
32
|
+
})) : (c("exit"), i == null || i(), requestAnimationFrame(() => {
|
|
33
|
+
requestAnimationFrame(() => {
|
|
34
|
+
c("exit-active"), e.current = setTimeout(() => {
|
|
35
|
+
S && F(!1), d == null || d();
|
|
36
|
+
}, r + a);
|
|
37
|
+
});
|
|
38
|
+
})), () => {
|
|
39
|
+
e.current && clearTimeout(e.current);
|
|
40
|
+
}), [u]), !x && S) return null;
|
|
41
|
+
const t = U[I];
|
|
42
|
+
let s = {
|
|
43
|
+
transition: `all ${r}ms ${M} ${a}ms`
|
|
44
|
+
};
|
|
45
|
+
switch (q) {
|
|
46
|
+
case "enter":
|
|
47
|
+
s = { ...s, ...n ?? (t == null ? void 0 : t.enter) };
|
|
48
|
+
break;
|
|
49
|
+
case "enter-active":
|
|
50
|
+
case "idle":
|
|
51
|
+
s = { ...s, ...l ?? (t == null ? void 0 : t.enterActive) };
|
|
52
|
+
break;
|
|
53
|
+
case "exit":
|
|
54
|
+
s = { ...s, ...m ?? (t == null ? void 0 : t.exit) };
|
|
55
|
+
break;
|
|
56
|
+
case "exit-active":
|
|
57
|
+
s = { ...s, ...N ?? (t == null ? void 0 : t.exitActive) };
|
|
58
|
+
break;
|
|
59
|
+
}
|
|
60
|
+
return R(
|
|
61
|
+
A,
|
|
62
|
+
{ className: b($), style: s },
|
|
63
|
+
T
|
|
64
|
+
);
|
|
65
|
+
}, O = ({
|
|
66
|
+
children: u,
|
|
67
|
+
initial: I,
|
|
68
|
+
animate: r,
|
|
69
|
+
exit: a,
|
|
70
|
+
transition: M = {},
|
|
71
|
+
whileHover: n,
|
|
72
|
+
whileTap: l,
|
|
73
|
+
inView: m = !0,
|
|
74
|
+
as: N = "div",
|
|
75
|
+
className: S,
|
|
76
|
+
testId: o
|
|
77
|
+
}) => {
|
|
78
|
+
const [f, i] = v(I ?? {}), [d, T] = v(!1), [$, A] = v(!1), x = y(!1), { duration: F = 300, delay: q = 0, easing: c = k } = M;
|
|
79
|
+
P(() => {
|
|
80
|
+
x.current ? m && r ? i(r) : !m && a && i(a) : (x.current = !0, requestAnimationFrame(() => {
|
|
81
|
+
m && r && i(r);
|
|
82
|
+
}));
|
|
83
|
+
}, [m]);
|
|
84
|
+
let e = {
|
|
85
|
+
...f,
|
|
86
|
+
transition: `all ${F}ms ${c} ${q}ms`
|
|
87
|
+
};
|
|
88
|
+
return $ && l ? e = { ...e, ...l } : d && n && (e = { ...e, ...n }), R(
|
|
89
|
+
N,
|
|
90
|
+
{
|
|
91
|
+
className: b(S),
|
|
92
|
+
style: e,
|
|
93
|
+
"data-testid": o,
|
|
94
|
+
onMouseEnter: n ? () => T(!0) : void 0,
|
|
95
|
+
onMouseLeave: n ? () => {
|
|
96
|
+
T(!1), A(!1);
|
|
97
|
+
} : void 0,
|
|
98
|
+
onMouseDown: l ? () => A(!0) : void 0,
|
|
99
|
+
onMouseUp: l ? () => A(!1) : void 0
|
|
100
|
+
},
|
|
101
|
+
u
|
|
102
|
+
);
|
|
103
|
+
};
|
|
104
|
+
export {
|
|
105
|
+
O as Motion,
|
|
106
|
+
G as Transition
|
|
107
|
+
};
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { ReactNode, CSSProperties } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Built-in transition names
|
|
4
|
+
*/
|
|
5
|
+
export type TransitionName = 'fade' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'scale' | 'scale-y' | 'scale-x' | 'rotate' | 'flip' | 'collapse';
|
|
6
|
+
export interface TransitionProps {
|
|
7
|
+
/** Whether the child is visible */
|
|
8
|
+
show: boolean;
|
|
9
|
+
/** Transition name or custom styles */
|
|
10
|
+
name?: TransitionName;
|
|
11
|
+
/** Duration in ms */
|
|
12
|
+
duration?: number;
|
|
13
|
+
/** Delay in ms */
|
|
14
|
+
delay?: number;
|
|
15
|
+
/** Easing function */
|
|
16
|
+
easing?: string;
|
|
17
|
+
/** Custom enter styles */
|
|
18
|
+
enterFrom?: CSSProperties;
|
|
19
|
+
/** Custom enter-to styles */
|
|
20
|
+
enterTo?: CSSProperties;
|
|
21
|
+
/** Custom leave styles */
|
|
22
|
+
leaveFrom?: CSSProperties;
|
|
23
|
+
/** Custom leave-to styles */
|
|
24
|
+
leaveTo?: CSSProperties;
|
|
25
|
+
/** Unmount when hidden */
|
|
26
|
+
unmountOnHide?: boolean;
|
|
27
|
+
/** Called when enter transition starts */
|
|
28
|
+
onEnter?: () => void;
|
|
29
|
+
/** Called when enter transition ends */
|
|
30
|
+
onEntered?: () => void;
|
|
31
|
+
/** Called when leave transition starts */
|
|
32
|
+
onLeave?: () => void;
|
|
33
|
+
/** Called when leave transition ends */
|
|
34
|
+
onLeft?: () => void;
|
|
35
|
+
/** Children to animate */
|
|
36
|
+
children: ReactNode;
|
|
37
|
+
/** Custom class name */
|
|
38
|
+
className?: string;
|
|
39
|
+
/** As which HTML element */
|
|
40
|
+
as?: keyof JSX.IntrinsicElements;
|
|
41
|
+
}
|
|
42
|
+
export interface MotionProps {
|
|
43
|
+
/** Children to render */
|
|
44
|
+
children: ReactNode;
|
|
45
|
+
/** Initial styles (on mount) */
|
|
46
|
+
initial?: CSSProperties;
|
|
47
|
+
/** Target styles (after mount) */
|
|
48
|
+
animate?: CSSProperties;
|
|
49
|
+
/** Exit styles */
|
|
50
|
+
exit?: CSSProperties;
|
|
51
|
+
/** Transition configuration */
|
|
52
|
+
transition?: {
|
|
53
|
+
duration?: number;
|
|
54
|
+
delay?: number;
|
|
55
|
+
easing?: string;
|
|
56
|
+
};
|
|
57
|
+
/** Hover styles */
|
|
58
|
+
whileHover?: CSSProperties;
|
|
59
|
+
/** Press/active styles */
|
|
60
|
+
whileTap?: CSSProperties;
|
|
61
|
+
/** Whether in view (trigger animation) */
|
|
62
|
+
inView?: boolean;
|
|
63
|
+
/** As which HTML element */
|
|
64
|
+
as?: keyof JSX.IntrinsicElements;
|
|
65
|
+
/** Custom class name */
|
|
66
|
+
className?: string;
|
|
67
|
+
/** Test ID */
|
|
68
|
+
testId?: string;
|
|
69
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),t=require("react"),R=require("../../utils/cn.cjs"),r=require("./Typewriter.const.cjs"),X=b=>{const{text:f,speed:i=r.DEFAULT_SPEED,startDelay:N=r.DEFAULT_START_DELAY,deleteDelay:x=r.DEFAULT_DELETE_DELAY,deleteSpeed:d=r.DEFAULT_DELETE_SPEED,loop:_=!1,cursor:I=!0,cursorChar:h=r.DEFAULT_CURSOR_CHAR,cursorBlinkSpeed:A=r.DEFAULT_CURSOR_BLINK_SPEED,onComplete:n,onWordComplete:o,as:g="span",className:U,style:j,testId:w}=b,u=Array.isArray(f)?f:[f],[F,m]=t.useState(""),[a,p]=t.useState(r.INITIAL_TEXT_INDEX),[l,S]=t.useState(r.INITIAL_CHAR_INDEX),[E,L]=t.useState(!1),[v,B]=t.useState(!0),e=t.useRef(),D=t.useRef(!1);t.useEffect(()=>{if(!I)return;const T=setInterval(()=>B(s=>!s),A);return()=>clearInterval(T)},[I,A]);const c=t.useCallback(()=>{const T=u[a];if(E)if(l>0)S(s=>s-1),m(T.slice(0,l-1)),e.current=setTimeout(c,d);else{L(!1);const s=a+1;s>=u.length?_?(p(r.INITIAL_TEXT_INDEX),e.current=setTimeout(c,i)):n==null||n():(p(s),e.current=setTimeout(c,i))}else if(l<T.length)m(T.slice(0,l+1)),S(s=>s+1),e.current=setTimeout(c,i);else{if(o==null||o(a),u.length===1&&!_){n==null||n();return}e.current=setTimeout(()=>{L(!0),c()},x)}},[u,a,l,E,i,d,x,_,n,o]);return t.useEffect(()=>{if(!D.current)return D.current=!0,e.current=setTimeout(c,N),()=>{e.current&&clearTimeout(e.current)}},[]),t.useEffect(()=>{if(D.current)return e.current&&clearTimeout(e.current),e.current=setTimeout(c,E?d:i),()=>{e.current&&clearTimeout(e.current)}},[E,a]),y.jsxs(g,{className:R.cn("Bear-Typewriter","bear-inline",U),style:j,"data-testid":w,"aria-label":u.join(", "),children:[y.jsx("span",{className:"Bear-Typewriter__text",children:F}),I&&y.jsx("span",{className:R.cn("Bear-Typewriter__cursor","bear-inline-block bear-ml-0.5","bear-text-[var(--bear-primary-500)]"),style:{opacity:v?1:0},"aria-hidden":"true",children:h})]})};exports.Typewriter=X;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=80,_=500,D=1500,T=40,A="|",L=530,I=0,U=0;exports.DEFAULT_CURSOR_BLINK_SPEED=L;exports.DEFAULT_CURSOR_CHAR=A;exports.DEFAULT_DELETE_DELAY=D;exports.DEFAULT_DELETE_SPEED=T;exports.DEFAULT_SPEED=E;exports.DEFAULT_START_DELAY=_;exports.INITIAL_CHAR_INDEX=U;exports.INITIAL_TEXT_INDEX=I;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/** Default typing speed in ms per character */
|
|
2
|
+
export declare const DEFAULT_SPEED = 80;
|
|
3
|
+
/** Default start delay in ms */
|
|
4
|
+
export declare const DEFAULT_START_DELAY = 500;
|
|
5
|
+
/** Default delay before deleting in ms */
|
|
6
|
+
export declare const DEFAULT_DELETE_DELAY = 1500;
|
|
7
|
+
/** Default delete speed in ms per character */
|
|
8
|
+
export declare const DEFAULT_DELETE_SPEED = 40;
|
|
9
|
+
/** Default cursor character */
|
|
10
|
+
export declare const DEFAULT_CURSOR_CHAR = "|";
|
|
11
|
+
/** Default cursor blink speed in ms */
|
|
12
|
+
export declare const DEFAULT_CURSOR_BLINK_SPEED = 530;
|
|
13
|
+
/** Cursor opacity visible */
|
|
14
|
+
export declare const CURSOR_OPACITY_ON = 1;
|
|
15
|
+
/** Cursor opacity hidden */
|
|
16
|
+
export declare const CURSOR_OPACITY_OFF = 0;
|
|
17
|
+
/** Cursor transition duration */
|
|
18
|
+
export declare const CURSOR_TRANSITION = "0.1s";
|
|
19
|
+
/** Starting text index */
|
|
20
|
+
export declare const INITIAL_TEXT_INDEX = 0;
|
|
21
|
+
/** Starting char index */
|
|
22
|
+
export declare const INITIAL_CHAR_INDEX = 0;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
const E = 80, _ = 500, D = 1500, T = 40, A = "|", L = 530, o = 0, t = 0;
|
|
2
|
+
export {
|
|
3
|
+
L as DEFAULT_CURSOR_BLINK_SPEED,
|
|
4
|
+
A as DEFAULT_CURSOR_CHAR,
|
|
5
|
+
D as DEFAULT_DELETE_DELAY,
|
|
6
|
+
T as DEFAULT_DELETE_SPEED,
|
|
7
|
+
E as DEFAULT_SPEED,
|
|
8
|
+
_ as DEFAULT_START_DELAY,
|
|
9
|
+
t as INITIAL_CHAR_INDEX,
|
|
10
|
+
o as INITIAL_TEXT_INDEX
|
|
11
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { TypewriterProps } from './Typewriter.types';
|
|
3
|
+
/**
|
|
4
|
+
* Typewriter - Animated typing text effect.
|
|
5
|
+
* Supports multi-text looping, custom speeds, cursor, and theming via BearProvider.
|
|
6
|
+
*/
|
|
7
|
+
export declare const Typewriter: FC<TypewriterProps>;
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { jsxs as P, jsx as b } from "react/jsx-runtime";
|
|
2
|
+
import { useState as l, useRef as h, useEffect as _, useCallback as X } from "react";
|
|
3
|
+
import { cn as R } from "../../utils/cn.js";
|
|
4
|
+
import { DEFAULT_SPEED as H, DEFAULT_START_DELAY as O, DEFAULT_DELETE_DELAY as V, DEFAULT_DELETE_SPEED as Y, DEFAULT_CURSOR_CHAR as K, DEFAULT_CURSOR_BLINK_SPEED as q, INITIAL_TEXT_INDEX as N, INITIAL_CHAR_INDEX as z } from "./Typewriter.const.js";
|
|
5
|
+
const Z = (S) => {
|
|
6
|
+
const {
|
|
7
|
+
text: f,
|
|
8
|
+
speed: n = H,
|
|
9
|
+
startDelay: U = O,
|
|
10
|
+
deleteDelay: I = V,
|
|
11
|
+
deleteSpeed: E = Y,
|
|
12
|
+
loop: d = !1,
|
|
13
|
+
cursor: m = !0,
|
|
14
|
+
cursorChar: g = K,
|
|
15
|
+
cursorBlinkSpeed: p = q,
|
|
16
|
+
onComplete: t,
|
|
17
|
+
onWordComplete: o,
|
|
18
|
+
as: F = "span",
|
|
19
|
+
className: B,
|
|
20
|
+
style: v,
|
|
21
|
+
testId: w
|
|
22
|
+
} = S, i = Array.isArray(f) ? f : [f], [C, x] = l(""), [a, y] = l(N), [c, A] = l(z), [T, L] = l(!1), [j, k] = l(!0), e = h(), D = h(!1);
|
|
23
|
+
_(() => {
|
|
24
|
+
if (!m) return;
|
|
25
|
+
const u = setInterval(() => k((r) => !r), p);
|
|
26
|
+
return () => clearInterval(u);
|
|
27
|
+
}, [m, p]);
|
|
28
|
+
const s = X(() => {
|
|
29
|
+
const u = i[a];
|
|
30
|
+
if (T)
|
|
31
|
+
if (c > 0)
|
|
32
|
+
A((r) => r - 1), x(u.slice(0, c - 1)), e.current = setTimeout(s, E);
|
|
33
|
+
else {
|
|
34
|
+
L(!1);
|
|
35
|
+
const r = a + 1;
|
|
36
|
+
r >= i.length ? d ? (y(N), e.current = setTimeout(s, n)) : t == null || t() : (y(r), e.current = setTimeout(s, n));
|
|
37
|
+
}
|
|
38
|
+
else if (c < u.length)
|
|
39
|
+
x(u.slice(0, c + 1)), A((r) => r + 1), e.current = setTimeout(s, n);
|
|
40
|
+
else {
|
|
41
|
+
if (o == null || o(a), i.length === 1 && !d) {
|
|
42
|
+
t == null || t();
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
e.current = setTimeout(() => {
|
|
46
|
+
L(!0), s();
|
|
47
|
+
}, I);
|
|
48
|
+
}
|
|
49
|
+
}, [i, a, c, T, n, E, I, d, t, o]);
|
|
50
|
+
return _(() => {
|
|
51
|
+
if (!D.current)
|
|
52
|
+
return D.current = !0, e.current = setTimeout(s, U), () => {
|
|
53
|
+
e.current && clearTimeout(e.current);
|
|
54
|
+
};
|
|
55
|
+
}, []), _(() => {
|
|
56
|
+
if (D.current)
|
|
57
|
+
return e.current && clearTimeout(e.current), e.current = setTimeout(s, T ? E : n), () => {
|
|
58
|
+
e.current && clearTimeout(e.current);
|
|
59
|
+
};
|
|
60
|
+
}, [T, a]), /* @__PURE__ */ P(
|
|
61
|
+
F,
|
|
62
|
+
{
|
|
63
|
+
className: R("Bear-Typewriter", "bear-inline", B),
|
|
64
|
+
style: v,
|
|
65
|
+
"data-testid": w,
|
|
66
|
+
"aria-label": i.join(", "),
|
|
67
|
+
children: [
|
|
68
|
+
/* @__PURE__ */ b("span", { className: "Bear-Typewriter__text", children: C }),
|
|
69
|
+
m && /* @__PURE__ */ b(
|
|
70
|
+
"span",
|
|
71
|
+
{
|
|
72
|
+
className: R(
|
|
73
|
+
"Bear-Typewriter__cursor",
|
|
74
|
+
"bear-inline-block bear-ml-0.5",
|
|
75
|
+
"bear-text-[var(--bear-primary-500)]"
|
|
76
|
+
),
|
|
77
|
+
style: { opacity: j ? 1 : 0 },
|
|
78
|
+
"aria-hidden": "true",
|
|
79
|
+
children: g
|
|
80
|
+
}
|
|
81
|
+
)
|
|
82
|
+
]
|
|
83
|
+
}
|
|
84
|
+
);
|
|
85
|
+
};
|
|
86
|
+
export {
|
|
87
|
+
Z as Typewriter
|
|
88
|
+
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
export interface TypewriterProps {
|
|
2
|
+
/** Text or array of texts to type */
|
|
3
|
+
text: string | string[];
|
|
4
|
+
/** Typing speed in ms per character */
|
|
5
|
+
speed?: number;
|
|
6
|
+
/** Delay before starting to type */
|
|
7
|
+
startDelay?: number;
|
|
8
|
+
/** Delay before deleting (when looping) */
|
|
9
|
+
deleteDelay?: number;
|
|
10
|
+
/** Delete speed in ms per character */
|
|
11
|
+
deleteSpeed?: number;
|
|
12
|
+
/** Whether to loop through texts */
|
|
13
|
+
loop?: boolean;
|
|
14
|
+
/** Whether to show cursor */
|
|
15
|
+
cursor?: boolean;
|
|
16
|
+
/** Cursor character */
|
|
17
|
+
cursorChar?: string;
|
|
18
|
+
/** Cursor blink speed in ms */
|
|
19
|
+
cursorBlinkSpeed?: number;
|
|
20
|
+
/** Called when typing is complete */
|
|
21
|
+
onComplete?: () => void;
|
|
22
|
+
/** Called when a word is complete (in multi-text mode) */
|
|
23
|
+
onWordComplete?: (index: number) => void;
|
|
24
|
+
/** HTML tag to render */
|
|
25
|
+
as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
|
|
26
|
+
/** Custom class name */
|
|
27
|
+
className?: string;
|
|
28
|
+
/** Custom style */
|
|
29
|
+
style?: React.CSSProperties;
|
|
30
|
+
/** Test ID */
|
|
31
|
+
testId?: string;
|
|
32
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react/jsx-runtime"),i=require("react"),W=require("../../utils/cn.cjs"),L=require("../../context/BearProvider.cjs"),N={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",subtitle1:"h6",subtitle2:"h6",body1:"p",body2:"p",caption:"span",overline:"span",code:"code",inherit:"span"},H={h1:"bear-text-5xl bear-font-bold bear-tracking-tight",h2:"bear-text-4xl bear-font-bold bear-tracking-tight",h3:"bear-text-3xl bear-font-semibold",h4:"bear-text-2xl bear-font-semibold",h5:"bear-text-xl bear-font-medium",h6:"bear-text-lg bear-font-medium",subtitle1:"bear-text-lg bear-font-normal",subtitle2:"bear-text-base bear-font-medium",body1:"bear-text-base bear-font-normal",body2:"bear-text-sm bear-font-normal",caption:"bear-text-xs",overline:"bear-text-xs bear-uppercase bear-tracking-wider",code:"bear-text-sm bear-font-mono bear-bg-gray-100 dark:bear-bg-gray-800 bear-px-1.5 bear-py-0.5 bear-rounded",inherit:""},R={thin:"bear-font-thin",light:"bear-font-light",normal:"bear-font-normal",medium:"bear-font-medium",semibold:"bear-font-semibold",bold:"bear-font-bold",extrabold:"bear-font-extrabold"},j={thin:100,light:300,normal:400,medium:500,semibold:600,bold:700,extrabold:800},w={left:"bear-text-left",center:"bear-text-center",right:"bear-text-right",justify:"bear-text-justify"},y={primary:"bear-text-gray-900 dark:bear-text-gray-100",secondary:"bear-text-gray-600 dark:bear-text-gray-400",muted:"bear-text-gray-400 dark:bear-text-gray-500",success:"bear-text-green-600 dark:bear-text-green-400",danger:"bear-text-red-600 dark:bear-text-red-400",warning:"bear-text-amber-600 dark:bear-text-amber-400"},M={tight:"bear-leading-tight",normal:"bear-leading-normal",relaxed:"bear-leading-relaxed",loose:"bear-leading-loose"},q=["h1","h2","h3","h4","h5","h6","subtitle1","subtitle2","body1","body2","caption","overline","code","inherit"],G=({variant:t="body1",component:s,align:h,weight:d,color:o="primary",truncate:l=!1,maxLines:b,italic:m=!1,underline:u=!1,strikethrough:c=!1,noWrap:p=!1,inline:x=!1,paragraph:S=!1,lineHeight:f,children:T,className:k,style:A,testId:C,...B})=>{const r=i.useContext(L.BearContext),n=q.includes(t),e=i.useMemo(()=>{if(!(n||!(r!=null&&r.customTypography)))return r.customTypography[t]},[n,r==null?void 0:r.customTypography,t]),I=i.useMemo(()=>s||(e!=null&&e.component?e.component:n?N[t]:"span"),[s,e,n,t]),g=o&&!y[o],E=i.useMemo(()=>{if(!e)return{};const a={};return e.fontSize&&(a.fontSize=e.fontSize),e.lineHeight&&(a.lineHeight=e.lineHeight),e.letterSpacing&&(a.letterSpacing=e.letterSpacing),e.textTransform&&(a.textTransform=e.textTransform),e.fontFamily&&(a.fontFamily=e.fontFamily),e.fontWeight&&(a.fontWeight=typeof e.fontWeight=="number"?e.fontWeight:j[e.fontWeight]||400),a},[e]);return _.jsx(I,{className:W.cn("Bear-Typography",`Bear-Typography--${t}`,n&&H[t],d&&R[d],h&&w[h],!g&&o&&y[o],f&&M[f],m&&"Bear-Typography--italic bear-italic",u&&"Bear-Typography--underline bear-underline",c&&"Bear-Typography--strikethrough bear-line-through",p&&"bear-whitespace-nowrap",x&&"bear-inline",S&&"bear-mb-4",l&&!b&&"Bear-Typography--truncate bear-truncate",l&&b&&"bear-overflow-hidden",k),style:{...E,...A,...g&&{color:o},...l&&b&&{display:"-webkit-box",WebkitLineClamp:b,WebkitBoxOrient:"vertical"}},"data-testid":C,...B,children:T})};exports.Typography=G;
|