@ttoss/components 2.3.0 → 2.4.0

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.
@@ -1,3 +1,4 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
- import { NotificationCard } from "../chunk-Q4MJKM2X.js";
2
+ import { NotificationCard } from "../chunk-E6CBXO5W.js";
3
+ import "../chunk-JOSQSCZQ.js";
3
4
  export { NotificationCard };
@@ -1,5 +1,6 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
- import { Icon, NotificationCard } from "../chunk-Q4MJKM2X.js";
2
+ import { NotificationCard } from "../chunk-E6CBXO5W.js";
3
+ import { Icon } from "../chunk-JOSQSCZQ.js";
3
4
 
4
5
  // src/components/NotificationsMenu/NotificationsMenu.tsx
5
6
  import { Box, Button, Card, Flex, IconButton, Text } from "@ttoss/ui";
@@ -0,0 +1,170 @@
1
+ /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
+ import { Icon } from "./chunk-JOSQSCZQ.js";
3
+
4
+ // src/components/NotificationCard/NotificationCard.tsx
5
+ import { Box, Card, CloseButton, Link, Tag, Text } from "@ttoss/ui";
6
+ import { jsx, jsxs } from "react/jsx-runtime";
7
+ var NotificationCard = props => {
8
+ const sxMap = {
9
+ success: {
10
+ card: {
11
+ backgroundColor: "feedback.background.positive.default",
12
+ borderColor: "feedback.border.positive.default"
13
+ }
14
+ },
15
+ error: {
16
+ card: {
17
+ backgroundColor: "feedback.background.negative.default",
18
+ borderColor: "feedback.border.negative.default"
19
+ }
20
+ },
21
+ warning: {
22
+ card: {
23
+ backgroundColor: "feedback.background.caution.default",
24
+ borderColor: "feedback.border.caution.default"
25
+ }
26
+ },
27
+ info: {
28
+ card: {
29
+ backgroundColor: "feedback.background.primary.default",
30
+ borderColor: "feedback.border.primary.default"
31
+ }
32
+ },
33
+ neutral: {
34
+ card: {
35
+ backgroundColor: "feedback.background.primary.default",
36
+ borderColor: "feedback.border.primary.default"
37
+ }
38
+ }
39
+ };
40
+ const icon = {
41
+ success: "success-circle",
42
+ error: "error",
43
+ warning: "warning-alt",
44
+ info: "info",
45
+ neutral: "info"
46
+ };
47
+ const hasCaption = Boolean(props.caption);
48
+ const hasActions = Boolean(props.actions && props.actions.length > 0);
49
+ const hasTitle = Boolean(props.title);
50
+ const shouldCenterVerticallyWithoutTitle = !hasCaption && !hasActions && !hasTitle;
51
+ const shouldCenterVerticallyWithTitle = !hasCaption && !hasActions && hasTitle;
52
+ const shouldAddMinHeight = !hasCaption && !hasActions;
53
+ return /* @__PURE__ */jsxs(Card, {
54
+ sx: {
55
+ ...sxMap[props.type].card,
56
+ width: "full"
57
+ },
58
+ children: [props.title && /* @__PURE__ */jsxs(Card.Title, {
59
+ sx: {
60
+ display: "flex",
61
+ justifyContent: "space-between",
62
+ alignItems: "center",
63
+ fontSize: ["md", "xl"],
64
+ paddingY: ["1", "2", "4"],
65
+ paddingX: ["2", "4", "8"]
66
+ },
67
+ children: [/* @__PURE__ */jsxs(Text, {
68
+ sx: {
69
+ display: "inline-flex",
70
+ alignItems: "flex-start",
71
+ gap: "2",
72
+ flexDirection: "row",
73
+ flexWrap: "wrap"
74
+ },
75
+ children: [/* @__PURE__ */jsxs(Box, {
76
+ sx: {
77
+ display: "flex",
78
+ alignItems: "center",
79
+ gap: "2"
80
+ },
81
+ children: [/* @__PURE__ */jsx(Icon, {
82
+ icon: icon[props.type]
83
+ }), props.title]
84
+ }), props.tags && (Array.isArray(props.tags) ? props.tags.length > 0 : true) && (Array.isArray(props.tags) ? props.tags.map((tag, index) => {
85
+ return /* @__PURE__ */jsx(Tag, {
86
+ children: tag
87
+ }, index);
88
+ }) : /* @__PURE__ */jsx(Tag, {
89
+ children: props.tags
90
+ }))]
91
+ }), props.onClose && /* @__PURE__ */jsx(Box, {
92
+ sx: {
93
+ marginLeft: "auto"
94
+ },
95
+ children: /* @__PURE__ */jsx(CloseButton, {
96
+ onClick: props.onClose
97
+ })
98
+ })]
99
+ }), /* @__PURE__ */jsxs(Card.Body, {
100
+ sx: {
101
+ ...sxMap[props.type].card,
102
+ display: "flex",
103
+ flexDirection: "column",
104
+ gap: "2",
105
+ paddingY: ["1", "2", "4"],
106
+ paddingX: ["2", "4", "8"]
107
+ },
108
+ children: [/* @__PURE__ */jsx(Box, {
109
+ sx: {
110
+ display: "flex",
111
+ justifyContent: "space-between",
112
+ minHeight: shouldAddMinHeight ? "40px" : "auto",
113
+ alignItems: shouldCenterVerticallyWithoutTitle ? "center" : shouldCenterVerticallyWithTitle ? "center" : "flex-start",
114
+ width: "100%",
115
+ gap: "4"
116
+ },
117
+ children: /* @__PURE__ */jsx(Box, {
118
+ sx: {
119
+ flex: 1
120
+ },
121
+ children: /* @__PURE__ */jsx(Text, {
122
+ sx: {
123
+ fontSize: ["sm", "md"]
124
+ },
125
+ children: props.message
126
+ })
127
+ })
128
+ }), props.actions && props.actions.length > 0 && /* @__PURE__ */jsx(Box, {
129
+ sx: {
130
+ display: "flex",
131
+ flexDirection: "column",
132
+ gap: 2,
133
+ mt: 2
134
+ },
135
+ children: props.actions.map((action, index) => {
136
+ return action.action === "open_url" ? /* @__PURE__ */jsx(Link, {
137
+ href: action.url,
138
+ target: "_blank",
139
+ rel: "noopener noreferrer",
140
+ sx: {
141
+ color: "action.text.accent.default",
142
+ cursor: "pointer"
143
+ },
144
+ children: action.label || "Acessar"
145
+ }, index) : null;
146
+ })
147
+ }), props.caption && /* @__PURE__ */jsx(Box, {
148
+ sx: {
149
+ whiteSpace: "nowrap",
150
+ mt: 6
151
+ },
152
+ children: /* @__PURE__ */jsx(Text, {
153
+ sx: {
154
+ fontSize: "xs",
155
+ color: "text.secondary"
156
+ },
157
+ children: props.caption
158
+ })
159
+ }), !props.title && props.onClose && /* @__PURE__ */jsx(Box, {
160
+ sx: {
161
+ alignSelf: "flex-end"
162
+ },
163
+ children: /* @__PURE__ */jsx(CloseButton, {
164
+ onClick: props.onClose
165
+ })
166
+ })]
167
+ })]
168
+ });
169
+ };
170
+ export { NotificationCard };
@@ -2065,174 +2065,7 @@ var Icon2 = React2.forwardRef((props, ref) => {
2065
2065
  });
