@koine/react 1.0.11 → 1.0.14

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.
Files changed (323) hide show
  1. package/Alert/Alert.js +7 -13
  2. package/Animations/Reveal.js +12 -10
  3. package/Animations/Underline.js +3 -13
  4. package/Animations/useReveal.js +18 -17
  5. package/Autocomplete/AutocompleteDownshift.js +1 -1
  6. package/Autocomplete/AutocompleteDownshiftMultiselect.js +1 -1
  7. package/Autocomplete/AutocompleteMui.js +61 -56
  8. package/Autocomplete/AutocompleteReach.js +1 -1
  9. package/Autocomplete/components.js +17 -72
  10. package/Autocomplete/helpers.js +1 -1
  11. package/Bg/BgColor.js +14 -24
  12. package/Bg/BgPhoto.js +11 -54
  13. package/Bg/BgSvg.js +6 -9
  14. package/Breadcrumbs/Breadcrumbs.js +14 -54
  15. package/Buttons/Button.js +8 -73
  16. package/Buttons/ButtonComposite.js +20 -41
  17. package/Buttons/ButtonFab.js +4 -6
  18. package/Buttons/ButtonLink.js +7 -6
  19. package/Buttons/IconButton.js +5 -17
  20. package/Calendar/CalendarDaygridCell.js +20 -14
  21. package/Calendar/CalendarDaygridNav.js +10 -9
  22. package/Calendar/CalendarDaygridTable.js +32 -30
  23. package/Calendar/CalendarLegend.js +7 -2
  24. package/Calendar/calendar-api-google.js +101 -68
  25. package/Calendar/useCalendar.js +114 -113
  26. package/Calendar/utils.js +73 -74
  27. package/Carousel/Carousel.js +1 -1
  28. package/Carousel/CarouselCss.js +12 -26
  29. package/Collapsable/Collapsable.js +1 -1
  30. package/Debug/Debug.js +5 -17
  31. package/Details/Details.js +30 -27
  32. package/Dialog/DialogMui.js +22 -20
  33. package/Dialog/css/bare.js +17 -15
  34. package/Dialog/m/bare.js +17 -13
  35. package/Dialog/m/basic.js +2 -2
  36. package/Dialog/m/index.js +4 -4
  37. package/Dialog/sc/bare.js +25 -43
  38. package/Dialog/sc/framer.js +6 -6
  39. package/Dialog/sc/framerMaterial.js +6 -6
  40. package/Dialog/sc/material.js +17 -37
  41. package/Dialog/tw/bare.js +25 -19
  42. package/Dialog/tw/elegant.js +17 -15
  43. package/Dialog/tw/framer.js +6 -6
  44. package/Dialog/tw/framerMaterial.js +6 -6
  45. package/Dialog/tw/material.js +17 -15
  46. package/Editor/Editor--tiptap.js +14 -11
  47. package/Editor/components.js +6 -24
  48. package/Favicon/FaviconTags.js +2 -1
  49. package/Form/Form.js +30 -28
  50. package/Form/sc/bare.js +9 -18
  51. package/Forms/Checkbox/Checkbox.js +9 -15
  52. package/Forms/Feedback/Feedback.js +6 -7
  53. package/Forms/Field/Field.js +15 -26
  54. package/Forms/Field/FieldControl.js +19 -15
  55. package/Forms/Field/FieldHint.js +3 -5
  56. package/Forms/Input/Input.js +10 -16
  57. package/Forms/InputGroup/InputGroup.js +9 -36
  58. package/Forms/Label/Label.js +5 -23
  59. package/Forms/Password/Password.js +10 -23
  60. package/Forms/Radio/Radio.js +15 -18
  61. package/Forms/Switch/Switch.js +9 -39
  62. package/Forms/Textarea/Textarea.js +6 -7
  63. package/Forms/Textarea/TextareaRich.js +10 -24
  64. package/Forms/Toggle/Toggle.js +19 -67
  65. package/Forms/Toggle/useToggle.d.ts +1 -1
  66. package/Forms/Toggle/useToggle.js +30 -30
  67. package/Forms/antispam.js +12 -12
  68. package/Forms/helpers.js +7 -6
  69. package/Forms/styles.js +12 -43
  70. package/Gauge/Gauge.js +1 -1
  71. package/Grid/Grid.js +25 -51
  72. package/Hamburger/Hamburger.js +35 -47
  73. package/Header/useHeader.js +12 -12
  74. package/Hidden/Hidden.js +9 -13
  75. package/Img/sc/bare.js +3 -1
  76. package/Link/Link.js +3 -1
  77. package/Link/LinkBlank.js +8 -17
  78. package/Menu/Menu.js +3 -10
  79. package/MenuItem/MenuItem.js +3 -19
  80. package/Meta/Meta.js +3 -2
  81. package/NoJs/NoJs.js +2 -2
  82. package/Pagination/PaginationNav.js +26 -48
  83. package/Pagination/PaginationResults.js +7 -6
  84. package/Pill/Pill.js +6 -36
  85. package/Progress/ProgressCircular.js +9 -30
  86. package/Progress/ProgressLinear.js +8 -16
  87. package/Progress/ProgressOverlay.js +11 -27
  88. package/Rating/Rating.js +24 -44
  89. package/Rating/index.js +19 -15
  90. package/Select/SelectDownshift.js +1 -1
  91. package/Select/components.js +6 -12
  92. package/Sidebar/Sidebar.js +13 -38
  93. package/Spacing/Spacing.js +12 -12
  94. package/Sticky/Sticky.js +1 -1
  95. package/Sticky/StickyCss.js +4 -2
  96. package/Tabs/TabsMui.js +19 -16
  97. package/Tabs/tw/bare.js +13 -11
  98. package/Tabs/tw/material.js +15 -11
  99. package/Tabs/useTabs.js +16 -16
  100. package/Typography/CopyPasteVisible.js +3 -5
  101. package/Typography/Native.js +12 -45
  102. package/Typography/ReadMore.js +25 -51
  103. package/Typography/TextLoop.js +19 -22
  104. package/Typography/TypeStairs.js +20 -16
  105. package/helpers/classed.js +21 -18
  106. package/helpers/extend-component.js +6 -6
  107. package/hooks/useAsyncFn.js +18 -11
  108. package/hooks/useDateLocale.js +22 -13
  109. package/hooks/useEffectOnce.js +1 -1
  110. package/hooks/useFirstMountState.js +1 -1
  111. package/hooks/useFocus.js +3 -3
  112. package/hooks/useId.js +3 -2
  113. package/hooks/useIsomorphicLayoutEffect.js +1 -1
  114. package/hooks/useMount.js +2 -2
  115. package/hooks/useMountedState.js +4 -4
  116. package/hooks/usePrevious.js +2 -2
  117. package/hooks/useScrollPosition.js +20 -15
  118. package/hooks/useScrollTo.js +7 -5
  119. package/hooks/useTraceUpdate.js +4 -3
  120. package/hooks/useUpdateEffect.js +3 -3
  121. package/hooks/useWindowSize.js +3 -3
  122. package/m/MotionProvider.js +4 -2
  123. package/package.json +8 -7
  124. package/styles/Body.js +4 -8
  125. package/styles/Global.js +4 -36
  126. package/styles/media.js +41 -36
  127. package/styles/spacing.js +15 -16
  128. package/styles/styled.js +7 -21
  129. package/styles/theme--vanilla.js +20 -18
  130. package/styles/theme.js +11 -11
  131. package/node/Alert/Alert.js +0 -21
  132. package/node/Alert/index.js +0 -4
  133. package/node/Animations/Reveal.js +0 -19
  134. package/node/Animations/Underline.js +0 -19
  135. package/node/Animations/index.js +0 -6
  136. package/node/Animations/useReveal.js +0 -74
  137. package/node/Autocomplete/AutocompleteDownshift.js +0 -161
  138. package/node/Autocomplete/AutocompleteDownshiftMultiselect.js +0 -356
  139. package/node/Autocomplete/AutocompleteMui.js +0 -175
  140. package/node/Autocomplete/AutocompleteReach.js +0 -115
  141. package/node/Autocomplete/components.js +0 -93
  142. package/node/Autocomplete/helpers.js +0 -32
  143. package/node/Autocomplete/index.js +0 -7
  144. package/node/Bg/BgColor.js +0 -36
  145. package/node/Bg/BgPhoto.js +0 -64
  146. package/node/Bg/BgSvg.js +0 -20
  147. package/node/Bg/index.js +0 -6
  148. package/node/Breadcrumbs/Breadcrumbs.js +0 -72
  149. package/node/Breadcrumbs/index.js +0 -4
  150. package/node/Buttons/Button.js +0 -83
  151. package/node/Buttons/ButtonComposite.js +0 -54
  152. package/node/Buttons/ButtonFab.js +0 -12
  153. package/node/Buttons/ButtonLink.js +0 -15
  154. package/node/Buttons/IconButton.js +0 -23
  155. package/node/Buttons/index.js +0 -8
  156. package/node/Calendar/CalendarDaygridCell.js +0 -55
  157. package/node/Calendar/CalendarDaygridNav.js +0 -27
  158. package/node/Calendar/CalendarDaygridTable.js +0 -60
  159. package/node/Calendar/CalendarLegend.js +0 -15
  160. package/node/Calendar/calendar-api-google.js +0 -99
  161. package/node/Calendar/index.js +0 -9
  162. package/node/Calendar/types.js +0 -2
  163. package/node/Calendar/useCalendar.js +0 -186
  164. package/node/Calendar/utils.js +0 -217
  165. package/node/Carousel/Carousel.js +0 -381
  166. package/node/Carousel/CarouselCss.js +0 -42
  167. package/node/Carousel/index.js +0 -4
  168. package/node/Collapsable/Collapsable.js +0 -4
  169. package/node/Collapsable/CollapsableReach.js +0 -253
  170. package/node/Collapsable/index.js +0 -5
  171. package/node/Debug/Debug.js +0 -26
  172. package/node/Debug/index.js +0 -4
  173. package/node/Details/Details.js +0 -65
  174. package/node/Details/index.js +0 -4
  175. package/node/Dialog/DialogMui.js +0 -82
  176. package/node/Dialog/css/bare.js +0 -23
  177. package/node/Dialog/index.js +0 -5
  178. package/node/Dialog/m/bare.js +0 -51
  179. package/node/Dialog/m/basic.js +0 -35
  180. package/node/Dialog/m/index.js +0 -8
  181. package/node/Dialog/sc/bare.js +0 -65
  182. package/node/Dialog/sc/framer.js +0 -19
  183. package/node/Dialog/sc/framerMaterial.js +0 -19
  184. package/node/Dialog/sc/material.js +0 -45
  185. package/node/Dialog/tw/bare.js +0 -40
  186. package/node/Dialog/tw/elegant.js +0 -21
  187. package/node/Dialog/tw/framer.js +0 -19
  188. package/node/Dialog/tw/framerMaterial.js +0 -19
  189. package/node/Dialog/tw/material.js +0 -21
  190. package/node/Editor/Editor--tiptap.js +0 -29
  191. package/node/Editor/components.js +0 -34
  192. package/node/Editor/index.js +0 -4
  193. package/node/Favicon/FaviconTags.js +0 -18
  194. package/node/Favicon/index.js +0 -4
  195. package/node/Form/Form.js +0 -63
  196. package/node/Form/index.js +0 -4
  197. package/node/Form/sc/bare.js +0 -33
  198. package/node/Forms/Checkbox/Checkbox.js +0 -28
  199. package/node/Forms/Checkbox/index.js +0 -4
  200. package/node/Forms/Feedback/Feedback.js +0 -15
  201. package/node/Forms/Feedback/index.js +0 -4
  202. package/node/Forms/Field/Field.js +0 -64
  203. package/node/Forms/Field/FieldControl.js +0 -47
  204. package/node/Forms/Field/FieldHint.js +0 -10
  205. package/node/Forms/Field/index.js +0 -5
  206. package/node/Forms/Input/Input.js +0 -27
  207. package/node/Forms/Input/index.js +0 -4
  208. package/node/Forms/InputGroup/InputGroup.js +0 -47
  209. package/node/Forms/InputGroup/index.js +0 -4
  210. package/node/Forms/Label/Label.js +0 -28
  211. package/node/Forms/Label/index.js +0 -4
  212. package/node/Forms/Password/Password.js +0 -34
  213. package/node/Forms/Password/index.js +0 -4
  214. package/node/Forms/Radio/Radio.js +0 -32
  215. package/node/Forms/Radio/index.js +0 -4
  216. package/node/Forms/Switch/Switch.js +0 -54
  217. package/node/Forms/Switch/index.js +0 -4
  218. package/node/Forms/Textarea/Textarea.js +0 -17
  219. package/node/Forms/Textarea/TextareaRich.js +0 -46
  220. package/node/Forms/Textarea/index.js +0 -5
  221. package/node/Forms/Toggle/Toggle.js +0 -86
  222. package/node/Forms/Toggle/index.js +0 -4
  223. package/node/Forms/Toggle/useToggle.js +0 -149
  224. package/node/Forms/antispam.js +0 -61
  225. package/node/Forms/helpers.js +0 -51
  226. package/node/Forms/index.js +0 -19
  227. package/node/Forms/styles.js +0 -64
  228. package/node/Gauge/Gauge.js +0 -106
  229. package/node/Grid/Grid.js +0 -83
  230. package/node/Grid/index.js +0 -4
  231. package/node/Hamburger/Hamburger.js +0 -69
  232. package/node/Hamburger/index.js +0 -4
  233. package/node/Header/index.js +0 -4
  234. package/node/Header/useHeader.js +0 -34
  235. package/node/Hidden/Hidden.js +0 -18
  236. package/node/Hidden/index.js +0 -4
  237. package/node/Img/index.js +0 -4
  238. package/node/Img/sc/bare.js +0 -41
  239. package/node/Img/types.js +0 -2
  240. package/node/Link/Link.js +0 -6
  241. package/node/Link/LinkBlank.js +0 -31
  242. package/node/Link/index.js +0 -5
  243. package/node/Menu/Menu.js +0 -15
  244. package/node/Menu/index.js +0 -4
  245. package/node/MenuItem/MenuItem.js +0 -24
  246. package/node/MenuItem/index.js +0 -4
  247. package/node/Meta/Meta.js +0 -8
  248. package/node/Meta/index.js +0 -4
  249. package/node/NoJs/NoJs.js +0 -10
  250. package/node/NoJs/index.js +0 -4
  251. package/node/Pagination/PaginationNav.js +0 -88
  252. package/node/Pagination/PaginationResults.js +0 -15
  253. package/node/Pagination/index.js +0 -5
  254. package/node/Pill/Pill.js +0 -41
  255. package/node/Pill/index.js +0 -4
  256. package/node/Progress/ProgressCircular.js +0 -41
  257. package/node/Progress/ProgressLinear.js +0 -37
  258. package/node/Progress/ProgressOverlay.js +0 -45
  259. package/node/Progress/index.js +0 -6
  260. package/node/Rating/Rating.js +0 -97
  261. package/node/Rating/index.js +0 -53
  262. package/node/Select/SelectDownshift.js +0 -41
  263. package/node/Select/components.js +0 -22
  264. package/node/Select/index.js +0 -7
  265. package/node/Sidebar/Sidebar.js +0 -53
  266. package/node/Sidebar/index.js +0 -4
  267. package/node/Spacing/Spacing.js +0 -50
  268. package/node/Spacing/index.js +0 -4
  269. package/node/Sticky/Sticky.js +0 -222
  270. package/node/Sticky/StickyCss.js +0 -8
  271. package/node/Sticky/index.js +0 -4
  272. package/node/Tabs/TabsMui.js +0 -47
  273. package/node/Tabs/index.js +0 -4
  274. package/node/Tabs/sc/bare.js +0 -87
  275. package/node/Tabs/tw/bare.js +0 -19
  276. package/node/Tabs/tw/material.js +0 -17
  277. package/node/Tabs/useTabs.js +0 -48
  278. package/node/Typography/CopyPasteVisible.js +0 -10
  279. package/node/Typography/Native.js +0 -51
  280. package/node/Typography/ReadMore.js +0 -74
  281. package/node/Typography/TextLoop.js +0 -54
  282. package/node/Typography/TypeStairs.js +0 -49
  283. package/node/Typography/index.js +0 -8
  284. package/node/css/index.js +0 -36
  285. package/node/helpers/classed.js +0 -69
  286. package/node/helpers/extend-component.js +0 -16
  287. package/node/helpers/index.js +0 -5
  288. package/node/hooks/index.js +0 -18
  289. package/node/hooks/types.js +0 -2
  290. package/node/hooks/useAsyncFn.js +0 -33
  291. package/node/hooks/useDateLocale.js +0 -56
  292. package/node/hooks/useEffectOnce.js +0 -12
  293. package/node/hooks/useFirstMountState.js +0 -16
  294. package/node/hooks/useFocus.js +0 -15
  295. package/node/hooks/useId.js +0 -11
  296. package/node/hooks/useIsomorphicLayoutEffect.js +0 -11
  297. package/node/hooks/useMount.js +0 -13
  298. package/node/hooks/useMountedState.js +0 -19
  299. package/node/hooks/usePrevious.js +0 -12
  300. package/node/hooks/useScrollPosition.js +0 -79
  301. package/node/hooks/useScrollTo.js +0 -23
  302. package/node/hooks/useTraceUpdate.js +0 -24
  303. package/node/hooks/useUpdateEffect.js +0 -18
  304. package/node/hooks/useWindowSize.js +0 -17
  305. package/node/index.js +0 -8
  306. package/node/m/MotionProvider.js +0 -41
  307. package/node/m/index.js +0 -9
  308. package/node/m/lite.js +0 -4
  309. package/node/m/max.js +0 -4
  310. package/node/sc/index.js +0 -37
  311. package/node/scm/index.js +0 -36
  312. package/node/shared/index.js +0 -11
  313. package/node/styles/Body.js +0 -21
  314. package/node/styles/Global.js +0 -53
  315. package/node/styles/index.js +0 -10
  316. package/node/styles/media.js +0 -156
  317. package/node/styles/spacing.js +0 -53
  318. package/node/styles/styled.js +0 -31
  319. package/node/styles/theme--vanilla.js +0 -59
  320. package/node/styles/theme.js +0 -45
  321. package/node/tw/index.js +0 -36
  322. package/node/twm/index.js +0 -36
  323. package/node/types.js +0 -2
