@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,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Grid"), exports);
@@ -1,69 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Hamburger = void 0;
4
- const tslib_1 = require("tslib");
5
- const jsx_runtime_1 = require("react/jsx-runtime");
6
- /**
7
- * @file
8
- *
9
- * Simplified from https://github.com/luukdv/hamburger-react
10
- */
11
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
12
- const HamburgerLabel = styled_components_1.default.div `
13
- position: absolute;
14
- top: 30px;
15
- font-size: ${({ $toggled }) => ($toggled ? "0" : "9px")};
16
- text-transform: uppercase;
17
- left: 7px;
18
- letter-spacing: 3px;
19
- `;
20
- const area = 48;
21
- const lines = 3;
22
- const width = 32;
23
- const room = Math.round((area - width) / 2);
24
- const barHeightRaw = width / 12;
25
- const barHeight = Math.round(barHeightRaw);
26
- const space = 0.5;
27
- const marginRaw = width / (lines * (space + (lines === 3 ? 1 : 1.25)));
28
- const margin = Math.round(marginRaw);
29
- const height = barHeight * lines + margin * (lines - 1);
30
- const topOffset = Math.round((area - height) / 2);
31
- const translate = 4.6325;
32
- const deviation = (barHeightRaw - barHeight + (marginRaw - margin)) / (lines === 3 ? 1 : 2);
33
- const move = parseFloat((width / translate - deviation / (4 / 3)).toFixed(2));
34
- const time = 0.4;
35
- const easing = "cubic-bezier(0, 0, 0, 1)";
36
- const transition = `${time}s ${easing}`;
37
- const burgerStyles = {
38
- marginRight: "-8px",
39
- position: "relative",
40
- width: `${area}px`,
41
- height: `${area}px`,
42
- userSelect: "none",
43
- outline: "0px",
44
- cursor: "pointer",
45
- transition,
46
- };
47
- const barStyles = {
48
- position: "absolute",
49
- width: `${width}px`,
50
- height: `${barHeight}px`,
51
- left: `${room}px`,
52
- background: "currentColor",
53
- transition,
54
- };
55
- const Hamburger = ({ toggled, ...props }) => {
56
- return ((0, jsx_runtime_1.jsxs)("div", { style: {
57
- ...burgerStyles,
58
- transform: `${toggled ? `rotate(90deg)` : "none"}`,
59
- }, tabIndex: 0, ...props, children: [(0, jsx_runtime_1.jsx)("div", { style: {
60
- ...barStyles,
61
- top: `${topOffset}px`,
62
- transform: `${toggled ? `rotate(-45deg) translate(0px, ${move}px)` : "none"}`,
63
- } }), (0, jsx_runtime_1.jsx)("div", { style: {
64
- ...barStyles,
65
- top: `${topOffset + barHeight + margin}px`,
66
- transform: `${toggled ? `rotate(45deg) translate(0, -${move}px)` : "none"}`,
67
- } }), (0, jsx_runtime_1.jsx)(HamburgerLabel, { "$toggled": toggled, children: "Menu" })] }));
68
- };
69
- exports.Hamburger = Hamburger;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Hamburger"), exports);
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./useHeader"), exports);
@@ -1,34 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useHeader = void 0;
4
- const react_1 = require("react");
5
- const useScrollPosition_1 = require("../hooks/useScrollPosition");
6
- const theme_1 = require("../styles/theme");
7
- const media_1 = require("../styles/media");
8
- const useHeader = () => {
9
- const [isSticky, setIsSticky] = (0, react_1.useState)(false);
10
- const { header: themed } = (0, theme_1.useTheme)();
11
- const isDesktopLayout = (0, media_1.useMedia)(`min:${themed.breakpoint}`);
12
- const valueIdx = isDesktopLayout ? 1 : 0;
13
- const [headerHeight, setHeaderHeight] = (0, react_1.useState)(themed.height[valueIdx]);
14
- const [placeholderHeight, setPlaceholderHeight] = (0, react_1.useState)(themed.height[valueIdx]);
15
- const [logoWidth, setLogoWidth] = (0, react_1.useState)(themed.logoWidth[valueIdx]);
16
- (0, useScrollPosition_1.useScrollPosition)((currentPosition) => {
17
- const isPastThreshold = currentPosition.y * -1 > 40;
18
- if (isSticky !== isPastThreshold)
19
- setIsSticky(isPastThreshold);
20
- }, [isSticky]);
21
- (0, react_1.useEffect)(() => {
22
- const valueIdx = isDesktopLayout ? 1 : 0;
23
- setPlaceholderHeight(themed.height[valueIdx]);
24
- setHeaderHeight(isSticky ? themed.heightSticky[valueIdx] : themed.height[valueIdx]);
25
- setLogoWidth(isSticky ? themed.logoWidthSticky[valueIdx] : themed.logoWidth[valueIdx]);
26
- }, [themed, isSticky, isDesktopLayout]);
27
- return [
28
- isSticky,
29
- placeholderHeight,
30
- headerHeight,
31
- logoWidth,
32
- ];
33
- };
34
- exports.useHeader = useHeader;
@@ -1,18 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Hidden = void 0;
4
- const tslib_1 = require("tslib");
5
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
6
- exports.Hidden = styled_components_1.default.div `
7
- ${(p) => `${p.$min
8
- ? `
9
- @media (min-width: ${p.theme.breakpoints[p.$min]}px) {
10
- display: none;
11
- }`
12
- : ""} ${p.$max
13
- ? `
14
- @media (max-width: ${p.theme.breakpoints[p.$max]}px) {
15
- display: none;
16
- }`
17
- : ""}`}
18
- `;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Hidden"), exports);
package/node/Img/index.js DELETED
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./types"), exports);
@@ -1,41 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineImg = void 0;
4
- const tslib_1 = require("tslib");
5
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
6
- // export type KoineImgProps = {
7
- // /** @default "cover" */
8
- // $fit?: "cover" | "contain";
9
- // };
10
- exports.KoineImg = styled_components_1.default.img ``;
11
- // export const KoineImg = styled.img<KoineImgProps>`
12
- // object-fit: ${(p) => p.$fit || "cover"};
13
- // `;
14
- // /**
15
- // * Replacement core component for native `<img />`
16
- // *
17
- // * Features:
18
- // * - lazy load
19
- // * - proportion cage
20
- // */
21
- // export const Img = ({
22
- // className,
23
- // style = {},
24
- // lazyProps,
25
- // ...props
26
- // }: ImgProps) => {
27
- // let { width, height, src } = props;
28
- // width = width ? `${width}px` : "100%";
29
- // height = height ? `${height}px` : "100%";
30
- // const imgProps = { width, height, src };
31
- // return (
32
- // <ImgRoot style={{ width, height, ...style }} className={className}>
33
- // <LazyLoad {...lazyProps}>
34
- // <ImgNative {...imgProps} />
35
- // </LazyLoad>
36
- // <noscript>
37
- // <img {...imgProps} />
38
- // </noscript>
39
- // </ImgRoot>
40
- // );
41
- // };
package/node/Img/types.js DELETED
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
package/node/Link/Link.js DELETED
@@ -1,6 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineLink = void 0;
4
- const tslib_1 = require("tslib");
5
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
6
- exports.KoineLink = styled_components_1.default.a ``;
@@ -1,31 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.LinkBlank = exports.LinkBlankIcon = exports.LinkBlankA = void 0;
4
- const tslib_1 = require("tslib");
5
- const jsx_runtime_1 = require("react/jsx-runtime");
6
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
7
- const md_1 = require("react-icons/md");
8
- const media_1 = require("../styles/media");
9
- exports.LinkBlankA = styled_components_1.default.a.attrs({
10
- target: "_blank",
11
- rel: "noopener",
12
- }) ``;
13
- // TODO: use `touch` class on <html> instead of relying on screenwidth,
14
- // probably implement a lean Modernizr like thing with react-helmet
15
- exports.LinkBlankIcon = (0, styled_components_1.default)(md_1.MdLaunch) `
16
- color: var(---grey100);
17
- font-size: inherit;
18
- margin-left: 3px;
19
- line-height: inherit;
20
- vertical-align: middle;
21
- width: 0px;
22
- transition: width 0.1s ease-in-out;
23
- ${media_1.max.sm} {
24
- width: 20px;
25
- opacity: 0.8;
26
- }
27
- `;
28
- const LinkBlank = ({ children, target, rel, ...props }) => {
29
- return ((0, jsx_runtime_1.jsxs)(exports.LinkBlankA, { ...props, children: [children, (0, jsx_runtime_1.jsx)(exports.LinkBlankIcon, {})] }));
30
- };
31
- exports.LinkBlank = LinkBlank;
@@ -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("./Link"), exports);
5
- tslib_1.__exportStar(require("./LinkBlank"), exports);
package/node/Menu/Menu.js DELETED
@@ -1,15 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Menu = void 0;
4
- const tslib_1 = require("tslib");
5
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
6
- exports.Menu = styled_components_1.default.ul `
7
- z-index: 3;
8
- position: absolute;
9
- list-style-type: none;
10
- margin: 0;
11
- padding: 0;
12
- background: #fff;
13
- width: 100%;
14
- box-shadow: var(--shadow);
15
- `;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Menu"), exports);
@@ -1,24 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.MenuItem = void 0;
4
- const tslib_1 = require("tslib");
5
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
6
- exports.MenuItem = styled_components_1.default.li `
7
- padding: 8px 16px;
8
-
9
- &[aria-selected="true"] {
10
- background: var(--accent400);
11
- }
12
-
13
- /** DEP: this is just for MultiselectMui? */
14
- &.Mui-focused,
15
- &[data-focus="true"] {
16
- background: var(--accent300);
17
- color: white;
18
- }
19
-
20
- &:not([disabled]):hover {
21
- cursor: pointer;
22
- background: var(--accent300);
23
- }
24
- `;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./MenuItem"), exports);
package/node/Meta/Meta.js DELETED
@@ -1,8 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Meta = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const Meta = ({ zoom }) => {
6
- return ((0, jsx_runtime_1.jsx)("meta", { name: "viewport", content: `width=device-width, initial-scale=1, maximum-scale=1${zoom ? "" : ", user-scalable=0"}` }));
7
- };
8
- exports.Meta = Meta;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Meta"), exports);
package/node/NoJs/NoJs.js DELETED
@@ -1,10 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.NoJs = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const NoJs = (_props) => {
6
- return ((0, jsx_runtime_1.jsx)("script", { id: "no-js", dangerouslySetInnerHTML: {
7
- __html: `document.querySelector("html").className=document.querySelector("html").className.replace(/no-js/,"") + "js";`,
8
- } }));
9
- };
10
- exports.NoJs = NoJs;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./NoJs"), exports);
@@ -1,88 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoinePaginationNav = void 0;
4
- const tslib_1 = require("tslib");
5
- const jsx_runtime_1 = require("react/jsx-runtime");
6
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
7
- const cg_1 = require("react-icons/cg");
8
- const utils_1 = require("@koine/utils");
9
- const Root = styled_components_1.default.nav `
10
- display: flex;
11
- align-items: center;
12
- justify-content: center;
13
- padding: 20px 0 40px;
14
- font-weight: 600;
15
-
16
- & a {
17
- text-decoration: none;
18
- }
19
- `;
20
- const item = `
21
- display: block;
22
- padding: 5px 10px;
23
- `;
24
- const ItemCurrent = styled_components_1.default.span `
25
- ${item}
26
- background: var(--accent400);
27
- border-radius: 2px;
28
- `;
29
- const ItemLink = styled_components_1.default.a `
30
- ${item}
31
-
32
- ${(props) => (props.prev ? "color: var(--grey100);" : "")}
33
- `;
34
- const DotsSeparator = styled_components_1.default.span `
35
- color: var(--grey100);
36
- `;
37
- const arrow = `display: flex; font-size: 20px;`;
38
- const ItemPrev = styled_components_1.default.a `
39
- ${arrow}
40
- `;
41
- const ItemNext = styled_components_1.default.a `
42
- ${arrow}
43
- `;
44
- /*
45
- * Possible outcomes:
46
- * [1] 2 3 ... 78 >
47
- * < 1 2 [3] 4 5 ... 78 >
48
- * < 1 ... 6 7 [8] 9 10 ... 78 >
49
- * < 1 ... 75 76 [77] 78 >
50
- * < 1 ... 76 77 [78]
51
- */
52
- const KoinePaginationNav = ({ total, perPage, currentPage, baseUrl, showOffset = 2, currentUrl = "/", Link = "a", }) => {
53
- total = (0, utils_1.ensureInt)(total);
54
- currentPage = (0, utils_1.ensureInt)(currentPage);
55
- perPage = (0, utils_1.ensureInt)(perPage);
56
- // page 0 means 1
57
- currentPage = currentPage || 1;
58
- baseUrl = baseUrl || currentUrl;
59
- // don't output anything if pagination is not needed
60
- if (total < perPage) {
61
- return null;
62
- }
63
- const firstPage = 1;
64
- const lastPage = Math.ceil(total / perPage);
65
- const prevPage = currentPage - 1 > firstPage ? currentPage - 1 : "";
66
- const nextPage = currentPage + 1 < lastPage ? currentPage + 1 : lastPage;
67
- const prevArrow = currentPage > firstPage;
68
- const nextArrow = currentPage < lastPage;
69
- const pages = [];
70
- // fill the pages before the current
71
- for (let i = currentPage - showOffset; i < currentPage; i++) {
72
- if (i > 1) {
73
- pages.push(i);
74
- }
75
- }
76
- // add the current
77
- pages.push(currentPage);
78
- // fill the pages after the current
79
- for (let i = currentPage + 1; i < currentPage + 1 + showOffset; i++) {
80
- if (i < lastPage) {
81
- pages.push(i);
82
- }
83
- }
84
- const prevDots = pages[0] > firstPage + 1;
85
- const nextDots = pages[pages.length - 1] < lastPage - 1;
86
- return ((0, jsx_runtime_1.jsxs)(Root, { children: [prevArrow && ((0, jsx_runtime_1.jsx)(ItemPrev, { as: Link, href: `${baseUrl}/${prevPage}`, children: (0, jsx_runtime_1.jsx)(cg_1.CgArrowLeftR, {}) })), firstPage !== currentPage && ((0, jsx_runtime_1.jsx)(ItemLink, { as: Link, href: `${baseUrl}`, prev: true, children: firstPage })), prevDots && (0, jsx_runtime_1.jsx)(DotsSeparator, { children: "..." }), pages.map((page) => page === currentPage ? ((0, jsx_runtime_1.jsx)(ItemCurrent, { children: page }, page)) : ((0, jsx_runtime_1.jsx)(ItemLink, { as: Link, href: `${baseUrl}/${page}`, prev: page < currentPage, next: page > currentPage, children: page }, `pagination-${page}`))), nextDots && (0, jsx_runtime_1.jsx)(DotsSeparator, { children: "..." }), lastPage !== currentPage && ((0, jsx_runtime_1.jsx)(ItemLink, { as: Link, href: `${baseUrl}/${lastPage}`, next: true, children: lastPage })), nextArrow && ((0, jsx_runtime_1.jsx)(ItemNext, { as: Link, href: `${baseUrl}/${nextPage}`, children: (0, jsx_runtime_1.jsx)(cg_1.CgArrowRightR, {}) }))] }));
87
- };
88
- exports.KoinePaginationNav = KoinePaginationNav;
@@ -1,15 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.PaginationResults = void 0;
4
- const tslib_1 = require("tslib");
5
- const jsx_runtime_1 = require("react/jsx-runtime");
6
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
7
- const framer_motion_1 = require("framer-motion");
8
- const Root = styled_components_1.default.div `
9
- // overflow: hidden;
10
- `;
11
- const Inner = (0, styled_components_1.default)(framer_motion_1.m.div) ``;
12
- const PaginationResults = ({ children }) => {
13
- return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { exitBeforeEnter: true, initial: true, children: (0, jsx_runtime_1.jsx)(Root, { children: (0, jsx_runtime_1.jsx)(Inner, { initial: { opacity: 0, x: -100 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 100 }, transition: { type: "linear", staggerChildren: 0.3 }, children: children }) }) }));
14
- };
15
- exports.PaginationResults = PaginationResults;
@@ -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("./PaginationNav"), exports);
5
- tslib_1.__exportStar(require("./PaginationResults"), exports);
package/node/Pill/Pill.js DELETED
@@ -1,41 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.PillAccentLightOutlined = exports.PillAccentLight = exports.PillGreyLight = exports.Pill = void 0;
4
- const tslib_1 = require("tslib");
5
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
6
- exports.Pill = styled_components_1.default.div `
7
- display: inline-block;
8
- padding: 5px 10px;
9
- margin: 0 0.5em 0.5em 0;
10
- border-radius: 2px;
11
- text-decoration: none;
12
- font-size: 13px;
13
- font-weight: 600;
14
- `;
15
- exports.PillGreyLight = (0, styled_components_1.default)(exports.Pill) `
16
- background: var(--grey800);
17
- color: var(--grey100);
18
-
19
- &:hover {
20
- color: white;
21
- background: var(--grey300);
22
- }
23
- `;
24
- exports.PillAccentLight = (0, styled_components_1.default)(exports.Pill) `
25
- background: var(--accent400);
26
- color: var(--grey100);
27
-
28
- &:hover {
29
- color: #fff;
30
- background: var(--accent300);
31
- }
32
- `;
33
- exports.PillAccentLightOutlined = (0, styled_components_1.default)(exports.Pill) `
34
- border: 1px solid var(--accent300);
35
- color: var(--accent200);
36
-
37
- &:hover {
38
- color: #fff;
39
- background: var(--accent300);
40
- }
41
- `;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Pill"), exports);
@@ -1,41 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ProgressCircular = void 0;
4
- const tslib_1 = require("tslib");
5
- const jsx_runtime_1 = require("react/jsx-runtime");
6
- const styled_components_1 = tslib_1.__importStar(require("styled-components"));
7
- const animationRotation = (0, styled_components_1.keyframes) `
8
- 0% {
9
- transform: rotate(0deg);
10
- }
11
- 100% {
12
- transform: rotate(360deg);
13
- }
14
- `;
15
- const animationCircle = (0, styled_components_1.keyframes) `
16
- 0% {
17
- stroke-dasharray: 1px, 200px;
18
- stroke-dashoffset: 0;
19
- }
20
- 50% {
21
- stroke-dasharray: 100px, 200px;
22
- stroke-dashoffset: -15px;
23
- }
24
- 100% {
25
- stroke-dasharray: 100px, 200px;
26
- stroke-dashoffset: -125px;
27
- }
28
- `;
29
- const ProgressCircularSvg = styled_components_1.default.svg `
30
- animation: ${animationRotation} 1.5s linear infinite;
31
- `;
32
- const ProgressCircularCircle = styled_components_1.default.circle `
33
- animation: ${animationCircle} 1.5s linear infinite;
34
- `;
35
- /**
36
- * @see https://mui.com/components/progress/
37
- */
38
- const ProgressCircular = ({ size = "1em", thickness = 1, color = "currentColor", ...props }) => {
39
- return ((0, jsx_runtime_1.jsx)(ProgressCircularSvg, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 44 44", style: { width: size, height: size }, ...props, children: (0, jsx_runtime_1.jsx)(ProgressCircularCircle, { cx: "22", cy: "22", r: "20", fill: "none", strokeWidth: thickness, style: { stroke: color } }) }));
40
- };
41
- exports.ProgressCircular = ProgressCircular;
@@ -1,37 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ProgressLinear = void 0;
4
- const tslib_1 = require("tslib");
5
- const jsx_runtime_1 = require("react/jsx-runtime");
6
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
7
- const framer_motion_1 = require("framer-motion");
8
- const ProgressLinearBg = styled_components_1.default.span `
9
- position: relative;
10
- overflow: hidden;
11
- display: block;
12
- height: 4px;
13
- `;
14
- const ProgressLinearFg = (0, styled_components_1.default)(framer_motion_1.m.span) `
15
- position: absolute;
16
- top: 0;
17
- bottom: 0;
18
- left: 0;
19
- width: 100%;
20
- `;
21
- /**
22
- * @see https://mui.com/components/progress/#linear
23
- */
24
- const ProgressLinear = ({ done = false, height = "2px", bg = "transparent", fg = "currentColor", ...props }) => {
25
- return ((0, jsx_runtime_1.jsx)(ProgressLinearBg, { style: { height, background: bg }, ...props, children: (0, jsx_runtime_1.jsx)(ProgressLinearFg, { style: { height, background: fg }, initial: {
26
- x: "-100%",
27
- }, animate: {
28
- x: done ? "-100%" : "0%",
29
- }, transition: done
30
- ? {}
31
- : {
32
- repeat: Infinity,
33
- repeatType: "reverse",
34
- duration: 2,
35
- } }) }));
36
- };
37
- exports.ProgressLinear = ProgressLinear;
@@ -1,45 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ProgressOverlay = 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
- const ProgressCircular_1 = require("./ProgressCircular");
10
- const ProgressLinear_1 = require("./ProgressLinear");
11
- const Header_1 = require("../Header");
12
- const ProgressOverlayWrap = (0, styled_components_1.default)(framer_motion_1.m.div) `
13
- z-index: 10000;
14
- position: fixed;
15
- top: 0;
16
- left: 0;
17
- right: 0;
18
- bottom: 0;
19
- pointer-events: none;
20
- cursor: wait;
21
- `;
22
- const ProgressOverlayCenterer = styled_components_1.default.div `
23
- position: absolute;
24
- top: 0;
25
- left: 0;
26
- right: 0;
27
- bottom: 0;
28
- display: flex;
29
- align-items: center;
30
- justify-content: center;
31
- background: var(--progress-overlay-bg);
32
- `;
33
- const ProgressOverlay = ({ running }) => {
34
- const [, , headerHeight] = (0, Header_1.useHeader)();
35
- // const [progress, setProgress] = useState(0);
36
- (0, react_1.useEffect)(() => {
37
- document.body.style.cursor = running ? "wait" : "";
38
- }, [running]);
39
- return ((0, jsx_runtime_1.jsxs)(ProgressOverlayWrap, { animate: {
40
- opacity: running ? 1 : 0,
41
- }, initial: { opacity: 0 }, transition: { type: "easeInOut" }, children: [(0, jsx_runtime_1.jsx)(ProgressLinear_1.ProgressLinear, { bg: "var(--accent400)", fg: "var(--accent300)", done: !running }), (0, jsx_runtime_1.jsx)(ProgressOverlayCenterer, { style: {
42
- top: headerHeight + "px",
43
- }, children: (0, jsx_runtime_1.jsx)(ProgressCircular_1.ProgressCircular, { size: "50px", color: "var(--accent300)" }) })] }));
44
- };
45
- exports.ProgressOverlay = ProgressOverlay;
@@ -1,6 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./ProgressCircular"), exports);
5
- tslib_1.__exportStar(require("./ProgressLinear"), exports);
6
- tslib_1.__exportStar(require("./ProgressOverlay"), exports);