2066
2066
  });
2067
2067
  Icon2.displayName = "Icon";
2068
-
2069
- // src/components/NotificationCard/NotificationCard.tsx
2070
- import { Box, Card, CloseButton, Link, Tag, Text } from "@ttoss/ui";
2071
- import { jsx as jsx2, jsxs } from "react/jsx-runtime";
2072
- var NotificationCard = props => {
2073
- const sxMap = {
2074
- success: {
2075
- card: {
2076
- backgroundColor: "feedback.background.positive.default",
2077
- borderColor: "feedback.border.positive.default"
2078
- }
2079
- },
2080
- error: {
2081
- card: {
2082
- backgroundColor: "feedback.background.negative.default",
2083
- borderColor: "feedback.border.negative.default"
2084
- }
2085
- },
2086
- warning: {
2087
- card: {
2088
- backgroundColor: "feedback.background.caution.default",
2089
- borderColor: "feedback.border.caution.default"
2090
- }
2091
- },
2092
- info: {
2093
- card: {
2094
- backgroundColor: "feedback.background.primary.default",
2095
- borderColor: "feedback.border.primary.default"
2096
- }
2097
- },
2098
- neutral: {
2099
- card: {
2100
- backgroundColor: "feedback.background.primary.default",
2101
- borderColor: "feedback.border.primary.default"
2102
- }
2103
- }
2104
- };
2105
- const icon = {
2106
- success: "success-circle",
2107
- error: "error",
2108
- warning: "warning-alt",
2109
- info: "info",
2110
- neutral: "info"
2111
- };
2112
- const hasCaption = Boolean(props.caption);
2113
- const hasActions = Boolean(props.actions && props.actions.length > 0);
2114
- const hasTitle = Boolean(props.title);
2115
- const shouldCenterVerticallyWithoutTitle = !hasCaption && !hasActions && !hasTitle;
2116
- const shouldCenterVerticallyWithTitle = !hasCaption && !hasActions && hasTitle;
2117
- const shouldAddMinHeight = !hasCaption && !hasActions;
2118
- return /* @__PURE__ */jsxs(Card, {
2119
- sx: {
2120
- ...sxMap[props.type].card,
2121
- width: "full"
2122
- },
2123
- children: [props.title && /* @__PURE__ */jsxs(Card.Title, {
2124
- sx: {
2125
- display: "flex",
2126
- justifyContent: "space-between",
2127
- alignItems: "center",
2128
- fontSize: ["md", "xl"],
2129
- paddingY: ["1", "2", "4"],
2130
- paddingX: ["2", "4", "8"]
2131
- },
2132
- children: [/* @__PURE__ */jsxs(Text, {
2133
- sx: {
2134
- display: "inline-flex",
2135
- alignItems: "flex-start",
2136
- gap: "2",
2137
- flexDirection: "row",
2138
- flexWrap: "wrap"
2139
- },
2140
- children: [/* @__PURE__ */jsxs(Box, {
2141
- sx: {
2142
- display: "flex",
2143
- alignItems: "center",
2144
- gap: "2"
2145
- },
2146
- children: [/* @__PURE__ */jsx2(Icon2, {
2147
- icon: icon[props.type]
2148
- }), props.title]
2149
- }), props.tags && (Array.isArray(props.tags) ? props.tags.length > 0 : true) && (Array.isArray(props.tags) ? props.tags.map((tag, index) => {
2150
- return /* @__PURE__ */jsx2(Tag, {
2151
- children: tag
2152
- }, index);
2153
- }) : /* @__PURE__ */jsx2(Tag, {
2154
- children: props.tags
2155
- }))]
2156
- }), props.onClose && /* @__PURE__ */jsx2(Box, {
2157
- sx: {
2158
- marginLeft: "auto"
2159
- },
2160
- children: /* @__PURE__ */jsx2(CloseButton, {
2161
- onClick: props.onClose
2162
- })
2163
- })]
2164
- }), /* @__PURE__ */jsxs(Card.Body, {
2165
- sx: {
2166
- ...sxMap[props.type].card,
2167
- display: "flex",
2168
- flexDirection: "column",
2169
- gap: "2",
2170
- paddingY: ["1", "2", "4"],
2171
- paddingX: ["2", "4", "8"]
2172
- },
2173
- children: [/* @__PURE__ */jsx2(Box, {
2174
- sx: {
2175
- display: "flex",
2176
- justifyContent: "space-between",
2177
- minHeight: shouldAddMinHeight ? "40px" : "auto",
2178
- alignItems: shouldCenterVerticallyWithoutTitle ? "center" : shouldCenterVerticallyWithTitle ? "center" : "flex-start",
2179
- width: "100%",
2180
- gap: "4"
2181
- },
2182
- children: /* @__PURE__ */jsx2(Box, {
2183
- sx: {
2184
- flex: 1
2185
- },
2186
- children: /* @__PURE__ */jsx2(Text, {
2187
- sx: {
2188
- fontSize: ["sm", "md"]
2189
- },
2190
- children: props.message
2191
- })
2192
- })
2193
- }), props.actions && props.actions.length > 0 && /* @__PURE__ */jsx2(Box, {
2194
- sx: {
2195
- display: "flex",
2196
- flexDirection: "column",
2197
- gap: 2,
2198
- mt: 2
2199
- },
2200
- children: props.actions.map((action, index) => {
2201
- return action.action === "open_url" ? /* @__PURE__ */jsx2(Link, {
2202
- href: action.url,
2203
- target: "_blank",
2204
- rel: "noopener noreferrer",
2205
- sx: {
2206
- color: "action.text.accent.default",
2207
- cursor: "pointer"
2208
- },
2209
- children: action.label || "Acessar"
2210
- }, index) : null;
2211
- })
2212
- }), props.caption && /* @__PURE__ */jsx2(Box, {
2213
- sx: {
2214
- whiteSpace: "nowrap",
2215
- mt: 6
2216
- },
2217
- children: /* @__PURE__ */jsx2(Text, {
2218
- sx: {
2219
- fontSize: "xs",
2220
- color: "text.secondary"
2221
- },
2222
- children: props.caption
2223
- })
2224
- }), !props.title && props.onClose && /* @__PURE__ */jsx2(Box, {
2225
- sx: {
2226
- alignSelf: "flex-end"
2227
- },
2228
- children: /* @__PURE__ */jsx2(CloseButton, {
2229
- onClick: props.onClose
2230
- })
2231
- })]
2232
- })]
2233
- });
2234
- };
2235
- export { Icon2 as Icon, NotificationCard };
2068
+ export { Icon2 as Icon };
2236
2069
  /*! Bundled license information:
2237
2070
 
2238
2071
  iconify-icon/dist/iconify-icon.mjs:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/components",
3
- "version": "2.3.0",
3
+ "version": "2.4.0",
4
4
  "description": "React components for ttoss ecosystem.",
5
5
  "license": "MIT",
6
6
  "author": "ttoss",
@@ -26,6 +26,10 @@
26
26
  "types": "./dist/InstallPwa/index.d.ts",
27
27
  "import": "./dist/esm/InstallPwa/index.js"
28
28
  },
29
+ "./FileUploader": {
30
+ "types": "./dist/FileUploader/index.d.ts",
31
+ "import": "./dist/esm/FileUploader/index.js"
32
+ },
29
33
  "./JsonEditor": {
30
34
  "types": "./dist/JsonEditor/index.d.ts",
31
35
  "import": "./dist/esm/JsonEditor/index.js"
@@ -98,7 +102,8 @@
98
102
  "peerDependencies": {
99
103
  "react": ">=16.8.0",
100
104
  "@ttoss/react-hooks": "^2.1.2",
101
- "@ttoss/ui": "^5.9.3"
105
+ "@ttoss/ui": "^5.10.0",
106
+ "@ttoss/react-i18n": "^2.0.14"
102
107
  },
103
108
  "devDependencies": {
104
109
  "@types/jest": "^30.0.0",
@@ -108,10 +113,11 @@
108
113
  "tsup": "^8.5.0",
109
114
  "tsx": "^4.19.2",
110
115
  "@ttoss/config": "^1.35.6",
116
+ "@ttoss/react-hooks": "^2.1.2",
111
117
  "@ttoss/react-icons": "^0.4.15",
112
118
  "@ttoss/test-utils": "^2.1.26",
113
- "@ttoss/ui": "^5.9.3",
114
- "@ttoss/react-hooks": "^2.1.2"
119
+ "@ttoss/ui": "^5.10.0",
120
+ "@ttoss/react-i18n": "^2.0.14"
115
121
  },
116
122
  "keywords": [
117
123
  "React",