@@ -1,87 +0,0 @@
1
- "use strict";
2
- // <reference types="@reach/utils/dist/declarations/src/polymorphic" />
3
- /**
4
- * @file
5
- *
6
- * Here we manage only "vertical" oriented tabs for now
7
- */
8
- // import styled from "styled-components";
9
- // import {
10
- // Tabs as _Tabs,
11
- // TabList as _TabList,
12
- // Tab as _Tab,
13
- // TabPanels as _TabPanels,
14
- // TabPanel as _TabPanel,
15
- // TabProps as _TabProps,
16
- // TabsProps as _TabsProps,
17
- // useTabsContext,
18
- // } from "@reach/tabs";
19
- // import { min } from "../../styles/media";
20
- // import { UnderlineSkewed } from "../../Animations/Underline";
21
- // import { btnStyleReset } from "../../Buttons/Button";
22
- // export const Tabs = styled(_Tabs)<TabsProps>`
23
- // ${min.sm} {
24
- // display: flex;
25
- // ${(p) => p.$vertical && "flex-direction: column;"}
26
- // }
27
- // `;
28
- // export type TabsProps = React.PropsWithChildren<_TabsProps> & {
29
- // $vertical?: boolean;
30
- // };
31
- // export const TabList = styled(_TabList)`
32
- // display: flex;
33
- // flex-direction: column;
34
- // ${min.sm} {
35
- // border-right: 1px solid var(--grey800);
36
- // }
37
- // `;
38
- // export const TabWrap = styled(_Tab)<TabProps & TabStyledProps>`
39
- // ${btnStyleReset}
40
- // position: relative;
41
- // justify-content: flex-end;
42
- // padding: 0.7em;
43
- // margin-bottom: 1em;
44
- // font-weight: bold;
45
- // color: ${(p) => (p.$active ? "var(--accent200)" : "var(--grey300)")};
46
- // ${min.sm} {
47
- // padding-right: var(--gutter-half);
48
- // }
49
- // &:hover {
50
- // color: ${(p) => (p.$active ? "var(--accent200)" : "var(--accent300)")};
51
- // }
52
- // `;
53
- // export const TabText = styled.span<TabStyledProps>`
54
- // position: relative;
55
- // z-index: 1;
56
- // `;
57
- // export const TabUnderline = styled(UnderlineSkewed)<TabStyledProps>``;
58
- // export type TabStyledProps = {
59
- // $active: boolean;
60
- // $focused: boolean;
61
- // };
62
- // export type TabProps = _TabProps & {
63
- // idx: number;
64
- // };
65
- // export const Tab = ({ children, ...props }: TabProps) => {
66
- // const { selectedIndex, focusedIndex } = useTabsContext();
67
- // const styledProps = {
68
- // $active: props.idx === selectedIndex,
69
- // $focused: props.idx === focusedIndex,
70
- // };
71
- // return (
72
- // <TabWrap {...props} {...styledProps}>
73
- // {styledProps.$active && (
74
- // <TabUnderline {...styledProps} layoutId="Tab-underline" />
75
- // )}
76
- // <TabText {...styledProps}>{children}</TabText>
77
- // </TabWrap>
78
- // );
79
- // };
80
- // export const TabPanels = styled(_TabPanels)`
81
- // flex: 1;
82
- // `;
83
- // export const TabPanel = styled(_TabPanel)`
84
- // ${min.sm} {
85
- // padding-left: var(--gutter-half);
86
- // }
87
- // `;
@@ -1,19 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineTabs = exports.Panel = exports.Indicator = exports.Tab = exports.List = exports.Root = void 0;
4
- const tslib_1 = require("tslib");
5
- const helpers_1 = require("../../helpers");
6
- // import type { ComponentsProps } from "../TabsMui";
7
- const _ = tslib_1.__importStar(require("../TabsMui"));
8
- exports.Root = (0, helpers_1.classed)(_.Root) `< class="tabs`;
9
- exports.List = (0, helpers_1.classed)(_.List) `< class="tabsList flex`;
10
- exports.Tab = (0, helpers_1.classed)(_.Tab) `< class="tabsTab inline-flex items-center justify-center [-webkit-tap-highlight-color:transparent] appearance-none select-none`;
11
- exports.Indicator = (0, helpers_1.classed)(_.Indicator) `< class="tabsIndicator`;
12
- exports.Panel = (0, helpers_1.classed)(_.Panel) `< class="tabsPanel`;
13
- exports.KoineTabs = (0, helpers_1.extendComponent)(_.KoineTabs, {
14
- Root: exports.Root,
15
- List: exports.List,
16
- Tab: exports.Tab,
17
- Indicator: exports.Indicator,
18
- Panel: exports.Panel,
19
- });
@@ -1,17 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineTabs = exports.Panel = exports.Indicator = exports.Tab = exports.List = exports.Root = void 0;
4
- const helpers_1 = require("../../helpers");
5
- const bare_1 = require("./bare");
6
- exports.Root = (0, helpers_1.classed)(bare_1.KoineTabs.Root) `< class="`;
7
- exports.List = (0, helpers_1.classed)(bare_1.KoineTabs.List) `< class="border-b-gray-200 border-b border-solid`;
8
- exports.Tab = (0, helpers_1.classed)(bare_1.KoineTabs.Tab) `< class="flex-col relative py-3 px-4 uppercase`; // ${p => p.selected ? "text-cyan-600" : ""}
9
- exports.Indicator = (0, helpers_1.classed)(bare_1.KoineTabs.Indicator) `< class="absolute bottom-0 w-full h-[2px] ${p => p.selected ? "bg-current" : ""}`;
10
- exports.Panel = (0, helpers_1.classed)(bare_1.KoineTabs.Panel) `< class="tabsPanel`;
11
- exports.KoineTabs = (0, helpers_1.extendComponent)(bare_1.KoineTabs, {
12
- Root: exports.Root,
13
- List: exports.List,
14
- Tab: exports.Tab,
15
- Indicator: exports.Indicator,
16
- Panel: exports.Panel,
17
- });
@@ -1,48 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useTabs = void 0;
4
- const react_1 = require("react");
5
- const utils_1 = require("@mui/utils");
6
- const useId_1 = require("../hooks/useId");
7
- const useTabs = (props) => {
8
- const { value: valueProp, defaultValue, onChange, orientation, direction, selectionFollowsFocus, } = props;
9
- const [value, setValue] = (0, utils_1.unstable_useControlled)({
10
- controlled: valueProp,
11
- default: defaultValue,
12
- name: "Tabs",
13
- state: "value",
14
- });
15
- const idPrefix = (0, useId_1.useId)();
16
- const onSelected = (0, react_1.useCallback)((e, newValue) => {
17
- setValue(newValue);
18
- if (onChange) {
19
- onChange(e, newValue);
20
- }
21
- }, [onChange, setValue]);
22
- const getRootProps = () => {
23
- return {};
24
- };
25
- const tabsContextValue = (0, react_1.useMemo)(() => {
26
- return {
27
- idPrefix,
28
- value,
29
- onSelected,
30
- orientation,
31
- direction,
32
- selectionFollowsFocus,
33
- };
34
- }, [
35
- idPrefix,
36
- value,
37
- onSelected,
38
- orientation,
39
- direction,
40
- selectionFollowsFocus,
41
- ]);
42
- return {
43
- getRootProps,
44
- tabsContextValue,
45
- };
46
- };
47
- exports.useTabs = useTabs;
48
- exports.default = exports.useTabs;
@@ -1,10 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.CopyPasteVisible = void 0;
4
- const tslib_1 = require("tslib");
5
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
6
- exports.CopyPasteVisible = styled_components_1.default.span `
7
- color: transparent;
8
- opacity: 0;
9
- font-size: 0;
10
- `;
@@ -1,51 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.P = exports.h4 = exports.h3 = exports.h2 = exports.h1 = exports.p = void 0;
4
- const tslib_1 = require("tslib");
5
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
6
- const media_1 = require("../styles/media");
7
- exports.p = `
8
- margin: 0 0 1em 0;
9
- `;
10
- exports.h1 = `
11
- margin: 0 0 10px 0;
12
- font-size: 30px;
13
- font-weight: 800;
14
- line-height: var(--headingsLineHeight);
15
- ${media_1.min.md} {
16
- font-size: 50px;
17
- }
18
- `;
19
- exports.h2 = `
20
- margin: 0 0 1em 0;
21
- font-size: 24px;
22
- font-weight: 800;
23
- line-height: var(--headingsLineHeight);
24
- `;
25
- exports.h3 = `
26
- margin: 0 0 1em 0;
27
- font-size: 20px;
28
- font-weight: 600;
29
- line-height: var(--headingsLineHeight);
30
- `;
31
- exports.h4 = `
32
- margin: 0 0 1em 0;
33
- font-size: 13px;
34
- font-weight: 600;
35
- line-height: var(--headingsLineHeight);
36
- `;
37
- exports.P = styled_components_1.default.div `
38
- ${exports.p}
39
- `;
40
- exports.H1 = styled_components_1.default.div `
41
- ${exports.h1}
42
- `;
43
- exports.H2 = styled_components_1.default.div `
44
- ${exports.h2}
45
- `;
46
- exports.H3 = styled_components_1.default.div `
47
- ${exports.h3}
48
- `;
49
- exports.H4 = styled_components_1.default.div `
50
- ${exports.h4}
51
- `;
@@ -1,74 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ReadMore = void 0;
4
- const tslib_1 = require("tslib");
5
- const jsx_runtime_1 = require("react/jsx-runtime");
6
- const react_1 = require("react");
7
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
8
- const framer_motion_1 = require("framer-motion");
9
- // import { CgArrowsExpandDownRight as IconExpand } from "react-icons/cg";
10
- const hooks_1 = require("../hooks");
11
- const Root = styled_components_1.default.div ``;
12
- const Content = styled_components_1.default.div `
13
- & p:first-child {
14
- margin-top: 0;
15
- }
16
- `;
17
- const BtnWrap = styled_components_1.default.span `
18
- display: flex;
19
- justify-content: flex-end;
20
- transition: transform 0.18s ease-in-out;
21
- text-align: right;
22
- transform: translateY(${(p) => (p.$expanded ? "0" : "-100%")});
23
- opacity: ${(p) => (p.$expanded ? 0 : 1)};
24
- `;
25
- const BtnFader = styled_components_1.default.div `
26
- width: 30%;
27
- transition: transform 0.18s ease-in-out;
28
- background: linear-gradient(45deg, transparent 50%, ${(p) => p.$bg} 70%);
29
- `;
30
- const Btn = styled_components_1.default.span `
31
- padding: 0 10px 0 10px;
32
- line-height: ${(p) => (p.$lineHeight ? p.$lineHeight : "inherit")};
33
- background: var(--bodyBg);
34
- color: var(--grey600);
35
- white-space: nowrap;
36
- font-size: ${(p) => p.$fontSize}px;
37
- cursor: pointer;
38
- `;
39
- const BtnIcon = styled_components_1.default.span `
40
- display: inline-block;
41
- margin: 0 0 0 4px;
42
- transition: transform 0.18s ease-in-out;
43
- ${(p) => (p.$expanded ? "transform: rotate(180deg);" : "")};
44
- font-size: ${(p) => p.$fontSize}px;
45
- `;
46
- const ReadMore = ({ lines = 3, lineHeight = 1.6, fontSize = 14, bg = "var(--bodyBg)", expand = "Expand", collapse = "Collapse", ...props }) => {
47
- const defaultMaxHeight = lines * (lineHeight * fontSize);
48
- const [expanded, setExpanded] = (0, react_1.useState)(false);
49
- const [maxHeight, setMaxHeight] = (0, react_1.useState)(defaultMaxHeight);
50
- const [fullHeight, setFullHeight] = (0, react_1.useState)(0);
51
- const [exceeds, setExceeds] = (0, react_1.useState)(false);
52
- const content = (0, react_1.useRef)(null);
53
- const height = (0, framer_motion_1.useSpring)(defaultMaxHeight);
54
- const styles = (0, react_1.useMemo)(() => (exceeds ? { height, overflow: "hidden" } : {}), [exceeds, height]);
55
- const handleExpandClick = () => {
56
- setExpanded((prevExpanded) => !prevExpanded);
57
- };
58
- (0, hooks_1.useIsomorphicLayoutEffect)(() => {
59
- if (content.current) {
60
- const elementHeight = content.current.offsetHeight;
61
- const newExceeds = elementHeight > maxHeight;
62
- if (!newExceeds) {
63
- setMaxHeight(elementHeight);
64
- }
65
- setExceeds(newExceeds);
66
- setFullHeight(elementHeight);
67
- }
68
- }, [content, maxHeight]);
69
- (0, hooks_1.useIsomorphicLayoutEffect)(() => {
70
- height.set(expanded ? fullHeight : maxHeight);
71
- }, [expanded, height, fullHeight, maxHeight]);
72
- return ((0, jsx_runtime_1.jsxs)(Root, { children: [(0, jsx_runtime_1.jsx)(framer_motion_1.m.div, { style: styles, children: (0, jsx_runtime_1.jsx)(Content, { ref: content, ...props }) }), exceeds && ((0, jsx_runtime_1.jsxs)(BtnWrap, { "$expanded": expanded, children: [(0, jsx_runtime_1.jsx)(BtnFader, { "$bg": bg }), (0, jsx_runtime_1.jsxs)(Btn, { "$fontSize": fontSize, "$lineHeight": lineHeight, onClick: handleExpandClick, "aria-expanded": expanded, "aria-label": expanded ? collapse : expand, children: [expanded ? collapse : expand, (0, jsx_runtime_1.jsx)(BtnIcon, { "$expanded": expanded })] })] }))] }));
73
- };
74
- exports.ReadMore = ReadMore;
@@ -1,54 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.TextLoop = exports.TextLoopPiece = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_1 = require("react");
6
- const framer_motion_1 = require("framer-motion");
7
- const TextLoopPiece = ({ text = "", style = {}, className = "", direction = "up", inline = true, noOverflow = true, delay = 400, }) => {
8
- const placeholderRef = (0, react_1.useRef)(null);
9
- const [content, setContent] = (0, react_1.useState)({ data: "", key: "" });
10
- const [width, setWidth] = (0, react_1.useState)(inline ? 0 : "auto");
11
- (0, react_1.useEffect)(() => {
12
- const timeoutId = setTimeout(() => {
13
- if (!placeholderRef.current)
14
- return;
15
- placeholderRef.current.innerHTML = text + "";
16
- if (inline)
17
- setWidth(placeholderRef.current.offsetWidth);
18
- setContent({ data: text + "", key: new Date() + "" });
19
- }, delay);
20
- return () => clearTimeout(timeoutId);
21
- }, [text, delay, inline]);
22
- return ((0, jsx_runtime_1.jsxs)("div", { className: className, style: {
23
- ...style,
24
- position: "relative",
25
- display: inline ? "inline-block" : "block",
26
- width,
27
- whiteSpace: inline ? "nowrap" : "normal",
28
- }, children: [(0, jsx_runtime_1.jsx)("span", { ref: placeholderRef, style: { visibility: "hidden" } }), (0, jsx_runtime_1.jsx)("div", { style: {
29
- overflow: noOverflow ? "hidden" : "visible",
30
- display: "block",
31
- position: "absolute",
32
- top: 0,
33
- left: 0,
34
- height: "100%",
35
- width: "100%",
36
- }, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.m.div, { style: { position: "absolute" }, initial: {
37
- opacity: 0,
38
- y: direction === "down" ? "-100%" : "100%",
39
- }, animate: { opacity: 1, y: 0 }, exit: {
40
- opacity: 0,
41
- y: direction === "down" ? "100%" : "-100%",
42
- }, children: content.data }, content.key) }) })] }));
43
- };
44
- exports.TextLoopPiece = TextLoopPiece;
45
- const TextLoop = ({ texts, interval = 3000, ...props }) => {
46
- const [index, setIndex] = (0, react_1.useState)(0);
47
- (0, react_1.useEffect)(() => {
48
- const intervalId = setInterval(() => setIndex((index) => index + 1), interval // every 3 seconds
49
- );
50
- return () => clearTimeout(intervalId);
51
- }, [interval]);
52
- return (0, jsx_runtime_1.jsx)(exports.TextLoopPiece, { ...props, text: texts[index % texts.length] });
53
- };
54
- exports.TextLoop = TextLoop;
@@ -1,49 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.TypeStairs = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_1 = require("react");
6
- exports.TypeStairs = (0, react_1.forwardRef)(({ children, limit }, ref) => {
7
- // split in rows or just use one row if there is no limit
8
- const rows = limit ? splitTextIntoRows(children, limit) : [children];
9
- return rows.length > 1 ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: rows.map((row, rowIndex) => {
10
- return ((0, jsx_runtime_1.jsxs)("span", { children: [renderRow(row, rowIndex, ref), rowIndex !== rows.length - 1 && (0, jsx_runtime_1.jsx)("br", {})] }, `row-${rowIndex}`));
11
- }) })) : (renderRow(rows[0], 0, ref));
12
- });
13
- /**
14
- * every number chars find a space and break, then restart the gradient weight
15
- * @see https://stackoverflow.com/a/25770787
16
- */
17
- function splitTextIntoRows(input = "", limit = 18) {
18
- const rows = [];
19
- const arr = input.split(" ");
20
- let currow = arr[0];
21
- let rowlen = currow.length;
22
- for (let i = 1; i < arr.length; i++) {
23
- const word = arr[i];
24
- rowlen += word.length + 1;
25
- if (rowlen <= limit) {
26
- currow += " " + word;
27
- }
28
- else {
29
- rows.push(currow);
30
- currow = word;
31
- rowlen = word.length;
32
- }
33
- }
34
- rows.push(currow);
35
- return rows;
36
- }
37
- function renderRow(row, rowIndex, ref) {
38
- const letters = row.split("");
39
- let fontWeightIdx = 1;
40
- // const fontWeight = Math.min(fontWeightIdx * 100, 800);
41
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: letters.map((letter, letterIndex) => {
42
- const fontWeight = Math.min(fontWeightIdx * 100, 800);
43
- // don't waste a fontWeight for a white space
44
- if (letter !== " ") {
45
- fontWeightIdx++;
46
- }
47
- return ((0, jsx_runtime_1.jsx)("span", { style: { fontWeight }, ref: ref, children: letter }, `letter-${rowIndex}-${letterIndex}`));
48
- }) }));
49
- }
@@ -1,8 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./CopyPasteVisible"), exports);
5
- tslib_1.__exportStar(require("./Native"), exports);
6
- tslib_1.__exportStar(require("./ReadMore"), exports);
7
- tslib_1.__exportStar(require("./TextLoop"), exports);
8
- tslib_1.__exportStar(require("./TypeStairs"), exports);
package/node/css/index.js DELETED
@@ -1,36 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineDialog = void 0;
4
- const tslib_1 = require("tslib");
5
- tslib_1.__exportStar(require("../shared"), exports);
6
- // export * from "../Alert";
7
- // export * from "../Animations";
8
- // export * from "../Autocomplete";
9
- // export * from "../Bg";
10
- // export * from "../Breadcrumbs";
11
- // export * from "../Buttons";
12
- // export * from "../Carousel";
13
- // export * from "../Collapsable";
14
- // export * from "../Debug";
15
- var bare_1 = require("../Dialog/css/bare");
16
- Object.defineProperty(exports, "KoineDialog", { enumerable: true, get: function () { return bare_1.KoineDialog; } });
17
- // export * from "../Form";
18
- // export * from "../Forms";
19
- // export * from "../Grid";
20
- // export * from "../Hamburger";
21
- // export * from "../Header";
22
- // export * from "../Hidden";
23
- // export * from "../Img";
24
- // export * from "../Link";
25
- // export * from "../MenuItem";
26
- // export * from "../Pagination";
27
- // export * from "../Pill";
28
- // export * from "../Progress";
29
- // export * from "../Rating";
30
- // // export * from "../Select";
31
- // export * from "../Sidebar";
32
- // export * from "../Spacing";
33
- // export * from "../Sticky";
34
- // export * from "../styles";
35
- // export * from "../Tabs";
36
- // export * from "../Typography";
@@ -1,69 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.classed = void 0;
4
- const react_1 = require("react");
5
- /**
6
- * This utility allows to extend a component a là `styled-components` but for
7
- * a className based styling solution like Tailwind,
8
- *
9
- * It also plays nicely with tailwind intellisense @see:
10
- *
11
- * - https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
12
- *
13
- * For references about tagged functions:
14
- * - https://javascript.plainenglish.io/how-css-in-js-libraries-work-da4145b1b6c7
15
- * - https://makersden.io/blog/reverse-engineering-styled-components
16
- * - https://typesafe.blog/article/the-logic-behind-javascript-tag-functions
17
- * - https://flaming.codes/posts/typescript-and-javascript-tagged-template-strings
18
- */
19
- function classed(component) {
20
- // @ts-expect-error nevermind for now...
21
- const type = component.type || component;
22
- return function (strings, ...args) {
23
- const WrappedComponent = (0, react_1.forwardRef)(function (props, ref) {
24
- const argResolved = args
25
- .map((arg, index) => {
26
- let result = "";
27
- if (typeof arg === "function") {
28
- result = arg(props);
29
- }
30
- else if (typeof arg !== "undefined") {
31
- result = arg.toString();
32
- }
33
- return strings[index] + result;
34
- })
35
- .join("");
36
- const isNativeHtmlElement = typeof type === "string";
37
- const propsToForward = isNativeHtmlElement
38
- ? {}
39
- : props;
40
- if (isNativeHtmlElement) {
41
- for (const key in props) {
42
- // like styled-components `transient` props
43
- if (!key.startsWith("$")) {
44
- // FIXME: for react 18 we need: @ts-expect-error
45
- propsToForward[key] = props[key];
46
- }
47
- }
48
- }
49
- // get the tagged function string outcome
50
- let className = argResolved || strings[0];
51
- // check if we need to clean it or not from the optional structure `< class="..."`
52
- className = className.match(/class="([^"]*)/)?.[1] || className;
53
- // add the custom classes from props
54
- className += props?.className ? " " + props?.className : "";
55
- return (0, react_1.createElement)(type, {
56
- // ...props,
57
- ...propsToForward,
58
- // only add ot props if it is not an empty string
59
- className: className || undefined,
60
- // add ref to props
61
- ref,
62
- });
63
- });
64
- // FIXME: not sure if this is needed
65
- // WrappedComponent.displayName = type.toString();
66
- return WrappedComponent; // as unknown as React.ReactElement<typeof props>;
67
- };
68
- }
69
- exports.classed = classed;
@@ -1,16 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.extendComponent = void 0;
4
- const react_1 = require("react");
5
- const extendComponent = (component, defaultProps) => {
6
- // FIXME: check if we need to forwardRef or not
7
- const NewComponent = (props) => (0, react_1.createElement)(component, props);
8
- // const NewComponent = forwardRef<React.ComponentProps<Component>, Component>(
9
- // (props, ref) => createElement(component, { ...props, ref })
10
- // );
11
- return Object.assign(NewComponent, {
12
- ...defaultProps,
13
- defaultProps,
14
- });
15
- };
16
- exports.extendComponent = extendComponent;
@@ -1,5 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./classed"), exports);
5
- tslib_1.__exportStar(require("./extend-component"), exports);
@@ -1,18 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./useAsyncFn"), exports);
5
- tslib_1.__exportStar(require("./useDateLocale"), exports);
6
- tslib_1.__exportStar(require("./useEffectOnce"), exports);
7
- tslib_1.__exportStar(require("./useFirstMountState"), exports);
8
- tslib_1.__exportStar(require("./useFocus"), exports);
9
- tslib_1.__exportStar(require("./useId"), exports);
10
- tslib_1.__exportStar(require("./useIsomorphicLayoutEffect"), exports);
11
- tslib_1.__exportStar(require("./useMount"), exports);
12
- tslib_1.__exportStar(require("./useMountedState"), exports);
13
- tslib_1.__exportStar(require("./usePrevious"), exports);
14
- tslib_1.__exportStar(require("./useScrollPosition"), exports);
15
- // export * from "./useScrollTo";
16
- tslib_1.__exportStar(require("./useTraceUpdate"), exports);
17
- tslib_1.__exportStar(require("./useUpdateEffect"), exports);
18
- tslib_1.__exportStar(require("./useWindowSize"), exports);
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,33 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useAsyncFn = void 0;
4
- const react_1 = require("react");
5
- const useMountedState_1 = require("./useMountedState");
6
- /**
7
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useAsyncFn.ts)
8
- */
9
- function useAsyncFn(fn, deps = [], initialState = { loading: false }) {
10
- const lastCallId = (0, react_1.useRef)(0);
11
- const isMounted = (0, useMountedState_1.useMountedState)();
12
- const [state, set] = (0, react_1.useState)(initialState);
13
- const callback = (0, react_1.useCallback)((...args) => {
14
- const callId = ++lastCallId.current;
15
- if (!state.loading) {
16
- set((prevState) => ({ ...prevState, loading: true }));
17
- }
18
- return fn(...args).then((value) => {
19
- isMounted() &&
20
- callId === lastCallId.current &&
21
- set({ value, loading: false });
22
- return value;
23
- }, (error) => {
24
- isMounted() &&
25
- callId === lastCallId.current &&
26
- set({ error, loading: false });
27
- return error;
28
- });
29
- // eslint-disable-next-line react-hooks/exhaustive-deps
30
- }, deps);
31
- return [state, callback];
32
- }
33
- exports.useAsyncFn = useAsyncFn;