@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,5 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Collapsable"), exports);
5
- // export * from "./CollapsableReach";
@@ -1,26 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Debug = 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 Root = styled_components_1.default.div `
8
- background: #f4f4f4;
9
- border: 1px solid #ddd;
10
- border-left: 3px solid #f36d33;
11
- color: #666;
12
- page-break-inside: avoid;
13
- font-family: monospace;
14
- font-size: small;
15
- line-height: 1.6;
16
- margin-bottom: 1.6em;
17
- max-width: 100%;
18
- overflow: auto;
19
- padding: 1em 1.5em;
20
- display: block;
21
- word-wrap: break-word;
22
- `;
23
- const Debug = ({ data }) => {
24
- return (0, jsx_runtime_1.jsx)(Root, { children: JSON.stringify(data, undefined, 2) });
25
- };
26
- exports.Debug = Debug;
@@ -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("./Debug"), exports);
@@ -1,65 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineDetails = exports.Content = exports.Body = exports.Summary = exports.Root = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_1 = require("react");
6
- const useWindowSize_1 = require("../hooks/useWindowSize");
7
- const helpers_1 = require("../helpers");
8
- const useId_1 = require("../hooks/useId");
9
- exports.Root = "details";
10
- exports.Summary = "summary";
11
- exports.Body = "div";
12
- exports.Content = "div";
13
- /**
14
- * FIXME: it actually works even without forwardRef, check if we do need it
15
- *
16
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
17
- */
18
- const DetailsWithRef = (0, react_1.forwardRef)(function Details({ id, open: propOpen, recalc, summary, children, Root: _Root, Summary: _Summary, Body: _Body, Content: _Content, onChange, ...props }, ref) {
19
- const isControlled = typeof propOpen !== "undefined";
20
- const [stateOpen, setStateOpen] = (0, react_1.useState)(propOpen);
21
- const [height, setHeight] = (0, react_1.useState)(0);
22
- const hash = id ? `#${id}` : "";
23
- const winSize = (0, useWindowSize_1.useWindowSize)();
24
- const open = isControlled ? propOpen : stateOpen;
25
- const [overflow, setOverflow] = (0, react_1.useState)(open ? "unset" : "hidden");
26
- const content = (0, react_1.useRef)(null);
27
- const defaultId = (0, useId_1.useId)();
28
- id = id || defaultId;
29
- const handleClick = (0, react_1.useCallback)(() => {
30
- if (hash) {
31
- window.history.replaceState(null, "", open ? window.location.pathname + window.location.search : hash);
32
- }
33
- if (onChange) {
34
- onChange();
35
- }
36
- if (!isControlled) {
37
- setStateOpen((prevOpen) => !prevOpen);
38
- }
39
- }, [open, hash, onChange, isControlled]);
40
- (0, react_1.useEffect)(() => {
41
- if (content.current) {
42
- setHeight(Math.ceil(content.current.offsetHeight));
43
- }
44
- }, [winSize, recalc]);
45
- // deeplink on mount
46
- (0, react_1.useEffect)(() => {
47
- if (!isControlled && hash && window.location.hash === hash) {
48
- setStateOpen(true);
49
- }
50
- }, [hash, isControlled]);
51
- return ((0, jsx_runtime_1.jsxs)(exports.Root, { ...props, open: open || false, children: [(0, jsx_runtime_1.jsx)(exports.Summary, { "$open": open, onClick: handleClick, children: summary || " " }), (0, jsx_runtime_1.jsx)(exports.Body, { "$open": open, style: { overflow }, children: (0, jsx_runtime_1.jsx)(exports.Content
52
- // ref={content}
53
- , { "$open": open,
54
- // aria-expanded={open}
55
- // aria-label={open ? ariaCollapse : ariaExpand}
56
- style: {
57
- pointerEvents: open ? "all" : "none",
58
- }, children: children }) })] }));
59
- });
60
- exports.KoineDetails = (0, helpers_1.extendComponent)(DetailsWithRef, {
61
- Root: exports.Root,
62
- Summary: exports.Summary,
63
- Body: exports.Body,
64
- Content: exports.Content,
65
- });
@@ -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("./Details"), exports);
@@ -1,82 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = 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 ModalUnstyled_1 = tslib_1.__importDefault(require("@mui/base/ModalUnstyled"));
8
- const md_1 = require("react-icons/md");
9
- const helpers_1 = require("../helpers");
10
- exports.Root = ModalUnstyled_1.default;
11
- exports.Backdrop = "div";
12
- exports.Container = "div";
13
- exports.Paper = "div";
14
- exports.Close = "button";
15
- exports.Header = "div";
16
- exports.Body = "div";
17
- // const Dialog = ({
18
- // children,
19
- // title,
20
- // $scrollPaper,
21
- // Root: _Root,
22
- // Backdrop: _Backdrop,
23
- // Container: _Container,
24
- // Paper: _Paper,
25
- // Close: _Close,
26
- // Header: _Header,
27
- // Body: _Body,
28
- // ...props
29
- // }: KoineDialogProps) => (
30
- // <Root BackdropComponent={Backdrop} onBackdropClick={props.onClose} {...props}>
31
- // <Container $scrollPaper={$scrollPaper}>
32
- // <Paper aria-label={title || ""} $scrollPaper={$scrollPaper}>
33
- // {title && <Header>{title}</Header>}
34
- // <Close onClick={props.onClose}>
35
- // <IconClose />
36
- // </Close>
37
- // <Body>{children}</Body>
38
- // </Paper>
39
- // </Container>
40
- // </Root>
41
- // );
42
- /**
43
- *
44
- * Main differences from [Mui Dialog](https://mui.com/material-ui/react-dialog):
45
- *
46
- * - By default uses `scroll="body"` instead of paper.
47
- * - Optionally uses `framer-motion` for animations
48
- * - Uses backdrop blur by default
49
- *
50
- * FIXME: it actually works even without forwardRef, check if we do need it
51
- */
52
- const DialogWithRef = (0, react_1.forwardRef)(function Dialog({ children, title, $scrollPaper, Root: _Root, Backdrop: _Backdrop, Container: _Container, Paper: _Paper, Close: _Close, Header: _Header, Body: _Body, onClose, ...props }, ref) {
53
- // click handling is taken from
54
- // @see https://github.com/mui/material-ui/blob/c758b6c0b30f0831110458a746690b33147c45df/packages/mui-material/src/Dialog/Dialog.js#L205-L226
55
- const backdropClick = (0, react_1.useRef)();
56
- const handleMouseDown = (event) => {
57
- // We don't want to close the dialog when clicking the dialog content.
58
- // Make sure the event starts and ends on the same DOM element.
59
- backdropClick.current = event.target === event.currentTarget;
60
- };
61
- const handleBackdropClick = (event) => {
62
- // Ignore the events not coming from the "backdrop".
63
- if (!backdropClick.current) {
64
- return;
65
- }
66
- backdropClick.current = null;
67
- // if (onBackdropClick) onBackdropClick(event);
68
- if (onClose) {
69
- onClose(event, "backdropClick");
70
- }
71
- };
72
- return ((0, jsx_runtime_1.jsx)(exports.Root, { BackdropComponent: exports.Backdrop, onClick: handleBackdropClick, onClose: onClose, ref: ref, ...props, children: (0, jsx_runtime_1.jsx)(exports.Container, { "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown, children: (0, jsx_runtime_1.jsxs)(exports.Paper, { "aria-label": title || "", "$scrollPaper": $scrollPaper, children: [title && (0, jsx_runtime_1.jsx)(exports.Header, { children: title }), (0, jsx_runtime_1.jsx)(exports.Close, { onClick: onClose, children: (0, jsx_runtime_1.jsx)(md_1.MdClear, {}) }), (0, jsx_runtime_1.jsx)(exports.Body, { children: children })] }) }) }));
73
- });
74
- exports.KoineDialog = (0, helpers_1.extendComponent)(DialogWithRef, {
75
- Root: exports.Root,
76
- Backdrop: exports.Backdrop,
77
- Container: exports.Container,
78
- Paper: exports.Paper,
79
- Close: exports.Close,
80
- Header: exports.Header,
81
- Body: exports.Body,
82
- });
@@ -1,23 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
4
- const tslib_1 = require("tslib");
5
- const helpers_1 = require("../../helpers");
6
- const _ = tslib_1.__importStar(require("../DialogMui"));
7
- // export type { KoineDialogProps } from "../DialogMui";
8
- exports.Root = (0, helpers_1.classed)(_.Root) `dialog`;
9
- exports.Backdrop = (0, helpers_1.classed)(_.Backdrop) `dialogBackdrop`;
10
- exports.Container = (0, helpers_1.classed)(_.Container) `dialogContainer`;
11
- exports.Paper = (0, helpers_1.classed)(_.Paper) `dialogPaper`;
12
- exports.Close = (0, helpers_1.classed)(_.Close) `"dialogClose`;
13
- exports.Header = (0, helpers_1.classed)(_.Header) `dialogHeader`;
14
- exports.Body = (0, helpers_1.classed)(_.Body) `dialogBody`;
15
- exports.KoineDialog = (0, helpers_1.extendComponent)(_.KoineDialog, {
16
- Root: exports.Root,
17
- Backdrop: exports.Backdrop,
18
- Container: exports.Container,
19
- Paper: exports.Paper,
20
- Close: exports.Close,
21
- Header: exports.Header,
22
- Body: exports.Body,
23
- });
@@ -1,5 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineDialog = void 0;
4
- var DialogMui_1 = require("./DialogMui");
5
- Object.defineProperty(exports, "KoineDialog", { enumerable: true, get: function () { return DialogMui_1.KoineDialog; } });
@@ -1,51 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineDialog = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_1 = require("react");
6
- const md_1 = require("react-icons/md");
7
- const framer_motion_1 = require("framer-motion");
8
- const helpers_1 = require("../../helpers");
9
- const index_1 = require("./index");
10
- const DialogMui_1 = require("../DialogMui");
11
- /**
12
- * About nested `AnimatePresence` and animated dialogs with framer @see:
13
- *
14
- * - https://github.com/framer/motion/issues/478
15
- * - https://codesandbox.io/s/clever-banzai-7km49?file=/src/Modal.js
16
- */
17
- const Dialog = (0, react_1.forwardRef)(function Dialog({ children, title, $scrollPaper, Root, Backdrop, Container, Paper, Close, Header, Body, mBackdrop, mPaper, onClose, ...props }, ref) {
18
- const BackdropMotion = (0, react_1.useMemo)(() => (props) => ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: props.open && (0, jsx_runtime_1.jsx)(Backdrop, { ...mBackdrop, ...props }) })), [Backdrop, mBackdrop]);
19
- // FIXME: extract this logic either in a useDialog hook or in a useclickOutside hook
20
- // click handling is taken from
21
- // @see https://github.com/mui/material-ui/blob/c758b6c0b30f0831110458a746690b33147c45df/packages/mui-material/src/Dialog/Dialog.js#L205-L226
22
- const backdropClick = (0, react_1.useRef)();
23
- const handleMouseDown = (event) => {
24
- // We don't want to close the dialog when clicking the dialog content.
25
- // Make sure the event starts and ends on the same DOM element.
26
- backdropClick.current = event.target === event.currentTarget;
27
- };
28
- const handleBackdropClick = (event) => {
29
- // Ignore the events not coming from the "backdrop".
30
- if (!backdropClick.current) {
31
- return;
32
- }
33
- backdropClick.current = null;
34
- // if (onBackdropClick) onBackdropClick(event);
35
- if (onClose) {
36
- onClose(event, "backdropClick");
37
- }
38
- };
39
- return ((0, jsx_runtime_1.jsx)(Root, { keepMounted: true, BackdropComponent: BackdropMotion, onClick: handleBackdropClick, onClose: onClose, ref: ref, ...props, style: (0, index_1.mRootStyle)(props), children: (0, jsx_runtime_1.jsx)(Container, { "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: props.open && (
40
- // @ts-expect-error framer props collision...
41
- (0, jsx_runtime_1.jsxs)(Paper, { ...mPaper, "aria-label": title || "", "$scrollPaper": $scrollPaper, children: [title && (0, jsx_runtime_1.jsx)(Header, { children: title }), (0, jsx_runtime_1.jsx)(Close, { onClick: onClose, children: (0, jsx_runtime_1.jsx)(md_1.MdClear, {}) }), (0, jsx_runtime_1.jsx)(Body, { children: children })] })) }) }) }));
42
- });
43
- exports.KoineDialog = (0, helpers_1.extendComponent)(Dialog, {
44
- Root: DialogMui_1.Root,
45
- Backdrop: (0, framer_motion_1.m)(DialogMui_1.Backdrop),
46
- Container: DialogMui_1.Container,
47
- Paper: (0, framer_motion_1.m)(DialogMui_1.Paper),
48
- Close: DialogMui_1.Close,
49
- Header: DialogMui_1.Header,
50
- Body: DialogMui_1.Body,
51
- });
@@ -1,35 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.dialogPaperMotion = exports.dialogBackdropMotion = void 0;
4
- const tslib_1 = require("tslib");
5
- tslib_1.__exportStar(require("./index"), exports);
6
- exports.dialogBackdropMotion = {
7
- initial: {
8
- opacity: 0,
9
- },
10
- animate: {
11
- backdropFilter: "blur(10px)",
12
- opacity: 1,
13
- },
14
- exit: {
15
- backdropFilter: "blur(0px)",
16
- opacity: 0,
17
- },
18
- };
19
- exports.dialogPaperMotion = {
20
- initial: {
21
- // scale: .9,
22
- translateY: -60,
23
- opacity: 0,
24
- },
25
- animate: {
26
- // scale: 1,
27
- translateY: 0,
28
- opacity: 1,
29
- },
30
- exit: {
31
- // scale: 0.9,
32
- translateY: 60,
33
- opacity: 0,
34
- },
35
- };
@@ -1,8 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.mRootStyle = void 0;
4
- const mRootStyle = (props) => ({
5
- pointerEvents: props.open ? "all" : "none",
6
- ...(props.style || {}),
7
- });
8
- exports.mRootStyle = mRootStyle;
@@ -1,65 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
4
- const tslib_1 = require("tslib");
5
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
6
- const helpers_1 = require("../../helpers");
7
- const styled_1 = require("../../styles/styled");
8
- const Buttons_1 = require("../../Buttons");
9
- const _ = tslib_1.__importStar(require("../DialogMui"));
10
- exports.Root = (0, styled_components_1.default)(_.Root) `
11
- z-index: 1300;
12
- position: fixed;
13
- ${styled_1.inset0}
14
- `;
15
- // export const Backdrop = (props) => {
16
- // return <div {...props} />;
17
- // }
18
- exports.Backdrop = (0, styled_components_1.default)(_.Backdrop) `
19
- z-index: -1;
20
- position: fixed;
21
- ${styled_1.inset0}
22
- backdrop-filter: blur(0px);
23
- -webkit-tap-highlight-color: transparent;
24
- `;
25
- /**
26
- * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L64-L85
27
- */
28
- exports.Container = (0, styled_components_1.default)(_.Container) `
29
- height: 100%;
30
- outline: 0;
31
- ${(p) => p.$scrollPaper
32
- ? "display: flex; justify-content: center; align-items: center;"
33
- : "overflow: hidden auto; text-align: center; &:after { content: ''; display: inline-block; vertical-align: middle; height: 100%; width: 0; }"}
34
- `;
35
- /**
36
- * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L104-L157
37
- */
38
- exports.Paper = (0, styled_components_1.default)(_.Paper) `
39
- position: relative;
40
- ${(p) => p.$scrollPaper
41
- ? "display: flex; flex-direction: column; max-height: calc(100%-64px);"
42
- : "display: inline-block; vertical-align: middle; text-align: initial;"}
43
- `;
44
- exports.Close = (0, styled_components_1.default)(Buttons_1.IconButton) `
45
- position: absolute;
46
- `;
47
- exports.Header = (0, styled_components_1.default)(_.Header) ``;
48
- /**
49
- * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/DialogContent/DialogContent.js#L29-L44
50
- */
51
- exports.Body = (0, styled_components_1.default)(_.Body) `
52
- flex: 1 1 auto;
53
- -webkit-overflow-scrolling: touch;
54
- overflow-y: auto;
55
- overflow: auto;
56
- `;
57
- exports.KoineDialog = (0, helpers_1.extendComponent)(_.KoineDialog, {
58
- Root: exports.Root,
59
- Backdrop: exports.Backdrop,
60
- Container: exports.Container,
61
- Paper: exports.Paper,
62
- Close: exports.Close,
63
- Header: exports.Header,
64
- Body: exports.Body,
65
- });
@@ -1,19 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineDialog = void 0;
4
- const framer_motion_1 = require("framer-motion");
5
- const helpers_1 = require("../../helpers");
6
- const basic_1 = require("../m/basic");
7
- const bare_1 = require("../m/bare");
8
- const bare_2 = require("./bare");
9
- exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
10
- Root: bare_2.Root,
11
- Backdrop: (0, framer_motion_1.m)(bare_2.Backdrop),
12
- Container: bare_2.Container,
13
- Paper: (0, framer_motion_1.m)(bare_2.Paper),
14
- Close: bare_2.Close,
15
- Header: bare_2.Header,
16
- Body: bare_2.Body,
17
- mBackdrop: basic_1.dialogBackdropMotion,
18
- mPaper: basic_1.dialogPaperMotion,
19
- });
@@ -1,19 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineDialog = void 0;
4
- const framer_motion_1 = require("framer-motion");
5
- const helpers_1 = require("../../helpers");
6
- const basic_1 = require("../m/basic");
7
- const bare_1 = require("../m/bare");
8
- const material_1 = require("./material");
9
- exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
10
- Root: material_1.Root,
11
- Backdrop: (0, framer_motion_1.m)(material_1.Backdrop),
12
- Container: material_1.Container,
13
- Paper: (0, framer_motion_1.m)(material_1.Paper),
14
- Close: material_1.Close,
15
- Header: material_1.Header,
16
- Body: material_1.Body,
17
- mBackdrop: basic_1.dialogBackdropMotion,
18
- mPaper: basic_1.dialogPaperMotion,
19
- });
@@ -1,45 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
4
- const tslib_1 = require("tslib");
5
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
6
- const helpers_1 = require("../../helpers");
7
- const bare_1 = require("./bare");
8
- exports.Root = (0, styled_components_1.default)(bare_1.KoineDialog.Root) ``;
9
- exports.Backdrop = (0, styled_components_1.default)(bare_1.KoineDialog.Backdrop) `
10
- background: rgba(0, 0, 0, 0.5);
11
- filter: backdrop-blur(4px);
12
- `;
13
- exports.Container = (0, styled_components_1.default)(bare_1.KoineDialog.Container) ``;
14
- exports.Paper = (0, styled_components_1.default)(bare_1.KoineDialog.Paper) `
15
- max-width: 640px;
16
- margin: 64px;
17
- border-radius: 4px;
18
- background: white;
19
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
20
- `;
21
- exports.Close = (0, styled_components_1.default)(bare_1.KoineDialog.Close) `
22
- position: absolute;
23
- top: 0;
24
- right: 0;
25
- padding: 8px;
26
- font-size: 2rem;
27
- opacity: 0.5;
28
- `;
29
- exports.Header = (0, styled_components_1.default)(bare_1.KoineDialog.Header) `
30
- padding: 16px;
31
- font-size: 1.25rem;
32
- `;
33
- exports.Body = (0, styled_components_1.default)(bare_1.KoineDialog.Body) `
34
- padding: 16px;
35
- border-top: 1px solid rgba(0, 0, 0, 0.08);
36
- `;
37
- exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
38
- Root: exports.Root,
39
- Backdrop: exports.Backdrop,
40
- Container: exports.Container,
41
- Paper: exports.Paper,
42
- Close: exports.Close,
43
- Header: exports.Header,
44
- Body: exports.Body,
45
- });
@@ -1,40 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
4
- const tslib_1 = require("tslib");
5
- const helpers_1 = require("../../helpers");
6
- const _ = tslib_1.__importStar(require("../DialogMui"));
7
- exports.Root = (0, helpers_1.classed)(_.Root) `< class="dialog fixed z-[1300] inset-0`;
8
- exports.Backdrop = (0, helpers_1.classed)(_.Backdrop) `< class="dialogBackdrop fixed -z-[1] inset-0 [-webkit-tap-highlight-color:transparent]`;
9
- /**
10
- * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L64-L85
11
- */
12
- exports.Container = (0, helpers_1.classed)(_.Container) `< class="dialogContainer h-full outline-0 ${(p) => p.$scrollPaper
13
- ? "flex justify-center items-center"
14
- : "overflow-y-auto overflow-x-hidden text-center [after:content:''] after:inline-block after:align-middle after:h-full after:w-0"}`;
15
- /**
16
- * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L104-L157
17
- */
18
- exports.Paper = (0, helpers_1.classed)(_.Paper) `< class="dialogPaper relative ${(p) => p.$scrollPaper
19
- ? "flex flex-col max-h-[calc(100%-64px)]"
20
- : "inline-block align-middle [text-align:initial]"}`;
21
- exports.Close = (0, helpers_1.classed)(_.Close) `< class="dialogClose`;
22
- exports.Header = (0, helpers_1.classed)(_.Header) `< class="dialogHeader`;
23
- /**
24
- * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/DialogContent/DialogContent.js#L29-L44
25
- * The arbitrary rule webkit-overflow-scrolling is to add iOS momentum scrolling for iOS < 13.0,
26
- * this was removed from tailiwnd 2.0 on
27
- *
28
- * @see https://github.com/tailwindlabs/tailwindcss.com/issues/483
29
- * @see https://v2.tailwindcss.com/docs/upgrading-to-v2#the-scrolling-touch-and-scrolling-auto-utilities-have-been-removed
30
- */
31
- exports.Body = (0, helpers_1.classed)(_.Body) `< class="dialogBody flex-1 basis-auto overflow-y-auto [-webkit-overflow-scrolling:touch]`;
32
- exports.KoineDialog = (0, helpers_1.extendComponent)(_.KoineDialog, {
33
- Root: exports.Root,
34
- Backdrop: exports.Backdrop,
35
- Container: exports.Container,
36
- Paper: exports.Paper,
37
- Close: exports.Close,
38
- Header: exports.Header,
39
- Body: exports.Body,
40
- });
@@ -1,21 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
4
- const helpers_1 = require("../../helpers");
5
- const bare_1 = require("./bare");
6
- exports.Root = (0, helpers_1.classed)(bare_1.KoineDialog.Root) ``;
7
- exports.Backdrop = (0, helpers_1.classed)(bare_1.KoineDialog.Backdrop) `< class="bg-white/[.5] backdrop-blur-sm`;
8
- exports.Container = (0, helpers_1.classed)(bare_1.KoineDialog.Container) ``;
9
- exports.Paper = (0, helpers_1.classed)(bare_1.KoineDialog.Paper) `< class="bg-white shadow-xl m-8 max-w-screen-sm border border-gray-400`;
10
- exports.Close = (0, helpers_1.classed)(bare_1.KoineDialog.Close) `< class="absolute top-0 right-0 p-8 text-2xl opacity-20 hover:opacity-100 focus:opacity-100`;
11
- exports.Header = (0, helpers_1.classed)(bare_1.KoineDialog.Header) `< class="p-8 text-2xl bold italic`;
12
- exports.Body = (0, helpers_1.classed)(bare_1.KoineDialog.Body) `< class="p-8 pt-4`;
13
- exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
14
- Root: exports.Root,
15
- Backdrop: exports.Backdrop,
16
- Container: exports.Container,
17
- Paper: exports.Paper,
18
- Close: exports.Close,
19
- Header: exports.Header,
20
- Body: exports.Body,
21
- });
@@ -1,19 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineDialog = void 0;
4
- const framer_motion_1 = require("framer-motion");
5
- const helpers_1 = require("../../helpers");
6
- const basic_1 = require("../m/basic");
7
- const bare_1 = require("../m/bare");
8
- const bare_2 = require("./bare");
9
- exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
10
- Root: bare_2.Root,
11
- Backdrop: (0, framer_motion_1.m)(bare_2.Backdrop),
12
- Container: bare_2.Container,
13
- Paper: (0, framer_motion_1.m)(bare_2.Paper),
14
- Close: bare_2.Close,
15
- Header: bare_2.Header,
16
- Body: bare_2.Body,
17
- mBackdrop: basic_1.dialogBackdropMotion,
18
- mPaper: basic_1.dialogPaperMotion,
19
- });
@@ -1,19 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineDialog = void 0;
4
- const framer_motion_1 = require("framer-motion");
5
- const helpers_1 = require("../../helpers");
6
- const basic_1 = require("../m/basic");
7
- const bare_1 = require("../m/bare");
8
- const material_1 = require("./material");
9
- exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
10
- Root: material_1.Root,
11
- Backdrop: (0, framer_motion_1.m)(material_1.Backdrop),
12
- Container: material_1.Container,
13
- Paper: (0, framer_motion_1.m)(material_1.Paper),
14
- Close: material_1.Close,
15
- Header: material_1.Header,
16
- Body: material_1.Body,
17
- mBackdrop: basic_1.dialogBackdropMotion,
18
- mPaper: basic_1.dialogPaperMotion,
19
- });
@@ -1,21 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
4
- const helpers_1 = require("../../helpers");
5
- const bare_1 = require("./bare");
6
- exports.Root = (0, helpers_1.classed)(bare_1.KoineDialog.Root) ``;
7
- exports.Backdrop = (0, helpers_1.classed)(bare_1.KoineDialog.Backdrop) `< class="bg-black/[.5] backdrop-blur-sm`;
8
- exports.Container = (0, helpers_1.classed)(bare_1.KoineDialog.Container) ``;
9
- exports.Paper = (0, helpers_1.classed)(bare_1.KoineDialog.Paper) `< class="rounded bg-white shadow-xl m-8 max-w-screen-sm`;
10
- exports.Close = (0, helpers_1.classed)(bare_1.KoineDialog.Close) `< class="absolute top-0 right-0 p-4 text-2xl opacity-50`;
11
- exports.Header = (0, helpers_1.classed)(bare_1.KoineDialog.Header) `< class="p-4 text-xl`;
12
- exports.Body = (0, helpers_1.classed)(bare_1.KoineDialog.Body) `< class="p-4 border-t border-gray-200`;
13
- exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
14
- Root: exports.Root,
15
- Backdrop: exports.Backdrop,
16
- Container: exports.Container,
17
- Paper: exports.Paper,
18
- Close: exports.Close,
19
- Header: exports.Header,
20
- Body: exports.Body,
21
- });
@@ -1,29 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Editor = exports.EditorBar = 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 react_2 = require("@tiptap/react");
8
- const starter_kit_1 = tslib_1.__importDefault(require("@tiptap/starter-kit"));
9
- const components_1 = require("./components");
10
- const EditorBar = ({ editor }) => {
11
- const handleClick = (0, react_1.useCallback)((e, type) => {
12
- e.preventDefault();
13
- editor?.chain().focus()[`toggle${type}`]().run();
14
- }, [editor]);
15
- if (!editor) {
16
- return null;
17
- }
18
- return ((0, jsx_runtime_1.jsxs)(components_1.EditorBarRoot, { children: [(0, jsx_runtime_1.jsx)(components_1.EditorBarBtn, { onClick: (e) => handleClick(e, "Bold"), className: editor.isActive("bold") ? "is-active" : "", children: (0, jsx_runtime_1.jsx)(components_1.EditorIconBold, {}) }), (0, jsx_runtime_1.jsx)(components_1.EditorBarBtn, { onClick: (e) => handleClick(e, "Italic"), className: editor.isActive("bold") ? "is-active" : "", children: (0, jsx_runtime_1.jsx)(components_1.EditorIconItalic, {}) })] }));
19
- };
20
- exports.EditorBar = EditorBar;
21
- const Editor = ({ options, ...props }) => {
22
- const editor = (0, react_2.useEditor)({
23
- extensions: [starter_kit_1.default],
24
- content: "",
25
- ...(options || {}),
26
- });
27
- return ((0, jsx_runtime_1.jsxs)(components_1.EditorRoot, { children: [(0, jsx_runtime_1.jsx)(components_1.EditorGlobalStyles, {}), (0, jsx_runtime_1.jsx)(exports.EditorBar, { editor: editor }), (0, jsx_runtime_1.jsx)(react_2.EditorContent, { className: "EditorContent", editor: editor, ...props })] }));
28
- };
29
- exports.Editor = Editor;