@koine/react 1.0.12 → 1.0.13

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 (196) hide show
  1. package/Forms/Toggle/useToggle.d.ts +1 -1
  2. package/Forms/Toggle/useToggle.js +1 -1
  3. package/package.json +6 -7
  4. package/node/Alert/Alert.js +0 -14
  5. package/node/Alert/index.js +0 -4
  6. package/node/Animations/Reveal.js +0 -21
  7. package/node/Animations/Underline.js +0 -8
  8. package/node/Animations/index.js +0 -6
  9. package/node/Animations/useReveal.js +0 -75
  10. package/node/Autocomplete/AutocompleteDownshift.js +0 -161
  11. package/node/Autocomplete/AutocompleteDownshiftMultiselect.js +0 -356
  12. package/node/Autocomplete/AutocompleteMui.js +0 -180
  13. package/node/Autocomplete/AutocompleteReach.js +0 -115
  14. package/node/Autocomplete/components.js +0 -37
  15. package/node/Autocomplete/helpers.js +0 -32
  16. package/node/Autocomplete/index.js +0 -7
  17. package/node/Bg/BgColor.js +0 -25
  18. package/node/Bg/BgPhoto.js +0 -20
  19. package/node/Bg/BgSvg.js +0 -16
  20. package/node/Bg/index.js +0 -6
  21. package/node/Breadcrumbs/Breadcrumbs.js +0 -31
  22. package/node/Breadcrumbs/index.js +0 -4
  23. package/node/Buttons/Button.js +0 -17
  24. package/node/Buttons/ButtonComposite.js +0 -32
  25. package/node/Buttons/ButtonFab.js +0 -9
  26. package/node/Buttons/ButtonLink.js +0 -15
  27. package/node/Buttons/IconButton.js +0 -10
  28. package/node/Buttons/index.js +0 -8
  29. package/node/Calendar/CalendarDaygridCell.js +0 -61
  30. package/node/Calendar/CalendarDaygridNav.js +0 -28
  31. package/node/Calendar/CalendarDaygridTable.js +0 -61
  32. package/node/Calendar/CalendarLegend.js +0 -20
  33. package/node/Calendar/calendar-api-google.js +0 -131
  34. package/node/Calendar/index.js +0 -9
  35. package/node/Calendar/types.js +0 -2
  36. package/node/Calendar/useCalendar.js +0 -187
  37. package/node/Calendar/utils.js +0 -215
  38. package/node/Carousel/Carousel.js +0 -381
  39. package/node/Carousel/CarouselCss.js +0 -27
  40. package/node/Carousel/index.js +0 -4
  41. package/node/Collapsable/Collapsable.js +0 -4
  42. package/node/Collapsable/CollapsableReach.js +0 -253
  43. package/node/Collapsable/index.js +0 -5
  44. package/node/Debug/Debug.js +0 -13
  45. package/node/Debug/index.js +0 -4
  46. package/node/Details/Details.js +0 -67
  47. package/node/Details/index.js +0 -4
  48. package/node/Dialog/DialogMui.js +0 -83
  49. package/node/Dialog/css/bare.js +0 -24
  50. package/node/Dialog/index.js +0 -5
  51. package/node/Dialog/m/bare.js +0 -55
  52. package/node/Dialog/m/basic.js +0 -35
  53. package/node/Dialog/m/index.js +0 -8
  54. package/node/Dialog/sc/bare.js +0 -46
  55. package/node/Dialog/sc/framer.js +0 -19
  56. package/node/Dialog/sc/framerMaterial.js +0 -19
  57. package/node/Dialog/sc/material.js +0 -24
  58. package/node/Dialog/tw/bare.js +0 -45
  59. package/node/Dialog/tw/elegant.js +0 -23
  60. package/node/Dialog/tw/framer.js +0 -19
  61. package/node/Dialog/tw/framerMaterial.js +0 -19
  62. package/node/Dialog/tw/material.js +0 -23
  63. package/node/Editor/Editor--tiptap.js +0 -31
  64. package/node/Editor/components.js +0 -15
  65. package/node/Editor/index.js +0 -4
  66. package/node/Favicon/FaviconTags.js +0 -19
  67. package/node/Favicon/index.js +0 -4
  68. package/node/Form/Form.js +0 -65
  69. package/node/Form/index.js +0 -4
  70. package/node/Form/sc/bare.js +0 -23
  71. package/node/Forms/Checkbox/Checkbox.js +0 -21
  72. package/node/Forms/Checkbox/index.js +0 -4
  73. package/node/Forms/Feedback/Feedback.js +0 -13
  74. package/node/Forms/Feedback/index.js +0 -4
  75. package/node/Forms/Field/Field.js +0 -52
  76. package/node/Forms/Field/FieldControl.js +0 -51
  77. package/node/Forms/Field/FieldHint.js +0 -7
  78. package/node/Forms/Field/index.js +0 -5
  79. package/node/Forms/Input/Input.js +0 -20
  80. package/node/Forms/Input/index.js +0 -4
  81. package/node/Forms/InputGroup/InputGroup.js +0 -19
  82. package/node/Forms/InputGroup/index.js +0 -4
  83. package/node/Forms/Label/Label.js +0 -9
  84. package/node/Forms/Label/index.js +0 -4
  85. package/node/Forms/Password/Password.js +0 -20
  86. package/node/Forms/Password/index.js +0 -4
  87. package/node/Forms/Radio/Radio.js +0 -28
  88. package/node/Forms/Radio/index.js +0 -4
  89. package/node/Forms/Switch/Switch.js +0 -23
  90. package/node/Forms/Switch/index.js +0 -4
  91. package/node/Forms/Textarea/Textarea.js +0 -15
  92. package/node/Forms/Textarea/TextareaRich.js +0 -31
  93. package/node/Forms/Textarea/index.js +0 -5
  94. package/node/Forms/Toggle/Toggle.js +0 -37
  95. package/node/Forms/Toggle/index.js +0 -4
  96. package/node/Forms/Toggle/useToggle.js +0 -149
  97. package/node/Forms/antispam.js +0 -61
  98. package/node/Forms/helpers.js +0 -52
  99. package/node/Forms/index.js +0 -19
  100. package/node/Forms/styles.js +0 -32
  101. package/node/Gauge/Gauge.js +0 -106
  102. package/node/Grid/Grid.js +0 -56
  103. package/node/Grid/index.js +0 -4
  104. package/node/Hamburger/Hamburger.js +0 -56
  105. package/node/Hamburger/index.js +0 -4
  106. package/node/Header/index.js +0 -4
  107. package/node/Header/useHeader.js +0 -34
  108. package/node/Hidden/Hidden.js +0 -13
  109. package/node/Hidden/index.js +0 -4
  110. package/node/Img/index.js +0 -4
  111. package/node/Img/sc/bare.js +0 -42
  112. package/node/Img/types.js +0 -2
  113. package/node/Link/Link.js +0 -7
  114. package/node/Link/LinkBlank.js +0 -21
  115. package/node/Link/index.js +0 -5
  116. package/node/Menu/Menu.js +0 -7
  117. package/node/Menu/index.js +0 -4
  118. package/node/MenuItem/MenuItem.js +0 -7
  119. package/node/MenuItem/index.js +0 -4
  120. package/node/Meta/Meta.js +0 -9
  121. package/node/Meta/index.js +0 -4
  122. package/node/NoJs/NoJs.js +0 -10
  123. package/node/NoJs/index.js +0 -4
  124. package/node/Pagination/PaginationNav.js +0 -65
  125. package/node/Pagination/PaginationResults.js +0 -15
  126. package/node/Pagination/index.js +0 -5
  127. package/node/Pill/Pill.js +0 -10
  128. package/node/Pill/index.js +0 -4
  129. package/node/Progress/ProgressCircular.js +0 -19
  130. package/node/Progress/ProgressLinear.js +0 -28
  131. package/node/Progress/ProgressOverlay.js +0 -28
  132. package/node/Progress/index.js +0 -6
  133. package/node/Rating/Rating.js +0 -76
  134. package/node/Rating/index.js +0 -57
  135. package/node/Select/SelectDownshift.js +0 -41
  136. package/node/Select/components.js +0 -15
  137. package/node/Select/index.js +0 -7
  138. package/node/Sidebar/Sidebar.js +0 -27
  139. package/node/Sidebar/index.js +0 -4
  140. package/node/Spacing/Spacing.js +0 -49
  141. package/node/Spacing/index.js +0 -4
  142. package/node/Sticky/Sticky.js +0 -222
  143. package/node/Sticky/StickyCss.js +0 -10
  144. package/node/Sticky/index.js +0 -4
  145. package/node/Tabs/TabsMui.js +0 -49
  146. package/node/Tabs/index.js +0 -4
  147. package/node/Tabs/sc/bare.js +0 -87
  148. package/node/Tabs/tw/bare.js +0 -20
  149. package/node/Tabs/tw/material.js +0 -21
  150. package/node/Tabs/useTabs.js +0 -48
  151. package/node/Typography/CopyPasteVisible.js +0 -7
  152. package/node/Typography/Native.js +0 -17
  153. package/node/Typography/ReadMore.js +0 -47
  154. package/node/Typography/TextLoop.js +0 -51
  155. package/node/Typography/TypeStairs.js +0 -53
  156. package/node/Typography/index.js +0 -8
  157. package/node/css/index.js +0 -36
  158. package/node/helpers/classed.js +0 -72
  159. package/node/helpers/extend-component.js +0 -16
  160. package/node/helpers/index.js +0 -5
  161. package/node/hooks/index.js +0 -18
  162. package/node/hooks/types.js +0 -2
  163. package/node/hooks/useAsyncFn.js +0 -40
  164. package/node/hooks/useDateLocale.js +0 -42
  165. package/node/hooks/useEffectOnce.js +0 -12
  166. package/node/hooks/useFirstMountState.js +0 -16
  167. package/node/hooks/useFocus.js +0 -15
  168. package/node/hooks/useId.js +0 -12
  169. package/node/hooks/useIsomorphicLayoutEffect.js +0 -11
  170. package/node/hooks/useMount.js +0 -13
  171. package/node/hooks/useMountedState.js +0 -19
  172. package/node/hooks/usePrevious.js +0 -12
  173. package/node/hooks/useScrollPosition.js +0 -84
  174. package/node/hooks/useScrollTo.js +0 -25
  175. package/node/hooks/useTraceUpdate.js +0 -25
  176. package/node/hooks/useUpdateEffect.js +0 -18
  177. package/node/hooks/useWindowSize.js +0 -17
  178. package/node/index.js +0 -8
  179. package/node/m/MotionProvider.js +0 -43
  180. package/node/m/index.js +0 -9
  181. package/node/m/lite.js +0 -4
  182. package/node/m/max.js +0 -4
  183. package/node/sc/index.js +0 -37
  184. package/node/scm/index.js +0 -36
  185. package/node/shared/index.js +0 -11
  186. package/node/styles/Body.js +0 -16
  187. package/node/styles/Global.js +0 -21
  188. package/node/styles/index.js +0 -10
  189. package/node/styles/media.js +0 -160
  190. package/node/styles/spacing.js +0 -52
  191. package/node/styles/styled.js +0 -17
  192. package/node/styles/theme--vanilla.js +0 -61
  193. package/node/styles/theme.js +0 -45
  194. package/node/tw/index.js +0 -36
  195. package/node/twm/index.js +0 -36
  196. package/node/types.js +0 -2
