@koine/react 2.0.0-beta.12 → 2.0.0-beta.15
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/Alert/Alert.js +10 -0
- package/Alert/index.d.ts +1 -1
- package/Alert/index.js +1 -0
- package/Animations/Reveal.d.ts +1 -2
- package/Animations/Reveal.js +16 -0
- package/Animations/Underline.js +5 -0
- package/Animations/index.d.ts +3 -3
- package/Animations/index.js +3 -0
- package/Animations/useReveal.d.ts +0 -21
- package/Animations/useReveal.js +42 -0
- package/Autocomplete/AutocompleteDownshift.js +1 -0
- package/Autocomplete/AutocompleteDownshiftMultiselect.js +1 -0
- package/Autocomplete/AutocompleteMui.d.ts +2 -27
- package/Autocomplete/AutocompleteMui.js +93 -0
- package/Autocomplete/AutocompleteReach.js +1 -0
- package/Autocomplete/components.d.ts +0 -5
- package/Autocomplete/components.js +26 -0
- package/Autocomplete/helpers.d.ts +1 -1
- package/Autocomplete/helpers.js +17 -0
- package/Autocomplete/index.d.ts +2 -2
- package/Autocomplete/index.js +1 -0
- package/Bg/BgColor.d.ts +1 -20
- package/Bg/BgColor.js +16 -0
- package/Bg/BgPhoto.d.ts +1 -6
- package/Bg/BgPhoto.js +16 -0
- package/Bg/BgSvg.d.ts +0 -3
- package/Bg/BgSvg.js +9 -0
- package/Bg/index.d.ts +3 -3
- package/Bg/index.js +3 -0
- package/Breadcrumbs/Breadcrumbs.d.ts +1 -1
- package/Breadcrumbs/Breadcrumbs.js +27 -0
- package/Breadcrumbs/index.d.ts +1 -1
- package/Breadcrumbs/index.js +1 -0
- package/Buttons/Button.d.ts +0 -4
- package/Buttons/Button.js +10 -0
- package/Buttons/ButtonComposite.d.ts +3 -4
- package/Buttons/ButtonComposite.js +28 -0
- package/Buttons/ButtonFab.d.ts +1 -2
- package/Buttons/ButtonFab.js +6 -0
- package/Buttons/ButtonLink.d.ts +3 -3
- package/Buttons/ButtonLink.js +11 -0
- package/Buttons/IconButton.d.ts +1 -2
- package/Buttons/IconButton.js +7 -0
- package/Buttons/index.d.ts +5 -5
- package/Buttons/index.js +5 -0
- package/Calendar/CalendarDaygridCell.d.ts +3 -4
- package/Calendar/CalendarDaygridCell.js +46 -0
- package/Calendar/CalendarDaygridNav.d.ts +2 -2
- package/Calendar/CalendarDaygridNav.js +23 -0
- package/Calendar/CalendarDaygridTable.d.ts +3 -3
- package/Calendar/CalendarDaygridTable.js +45 -0
- package/Calendar/CalendarLegend.d.ts +2 -3
- package/Calendar/CalendarLegend.js +8 -0
- package/Calendar/calendar-api-google.d.ts +1 -9
- package/Calendar/calendar-api-google.js +126 -0
- package/Calendar/index.d.ts +6 -6
- package/Calendar/index.js +6 -0
- package/Calendar/types.d.ts +0 -19
- package/Calendar/types.js +1 -0
- package/Calendar/useCalendar.d.ts +4 -19
- package/Calendar/useCalendar.js +176 -0
- package/Calendar/utils.d.ts +1 -1
- package/Calendar/utils.js +185 -0
- package/Carousel/Carousel.js +1 -0
- package/Carousel/CarouselCss.d.ts +1 -23
- package/Carousel/CarouselCss.js +19 -0
- package/Carousel/index.d.ts +1 -1
- package/Carousel/index.js +1 -0
- package/Collapsable/Collapsable.js +1 -0
- package/Collapsable/CollapsableReach.d.ts +0 -6
- package/Collapsable/CollapsableReach.js +1 -0
- package/Collapsable/index.d.ts +1 -1
- package/Collapsable/index.js +1 -0
- package/Debug/Debug.js +9 -0
- package/Debug/index.d.ts +1 -1
- package/Debug/index.js +1 -0
- package/Details/Details.d.ts +0 -6
- package/Details/Details.js +52 -0
- package/Details/index.d.ts +1 -1
- package/Details/index.js +1 -0
- package/Dialog/DialogMui.d.ts +1 -3
- package/Dialog/DialogMui.js +39 -0
- package/Dialog/css/bare.d.ts +1 -2
- package/Dialog/css/bare.js +20 -0
- package/Dialog/index.d.ts +2 -2
- package/Dialog/index.js +1 -0
- package/Dialog/m/bare.js +3 -0
- package/Dialog/m/basic.d.ts +1 -1
- package/Dialog/m/basic.js +28 -0
- package/Dialog/m/index.d.ts +1 -2
- package/Dialog/m/index.js +4 -0
- package/Dialog/sc/bare.d.ts +2 -12
- package/Dialog/sc/bare.js +31 -0
- package/Dialog/sc/framer.d.ts +1 -2
- package/Dialog/sc/framer.js +16 -0
- package/Dialog/sc/framerMaterial.js +16 -0
- package/Dialog/sc/material.d.ts +1 -2
- package/Dialog/sc/material.js +21 -0
- package/Dialog/tw/bare.d.ts +2 -17
- package/Dialog/tw/bare.js +28 -0
- package/Dialog/tw/elegant.d.ts +1 -2
- package/Dialog/tw/elegant.js +20 -0
- package/Dialog/tw/framer.d.ts +1 -2
- package/Dialog/tw/framer.js +16 -0
- package/Dialog/tw/framerMaterial.js +16 -0
- package/Dialog/tw/material.d.ts +1 -2
- package/Dialog/tw/material.js +20 -0
- package/Editor/Editor--tiptap.js +26 -0
- package/Editor/components.js +10 -0
- package/Editor/index.d.ts +1 -1
- package/Editor/index.js +1 -0
- package/FaviconTags.d.ts +0 -10
- package/FaviconTags.js +6 -0
- package/Form/Form.d.ts +1 -14
- package/Form/Form.js +60 -0
- package/Form/index.d.ts +1 -1
- package/Form/index.js +1 -0
- package/Form/sc/bare.d.ts +1 -2
- package/Form/sc/bare.js +20 -0
- package/Forms/Checkbox/Checkbox.d.ts +1 -5
- package/Forms/Checkbox/Checkbox.js +15 -0
- package/Forms/Checkbox/index.d.ts +1 -1
- package/Forms/Checkbox/index.js +1 -0
- package/Forms/Feedback/Feedback.js +9 -0
- package/Forms/Feedback/index.d.ts +1 -1
- package/Forms/Feedback/index.js +1 -0
- package/Forms/Field/Field.d.ts +1 -19
- package/Forms/Field/Field.js +25 -0
- package/Forms/Field/FieldControl.d.ts +2 -14
- package/Forms/Field/FieldControl.js +35 -0
- package/Forms/Field/FieldHint.js +4 -0
- package/Forms/Field/index.d.ts +2 -2
- package/Forms/Field/index.js +2 -0
- package/Forms/Input/Input.d.ts +1 -2
- package/Forms/Input/Input.js +16 -0
- package/Forms/Input/index.d.ts +1 -1
- package/Forms/Input/index.js +1 -0
- package/Forms/InputGroup/InputGroup.d.ts +1 -2
- package/Forms/InputGroup/InputGroup.js +15 -0
- package/Forms/InputGroup/index.d.ts +1 -1
- package/Forms/InputGroup/index.js +1 -0
- package/Forms/Label/Label.js +6 -0
- package/Forms/Label/index.d.ts +1 -1
- package/Forms/Label/index.js +1 -0
- package/Forms/Password/Password.d.ts +1 -2
- package/Forms/Password/Password.js +17 -0
- package/Forms/Password/index.d.ts +1 -1
- package/Forms/Password/index.js +1 -0
- package/Forms/Radio/Radio.d.ts +1 -2
- package/Forms/Radio/Radio.js +25 -0
- package/Forms/Radio/index.d.ts +1 -1
- package/Forms/Radio/index.js +1 -0
- package/Forms/Switch/Switch.d.ts +1 -5
- package/Forms/Switch/Switch.js +17 -0
- package/Forms/Switch/index.d.ts +1 -1
- package/Forms/Switch/index.js +1 -0
- package/Forms/Textarea/Textarea.d.ts +1 -2
- package/Forms/Textarea/Textarea.js +12 -0
- package/Forms/Textarea/TextareaRich.d.ts +1 -2
- package/Forms/Textarea/TextareaRich.js +26 -0
- package/Forms/Textarea/index.d.ts +2 -2
- package/Forms/Textarea/index.js +2 -0
- package/Forms/Toggle/Toggle-tailwind.js +1 -0
- package/Forms/Toggle/Toggle.d.ts +0 -1
- package/Forms/Toggle/Toggle.js +25 -0
- package/Forms/Toggle/index.d.ts +1 -1
- package/Forms/Toggle/index.js +1 -0
- package/Forms/Toggle/useToggle-tailwind.js +1 -0
- package/Forms/Toggle/useToggle.d.ts +1 -31
- package/Forms/Toggle/useToggle.js +85 -0
- package/Forms/antispam.d.ts +0 -20
- package/Forms/antispam.js +31 -0
- package/Forms/helpers.d.ts +0 -8
- package/Forms/helpers.js +36 -0
- package/Forms/index.d.ts +15 -15
- package/Forms/index.js +15 -0
- package/Forms/styles.d.ts +0 -6
- package/Forms/styles.js +19 -0
- package/Gauge/Gauge.d.ts +0 -1
- package/Gauge/Gauge.js +1 -0
- package/Grid/Grid.d.ts +1 -10
- package/Grid/Grid.js +52 -0
- package/Grid/index.d.ts +1 -1
- package/Grid/index.js +1 -0
- package/Hamburger/Hamburger.d.ts +0 -1
- package/Hamburger/Hamburger.js +47 -0
- package/Hamburger/index.d.ts +1 -1
- package/Hamburger/index.js +1 -0
- package/Header/index.d.ts +1 -1
- package/Header/index.js +1 -0
- package/Header/useHeader.d.ts +0 -4
- package/Header/useHeader.js +31 -0
- package/Hidden/Hidden.d.ts +1 -1
- package/Hidden/Hidden.js +10 -0
- package/Hidden/index.d.ts +1 -1
- package/Hidden/index.js +1 -0
- package/Img/index.d.ts +1 -1
- package/Img/index.js +1 -0
- package/Img/sc/bare.js +4 -0
- package/Img/types.js +1 -0
- package/Link/Link.js +4 -0
- package/Link/LinkBlank.js +15 -0
- package/Link/index.d.ts +2 -2
- package/Link/index.js +2 -0
- package/Menu/Menu.js +4 -0
- package/Menu/MenuMui.js +1 -0
- package/Menu/index.d.ts +1 -1
- package/Menu/index.js +1 -0
- package/MenuItem/MenuItem.js +4 -0
- package/MenuItem/MenuItemMui.js +1 -0
- package/MenuItem/index.d.ts +1 -1
- package/MenuItem/index.js +1 -0
- package/MenuItem/useMenuItem.js +42 -0
- package/Meta/Meta.d.ts +0 -10
- package/Meta/Meta.js +6 -0
- package/Meta/index.d.ts +2 -2
- package/Meta/index.js +2 -0
- package/NoJs/NoJs.js +7 -0
- package/NoJs/index.d.ts +2 -2
- package/NoJs/index.js +2 -0
- package/Pagination/PaginationNav.d.ts +1 -9
- package/Pagination/PaginationNav.js +48 -0
- package/Pagination/PaginationResults.js +11 -0
- package/Pagination/index.d.ts +2 -2
- package/Pagination/index.js +2 -0
- package/Pill/Pill.js +7 -0
- package/Pill/index.d.ts +1 -1
- package/Pill/index.js +1 -0
- package/Progress/ProgressCircular.d.ts +1 -7
- package/Progress/ProgressCircular.js +12 -0
- package/Progress/ProgressLinear.d.ts +1 -8
- package/Progress/ProgressLinear.js +21 -0
- package/Progress/ProgressOverlay.js +23 -0
- package/Progress/index.d.ts +3 -3
- package/Progress/index.js +3 -0
- package/Rating/Rating.d.ts +0 -8
- package/Rating/Rating.js +43 -0
- package/Rating/index.d.ts +1 -4
- package/Rating/index.js +45 -0
- package/Select/SelectDownshift.d.ts +1 -1
- package/Select/SelectDownshift.js +1 -0
- package/Select/components.js +12 -0
- package/Select/index.d.ts +2 -2
- package/Select/index.js +1 -0
- package/Sidebar/Sidebar.js +23 -0
- package/Sidebar/index.d.ts +1 -1
- package/Sidebar/index.js +1 -0
- package/Spacing/Spacing.d.ts +1 -14
- package/Spacing/Spacing.js +32 -0
- package/Spacing/index.d.ts +1 -1
- package/Spacing/index.js +1 -0
- package/Sticky/Sticky.js +1 -0
- package/Sticky/StickyCss.js +6 -0
- package/Sticky/index.d.ts +1 -1
- package/Sticky/index.js +1 -0
- package/Tabs/TabsMui.d.ts +2 -3
- package/Tabs/TabsMui.js +30 -0
- package/Tabs/index.d.ts +1 -1
- package/Tabs/index.js +1 -0
- package/Tabs/sc/bare.d.ts +0 -5
- package/Tabs/sc/bare.js +1 -0
- package/Tabs/tw/bare.d.ts +1 -2
- package/Tabs/tw/bare.js +16 -0
- package/Tabs/tw/material.d.ts +1 -2
- package/Tabs/tw/material.js +18 -0
- package/Tabs/useTabs.d.ts +0 -22
- package/Tabs/useTabs.js +43 -0
- package/Typography/CopyPasteVisible.js +4 -0
- package/Typography/Native.js +14 -0
- package/Typography/ReadMore.d.ts +0 -2
- package/Typography/ReadMore.js +42 -0
- package/Typography/TextLoop.js +45 -0
- package/Typography/TypeStairs.js +42 -0
- package/Typography/index.d.ts +5 -5
- package/Typography/index.js +5 -0
- package/css/index.d.ts +2 -2
- package/css/index.js +2 -0
- package/helpers/classed.d.ts +0 -19
- package/helpers/classed.js +43 -0
- package/helpers/createUseMediaQueryWidth.d.ts +0 -6
- package/helpers/createUseMediaQueryWidth.js +39 -0
- package/helpers/extend-component.d.ts +0 -11
- package/helpers/extend-component.js +9 -0
- package/helpers/index.d.ts +4 -4
- package/helpers/index.js +4 -0
- package/helpers/{mergeRefs.mjs → mergeRefs.js} +4 -3
- package/hooks/index.d.ts +20 -20
- package/hooks/index.js +20 -0
- package/hooks/types.d.ts +0 -6
- package/hooks/types.js +1 -0
- package/hooks/useAsyncFn.d.ts +1 -4
- package/hooks/useAsyncFn.js +33 -0
- package/hooks/useDateLocale.d.ts +0 -6
- package/hooks/useDateLocale.js +28 -0
- package/hooks/useFirstMountState.d.ts +0 -3
- package/hooks/useFirstMountState.js +10 -0
- package/hooks/useFixedOffset.d.ts +0 -9
- package/hooks/useFixedOffset.js +45 -0
- package/hooks/useFocus.d.ts +0 -3
- package/hooks/useFocus.js +9 -0
- package/hooks/useInterval.d.ts +0 -5
- package/hooks/useInterval.js +22 -0
- package/hooks/useIsomorphicLayoutEffect.d.ts +0 -3
- package/hooks/useIsomorphicLayoutEffect.js +6 -0
- package/hooks/useKeyUp.js +18 -0
- package/hooks/useMeasure.d.ts +0 -5
- package/hooks/useMeasure.js +134 -0
- package/hooks/useMountedState.d.ts +0 -3
- package/hooks/useMountedState.js +13 -0
- package/hooks/useNavigateAway.d.ts +0 -29
- package/hooks/useNavigateAway.js +25 -0
- package/hooks/usePrevious.d.ts +0 -3
- package/hooks/usePrevious.js +9 -0
- package/hooks/{usePreviousRef.mjs → usePreviousRef.js} +2 -2
- package/hooks/useScrollPosition.d.ts +0 -7
- package/hooks/useScrollPosition.js +61 -0
- package/hooks/useScrollThreshold.js +26 -0
- package/hooks/useScrollTo.js +22 -0
- package/hooks/useSmoothScroll.d.ts +0 -6
- package/hooks/useSmoothScroll.js +33 -0
- package/hooks/useSpinDelay.d.ts +0 -12
- package/hooks/useSpinDelay.js +38 -0
- package/hooks/useTraceUpdate.d.ts +0 -3
- package/hooks/useTraceUpdate.js +18 -0
- package/hooks/useUpdateEffect.d.ts +0 -3
- package/hooks/useUpdateEffect.js +11 -0
- package/hooks/useWindowSize.d.ts +0 -9
- package/hooks/useWindowSize.js +20 -0
- package/index.d.ts +1 -1
- package/index.js +1 -0
- package/m/MotionProvider.d.ts +0 -32
- package/m/MotionProvider.js +7 -0
- package/m/index.d.ts +1 -6
- package/m/index.js +1 -0
- package/package.json +624 -22
- package/sc/index.d.ts +30 -30
- package/sc/index.js +30 -0
- package/scm/index.d.ts +29 -29
- package/scm/index.js +29 -0
- package/shared/index.d.ts +8 -8
- package/shared/index.js +8 -0
- package/styles/Body.d.ts +0 -8
- package/styles/Body.js +5 -0
- package/styles/Global.d.ts +0 -13
- package/styles/Global.js +5 -0
- package/styles/index.d.ts +7 -7
- package/styles/index.js +7 -0
- package/styles/media.d.ts +1 -50
- package/styles/media.js +74 -0
- package/styles/spacing.d.ts +1 -2
- package/styles/spacing.js +45 -0
- package/styles/styled.d.ts +0 -4
- package/styles/styled.js +9 -0
- package/styles/theme--vanilla.js +46 -0
- package/styles/theme.d.ts +0 -29
- package/styles/theme.js +30 -0
- package/tw/index.d.ts +2 -2
- package/tw/index.js +2 -0
- package/twm/index.d.ts +2 -2
- package/twm/index.js +2 -0
- package/types.d.ts +1 -2
- package/types.js +1 -0
- package/Alert/Alert.mjs +0 -22
- package/Alert/Alert.stories.mjs +0 -18
- package/Alert/index.mjs +0 -1
- package/Animations/Reveal.mjs +0 -43
- package/Animations/Underline.mjs +0 -15
- package/Animations/index.mjs +0 -3
- package/Animations/useReveal.mjs +0 -73
- package/Autocomplete/AutocompleteDownshift.mjs +0 -157
- package/Autocomplete/AutocompleteDownshiftMultiselect.mjs +0 -352
- package/Autocomplete/AutocompleteMui.mjs +0 -219
- package/Autocomplete/AutocompleteReach.mjs +0 -111
- package/Autocomplete/components.mjs +0 -87
- package/Autocomplete/helpers.mjs +0 -35
- package/Autocomplete/index.mjs +0 -4
- package/Bg/BgColor.mjs +0 -42
- package/Bg/BgPhoto.mjs +0 -71
- package/Bg/BgSvg.mjs +0 -22
- package/Bg/index.mjs +0 -3
- package/Breadcrumbs/Breadcrumbs.mjs +0 -91
- package/Breadcrumbs/index.mjs +0 -1
- package/Buttons/Button.mjs +0 -78
- package/Buttons/ButtonComposite.mjs +0 -105
- package/Buttons/ButtonFab.mjs +0 -8
- package/Buttons/ButtonLink.mjs +0 -18
- package/Buttons/IconButton.mjs +0 -19
- 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.mjs +0 -6
- package/Calendar/types.mjs +0 -1
- package/Calendar/useCalendar.mjs +0 -225
- package/Calendar/utils.mjs +0 -209
- package/Carousel/Carousel.mjs +0 -377
- package/Carousel/CarouselCss.mjs +0 -44
- package/Carousel/index.mjs +0 -1
- package/Collapsable/Collapsable.mjs +0 -1
- package/Collapsable/CollapsableReach.mjs +0 -250
- package/Collapsable/index.mjs +0 -1
- package/Debug/Debug.mjs +0 -23
- package/Debug/index.mjs +0 -1
- package/Details/Details.mjs +0 -90
- package/Details/Details.stories.mjs +0 -21
- package/Details/index.mjs +0 -1
- package/Dialog/DialogMui.mjs +0 -105
- package/Dialog/DialogMui.stories.mjs +0 -20
- package/Dialog/css/bare.mjs +0 -19
- package/Dialog/css/index.stories.mjs +0 -75
- package/Dialog/index.mjs +0 -1
- package/Dialog/m/bare.mjs +0 -115
- package/Dialog/m/basic.mjs +0 -31
- package/Dialog/m/index.mjs +0 -4
- package/Dialog/sc/bare.mjs +0 -54
- package/Dialog/sc/framer.mjs +0 -16
- package/Dialog/sc/framerMaterial.mjs +0 -16
- package/Dialog/sc/index.stories.mjs +0 -48
- package/Dialog/sc/material.mjs +0 -41
- package/Dialog/tw/bare.mjs +0 -29
- package/Dialog/tw/elegant.mjs +0 -18
- package/Dialog/tw/framer.mjs +0 -16
- package/Dialog/tw/framerMaterial.mjs +0 -16
- package/Dialog/tw/index.stories.mjs +0 -83
- package/Dialog/tw/material.mjs +0 -18
- package/Editor/Editor--tiptap.mjs +0 -53
- package/Editor/components.mjs +0 -28
- package/Editor/index.mjs +0 -1
- package/FaviconTags.mjs +0 -64
- package/Form/Form.mjs +0 -95
- package/Form/index.mjs +0 -1
- package/Form/sc/bare.mjs +0 -29
- package/Forms/Checkbox/Checkbox.mjs +0 -36
- package/Forms/Checkbox/index.mjs +0 -1
- package/Forms/Feedback/Feedback.mjs +0 -14
- package/Forms/Feedback/index.mjs +0 -1
- package/Forms/Field/Field.mjs +0 -50
- package/Forms/Field/FieldControl.mjs +0 -67
- package/Forms/Field/FieldHint.mjs +0 -6
- package/Forms/Field/index.mjs +0 -2
- package/Forms/Input/Input.mjs +0 -36
- package/Forms/Input/index.mjs +0 -1
- package/Forms/InputGroup/InputGroup.mjs +0 -57
- package/Forms/InputGroup/index.mjs +0 -1
- package/Forms/Label/Label.mjs +0 -24
- package/Forms/Label/index.mjs +0 -1
- package/Forms/Password/Password.mjs +0 -53
- package/Forms/Password/index.mjs +0 -1
- package/Forms/Radio/Radio.mjs +0 -57
- package/Forms/Radio/index.mjs +0 -1
- package/Forms/Switch/Switch.mjs +0 -60
- package/Forms/Switch/index.mjs +0 -1
- package/Forms/Textarea/Textarea.mjs +0 -26
- package/Forms/Textarea/TextareaRich.mjs +0 -48
- package/Forms/Textarea/index.mjs +0 -2
- package/Forms/Toggle/Toggle-tailwind.mjs +0 -98
- package/Forms/Toggle/Toggle.mjs +0 -123
- package/Forms/Toggle/index.mjs +0 -1
- package/Forms/Toggle/useToggle-tailwind.mjs +0 -201
- package/Forms/Toggle/useToggle.mjs +0 -163
- package/Forms/antispam.mjs +0 -58
- package/Forms/helpers.mjs +0 -52
- package/Forms/index.mjs +0 -16
- package/Forms/styles.mjs +0 -61
- package/Gauge/Gauge.mjs +0 -101
- package/Grid/Grid.mjs +0 -75
- package/Grid/index.mjs +0 -1
- package/Hamburger/Hamburger.mjs +0 -79
- package/Hamburger/index.mjs +0 -1
- package/Header/index.mjs +0 -1
- package/Header/useHeader.mjs +0 -36
- package/Hidden/Hidden.mjs +0 -10
- package/Hidden/index.mjs +0 -1
- package/Img/index.mjs +0 -1
- package/Img/sc/bare.mjs +0 -36
- package/Img/types.mjs +0 -1
- package/Link/Link.mjs +0 -2
- package/Link/LinkBlank.mjs +0 -32
- package/Link/index.mjs +0 -2
- package/Menu/Menu.mjs +0 -11
- package/Menu/MenuMui.mjs +0 -164
- package/Menu/index.mjs +0 -1
- package/MenuItem/MenuItem.mjs +0 -20
- package/MenuItem/MenuItemMui.mjs +0 -31
- package/MenuItem/index.mjs +0 -1
- package/MenuItem/useMenuItem.mjs +0 -78
- package/Meta/Meta.mjs +0 -8
- package/Meta/index.mjs +0 -2
- package/NoJs/NoJs.mjs +0 -10
- package/NoJs/index.mjs +0 -2
- package/Pagination/PaginationNav.mjs +0 -122
- package/Pagination/PaginationResults.mjs +0 -34
- package/Pagination/index.mjs +0 -2
- package/Pill/Pill.mjs +0 -37
- package/Pill/index.mjs +0 -1
- package/Progress/ProgressCircular.mjs +0 -53
- package/Progress/ProgressLinear.mjs +0 -44
- package/Progress/ProgressOverlay.mjs +0 -64
- package/Progress/index.mjs +0 -3
- package/README.md +0 -1
- package/Rating/Rating.mjs +0 -154
- package/Rating/index.mjs +0 -62
- package/Select/SelectDownshift.mjs +0 -37
- package/Select/components.mjs +0 -25
- package/Select/index.mjs +0 -2
- package/Sidebar/Sidebar.mjs +0 -63
- package/Sidebar/index.mjs +0 -1
- package/Spacing/Spacing.mjs +0 -55
- package/Spacing/index.mjs +0 -1
- package/Sticky/Sticky.mjs +0 -218
- package/Sticky/StickyCss.mjs +0 -10
- package/Sticky/index.mjs +0 -1
- package/Tabs/TabsMui.mjs +0 -61
- package/Tabs/TabsMui.stories.mjs +0 -20
- package/Tabs/index.mjs +0 -1
- package/Tabs/sc/bare.mjs +0 -85
- package/Tabs/sc/index.stories.mjs +0 -0
- package/Tabs/tw/bare.mjs +0 -15
- package/Tabs/tw/index.stories.mjs +0 -25
- package/Tabs/tw/material.mjs +0 -14
- package/Tabs/useTabs.mjs +0 -46
- package/Typography/CopyPasteVisible.mjs +0 -6
- package/Typography/Native.mjs +0 -47
- package/Typography/ReadMore.mjs +0 -114
- package/Typography/TextLoop.mjs +0 -90
- package/Typography/TypeStairs.mjs +0 -61
- package/Typography/index.mjs +0 -5
- 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.mjs +0 -4
- package/hooks/index.mjs +0 -21
- 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.mjs +0 -14
- package/hooks/useInterval.mjs +0 -29
- package/hooks/useIsomorphicLayoutEffect.mjs +0 -6
- 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/useScrollPosition.mjs +0 -70
- package/hooks/useScrollThreshold.mjs +0 -33
- package/hooks/useScrollTo.mjs +0 -20
- 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.mjs +0 -32
- package/index.mjs +0 -4
- package/m/MotionProvider.mjs +0 -40
- package/m/index.mjs +0 -5
- package/sc/index.mjs +0 -31
- package/scm/index.mjs +0 -31
- package/shared/index.mjs +0 -43
- package/styles/Body.mjs +0 -16
- package/styles/Global.mjs +0 -49
- package/styles/index.mjs +0 -7
- package/styles/media.mjs +0 -151
- package/styles/spacing.mjs +0 -46
- package/styles/styled.mjs +0 -26
- package/styles/theme--vanilla.mjs +0 -65
- package/styles/theme.mjs +0 -38
- package/tw/index.mjs +0 -30
- package/twm/index.mjs +0 -30
- package/types.mjs +0 -1
- /package/m/{lite.mjs → lite.js} +0 -0
- /package/m/{max.mjs → max.js} +0 -0
package/Dialog/m/bare.mjs
DELETED
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
// FIXME: cannot build this
|
|
2
|
-
import { extendComponent } from "../../helpers";
|
|
3
|
-
const Dialog = ()=>null;
|
|
4
|
-
export const KoineDialog = extendComponent(Dialog, {}); // import { AnimatePresence, m } from "framer-motion";
|
|
5
|
-
// import { forwardRef, useMemo, useRef } from "react";
|
|
6
|
-
// import { MdClear as IconClose } from "react-icons/md";
|
|
7
|
-
// import { extendComponent } from "../../helpers";
|
|
8
|
-
// import {
|
|
9
|
-
// Backdrop,
|
|
10
|
-
// Body,
|
|
11
|
-
// Close,
|
|
12
|
-
// Container,
|
|
13
|
-
// Header,
|
|
14
|
-
// type KoineDialogProps,
|
|
15
|
-
// Paper,
|
|
16
|
-
// Root,
|
|
17
|
-
// } from "../DialogMui";
|
|
18
|
-
// import { mRootStyle } from "./index";
|
|
19
|
-
// // import { KoineDialog as _ } from "../DialogMui";
|
|
20
|
-
// export type { KoineDialogProps } from "../DialogMui";
|
|
21
|
-
// /**
|
|
22
|
-
// * About nested `AnimatePresence` and animated dialogs with framer @see:
|
|
23
|
-
// *
|
|
24
|
-
// * - https://github.com/framer/motion/issues/478
|
|
25
|
-
// * - https://codesandbox.io/s/clever-banzai-7km49?file=/src/Modal.js
|
|
26
|
-
// */
|
|
27
|
-
// const Dialog = forwardRef<HTMLDivElement, KoineDialogProps>(function Dialog(
|
|
28
|
-
// {
|
|
29
|
-
// children,
|
|
30
|
-
// title,
|
|
31
|
-
// $scrollPaper,
|
|
32
|
-
// Root,
|
|
33
|
-
// Backdrop,
|
|
34
|
-
// Container,
|
|
35
|
-
// Paper,
|
|
36
|
-
// Close,
|
|
37
|
-
// Header,
|
|
38
|
-
// Body,
|
|
39
|
-
// mBackdrop,
|
|
40
|
-
// mPaper,
|
|
41
|
-
// onClose,
|
|
42
|
-
// ...props
|
|
43
|
-
// },
|
|
44
|
-
// ref
|
|
45
|
-
// ) {
|
|
46
|
-
// const BackdropMotion: KoineDialogProps["Backdrop"] = useMemo(
|
|
47
|
-
// () => (props) =>
|
|
48
|
-
// (
|
|
49
|
-
// <AnimatePresence>
|
|
50
|
-
// {/* @ts-expect-error framer props collision... */}
|
|
51
|
-
// {props.open && <Backdrop {...mBackdrop} {...props} />}
|
|
52
|
-
// </AnimatePresence>
|
|
53
|
-
// ),
|
|
54
|
-
// [Backdrop, mBackdrop]
|
|
55
|
-
// );
|
|
56
|
-
// // FIXME: extract this logic either in a useDialog hook or in a useclickOutside hook
|
|
57
|
-
// // click handling is taken from
|
|
58
|
-
// // @see https://github.com/mui/material-ui/blob/c758b6c0b30f0831110458a746690b33147c45df/packages/mui-material/src/Dialog/Dialog.js#L205-L226
|
|
59
|
-
// const backdropClick = useRef<boolean | null>();
|
|
60
|
-
// const handleMouseDown: React.MouseEventHandler = (event) => {
|
|
61
|
-
// // We don't want to close the dialog when clicking the dialog content.
|
|
62
|
-
// // Make sure the event starts and ends on the same DOM element.
|
|
63
|
-
// backdropClick.current = event.target === event.currentTarget;
|
|
64
|
-
// };
|
|
65
|
-
// const handleBackdropClick: React.MouseEventHandler = (event) => {
|
|
66
|
-
// // Ignore the events not coming from the "backdrop".
|
|
67
|
-
// if (!backdropClick.current) {
|
|
68
|
-
// return;
|
|
69
|
-
// }
|
|
70
|
-
// backdropClick.current = null;
|
|
71
|
-
// // if (onBackdropClick) onBackdropClick(event);
|
|
72
|
-
// if (onClose) {
|
|
73
|
-
// onClose(event, "backdropClick");
|
|
74
|
-
// }
|
|
75
|
-
// };
|
|
76
|
-
// return (
|
|
77
|
-
// <Root
|
|
78
|
-
// keepMounted
|
|
79
|
-
// slots={{ backdrop: BackdropMotion }}
|
|
80
|
-
// onClick={handleBackdropClick}
|
|
81
|
-
// onClose={onClose}
|
|
82
|
-
// ref={ref}
|
|
83
|
-
// {...props}
|
|
84
|
-
// style={mRootStyle({ open: props.open, style: props.style })}
|
|
85
|
-
// >
|
|
86
|
-
// <Container $scrollPaper={$scrollPaper} onMouseDown={handleMouseDown}>
|
|
87
|
-
// <AnimatePresence>
|
|
88
|
-
// {props.open && (
|
|
89
|
-
// // @ts-expect-error framer props collision...
|
|
90
|
-
// <Paper
|
|
91
|
-
// {...mPaper}
|
|
92
|
-
// aria-label={title || ""}
|
|
93
|
-
// $scrollPaper={$scrollPaper}
|
|
94
|
-
// >
|
|
95
|
-
// {title && <Header>{title}</Header>}
|
|
96
|
-
// <Close onClick={onClose}>
|
|
97
|
-
// <IconClose />
|
|
98
|
-
// </Close>
|
|
99
|
-
// <Body>{children}</Body>
|
|
100
|
-
// </Paper>
|
|
101
|
-
// )}
|
|
102
|
-
// </AnimatePresence>
|
|
103
|
-
// </Container>
|
|
104
|
-
// </Root>
|
|
105
|
-
// );
|
|
106
|
-
// });
|
|
107
|
-
// export const KoineDialog = extendComponent(Dialog, {
|
|
108
|
-
// Root,
|
|
109
|
-
// Backdrop: m(Backdrop),
|
|
110
|
-
// Container,
|
|
111
|
-
// Paper: m(Paper),
|
|
112
|
-
// Close,
|
|
113
|
-
// Header,
|
|
114
|
-
// Body,
|
|
115
|
-
// });
|
package/Dialog/m/basic.mjs
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
export * from "./index";
|
|
2
|
-
export const dialogBackdropMotion = {
|
|
3
|
-
initial: {
|
|
4
|
-
opacity: 0
|
|
5
|
-
},
|
|
6
|
-
animate: {
|
|
7
|
-
backdropFilter: "blur(10px)",
|
|
8
|
-
opacity: 1
|
|
9
|
-
},
|
|
10
|
-
exit: {
|
|
11
|
-
backdropFilter: "blur(0px)",
|
|
12
|
-
opacity: 0
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
|
-
export const dialogPaperMotion = {
|
|
16
|
-
initial: {
|
|
17
|
-
// scale: .9,
|
|
18
|
-
translateY: -60,
|
|
19
|
-
opacity: 0
|
|
20
|
-
},
|
|
21
|
-
animate: {
|
|
22
|
-
// scale: 1,
|
|
23
|
-
translateY: 0,
|
|
24
|
-
opacity: 1
|
|
25
|
-
},
|
|
26
|
-
exit: {
|
|
27
|
-
// scale: 0.9,
|
|
28
|
-
translateY: 60,
|
|
29
|
-
opacity: 0
|
|
30
|
-
}
|
|
31
|
-
};
|
package/Dialog/m/index.mjs
DELETED
package/Dialog/sc/bare.mjs
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import styled from "styled-components";
|
|
2
|
-
import { IconButton } from "../../Buttons";
|
|
3
|
-
import { extendComponent } from "../../helpers";
|
|
4
|
-
import { inset0 } from "../../styles/styled";
|
|
5
|
-
import * as _ from "../DialogMui";
|
|
6
|
-
export const Root = styled(_.Root)`
|
|
7
|
-
z-index: 1300;
|
|
8
|
-
position: fixed;
|
|
9
|
-
${inset0}
|
|
10
|
-
`;
|
|
11
|
-
// export const Backdrop = (props) => {
|
|
12
|
-
// return <div {...props} />;
|
|
13
|
-
// }
|
|
14
|
-
export const Backdrop = styled(_.Backdrop)`
|
|
15
|
-
z-index: -1;
|
|
16
|
-
position: fixed;
|
|
17
|
-
${inset0}
|
|
18
|
-
backdrop-filter: blur(0px);
|
|
19
|
-
-webkit-tap-highlight-color: transparent;
|
|
20
|
-
`;
|
|
21
|
-
/**
|
|
22
|
-
* @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L64-L85
|
|
23
|
-
*/ export const Container = styled(_.Container)`
|
|
24
|
-
height: 100%;
|
|
25
|
-
outline: 0;
|
|
26
|
-
${(p)=>p.$scrollPaper ? "display: flex; justify-content: center; align-items: center;" : "overflow: hidden auto; text-align: center; &:after { content: ''; display: inline-block; vertical-align: middle; height: 100%; width: 0; }"}
|
|
27
|
-
`;
|
|
28
|
-
/**
|
|
29
|
-
* @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L104-L157
|
|
30
|
-
*/ export const Paper = styled(_.Paper)`
|
|
31
|
-
position: relative;
|
|
32
|
-
${(p)=>p.$scrollPaper ? "display: flex; flex-direction: column; max-height: calc(100%-64px);" : "display: inline-block; vertical-align: middle; text-align: initial;"}
|
|
33
|
-
`;
|
|
34
|
-
export const Close = styled(IconButton)`
|
|
35
|
-
position: absolute;
|
|
36
|
-
`;
|
|
37
|
-
export const Header = styled(_.Header)``;
|
|
38
|
-
/**
|
|
39
|
-
* @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/DialogContent/DialogContent.js#L29-L44
|
|
40
|
-
*/ export const Body = styled(_.Body)`
|
|
41
|
-
flex: 1 1 auto;
|
|
42
|
-
-webkit-overflow-scrolling: touch;
|
|
43
|
-
overflow-y: auto;
|
|
44
|
-
overflow: auto;
|
|
45
|
-
`;
|
|
46
|
-
export const KoineDialog = extendComponent(_.KoineDialog, {
|
|
47
|
-
Root,
|
|
48
|
-
Backdrop,
|
|
49
|
-
Container,
|
|
50
|
-
Paper,
|
|
51
|
-
Close,
|
|
52
|
-
Header,
|
|
53
|
-
Body
|
|
54
|
-
});
|
package/Dialog/sc/framer.mjs
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { m } from "framer-motion";
|
|
2
|
-
import { extendComponent } from "../../helpers";
|
|
3
|
-
import { KoineDialog as _ } from "../m/bare";
|
|
4
|
-
import { dialogBackdropMotion, dialogPaperMotion } from "../m/basic";
|
|
5
|
-
import { Backdrop, Body, Close, Container, Header, Paper, Root } from "./bare";
|
|
6
|
-
export const KoineDialog = extendComponent(_, {
|
|
7
|
-
Root,
|
|
8
|
-
Backdrop: m(Backdrop),
|
|
9
|
-
Container,
|
|
10
|
-
Paper: m(Paper),
|
|
11
|
-
Close,
|
|
12
|
-
Header,
|
|
13
|
-
Body,
|
|
14
|
-
mBackdrop: dialogBackdropMotion,
|
|
15
|
-
mPaper: dialogPaperMotion
|
|
16
|
-
});
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { m } from "framer-motion";
|
|
2
|
-
import { extendComponent } from "../../helpers";
|
|
3
|
-
import { KoineDialog as _ } from "../m/bare";
|
|
4
|
-
import { dialogBackdropMotion, dialogPaperMotion } from "../m/basic";
|
|
5
|
-
import { Backdrop, Body, Close, Container, Header, Paper, Root } from "./material";
|
|
6
|
-
export const KoineDialog = extendComponent(_, {
|
|
7
|
-
Root,
|
|
8
|
-
Backdrop: m(Backdrop),
|
|
9
|
-
Container,
|
|
10
|
-
Paper: m(Paper),
|
|
11
|
-
Close,
|
|
12
|
-
Header,
|
|
13
|
-
Body,
|
|
14
|
-
mBackdrop: dialogBackdropMotion,
|
|
15
|
-
mPaper: dialogPaperMotion
|
|
16
|
-
});
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { StoryDialog, decoratorFramer, storyDialogArgs, storyDialogMeta } from "@koine/stories";
|
|
3
|
-
import { KoineDialog as bareComp } from "./bare";
|
|
4
|
-
import { KoineDialog as framerComp } from "./framer";
|
|
5
|
-
import { KoineDialog as framerMaterialComp } from "./framerMaterial";
|
|
6
|
-
import { KoineDialog as materialComp } from "./material";
|
|
7
|
-
export default {
|
|
8
|
-
title: "Base/Dialog/Styled Components",
|
|
9
|
-
...storyDialogMeta
|
|
10
|
-
};
|
|
11
|
-
const bareTemplate = (args)=>{
|
|
12
|
-
return /*#__PURE__*/ _jsx(StoryDialog, {
|
|
13
|
-
...args,
|
|
14
|
-
Dialog: bareComp
|
|
15
|
-
});
|
|
16
|
-
};
|
|
17
|
-
export const bare = bareTemplate.bind({});
|
|
18
|
-
bare.args = storyDialogArgs;
|
|
19
|
-
const materialTemplate = (args)=>{
|
|
20
|
-
return /*#__PURE__*/ _jsx(StoryDialog, {
|
|
21
|
-
...args,
|
|
22
|
-
Dialog: materialComp
|
|
23
|
-
});
|
|
24
|
-
};
|
|
25
|
-
export const material = materialTemplate.bind({});
|
|
26
|
-
material.args = storyDialogArgs;
|
|
27
|
-
const framerTemplate = (args)=>{
|
|
28
|
-
return /*#__PURE__*/ _jsx(StoryDialog, {
|
|
29
|
-
...args,
|
|
30
|
-
Dialog: framerComp
|
|
31
|
-
});
|
|
32
|
-
};
|
|
33
|
-
export const framer = framerTemplate.bind({});
|
|
34
|
-
framer.decorators = [
|
|
35
|
-
decoratorFramer
|
|
36
|
-
];
|
|
37
|
-
framer.args = storyDialogArgs;
|
|
38
|
-
const framerMaterialTemplate = (args)=>{
|
|
39
|
-
return /*#__PURE__*/ _jsx(StoryDialog, {
|
|
40
|
-
...args,
|
|
41
|
-
Dialog: framerMaterialComp
|
|
42
|
-
});
|
|
43
|
-
};
|
|
44
|
-
export const framerMaterial = framerMaterialTemplate.bind({});
|
|
45
|
-
framerMaterial.decorators = [
|
|
46
|
-
decoratorFramer
|
|
47
|
-
];
|
|
48
|
-
framerMaterial.args = storyDialogArgs;
|
package/Dialog/sc/material.mjs
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import styled from "styled-components";
|
|
2
|
-
import { extendComponent } from "../../helpers";
|
|
3
|
-
import { KoineDialog as _ } from "./bare";
|
|
4
|
-
export const Root = styled(_.Root)``;
|
|
5
|
-
export const Backdrop = styled(_.Backdrop)`
|
|
6
|
-
background: rgba(0, 0, 0, 0.5);
|
|
7
|
-
filter: backdrop-blur(4px);
|
|
8
|
-
`;
|
|
9
|
-
export const Container = styled(_.Container)``;
|
|
10
|
-
export const Paper = styled(_.Paper)`
|
|
11
|
-
max-width: 640px;
|
|
12
|
-
margin: 64px;
|
|
13
|
-
border-radius: 4px;
|
|
14
|
-
background: white;
|
|
15
|
-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
|
16
|
-
`;
|
|
17
|
-
export const Close = styled(_.Close)`
|
|
18
|
-
position: absolute;
|
|
19
|
-
top: 0;
|
|
20
|
-
right: 0;
|
|
21
|
-
padding: 8px;
|
|
22
|
-
font-size: 2rem;
|
|
23
|
-
opacity: 0.5;
|
|
24
|
-
`;
|
|
25
|
-
export const Header = styled(_.Header)`
|
|
26
|
-
padding: 16px;
|
|
27
|
-
font-size: 1.25rem;
|
|
28
|
-
`;
|
|
29
|
-
export const Body = styled(_.Body)`
|
|
30
|
-
padding: 16px;
|
|
31
|
-
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
|
32
|
-
`;
|
|
33
|
-
export const KoineDialog = extendComponent(_, {
|
|
34
|
-
Root,
|
|
35
|
-
Backdrop,
|
|
36
|
-
Container,
|
|
37
|
-
Paper,
|
|
38
|
-
Close,
|
|
39
|
-
Header,
|
|
40
|
-
Body
|
|
41
|
-
});
|
package/Dialog/tw/bare.mjs
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { classed, extendComponent } from "../../helpers";
|
|
2
|
-
import * as _ from "../DialogMui";
|
|
3
|
-
export const Root = classed(_.Root)`< class="dialog fixed z-[1300] inset-0`;
|
|
4
|
-
export const Backdrop = classed(_.Backdrop)`< class="dialogBackdrop fixed -z-[1] inset-0 [-webkit-tap-highlight-color:transparent]`;
|
|
5
|
-
/**
|
|
6
|
-
* @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L64-L85
|
|
7
|
-
*/ export const Container = classed(_.Container)`< class="dialogContainer h-full outline-0 ${(p)=>p.$scrollPaper ? "flex justify-center items-center" : "overflow-y-auto overflow-x-hidden text-center [after:content:''] after:inline-block after:align-middle after:h-full after:w-0"}`;
|
|
8
|
-
/**
|
|
9
|
-
* @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L104-L157
|
|
10
|
-
*/ export const Paper = classed(_.Paper)`< class="dialogPaper relative ${(p)=>p.$scrollPaper ? "flex flex-col max-h-[calc(100%-64px)]" : "inline-block align-middle [text-align:initial]"}`;
|
|
11
|
-
export const Close = classed(_.Close)`< class="dialogClose`;
|
|
12
|
-
export const Header = classed(_.Header)`< class="dialogHeader`;
|
|
13
|
-
/**
|
|
14
|
-
* @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/DialogContent/DialogContent.js#L29-L44
|
|
15
|
-
* The arbitrary rule webkit-overflow-scrolling is to add iOS momentum scrolling for iOS < 13.0,
|
|
16
|
-
* this was removed from tailiwnd 2.0 on
|
|
17
|
-
*
|
|
18
|
-
* @see https://github.com/tailwindlabs/tailwindcss.com/issues/483
|
|
19
|
-
* @see https://v2.tailwindcss.com/docs/upgrading-to-v2#the-scrolling-touch-and-scrolling-auto-utilities-have-been-removed
|
|
20
|
-
*/ export const Body = classed(_.Body)`< class="dialogBody flex-1 basis-auto overflow-y-auto [-webkit-overflow-scrolling:touch]`;
|
|
21
|
-
export const KoineDialog = extendComponent(_.KoineDialog, {
|
|
22
|
-
Root,
|
|
23
|
-
Backdrop,
|
|
24
|
-
Container,
|
|
25
|
-
Paper,
|
|
26
|
-
Close,
|
|
27
|
-
Header,
|
|
28
|
-
Body
|
|
29
|
-
});
|
package/Dialog/tw/elegant.mjs
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { classed, extendComponent } from "../../helpers";
|
|
2
|
-
import { KoineDialog as _ } from "./bare";
|
|
3
|
-
export const Root = classed(_.Root)``;
|
|
4
|
-
export const Backdrop = classed(_.Backdrop)`< class="bg-white/[.5] backdrop-blur-sm`;
|
|
5
|
-
export const Container = classed(_.Container)``;
|
|
6
|
-
export const Paper = classed(_.Paper)`< class="bg-white shadow-xl m-8 max-w-screen-sm border border-gray-400`;
|
|
7
|
-
export const Close = classed(_.Close)`< class="absolute top-0 right-0 p-8 text-2xl opacity-20 hover:opacity-100 focus:opacity-100`;
|
|
8
|
-
export const Header = classed(_.Header)`< class="p-8 text-2xl bold italic`;
|
|
9
|
-
export const Body = classed(_.Body)`< class="p-8 pt-4`;
|
|
10
|
-
export const KoineDialog = extendComponent(_, {
|
|
11
|
-
Root,
|
|
12
|
-
Backdrop,
|
|
13
|
-
Container,
|
|
14
|
-
Paper,
|
|
15
|
-
Close,
|
|
16
|
-
Header,
|
|
17
|
-
Body
|
|
18
|
-
});
|
package/Dialog/tw/framer.mjs
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { m } from "framer-motion";
|
|
2
|
-
import { extendComponent } from "../../helpers";
|
|
3
|
-
import { KoineDialog as _ } from "../m/bare";
|
|
4
|
-
import { dialogBackdropMotion, dialogPaperMotion } from "../m/basic";
|
|
5
|
-
import { Backdrop, Body, Close, Container, Header, Paper, Root } from "./bare";
|
|
6
|
-
export const KoineDialog = extendComponent(_, {
|
|
7
|
-
Root,
|
|
8
|
-
Backdrop: m(Backdrop),
|
|
9
|
-
Container,
|
|
10
|
-
Paper: m(Paper),
|
|
11
|
-
Close,
|
|
12
|
-
Header,
|
|
13
|
-
Body,
|
|
14
|
-
mBackdrop: dialogBackdropMotion,
|
|
15
|
-
mPaper: dialogPaperMotion
|
|
16
|
-
});
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { m } from "framer-motion";
|
|
2
|
-
import { extendComponent } from "../../helpers";
|
|
3
|
-
import { KoineDialog as _ } from "../m/bare";
|
|
4
|
-
import { dialogBackdropMotion, dialogPaperMotion } from "../m/basic";
|
|
5
|
-
import { Backdrop, Body, Close, Container, Header, Paper, Root } from "./material";
|
|
6
|
-
export const KoineDialog = extendComponent(_, {
|
|
7
|
-
Root,
|
|
8
|
-
Backdrop: m(Backdrop),
|
|
9
|
-
Container,
|
|
10
|
-
Paper: m(Paper),
|
|
11
|
-
Close,
|
|
12
|
-
Header,
|
|
13
|
-
Body,
|
|
14
|
-
mBackdrop: dialogBackdropMotion,
|
|
15
|
-
mPaper: dialogPaperMotion
|
|
16
|
-
});
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { StoryDialog, decoratorFramer, storyDialogArgs, storyDialogMeta } from "@koine/stories";
|
|
3
|
-
import { classed } from "../../helpers";
|
|
4
|
-
import { KoineDialog as bareComp } from "./bare";
|
|
5
|
-
import { KoineDialog as framerComp } from "./framer";
|
|
6
|
-
import { KoineDialog as framerMaterialComp } from "./framerMaterial";
|
|
7
|
-
import { KoineDialog as materialComp } from "./material";
|
|
8
|
-
// import { KoineDialog as elegantComp } from "./elegant";
|
|
9
|
-
export default {
|
|
10
|
-
title: "Base/Dialog/Tailwind",
|
|
11
|
-
...storyDialogMeta
|
|
12
|
-
};
|
|
13
|
-
const bareTemplate = (args)=>{
|
|
14
|
-
return /*#__PURE__*/ _jsx(StoryDialog, {
|
|
15
|
-
...args,
|
|
16
|
-
Dialog: bareComp
|
|
17
|
-
});
|
|
18
|
-
};
|
|
19
|
-
export const bare = bareTemplate.bind({});
|
|
20
|
-
bare.args = storyDialogArgs;
|
|
21
|
-
const materialTemplate = (args)=>{
|
|
22
|
-
return /*#__PURE__*/ _jsx(StoryDialog, {
|
|
23
|
-
...args,
|
|
24
|
-
Dialog: materialComp
|
|
25
|
-
});
|
|
26
|
-
};
|
|
27
|
-
export const material = materialTemplate.bind({});
|
|
28
|
-
material.args = storyDialogArgs;
|
|
29
|
-
const framerTemplate = (args)=>{
|
|
30
|
-
return /*#__PURE__*/ _jsx(StoryDialog, {
|
|
31
|
-
...args,
|
|
32
|
-
Dialog: framerComp
|
|
33
|
-
});
|
|
34
|
-
};
|
|
35
|
-
export const framer = framerTemplate.bind({});
|
|
36
|
-
framer.decorators = [
|
|
37
|
-
decoratorFramer
|
|
38
|
-
];
|
|
39
|
-
framer.args = storyDialogArgs;
|
|
40
|
-
const framerMaterialTemplate = (args)=>{
|
|
41
|
-
return /*#__PURE__*/ _jsx(StoryDialog, {
|
|
42
|
-
...args,
|
|
43
|
-
Dialog: framerMaterialComp
|
|
44
|
-
});
|
|
45
|
-
};
|
|
46
|
-
export const framerMaterial = framerMaterialTemplate.bind({});
|
|
47
|
-
framerMaterial.decorators = [
|
|
48
|
-
decoratorFramer
|
|
49
|
-
];
|
|
50
|
-
framerMaterial.args = storyDialogArgs;
|
|
51
|
-
const customisedTemplate = (args)=>{
|
|
52
|
-
return /*#__PURE__*/ _jsx(StoryDialog, {
|
|
53
|
-
...args,
|
|
54
|
-
Dialog: framerComp
|
|
55
|
-
});
|
|
56
|
-
};
|
|
57
|
-
export const customised = customisedTemplate.bind({});
|
|
58
|
-
customised.decorators = [
|
|
59
|
-
decoratorFramer
|
|
60
|
-
];
|
|
61
|
-
customised.args = {
|
|
62
|
-
...storyDialogArgs,
|
|
63
|
-
$scrollPaper: true,
|
|
64
|
-
Backdrop: classed(framerComp.Backdrop)`< class="bg-sky-100/[.5]"`,
|
|
65
|
-
Paper: classed(framerComp.Paper)`< class="shadow-2xl m-8 max-w-screen-sm bg-blue-500 text-white rounded-3xl"`,
|
|
66
|
-
Close: classed(framerComp.Close)`< class="absolute lg:-right-8 lg:-top-8 p-4 text-4xl rounded-full bg-blue-300 hover:bg-blue-700 text-blue-800 hover:text-white"`,
|
|
67
|
-
Header: classed(framerComp.Header)`< class="font-mono font-bold text-3xl p-12 pb-6`,
|
|
68
|
-
Body: classed(framerComp.Body)`< class="px-12 pb-12 border-none"`,
|
|
69
|
-
mPaper: {
|
|
70
|
-
initial: {
|
|
71
|
-
scale: 0.9,
|
|
72
|
-
scaleX: 0
|
|
73
|
-
},
|
|
74
|
-
animate: {
|
|
75
|
-
scale: 1,
|
|
76
|
-
scaleX: 1
|
|
77
|
-
},
|
|
78
|
-
exit: {
|
|
79
|
-
scale: 0.9,
|
|
80
|
-
scaleX: 0
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
};
|
package/Dialog/tw/material.mjs
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { classed, extendComponent } from "../../helpers";
|
|
2
|
-
import { KoineDialog as _ } from "./bare";
|
|
3
|
-
export const Root = classed(_.Root)``;
|
|
4
|
-
export const Backdrop = classed(_.Backdrop)`< class="bg-black/[.5] backdrop-blur-sm`;
|
|
5
|
-
export const Container = classed(_.Container)``;
|
|
6
|
-
export const Paper = classed(_.Paper)`< class="rounded bg-white shadow-xl m-8 max-w-screen-sm`;
|
|
7
|
-
export const Close = classed(_.Close)`< class="absolute top-0 right-0 p-4 text-2xl opacity-50`;
|
|
8
|
-
export const Header = classed(_.Header)`< class="p-4 text-xl`;
|
|
9
|
-
export const Body = classed(_.Body)`< class="p-4 border-t border-gray-200`;
|
|
10
|
-
export const KoineDialog = extendComponent(_, {
|
|
11
|
-
Root,
|
|
12
|
-
Backdrop,
|
|
13
|
-
Container,
|
|
14
|
-
Paper,
|
|
15
|
-
Close,
|
|
16
|
-
Header,
|
|
17
|
-
Body
|
|
18
|
-
});
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { EditorContent, useEditor } from "@tiptap/react";
|
|
3
|
-
import StarterKit from "@tiptap/starter-kit";
|
|
4
|
-
import { useCallback } from "react";
|
|
5
|
-
import { EditorBarBtn, EditorBarRoot, EditorGlobalStyles, EditorIconBold, EditorIconItalic, EditorRoot } from "./components";
|
|
6
|
-
export const EditorBar = ({ editor })=>{
|
|
7
|
-
const handleClick = useCallback((e, type)=>{
|
|
8
|
-
e.preventDefault();
|
|
9
|
-
// @ts-expect-error FIXME: cannot build this
|
|
10
|
-
editor?.chain().focus()[`toggle${type}`]().run();
|
|
11
|
-
}, [
|
|
12
|
-
editor
|
|
13
|
-
]);
|
|
14
|
-
if (!editor) {
|
|
15
|
-
return null;
|
|
16
|
-
}
|
|
17
|
-
return /*#__PURE__*/ _jsxs(EditorBarRoot, {
|
|
18
|
-
children: [
|
|
19
|
-
/*#__PURE__*/ _jsx(EditorBarBtn, {
|
|
20
|
-
onClick: (e)=>handleClick(e, "Bold"),
|
|
21
|
-
className: editor.isActive("bold") ? "is-active" : "",
|
|
22
|
-
children: /*#__PURE__*/ _jsx(EditorIconBold, {})
|
|
23
|
-
}),
|
|
24
|
-
/*#__PURE__*/ _jsx(EditorBarBtn, {
|
|
25
|
-
onClick: (e)=>handleClick(e, "Italic"),
|
|
26
|
-
className: editor.isActive("bold") ? "is-active" : "",
|
|
27
|
-
children: /*#__PURE__*/ _jsx(EditorIconItalic, {})
|
|
28
|
-
})
|
|
29
|
-
]
|
|
30
|
-
});
|
|
31
|
-
};
|
|
32
|
-
export const Editor = ({ options, ...props })=>{
|
|
33
|
-
const editor = useEditor({
|
|
34
|
-
extensions: [
|
|
35
|
-
StarterKit
|
|
36
|
-
],
|
|
37
|
-
content: "",
|
|
38
|
-
...options || {}
|
|
39
|
-
});
|
|
40
|
-
return /*#__PURE__*/ _jsxs(EditorRoot, {
|
|
41
|
-
children: [
|
|
42
|
-
/*#__PURE__*/ _jsx(EditorGlobalStyles, {}),
|
|
43
|
-
/*#__PURE__*/ _jsx(EditorBar, {
|
|
44
|
-
editor: editor
|
|
45
|
-
}),
|
|
46
|
-
/*#__PURE__*/ _jsx(EditorContent, {
|
|
47
|
-
className: "EditorContent",
|
|
48
|
-
editor: editor,
|
|
49
|
-
...props
|
|
50
|
-
})
|
|
51
|
-
]
|
|
52
|
-
});
|
|
53
|
-
};
|
package/Editor/components.mjs
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import styled, { createGlobalStyle } from "styled-components";
|
|
2
|
-
import { IconButton } from "../Buttons/IconButton";
|
|
3
|
-
import { inputBorder, inputFocus, inputPadding } from "../Forms/styles";
|
|
4
|
-
export { MdFormatBold as EditorIconBold, MdFormatItalic as EditorIconItalic } from "react-icons/md";
|
|
5
|
-
export const EditorRoot = styled.div`
|
|
6
|
-
${inputBorder}
|
|
7
|
-
${inputFocus}
|
|
8
|
-
`;
|
|
9
|
-
export const EditorBarRoot = styled.div`
|
|
10
|
-
display: flex;
|
|
11
|
-
justify-content: flex-end;
|
|
12
|
-
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
13
|
-
/* background: var(--grey900); */
|
|
14
|
-
`;
|
|
15
|
-
export const EditorBarBtn = styled(IconButton)``;
|
|
16
|
-
export const EditorGlobalStyles = createGlobalStyle`
|
|
17
|
-
.ProseMirror {
|
|
18
|
-
${inputPadding}
|
|
19
|
-
|
|
20
|
-
&:focus {
|
|
21
|
-
outline:none;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
> *:first-child {
|
|
25
|
-
margin-top: 0;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
`;
|
package/Editor/index.mjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./Editor--tiptap";
|
package/FaviconTags.mjs
DELETED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
/**
|
|
3
|
-
* Favicon tags.
|
|
4
|
-
*
|
|
5
|
-
* This component is meant to be wrapped in a `<head>` manager component.
|
|
6
|
-
*
|
|
7
|
-
* These tags have been produced by [realfavicongenerator.net](https://realfavicongenerator.net/)
|
|
8
|
-
* on _**16 Feb 2022**_.
|
|
9
|
-
*
|
|
10
|
-
* @see https://realfavicongenerator.net/
|
|
11
|
-
*/ export const FaviconTags = ({ name, color, safariTabColor, tileColor, themeColor })=>{
|
|
12
|
-
return /*#__PURE__*/ _jsxs(_Fragment, {
|
|
13
|
-
children: [
|
|
14
|
-
/*#__PURE__*/ _jsx("link", {
|
|
15
|
-
rel: "shortcut icon",
|
|
16
|
-
href: "/favicon.ico",
|
|
17
|
-
type: "image/x-icon"
|
|
18
|
-
}),
|
|
19
|
-
/*#__PURE__*/ _jsx("link", {
|
|
20
|
-
rel: "apple-touch-icon",
|
|
21
|
-
sizes: "180x180",
|
|
22
|
-
href: "/apple-touch-icon.png"
|
|
23
|
-
}),
|
|
24
|
-
/*#__PURE__*/ _jsx("link", {
|
|
25
|
-
rel: "icon",
|
|
26
|
-
type: "image/png",
|
|
27
|
-
sizes: "32x32",
|
|
28
|
-
href: "/favicon-32x32.png"
|
|
29
|
-
}),
|
|
30
|
-
/*#__PURE__*/ _jsx("link", {
|
|
31
|
-
rel: "icon",
|
|
32
|
-
type: "image/png",
|
|
33
|
-
sizes: "16x16",
|
|
34
|
-
href: "/favicon-16x16.png"
|
|
35
|
-
}),
|
|
36
|
-
/*#__PURE__*/ _jsx("link", {
|
|
37
|
-
rel: "manifest",
|
|
38
|
-
href: "/site.webmanifest"
|
|
39
|
-
}),
|
|
40
|
-
/*#__PURE__*/ _jsx("link", {
|
|
41
|
-
rel: "mask-icon",
|
|
42
|
-
href: "/safari-pinned-tab.svg",
|
|
43
|
-
color: safariTabColor || color
|
|
44
|
-
}),
|
|
45
|
-
/*#__PURE__*/ _jsx("meta", {
|
|
46
|
-
name: "apple-mobile-web-app-title",
|
|
47
|
-
content: name
|
|
48
|
-
}),
|
|
49
|
-
/*#__PURE__*/ _jsx("meta", {
|
|
50
|
-
name: "application-name",
|
|
51
|
-
content: name
|
|
52
|
-
}),
|
|
53
|
-
/*#__PURE__*/ _jsx("meta", {
|
|
54
|
-
name: "msapplication-TileColor",
|
|
55
|
-
content: tileColor || color
|
|
56
|
-
}),
|
|
57
|
-
/*#__PURE__*/ _jsx("meta", {
|
|
58
|
-
name: "theme-color",
|
|
59
|
-
content: themeColor || color
|
|
60
|
-
})
|
|
61
|
-
]
|
|
62
|
-
});
|
|
63
|
-
};
|
|
64
|
-
export default FaviconTags;
|