@ttoss/components 1.27.3 → 1.28.1

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 (14) hide show
  1. package/LICENSE +674 -0
  2. package/README.md +67 -4
  3. package/dist/esm/index.js +47 -47
  4. package/dist/index.d.ts +25 -21
  5. package/dist/index.js +48 -46
  6. package/package.json +19 -19
  7. package/src/components/{Accordion/Accordion.tsx → Accordion.tsx} +1 -1
  8. package/src/components/{InstallPwa/InstallPwaUi.tsx → InstallPwa.tsx} +34 -0
  9. package/src/components/{Modal/Modal.tsx → Modal.tsx} +15 -17
  10. package/src/components/Toast.tsx +37 -0
  11. package/src/index.ts +4 -4
  12. package/src/components/InstallPwa/InstallPwa.tsx +0 -34
  13. package/src/components/Toast/Toast.tsx +0 -35
  14. package/src/index.spec.tsx +0 -11
package/README.md CHANGED
@@ -2,14 +2,77 @@
2
2
 
3
3
  ## About
4
4
 
5
- <strong>@ttoss/components</strong> is a set of React components that you can use to build your apps using ttoss technologies.
5
+ <strong>@ttoss/components</strong> is a set of React components that you can use to build your apps using ttoss ecosystem.
6
6
 
7
7
  ## Getting Started
8
8
 
9
9
  ### Install @ttoss/components
10
10
 
11
11
  ```shell
12
- $ yarn add @ttoss/{components,ui}
13
- # or
14
- $ npm install @ttoss/{components,ui}
12
+ pnpm add @ttoss/components @ttoss/ui
13
+ ```
14
+
15
+ ## Components
16
+
17
+ You can check all the components of the library `@ttoss/ui` on the [Storybook](https://storybook.ttoss.dev/?path=/story/components).
18
+
19
+ ### Modal
20
+
21
+ Modal uses [react-modal](https://reactcommunity.org/react-modal/) under the hood, so the props are the same. The only difference is that the styles are theme-aware. You can [style the modal](https://reactcommunity.org/react-modal/styles/) using theme tokens, except that [array as value](https://theme-ui.com/sx-prop#responsive-values) don't work.
22
+
23
+ ```tsx
24
+ import { Modal } from '@ttoss/components';
25
+ import { Box, Button, Flex, Text } from '@ttoss/ui';
26
+
27
+ /**
28
+ * See https://reactcommunity.org/react-modal/accessibility/#app-element
29
+ */
30
+ // Modal.setAppElement('#root'); // You can set the app element here or in prop `appElement`.
31
+
32
+ const Component = () => {
33
+ const [isOpen, setIsOpen] = React.useState(false);
34
+
35
+ return (
36
+ <Box id="modal-root">
37
+ <Modal
38
+ isOpen={isOpen}
39
+ onAfterOpen={action('onAfterOpen')}
40
+ onAfterClose={action('onAfterClose')}
41
+ onRequestClose={() => {
42
+ action('onRequestClose')();
43
+ setIsOpen(false);
44
+ }}
45
+ appElement={document.getElementById('modal-root') as HTMLElement}
46
+ style={{
47
+ overlay: {
48
+ backgroundColor: 'primary',
49
+ },
50
+ content: {
51
+ backgroundColor: 'secondary',
52
+ padding: ['lg', 'xl'], // Array as value don't work.
53
+ },
54
+ }}
55
+ >
56
+ <Flex>
57
+ <Text>This is a modal.</Text>
58
+ <Text>Here is the content.</Text>
59
+ <Button
60
+ onClick={() => {
61
+ setIsOpen(false);
62
+ }}
63
+ >
64
+ Close Modal
65
+ </Button>
66
+ </Flex>
67
+ </Modal>
68
+ <Button
69
+ onClick={() => {
70
+ setIsOpen(true);
71
+ }}
72
+ >
73
+ Open Modal
74
+ </Button>
75
+ </Box>
76
+ );
77
+ };
15
78
  ```
package/dist/esm/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
2
 
3
- // src/components/Accordion/Accordion.tsx
3
+ // src/components/Accordion.tsx
4
4
  import * as React from "react";
5
5
  import { AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel, Accordion as ReactAccessibleAccordion } from "react-accessible-accordion";
6
6
  import { Box, useTheme } from "@ttoss/ui";
@@ -24,7 +24,7 @@ var Accordion = ({
24
24
  marginBottom: 3
25
25
  },
26
26
  ".accordion__heading": {
27
- padding: 2,
27
+ padding: "md",
28
28
  border: "1px solid",
29
29
  borderColor: "black"
30
30
  },
@@ -55,10 +55,8 @@ Accordion.ItemButton = AccordionItemButton;
55
55
  Accordion.ItemHeading = AccordionItemHeading;
56
56
  Accordion.ItemPanel = AccordionItemPanel;
57
57
 
58
- // src/components/InstallPwa/InstallPwa.tsx
59
- import * as React3 from "react";
60
-
61
- // src/components/InstallPwa/InstallPwaUi.tsx
58
+ // src/components/InstallPwa.tsx
59
+ import * as React2 from "react";
62
60
  import { Button, Flex, Text } from "@ttoss/ui";
63
61
  import { jsx as jsx2, jsxs } from "react/jsx-runtime";
64
62
  var InstallPwaUi = ({
@@ -92,20 +90,19 @@ var InstallPwaUi = ({
92
90
  })
93
91
  });
94
92
  };
95
-
96
- // src/components/InstallPwa/InstallPwa.tsx
97
- import { jsx as jsx3 } from "react/jsx-runtime";
98
93
  var InstallPwa = () => {
99
- const [supportsPwa, setSupportsPwa] = React3.useState(false);
100
- const [promptInstall, setPromptInstall] = React3.useState(null);
101
- React3.useEffect(() => {
94
+ const [supportsPwa, setSupportsPwa] = React2.useState(false);
95
+ const [promptInstall, setPromptInstall] = React2.useState(null);
96
+ React2.useEffect(() => {
102
97
  const handler = e => {
103
98
  e.preventDefault();
104
99
  setSupportsPwa(true);
105
100
  setPromptInstall(e);
106
101
  };
107
102
  window.addEventListener("beforeinstallprompt", handler);
108
- return () => window.removeEventListener("transitionend", handler);
103
+ return () => {
104
+ return window.removeEventListener("transitionend", handler);
105
+ };
109
106
  }, []);
110
107
  const onInstall = e => {
111
108
  e.preventDefault();
@@ -117,15 +114,16 @@ var InstallPwa = () => {
117
114
  if (!supportsPwa) {
118
115
  return null;
119
116
  }
120
- return /* @__PURE__ */jsx3(InstallPwaUi, {
117
+ return /* @__PURE__ */jsx2(InstallPwaUi, {
121
118
  onInstall
122
119
  });
123
120
  };
124
121
 
125
- // src/components/Modal/Modal.tsx
122
+ // src/components/Modal.tsx
123
+ import { css as transformStyleObject2 } from "@theme-ui/css";
126
124
  import { useResponsiveValue, useTheme as useTheme2 } from "@ttoss/ui";
127
125
  import ReactModal from "react-modal";
128
- import { jsx as jsx4 } from "react/jsx-runtime";
126
+ import { jsx as jsx3 } from "react/jsx-runtime";
129
127
  ReactModal.defaultStyles = {
130
128
  overlay: {},
131
129
  content: {}
@@ -134,27 +132,30 @@ var Modal = props => {
134
132
  const {
135
133
  theme
136
134
  } = useTheme2();
137
- const padding = useResponsiveValue([theme.space?.[2], theme.space?.[3], theme.space?.[4]]) || 0;
135
+ const space = theme.space;
136
+ const padding = useResponsiveValue([space?.["lg"], space?.["xl"], space?.["xl"]]) || 0;
138
137
  const style = {
139
- overlay: {
138
+ overlay: transformStyleObject2({
140
139
  position: "fixed",
141
140
  top: 0,
142
141
  left: 0,
143
142
  right: 0,
144
143
  bottom: 0,
145
- backgroundColor: "rgba(255, 255, 255, 0.5)",
144
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
146
145
  display: "flex",
147
146
  justifyContent: "center",
148
147
  alignItems: "center",
149
- padding,
150
148
  ...props.style?.overlay
151
- },
152
- content: {
149
+ })(theme),
150
+ content: transformStyleObject2({
153
151
  /**
154
152
  * Theme
155
153
  */
156
- backgroundColor: theme.rawColors?.background?.toString() || "#fff",
154
+ backgroundColor: "surface",
157
155
  padding,
156
+ border: "default",
157
+ borderColor: "surface",
158
+ borderRadius: "default",
158
159
  /**
159
160
  * General
160
161
  */
@@ -165,48 +166,47 @@ var Modal = props => {
165
166
  left: "0px",
166
167
  right: "0px",
167
168
  bottom: "0px",
168
- border: "2px solid",
169
- borderColor: theme.rawColors?.muted?.toString() || "#fff",
170
- display: "flex",
171
- flexDirection: "column",
172
- alignItems: "center",
169
+ maxHeight: "90%",
170
+ maxWidth: "90%",
173
171
  ...props.style?.content
174
- }
172
+ })(theme)
175
173
  };
176
- return /* @__PURE__ */jsx4(ReactModal, {
174
+ return /* @__PURE__ */jsx3(ReactModal, {
177
175
  ...props,
178
176
  style
179
177
  });
180
178
  };
181
179
  Modal.setAppElement = ReactModal.setAppElement;
182
180
 
183
- // src/components/Toast/Toast.tsx
184
- import * as React4 from "react";
181
+ // src/components/Toast.tsx
182
+ import * as React3 from "react";
185
183
  import { Box as Box2 } from "@ttoss/ui";
186
184
  import { ToastContainer as ReactToastifyToastContainer, toast } from "react-toastify";
187
185
  import { injectStyle } from "react-toastify/dist/inject-style";
188
- import { jsx as jsx5 } from "react/jsx-runtime";
186
+ import { jsx as jsx4 } from "react/jsx-runtime";
189
187
  var ToastContainer = props => {
190
- React4.useEffect(() => {
188
+ React3.useEffect(() => {
191
189
  injectStyle();
192
190
  }, []);
193
- return /* @__PURE__ */jsx5(Box2, {
191
+ return /* @__PURE__ */jsx4(Box2, {
194
192
  sx: ({
195
193
  colors,
196
194
  fonts
197
- }) => ({
198
- "--toastify-color-light": "#fff",
199
- "--toastify-color-dark": "#121212",
200
- "--toastify-color-info": colors?.info || "#3498db",
201
- "--toastify-color-success": colors?.success || "#07bc0c",
202
- "--toastify-color-warning": "#f1c40f",
203
- "--toastify-color-error": "#e74c3c",
204
- "--toastify-color-progress-light": `linear-gradient(to right, ${colors?.primary}, ${colors?.secondary})`,
205
- "--toastify-font-family": fonts.body
206
- }),
207
- children: /* @__PURE__ */jsx5(ReactToastifyToastContainer, {
195
+ }) => {
196
+ return {
197
+ "--toastify-color-light": "#fff",
198
+ "--toastify-color-dark": "#121212",
199
+ "--toastify-color-info": colors?.info || "#3498db",
200
+ "--toastify-color-success": colors?.success || "#07bc0c",
201
+ "--toastify-color-warning": "#f1c40f",
202
+ "--toastify-color-error": "#e74c3c",
203
+ "--toastify-color-progress-light": `linear-gradient(to right, ${colors?.primary}, ${colors?.secondary})`,
204
+ "--toastify-font-family": fonts.body
205
+ };
206
+ },
207
+ children: /* @__PURE__ */jsx4(ReactToastifyToastContainer, {
208
208
  ...props
209
209
  })
210
210
  });
211
211
  };
212
- export { Accordion, InstallPwa, Modal, ToastContainer, toast };
212
+ export { Accordion, InstallPwa, InstallPwaUi, Modal, ToastContainer, toast };
package/dist/index.d.ts CHANGED
@@ -38,15 +38,15 @@ declare const Accordion: {
38
38
  accessKey?: string | undefined;
39
39
  autoFocus?: boolean | undefined;
40
40
  className?: string | undefined;
41
- contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
41
+ contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
42
42
  contextMenu?: string | undefined;
43
43
  dir?: string | undefined;
44
- draggable?: (boolean | "false" | "true") | undefined;
44
+ draggable?: (boolean | "true" | "false") | undefined;
45
45
  hidden?: boolean | undefined;
46
46
  lang?: string | undefined;
47
47
  nonce?: string | undefined;
48
48
  placeholder?: string | undefined;
49
- spellCheck?: (boolean | "false" | "true") | undefined;
49
+ spellCheck?: (boolean | "true" | "false") | undefined;
50
50
  translate?: "yes" | "no" | undefined;
51
51
  radioGroup?: string | undefined;
52
52
  about?: string | undefined;
@@ -75,44 +75,44 @@ declare const Accordion: {
75
75
  inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
76
76
  is?: string | undefined;
77
77
  'aria-activedescendant'?: string | undefined;
78
- 'aria-atomic'?: (boolean | "false" | "true") | undefined;
79
- 'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
80
- 'aria-busy'?: (boolean | "false" | "true") | undefined;
81
- 'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
78
+ 'aria-atomic'?: (boolean | "true" | "false") | undefined;
79
+ 'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
80
+ 'aria-busy'?: (boolean | "true" | "false") | undefined;
81
+ 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
82
82
  'aria-colcount'?: number | undefined;
83
83
  'aria-colindex'?: number | undefined;
84
84
  'aria-colspan'?: number | undefined;
85
- 'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
85
+ 'aria-current'?: boolean | "time" | "page" | "true" | "false" | "step" | "location" | "date" | undefined;
86
86
  'aria-describedby'?: string | undefined;
87
87
  'aria-details'?: string | undefined;
88
- 'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
88
+ 'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
89
89
  'aria-errormessage'?: string | undefined;
90
90
  'aria-flowto'?: string | undefined;
91
- 'aria-grabbed'?: (boolean | "false" | "true") | undefined;
92
- 'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "false" | "true" | "tree" | undefined;
93
- 'aria-hidden'?: (boolean | "false" | "true") | undefined;
94
- 'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
91
+ 'aria-grabbed'?: (boolean | "true" | "false") | undefined;
92
+ 'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree" | undefined;
93
+ 'aria-hidden'?: (boolean | "true" | "false") | undefined;
94
+ 'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
95
95
  'aria-keyshortcuts'?: string | undefined;
96
96
  'aria-label'?: string | undefined;
97
97
  'aria-labelledby'?: string | undefined;
98
98
  'aria-level'?: number | undefined;
99
99
  'aria-live'?: "off" | "assertive" | "polite" | undefined;
100
- 'aria-modal'?: (boolean | "false" | "true") | undefined;
101
- 'aria-multiline'?: (boolean | "false" | "true") | undefined;
102
- 'aria-multiselectable'?: (boolean | "false" | "true") | undefined;
100
+ 'aria-modal'?: (boolean | "true" | "false") | undefined;
101
+ 'aria-multiline'?: (boolean | "true" | "false") | undefined;
102
+ 'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
103
103
  'aria-orientation'?: "horizontal" | "vertical" | undefined;
104
104
  'aria-owns'?: string | undefined;
105
105
  'aria-placeholder'?: string | undefined;
106
106
  'aria-posinset'?: number | undefined;
107
- 'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
108
- 'aria-readonly'?: (boolean | "false" | "true") | undefined;
107
+ 'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
108
+ 'aria-readonly'?: (boolean | "true" | "false") | undefined;
109
109
  'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
110
- 'aria-required'?: (boolean | "false" | "true") | undefined;
110
+ 'aria-required'?: (boolean | "true" | "false") | undefined;
111
111
  'aria-roledescription'?: string | undefined;
112
112
  'aria-rowcount'?: number | undefined;
113
113
  'aria-rowindex'?: number | undefined;
114
114
  'aria-rowspan'?: number | undefined;
115
- 'aria-selected'?: (boolean | "false" | "true") | undefined;
115
+ 'aria-selected'?: (boolean | "true" | "false") | undefined;
116
116
  'aria-setsize'?: number | undefined;
117
117
  'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
118
118
  'aria-valuemax'?: number | undefined;
@@ -292,6 +292,10 @@ declare const Accordion: {
292
292
  }) => JSX.Element;
293
293
  };
294
294
 
295
+ type InstallPwaUiProps = {
296
+ onInstall: React.MouseEventHandler<HTMLButtonElement>;
297
+ };
298
+ declare const InstallPwaUi: ({ onInstall }: InstallPwaUiProps) => JSX.Element;
295
299
  declare const InstallPwa: () => JSX.Element | null;
296
300
 
297
301
  type ModalProps = ReactModal.Props;
@@ -302,4 +306,4 @@ declare const Modal: {
302
306
 
303
307
  declare const ToastContainer: (props: ToastContainerProps) => JSX.Element;
304
308
 
305
- export { Accordion, AccordionProps, InstallPwa, Modal, ModalProps, ToastContainer };
309
+ export { Accordion, AccordionProps, InstallPwa, InstallPwaUi, InstallPwaUiProps, Modal, ModalProps, ToastContainer };
package/dist/index.js CHANGED
@@ -40,13 +40,14 @@ var src_exports = {};
40
40
  __export(src_exports, {
41
41
  Accordion: () => Accordion,
42
42
  InstallPwa: () => InstallPwa,
43
+ InstallPwaUi: () => InstallPwaUi,
43
44
  Modal: () => Modal,
44
45
  ToastContainer: () => ToastContainer,
45
46
  toast: () => import_react_toastify.toast
46
47
  });
47
48
  module.exports = __toCommonJS(src_exports);
48
49
 
49
- // src/components/Accordion/Accordion.tsx
50
+ // src/components/Accordion.tsx
50
51
  var React = __toESM(require("react"));
51
52
  var import_react_accessible_accordion = require("react-accessible-accordion");
52
53
  var import_ui = require("@ttoss/ui");
@@ -70,7 +71,7 @@ var Accordion = ({
70
71
  marginBottom: 3
71
72
  },
72
73
  ".accordion__heading": {
73
- padding: 2,
74
+ padding: "md",
74
75
  border: "1px solid",
75
76
  borderColor: "black"
76
77
  },
@@ -101,10 +102,8 @@ Accordion.ItemButton = import_react_accessible_accordion.AccordionItemButton;
101
102
  Accordion.ItemHeading = import_react_accessible_accordion.AccordionItemHeading;
102
103
  Accordion.ItemPanel = import_react_accessible_accordion.AccordionItemPanel;
103
104
 
104
- // src/components/InstallPwa/InstallPwa.tsx
105
- var React3 = __toESM(require("react"));
106
-
107
- // src/components/InstallPwa/InstallPwaUi.tsx
105
+ // src/components/InstallPwa.tsx
106
+ var React2 = __toESM(require("react"));
108
107
  var import_ui2 = require("@ttoss/ui");
109
108
  var import_jsx_runtime2 = require("react/jsx-runtime");
110
109
  var InstallPwaUi = ({
@@ -138,20 +137,19 @@ var InstallPwaUi = ({
138
137
  })
139
138
  });
140
139
  };
141
-
142
- // src/components/InstallPwa/InstallPwa.tsx
143
- var import_jsx_runtime3 = require("react/jsx-runtime");
144
140
  var InstallPwa = () => {
145
- const [supportsPwa, setSupportsPwa] = React3.useState(false);
146
- const [promptInstall, setPromptInstall] = React3.useState(null);
147
- React3.useEffect(() => {
141
+ const [supportsPwa, setSupportsPwa] = React2.useState(false);
142
+ const [promptInstall, setPromptInstall] = React2.useState(null);
143
+ React2.useEffect(() => {
148
144
  const handler = e => {
149
145
  e.preventDefault();
150
146
  setSupportsPwa(true);
151
147
  setPromptInstall(e);
152
148
  };
153
149
  window.addEventListener("beforeinstallprompt", handler);
154
- return () => window.removeEventListener("transitionend", handler);
150
+ return () => {
151
+ return window.removeEventListener("transitionend", handler);
152
+ };
155
153
  }, []);
156
154
  const onInstall = e => {
157
155
  e.preventDefault();
@@ -163,15 +161,16 @@ var InstallPwa = () => {
163
161
  if (!supportsPwa) {
164
162
  return null;
165
163
  }
166
- return /* @__PURE__ */(0, import_jsx_runtime3.jsx)(InstallPwaUi, {
164
+ return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(InstallPwaUi, {
167
165
  onInstall
168
166
  });
169
167
  };
170
168
 
171
- // src/components/Modal/Modal.tsx
169
+ // src/components/Modal.tsx
170
+ var import_css3 = require("@theme-ui/css");
172
171
  var import_ui3 = require("@ttoss/ui");
173
172
  var import_react_modal = __toESM(require("react-modal"));
174
- var import_jsx_runtime4 = require("react/jsx-runtime");
173
+ var import_jsx_runtime3 = require("react/jsx-runtime");
175
174
  import_react_modal.default.defaultStyles = {
176
175
  overlay: {},
177
176
  content: {}
@@ -180,27 +179,30 @@ var Modal = props => {
180
179
  const {
181
180
  theme
182
181
  } = (0, import_ui3.useTheme)();
183
- const padding = (0, import_ui3.useResponsiveValue)([theme.space?.[2], theme.space?.[3], theme.space?.[4]]) || 0;
182
+ const space = theme.space;
183
+ const padding = (0, import_ui3.useResponsiveValue)([space?.["lg"], space?.["xl"], space?.["xl"]]) || 0;
184
184
  const style = {
185
- overlay: {
185
+ overlay: (0, import_css3.css)({
186
186
  position: "fixed",
187
187
  top: 0,
188
188
  left: 0,
189
189
  right: 0,
190
190
  bottom: 0,
191
- backgroundColor: "rgba(255, 255, 255, 0.5)",
191
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
192
192
  display: "flex",
193
193
  justifyContent: "center",
194
194
  alignItems: "center",
195
- padding,
196
195
  ...props.style?.overlay
197
- },
198
- content: {
196
+ })(theme),
197
+ content: (0, import_css3.css)({
199
198
  /**
200
199
  * Theme
201
200
  */
202
- backgroundColor: theme.rawColors?.background?.toString() || "#fff",
201
+ backgroundColor: "surface",
203
202
  padding,
203
+ border: "default",
204
+ borderColor: "surface",
205
+ borderRadius: "default",
204
206
  /**
205
207
  * General
206
208
  */
@@ -211,46 +213,45 @@ var Modal = props => {
211
213
  left: "0px",
212
214
  right: "0px",
213
215
  bottom: "0px",
214
- border: "2px solid",
215
- borderColor: theme.rawColors?.muted?.toString() || "#fff",
216
- display: "flex",
217
- flexDirection: "column",
218
- alignItems: "center",
216
+ maxHeight: "90%",
217
+ maxWidth: "90%",
219
218
  ...props.style?.content
220
- }
219
+ })(theme)
221
220
  };
222
- return /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_react_modal.default, {
221
+ return /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_react_modal.default, {
223
222
  ...props,
224
223
  style
225
224
  });
226
225
  };
227
226
  Modal.setAppElement = import_react_modal.default.setAppElement;
228
227
 
229
- // src/components/Toast/Toast.tsx
230
- var React4 = __toESM(require("react"));
228
+ // src/components/Toast.tsx
229
+ var React3 = __toESM(require("react"));
231
230
  var import_ui4 = require("@ttoss/ui");
232
231
  var import_react_toastify = require("react-toastify");
233
232
  var import_inject_style = require("react-toastify/dist/inject-style");
234
- var import_jsx_runtime5 = require("react/jsx-runtime");
233
+ var import_jsx_runtime4 = require("react/jsx-runtime");
235
234
  var ToastContainer = props => {
236
- React4.useEffect(() => {
235
+ React3.useEffect(() => {
237
236
  (0, import_inject_style.injectStyle)();
238
237
  }, []);
239
- return /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui4.Box, {
238
+ return /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Box, {
240
239
  sx: ({
241
240
  colors,
242
241
  fonts
243
- }) => ({
244
- "--toastify-color-light": "#fff",
245
- "--toastify-color-dark": "#121212",
246
- "--toastify-color-info": colors?.info || "#3498db",
247
- "--toastify-color-success": colors?.success || "#07bc0c",
248
- "--toastify-color-warning": "#f1c40f",
249
- "--toastify-color-error": "#e74c3c",
250
- "--toastify-color-progress-light": `linear-gradient(to right, ${colors?.primary}, ${colors?.secondary})`,
251
- "--toastify-font-family": fonts.body
252
- }),
253
- children: /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_react_toastify.ToastContainer, {
242
+ }) => {
243
+ return {
244
+ "--toastify-color-light": "#fff",
245
+ "--toastify-color-dark": "#121212",
246
+ "--toastify-color-info": colors?.info || "#3498db",
247
+ "--toastify-color-success": colors?.success || "#07bc0c",
248
+ "--toastify-color-warning": "#f1c40f",
249
+ "--toastify-color-error": "#e74c3c",
250
+ "--toastify-color-progress-light": `linear-gradient(to right, ${colors?.primary}, ${colors?.secondary})`,
251
+ "--toastify-font-family": fonts.body
252
+ };
253
+ },
254
+ children: /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_react_toastify.ToastContainer, {
254
255
  ...props
255
256
  })
256
257
  });
@@ -259,6 +260,7 @@ var ToastContainer = props => {
259
260
  0 && (module.exports = {
260
261
  Accordion,
261
262
  InstallPwa,
263
+ InstallPwaUi,
262
264
  Modal,
263
265
  ToastContainer,
264
266
  toast
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/components",
3
- "version": "1.27.3",
3
+ "version": "1.28.1",
4
4
  "description": "React components.",
5
5
  "license": "UNLICENSED",
6
6
  "author": "ttoss",
@@ -13,33 +13,28 @@
13
13
  "dist",
14
14
  "src"
15
15
  ],
16
- "scripts": {
17
- "build": "tsup",
18
- "dev": "pnpm workspace @docs/storybook run dev",
19
- "test": "jest"
20
- },
21
16
  "sideEffects": false,
22
17
  "typings": "dist/index.d.ts",
23
18
  "dependencies": {
24
- "@emotion/css": "^11.10.5",
25
- "@theme-ui/css": "^0.15.4",
26
- "@types/react-modal": "^3.13.1",
19
+ "@emotion/css": "^11.10.8",
20
+ "@theme-ui/css": "^0.15.7",
21
+ "@types/react-modal": "^3.16.0",
27
22
  "react-accessible-accordion": "^5.0.0",
28
23
  "react-modal": "^3.16.1",
29
- "react-toastify": "^9.1.1"
24
+ "react-toastify": "^9.1.2"
30
25
  },
31
26
  "peerDependencies": {
32
- "@ttoss/ui": "^",
33
- "react": ">=16.8.0"
27
+ "react": ">=16.8.0",
28
+ "@ttoss/ui": "^1.36.1"
34
29
  },
35
30
  "devDependencies": {
36
- "@ttoss/config": "^1.30.0",
37
- "@ttoss/test-utils": "^1.22.0",
38
- "@ttoss/ui": "^1.35.3",
39
31
  "@types/jest": "^29.5.1",
40
- "@types/react": "^18.2.0",
32
+ "@types/react": "^18.2.5",
41
33
  "jest": "^29.5.0",
42
- "tsup": "^6.7.0"
34
+ "tsup": "^6.7.0",
35
+ "@ttoss/config": "^1.30.0",
36
+ "@ttoss/test-utils": "^1.23.0",
37
+ "@ttoss/ui": "^1.36.1"
43
38
  },
44
39
  "keywords": [
45
40
  "React",
@@ -48,5 +43,10 @@
48
43
  "publishConfig": {
49
44
  "access": "public"
50
45
  },
51
- "gitHead": "b14482e626119da6b065b28523b6668dbbcef585"
52
- }
46
+ "gitHead": "e2b509ee8717f07f7365191b651dcbb5f080e05a",
47
+ "scripts": {
48
+ "build": "tsup",
49
+ "dev": "pnpm workspace @docs/storybook run dev",
50
+ "test": "jest"
51
+ }
52
+ }
package/src/components/{Accordion/Accordion.tsx → Accordion.tsx} RENAMED
@@ -37,7 +37,7 @@ export const Accordion = ({
37
37
  marginBottom: 3,
38
38
  },
39
39
  '.accordion__heading': {
40
- padding: 2,
40
+ padding: 'md',
41
41
  border: '1px solid',
42
42
  borderColor: 'black',
43
43
  },