package/node/m/index.js DELETED
@@ -1,9 +0,0 @@
1
- "use strict";
2
- /**
3
- * @file
4
- *
5
- * In this file we only have exports related to `framer-motion`
6
- */
7
- Object.defineProperty(exports, "__esModule", { value: true });
8
- var tslib_1 = require("tslib");
9
- tslib_1.__exportStar(require("./MotionProvider"), exports);
package/node/m/lite.js DELETED
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var framer_motion_1 = require("framer-motion");
4
- exports.default = framer_motion_1.domAnimation;
package/node/m/max.js DELETED
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var framer_motion_1 = require("framer-motion");
4
- exports.default = framer_motion_1.domMax;
package/node/sc/index.js DELETED
@@ -1,37 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineForm = exports.KoineDialog = void 0;
4
- var tslib_1 = require("tslib");
5
- tslib_1.__exportStar(require("../shared"), exports);
6
- tslib_1.__exportStar(require("../Alert"), exports);
7
- tslib_1.__exportStar(require("../Animations"), exports);
8
- tslib_1.__exportStar(require("../Autocomplete"), exports);
9
- tslib_1.__exportStar(require("../Bg"), exports);
10
- tslib_1.__exportStar(require("../Breadcrumbs"), exports);
11
- tslib_1.__exportStar(require("../Buttons"), exports);
12
- tslib_1.__exportStar(require("../Carousel"), exports);
13
- tslib_1.__exportStar(require("../Collapsable"), exports);
14
- tslib_1.__exportStar(require("../Debug"), exports);
15
- var bare_1 = require("../Dialog/sc/bare");
16
- Object.defineProperty(exports, "KoineDialog", { enumerable: true, get: function () { return bare_1.KoineDialog; } });
17
- var bare_2 = require("../Form/sc/bare");
18
- Object.defineProperty(exports, "KoineForm", { enumerable: true, get: function () { return bare_2.KoineForm; } });
19
- tslib_1.__exportStar(require("../Forms"), exports);
20
- tslib_1.__exportStar(require("../Grid"), exports);
21
- tslib_1.__exportStar(require("../Hamburger"), exports);
22
- tslib_1.__exportStar(require("../Header"), exports);
23
- tslib_1.__exportStar(require("../Hidden"), exports);
24
- tslib_1.__exportStar(require("../Img"), exports);
25
- tslib_1.__exportStar(require("../Link"), exports);
26
- tslib_1.__exportStar(require("../MenuItem"), exports);
27
- tslib_1.__exportStar(require("../Pagination"), exports);
28
- tslib_1.__exportStar(require("../Pill"), exports);
29
- tslib_1.__exportStar(require("../Progress"), exports);
30
- tslib_1.__exportStar(require("../Rating"), exports);
31
- // export * from "../Select";
32
- tslib_1.__exportStar(require("../Sidebar"), exports);
33
- tslib_1.__exportStar(require("../Spacing"), exports);
34
- tslib_1.__exportStar(require("../Sticky"), exports);
35
- tslib_1.__exportStar(require("../styles"), exports);
36
- tslib_1.__exportStar(require("../Tabs"), exports);
37
- tslib_1.__exportStar(require("../Typography"), exports);
package/node/scm/index.js DELETED
@@ -1,36 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineDialog = void 0;
4
- var tslib_1 = require("tslib");
5
- tslib_1.__exportStar(require("../shared"), exports);
6
- tslib_1.__exportStar(require("../Alert"), exports);
7
- tslib_1.__exportStar(require("../Animations"), exports);
8
- tslib_1.__exportStar(require("../Autocomplete"), exports);
9
- tslib_1.__exportStar(require("../Bg"), exports);
10
- tslib_1.__exportStar(require("../Breadcrumbs"), exports);
11
- tslib_1.__exportStar(require("../Buttons"), exports);
12
- tslib_1.__exportStar(require("../Carousel"), exports);
13
- tslib_1.__exportStar(require("../Collapsable"), exports);
14
- tslib_1.__exportStar(require("../Debug"), exports);
15
- var framer_1 = require("../Dialog/sc/framer");
16
- Object.defineProperty(exports, "KoineDialog", { enumerable: true, get: function () { return framer_1.KoineDialog; } });
17
- // export { KoineForm, type KoineFormProps} from "../Form/sc/framer";
18
- tslib_1.__exportStar(require("../Forms"), exports);
19
- tslib_1.__exportStar(require("../Grid"), exports);
20
- tslib_1.__exportStar(require("../Hamburger"), exports);
21
- tslib_1.__exportStar(require("../Header"), exports);
22
- tslib_1.__exportStar(require("../Hidden"), exports);
23
- tslib_1.__exportStar(require("../Img"), exports);
24
- tslib_1.__exportStar(require("../Link"), exports);
25
- tslib_1.__exportStar(require("../MenuItem"), exports);
26
- tslib_1.__exportStar(require("../Pagination"), exports);
27
- tslib_1.__exportStar(require("../Pill"), exports);
28
- tslib_1.__exportStar(require("../Progress"), exports);
29
- tslib_1.__exportStar(require("../Rating"), exports);
30
- // export * from "../Select";
31
- tslib_1.__exportStar(require("../Sidebar"), exports);
32
- tslib_1.__exportStar(require("../Spacing"), exports);
33
- tslib_1.__exportStar(require("../Sticky"), exports);
34
- tslib_1.__exportStar(require("../styles"), exports);
35
- tslib_1.__exportStar(require("../Tabs"), exports);
36
- tslib_1.__exportStar(require("../Typography"), exports);
@@ -1,11 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("../Calendar"), exports);
5
- tslib_1.__exportStar(require("../Dialog"), exports);
6
- tslib_1.__exportStar(require("../Favicon"), exports);
7
- tslib_1.__exportStar(require("../helpers"), exports);
8
- tslib_1.__exportStar(require("../hooks"), exports);
9
- tslib_1.__exportStar(require("../Meta"), exports);
10
- tslib_1.__exportStar(require("../NoJs"), exports);
11
- tslib_1.__exportStar(require("../types"), exports);
@@ -1,16 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.BodyMain = exports.BodyRoot = void 0;
4
- var tslib_1 = require("tslib");
5
- var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
6
- exports.BodyRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n"], ["\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n"])));
7
- /**
8
- * If you have background graphics to overlap you might need to add:
9
- *
10
- * ```css
11
- * z-index: 1;
12
- * position: relative;
13
- * ```
14
- */
15
- exports.BodyMain = styled_components_1.default.main(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
16
- var templateObject_1, templateObject_2;
@@ -1,21 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.StylesGlobal = exports.stylesGlobal = void 0;
4
- var tslib_1 = require("tslib");
5
- var styled_components_1 = require("styled-components");
6
- /**
7
- * App global style
8
- *
9
- * For examples of what to do here take a look at [Bootstrap's reset](https://github.com/twbs/bootstrap/blob/main/scss/_reboot.scss)
10
- * and similar.
11
- *
12
- * What we do here:
13
- * - set the base font family on all possible elements including placeholders prevent Chrome showing a standard font when using the autofill feature
14
- * - @see https://stackoverflow.com/a/60987373/1938970
15
- * - set the base font size on all possible elements to prevent weird zooming on input fields on iPhone iOS devices.
16
- * - @see https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/
17
- * - @see https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
18
- */
19
- exports.stylesGlobal = "\n body {\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n overflow-y: scroll;\n }\n\n body,\n button,\n input,\n textarea,\n select,\n select:-webkit-autofill::first-line,\n input:-webkit-autofill::first-line {\n font-family: var(--font), -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\",\n sans-serif;\n font-size: var(--fontSize);\n }\n\n html {\n box-sizing: border-box;\n @media (prefers-reduced-motion: no-preference) {\n scroll-behavior: smooth;\n }\n }\n\n *,\n *:before,\n *:after {\n box-sizing: inherit;\n -webkit-tap-highlight-color: transparent;\n }\n";
20
- exports.StylesGlobal = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["", ""], ["", ""])), exports.stylesGlobal);
21
- var templateObject_1;
@@ -1,10 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Body"), exports);
5
- tslib_1.__exportStar(require("./Global"), exports);
6
- tslib_1.__exportStar(require("./media"), exports);
7
- tslib_1.__exportStar(require("./spacing"), exports);
8
- tslib_1.__exportStar(require("./styled"), exports);
9
- tslib_1.__exportStar(require("./theme"), exports);
10
- tslib_1.__exportStar(require("./theme--vanilla"), exports);
@@ -1,160 +0,0 @@
1
- "use strict";
2
- var _a;
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.generateMediaQueries = exports.useMedia = exports.only = exports.between = exports.down = exports.up = exports.max = exports.min = void 0;
5
- var react_1 = require("react");
6
- var theme_1 = require("./theme");
7
- exports.min = (_a = generateMediaQueries(theme_1.breakpoints), _a.min), exports.max = _a.max, exports.up = _a.up, exports.down = _a.down, exports.between = _a.between, exports.only = _a.only;
8
- function useMedia(media) {
9
- var breakpoints = (0, theme_1.useTheme)().breakpoints;
10
- var _a = (0, react_1.useState)(false), matches = _a[0], setMatches = _a[1];
11
- var _b = media.split(":"), _c = _b[0], direction = _c === void 0 ? "min" : _c, breakpoint = _b[1];
12
- var px = breakpoints[breakpoint];
13
- if (direction === "max") {
14
- px = px - 0.02;
15
- }
16
- var query = "(".concat(direction, "-width: ").concat(px, "px)");
17
- (0, react_1.useEffect)(function () {
18
- var mq = window.matchMedia(query);
19
- var handleChange = function (event) {
20
- setMatches(event.matches);
21
- };
22
- setMatches(mq.matches);
23
- // Safari < 14 can't use addEventListener on a MediaQueryList
24
- // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
25
- if (!mq.addEventListener) {
26
- // Update the state whenever the media query match state changes
27
- mq.addListener(handleChange);
28
- // Clean up on unmount and if the query changes
29
- return function () {
30
- mq.removeListener(handleChange);
31
- };
32
- }
33
- mq.addEventListener("change", handleChange);
34
- return function () {
35
- mq.removeEventListener("change", handleChange);
36
- };
37
- }, [query]);
38
- return matches;
39
- }
40
- exports.useMedia = useMedia;
41
- /**
42
- * Generate media queries helpers
43
- *
44
- * Usage:
45
- * ```jsx
46
- * import { generateMediaQueries } from "@koine/react";
47
- *
48
- * export const breakpoints = {
49
- * xs: 0,
50
- * sm: 440,
51
- * md: 768,
52
- * lg: 1024,
53
- * xl: 1368,
54
- * xxl: 1690,
55
- * } as const;
56
- *
57
- * export const { min, max, up, down, between, only } = generateMediaQueries(breakpoints);
58
- * ```
59
- *
60
- * Consider the following syntaxes, using normal CSS is just slightly
61
- * longer but it aovid js imports, reduce the js overhead and improve CSS
62
- * highlighting in the editor.
63
- *
64
- * Even if we would reduce the function signature to the bare minimum the advantage
65
- * in terms of typing would not be much, also loosing in readability.
66
- *
67
- * ```css
68
- * // but unfortunately this does not work
69
- * @media (min-width: var(--b-sm)) {}
70
- * @media (min-width: 480px) {}
71
- *
72
- * ${media("min", "sm")} {}
73
- * ${mediaMin("sm")} {}
74
- * ${min.sm} {}
75
- * ${p => p.theme.min.sm}``
76
- * ```
77
- *
78
- * Related projects:
79
- * @see https://github.com/mg901/styled-breakpoints
80
- * @see https://github.com/morajabi/styled-media-query
81
- *
82
- * @see https://www.w3.org/TR/mediaqueries-5/#custom-mq The spec would allow for
83
- * something like this syntax
84
- *
85
- * ```css
86
- * @custom-media --narrow-window (max-width: 30em);
87
- * @media (--narrow-window) {}
88
- * ```
89
- */
90
- function generateMediaQueries(breakpoints) {
91
- var temp = Object.keys(breakpoints).map(function (key) {
92
- var br = key;
93
- return [br, breakpoints[br]];
94
- });
95
- var sortedKeys = temp.sort(function (a, b) { return a[1] - b[1]; }).map(function (item) { return item[0]; });
96
- var getNext = function (breakpoint) {
97
- var index = sortedKeys.indexOf(breakpoint);
98
- return sortedKeys[index + 1];
99
- };
100
- /**
101
- * It behaves the same as `@media (min-width: ${value}px)`
102
- * where value is the given breakpoint value.
103
- * For ease of use this can be used both as a function `min("md")` and as an
104
- * object literal `min.md`.
105
- */ // @ts-expect-error FIXME: at some point
106
- var min = function (br) {
107
- return "@media (min-width: ".concat(breakpoints[br], "px)");
108
- };
109
- /**
110
- * It behaves the same as `@media (max-width: ${value}px)`
111
- * where value is the given breakpoint value.
112
- * For ease of use this can be used both as a function `max("md")` and as an
113
- * object literal `max.md`.
114
- */ // @ts-expect-error FIXME: at some point
115
- var max = function (br) {
116
- return "@media (max-width: ".concat(breakpoints[br] - 0.02, "px)");
117
- };
118
- for (var br in breakpoints) {
119
- var _br = br;
120
- min[_br] = "@media (min-width: ".concat(breakpoints[_br], "px)");
121
- max[_br] = "@media (max-width: ".concat(breakpoints[_br] - 0.02, "px)");
122
- }
123
- /**
124
- * It behaves the same as `min`
125
- * @inheritdoc {max}
126
- */
127
- var up = min;
128
- /**
129
- * It behaves similarly to `max` but you will use the "next" breakpoint,
130
- * specifying CSS that will apply from the given breakpoint and down.
131
- */
132
- var down = function (br) {
133
- var brNext = getNext(br);
134
- // TODO: if br does not exists otherwise throw Error
135
- return brNext && "@media (max-width: ".concat(breakpoints[brNext] - 0.02, "px)");
136
- };
137
- /**
138
- * Media query between the two given breakpoints
139
- */
140
- var between = function (br1, br2) {
141
- return "@media (min-width: ".concat(breakpoints[br1], "px) and (max-width: ").concat(breakpoints[br2] - 0.02, "px)");
142
- };
143
- /**
144
- * Media query to apply from the given breakpoint until the next, just for its
145
- * full range
146
- */
147
- var only = function (br) {
148
- var brNext = getNext(br);
149
- return brNext ? between(br, brNext) : min(br);
150
- };
151
- return {
152
- min: min,
153
- max: max,
154
- up: up,
155
- down: down,
156
- between: between,
157
- only: only,
158
- };
159
- }
160
- exports.generateMediaQueries = generateMediaQueries;
@@ -1,52 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.spacingVertical = exports.spacingBottom = exports.spacingTop = exports.spacing = void 0;
4
- function _spacing(theme, size, factor, property, direction, devices) {
5
- if (size === void 0) { size = "md"; }
6
- if (factor === void 0) { factor = 1; }
7
- if (property === void 0) { property = "padding"; }
8
- if (direction === void 0) { direction = "top"; }
9
- if (devices === void 0) { devices = ["mobile", "tablet", "desktop"]; }
10
- var breakpoints = theme.breakpoints, DEVICES = theme.devices, SPACES = theme.spaces;
11
- var css = "";
12
- var prop = "".concat(property, "-").concat(direction);
13
- if (!devices.length || devices[0] === "mobile") {
14
- css += "@media(max-width: ".concat(breakpoints[DEVICES.mobile], "px){\n ").concat(prop, ": ").concat(SPACES["mobile"][size] * factor, "px;\n }");
15
- }
16
- else {
17
- for (var index = 0; index < devices.length; index++) {
18
- var device = devices[index];
19
- if (device === "mobile") {
20
- css += "".concat(prop, ": ").concat(SPACES[device][size] * factor, "px;");
21
- }
22
- else if (device === "tablet") {
23
- css += "@media(min-width: ".concat(breakpoints[DEVICES.tablet], "px){\n ").concat(prop, ": ").concat(SPACES["tablet"][size] * factor, "px;\n }");
24
- }
25
- else if (device === "desktop") {
26
- css += "@media(min-width: ".concat(breakpoints[DEVICES.desktop], "px){\n ").concat(prop, ": ").concat(SPACES["desktop"][size] * factor, "px;\n }");
27
- }
28
- }
29
- }
30
- return css;
31
- }
32
- function spacing(size, factor, property, direction, devices) {
33
- if (direction === "vertical") {
34
- return (_spacing(this, size, factor, property, "top", devices) +
35
- _spacing(this, size, factor, property, "bottom", devices));
36
- }
37
- return _spacing(this, size, factor, property, direction, devices);
38
- }
39
- exports.spacing = spacing;
40
- function spacingTop(size, factor, property, devices) {
41
- return _spacing(this, size, factor, property, "top", devices);
42
- }
43
- exports.spacingTop = spacingTop;
44
- function spacingBottom(size, factor, property, devices) {
45
- return _spacing(this, size, factor, property, "bottom", devices);
46
- }
47
- exports.spacingBottom = spacingBottom;
48
- function spacingVertical(size, factor, property, devices) {
49
- return (_spacing(this, size, factor, property, "top", devices) +
50
- _spacing(this, size, factor, property, "bottom", devices));
51
- }
52
- exports.spacingVertical = spacingVertical;
@@ -1,17 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.stateFocus = exports.invisible = exports.ellipsis = exports.centered = exports.overlay = exports.inset0 = exports.colStretch = void 0;
4
- function colStretch(direction, bg) {
5
- return "\n background: ".concat(bg, ";\n position: relative;\n\n &:before{\n z-index: -1;\n content: '';\n position: absolute;\n right: ").concat(direction === "left" ? "100%" : "-100vw", ";\n left: ").concat(direction === "right" ? "100%" : "-100vw", ";\n top: 0;\n bottom: 0;\n background: ").concat(bg, ";\n }\n ");
6
- }
7
- exports.colStretch = colStretch;
8
- /** @see https://caniuse.com/?search=inset */
9
- exports.inset0 = "top:0;left:0;right:0;bottom:0;";
10
- exports.overlay = "position: absolute;".concat(exports.inset0);
11
- exports.centered = "display: flex;align-items: center;justify-content: center;";
12
- exports.ellipsis = "overflow: hidden;text-overflow: ellipsis;white-space: nowrap;";
13
- /**
14
- * @see import("@mui/utils").visuallyHidden https://github.com/mui-org/material-ui/blob/master/packages/mui-utils/src/visuallyHidden.ts
15
- */
16
- exports.invisible = "border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;white-space: nowrap;width: 1px;";
17
- exports.stateFocus = "outline: 0px;box-shadow: 0 0 0 0.2rem rgba(200, 200, 200, 0.25);";
@@ -1,61 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ThemeVanillaProvider = exports.ThemeVanillaContext = exports.getInitialThemeFromClient = exports.getInitialThemeFromRequest = exports.THEME_DEFAULT = exports.THEME_KEY = void 0;
4
- var tslib_1 = require("tslib");
5
- var jsx_runtime_1 = require("react/jsx-runtime");
6
- var react_1 = require("react");
7
- var utils_1 = require("@koine/utils");
8
- var hooks_1 = require("../hooks");
9
- exports.THEME_KEY = "theme";
10
- exports.THEME_DEFAULT = "light";
11
- var getInitialThemeFromRequest = function (cookie) {
12
- if (cookie) {
13
- var parsed = (0, utils_1.parseCookie)(cookie);
14
- return parsed === null || parsed === void 0 ? void 0 : parsed.theme;
15
- }
16
- return exports.THEME_DEFAULT;
17
- };
18
- exports.getInitialThemeFromRequest = getInitialThemeFromRequest;
19
- var getInitialThemeFromClient = function () {
20
- if (typeof window !== "undefined" && window.localStorage) {
21
- var storedPrefs = window.localStorage.getItem(exports.THEME_KEY);
22
- if (typeof storedPrefs === "string") {
23
- return storedPrefs;
24
- }
25
- var userMedia = window.matchMedia("(prefers-color-scheme: dark)");
26
- if (userMedia.matches) {
27
- return "dark";
28
- }
29
- }
30
- return exports.THEME_DEFAULT;
31
- };
32
- exports.getInitialThemeFromClient = getInitialThemeFromClient;
33
- exports.ThemeVanillaContext = (0, react_1.createContext)({
34
- theme: "light",
35
- setTheme: undefined,
36
- });
37
- var ThemeVanillaProvider = function (_a) {
38
- var initialTheme = _a.initialTheme, children = _a.children;
39
- var _b = (0, react_1.useState)(initialTheme), theme = _b[0], setTheme = _b[1];
40
- var rawSetTheme = function (rawTheme) {
41
- if (!rawTheme || !utils_1.isBrowser) {
42
- return;
43
- }
44
- var root = window.document.documentElement;
45
- var isDark = rawTheme === "dark";
46
- root.classList.remove(isDark ? "light" : "dark");
47
- root.classList.add(rawTheme);
48
- localStorage.setItem(exports.THEME_KEY, rawTheme);
49
- (0, utils_1.setCookie)(exports.THEME_KEY, rawTheme);
50
- };
51
- (0, hooks_1.useMount)(function () {
52
- var theme = (0, exports.getInitialThemeFromClient)();
53
- setTheme(theme);
54
- rawSetTheme(theme);
55
- });
56
- (0, hooks_1.useUpdateEffect)(function () {
57
- rawSetTheme(theme);
58
- }, [theme]);
59
- return ((0, jsx_runtime_1.jsx)(exports.ThemeVanillaContext.Provider, tslib_1.__assign({ value: { theme: theme, setTheme: setTheme } }, { children: children })));
60
- };
61
- exports.ThemeVanillaProvider = ThemeVanillaProvider;
@@ -1,45 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useTheme = exports.createTheme = exports.breakpoints = void 0;
4
- var tslib_1 = require("tslib");
5
- var styled_components_1 = require("styled-components");
6
- var DEFAULT_BREAKPOINTS = {
7
- xs: 0,
8
- sm: 440,
9
- md: 768,
10
- lg: 1024,
11
- xl: 1368,
12
- xxl: 1690,
13
- };
14
- /**
15
- * You can override the default breakpoints through the .env variable
16
- *
17
- * FIXME: find a better way to configure it, the problem is that we use the media
18
- * queries within this pre-compiled library and thrught it was better to avoid
19
- * using theming props for a more ergonomic usage.
20
- *
21
- * ```.env
22
- * BREAKPOINTS=xs:0,sm:440,md:768,lg:1024,xl:1368,xxl:1690
23
- * ```
24
- */
25
- exports.breakpoints = process.env["BREAKPOINTS"]
26
- ? process.env["BREAKPOINTS"].split(",").reduce(function (map, pair) {
27
- var _a = pair.split(":"), key = _a[0], value = _a[1];
28
- map[key] = parseFloat(value);
29
- return map;
30
- }, {})
31
- : DEFAULT_BREAKPOINTS;
32
- var themeDefault = {
33
- maxWidth: exports.breakpoints.xxl,
34
- breakpoints: exports.breakpoints,
35
- devices: {
36
- mobile: "sm",
37
- tablet: "md",
38
- desktop: "lg",
39
- },
40
- };
41
- var createTheme = function (options) {
42
- return (tslib_1.__assign(tslib_1.__assign({}, themeDefault), options));
43
- };
44
- exports.createTheme = createTheme;
45
- exports.useTheme = styled_components_1.useTheme;
package/node/tw/index.js DELETED
@@ -1,36 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineDialog = void 0;
4
- var 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/tw/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";
package/node/twm/index.js DELETED
@@ -1,36 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineDialog = void 0;
4
- var 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 framer_1 = require("../Dialog/tw/framer");
16
- Object.defineProperty(exports, "KoineDialog", { enumerable: true, get: function () { return framer_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";
package/node/types.js DELETED
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });