@koine/react 2.0.0-beta.14 → 2.0.0-beta.140
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/FaviconTags.cjs.d.ts +2 -0
- package/FaviconTags.cjs.default.js +1 -0
- package/FaviconTags.cjs.js +10 -0
- package/FaviconTags.cjs.mjs +2 -0
- package/FaviconTags.d.ts +1 -1
- package/FaviconTags.esm.d.ts +2 -0
- package/FaviconTags.esm.js +5 -0
- package/Meta.cjs.d.ts +2 -0
- package/Meta.cjs.default.js +1 -0
- package/Meta.cjs.js +10 -0
- package/Meta.cjs.mjs +2 -0
- package/{Meta/Meta.d.ts → Meta.d.ts} +1 -1
- package/Meta.esm.d.ts +2 -0
- package/Meta.esm.js +5 -0
- package/NoJs.cjs.d.ts +2 -0
- package/NoJs.cjs.default.js +1 -0
- package/NoJs.cjs.js +10 -0
- package/NoJs.cjs.mjs +2 -0
- package/NoJs.d.ts +3 -0
- package/NoJs.esm.d.ts +2 -0
- package/NoJs.esm.js +5 -0
- package/Polymorphic.cjs.d.ts +1 -0
- package/Polymorphic.cjs.default.js +1 -0
- package/Polymorphic.cjs.js +2 -0
- package/Polymorphic.cjs.mjs +2 -0
- package/Polymorphic.d.ts +39 -0
- package/Polymorphic.esm.d.ts +1 -0
- package/Polymorphic.esm.js +1 -0
- package/calendar/CalendarDaygridCell.cjs.js +9 -0
- package/{Calendar → calendar}/CalendarDaygridCell.d.ts +2 -3
- package/calendar/CalendarDaygridCell.esm.js +7 -0
- package/calendar/CalendarDaygridNav.cjs.js +9 -0
- package/{Calendar → calendar}/CalendarDaygridNav.d.ts +1 -1
- package/calendar/CalendarDaygridNav.esm.js +7 -0
- package/calendar/CalendarDaygridTable.cjs.js +13 -0
- package/{Calendar → calendar}/CalendarDaygridTable.d.ts +2 -2
- package/calendar/CalendarDaygridTable.esm.js +11 -0
- package/calendar/CalendarLegend.cjs.js +7 -0
- package/{Calendar → calendar}/CalendarLegend.d.ts +1 -2
- package/calendar/CalendarLegend.esm.js +5 -0
- package/calendar/calendar-api-google.cjs.js +10 -0
- package/{Calendar → calendar}/calendar-api-google.d.ts +1 -1
- package/calendar/calendar-api-google.esm.js +8 -0
- package/{Calendar → calendar}/types.d.ts +0 -0
- package/calendar/useCalendar.cjs.js +9 -0
- package/{Calendar → calendar}/useCalendar.d.ts +1 -2
- package/calendar/useCalendar.esm.js +7 -0
- package/calendar/useDateLocale.cjs.js +7 -0
- package/{hooks → calendar}/useDateLocale.d.ts +2 -2
- package/calendar/useDateLocale.esm.js +5 -0
- package/calendar/utils.cjs.js +23 -0
- package/calendar/utils.d.ts +11 -0
- package/calendar/utils.esm.js +13 -0
- package/calendar.cjs.d.ts +1 -0
- package/calendar.cjs.default.js +1 -0
- package/calendar.cjs.js +17 -0
- package/calendar.cjs.mjs +2 -0
- package/calendar.d.ts +7 -0
- package/calendar.esm.d.ts +1 -0
- package/calendar.esm.js +6 -0
- package/classed.cjs.d.ts +2 -0
- package/classed.cjs.default.js +1 -0
- package/classed.cjs.js +10 -0
- package/classed.cjs.mjs +2 -0
- package/{helpers/classed.d.ts → classed.d.ts} +1 -1
- package/classed.esm.d.ts +2 -0
- package/classed.esm.js +5 -0
- package/createUseMediaQueryWidth.cjs.d.ts +2 -0
- package/createUseMediaQueryWidth.cjs.default.js +1 -0
- package/createUseMediaQueryWidth.cjs.js +12 -0
- package/createUseMediaQueryWidth.cjs.mjs +2 -0
- package/{helpers/createUseMediaQueryWidth.d.ts → createUseMediaQueryWidth.d.ts} +2 -2
- package/createUseMediaQueryWidth.esm.d.ts +2 -0
- package/createUseMediaQueryWidth.esm.js +7 -0
- package/extendComponent.cjs.d.ts +2 -0
- package/extendComponent.cjs.default.js +1 -0
- package/extendComponent.cjs.js +10 -0
- package/extendComponent.cjs.mjs +2 -0
- package/{helpers/extend-component.d.ts → extendComponent.d.ts} +1 -2
- package/extendComponent.esm.d.ts +2 -0
- package/extendComponent.esm.js +5 -0
- package/forms/antispam.cjs.js +9 -0
- package/{Forms → forms}/antispam.d.ts +8 -8
- package/forms/antispam.esm.js +6 -0
- package/forms.cjs.d.ts +1 -0
- package/forms.cjs.default.js +1 -0
- package/forms.cjs.js +8 -0
- package/forms.cjs.mjs +2 -0
- package/forms.d.ts +1 -0
- package/forms.esm.d.ts +1 -0
- package/forms.esm.js +1 -0
- package/index.cjs.d.ts +1 -0
- package/index.cjs.default.js +1 -0
- package/index.cjs.js +57 -0
- package/index.cjs.mjs +2 -0
- package/index.d.ts +28 -1
- package/index.esm.d.ts +1 -0
- package/index.esm.js +26 -0
- package/mergeRefs.cjs.d.ts +2 -0
- package/mergeRefs.cjs.default.js +1 -0
- package/mergeRefs.cjs.js +8 -0
- package/mergeRefs.cjs.mjs +2 -0
- package/mergeRefs.d.ts +2 -0
- package/mergeRefs.esm.d.ts +2 -0
- package/mergeRefs.esm.js +3 -0
- package/package.json +202 -47
- package/{Img/index.d.ts → types.cjs.d.ts} +0 -0
- package/types.cjs.default.js +1 -0
- package/types.cjs.js +2 -0
- package/types.cjs.mjs +2 -0
- package/types.d.ts +0 -8
- package/{Img/index.mjs → types.esm.d.ts} +0 -0
- package/types.esm.js +1 -0
- package/useAsyncFn.cjs.d.ts +2 -0
- package/useAsyncFn.cjs.default.js +1 -0
- package/useAsyncFn.cjs.js +11 -0
- package/useAsyncFn.cjs.mjs +2 -0
- package/{hooks/useAsyncFn.d.ts → useAsyncFn.d.ts} +3 -2
- package/useAsyncFn.esm.d.ts +2 -0
- package/useAsyncFn.esm.js +6 -0
- package/useFirstMountState.cjs.d.ts +2 -0
- package/useFirstMountState.cjs.default.js +1 -0
- package/useFirstMountState.cjs.js +10 -0
- package/useFirstMountState.cjs.mjs +2 -0
- package/{hooks/useFirstMountState.d.ts → useFirstMountState.d.ts} +1 -1
- package/useFirstMountState.esm.d.ts +2 -0
- package/useFirstMountState.esm.js +5 -0
- package/useFixedOffset.cjs.d.ts +2 -0
- package/useFixedOffset.cjs.default.js +1 -0
- package/useFixedOffset.cjs.js +13 -0
- package/useFixedOffset.cjs.mjs +2 -0
- package/{hooks/useFixedOffset.d.ts → useFixedOffset.d.ts} +1 -2
- package/useFixedOffset.esm.d.ts +2 -0
- package/useFixedOffset.esm.js +8 -0
- package/useFocus.cjs.d.ts +2 -0
- package/useFocus.cjs.default.js +1 -0
- package/useFocus.cjs.js +10 -0
- package/useFocus.cjs.mjs +2 -0
- package/useFocus.d.ts +5 -0
- package/useFocus.esm.d.ts +2 -0
- package/useFocus.esm.js +5 -0
- package/useInterval.cjs.d.ts +2 -0
- package/useInterval.cjs.default.js +1 -0
- package/useInterval.cjs.js +11 -0
- package/useInterval.cjs.mjs +2 -0
- package/{hooks/useInterval.d.ts → useInterval.d.ts} +1 -1
- package/useInterval.esm.d.ts +2 -0
- package/useInterval.esm.js +6 -0
- package/useIsomorphicLayoutEffect.cjs.d.ts +2 -0
- package/useIsomorphicLayoutEffect.cjs.default.js +1 -0
- package/useIsomorphicLayoutEffect.cjs.js +11 -0
- package/useIsomorphicLayoutEffect.cjs.mjs +2 -0
- package/{hooks/useIsomorphicLayoutEffect.d.ts → useIsomorphicLayoutEffect.d.ts} +2 -2
- package/useIsomorphicLayoutEffect.esm.d.ts +2 -0
- package/useIsomorphicLayoutEffect.esm.js +6 -0
- package/useKeyUp.cjs.d.ts +2 -0
- package/useKeyUp.cjs.default.js +1 -0
- package/useKeyUp.cjs.js +11 -0
- package/useKeyUp.cjs.mjs +2 -0
- package/useKeyUp.d.ts +2 -0
- package/useKeyUp.esm.d.ts +2 -0
- package/useKeyUp.esm.js +6 -0
- package/useMeasure.cjs.d.ts +2 -0
- package/useMeasure.cjs.default.js +1 -0
- package/useMeasure.cjs.js +12 -0
- package/useMeasure.cjs.mjs +2 -0
- package/{hooks/useMeasure.d.ts → useMeasure.d.ts} +1 -1
- package/useMeasure.esm.d.ts +2 -0
- package/useMeasure.esm.js +7 -0
- package/useMountedState.cjs.d.ts +2 -0
- package/useMountedState.cjs.default.js +1 -0
- package/useMountedState.cjs.js +10 -0
- package/useMountedState.cjs.mjs +2 -0
- package/{hooks/useMountedState.d.ts → useMountedState.d.ts} +1 -1
- package/useMountedState.esm.d.ts +2 -0
- package/useMountedState.esm.js +5 -0
- package/useNavigateAway.cjs.d.ts +2 -0
- package/useNavigateAway.cjs.default.js +1 -0
- package/useNavigateAway.cjs.js +11 -0
- package/useNavigateAway.cjs.mjs +2 -0
- package/{hooks/useNavigateAway.d.ts → useNavigateAway.d.ts} +1 -1
- package/useNavigateAway.esm.d.ts +2 -0
- package/useNavigateAway.esm.js +6 -0
- package/usePrevious.cjs.d.ts +2 -0
- package/usePrevious.cjs.default.js +1 -0
- package/usePrevious.cjs.js +10 -0
- package/usePrevious.cjs.mjs +2 -0
- package/{hooks/usePrevious.d.ts → usePrevious.d.ts} +1 -1
- package/usePrevious.esm.d.ts +2 -0
- package/usePrevious.esm.js +5 -0
- package/usePreviousRef.cjs.d.ts +2 -0
- package/usePreviousRef.cjs.default.js +1 -0
- package/usePreviousRef.cjs.js +10 -0
- package/usePreviousRef.cjs.mjs +2 -0
- package/usePreviousRef.d.ts +2 -0
- package/usePreviousRef.esm.d.ts +2 -0
- package/usePreviousRef.esm.js +5 -0
- package/{Animations/useReveal.d.ts → useReveal.d.ts} +2 -2
- package/useScrollPosition.cjs.d.ts +2 -0
- package/useScrollPosition.cjs.default.js +1 -0
- package/useScrollPosition.cjs.js +13 -0
- package/useScrollPosition.cjs.mjs +2 -0
- package/{hooks/useScrollPosition.d.ts → useScrollPosition.d.ts} +1 -2
- package/useScrollPosition.esm.d.ts +2 -0
- package/useScrollPosition.esm.js +8 -0
- package/useScrollThreshold.cjs.d.ts +2 -0
- package/useScrollThreshold.cjs.default.js +1 -0
- package/useScrollThreshold.cjs.js +12 -0
- package/useScrollThreshold.cjs.mjs +2 -0
- package/useScrollThreshold.d.ts +2 -0
- package/useScrollThreshold.esm.d.ts +2 -0
- package/useScrollThreshold.esm.js +7 -0
- package/useScrollTo.cjs.d.ts +2 -0
- package/useScrollTo.cjs.default.js +1 -0
- package/useScrollTo.cjs.js +10 -0
- package/useScrollTo.cjs.mjs +2 -0
- package/useScrollTo.d.ts +2 -0
- package/useScrollTo.esm.d.ts +2 -0
- package/useScrollTo.esm.js +5 -0
- package/useSmoothScroll.cjs.d.ts +2 -0
- package/useSmoothScroll.cjs.default.js +1 -0
- package/useSmoothScroll.cjs.js +13 -0
- package/useSmoothScroll.cjs.mjs +2 -0
- package/useSmoothScroll.d.ts +8 -0
- package/useSmoothScroll.esm.d.ts +2 -0
- package/useSmoothScroll.esm.js +8 -0
- package/useSpinDelay.cjs.d.ts +2 -0
- package/useSpinDelay.cjs.default.js +1 -0
- package/useSpinDelay.cjs.js +10 -0
- package/useSpinDelay.cjs.mjs +2 -0
- package/{hooks/useSpinDelay.d.ts → useSpinDelay.d.ts} +1 -1
- package/useSpinDelay.esm.d.ts +2 -0
- package/useSpinDelay.esm.js +5 -0
- package/useTraceUpdate.cjs.d.ts +2 -0
- package/useTraceUpdate.cjs.default.js +1 -0
- package/useTraceUpdate.cjs.js +10 -0
- package/useTraceUpdate.cjs.mjs +2 -0
- package/{hooks/useTraceUpdate.d.ts → useTraceUpdate.d.ts} +1 -1
- package/useTraceUpdate.esm.d.ts +2 -0
- package/useTraceUpdate.esm.js +5 -0
- package/useUpdateEffect.cjs.d.ts +2 -0
- package/useUpdateEffect.cjs.default.js +1 -0
- package/useUpdateEffect.cjs.js +11 -0
- package/useUpdateEffect.cjs.mjs +2 -0
- package/{hooks/useUpdateEffect.d.ts → useUpdateEffect.d.ts} +1 -1
- package/useUpdateEffect.esm.d.ts +2 -0
- package/useUpdateEffect.esm.js +6 -0
- package/useWindowSize.cjs.d.ts +2 -0
- package/useWindowSize.cjs.default.js +1 -0
- package/useWindowSize.cjs.js +11 -0
- package/useWindowSize.cjs.mjs +2 -0
- package/useWindowSize.d.ts +12 -0
- package/useWindowSize.esm.d.ts +2 -0
- package/useWindowSize.esm.js +6 -0
- package/Alert/Alert.d.ts +0 -5
- package/Alert/Alert.mjs +0 -22
- package/Alert/Alert.stories.mjs +0 -18
- package/Alert/index.d.ts +0 -1
- package/Alert/index.mjs +0 -1
- package/Animations/Reveal.d.ts +0 -4
- package/Animations/Reveal.mjs +0 -43
- package/Animations/Underline.d.ts +0 -1
- package/Animations/Underline.mjs +0 -15
- package/Animations/index.d.ts +0 -3
- package/Animations/index.mjs +0 -3
- package/Animations/useReveal.mjs +0 -73
- package/Autocomplete/AutocompleteDownshift.d.ts +0 -1
- package/Autocomplete/AutocompleteDownshift.mjs +0 -157
- package/Autocomplete/AutocompleteDownshiftMultiselect.d.ts +0 -1
- package/Autocomplete/AutocompleteDownshiftMultiselect.mjs +0 -352
- package/Autocomplete/AutocompleteMui.d.ts +0 -47
- package/Autocomplete/AutocompleteMui.mjs +0 -219
- package/Autocomplete/AutocompleteReach.d.ts +0 -1
- package/Autocomplete/AutocompleteReach.mjs +0 -111
- package/Autocomplete/components.d.ts +0 -17
- package/Autocomplete/components.mjs +0 -87
- package/Autocomplete/helpers.d.ts +0 -3
- package/Autocomplete/helpers.mjs +0 -35
- package/Autocomplete/index.d.ts +0 -2
- package/Autocomplete/index.mjs +0 -4
- package/Bg/BgColor.d.ts +0 -31
- package/Bg/BgColor.mjs +0 -42
- package/Bg/BgPhoto.d.ts +0 -13
- package/Bg/BgPhoto.mjs +0 -71
- package/Bg/BgSvg.d.ts +0 -7
- package/Bg/BgSvg.mjs +0 -22
- package/Bg/index.d.ts +0 -3
- package/Bg/index.mjs +0 -3
- package/Breadcrumbs/Breadcrumbs.d.ts +0 -13
- package/Breadcrumbs/Breadcrumbs.mjs +0 -91
- package/Breadcrumbs/index.d.ts +0 -1
- package/Breadcrumbs/index.mjs +0 -1
- package/Buttons/Button.d.ts +0 -18
- package/Buttons/Button.mjs +0 -78
- package/Buttons/ButtonComposite.d.ts +0 -23
- package/Buttons/ButtonComposite.mjs +0 -105
- package/Buttons/ButtonFab.d.ts +0 -5
- package/Buttons/ButtonFab.mjs +0 -8
- package/Buttons/ButtonLink.d.ts +0 -8
- package/Buttons/ButtonLink.mjs +0 -18
- package/Buttons/IconButton.d.ts +0 -9
- package/Buttons/IconButton.mjs +0 -19
- package/Buttons/index.d.ts +0 -5
- package/Buttons/index.mjs +0 -5
- package/Calendar/CalendarDaygridCell.mjs +0 -95
- package/Calendar/CalendarDaygridNav.mjs +0 -52
- package/Calendar/CalendarDaygridTable.mjs +0 -115
- package/Calendar/CalendarLegend.mjs +0 -29
- package/Calendar/calendar-api-google.mjs +0 -99
- package/Calendar/index.d.ts +0 -6
- package/Calendar/index.mjs +0 -6
- package/Calendar/types.mjs +0 -1
- package/Calendar/useCalendar.mjs +0 -225
- package/Calendar/utils.d.ts +0 -11
- package/Calendar/utils.mjs +0 -209
- package/Carousel/Carousel.d.ts +0 -1
- package/Carousel/Carousel.mjs +0 -377
- package/Carousel/CarouselCss.d.ts +0 -35
- package/Carousel/CarouselCss.mjs +0 -44
- package/Carousel/index.d.ts +0 -1
- package/Carousel/index.mjs +0 -1
- package/Collapsable/Collapsable.d.ts +0 -1
- package/Collapsable/Collapsable.mjs +0 -1
- package/Collapsable/CollapsableReach.d.ts +0 -6
- package/Collapsable/CollapsableReach.mjs +0 -250
- package/Collapsable/index.d.ts +0 -1
- package/Collapsable/index.mjs +0 -1
- package/Debug/Debug.d.ts +0 -4
- package/Debug/Debug.mjs +0 -23
- package/Debug/index.d.ts +0 -1
- package/Debug/index.mjs +0 -1
- package/Details/Details.d.ts +0 -404
- package/Details/Details.mjs +0 -90
- package/Details/Details.stories.mjs +0 -21
- package/Details/index.d.ts +0 -1
- package/Details/index.mjs +0 -1
- package/Dialog/DialogMui.d.ts +0 -167
- package/Dialog/DialogMui.mjs +0 -105
- package/Dialog/DialogMui.stories.mjs +0 -20
- package/Dialog/css/bare.d.ts +0 -172
- package/Dialog/css/bare.mjs +0 -19
- package/Dialog/css/index.stories.mjs +0 -75
- package/Dialog/index.d.ts +0 -2
- package/Dialog/index.mjs +0 -1
- package/Dialog/m/bare.d.ts +0 -4
- package/Dialog/m/bare.mjs +0 -115
- package/Dialog/m/basic.d.ts +0 -4
- package/Dialog/m/basic.mjs +0 -31
- package/Dialog/m/index.d.ts +0 -3
- package/Dialog/m/index.mjs +0 -4
- package/Dialog/sc/bare.d.ts +0 -71
- package/Dialog/sc/bare.mjs +0 -54
- package/Dialog/sc/framer.d.ts +0 -25
- package/Dialog/sc/framer.mjs +0 -16
- package/Dialog/sc/framerMaterial.d.ts +0 -24
- package/Dialog/sc/framerMaterial.mjs +0 -16
- package/Dialog/sc/index.stories.mjs +0 -48
- package/Dialog/sc/material.d.ts +0 -61
- package/Dialog/sc/material.mjs +0 -41
- package/Dialog/tw/bare.d.ts +0 -223
- package/Dialog/tw/bare.mjs +0 -29
- package/Dialog/tw/elegant.d.ts +0 -271
- package/Dialog/tw/elegant.mjs +0 -18
- package/Dialog/tw/framer.d.ts +0 -109
- package/Dialog/tw/framer.mjs +0 -16
- package/Dialog/tw/framerMaterial.d.ts +0 -164
- package/Dialog/tw/framerMaterial.mjs +0 -16
- package/Dialog/tw/index.stories.mjs +0 -83
- package/Dialog/tw/material.d.ts +0 -271
- package/Dialog/tw/material.mjs +0 -18
- package/Editor/Editor--tiptap.d.ts +0 -9
- package/Editor/Editor--tiptap.mjs +0 -53
- package/Editor/components.d.ts +0 -5
- package/Editor/components.mjs +0 -28
- package/Editor/index.d.ts +0 -1
- package/Editor/index.mjs +0 -1
- package/FaviconTags.mjs +0 -64
- package/Form/Form.d.ts +0 -138
- package/Form/Form.mjs +0 -95
- package/Form/index.d.ts +0 -1
- package/Form/index.mjs +0 -1
- package/Form/sc/bare.d.ts +0 -58
- package/Form/sc/bare.mjs +0 -29
- package/Forms/Checkbox/Checkbox.d.ts +0 -11
- package/Forms/Checkbox/Checkbox.mjs +0 -36
- package/Forms/Checkbox/index.d.ts +0 -1
- package/Forms/Checkbox/index.mjs +0 -1
- package/Forms/Feedback/Feedback.d.ts +0 -5
- package/Forms/Feedback/Feedback.mjs +0 -14
- package/Forms/Feedback/index.d.ts +0 -1
- package/Forms/Feedback/index.mjs +0 -1
- package/Forms/Field/Field.d.ts +0 -36
- package/Forms/Field/Field.mjs +0 -50
- package/Forms/Field/FieldControl.d.ts +0 -26
- package/Forms/Field/FieldControl.mjs +0 -67
- package/Forms/Field/FieldHint.d.ts +0 -1
- package/Forms/Field/FieldHint.mjs +0 -6
- package/Forms/Field/index.d.ts +0 -2
- package/Forms/Field/index.mjs +0 -2
- package/Forms/Input/Input.d.ts +0 -9
- package/Forms/Input/Input.mjs +0 -36
- package/Forms/Input/index.d.ts +0 -1
- package/Forms/Input/index.mjs +0 -1
- package/Forms/InputGroup/InputGroup.d.ts +0 -13
- package/Forms/InputGroup/InputGroup.mjs +0 -57
- package/Forms/InputGroup/index.d.ts +0 -1
- package/Forms/InputGroup/index.mjs +0 -1
- package/Forms/Label/Label.d.ts +0 -3
- package/Forms/Label/Label.mjs +0 -24
- package/Forms/Label/index.d.ts +0 -1
- package/Forms/Label/index.mjs +0 -1
- package/Forms/Password/Password.d.ts +0 -5
- package/Forms/Password/Password.mjs +0 -53
- package/Forms/Password/index.d.ts +0 -1
- package/Forms/Password/index.mjs +0 -1
- package/Forms/Radio/Radio.d.ts +0 -12
- package/Forms/Radio/Radio.mjs +0 -57
- package/Forms/Radio/index.d.ts +0 -1
- package/Forms/Radio/index.mjs +0 -1
- package/Forms/Switch/Switch.d.ts +0 -9
- package/Forms/Switch/Switch.mjs +0 -60
- package/Forms/Switch/index.d.ts +0 -1
- package/Forms/Switch/index.mjs +0 -1
- package/Forms/Textarea/Textarea.d.ts +0 -5
- package/Forms/Textarea/Textarea.mjs +0 -26
- package/Forms/Textarea/TextareaRich.d.ts +0 -6
- package/Forms/Textarea/TextareaRich.mjs +0 -48
- package/Forms/Textarea/index.d.ts +0 -2
- package/Forms/Textarea/index.mjs +0 -2
- package/Forms/Toggle/Toggle-tailwind.d.ts +0 -0
- package/Forms/Toggle/Toggle-tailwind.mjs +0 -98
- package/Forms/Toggle/Toggle.d.ts +0 -19
- package/Forms/Toggle/Toggle.mjs +0 -123
- package/Forms/Toggle/index.d.ts +0 -1
- package/Forms/Toggle/index.mjs +0 -1
- package/Forms/Toggle/useToggle-tailwind.d.ts +0 -0
- package/Forms/Toggle/useToggle-tailwind.mjs +0 -201
- package/Forms/Toggle/useToggle.d.ts +0 -46
- package/Forms/Toggle/useToggle.mjs +0 -163
- package/Forms/antispam.mjs +0 -58
- package/Forms/helpers.d.ts +0 -26
- package/Forms/helpers.mjs +0 -52
- package/Forms/index.d.ts +0 -15
- package/Forms/index.mjs +0 -16
- package/Forms/styles.d.ts +0 -15
- package/Forms/styles.mjs +0 -61
- package/Gauge/Gauge.d.ts +0 -5
- package/Gauge/Gauge.mjs +0 -101
- package/Grid/Grid.d.ts +0 -41
- package/Grid/Grid.mjs +0 -75
- package/Grid/index.d.ts +0 -1
- package/Grid/index.mjs +0 -1
- package/Hamburger/Hamburger.d.ts +0 -6
- package/Hamburger/Hamburger.mjs +0 -79
- package/Hamburger/index.d.ts +0 -1
- package/Hamburger/index.mjs +0 -1
- package/Header/index.d.ts +0 -1
- package/Header/index.mjs +0 -1
- package/Header/useHeader.d.ts +0 -24
- package/Header/useHeader.mjs +0 -36
- package/Hidden/Hidden.d.ts +0 -6
- package/Hidden/Hidden.mjs +0 -10
- package/Hidden/index.d.ts +0 -1
- package/Hidden/index.mjs +0 -1
- package/Img/sc/bare.d.ts +0 -2
- package/Img/sc/bare.mjs +0 -36
- package/Img/types.d.ts +0 -9
- package/Img/types.mjs +0 -1
- package/Link/Link.d.ts +0 -3
- package/Link/Link.mjs +0 -2
- package/Link/LinkBlank.d.ts +0 -5
- package/Link/LinkBlank.mjs +0 -32
- package/Link/index.d.ts +0 -2
- package/Link/index.mjs +0 -2
- package/Menu/Menu.d.ts +0 -1
- package/Menu/Menu.mjs +0 -11
- package/Menu/MenuMui.d.ts +0 -0
- package/Menu/MenuMui.mjs +0 -164
- package/Menu/index.d.ts +0 -1
- package/Menu/index.mjs +0 -1
- package/MenuItem/MenuItem.d.ts +0 -1
- package/MenuItem/MenuItem.mjs +0 -20
- package/MenuItem/MenuItemMui.d.ts +0 -0
- package/MenuItem/MenuItemMui.mjs +0 -31
- package/MenuItem/index.d.ts +0 -1
- package/MenuItem/index.mjs +0 -1
- package/MenuItem/useMenuItem.d.ts +0 -9
- package/MenuItem/useMenuItem.mjs +0 -78
- package/Meta/Meta.mjs +0 -8
- package/Meta/index.d.ts +0 -2
- package/Meta/index.mjs +0 -2
- package/NoJs/NoJs.d.ts +0 -3
- package/NoJs/NoJs.mjs +0 -10
- package/NoJs/index.d.ts +0 -2
- package/NoJs/index.mjs +0 -2
- package/Pagination/PaginationNav.d.ts +0 -22
- package/Pagination/PaginationNav.mjs +0 -122
- package/Pagination/PaginationResults.d.ts +0 -3
- package/Pagination/PaginationResults.mjs +0 -34
- package/Pagination/index.d.ts +0 -2
- package/Pagination/index.mjs +0 -2
- package/Pill/Pill.d.ts +0 -5
- package/Pill/Pill.mjs +0 -37
- package/Pill/index.d.ts +0 -1
- package/Pill/index.mjs +0 -1
- package/Progress/ProgressCircular.d.ts +0 -19
- package/Progress/ProgressCircular.mjs +0 -53
- package/Progress/ProgressLinear.d.ts +0 -22
- package/Progress/ProgressLinear.mjs +0 -44
- package/Progress/ProgressOverlay.d.ts +0 -4
- package/Progress/ProgressOverlay.mjs +0 -64
- package/Progress/index.d.ts +0 -3
- package/Progress/index.mjs +0 -3
- package/Rating/Rating.d.ts +0 -35
- package/Rating/Rating.mjs +0 -154
- package/Rating/index.d.ts +0 -11
- package/Rating/index.mjs +0 -62
- package/Select/SelectDownshift.d.ts +0 -5
- package/Select/SelectDownshift.mjs +0 -37
- package/Select/components.d.ts +0 -6
- package/Select/components.mjs +0 -25
- package/Select/index.d.ts +0 -2
- package/Select/index.mjs +0 -2
- package/Sidebar/Sidebar.d.ts +0 -3
- package/Sidebar/Sidebar.mjs +0 -63
- package/Sidebar/index.d.ts +0 -1
- package/Sidebar/index.mjs +0 -1
- package/Spacing/Spacing.d.ts +0 -30
- package/Spacing/Spacing.mjs +0 -55
- package/Spacing/index.d.ts +0 -1
- package/Spacing/index.mjs +0 -1
- package/Sticky/Sticky.d.ts +0 -2
- package/Sticky/Sticky.mjs +0 -218
- package/Sticky/StickyCss.d.ts +0 -5
- package/Sticky/StickyCss.mjs +0 -10
- package/Sticky/index.d.ts +0 -1
- package/Sticky/index.mjs +0 -1
- package/Tabs/TabsMui.d.ts +0 -85
- package/Tabs/TabsMui.mjs +0 -61
- package/Tabs/TabsMui.stories.mjs +0 -20
- package/Tabs/index.d.ts +0 -1
- package/Tabs/index.mjs +0 -1
- package/Tabs/sc/bare.d.ts +0 -5
- package/Tabs/sc/bare.mjs +0 -85
- package/Tabs/sc/index.stories.mjs +0 -0
- package/Tabs/tw/bare.d.ts +0 -86
- package/Tabs/tw/bare.mjs +0 -15
- package/Tabs/tw/index.stories.mjs +0 -25
- package/Tabs/tw/material.d.ts +0 -119
- package/Tabs/tw/material.mjs +0 -14
- package/Tabs/useTabs.d.ts +0 -43
- package/Tabs/useTabs.mjs +0 -46
- package/Typography/CopyPasteVisible.d.ts +0 -1
- package/Typography/CopyPasteVisible.mjs +0 -6
- package/Typography/Native.d.ts +0 -10
- package/Typography/Native.mjs +0 -47
- package/Typography/ReadMore.d.ts +0 -12
- package/Typography/ReadMore.mjs +0 -114
- package/Typography/TextLoop.d.ts +0 -16
- package/Typography/TextLoop.mjs +0 -90
- package/Typography/TypeStairs.d.ts +0 -6
- package/Typography/TypeStairs.mjs +0 -61
- package/Typography/index.d.ts +0 -5
- package/Typography/index.mjs +0 -5
- package/css/index.d.ts +0 -2
- package/css/index.mjs +0 -30
- package/helpers/classed.mjs +0 -65
- package/helpers/classed.stories.mjs +0 -121
- package/helpers/createUseMediaQueryWidth.mjs +0 -178
- package/helpers/extend-component.mjs +0 -13
- package/helpers/index.d.ts +0 -4
- package/helpers/index.mjs +0 -4
- package/helpers/mergeRefs.d.ts +0 -3
- package/helpers/mergeRefs.mjs +0 -12
- package/hooks/index.d.ts +0 -20
- package/hooks/index.mjs +0 -21
- package/hooks/types.d.ts +0 -8
- package/hooks/types.mjs +0 -3
- package/hooks/useAsyncFn.mjs +0 -39
- package/hooks/useDateLocale.mjs +0 -37
- package/hooks/useFirstMountState.mjs +0 -12
- package/hooks/useFixedOffset.mjs +0 -56
- package/hooks/useFocus.d.ts +0 -6
- package/hooks/useFocus.mjs +0 -14
- package/hooks/useInterval.mjs +0 -29
- package/hooks/useIsomorphicLayoutEffect.mjs +0 -6
- package/hooks/useKeyUp.d.ts +0 -2
- package/hooks/useKeyUp.mjs +0 -21
- package/hooks/useMeasure.mjs +0 -174
- package/hooks/useMountedState.mjs +0 -15
- package/hooks/useNavigateAway.mjs +0 -69
- package/hooks/usePrevious.mjs +0 -17
- package/hooks/usePreviousRef.d.ts +0 -2
- package/hooks/usePreviousRef.mjs +0 -9
- package/hooks/useScrollPosition.mjs +0 -70
- package/hooks/useScrollThreshold.d.ts +0 -2
- package/hooks/useScrollThreshold.mjs +0 -33
- package/hooks/useScrollTo.d.ts +0 -2
- package/hooks/useScrollTo.mjs +0 -20
- package/hooks/useSmoothScroll.d.ts +0 -8
- package/hooks/useSmoothScroll.mjs +0 -35
- package/hooks/useSpinDelay.mjs +0 -52
- package/hooks/useTraceUpdate.mjs +0 -23
- package/hooks/useUpdateEffect.mjs +0 -14
- package/hooks/useWindowSize.d.ts +0 -12
- package/hooks/useWindowSize.mjs +0 -32
- package/index.mjs +0 -4
- package/m/MotionProvider.d.ts +0 -38
- package/m/MotionProvider.mjs +0 -40
- package/m/index.d.ts +0 -6
- package/m/index.mjs +0 -5
- package/m/lite.d.ts +0 -2
- package/m/lite.mjs +0 -2
- package/m/max.d.ts +0 -2
- package/m/max.mjs +0 -2
- package/sc/index.d.ts +0 -30
- package/sc/index.mjs +0 -31
- package/scm/index.d.ts +0 -29
- package/scm/index.mjs +0 -31
- package/shared/index.d.ts +0 -8
- package/shared/index.mjs +0 -43
- package/styles/Body.d.ts +0 -10
- package/styles/Body.mjs +0 -16
- package/styles/Global.d.ts +0 -15
- package/styles/Global.mjs +0 -49
- package/styles/index.d.ts +0 -7
- package/styles/index.mjs +0 -7
- package/styles/media.d.ts +0 -67
- package/styles/media.mjs +0 -151
- package/styles/spacing.d.ts +0 -13
- package/styles/spacing.mjs +0 -46
- package/styles/styled.d.ts +0 -12
- package/styles/styled.mjs +0 -26
- package/styles/theme--vanilla.d.ts +0 -17
- package/styles/theme--vanilla.mjs +0 -65
- package/styles/theme.d.ts +0 -82
- package/styles/theme.mjs +0 -38
- package/tw/index.d.ts +0 -2
- package/tw/index.mjs +0 -30
- package/twm/index.d.ts +0 -2
- package/twm/index.mjs +0 -30
- package/types.mjs +0 -1
- package/typings.d.ts +0 -99
package/Typography/TextLoop.mjs
DELETED
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { AnimatePresence, m } from "framer-motion";
|
|
3
|
-
import { useEffect, useRef, useState } from "react";
|
|
4
|
-
export const TextLoopPiece = ({ text = "", style = {}, className = "", direction = "up", inline = true, noOverflow = true, delay = 400 })=>{
|
|
5
|
-
const placeholderRef = useRef(null);
|
|
6
|
-
const [content, setContent] = useState({
|
|
7
|
-
data: "",
|
|
8
|
-
key: ""
|
|
9
|
-
});
|
|
10
|
-
const [width, setWidth] = useState(inline ? 0 : "auto");
|
|
11
|
-
useEffect(()=>{
|
|
12
|
-
const timeoutId = setTimeout(()=>{
|
|
13
|
-
if (!placeholderRef.current) return;
|
|
14
|
-
placeholderRef.current.innerHTML = text + "";
|
|
15
|
-
if (inline) setWidth(placeholderRef.current.offsetWidth);
|
|
16
|
-
setContent({
|
|
17
|
-
data: text + "",
|
|
18
|
-
key: new Date() + ""
|
|
19
|
-
});
|
|
20
|
-
}, delay);
|
|
21
|
-
return ()=>clearTimeout(timeoutId);
|
|
22
|
-
}, [
|
|
23
|
-
text,
|
|
24
|
-
delay,
|
|
25
|
-
inline
|
|
26
|
-
]);
|
|
27
|
-
return /*#__PURE__*/ _jsxs("div", {
|
|
28
|
-
className: className,
|
|
29
|
-
style: {
|
|
30
|
-
...style,
|
|
31
|
-
position: "relative",
|
|
32
|
-
display: inline ? "inline-block" : "block",
|
|
33
|
-
width,
|
|
34
|
-
whiteSpace: inline ? "nowrap" : "normal"
|
|
35
|
-
},
|
|
36
|
-
children: [
|
|
37
|
-
/*#__PURE__*/ _jsx("span", {
|
|
38
|
-
ref: placeholderRef,
|
|
39
|
-
style: {
|
|
40
|
-
visibility: "hidden"
|
|
41
|
-
}
|
|
42
|
-
}),
|
|
43
|
-
/*#__PURE__*/ _jsx("div", {
|
|
44
|
-
style: {
|
|
45
|
-
overflow: noOverflow ? "hidden" : "visible",
|
|
46
|
-
display: "block",
|
|
47
|
-
position: "absolute",
|
|
48
|
-
top: 0,
|
|
49
|
-
left: 0,
|
|
50
|
-
height: "100%",
|
|
51
|
-
width: "100%"
|
|
52
|
-
},
|
|
53
|
-
children: /*#__PURE__*/ _jsx(AnimatePresence, {
|
|
54
|
-
children: /*#__PURE__*/ _jsx(m.div, {
|
|
55
|
-
style: {
|
|
56
|
-
position: "absolute"
|
|
57
|
-
},
|
|
58
|
-
initial: {
|
|
59
|
-
opacity: 0,
|
|
60
|
-
y: direction === "down" ? "-100%" : "100%"
|
|
61
|
-
},
|
|
62
|
-
animate: {
|
|
63
|
-
opacity: 1,
|
|
64
|
-
y: 0
|
|
65
|
-
},
|
|
66
|
-
exit: {
|
|
67
|
-
opacity: 0,
|
|
68
|
-
y: direction === "down" ? "100%" : "-100%"
|
|
69
|
-
},
|
|
70
|
-
children: content.data
|
|
71
|
-
}, content.key)
|
|
72
|
-
})
|
|
73
|
-
})
|
|
74
|
-
]
|
|
75
|
-
});
|
|
76
|
-
};
|
|
77
|
-
export const TextLoop = ({ texts, interval = 3000, ...props })=>{
|
|
78
|
-
const [index, setIndex] = useState(0);
|
|
79
|
-
useEffect(()=>{
|
|
80
|
-
const intervalId = setInterval(()=>setIndex((index)=>index + 1), interval // every 3 seconds
|
|
81
|
-
);
|
|
82
|
-
return ()=>clearTimeout(intervalId);
|
|
83
|
-
}, [
|
|
84
|
-
interval
|
|
85
|
-
]);
|
|
86
|
-
return /*#__PURE__*/ _jsx(TextLoopPiece, {
|
|
87
|
-
...props,
|
|
88
|
-
text: texts[index % texts.length]
|
|
89
|
-
});
|
|
90
|
-
};
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef } from "react";
|
|
3
|
-
export const TypeStairs = /*#__PURE__*/ forwardRef(({ children, limit }, ref)=>{
|
|
4
|
-
// split in rows or just use one row if there is no limit
|
|
5
|
-
const rows = limit ? splitTextIntoRows(children, limit) : [
|
|
6
|
-
children
|
|
7
|
-
];
|
|
8
|
-
return rows.length > 1 ? /*#__PURE__*/ _jsx(_Fragment, {
|
|
9
|
-
children: rows.map((row, rowIndex)=>{
|
|
10
|
-
return /*#__PURE__*/ _jsxs("span", {
|
|
11
|
-
children: [
|
|
12
|
-
renderRow(row, rowIndex, ref),
|
|
13
|
-
rowIndex !== rows.length - 1 && /*#__PURE__*/ _jsx("br", {})
|
|
14
|
-
]
|
|
15
|
-
}, `row-${rowIndex}`);
|
|
16
|
-
})
|
|
17
|
-
}) : renderRow(rows[0], 0, ref);
|
|
18
|
-
});
|
|
19
|
-
/**
|
|
20
|
-
* every number chars find a space and break, then restart the gradient weight
|
|
21
|
-
* @see https://stackoverflow.com/a/25770787
|
|
22
|
-
*/ function splitTextIntoRows(input = "", limit = 18) {
|
|
23
|
-
const rows = [];
|
|
24
|
-
const arr = input.split(" ");
|
|
25
|
-
let currow = arr[0];
|
|
26
|
-
let rowlen = currow.length;
|
|
27
|
-
for(let i = 1; i < arr.length; i++){
|
|
28
|
-
const word = arr[i];
|
|
29
|
-
rowlen += word.length + 1;
|
|
30
|
-
if (rowlen <= limit) {
|
|
31
|
-
currow += " " + word;
|
|
32
|
-
} else {
|
|
33
|
-
rows.push(currow);
|
|
34
|
-
currow = word;
|
|
35
|
-
rowlen = word.length;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
rows.push(currow);
|
|
39
|
-
return rows;
|
|
40
|
-
}
|
|
41
|
-
function renderRow(row, rowIndex, ref) {
|
|
42
|
-
const letters = row.split("");
|
|
43
|
-
let fontWeightIdx = 1;
|
|
44
|
-
// const fontWeight = Math.min(fontWeightIdx * 100, 800);
|
|
45
|
-
return /*#__PURE__*/ _jsx(_Fragment, {
|
|
46
|
-
children: letters.map((letter, letterIndex)=>{
|
|
47
|
-
const fontWeight = Math.min(fontWeightIdx * 100, 800);
|
|
48
|
-
// don't waste a fontWeight for a white space
|
|
49
|
-
if (letter !== " ") {
|
|
50
|
-
fontWeightIdx++;
|
|
51
|
-
}
|
|
52
|
-
return /*#__PURE__*/ _jsx("span", {
|
|
53
|
-
style: {
|
|
54
|
-
fontWeight
|
|
55
|
-
},
|
|
56
|
-
ref: ref,
|
|
57
|
-
children: letter
|
|
58
|
-
}, `letter-${rowIndex}-${letterIndex}`);
|
|
59
|
-
})
|
|
60
|
-
});
|
|
61
|
-
}
|
package/Typography/index.d.ts
DELETED
package/Typography/index.mjs
DELETED
package/css/index.d.ts
DELETED
package/css/index.mjs
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
export * from "../shared";
|
|
2
|
-
// export * from "../Alert";
|
|
3
|
-
// export * from "../Animations";
|
|
4
|
-
// export * from "../Autocomplete";
|
|
5
|
-
// export * from "../Bg";
|
|
6
|
-
// export * from "../Breadcrumbs";
|
|
7
|
-
// export * from "../Buttons";
|
|
8
|
-
// export * from "../Carousel";
|
|
9
|
-
// export * from "../Collapsable";
|
|
10
|
-
// export * from "../Debug";
|
|
11
|
-
export { KoineDialog } from "../Dialog/css/bare"; // export * from "../Form";
|
|
12
|
-
// export * from "../Forms";
|
|
13
|
-
// export * from "../Grid";
|
|
14
|
-
// export * from "../Hamburger";
|
|
15
|
-
// export * from "../Header";
|
|
16
|
-
// export * from "../Hidden";
|
|
17
|
-
// export * from "../Img";
|
|
18
|
-
// export * from "../Link";
|
|
19
|
-
// export * from "../MenuItem";
|
|
20
|
-
// export * from "../Pagination";
|
|
21
|
-
// export * from "../Pill";
|
|
22
|
-
// export * from "../Progress";
|
|
23
|
-
// export * from "../Rating";
|
|
24
|
-
// // export * from "../Select";
|
|
25
|
-
// export * from "../Sidebar";
|
|
26
|
-
// export * from "../Spacing";
|
|
27
|
-
// export * from "../Sticky";
|
|
28
|
-
// export * from "../styles";
|
|
29
|
-
// export * from "../Tabs";
|
|
30
|
-
// export * from "../Typography";
|
package/helpers/classed.mjs
DELETED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import React, { createElement, forwardRef } from "react";
|
|
2
|
-
/**
|
|
3
|
-
* This utility allows to extend a component a là `styled-components` but for
|
|
4
|
-
* a className based styling solution like Tailwind,
|
|
5
|
-
*
|
|
6
|
-
* It also plays nicely with tailwind intellisense:
|
|
7
|
-
* - https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
|
|
8
|
-
*
|
|
9
|
-
* For references about tagged functions:
|
|
10
|
-
* - https://javascript.plainenglish.io/how-css-in-js-libraries-work-da4145b1b6c7
|
|
11
|
-
* - https://makersden.io/blog/reverse-engineering-styled-components
|
|
12
|
-
* - https://typesafe.blog/article/the-logic-behind-javascript-tag-functions
|
|
13
|
-
* - https://flaming.codes/posts/typescript-and-javascript-tagged-template-strings
|
|
14
|
-
*
|
|
15
|
-
* Similar projects:
|
|
16
|
-
* - https://reactjsexample.com/style-radix-ui-components-with-tailwindcss/
|
|
17
|
-
*
|
|
18
|
-
* Discussions and Q/A:
|
|
19
|
-
* - https://stackoverflow.com/q/73055695/1938970
|
|
20
|
-
*/ export function classed(component) {
|
|
21
|
-
// @ts-expect-error nevermind for now...
|
|
22
|
-
const type = component.type || component;
|
|
23
|
-
return function(strings, ...args) {
|
|
24
|
-
const WrappedComponent = /*#__PURE__*/ forwardRef(function(props, ref) {
|
|
25
|
-
const argResolved = args.map((arg, index)=>{
|
|
26
|
-
let result = "";
|
|
27
|
-
if (typeof arg === "function") {
|
|
28
|
-
result = arg(props);
|
|
29
|
-
} else if (typeof arg !== "undefined") {
|
|
30
|
-
result = arg.toString();
|
|
31
|
-
}
|
|
32
|
-
return strings[index] + result;
|
|
33
|
-
}).join("");
|
|
34
|
-
const isNativeHtmlElement = typeof type === "string";
|
|
35
|
-
const propsToForward = isNativeHtmlElement ? {} : props;
|
|
36
|
-
if (isNativeHtmlElement) {
|
|
37
|
-
for(const key in props){
|
|
38
|
-
// like styled-components `transient` props
|
|
39
|
-
if (!key.startsWith("$")) {
|
|
40
|
-
// FIXME: for react 18 we need: @ts-expect-error
|
|
41
|
-
propsToForward[key] = props[key];
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
// get the tagged function string outcome
|
|
46
|
-
let className = argResolved || strings[0];
|
|
47
|
-
// check if we need to clean it or not from the optional structure `< class="..."`
|
|
48
|
-
className = className.match(/class="([^"]*)/)?.[1] || className;
|
|
49
|
-
// add the custom classes from props
|
|
50
|
-
className += props?.className ? " " + props?.className : "";
|
|
51
|
-
return /*#__PURE__*/ createElement(type, {
|
|
52
|
-
// ...props,
|
|
53
|
-
...propsToForward,
|
|
54
|
-
// only add ot props if it is not an empty string
|
|
55
|
-
className: className || undefined,
|
|
56
|
-
// add ref to props
|
|
57
|
-
ref
|
|
58
|
-
});
|
|
59
|
-
});
|
|
60
|
-
// FIXME: not sure if this is needed
|
|
61
|
-
// WrappedComponent.displayName = type.toString();
|
|
62
|
-
return WrappedComponent; // as unknown as React.ReactElement<typeof props>;
|
|
63
|
-
};
|
|
64
|
-
}
|
|
65
|
-
export default classed;
|
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
2
|
-
// @ts-nocheck These are just wip experiments, we stick to just `./classed.tsx`
|
|
3
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
4
|
-
import React, { createElement } from "react";
|
|
5
|
-
import { classed } from "./classed";
|
|
6
|
-
const Classed = classed("div")`< class="bg-red-400 ${(p)=>p.test === "0a" ? "py-3" : "px-3"}`;
|
|
7
|
-
/**
|
|
8
|
-
* Adapted (removed `classnames` dependency) from:
|
|
9
|
-
* @see https://daily.dev/blog/my-tailwind-css-utility-function-for-creating-reusable-react-components-typescript-support
|
|
10
|
-
*
|
|
11
|
-
* See also [classname-hoc](https://www.npmjs.com/package/classname-hoc)
|
|
12
|
-
*/ function classedOriginal(type, ...className) {
|
|
13
|
-
return function(props) {
|
|
14
|
-
return /*#__PURE__*/ createElement(type, {
|
|
15
|
-
...props,
|
|
16
|
-
className: [
|
|
17
|
-
props?.className || ""
|
|
18
|
-
].concat(className).join(" ")
|
|
19
|
-
});
|
|
20
|
-
};
|
|
21
|
-
}
|
|
22
|
-
const ClassedOriginal = classedOriginal("div", "bg-slate-800");
|
|
23
|
-
function classedBind(props) {
|
|
24
|
-
// @ts-expect-error no time now
|
|
25
|
-
const classNameImpl = props.className ? " " + props.className : "";
|
|
26
|
-
// return <this className={this.props.className + classNameImpl} {...props} />;
|
|
27
|
-
return /*#__PURE__*/ createElement(this.props.as || this.type, {
|
|
28
|
-
...props,
|
|
29
|
-
className: this.props.className + classNameImpl
|
|
30
|
-
}, // @ts-expect-error no time now
|
|
31
|
-
props.children);
|
|
32
|
-
}
|
|
33
|
-
const ClassedBind = classedBind.bind(/*#__PURE__*/ _jsx("div", {
|
|
34
|
-
as: "h2",
|
|
35
|
-
className: "bg-slate-800"
|
|
36
|
-
}));
|
|
37
|
-
function classedDynamic(ComponentFn) {
|
|
38
|
-
return function(propsImplementation) {
|
|
39
|
-
const { props, type } = ComponentFn(propsImplementation);
|
|
40
|
-
const classNameDefault = props.className ? " " + props.className : "";
|
|
41
|
-
return /*#__PURE__*/ createElement(props.as || type, {
|
|
42
|
-
...props,
|
|
43
|
-
...propsImplementation,
|
|
44
|
-
className: propsImplementation?.className + classNameDefault
|
|
45
|
-
});
|
|
46
|
-
};
|
|
47
|
-
}
|
|
48
|
-
const ClassedDynamicIgnoringProps = classedDynamic(()=>/*#__PURE__*/ _jsx("div", {
|
|
49
|
-
as: "h2",
|
|
50
|
-
className: "bg-slate-800"
|
|
51
|
-
}));
|
|
52
|
-
const ClassedDynamicUsingProps = classedDynamic((p)=>{
|
|
53
|
-
return /*#__PURE__*/ _jsx("div", {
|
|
54
|
-
as: "h2",
|
|
55
|
-
className: `bg-slate-800 ${p?.test === "3" ? "py-3" : "px-3"}`
|
|
56
|
-
});
|
|
57
|
-
});
|
|
58
|
-
// type ExtractComponent<ComponentString extends string> =
|
|
59
|
-
// ComponentString extends `<${infer ComponentName} class="${infer ClassNames}`
|
|
60
|
-
// ? { name: ComponentName; className: ClassNames }
|
|
61
|
-
// : { error: "Cannot parse Component string" };
|
|
62
|
-
// type ExtractedComponent<T extends string> = ExtractComponent<T>;
|
|
63
|
-
function classedTaggedStatic(value = "") {
|
|
64
|
-
// @ts-expect-error we rely on correct implementation and assume it always matches
|
|
65
|
-
const componentName = value.match(/<(.*?)\s/)[1];
|
|
66
|
-
// @ts-expect-error we rely on correct implementation and assume it always matches
|
|
67
|
-
const classDefault = value.match(/class="(.+)/)[1];
|
|
68
|
-
return function(props) {
|
|
69
|
-
// @ts-expect-error no time now
|
|
70
|
-
const classCustom = props?.className ? " " + props?.className : "";
|
|
71
|
-
return /*#__PURE__*/ createElement(componentName, {
|
|
72
|
-
...props,
|
|
73
|
-
className: classDefault + classCustom
|
|
74
|
-
});
|
|
75
|
-
}; /* as Component; */
|
|
76
|
-
}
|
|
77
|
-
const ClassedTaggedStatic = classedTaggedStatic(`<div class="bg-teal-400`);
|
|
78
|
-
export default {
|
|
79
|
-
// component: KoineDialog,
|
|
80
|
-
title: "Helpers/classed"
|
|
81
|
-
};
|
|
82
|
-
const Template = (args)=>{
|
|
83
|
-
return /*#__PURE__*/ _jsxs(_Fragment, {
|
|
84
|
-
children: [
|
|
85
|
-
/*#__PURE__*/ _jsx(Classed, {
|
|
86
|
-
className: "text-yellow-200",
|
|
87
|
-
test: "0a",
|
|
88
|
-
children: "Classed taller"
|
|
89
|
-
}),
|
|
90
|
-
/*#__PURE__*/ _jsx(Classed, {
|
|
91
|
-
className: "text-yellow-200",
|
|
92
|
-
test: "0b",
|
|
93
|
-
children: "Classed wider"
|
|
94
|
-
}),
|
|
95
|
-
/*#__PURE__*/ _jsx(ClassedOriginal, {
|
|
96
|
-
className: "text-white",
|
|
97
|
-
children: "ClassedOriginal"
|
|
98
|
-
}),
|
|
99
|
-
/*#__PURE__*/ _jsx(ClassedBind, {
|
|
100
|
-
className: "text-white",
|
|
101
|
-
children: "ClassedBind"
|
|
102
|
-
}),
|
|
103
|
-
/*#__PURE__*/ _jsx(ClassedDynamicIgnoringProps, {
|
|
104
|
-
className: "text-gray-300",
|
|
105
|
-
test: "2",
|
|
106
|
-
children: "ClassedDynamicIgnoringProps"
|
|
107
|
-
}),
|
|
108
|
-
/*#__PURE__*/ _jsx(ClassedDynamicUsingProps, {
|
|
109
|
-
className: "text-gray-600",
|
|
110
|
-
test: "3",
|
|
111
|
-
children: "ClassedDynamicUsingProps"
|
|
112
|
-
}),
|
|
113
|
-
/*#__PURE__*/ _jsx(ClassedTaggedStatic, {
|
|
114
|
-
className: "text-gray-600",
|
|
115
|
-
children: "ClassedTaggedStatic"
|
|
116
|
-
})
|
|
117
|
-
]
|
|
118
|
-
});
|
|
119
|
-
};
|
|
120
|
-
export const Playground = Template.bind({});
|
|
121
|
-
Playground.args = {};
|
|
@@ -1,178 +0,0 @@
|
|
|
1
|
-
import { useState } from "react";
|
|
2
|
-
import getMediaQueryWidthResolvers from "@koine/utils/getMediaQueryWidthResolvers";
|
|
3
|
-
import isUndefined from "@koine/utils/isUndefined";
|
|
4
|
-
import useIsomorphicLayoutEffect from "../hooks/useIsomorphicLayoutEffect";
|
|
5
|
-
/**
|
|
6
|
-
* Use `null` instead of `false` as default value, @see https://observablehq.com/@werehamster/avoiding-hydration-mismatch-when-using-react-hooks
|
|
7
|
-
*
|
|
8
|
-
* @param customBreakpoints
|
|
9
|
-
* @returns
|
|
10
|
-
*/ export function createUseMediaQueryWidth(customBreakpoints) {
|
|
11
|
-
const queryResolvers = getMediaQueryWidthResolvers(customBreakpoints);
|
|
12
|
-
return function useMediaQueryWidth(media, serverValue) {
|
|
13
|
-
const definition = media.substring(1);
|
|
14
|
-
let [rule, ruleBreakpoint] = definition.split("-");
|
|
15
|
-
if (isUndefined(ruleBreakpoint)) {
|
|
16
|
-
ruleBreakpoint = rule;
|
|
17
|
-
}
|
|
18
|
-
if (isUndefined(rule)) {
|
|
19
|
-
rule = "min";
|
|
20
|
-
}
|
|
21
|
-
// with the hook creator approach these breakpoint types cannot be deduced
|
|
22
|
-
// const [br1, br2] = ruleBreakpoint.split("-") as Split<
|
|
23
|
-
// typeof ruleBreakpoint,
|
|
24
|
-
// "-"
|
|
25
|
-
// >;
|
|
26
|
-
const [br1, br2] = ruleBreakpoint.split("_");
|
|
27
|
-
const query = queryResolvers[rule](br1, br2);
|
|
28
|
-
const [matches, setMatches] = useState(isUndefined(serverValue) ? null : serverValue);
|
|
29
|
-
useIsomorphicLayoutEffect(()=>{
|
|
30
|
-
const mq = window.matchMedia(query);
|
|
31
|
-
const handleChange = (event)=>{
|
|
32
|
-
setMatches(event.matches);
|
|
33
|
-
};
|
|
34
|
-
setMatches(mq.matches);
|
|
35
|
-
// Safari < 14 can't use addEventListener on a MediaQueryList
|
|
36
|
-
// https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
|
|
37
|
-
if (!mq.addEventListener) {
|
|
38
|
-
// Update the state whenever the media query match state changes
|
|
39
|
-
mq.addListener(handleChange);
|
|
40
|
-
// Clean up on unmount and if the query changes
|
|
41
|
-
return ()=>{
|
|
42
|
-
mq.removeListener(handleChange);
|
|
43
|
-
};
|
|
44
|
-
}
|
|
45
|
-
mq.addEventListener("change", handleChange);
|
|
46
|
-
return ()=>{
|
|
47
|
-
mq.removeEventListener("change", handleChange);
|
|
48
|
-
};
|
|
49
|
-
}, [
|
|
50
|
-
query
|
|
51
|
-
]);
|
|
52
|
-
return matches;
|
|
53
|
-
};
|
|
54
|
-
}
|
|
55
|
-
export default createUseMediaQueryWidth; //// without creator it would be:
|
|
56
|
-
//// ---------------------------------------------------------------------------
|
|
57
|
-
// import { useState, useIsomorphicLayoutEffect, useMemo } from "react";
|
|
58
|
-
// import type { Split } from "@koine/utils";
|
|
59
|
-
// import isBrowser from "@koine/utils/isBrowser";
|
|
60
|
-
// import { breakpoints as themeBreakpoints } from "@/config/theme/breakpoints";
|
|
61
|
-
// import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect"
|
|
62
|
-
// type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
|
|
63
|
-
// type Breakpoints = Record<Breakpoint, number>;
|
|
64
|
-
// type MediaQuery =
|
|
65
|
-
// | `max:${Breakpoint}`
|
|
66
|
-
// | `min:${Breakpoint}`
|
|
67
|
-
// | `down:${Breakpoint}`
|
|
68
|
-
// | `up:${Breakpoint}`
|
|
69
|
-
// | `between:${Breakpoint}-${Breakpoint}`
|
|
70
|
-
// | `only:${Breakpoint}`;
|
|
71
|
-
// const breakpoints: Breakpoints = {
|
|
72
|
-
// xs: 0,
|
|
73
|
-
// ...themeBreakpoints,
|
|
74
|
-
// };
|
|
75
|
-
// const sortedBreakpointsNames = (
|
|
76
|
-
// Object.keys(breakpoints).map((key) => {
|
|
77
|
-
// const br = key as keyof typeof breakpoints;
|
|
78
|
-
// return [br, breakpoints[br]];
|
|
79
|
-
// }) as [Breakpoint, number][]
|
|
80
|
-
// )
|
|
81
|
-
// .sort((a, b) => a[1] - b[1])
|
|
82
|
-
// .map((item) => item[0]);
|
|
83
|
-
// const getNextBreakpoint = (breakpoint: Breakpoint) => {
|
|
84
|
-
// const index = sortedBreakpointsNames.indexOf(breakpoint);
|
|
85
|
-
// return sortedBreakpointsNames[index + 1];
|
|
86
|
-
// };
|
|
87
|
-
// /**
|
|
88
|
-
// * It behaves the same as `(min-width: ${value}px)`
|
|
89
|
-
// * where value is the given breakpoint value.
|
|
90
|
-
// * For ease of use this can be used both as a function `min("md")` and as an
|
|
91
|
-
// * object literal `min.md`.
|
|
92
|
-
// */
|
|
93
|
-
// const min = (br: Breakpoint) => `(min-width: ${breakpoints[br]}px)`;
|
|
94
|
-
// /**
|
|
95
|
-
// * It behaves the same as `(max-width: ${value}px)`
|
|
96
|
-
// * where value is the given breakpoint value.
|
|
97
|
-
// * For ease of use this can be used both as a function `max("md")` and as an
|
|
98
|
-
// * object literal `max.md`.
|
|
99
|
-
// */
|
|
100
|
-
// const max = (br: Breakpoint) => `(max-width: ${breakpoints[br] - 0.02}px)`;
|
|
101
|
-
// /**
|
|
102
|
-
// * It behaves the same as `min`
|
|
103
|
-
// * @inheritdoc {max}
|
|
104
|
-
// */
|
|
105
|
-
// const up = min;
|
|
106
|
-
// /**
|
|
107
|
-
// * It behaves similarly to `max` but you will use the "next" breakpoint,
|
|
108
|
-
// * specifying CSS that will apply from the given breakpoint and down.
|
|
109
|
-
// */
|
|
110
|
-
// const down = (br: Breakpoint) => {
|
|
111
|
-
// const brNext = getNextBreakpoint(br);
|
|
112
|
-
// // TODO: if br does not exists otherwise throw Error
|
|
113
|
-
// return brNext && `(max-width: ${breakpoints[brNext] - 0.02}px)`;
|
|
114
|
-
// };
|
|
115
|
-
// /**
|
|
116
|
-
// * Media query between the two given breakpoints
|
|
117
|
-
// */
|
|
118
|
-
// const between = (br1: Breakpoint, br2?: Breakpoint) => {
|
|
119
|
-
// return br2
|
|
120
|
-
// ? `(min-width: ${breakpoints[br1]}px) and (max-width: ${
|
|
121
|
-
// breakpoints[br2] - 0.02
|
|
122
|
-
// }px)`
|
|
123
|
-
// : min(br1);
|
|
124
|
-
// };
|
|
125
|
-
// /**
|
|
126
|
-
// * Media query to apply from the given breakpoint until the next, just for its
|
|
127
|
-
// * full range
|
|
128
|
-
// */
|
|
129
|
-
// const only = (br: Breakpoint) => {
|
|
130
|
-
// const brNext = getNextBreakpoint(br);
|
|
131
|
-
// return brNext ? between(br, brNext) : min(br);
|
|
132
|
-
// };
|
|
133
|
-
// const queryResolvers = {
|
|
134
|
-
// max,
|
|
135
|
-
// min,
|
|
136
|
-
// down,
|
|
137
|
-
// up,
|
|
138
|
-
// between,
|
|
139
|
-
// only,
|
|
140
|
-
// };
|
|
141
|
-
// export function useMqWidth(media: MediaQuery) {
|
|
142
|
-
// const [rule = "min", ruleBreakpoint] = media.split(":") as Split<
|
|
143
|
-
// MediaQuery,
|
|
144
|
-
// ":"
|
|
145
|
-
// >;
|
|
146
|
-
// const [br1, br2] = ruleBreakpoint.split("-") as Split<
|
|
147
|
-
// typeof ruleBreakpoint,
|
|
148
|
-
// "-"
|
|
149
|
-
// >;
|
|
150
|
-
// const query = queryResolvers[rule](br1, br2);
|
|
151
|
-
// const mq = useMemo(
|
|
152
|
-
// () => (isBrowser ? window.matchMedia(query) : { matches: false }),
|
|
153
|
-
// [query]
|
|
154
|
-
// );
|
|
155
|
-
// const [matches, setMatches] = useState(mq.matches);
|
|
156
|
-
// useIsomorphicLayoutEffect(() => {
|
|
157
|
-
// const mq = window.matchMedia(query);
|
|
158
|
-
// const handleChange = (event: MediaQueryListEvent) => {
|
|
159
|
-
// setMatches(event.matches);
|
|
160
|
-
// };
|
|
161
|
-
// setMatches(mq.matches);
|
|
162
|
-
// // Safari < 14 can't use addEventListener on a MediaQueryList
|
|
163
|
-
// // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
|
|
164
|
-
// if (!mq.addEventListener) {
|
|
165
|
-
// // Update the state whenever the media query match state changes
|
|
166
|
-
// mq.addListener(handleChange);
|
|
167
|
-
// // Clean up on unmount and if the query changes
|
|
168
|
-
// return () => {
|
|
169
|
-
// mq.removeListener(handleChange);
|
|
170
|
-
// };
|
|
171
|
-
// }
|
|
172
|
-
// mq.addEventListener("change", handleChange);
|
|
173
|
-
// return () => {
|
|
174
|
-
// mq.removeEventListener("change", handleChange);
|
|
175
|
-
// };
|
|
176
|
-
// }, [query]);
|
|
177
|
-
// return matches;
|
|
178
|
-
// }
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React, { createElement } from "react";
|
|
2
|
-
export const extendComponent = (component, defaultProps)=>{
|
|
3
|
-
// FIXME: check if we need to forwardRef or not
|
|
4
|
-
const NewComponent = (props)=>createElement(component, props);
|
|
5
|
-
// const NewComponent = forwardRef<React.ComponentProps<Component>, Component>(
|
|
6
|
-
// (props, ref) => createElement(component, { ...props, ref })
|
|
7
|
-
// );
|
|
8
|
-
return Object.assign(NewComponent, {
|
|
9
|
-
...defaultProps,
|
|
10
|
-
defaultProps
|
|
11
|
-
});
|
|
12
|
-
};
|
|
13
|
-
export default extendComponent;
|
package/helpers/index.d.ts
DELETED
package/helpers/index.mjs
DELETED
package/helpers/mergeRefs.d.ts
DELETED
package/helpers/mergeRefs.mjs
DELETED
package/hooks/index.d.ts
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
export { useAsyncFn, type UseAsyncFnReturn, type UseAsyncState, } from "./useAsyncFn";
|
|
2
|
-
export { useDateLocale } from "./useDateLocale";
|
|
3
|
-
export { useFirstMountState } from "./useFirstMountState";
|
|
4
|
-
export { useFixedOffset } from "./useFixedOffset";
|
|
5
|
-
export { useFocus } from "./useFocus";
|
|
6
|
-
export { useInterval } from "./useInterval";
|
|
7
|
-
export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
|
|
8
|
-
export { useKeyUp } from "./useKeyUp";
|
|
9
|
-
export { useMeasure, type UseMeasureOptions, type UseMeasureReturn, } from "./useMeasure";
|
|
10
|
-
export { useMountedState } from "./useMountedState";
|
|
11
|
-
export { useNavigateAway, type UseNavigateAwayHandler, } from "./useNavigateAway";
|
|
12
|
-
export { usePrevious } from "./usePrevious";
|
|
13
|
-
export { usePreviousRef } from "./usePreviousRef";
|
|
14
|
-
export { useScrollPosition } from "./useScrollPosition";
|
|
15
|
-
export { useScrollThreshold } from "./useScrollThreshold";
|
|
16
|
-
export { useSmoothScroll } from "./useSmoothScroll";
|
|
17
|
-
export { useSpinDelay } from "./useSpinDelay";
|
|
18
|
-
export { useTraceUpdate } from "./useTraceUpdate";
|
|
19
|
-
export { useUpdateEffect } from "./useUpdateEffect";
|
|
20
|
-
export { useWindowSize } from "./useWindowSize";
|
package/hooks/index.mjs
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
export { useAsyncFn } from "./useAsyncFn";
|
|
2
|
-
export { useDateLocale } from "./useDateLocale";
|
|
3
|
-
export { useFirstMountState } from "./useFirstMountState";
|
|
4
|
-
export { useFixedOffset } from "./useFixedOffset";
|
|
5
|
-
export { useFocus } from "./useFocus";
|
|
6
|
-
export { useInterval } from "./useInterval";
|
|
7
|
-
export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
|
|
8
|
-
export { useKeyUp } from "./useKeyUp";
|
|
9
|
-
export { useMeasure } from "./useMeasure";
|
|
10
|
-
export { useMountedState } from "./useMountedState";
|
|
11
|
-
export { useNavigateAway } from "./useNavigateAway";
|
|
12
|
-
export { usePrevious } from "./usePrevious";
|
|
13
|
-
export { usePreviousRef } from "./usePreviousRef";
|
|
14
|
-
export { useScrollPosition } from "./useScrollPosition";
|
|
15
|
-
export { useScrollThreshold } from "./useScrollThreshold";
|
|
16
|
-
// export { useScrollTo } from "./useScrollTo";
|
|
17
|
-
export { useSmoothScroll } from "./useSmoothScroll";
|
|
18
|
-
export { useSpinDelay } from "./useSpinDelay";
|
|
19
|
-
export { useTraceUpdate } from "./useTraceUpdate";
|
|
20
|
-
export { useUpdateEffect } from "./useUpdateEffect";
|
|
21
|
-
export { useWindowSize } from "./useWindowSize";
|