@mks2508/mks-ui 0.1.3 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +123 -60
- package/dist/core/index.d.ts +7 -0
- package/dist/core/index.d.ts.map +1 -0
- package/dist/core/types.d.ts +79 -0
- package/dist/core/types.d.ts.map +1 -0
- package/dist/index.d.ts +19 -6
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -56
- package/dist/react/components/MorphingPopover/MorphingPopover.types.d.ts +44 -0
- package/dist/react/components/MorphingPopover/MorphingPopover.types.d.ts.map +1 -0
- package/dist/react/components/MorphingPopover/index.d.ts +46 -0
- package/dist/react/components/MorphingPopover/index.d.ts.map +1 -0
- package/dist/{components/ui/morphing-popover/morphing-popover.js → react/components/MorphingPopover/index.js} +47 -7
- package/dist/react/components/MorphingPopover/morphing-popover.module.js +5 -0
- package/dist/react/components/index.d.ts +9 -0
- package/dist/react/components/index.d.ts.map +1 -0
- package/dist/react/components/index.js +1 -0
- package/dist/react/hooks/Animation/UseAutoHeight.d.ts +30 -0
- package/dist/react/hooks/Animation/UseAutoHeight.d.ts.map +1 -0
- package/dist/{hooks/use-auto-height.js → react/hooks/Animation/UseAutoHeight.js} +16 -2
- package/dist/react/hooks/DOM/UseIsInView.d.ts +32 -0
- package/dist/react/hooks/DOM/UseIsInView.d.ts.map +1 -0
- package/dist/react/hooks/DOM/UseIsInView.js +33 -0
- package/dist/react/hooks/State/UseControlledState.d.ts +31 -0
- package/dist/react/hooks/State/UseControlledState.d.ts.map +1 -0
- package/dist/react/hooks/State/UseControlledState.js +34 -0
- package/dist/react/hooks/State/UseDataState.d.ts +21 -0
- package/dist/react/hooks/State/UseDataState.d.ts.map +1 -0
- package/dist/react/hooks/State/UseDataState.js +63 -0
- package/dist/react/hooks/index.d.ts +14 -0
- package/dist/react/hooks/index.d.ts.map +1 -0
- package/dist/react/hooks/index.js +4 -0
- package/dist/react/icons/index.d.ts +8 -0
- package/dist/react/icons/index.d.ts.map +1 -0
- package/dist/react/icons/lucide-animated/activity.d.ts +11 -0
- package/dist/react/icons/lucide-animated/activity.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/activity.js +2 -2
- package/dist/{icons → react/icons}/lucide-animated/arrow-down-to-line.d.ts +1 -1
- package/dist/react/icons/lucide-animated/arrow-down-to-line.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/arrow-down-to-line.js +1 -1
- package/dist/{icons → react/icons}/lucide-animated/arrow-up.d.ts +1 -1
- package/dist/react/icons/lucide-animated/arrow-up.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/arrow-up.js +1 -1
- package/dist/react/icons/lucide-animated/bell-electric.d.ts +11 -0
- package/dist/react/icons/lucide-animated/bell-electric.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/bell-electric.js +2 -2
- package/dist/react/icons/lucide-animated/bell.d.ts +11 -0
- package/dist/react/icons/lucide-animated/bell.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/bell.js +2 -2
- package/dist/react/icons/lucide-animated/bot.d.ts +11 -0
- package/dist/react/icons/lucide-animated/bot.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/bot.js +2 -2
- package/dist/react/icons/lucide-animated/box.d.ts +11 -0
- package/dist/react/icons/lucide-animated/box.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/box.js +2 -2
- package/dist/react/icons/lucide-animated/check.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/check.js +1 -1
- package/dist/react/icons/lucide-animated/circle-check.d.ts +11 -0
- package/dist/react/icons/lucide-animated/circle-check.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/circle-check.js +2 -2
- package/dist/react/icons/lucide-animated/delete.d.ts +11 -0
- package/dist/react/icons/lucide-animated/delete.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/delete.js +2 -2
- package/dist/react/icons/lucide-animated/download.d.ts +11 -0
- package/dist/react/icons/lucide-animated/download.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/download.js +2 -2
- package/dist/react/icons/lucide-animated/edit-2.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/edit-2.js +1 -1
- package/dist/react/icons/lucide-animated/globe.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/globe.js +1 -1
- package/dist/react/icons/lucide-animated/home.d.ts +11 -0
- package/dist/react/icons/lucide-animated/home.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/home.js +2 -2
- package/dist/react/icons/lucide-animated/index.d.ts +38 -0
- package/dist/react/icons/lucide-animated/index.d.ts.map +1 -0
- package/dist/react/icons/lucide-animated/layers.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/layers.js +1 -1
- package/dist/react/icons/lucide-animated/layout-panel-top.d.ts +11 -0
- package/dist/react/icons/lucide-animated/layout-panel-top.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/layout-panel-top.js +2 -2
- package/dist/{icons → react/icons}/lucide-animated/list.d.ts +1 -1
- package/dist/react/icons/lucide-animated/list.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/list.js +1 -1
- package/dist/react/icons/lucide-animated/package.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/package.js +1 -1
- package/dist/react/icons/lucide-animated/palette.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/palette.js +1 -1
- package/dist/react/icons/lucide-animated/plus.d.ts +11 -0
- package/dist/react/icons/lucide-animated/plus.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/plus.js +2 -2
- package/dist/react/icons/lucide-animated/refresh-cw.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/refresh-cw.js +1 -1
- package/dist/react/icons/lucide-animated/rocket.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/rocket.js +1 -1
- package/dist/react/icons/lucide-animated/save.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/save.js +1 -1
- package/dist/react/icons/lucide-animated/search.d.ts +11 -0
- package/dist/react/icons/lucide-animated/search.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/search.js +2 -2
- package/dist/react/icons/lucide-animated/settings.d.ts +11 -0
- package/dist/react/icons/lucide-animated/settings.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/settings.js +2 -2
- package/dist/{icons → react/icons}/lucide-animated/terminal.d.ts +1 -1
- package/dist/react/icons/lucide-animated/terminal.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/terminal.js +1 -1
- package/dist/react/icons/lucide-animated/trash-2.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/trash-2.js +1 -1
- package/dist/react/icons/lucide-animated/trending-down.d.ts +11 -0
- package/dist/react/icons/lucide-animated/trending-down.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/trending-down.js +2 -2
- package/dist/react/icons/lucide-animated/trending-up.d.ts +11 -0
- package/dist/react/icons/lucide-animated/trending-up.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/trending-up.js +2 -2
- package/dist/react/icons/lucide-animated/type.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/type.js +1 -1
- package/dist/react/icons/lucide-animated/upload.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/upload.js +1 -1
- package/dist/react/icons/lucide-animated/x.d.ts +11 -0
- package/dist/react/icons/lucide-animated/x.d.ts.map +1 -0
- package/dist/{icons → react/icons}/lucide-animated/x.js +2 -2
- package/dist/react/index.d.ts +19 -0
- package/dist/react/index.d.ts.map +1 -0
- package/dist/react/lib/get-strict-context.d.ts +30 -0
- package/dist/react/lib/get-strict-context.d.ts.map +1 -0
- package/dist/react/lib/get-strict-context.js +40 -0
- package/dist/react/lib/index.d.ts +8 -0
- package/dist/react/lib/index.d.ts.map +1 -0
- package/dist/react/lib/index.js +2 -0
- package/dist/{lib → react/lib}/utils.d.ts +2 -2
- package/dist/react/lib/utils.d.ts.map +1 -0
- package/dist/{lib → react/lib}/utils.js +3 -3
- package/dist/react/primitives/AutoHeight/index.d.ts +31 -0
- package/dist/react/primitives/AutoHeight/index.d.ts.map +1 -0
- package/dist/react/primitives/AutoHeight/index.js +52 -0
- package/dist/react/primitives/CountingNumber/index.d.ts +44 -0
- package/dist/react/primitives/CountingNumber/index.d.ts.map +1 -0
- package/dist/react/primitives/CountingNumber/index.js +97 -0
- package/dist/react/primitives/Highlight/Highlight.types.d.ts +113 -0
- package/dist/react/primitives/Highlight/Highlight.types.d.ts.map +1 -0
- package/dist/react/primitives/Highlight/index.d.ts +48 -0
- package/dist/react/primitives/Highlight/index.d.ts.map +1 -0
- package/dist/{components/animate-ui/primitives/effects/highlight.js → react/primitives/Highlight/index.js} +45 -5
- package/dist/react/primitives/Slot/index.d.ts +53 -0
- package/dist/react/primitives/Slot/index.d.ts.map +1 -0
- package/dist/{components/animate-ui/primitives/animate/slot.js → react/primitives/Slot/index.js} +27 -4
- package/dist/react/primitives/index.d.ts +12 -0
- package/dist/react/primitives/index.d.ts.map +1 -0
- package/dist/react/primitives/index.js +4 -0
- package/dist/react/ui/Accordion/Accordion.styles.d.ts +47 -0
- package/dist/react/ui/Accordion/Accordion.styles.d.ts.map +1 -0
- package/dist/react/ui/Accordion/Accordion.styles.js +54 -0
- package/dist/react/ui/Accordion/Accordion.types.d.ts +160 -0
- package/dist/react/ui/Accordion/Accordion.types.d.ts.map +1 -0
- package/dist/react/ui/Accordion/index.d.ts +105 -0
- package/dist/react/ui/Accordion/index.d.ts.map +1 -0
- package/dist/react/ui/Accordion/index.js +266 -0
- package/dist/react/ui/AlertDialog/AlertDialog.styles.d.ts +28 -0
- package/dist/react/ui/AlertDialog/AlertDialog.styles.d.ts.map +1 -0
- package/dist/react/ui/AlertDialog/AlertDialog.styles.js +29 -0
- package/dist/react/ui/AlertDialog/AlertDialog.types.d.ts +235 -0
- package/dist/react/ui/AlertDialog/AlertDialog.types.d.ts.map +1 -0
- package/dist/react/ui/AlertDialog/index.d.ts +194 -0
- package/dist/react/ui/AlertDialog/index.d.ts.map +1 -0
- package/dist/react/ui/AlertDialog/index.js +319 -0
- package/dist/react/ui/Badge/Badge.styles.d.ts +16 -0
- package/dist/react/ui/Badge/Badge.styles.d.ts.map +1 -0
- package/dist/{components/ui/badge/badge.styles.js → react/ui/Badge/Badge.styles.js} +2 -6
- package/dist/react/ui/Badge/Badge.types.d.ts +21 -0
- package/dist/react/ui/Badge/Badge.types.d.ts.map +1 -0
- package/dist/react/ui/Badge/index.d.ts +20 -0
- package/dist/react/ui/Badge/index.d.ts.map +1 -0
- package/dist/react/ui/Badge/index.js +34 -0
- package/dist/react/ui/Button/Button.styles.d.ts +21 -0
- package/dist/react/ui/Button/Button.styles.d.ts.map +1 -0
- package/dist/{components/ui/button/button.styles.js → react/ui/Button/Button.styles.js} +3 -9
- package/dist/react/ui/Button/Button.types.d.ts +45 -0
- package/dist/react/ui/Button/Button.types.d.ts.map +1 -0
- package/dist/react/ui/Button/index.d.ts +22 -0
- package/dist/react/ui/Button/index.d.ts.map +1 -0
- package/dist/react/ui/Button/index.js +103 -0
- package/dist/react/ui/Card/Card.styles.d.ts +11 -0
- package/dist/react/ui/Card/Card.styles.d.ts.map +1 -0
- package/dist/react/ui/Card/Card.styles.js +24 -0
- package/dist/react/ui/Card/Card.types.d.ts +22 -0
- package/dist/react/ui/Card/Card.types.d.ts.map +1 -0
- package/dist/react/ui/Card/index.d.ts +36 -0
- package/dist/react/ui/Card/index.d.ts.map +1 -0
- package/dist/react/ui/Card/index.js +82 -0
- package/dist/react/ui/Checkbox/Checkbox.styles.d.ts +25 -0
- package/dist/react/ui/Checkbox/Checkbox.styles.d.ts.map +1 -0
- package/dist/react/ui/Checkbox/Checkbox.styles.js +34 -0
- package/dist/react/ui/Checkbox/Checkbox.types.d.ts +88 -0
- package/dist/react/ui/Checkbox/Checkbox.types.d.ts.map +1 -0
- package/dist/react/ui/Checkbox/index.d.ts +59 -0
- package/dist/react/ui/Checkbox/index.d.ts.map +1 -0
- package/dist/react/ui/Checkbox/index.js +158 -0
- package/dist/react/ui/Combobox/Combobox.styles.d.ts +7 -0
- package/dist/react/ui/Combobox/Combobox.styles.d.ts.map +1 -0
- package/dist/react/ui/Combobox/Combobox.styles.js +17 -0
- package/dist/react/ui/Combobox/Combobox.types.d.ts +49 -0
- package/dist/react/ui/Combobox/Combobox.types.d.ts.map +1 -0
- package/dist/react/ui/Combobox/index.d.ts +60 -0
- package/dist/react/ui/Combobox/index.d.ts.map +1 -0
- package/dist/{components/ui/combobox.js → react/ui/Combobox/index.js} +54 -16
- package/dist/react/ui/CornerBracket/CornerBracket.styles.d.ts +18 -0
- package/dist/react/ui/CornerBracket/CornerBracket.styles.d.ts.map +1 -0
- package/dist/react/ui/CornerBracket/CornerBracket.styles.js +30 -0
- package/dist/react/ui/CornerBracket/CornerBracket.types.d.ts +12 -0
- package/dist/react/ui/CornerBracket/CornerBracket.types.d.ts.map +1 -0
- package/dist/react/ui/CornerBracket/index.d.ts +23 -0
- package/dist/react/ui/CornerBracket/index.d.ts.map +1 -0
- package/dist/react/ui/CornerBracket/index.js +42 -0
- package/dist/react/ui/Dialog/Dialog.styles.d.ts +24 -0
- package/dist/react/ui/Dialog/Dialog.styles.d.ts.map +1 -0
- package/dist/react/ui/Dialog/Dialog.styles.js +29 -0
- package/dist/react/ui/Dialog/Dialog.types.d.ts +221 -0
- package/dist/react/ui/Dialog/Dialog.types.d.ts.map +1 -0
- package/dist/react/ui/Dialog/index.d.ts +138 -0
- package/dist/react/ui/Dialog/index.d.ts.map +1 -0
- package/dist/react/ui/Dialog/index.js +265 -0
- package/dist/react/ui/DropdownMenu/DropdownMenu.styles.d.ts +7 -0
- package/dist/react/ui/DropdownMenu/DropdownMenu.styles.d.ts.map +1 -0
- package/dist/react/ui/DropdownMenu/DropdownMenu.styles.js +16 -0
- package/dist/react/ui/DropdownMenu/DropdownMenu.types.d.ts +50 -0
- package/dist/react/ui/DropdownMenu/DropdownMenu.types.d.ts.map +1 -0
- package/dist/react/ui/DropdownMenu/index.d.ts +50 -0
- package/dist/react/ui/DropdownMenu/index.d.ts.map +1 -0
- package/dist/{components/ui/dropdown-menu.js → react/ui/DropdownMenu/index.js} +44 -14
- package/dist/react/ui/Field/Field.styles.d.ts +11 -0
- package/dist/react/ui/Field/Field.styles.d.ts.map +1 -0
- package/dist/react/ui/Field/Field.styles.js +27 -0
- package/dist/react/ui/Field/Field.types.d.ts +39 -0
- package/dist/react/ui/Field/Field.types.d.ts.map +1 -0
- package/dist/react/ui/Field/index.d.ts +56 -0
- package/dist/react/ui/Field/index.d.ts.map +1 -0
- package/dist/{components/ui/field.js → react/ui/Field/index.js} +55 -23
- package/dist/react/ui/Input/Input.styles.d.ts +7 -0
- package/dist/react/ui/Input/Input.styles.d.ts.map +1 -0
- package/dist/react/ui/Input/Input.styles.js +5 -0
- package/dist/react/ui/Input/Input.types.d.ts +9 -0
- package/dist/react/ui/Input/Input.types.d.ts.map +1 -0
- package/dist/react/ui/Input/index.d.ts +17 -0
- package/dist/react/ui/Input/index.d.ts.map +1 -0
- package/dist/react/ui/Input/index.js +29 -0
- package/dist/react/ui/InputGroup/InputGroup.styles.d.ts +15 -0
- package/dist/react/ui/InputGroup/InputGroup.styles.d.ts.map +1 -0
- package/dist/react/ui/InputGroup/InputGroup.styles.js +34 -0
- package/dist/react/ui/InputGroup/InputGroup.types.d.ts +28 -0
- package/dist/react/ui/InputGroup/InputGroup.types.d.ts.map +1 -0
- package/dist/react/ui/InputGroup/index.d.ts +28 -0
- package/dist/react/ui/InputGroup/index.d.ts.map +1 -0
- package/dist/react/ui/InputGroup/index.js +81 -0
- package/dist/react/ui/Label/Label.styles.d.ts +6 -0
- package/dist/react/ui/Label/Label.styles.d.ts.map +1 -0
- package/dist/react/ui/Label/Label.styles.js +5 -0
- package/dist/react/ui/Label/Label.types.d.ts +8 -0
- package/dist/react/ui/Label/Label.types.d.ts.map +1 -0
- package/dist/react/ui/Label/index.d.ts +14 -0
- package/dist/react/ui/Label/index.d.ts.map +1 -0
- package/dist/react/ui/Label/index.js +24 -0
- package/dist/react/ui/Menu/Menu.styles.d.ts +42 -0
- package/dist/react/ui/Menu/Menu.styles.d.ts.map +1 -0
- package/dist/react/ui/Menu/Menu.styles.js +32 -0
- package/dist/react/ui/Menu/Menu.types.d.ts +328 -0
- package/dist/react/ui/Menu/Menu.types.d.ts.map +1 -0
- package/dist/react/ui/Menu/index.d.ts +354 -0
- package/dist/react/ui/Menu/index.d.ts.map +1 -0
- package/dist/react/ui/Menu/index.js +636 -0
- package/dist/react/ui/Popover/Popover.styles.d.ts +23 -0
- package/dist/react/ui/Popover/Popover.styles.d.ts.map +1 -0
- package/dist/react/ui/Popover/Popover.styles.js +26 -0
- package/dist/react/ui/Popover/Popover.types.d.ts +204 -0
- package/dist/react/ui/Popover/Popover.types.d.ts.map +1 -0
- package/dist/react/ui/Popover/index.d.ts +133 -0
- package/dist/react/ui/Popover/index.d.ts.map +1 -0
- package/dist/react/ui/Popover/index.js +237 -0
- package/dist/react/ui/Progress/Progress.styles.d.ts +28 -0
- package/dist/react/ui/Progress/Progress.styles.d.ts.map +1 -0
- package/dist/react/ui/Progress/Progress.styles.js +30 -0
- package/dist/react/ui/Progress/Progress.types.d.ts +148 -0
- package/dist/react/ui/Progress/Progress.types.d.ts.map +1 -0
- package/dist/react/ui/Progress/index.d.ts +111 -0
- package/dist/react/ui/Progress/index.d.ts.map +1 -0
- package/dist/react/ui/Progress/index.js +170 -0
- package/dist/react/ui/Select/Select.styles.d.ts +7 -0
- package/dist/react/ui/Select/Select.styles.d.ts.map +1 -0
- package/dist/react/ui/Select/Select.styles.js +15 -0
- package/dist/react/ui/Select/Select.types.d.ts +28 -0
- package/dist/react/ui/Select/Select.types.d.ts.map +1 -0
- package/dist/react/ui/Select/index.d.ts +38 -0
- package/dist/react/ui/Select/index.d.ts.map +1 -0
- package/dist/{components/ui/select.js → react/ui/Select/index.js} +35 -13
- package/dist/react/ui/Separator/Separator.styles.d.ts +6 -0
- package/dist/react/ui/Separator/Separator.styles.d.ts.map +1 -0
- package/dist/react/ui/Separator/Separator.styles.js +5 -0
- package/dist/react/ui/Separator/Separator.types.d.ts +9 -0
- package/dist/react/ui/Separator/Separator.types.d.ts.map +1 -0
- package/dist/react/ui/Separator/index.d.ts +16 -0
- package/dist/react/ui/Separator/index.d.ts.map +1 -0
- package/dist/react/ui/Separator/index.js +29 -0
- package/dist/react/ui/Switch/Switch.styles.d.ts +26 -0
- package/dist/react/ui/Switch/Switch.styles.d.ts.map +1 -0
- package/dist/react/ui/Switch/Switch.styles.js +41 -0
- package/dist/react/ui/Switch/Switch.types.d.ts +130 -0
- package/dist/react/ui/Switch/Switch.types.d.ts.map +1 -0
- package/dist/react/ui/Switch/index.d.ts +79 -0
- package/dist/react/ui/Switch/index.d.ts.map +1 -0
- package/dist/react/ui/Switch/index.js +199 -0
- package/dist/react/ui/Tabs/Tabs.styles.d.ts +43 -0
- package/dist/react/ui/Tabs/Tabs.styles.d.ts.map +1 -0
- package/dist/react/ui/Tabs/Tabs.styles.js +26 -0
- package/dist/react/ui/Tabs/Tabs.types.d.ts +201 -0
- package/dist/react/ui/Tabs/Tabs.types.d.ts.map +1 -0
- package/dist/react/ui/Tabs/index.d.ts +141 -0
- package/dist/react/ui/Tabs/index.d.ts.map +1 -0
- package/dist/react/ui/Tabs/index.js +308 -0
- package/dist/react/ui/Textarea/Textarea.styles.d.ts +6 -0
- package/dist/react/ui/Textarea/Textarea.styles.d.ts.map +1 -0
- package/dist/react/ui/Textarea/Textarea.styles.js +5 -0
- package/dist/react/ui/Textarea/Textarea.types.d.ts +8 -0
- package/dist/react/ui/Textarea/Textarea.types.d.ts.map +1 -0
- package/dist/react/ui/Textarea/index.d.ts +14 -0
- package/dist/react/ui/Textarea/index.d.ts.map +1 -0
- package/dist/react/ui/Textarea/index.js +24 -0
- package/dist/react/ui/Tooltip/Tooltip.styles.d.ts +23 -0
- package/dist/react/ui/Tooltip/Tooltip.styles.d.ts.map +1 -0
- package/dist/react/ui/Tooltip/Tooltip.styles.js +26 -0
- package/dist/react/ui/Tooltip/Tooltip.types.d.ts +203 -0
- package/dist/react/ui/Tooltip/Tooltip.types.d.ts.map +1 -0
- package/dist/react/ui/Tooltip/index.d.ts +110 -0
- package/dist/react/ui/Tooltip/index.d.ts.map +1 -0
- package/dist/react/ui/Tooltip/index.js +219 -0
- package/dist/react/ui/index.d.ts +31 -0
- package/dist/react/ui/index.d.ts.map +1 -0
- package/dist/react/ui/index.js +37 -0
- package/dist/react.js +88 -0
- package/package.json +12 -13
- package/src/core/index.ts +7 -0
- package/src/core/types.ts +82 -0
- package/src/index.ts +20 -11
- package/src/react/components/MorphingPopover/MorphingPopover.types.ts +49 -0
- package/src/react/components/MorphingPopover/index.tsx +186 -0
- package/src/react/components/index.ts +9 -0
- package/src/{hooks/use-auto-height.tsx → react/hooks/Animation/UseAutoHeight.tsx} +24 -3
- package/src/react/hooks/DOM/UseIsInView.tsx +44 -0
- package/src/{hooks/use-controlled-state.tsx → react/hooks/State/UseControlledState.tsx} +26 -2
- package/src/{hooks/use-data-state.tsx → react/hooks/State/UseDataState.tsx} +22 -0
- package/src/react/hooks/index.ts +17 -0
- package/src/react/icons/index.ts +12 -0
- package/src/{icons → react/icons}/lucide-animated/activity.tsx +1 -1
- package/src/{icons → react/icons}/lucide-animated/bell-electric.tsx +1 -1
- package/src/{icons → react/icons}/lucide-animated/bell.tsx +1 -1
- package/src/{icons → react/icons}/lucide-animated/bot.tsx +1 -1
- package/src/{icons → react/icons}/lucide-animated/box.tsx +1 -1
- package/src/{icons → react/icons}/lucide-animated/circle-check.tsx +1 -1
- package/src/{icons → react/icons}/lucide-animated/delete.tsx +1 -1
- package/src/{icons → react/icons}/lucide-animated/download.tsx +1 -1
- package/src/{icons → react/icons}/lucide-animated/home.tsx +1 -1
- package/src/react/icons/lucide-animated/index.ts +38 -0
- package/src/{icons → react/icons}/lucide-animated/layout-panel-top.tsx +1 -1
- package/src/{icons → react/icons}/lucide-animated/plus.tsx +1 -1
- package/src/{icons → react/icons}/lucide-animated/search.tsx +1 -1
- package/src/{icons → react/icons}/lucide-animated/settings.tsx +1 -1
- package/src/{icons → react/icons}/lucide-animated/trending-down.tsx +1 -1
- package/src/{icons → react/icons}/lucide-animated/trending-up.tsx +1 -1
- package/src/{icons → react/icons}/lucide-animated/x.tsx +1 -1
- package/src/react/index.ts +30 -0
- package/src/{lib → react/lib}/get-strict-context.tsx +20 -0
- package/src/react/lib/index.ts +8 -0
- package/src/{lib → react/lib}/utils.ts +2 -2
- package/src/{components/animate-ui/primitives/effects/auto-height.tsx → react/primitives/AutoHeight/index.tsx} +24 -5
- package/src/{components/animate-ui/primitives/texts/counting-number.tsx → react/primitives/CountingNumber/index.tsx} +35 -7
- package/src/react/primitives/Highlight/Highlight.types.ts +136 -0
- package/src/{components/animate-ui/primitives/effects/highlight.tsx → react/primitives/Highlight/index.tsx} +60 -123
- package/src/{components/animate-ui/primitives/animate/slot.tsx → react/primitives/Slot/index.tsx} +43 -11
- package/src/react/primitives/index.ts +13 -0
- package/src/react/ui/Accordion/Accordion.styles.ts +72 -0
- package/src/react/ui/Accordion/Accordion.types.ts +199 -0
- package/src/react/ui/Accordion/index.tsx +362 -0
- package/src/react/ui/AlertDialog/AlertDialog.styles.ts +38 -0
- package/src/react/ui/AlertDialog/AlertDialog.types.ts +296 -0
- package/src/react/ui/AlertDialog/index.tsx +540 -0
- package/src/react/ui/Badge/Badge.styles.ts +43 -0
- package/src/react/ui/Badge/Badge.types.ts +26 -0
- package/src/react/ui/Badge/index.tsx +34 -0
- package/src/react/ui/Button/Button.styles.ts +57 -0
- package/src/react/ui/Button/Button.types.ts +63 -0
- package/src/react/ui/Button/index.tsx +155 -0
- package/src/react/ui/Card/Card.styles.ts +32 -0
- package/src/react/ui/Card/Card.types.ts +39 -0
- package/src/react/ui/Card/index.tsx +130 -0
- package/src/react/ui/Checkbox/Checkbox.styles.ts +40 -0
- package/src/react/ui/Checkbox/Checkbox.types.ts +98 -0
- package/src/react/ui/Checkbox/index.tsx +233 -0
- package/src/react/ui/Combobox/Combobox.styles.ts +34 -0
- package/src/react/ui/Combobox/Combobox.types.ts +89 -0
- package/src/react/ui/Combobox/index.tsx +331 -0
- package/src/react/ui/CornerBracket/CornerBracket.styles.ts +38 -0
- package/src/react/ui/CornerBracket/CornerBracket.types.ts +15 -0
- package/src/react/ui/CornerBracket/index.tsx +49 -0
- package/src/react/ui/Dialog/Dialog.styles.ts +59 -0
- package/src/react/ui/Dialog/Dialog.types.ts +284 -0
- package/src/react/ui/Dialog/index.tsx +452 -0
- package/src/react/ui/DropdownMenu/DropdownMenu.styles.ts +35 -0
- package/src/react/ui/DropdownMenu/DropdownMenu.types.ts +81 -0
- package/src/react/ui/DropdownMenu/index.tsx +300 -0
- package/src/react/ui/Field/Field.styles.ts +47 -0
- package/src/react/ui/Field/Field.types.ts +60 -0
- package/src/react/ui/Field/index.tsx +254 -0
- package/src/{components/ui/input.tsx → react/ui/Input/Input.styles.ts} +8 -17
- package/src/react/ui/Input/Input.types.ts +10 -0
- package/src/react/ui/Input/index.tsx +32 -0
- package/src/react/ui/InputGroup/InputGroup.styles.ts +53 -0
- package/src/react/ui/InputGroup/InputGroup.types.ts +44 -0
- package/src/react/ui/InputGroup/index.tsx +147 -0
- package/src/react/ui/Label/Label.styles.ts +10 -0
- package/src/react/ui/Label/Label.types.ts +9 -0
- package/src/react/ui/Label/index.tsx +27 -0
- package/src/react/ui/Menu/Menu.styles.ts +71 -0
- package/src/react/ui/Menu/Menu.types.ts +425 -0
- package/src/react/ui/Menu/index.tsx +900 -0
- package/src/react/ui/Popover/Popover.styles.ts +55 -0
- package/src/react/ui/Popover/Popover.types.ts +261 -0
- package/src/react/ui/Popover/index.tsx +422 -0
- package/src/react/ui/Progress/Progress.styles.ts +36 -0
- package/src/react/ui/Progress/Progress.types.ts +162 -0
- package/src/react/ui/Progress/index.tsx +254 -0
- package/src/react/ui/Select/Select.styles.ts +30 -0
- package/src/react/ui/Select/Select.types.ts +51 -0
- package/src/react/ui/Select/index.tsx +225 -0
- package/src/react/ui/Separator/Separator.styles.ts +10 -0
- package/src/react/ui/Separator/Separator.types.ts +10 -0
- package/src/react/ui/Separator/index.tsx +37 -0
- package/src/react/ui/Switch/Switch.styles.ts +50 -0
- package/src/react/ui/Switch/Switch.types.ts +155 -0
- package/src/react/ui/Switch/index.tsx +253 -0
- package/src/react/ui/Tabs/Tabs.styles.ts +60 -0
- package/src/react/ui/Tabs/Tabs.types.ts +250 -0
- package/src/react/ui/Tabs/index.tsx +421 -0
- package/src/{components/ui/textarea.tsx → react/ui/Textarea/Textarea.styles.ts} +7 -15
- package/src/react/ui/Textarea/Textarea.types.ts +9 -0
- package/src/react/ui/Textarea/index.tsx +27 -0
- package/src/react/ui/Tooltip/Tooltip.styles.ts +43 -0
- package/src/react/ui/Tooltip/Tooltip.types.ts +253 -0
- package/src/react/ui/Tooltip/index.tsx +394 -0
- package/src/react/ui/index.ts +34 -0
- package/dist/components/animate-ui/primitives/animate/slot.d.ts +0 -18
- package/dist/components/animate-ui/primitives/animate/slot.d.ts.map +0 -1
- package/dist/components/animate-ui/primitives/base/accordion.d.ts +0 -22
- package/dist/components/animate-ui/primitives/base/accordion.d.ts.map +0 -1
- package/dist/components/animate-ui/primitives/base/alert-dialog.d.ts +0 -33
- package/dist/components/animate-ui/primitives/base/alert-dialog.d.ts.map +0 -1
- package/dist/components/animate-ui/primitives/base/checkbox.d.ts +0 -15
- package/dist/components/animate-ui/primitives/base/checkbox.d.ts.map +0 -1
- package/dist/components/animate-ui/primitives/base/dialog.d.ts +0 -33
- package/dist/components/animate-ui/primitives/base/dialog.d.ts.map +0 -1
- package/dist/components/animate-ui/primitives/base/menu.d.ts +0 -60
- package/dist/components/animate-ui/primitives/base/menu.d.ts.map +0 -1
- package/dist/components/animate-ui/primitives/base/popover.d.ts +0 -30
- package/dist/components/animate-ui/primitives/base/popover.d.ts.map +0 -1
- package/dist/components/animate-ui/primitives/base/progress.d.ts +0 -297
- package/dist/components/animate-ui/primitives/base/progress.d.ts.map +0 -1
- package/dist/components/animate-ui/primitives/base/switch.d.ts +0 -23
- package/dist/components/animate-ui/primitives/base/switch.d.ts.map +0 -1
- package/dist/components/animate-ui/primitives/base/switch.js +0 -90
- package/dist/components/animate-ui/primitives/base/tabs.d.ts +0 -33
- package/dist/components/animate-ui/primitives/base/tabs.d.ts.map +0 -1
- package/dist/components/animate-ui/primitives/base/tabs.js +0 -132
- package/dist/components/animate-ui/primitives/base/tooltip.d.ts +0 -31
- package/dist/components/animate-ui/primitives/base/tooltip.d.ts.map +0 -1
- package/dist/components/animate-ui/primitives/effects/auto-height.d.ts +0 -12
- package/dist/components/animate-ui/primitives/effects/auto-height.d.ts.map +0 -1
- package/dist/components/animate-ui/primitives/effects/auto-height.js +0 -37
- package/dist/components/animate-ui/primitives/effects/highlight.d.ts +0 -92
- package/dist/components/animate-ui/primitives/effects/highlight.d.ts.map +0 -1
- package/dist/components/animate-ui/primitives/texts/counting-number.d.ts +0 -16
- package/dist/components/animate-ui/primitives/texts/counting-number.d.ts.map +0 -1
- package/dist/components/ui/alert-dialog.d.ts +0 -21
- package/dist/components/ui/alert-dialog.d.ts.map +0 -1
- package/dist/components/ui/alert-dialog.js +0 -99
- package/dist/components/ui/badge/badge.d.ts +0 -37
- package/dist/components/ui/badge/badge.d.ts.map +0 -1
- package/dist/components/ui/badge/badge.js +0 -52
- package/dist/components/ui/badge/badge.styles.d.ts +0 -23
- package/dist/components/ui/badge/badge.styles.d.ts.map +0 -1
- package/dist/components/ui/badge/badge.types.d.ts +0 -38
- package/dist/components/ui/badge/badge.types.d.ts.map +0 -1
- package/dist/components/ui/badge/index.d.ts +0 -8
- package/dist/components/ui/badge/index.d.ts.map +0 -1
- package/dist/components/ui/badge/index.js +0 -2
- package/dist/components/ui/button/button.d.ts +0 -79
- package/dist/components/ui/button/button.d.ts.map +0 -1
- package/dist/components/ui/button/button.js +0 -161
- package/dist/components/ui/button/button.styles.d.ts +0 -33
- package/dist/components/ui/button/button.styles.d.ts.map +0 -1
- package/dist/components/ui/button/button.types.d.ts +0 -103
- package/dist/components/ui/button/button.types.d.ts.map +0 -1
- package/dist/components/ui/button/index.d.ts +0 -7
- package/dist/components/ui/button/index.d.ts.map +0 -1
- package/dist/components/ui/button/index.js +0 -2
- package/dist/components/ui/card.d.ts +0 -14
- package/dist/components/ui/card.d.ts.map +0 -1
- package/dist/components/ui/card.js +0 -67
- package/dist/components/ui/combobox.d.ts +0 -25
- package/dist/components/ui/combobox.d.ts.map +0 -1
- package/dist/components/ui/devenv-bracket.d.ts +0 -30
- package/dist/components/ui/devenv-bracket.d.ts.map +0 -1
- package/dist/components/ui/devenv-bracket.js +0 -66
- package/dist/components/ui/dropdown-menu.d.ts +0 -30
- package/dist/components/ui/dropdown-menu.d.ts.map +0 -1
- package/dist/components/ui/field.d.ts +0 -25
- package/dist/components/ui/field.d.ts.map +0 -1
- package/dist/components/ui/index.d.ts +0 -25
- package/dist/components/ui/index.d.ts.map +0 -1
- package/dist/components/ui/index.js +0 -24
- package/dist/components/ui/input-group.d.ts +0 -19
- package/dist/components/ui/input-group.d.ts.map +0 -1
- package/dist/components/ui/input-group.js +0 -84
- package/dist/components/ui/input.d.ts +0 -4
- package/dist/components/ui/input.d.ts.map +0 -1
- package/dist/components/ui/input.js +0 -17
- package/dist/components/ui/label.d.ts +0 -4
- package/dist/components/ui/label.d.ts.map +0 -1
- package/dist/components/ui/label.js +0 -15
- package/dist/components/ui/morphing-popover/index.d.ts +0 -10
- package/dist/components/ui/morphing-popover/index.d.ts.map +0 -1
- package/dist/components/ui/morphing-popover/index.js +0 -1
- package/dist/components/ui/morphing-popover/morphing-popover.d.ts +0 -54
- package/dist/components/ui/morphing-popover/morphing-popover.d.ts.map +0 -1
- package/dist/components/ui/morphing-popover/morphing-popover.module.js +0 -5
- package/dist/components/ui/select.d.ts +0 -16
- package/dist/components/ui/select.d.ts.map +0 -1
- package/dist/components/ui/separator.d.ts +0 -4
- package/dist/components/ui/separator.d.ts.map +0 -1
- package/dist/components/ui/separator.js +0 -18
- package/dist/components/ui/switch.d.ts +0 -9
- package/dist/components/ui/switch.d.ts.map +0 -1
- package/dist/components/ui/switch.js +0 -1
- package/dist/components/ui/tabs.d.ts +0 -9
- package/dist/components/ui/tabs.d.ts.map +0 -1
- package/dist/components/ui/tabs.js +0 -1
- package/dist/components/ui/textarea.d.ts +0 -4
- package/dist/components/ui/textarea.d.ts.map +0 -1
- package/dist/components/ui/textarea.js +0 -15
- package/dist/hooks/use-auto-height.d.ts +0 -11
- package/dist/hooks/use-auto-height.d.ts.map +0 -1
- package/dist/hooks/use-controlled-state.d.ts +0 -9
- package/dist/hooks/use-controlled-state.d.ts.map +0 -1
- package/dist/hooks/use-controlled-state.js +0 -17
- package/dist/hooks/use-data-state.d.ts +0 -5
- package/dist/hooks/use-data-state.d.ts.map +0 -1
- package/dist/hooks/use-is-in-view.d.ts +0 -13
- package/dist/hooks/use-is-in-view.d.ts.map +0 -1
- package/dist/icons/index.d.ts +0 -8
- package/dist/icons/index.d.ts.map +0 -1
- package/dist/icons/lucide-animated/activity.d.ts +0 -11
- package/dist/icons/lucide-animated/activity.d.ts.map +0 -1
- package/dist/icons/lucide-animated/arrow-down-to-line.d.ts.map +0 -1
- package/dist/icons/lucide-animated/arrow-up.d.ts.map +0 -1
- package/dist/icons/lucide-animated/bell-electric.d.ts +0 -11
- package/dist/icons/lucide-animated/bell-electric.d.ts.map +0 -1
- package/dist/icons/lucide-animated/bell.d.ts +0 -11
- package/dist/icons/lucide-animated/bell.d.ts.map +0 -1
- package/dist/icons/lucide-animated/bot.d.ts +0 -11
- package/dist/icons/lucide-animated/bot.d.ts.map +0 -1
- package/dist/icons/lucide-animated/box.d.ts +0 -11
- package/dist/icons/lucide-animated/box.d.ts.map +0 -1
- package/dist/icons/lucide-animated/check.d.ts.map +0 -1
- package/dist/icons/lucide-animated/circle-check.d.ts +0 -11
- package/dist/icons/lucide-animated/circle-check.d.ts.map +0 -1
- package/dist/icons/lucide-animated/delete.d.ts +0 -11
- package/dist/icons/lucide-animated/delete.d.ts.map +0 -1
- package/dist/icons/lucide-animated/download.d.ts +0 -11
- package/dist/icons/lucide-animated/download.d.ts.map +0 -1
- package/dist/icons/lucide-animated/edit-2.d.ts.map +0 -1
- package/dist/icons/lucide-animated/globe.d.ts.map +0 -1
- package/dist/icons/lucide-animated/home.d.ts +0 -11
- package/dist/icons/lucide-animated/home.d.ts.map +0 -1
- package/dist/icons/lucide-animated/index.d.ts +0 -38
- package/dist/icons/lucide-animated/index.d.ts.map +0 -1
- package/dist/icons/lucide-animated/layers.d.ts.map +0 -1
- package/dist/icons/lucide-animated/layout-panel-top.d.ts +0 -11
- package/dist/icons/lucide-animated/layout-panel-top.d.ts.map +0 -1
- package/dist/icons/lucide-animated/list.d.ts.map +0 -1
- package/dist/icons/lucide-animated/package.d.ts.map +0 -1
- package/dist/icons/lucide-animated/palette.d.ts.map +0 -1
- package/dist/icons/lucide-animated/plus.d.ts +0 -11
- package/dist/icons/lucide-animated/plus.d.ts.map +0 -1
- package/dist/icons/lucide-animated/refresh-cw.d.ts.map +0 -1
- package/dist/icons/lucide-animated/rocket.d.ts.map +0 -1
- package/dist/icons/lucide-animated/save.d.ts.map +0 -1
- package/dist/icons/lucide-animated/search.d.ts +0 -11
- package/dist/icons/lucide-animated/search.d.ts.map +0 -1
- package/dist/icons/lucide-animated/settings.d.ts +0 -11
- package/dist/icons/lucide-animated/settings.d.ts.map +0 -1
- package/dist/icons/lucide-animated/terminal.d.ts.map +0 -1
- package/dist/icons/lucide-animated/trash-2.d.ts.map +0 -1
- package/dist/icons/lucide-animated/trending-down.d.ts +0 -11
- package/dist/icons/lucide-animated/trending-down.d.ts.map +0 -1
- package/dist/icons/lucide-animated/trending-up.d.ts +0 -11
- package/dist/icons/lucide-animated/trending-up.d.ts.map +0 -1
- package/dist/icons/lucide-animated/type.d.ts.map +0 -1
- package/dist/icons/lucide-animated/upload.d.ts.map +0 -1
- package/dist/icons/lucide-animated/x.d.ts +0 -11
- package/dist/icons/lucide-animated/x.d.ts.map +0 -1
- package/dist/lib/get-strict-context.d.ts +0 -10
- package/dist/lib/get-strict-context.d.ts.map +0 -1
- package/dist/lib/get-strict-context.js +0 -20
- package/dist/lib/utils.d.ts.map +0 -1
- package/src/components/animate-ui/primitives/base/accordion.tsx +0 -179
- package/src/components/animate-ui/primitives/base/alert-dialog.tsx +0 -218
- package/src/components/animate-ui/primitives/base/checkbox.tsx +0 -153
- package/src/components/animate-ui/primitives/base/dialog.tsx +0 -203
- package/src/components/animate-ui/primitives/base/menu.tsx +0 -463
- package/src/components/animate-ui/primitives/base/popover.tsx +0 -167
- package/src/components/animate-ui/primitives/base/progress.tsx +0 -103
- package/src/components/animate-ui/primitives/base/switch.tsx +0 -158
- package/src/components/animate-ui/primitives/base/tabs.tsx +0 -202
- package/src/components/animate-ui/primitives/base/tooltip.tsx +0 -209
- package/src/components/ui/alert-dialog.tsx +0 -177
- package/src/components/ui/badge/badge.styles.ts +0 -46
- package/src/components/ui/badge/badge.tsx +0 -52
- package/src/components/ui/badge/badge.types.ts +0 -41
- package/src/components/ui/badge/index.ts +0 -8
- package/src/components/ui/button/button.styles.ts +0 -66
- package/src/components/ui/button/button.tsx +0 -209
- package/src/components/ui/button/button.types.ts +0 -125
- package/src/components/ui/button/index.ts +0 -7
- package/src/components/ui/card.tsx +0 -108
- package/src/components/ui/combobox.tsx +0 -293
- package/src/components/ui/devenv-bracket.tsx +0 -81
- package/src/components/ui/dropdown-menu.tsx +0 -261
- package/src/components/ui/field.tsx +0 -227
- package/src/components/ui/index.ts +0 -28
- package/src/components/ui/input-group.tsx +0 -149
- package/src/components/ui/label.tsx +0 -18
- package/src/components/ui/morphing-popover/index.ts +0 -10
- package/src/components/ui/morphing-popover/morphing-popover.tsx +0 -183
- package/src/components/ui/select.tsx +0 -190
- package/src/components/ui/separator.tsx +0 -25
- package/src/components/ui/switch.tsx +0 -9
- package/src/components/ui/tabs.tsx +0 -9
- package/src/hooks/use-is-in-view.tsx +0 -25
- package/src/icons/index.ts +0 -12
- package/src/icons/lucide-animated/index.ts +0 -38
- /package/dist/{components/ui/morphing-popover/morphing-popover.module-yxDDcJHZ.css → react/components/MorphingPopover/morphing-popover.module-BkcZcmVy.css} +0 -0
- /package/dist/{icons → react/icons}/index.js +0 -0
- /package/dist/{icons → react/icons}/lucide-animated/check.d.ts +0 -0
- /package/dist/{icons → react/icons}/lucide-animated/edit-2.d.ts +0 -0
- /package/dist/{icons → react/icons}/lucide-animated/globe.d.ts +0 -0
- /package/dist/{icons → react/icons}/lucide-animated/index.js +0 -0
- /package/dist/{icons → react/icons}/lucide-animated/layers.d.ts +0 -0
- /package/dist/{icons → react/icons}/lucide-animated/package.d.ts +0 -0
- /package/dist/{icons → react/icons}/lucide-animated/palette.d.ts +0 -0
- /package/dist/{icons → react/icons}/lucide-animated/refresh-cw.d.ts +0 -0
- /package/dist/{icons → react/icons}/lucide-animated/rocket.d.ts +0 -0
- /package/dist/{icons → react/icons}/lucide-animated/save.d.ts +0 -0
- /package/dist/{icons → react/icons}/lucide-animated/trash-2.d.ts +0 -0
- /package/dist/{icons → react/icons}/lucide-animated/type.d.ts +0 -0
- /package/dist/{icons → react/icons}/lucide-animated/upload.d.ts +0 -0
- /package/src/{components/ui/morphing-popover → react/components/MorphingPopover}/morphing-popover.module.css +0 -0
- /package/src/{icons → react/icons}/lucide-animated/arrow-down-to-line.tsx +0 -0
- /package/src/{icons → react/icons}/lucide-animated/arrow-up.tsx +0 -0
- /package/src/{icons → react/icons}/lucide-animated/check.tsx +0 -0
- /package/src/{icons → react/icons}/lucide-animated/edit-2.tsx +0 -0
- /package/src/{icons → react/icons}/lucide-animated/globe.tsx +0 -0
- /package/src/{icons → react/icons}/lucide-animated/layers.tsx +0 -0
- /package/src/{icons → react/icons}/lucide-animated/list.tsx +0 -0
- /package/src/{icons → react/icons}/lucide-animated/package.tsx +0 -0
- /package/src/{icons → react/icons}/lucide-animated/palette.tsx +0 -0
- /package/src/{icons → react/icons}/lucide-animated/refresh-cw.tsx +0 -0
- /package/src/{icons → react/icons}/lucide-animated/rocket.tsx +0 -0
- /package/src/{icons → react/icons}/lucide-animated/save.tsx +0 -0
- /package/src/{icons → react/icons}/lucide-animated/terminal.tsx +0 -0
- /package/src/{icons → react/icons}/lucide-animated/trash-2.tsx +0 -0
- /package/src/{icons → react/icons}/lucide-animated/type.tsx +0 -0
- /package/src/{icons → react/icons}/lucide-animated/upload.tsx +0 -0
|
@@ -0,0 +1,308 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { cn } from "../../lib/utils.js";
|
|
4
|
+
import { Highlight, HighlightItem } from "../../primitives/Highlight/index.js";
|
|
5
|
+
import { AutoHeight } from "../../primitives/AutoHeight/index.js";
|
|
6
|
+
import { getStrictContext } from "../../lib/get-strict-context.js";
|
|
7
|
+
import { useControlledState } from "../../hooks/State/UseControlledState.js";
|
|
8
|
+
import { tabsStyles } from "./Tabs.styles.js";
|
|
9
|
+
import * as React from "../../../react";
|
|
10
|
+
import { AnimatePresence, motion } from "motion/react";
|
|
11
|
+
import { jsx } from "react/jsx-runtime";
|
|
12
|
+
import { Tabs } from "@base-ui/react/tabs";
|
|
13
|
+
|
|
14
|
+
//#region src/react/ui/Tabs/index.tsx
|
|
15
|
+
/**
|
|
16
|
+
* Tabs component -- animated tab navigation built on base-ui Tabs
|
|
17
|
+
* with motion transitions, highlight tracking, auto-height panels,
|
|
18
|
+
* and the v0.2.0 slot system.
|
|
19
|
+
*
|
|
20
|
+
* Provides sub-components for the tab list, individual tabs, panels,
|
|
21
|
+
* animated highlight indicators, and a panels container with two modes:
|
|
22
|
+
* auto-height (ResizeObserver) and layout (Motion layout animation).
|
|
23
|
+
*
|
|
24
|
+
* @module @mks2508/mks-ui/react/ui/Tabs
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* ```tsx
|
|
28
|
+
* <Tabs defaultValue="general" slots={{ list: 'flex gap-1 border-b' }}>
|
|
29
|
+
* <TabsList>
|
|
30
|
+
* <TabsHighlight className="rounded-md bg-white/10">
|
|
31
|
+
* <TabsHighlightItem value="general">
|
|
32
|
+
* <TabsTab value="general">General</TabsTab>
|
|
33
|
+
* </TabsHighlightItem>
|
|
34
|
+
* <TabsHighlightItem value="advanced">
|
|
35
|
+
* <TabsTab value="advanced">Advanced</TabsTab>
|
|
36
|
+
* </TabsHighlightItem>
|
|
37
|
+
* </TabsHighlight>
|
|
38
|
+
* </TabsList>
|
|
39
|
+
* <TabsPanels>
|
|
40
|
+
* <TabsPanel value="general">General content</TabsPanel>
|
|
41
|
+
* <TabsPanel value="advanced">Advanced content</TabsPanel>
|
|
42
|
+
* </TabsPanels>
|
|
43
|
+
* </Tabs>
|
|
44
|
+
* ```
|
|
45
|
+
*/
|
|
46
|
+
const [TabsProvider, useTabs] = getStrictContext("TabsContext");
|
|
47
|
+
/**
|
|
48
|
+
* Root Tabs component -- provides active tab value context and
|
|
49
|
+
* controlled/uncontrolled state management.
|
|
50
|
+
*
|
|
51
|
+
* @param value - Controlled active tab value
|
|
52
|
+
* @param defaultValue - Uncontrolled initial active tab value
|
|
53
|
+
* @param onValueChange - Callback when active tab changes
|
|
54
|
+
* @param slots - Partial class overrides per slot
|
|
55
|
+
* @param config - Tabs behavior / animation configuration
|
|
56
|
+
*
|
|
57
|
+
* @example
|
|
58
|
+
* ```tsx
|
|
59
|
+
* <Tabs defaultValue="general" slots={{ root: 'w-full' }}>
|
|
60
|
+
* <TabsList>...</TabsList>
|
|
61
|
+
* <TabsPanels>...</TabsPanels>
|
|
62
|
+
* </Tabs>
|
|
63
|
+
* ```
|
|
64
|
+
*/
|
|
65
|
+
function Tabs$1({ slots, config, className, ...props }) {
|
|
66
|
+
const [value, setValue] = useControlledState({
|
|
67
|
+
value: props.value,
|
|
68
|
+
defaultValue: props.defaultValue,
|
|
69
|
+
onChange: props.onValueChange
|
|
70
|
+
});
|
|
71
|
+
return /* @__PURE__ */ jsx(TabsProvider, {
|
|
72
|
+
value: {
|
|
73
|
+
value,
|
|
74
|
+
setValue
|
|
75
|
+
},
|
|
76
|
+
children: /* @__PURE__ */ jsx(Tabs.Root, {
|
|
77
|
+
"data-slot": "tabs",
|
|
78
|
+
className: cn(tabsStyles.root, slots?.root, className),
|
|
79
|
+
...props,
|
|
80
|
+
onValueChange: setValue
|
|
81
|
+
})
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
/**
|
|
85
|
+
* TabsHighlight -- animated background indicator that follows the active tab.
|
|
86
|
+
* Wraps the Highlight primitive with tab-specific defaults (spring transition,
|
|
87
|
+
* no click activation since tabs manage their own active state).
|
|
88
|
+
*
|
|
89
|
+
* @param transition - Motion transition config (default: spring 200/25)
|
|
90
|
+
* @param slots - Partial class overrides per slot
|
|
91
|
+
* @param className - Additional class names
|
|
92
|
+
*
|
|
93
|
+
* @example
|
|
94
|
+
* ```tsx
|
|
95
|
+
* <TabsHighlight className="rounded-md bg-white/10">
|
|
96
|
+
* <TabsHighlightItem value="tab1">
|
|
97
|
+
* <TabsTab value="tab1">Tab 1</TabsTab>
|
|
98
|
+
* </TabsHighlightItem>
|
|
99
|
+
* </TabsHighlight>
|
|
100
|
+
* ```
|
|
101
|
+
*/
|
|
102
|
+
function TabsHighlight({ transition = {
|
|
103
|
+
type: "spring",
|
|
104
|
+
stiffness: 200,
|
|
105
|
+
damping: 25
|
|
106
|
+
}, slots, className, ...props }) {
|
|
107
|
+
const { value } = useTabs();
|
|
108
|
+
return /* @__PURE__ */ jsx(Highlight, {
|
|
109
|
+
"data-slot": "tabs-highlight",
|
|
110
|
+
controlledItems: true,
|
|
111
|
+
value,
|
|
112
|
+
transition,
|
|
113
|
+
click: false,
|
|
114
|
+
className: cn(tabsStyles.highlight, slots?.highlight, className),
|
|
115
|
+
...props
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
/**
|
|
119
|
+
* TabsList -- the container holding tab trigger buttons.
|
|
120
|
+
* Renders a base-ui Tabs.List with the `list` slot classes.
|
|
121
|
+
*
|
|
122
|
+
* @param slots - Partial class overrides per slot
|
|
123
|
+
* @param className - Additional class names
|
|
124
|
+
*
|
|
125
|
+
* @example
|
|
126
|
+
* ```tsx
|
|
127
|
+
* <TabsList className="flex gap-1 border-b border-white/10 pb-1">
|
|
128
|
+
* <TabsTab value="general">General</TabsTab>
|
|
129
|
+
* <TabsTab value="advanced">Advanced</TabsTab>
|
|
130
|
+
* </TabsList>
|
|
131
|
+
* ```
|
|
132
|
+
*/
|
|
133
|
+
function TabsList({ slots, className, ...props }) {
|
|
134
|
+
return /* @__PURE__ */ jsx(Tabs.List, {
|
|
135
|
+
"data-slot": "tabs-list",
|
|
136
|
+
className: cn(tabsStyles.list, slots?.list, className),
|
|
137
|
+
...props
|
|
138
|
+
});
|
|
139
|
+
}
|
|
140
|
+
/**
|
|
141
|
+
* TabsHighlightItem -- wraps a TabsTab for highlight position tracking.
|
|
142
|
+
* Must be placed inside a TabsHighlight context. The `value` prop should
|
|
143
|
+
* match the corresponding TabsTab value.
|
|
144
|
+
*
|
|
145
|
+
* @param value - Tab value this highlight item corresponds to
|
|
146
|
+
* @param slots - Partial class overrides per slot
|
|
147
|
+
*
|
|
148
|
+
* @example
|
|
149
|
+
* ```tsx
|
|
150
|
+
* <TabsHighlightItem value="general">
|
|
151
|
+
* <TabsTab value="general">General</TabsTab>
|
|
152
|
+
* </TabsHighlightItem>
|
|
153
|
+
* ```
|
|
154
|
+
*/
|
|
155
|
+
function TabsHighlightItem({ slots, ...props }) {
|
|
156
|
+
return /* @__PURE__ */ jsx(HighlightItem, {
|
|
157
|
+
"data-slot": "tabs-highlight-item",
|
|
158
|
+
...props
|
|
159
|
+
});
|
|
160
|
+
}
|
|
161
|
+
/**
|
|
162
|
+
* TabsTab -- a single tab trigger button that activates its panel.
|
|
163
|
+
* Renders a base-ui Tabs.Tab with the `tab` slot classes.
|
|
164
|
+
*
|
|
165
|
+
* @param value - The value this tab represents
|
|
166
|
+
* @param slots - Partial class overrides per slot
|
|
167
|
+
* @param className - Additional class names
|
|
168
|
+
*
|
|
169
|
+
* @example
|
|
170
|
+
* ```tsx
|
|
171
|
+
* <TabsTab value="general" className="px-3 py-1.5 text-sm font-medium">
|
|
172
|
+
* General
|
|
173
|
+
* </TabsTab>
|
|
174
|
+
* ```
|
|
175
|
+
*/
|
|
176
|
+
function TabsTab({ slots, className, ...props }) {
|
|
177
|
+
return /* @__PURE__ */ jsx(Tabs.Tab, {
|
|
178
|
+
"data-slot": "tabs-tab",
|
|
179
|
+
className: cn(tabsStyles.tab, slots?.tab, className),
|
|
180
|
+
...props
|
|
181
|
+
});
|
|
182
|
+
}
|
|
183
|
+
/**
|
|
184
|
+
* TabsPanel -- an animated content panel associated with a tab.
|
|
185
|
+
* Uses Motion for blur + opacity enter/exit transitions wrapped in
|
|
186
|
+
* AnimatePresence for smooth unmount animations.
|
|
187
|
+
*
|
|
188
|
+
* @param value - The tab value this panel corresponds to
|
|
189
|
+
* @param keepMounted - Keep the panel in DOM when inactive
|
|
190
|
+
* @param transition - Motion transition config (default: 0.5s easeInOut)
|
|
191
|
+
* @param slots - Partial class overrides per slot
|
|
192
|
+
* @param className - Additional class names
|
|
193
|
+
*
|
|
194
|
+
* @example
|
|
195
|
+
* ```tsx
|
|
196
|
+
* <TabsPanel value="general" className="p-4">
|
|
197
|
+
* <h2>General Settings</h2>
|
|
198
|
+
* <p>Configure your preferences here.</p>
|
|
199
|
+
* </TabsPanel>
|
|
200
|
+
* ```
|
|
201
|
+
*/
|
|
202
|
+
function TabsPanel({ value, keepMounted, transition = {
|
|
203
|
+
duration: .5,
|
|
204
|
+
ease: "easeInOut"
|
|
205
|
+
}, slots, className, ...props }) {
|
|
206
|
+
return /* @__PURE__ */ jsx(AnimatePresence, {
|
|
207
|
+
mode: "wait",
|
|
208
|
+
children: /* @__PURE__ */ jsx(Tabs.Panel, {
|
|
209
|
+
render: /* @__PURE__ */ jsx(motion.div, {
|
|
210
|
+
"data-slot": "tabs-panel",
|
|
211
|
+
layout: true,
|
|
212
|
+
layoutDependency: value,
|
|
213
|
+
initial: {
|
|
214
|
+
opacity: 0,
|
|
215
|
+
filter: "blur(4px)"
|
|
216
|
+
},
|
|
217
|
+
animate: {
|
|
218
|
+
opacity: 1,
|
|
219
|
+
filter: "blur(0px)"
|
|
220
|
+
},
|
|
221
|
+
exit: {
|
|
222
|
+
opacity: 0,
|
|
223
|
+
filter: "blur(4px)"
|
|
224
|
+
},
|
|
225
|
+
transition,
|
|
226
|
+
className: cn(tabsStyles.panel, slots?.panel, className),
|
|
227
|
+
...props
|
|
228
|
+
}),
|
|
229
|
+
keepMounted,
|
|
230
|
+
value
|
|
231
|
+
})
|
|
232
|
+
});
|
|
233
|
+
}
|
|
234
|
+
/** Default spring transition for the panels container. */
|
|
235
|
+
const defaultPanelsTransition = {
|
|
236
|
+
type: "spring",
|
|
237
|
+
stiffness: 200,
|
|
238
|
+
damping: 30
|
|
239
|
+
};
|
|
240
|
+
/**
|
|
241
|
+
* Type guard to distinguish auto-height mode from layout mode.
|
|
242
|
+
*
|
|
243
|
+
* @param props - TabsPanels props union
|
|
244
|
+
* @returns True if auto-height mode (default)
|
|
245
|
+
*/
|
|
246
|
+
function isAutoMode(props) {
|
|
247
|
+
return !props.mode || props.mode === "auto-height";
|
|
248
|
+
}
|
|
249
|
+
/**
|
|
250
|
+
* TabsPanels -- container for tab panels with animated height transitions.
|
|
251
|
+
* Supports two modes:
|
|
252
|
+
*
|
|
253
|
+
* - **auto-height** (default): Uses ResizeObserver to animate container
|
|
254
|
+
* height when panels have different content sizes.
|
|
255
|
+
* - **layout**: Uses Motion layout animation for size transitions,
|
|
256
|
+
* with overflow hidden.
|
|
257
|
+
*
|
|
258
|
+
* @param mode - Animation mode: 'auto-height' (default) or 'layout'
|
|
259
|
+
* @param transition - Motion transition config
|
|
260
|
+
* @param slots - Partial class overrides per slot
|
|
261
|
+
* @param className - Additional class names
|
|
262
|
+
*
|
|
263
|
+
* @example
|
|
264
|
+
* ```tsx
|
|
265
|
+
* // Auto-height mode (default)
|
|
266
|
+
* <TabsPanels>
|
|
267
|
+
* <TabsPanel value="short">Short content</TabsPanel>
|
|
268
|
+
* <TabsPanel value="long">Much longer content with many paragraphs...</TabsPanel>
|
|
269
|
+
* </TabsPanels>
|
|
270
|
+
*
|
|
271
|
+
* // Layout mode
|
|
272
|
+
* <TabsPanels mode="layout" className="rounded-lg">
|
|
273
|
+
* <TabsPanel value="a">Content A</TabsPanel>
|
|
274
|
+
* <TabsPanel value="b">Content B</TabsPanel>
|
|
275
|
+
* </TabsPanels>
|
|
276
|
+
* ```
|
|
277
|
+
*/
|
|
278
|
+
function TabsPanels(props) {
|
|
279
|
+
const { value } = useTabs();
|
|
280
|
+
if (isAutoMode(props)) {
|
|
281
|
+
const { children, transition = defaultPanelsTransition, slots, className, mode: _mode, ...autoProps } = props;
|
|
282
|
+
return /* @__PURE__ */ jsx(AutoHeight, {
|
|
283
|
+
"data-slot": "tabs-panels",
|
|
284
|
+
deps: [value],
|
|
285
|
+
transition,
|
|
286
|
+
className: cn(tabsStyles.panels, slots?.panels, className),
|
|
287
|
+
...autoProps,
|
|
288
|
+
children: /* @__PURE__ */ jsx(React.Fragment, { children }, value)
|
|
289
|
+
});
|
|
290
|
+
}
|
|
291
|
+
const { children, style, transition = defaultPanelsTransition, slots, className, mode: _mode, ...layoutProps } = props;
|
|
292
|
+
return /* @__PURE__ */ jsx(motion.div, {
|
|
293
|
+
"data-slot": "tabs-panels",
|
|
294
|
+
layout: "size",
|
|
295
|
+
layoutDependency: value,
|
|
296
|
+
transition: { layout: transition },
|
|
297
|
+
style: {
|
|
298
|
+
overflow: "hidden",
|
|
299
|
+
...style
|
|
300
|
+
},
|
|
301
|
+
className: cn(tabsStyles.panels, slots?.panels, className),
|
|
302
|
+
...layoutProps,
|
|
303
|
+
children: /* @__PURE__ */ jsx(React.Fragment, { children }, value)
|
|
304
|
+
});
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
//#endregion
|
|
308
|
+
export { Tabs$1 as Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Textarea.styles.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Textarea/Textarea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,KAAK,YAAY,GAAG,MAAM,CAAC;AAE3B,QAAA,MAAM,cAAc,EAAE,UAAU,CAAC,YAAY,CAE5C,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,YAAY,EAAE,YAAY,EAAE,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
//#region src/react/ui/Textarea/Textarea.styles.ts
|
|
2
|
+
const textareaStyles = { root: "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50" };
|
|
3
|
+
|
|
4
|
+
//#endregion
|
|
5
|
+
export { textareaStyles };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { SlotOverrides } from '../../../core/types';
|
|
2
|
+
import type { TextareaSlot } from './Textarea.styles';
|
|
3
|
+
/** Props for the Textarea component. */
|
|
4
|
+
interface ITextareaProps extends React.ComponentProps<'textarea'> {
|
|
5
|
+
slots?: SlotOverrides<TextareaSlot>;
|
|
6
|
+
}
|
|
7
|
+
export type { ITextareaProps };
|
|
8
|
+
//# sourceMappingURL=Textarea.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Textarea.types.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Textarea/Textarea.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,wCAAwC;AACxC,UAAU,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC;IAC/D,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC;AAED,YAAY,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { ITextareaProps } from './Textarea.types';
|
|
2
|
+
/**
|
|
3
|
+
* Textarea — styled multi-line text input.
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
* ```tsx
|
|
7
|
+
* <Textarea placeholder="Enter description..." />
|
|
8
|
+
* ```
|
|
9
|
+
*/
|
|
10
|
+
declare function Textarea({ className, slots, ...props }: ITextareaProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export { Textarea };
|
|
12
|
+
export type { ITextareaProps } from './Textarea.types';
|
|
13
|
+
export type { TextareaSlot } from './Textarea.styles';
|
|
14
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Textarea/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;;;;;;GAOG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAQ/D;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { cn } from "../../lib/utils.js";
|
|
2
|
+
import { textareaStyles } from "./Textarea.styles.js";
|
|
3
|
+
import "../../../react";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
|
|
6
|
+
//#region src/react/ui/Textarea/index.tsx
|
|
7
|
+
/**
|
|
8
|
+
* Textarea — styled multi-line text input.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* <Textarea placeholder="Enter description..." />
|
|
13
|
+
* ```
|
|
14
|
+
*/
|
|
15
|
+
function Textarea({ className, slots, ...props }) {
|
|
16
|
+
return /* @__PURE__ */ jsx("textarea", {
|
|
17
|
+
"data-slot": "textarea",
|
|
18
|
+
className: cn(textareaStyles.root, slots?.root, className),
|
|
19
|
+
...props
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
//#endregion
|
|
24
|
+
export { Textarea };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Style definitions for the Tooltip component.
|
|
3
|
+
*
|
|
4
|
+
* Provides StyleSlots for each visual region. Uses only CSS variable
|
|
5
|
+
* utilities; never hard-coded color values.
|
|
6
|
+
*
|
|
7
|
+
* @module @mks2508/mks-ui/react/ui/Tooltip/Tooltip.styles
|
|
8
|
+
*/
|
|
9
|
+
import type { StyleSlots } from '../../../core/types';
|
|
10
|
+
import type { TooltipSlot } from './Tooltip.types';
|
|
11
|
+
/**
|
|
12
|
+
* Default Tailwind classes for each Tooltip visual region.
|
|
13
|
+
* Consumers override via the `slots` prop; the merge order is:
|
|
14
|
+
* `base -> slots -> className`.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```typescript
|
|
18
|
+
* import { tooltipStyles } from './Tooltip.styles';
|
|
19
|
+
* // tooltipStyles.popup => 'z-50 overflow-hidden rounded-md ...'
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
22
|
+
export declare const tooltipStyles: StyleSlots<TooltipSlot>;
|
|
23
|
+
//# sourceMappingURL=Tooltip.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.styles.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Tooltip/Tooltip.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,EAAE,UAAU,CAAC,WAAW,CAmBjD,CAAC"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
//#region src/react/ui/Tooltip/Tooltip.styles.ts
|
|
2
|
+
/**
|
|
3
|
+
* Default Tailwind classes for each Tooltip visual region.
|
|
4
|
+
* Consumers override via the `slots` prop; the merge order is:
|
|
5
|
+
* `base -> slots -> className`.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```typescript
|
|
9
|
+
* import { tooltipStyles } from './Tooltip.styles';
|
|
10
|
+
* // tooltipStyles.popup => 'z-50 overflow-hidden rounded-md ...'
|
|
11
|
+
* ```
|
|
12
|
+
*/
|
|
13
|
+
const tooltipStyles = {
|
|
14
|
+
root: "",
|
|
15
|
+
popup: [
|
|
16
|
+
"z-50 overflow-hidden rounded-md",
|
|
17
|
+
"border border-border bg-popover px-3 py-1.5",
|
|
18
|
+
"text-sm text-popover-foreground shadow-md"
|
|
19
|
+
].join(" "),
|
|
20
|
+
trigger: "",
|
|
21
|
+
positioner: "",
|
|
22
|
+
arrow: "fill-popover"
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
//#endregion
|
|
26
|
+
export { tooltipStyles };
|
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Type definitions for the Tooltip component.
|
|
3
|
+
*
|
|
4
|
+
* Provides all prop interfaces, slot types, context types, and configuration
|
|
5
|
+
* for the animated tooltip system built on Base UI and Motion.
|
|
6
|
+
*
|
|
7
|
+
* @module @mks2508/mks-ui/react/ui/Tooltip/Tooltip.types
|
|
8
|
+
*/
|
|
9
|
+
import type * as React from '../../../react';
|
|
10
|
+
import type { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
|
|
11
|
+
import type { HTMLMotionProps, MotionValue, SpringOptions } from 'motion/react';
|
|
12
|
+
import type { SlotOverrides, IBaseConfig } from '../../../core/types';
|
|
13
|
+
/**
|
|
14
|
+
* Visual regions available for class-name overrides via the `slots` prop.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```tsx
|
|
18
|
+
* <TooltipPopup slots={{ popup: 'bg-primary text-primary-foreground' }} />
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
export type TooltipSlot = 'root' | 'popup' | 'trigger' | 'positioner' | 'arrow';
|
|
22
|
+
/**
|
|
23
|
+
* Extended configuration for the Tooltip component.
|
|
24
|
+
* Inherits base animation settings and adds tooltip-specific cursor-following options.
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* ```typescript
|
|
28
|
+
* const config: ITooltipConfig = {
|
|
29
|
+
* followCursor: 'x',
|
|
30
|
+
* followCursorSpringOptions: { stiffness: 200, damping: 17 },
|
|
31
|
+
* animation: { duration: 0.15 },
|
|
32
|
+
* };
|
|
33
|
+
* ```
|
|
34
|
+
*/
|
|
35
|
+
export interface ITooltipConfig extends IBaseConfig {
|
|
36
|
+
/**
|
|
37
|
+
* Whether the tooltip follows the cursor position.
|
|
38
|
+
* - `true` — follows on both axes
|
|
39
|
+
* - `'x'` — follows only horizontal movement
|
|
40
|
+
* - `'y'` — follows only vertical movement
|
|
41
|
+
* - `false` — static positioning (default)
|
|
42
|
+
*
|
|
43
|
+
* @defaultValue false
|
|
44
|
+
*/
|
|
45
|
+
followCursor?: boolean | 'x' | 'y';
|
|
46
|
+
/**
|
|
47
|
+
* Spring physics options for the cursor-following animation.
|
|
48
|
+
* Only used when `followCursor` is enabled.
|
|
49
|
+
*
|
|
50
|
+
* @defaultValue `{ stiffness: 200, damping: 17 }`
|
|
51
|
+
*/
|
|
52
|
+
followCursorSpringOptions?: SpringOptions;
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* Internal context type shared between Tooltip sub-components.
|
|
56
|
+
* Tracks open state, cursor position motion values, and follow-cursor settings.
|
|
57
|
+
*
|
|
58
|
+
* @example
|
|
59
|
+
* ```tsx
|
|
60
|
+
* const { isOpen, x, y, followCursor } = useTooltip();
|
|
61
|
+
* ```
|
|
62
|
+
*/
|
|
63
|
+
export type TooltipContextType = {
|
|
64
|
+
/** Whether the tooltip is currently open. */
|
|
65
|
+
isOpen: boolean;
|
|
66
|
+
/** Callback to change the open state. */
|
|
67
|
+
setIsOpen: ITooltipProps['onOpenChange'];
|
|
68
|
+
/** Motion value tracking horizontal cursor offset. */
|
|
69
|
+
x: MotionValue<number>;
|
|
70
|
+
/** Motion value tracking vertical cursor offset. */
|
|
71
|
+
y: MotionValue<number>;
|
|
72
|
+
/** Current follow-cursor mode. */
|
|
73
|
+
followCursor?: boolean | 'x' | 'y';
|
|
74
|
+
/** Spring physics options for cursor-following. */
|
|
75
|
+
followCursorSpringOptions?: SpringOptions;
|
|
76
|
+
};
|
|
77
|
+
/**
|
|
78
|
+
* Props for the root `Tooltip` component.
|
|
79
|
+
* Wraps Base UI Tooltip.Root with controlled-state support, context provider,
|
|
80
|
+
* and cursor-following motion values.
|
|
81
|
+
*
|
|
82
|
+
* @example
|
|
83
|
+
* ```tsx
|
|
84
|
+
* <Tooltip followCursor="x">
|
|
85
|
+
* <TooltipTrigger>Hover me</TooltipTrigger>
|
|
86
|
+
* <TooltipPortal>
|
|
87
|
+
* <TooltipPositioner>
|
|
88
|
+
* <TooltipPopup>Tooltip content</TooltipPopup>
|
|
89
|
+
* </TooltipPositioner>
|
|
90
|
+
* </TooltipPortal>
|
|
91
|
+
* </Tooltip>
|
|
92
|
+
* ```
|
|
93
|
+
*/
|
|
94
|
+
export interface ITooltipProps extends React.ComponentProps<typeof TooltipPrimitive.Root> {
|
|
95
|
+
/**
|
|
96
|
+
* Whether the tooltip follows the cursor position.
|
|
97
|
+
* @defaultValue false
|
|
98
|
+
*/
|
|
99
|
+
followCursor?: boolean | 'x' | 'y';
|
|
100
|
+
/**
|
|
101
|
+
* Spring physics options for the cursor-following animation.
|
|
102
|
+
* @defaultValue `{ stiffness: 200, damping: 17 }`
|
|
103
|
+
*/
|
|
104
|
+
followCursorSpringOptions?: SpringOptions;
|
|
105
|
+
/** Style slot overrides. */
|
|
106
|
+
slots?: SlotOverrides<TooltipSlot>;
|
|
107
|
+
/** Component configuration. */
|
|
108
|
+
config?: ITooltipConfig;
|
|
109
|
+
}
|
|
110
|
+
/**
|
|
111
|
+
* Props for the `TooltipProvider` component.
|
|
112
|
+
* Wraps Base UI Tooltip.Provider to set shared defaults for a group of tooltips.
|
|
113
|
+
*
|
|
114
|
+
* @example
|
|
115
|
+
* ```tsx
|
|
116
|
+
* <TooltipProvider delay={200}>
|
|
117
|
+
* <Tooltip>...</Tooltip>
|
|
118
|
+
* <Tooltip>...</Tooltip>
|
|
119
|
+
* </TooltipProvider>
|
|
120
|
+
* ```
|
|
121
|
+
*/
|
|
122
|
+
export interface ITooltipProviderProps extends React.ComponentProps<typeof TooltipPrimitive.Provider> {
|
|
123
|
+
/** Style slot overrides. */
|
|
124
|
+
slots?: SlotOverrides<TooltipSlot>;
|
|
125
|
+
}
|
|
126
|
+
/**
|
|
127
|
+
* Props for the `TooltipTrigger` component.
|
|
128
|
+
* Renders the element that shows the tooltip on hover/focus.
|
|
129
|
+
*
|
|
130
|
+
* @example
|
|
131
|
+
* ```tsx
|
|
132
|
+
* <TooltipTrigger>
|
|
133
|
+
* <Button>Hover me</Button>
|
|
134
|
+
* </TooltipTrigger>
|
|
135
|
+
* ```
|
|
136
|
+
*/
|
|
137
|
+
export interface ITooltipTriggerProps extends React.ComponentProps<typeof TooltipPrimitive.Trigger> {
|
|
138
|
+
/** Style slot overrides. */
|
|
139
|
+
slots?: SlotOverrides<TooltipSlot>;
|
|
140
|
+
}
|
|
141
|
+
/**
|
|
142
|
+
* Props for the `TooltipPortal` component.
|
|
143
|
+
* Renders children into a React portal with AnimatePresence for exit animations.
|
|
144
|
+
* The `keepMounted` prop is handled internally and cannot be overridden.
|
|
145
|
+
*
|
|
146
|
+
* @example
|
|
147
|
+
* ```tsx
|
|
148
|
+
* <TooltipPortal>
|
|
149
|
+
* <TooltipPositioner>
|
|
150
|
+
* <TooltipPopup>...</TooltipPopup>
|
|
151
|
+
* </TooltipPositioner>
|
|
152
|
+
* </TooltipPortal>
|
|
153
|
+
* ```
|
|
154
|
+
*/
|
|
155
|
+
export interface ITooltipPortalProps extends Omit<React.ComponentProps<typeof TooltipPrimitive.Portal>, 'keepMounted'> {
|
|
156
|
+
/** Style slot overrides. */
|
|
157
|
+
slots?: SlotOverrides<TooltipSlot>;
|
|
158
|
+
}
|
|
159
|
+
/**
|
|
160
|
+
* Props for the `TooltipPositioner` component.
|
|
161
|
+
* Handles automatic positioning relative to the trigger.
|
|
162
|
+
*
|
|
163
|
+
* @example
|
|
164
|
+
* ```tsx
|
|
165
|
+
* <TooltipPositioner sideOffset={4}>
|
|
166
|
+
* <TooltipPopup>Content</TooltipPopup>
|
|
167
|
+
* </TooltipPositioner>
|
|
168
|
+
* ```
|
|
169
|
+
*/
|
|
170
|
+
export interface ITooltipPositionerProps extends React.ComponentProps<typeof TooltipPrimitive.Positioner> {
|
|
171
|
+
/** Style slot overrides. */
|
|
172
|
+
slots?: SlotOverrides<TooltipSlot>;
|
|
173
|
+
}
|
|
174
|
+
/**
|
|
175
|
+
* Props for the `TooltipPopup` component.
|
|
176
|
+
* The main content container with scale entrance animation.
|
|
177
|
+
* Supports cursor-following via spring-animated motion values.
|
|
178
|
+
*
|
|
179
|
+
* @example
|
|
180
|
+
* ```tsx
|
|
181
|
+
* <TooltipPopup className="px-3 py-1.5 text-sm">
|
|
182
|
+
* Helpful information
|
|
183
|
+
* </TooltipPopup>
|
|
184
|
+
* ```
|
|
185
|
+
*/
|
|
186
|
+
export interface ITooltipPopupProps extends Omit<Omit<React.ComponentProps<typeof TooltipPrimitive.Popup>, 'render'>, keyof HTMLMotionProps<'div'>>, HTMLMotionProps<'div'> {
|
|
187
|
+
/** Style slot overrides. */
|
|
188
|
+
slots?: SlotOverrides<TooltipSlot>;
|
|
189
|
+
}
|
|
190
|
+
/**
|
|
191
|
+
* Props for the `TooltipArrow` component.
|
|
192
|
+
* Renders a directional arrow pointing toward the trigger.
|
|
193
|
+
*
|
|
194
|
+
* @example
|
|
195
|
+
* ```tsx
|
|
196
|
+
* <TooltipArrow className="fill-primary" />
|
|
197
|
+
* ```
|
|
198
|
+
*/
|
|
199
|
+
export interface ITooltipArrowProps extends React.ComponentProps<typeof TooltipPrimitive.Arrow> {
|
|
200
|
+
/** Style slot overrides. */
|
|
201
|
+
slots?: SlotOverrides<TooltipSlot>;
|
|
202
|
+
}
|
|
203
|
+
//# sourceMappingURL=Tooltip.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.types.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Tooltip/Tooltip.types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1E,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAEhF,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAM/D;;;;;;;GAOG;AACH,MAAM,MAAM,WAAW,GACnB,MAAM,GACN,OAAO,GACP,SAAS,GACT,YAAY,GACZ,OAAO,CAAC;AAMZ;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,GAAG,GAAG,GAAG,CAAC;IAEnC;;;;;OAKG;IACH,yBAAyB,CAAC,EAAE,aAAa,CAAC;CAC3C;AAMD;;;;;;;;GAQG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,6CAA6C;IAC7C,MAAM,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,SAAS,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACzC,sDAAsD;IACtD,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACvB,oDAAoD;IACpD,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACvB,kCAAkC;IAClC,YAAY,CAAC,EAAE,OAAO,GAAG,GAAG,GAAG,GAAG,CAAC;IACnC,mDAAmD;IACnD,yBAAyB,CAAC,EAAE,aAAa,CAAC;CAC3C,CAAC;AAMF;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC;IAC1D;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,GAAG,GAAG,GAAG,CAAC;IAEnC;;;OAGG;IACH,yBAAyB,CAAC,EAAE,aAAa,CAAC;IAE1C,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IAEnC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC;IAC9D,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACpC;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC;IAC7D,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACpC;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,mBACf,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,MAAM,CAAC,EACpD,aAAa,CACd;IACD,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACpC;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,uBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,UAAU,CAAC;IAChE,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACpC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,kBACf,SAAQ,IAAI,CACR,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,EACnE,MAAM,eAAe,CAAC,KAAK,CAAC,CAC7B,EACD,eAAe,CAAC,KAAK,CAAC;IACxB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACpC;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC;IAC3D,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACpC"}
|