@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.
- package/Forms/Toggle/useToggle.d.ts +1 -1
- package/Forms/Toggle/useToggle.js +1 -1
- package/package.json +6 -7
- package/node/Alert/Alert.js +0 -14
- package/node/Alert/index.js +0 -4
- package/node/Animations/Reveal.js +0 -21
- package/node/Animations/Underline.js +0 -8
- package/node/Animations/index.js +0 -6
- package/node/Animations/useReveal.js +0 -75
- package/node/Autocomplete/AutocompleteDownshift.js +0 -161
- package/node/Autocomplete/AutocompleteDownshiftMultiselect.js +0 -356
- package/node/Autocomplete/AutocompleteMui.js +0 -180
- package/node/Autocomplete/AutocompleteReach.js +0 -115
- package/node/Autocomplete/components.js +0 -37
- package/node/Autocomplete/helpers.js +0 -32
- package/node/Autocomplete/index.js +0 -7
- package/node/Bg/BgColor.js +0 -25
- package/node/Bg/BgPhoto.js +0 -20
- package/node/Bg/BgSvg.js +0 -16
- package/node/Bg/index.js +0 -6
- package/node/Breadcrumbs/Breadcrumbs.js +0 -31
- package/node/Breadcrumbs/index.js +0 -4
- package/node/Buttons/Button.js +0 -17
- package/node/Buttons/ButtonComposite.js +0 -32
- package/node/Buttons/ButtonFab.js +0 -9
- package/node/Buttons/ButtonLink.js +0 -15
- package/node/Buttons/IconButton.js +0 -10
- package/node/Buttons/index.js +0 -8
- package/node/Calendar/CalendarDaygridCell.js +0 -61
- package/node/Calendar/CalendarDaygridNav.js +0 -28
- package/node/Calendar/CalendarDaygridTable.js +0 -61
- package/node/Calendar/CalendarLegend.js +0 -20
- package/node/Calendar/calendar-api-google.js +0 -131
- package/node/Calendar/index.js +0 -9
- package/node/Calendar/types.js +0 -2
- package/node/Calendar/useCalendar.js +0 -187
- package/node/Calendar/utils.js +0 -215
- package/node/Carousel/Carousel.js +0 -381
- package/node/Carousel/CarouselCss.js +0 -27
- package/node/Carousel/index.js +0 -4
- package/node/Collapsable/Collapsable.js +0 -4
- package/node/Collapsable/CollapsableReach.js +0 -253
- package/node/Collapsable/index.js +0 -5
- package/node/Debug/Debug.js +0 -13
- package/node/Debug/index.js +0 -4
- package/node/Details/Details.js +0 -67
- package/node/Details/index.js +0 -4
- package/node/Dialog/DialogMui.js +0 -83
- package/node/Dialog/css/bare.js +0 -24
- package/node/Dialog/index.js +0 -5
- package/node/Dialog/m/bare.js +0 -55
- package/node/Dialog/m/basic.js +0 -35
- package/node/Dialog/m/index.js +0 -8
- package/node/Dialog/sc/bare.js +0 -46
- package/node/Dialog/sc/framer.js +0 -19
- package/node/Dialog/sc/framerMaterial.js +0 -19
- package/node/Dialog/sc/material.js +0 -24
- package/node/Dialog/tw/bare.js +0 -45
- package/node/Dialog/tw/elegant.js +0 -23
- package/node/Dialog/tw/framer.js +0 -19
- package/node/Dialog/tw/framerMaterial.js +0 -19
- package/node/Dialog/tw/material.js +0 -23
- package/node/Editor/Editor--tiptap.js +0 -31
- package/node/Editor/components.js +0 -15
- package/node/Editor/index.js +0 -4
- package/node/Favicon/FaviconTags.js +0 -19
- package/node/Favicon/index.js +0 -4
- package/node/Form/Form.js +0 -65
- package/node/Form/index.js +0 -4
- package/node/Form/sc/bare.js +0 -23
- package/node/Forms/Checkbox/Checkbox.js +0 -21
- package/node/Forms/Checkbox/index.js +0 -4
- package/node/Forms/Feedback/Feedback.js +0 -13
- package/node/Forms/Feedback/index.js +0 -4
- package/node/Forms/Field/Field.js +0 -52
- package/node/Forms/Field/FieldControl.js +0 -51
- package/node/Forms/Field/FieldHint.js +0 -7
- package/node/Forms/Field/index.js +0 -5
- package/node/Forms/Input/Input.js +0 -20
- package/node/Forms/Input/index.js +0 -4
- package/node/Forms/InputGroup/InputGroup.js +0 -19
- package/node/Forms/InputGroup/index.js +0 -4
- package/node/Forms/Label/Label.js +0 -9
- package/node/Forms/Label/index.js +0 -4
- package/node/Forms/Password/Password.js +0 -20
- package/node/Forms/Password/index.js +0 -4
- package/node/Forms/Radio/Radio.js +0 -28
- package/node/Forms/Radio/index.js +0 -4
- package/node/Forms/Switch/Switch.js +0 -23
- package/node/Forms/Switch/index.js +0 -4
- package/node/Forms/Textarea/Textarea.js +0 -15
- package/node/Forms/Textarea/TextareaRich.js +0 -31
- package/node/Forms/Textarea/index.js +0 -5
- package/node/Forms/Toggle/Toggle.js +0 -37
- package/node/Forms/Toggle/index.js +0 -4
- package/node/Forms/Toggle/useToggle.js +0 -149
- package/node/Forms/antispam.js +0 -61
- package/node/Forms/helpers.js +0 -52
- package/node/Forms/index.js +0 -19
- package/node/Forms/styles.js +0 -32
- package/node/Gauge/Gauge.js +0 -106
- package/node/Grid/Grid.js +0 -56
- package/node/Grid/index.js +0 -4
- package/node/Hamburger/Hamburger.js +0 -56
- package/node/Hamburger/index.js +0 -4
- package/node/Header/index.js +0 -4
- package/node/Header/useHeader.js +0 -34
- package/node/Hidden/Hidden.js +0 -13
- package/node/Hidden/index.js +0 -4
- package/node/Img/index.js +0 -4
- package/node/Img/sc/bare.js +0 -42
- package/node/Img/types.js +0 -2
- package/node/Link/Link.js +0 -7
- package/node/Link/LinkBlank.js +0 -21
- package/node/Link/index.js +0 -5
- package/node/Menu/Menu.js +0 -7
- package/node/Menu/index.js +0 -4
- package/node/MenuItem/MenuItem.js +0 -7
- package/node/MenuItem/index.js +0 -4
- package/node/Meta/Meta.js +0 -9
- package/node/Meta/index.js +0 -4
- package/node/NoJs/NoJs.js +0 -10
- package/node/NoJs/index.js +0 -4
- package/node/Pagination/PaginationNav.js +0 -65
- package/node/Pagination/PaginationResults.js +0 -15
- package/node/Pagination/index.js +0 -5
- package/node/Pill/Pill.js +0 -10
- package/node/Pill/index.js +0 -4
- package/node/Progress/ProgressCircular.js +0 -19
- package/node/Progress/ProgressLinear.js +0 -28
- package/node/Progress/ProgressOverlay.js +0 -28
- package/node/Progress/index.js +0 -6
- package/node/Rating/Rating.js +0 -76
- package/node/Rating/index.js +0 -57
- package/node/Select/SelectDownshift.js +0 -41
- package/node/Select/components.js +0 -15
- package/node/Select/index.js +0 -7
- package/node/Sidebar/Sidebar.js +0 -27
- package/node/Sidebar/index.js +0 -4
- package/node/Spacing/Spacing.js +0 -49
- package/node/Spacing/index.js +0 -4
- package/node/Sticky/Sticky.js +0 -222
- package/node/Sticky/StickyCss.js +0 -10
- package/node/Sticky/index.js +0 -4
- package/node/Tabs/TabsMui.js +0 -49
- package/node/Tabs/index.js +0 -4
- package/node/Tabs/sc/bare.js +0 -87
- package/node/Tabs/tw/bare.js +0 -20
- package/node/Tabs/tw/material.js +0 -21
- package/node/Tabs/useTabs.js +0 -48
- package/node/Typography/CopyPasteVisible.js +0 -7
- package/node/Typography/Native.js +0 -17
- package/node/Typography/ReadMore.js +0 -47
- package/node/Typography/TextLoop.js +0 -51
- package/node/Typography/TypeStairs.js +0 -53
- package/node/Typography/index.js +0 -8
- package/node/css/index.js +0 -36
- package/node/helpers/classed.js +0 -72
- package/node/helpers/extend-component.js +0 -16
- package/node/helpers/index.js +0 -5
- package/node/hooks/index.js +0 -18
- package/node/hooks/types.js +0 -2
- package/node/hooks/useAsyncFn.js +0 -40
- package/node/hooks/useDateLocale.js +0 -42
- package/node/hooks/useEffectOnce.js +0 -12
- package/node/hooks/useFirstMountState.js +0 -16
- package/node/hooks/useFocus.js +0 -15
- package/node/hooks/useId.js +0 -12
- package/node/hooks/useIsomorphicLayoutEffect.js +0 -11
- package/node/hooks/useMount.js +0 -13
- package/node/hooks/useMountedState.js +0 -19
- package/node/hooks/usePrevious.js +0 -12
- package/node/hooks/useScrollPosition.js +0 -84
- package/node/hooks/useScrollTo.js +0 -25
- package/node/hooks/useTraceUpdate.js +0 -25
- package/node/hooks/useUpdateEffect.js +0 -18
- package/node/hooks/useWindowSize.js +0 -17
- package/node/index.js +0 -8
- package/node/m/MotionProvider.js +0 -43
- package/node/m/index.js +0 -9
- package/node/m/lite.js +0 -4
- package/node/m/max.js +0 -4
- package/node/sc/index.js +0 -37
- package/node/scm/index.js +0 -36
- package/node/shared/index.js +0 -11
- package/node/styles/Body.js +0 -16
- package/node/styles/Global.js +0 -21
- package/node/styles/index.js +0 -10
- package/node/styles/media.js +0 -160
- package/node/styles/spacing.js +0 -52
- package/node/styles/styled.js +0 -17
- package/node/styles/theme--vanilla.js +0 -61
- package/node/styles/theme.js +0 -45
- package/node/tw/index.js +0 -36
- package/node/twm/index.js +0 -36
- 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
package/node/m/max.js
DELETED
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);
|
package/node/shared/index.js
DELETED
|
@@ -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);
|
package/node/styles/Body.js
DELETED
|
@@ -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;
|
package/node/styles/Global.js
DELETED
|
@@ -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;
|
package/node/styles/index.js
DELETED
|
@@ -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);
|
package/node/styles/media.js
DELETED
|
@@ -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;
|
package/node/styles/spacing.js
DELETED
|
@@ -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;
|
package/node/styles/styled.js
DELETED
|
@@ -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;
|
package/node/styles/theme.js
DELETED
|
@@ -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