@dt-dds/react-tag 1.0.0-beta.53 → 1.0.0-beta.55

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 (4) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/index.js +123 -123
  3. package/dist/index.mjs +123 -123
  4. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @dt-ui/react-tag
2
2
 
3
+ ## 1.0.0-beta.55
4
+
5
+ ### Patch Changes
6
+
7
+ - fix(config): update ESLint, TS, and Storybook config
8
+ - fix(icon-button): add missing @dt-dds/react-icon devDependency
9
+ - Updated dependencies
10
+ - Updated dependencies
11
+ - @dt-dds/react-core@1.0.0-beta.52
12
+ - @dt-dds/react-tooltip@1.0.0-beta.61
13
+ - @dt-dds/themes@1.0.0-beta.10
14
+
15
+ ## 1.0.0-beta.54
16
+
17
+ ### Minor Changes
18
+
19
+ - feat: avatar interactivity via icon-button
20
+
21
+ ### Patch Changes
22
+
23
+ - Updated dependencies
24
+ - @dt-dds/react-tooltip@1.0.0-beta.60
25
+
3
26
  ## 1.0.0-beta.53
4
27
 
5
28
  ### Minor Changes
package/dist/index.js CHANGED
@@ -52,8 +52,130 @@ __export(index_exports, {
52
52
  module.exports = __toCommonJS(index_exports);
53
53
 
54
54
  // src/Tag.tsx
55
- var import_react_tooltip = require("@dt-dds/react-tooltip");
56
55
  var import_react3 = require("react");
56
+ var import_react_tooltip = require("@dt-dds/react-tooltip");
57
+
58
+ // src/Tag.styled.ts
59
+ var import_styled = __toESM(require("@emotion/styled"));
60
+
61
+ // src/utils/tagVariantColors.ts
62
+ var getColors = (variant, theme, isDisabled, color) => {
63
+ const resolvedColor = color === "primary" ? "accent" : color;
64
+ if (variant === "solid") {
65
+ const palette = theme.palette[resolvedColor];
66
+ return {
67
+ bgColor: isDisabled ? palette.light : palette.default,
68
+ hoveredBgColor: palette.dark
69
+ };
70
+ }
71
+ if (variant === "outlined") {
72
+ const palette = theme.palette[resolvedColor];
73
+ return {
74
+ bgColor: palette.light,
75
+ hoveredBgColor: palette.medium,
76
+ borderTextColor: isDisabled ? palette.medium : palette.default,
77
+ hoveredBorderTextColor: palette.dark
78
+ };
79
+ }
80
+ };
81
+ var tagVariantColors = ({
82
+ theme,
83
+ color,
84
+ variant,
85
+ hasHover,
86
+ isDisabled
87
+ }) => {
88
+ const colors = getColors(variant, theme, isDisabled, color);
89
+ return {
90
+ solid: __spreadValues({
91
+ border: theme.spacing.spacing_0,
92
+ color: theme.palette.content.contrast,
93
+ backgroundColor: colors == null ? void 0 : colors.bgColor
94
+ }, hasHover && {
95
+ "&:hover": {
96
+ backgroundColor: colors == null ? void 0 : colors.hoveredBgColor,
97
+ color: theme.palette.content.contrast
98
+ }
99
+ }),
100
+ outlined: __spreadValues({
101
+ border: `1px solid ${colors == null ? void 0 : colors.borderTextColor}`,
102
+ color: colors == null ? void 0 : colors.borderTextColor,
103
+ backgroundColor: colors == null ? void 0 : colors.bgColor
104
+ }, hasHover && {
105
+ "&:hover": {
106
+ borderColor: colors == null ? void 0 : colors.hoveredBorderTextColor,
107
+ color: colors == null ? void 0 : colors.hoveredBorderTextColor,
108
+ backgroundColor: colors == null ? void 0 : colors.hoveredBgColor
109
+ }
110
+ })
111
+ }[variant];
112
+ };
113
+
114
+ // src/utils/tagVariantSize.ts
115
+ var tagSizeStyles = (theme, size) => ({
116
+ medium: {
117
+ fontSize: "0.75rem",
118
+ fontWeight: "700",
119
+ lineHeight: "1rem",
120
+ padding: `${theme.spacing.spacing_30} ${theme.spacing.spacing_40}`,
121
+ height: "32px"
122
+ },
123
+ small: {
124
+ fontSize: "0.625rem",
125
+ fontWeight: "700",
126
+ lineHeight: "0.875rem",
127
+ padding: `${theme.spacing.spacing_10} ${theme.spacing.spacing_30}`,
128
+ height: "18px"
129
+ }
130
+ })[size];
131
+
132
+ // src/Tag.styled.ts
133
+ var TagStyled = import_styled.default.div(
134
+ ({
135
+ theme,
136
+ border,
137
+ isDisabled,
138
+ isClickable,
139
+ isDismissible,
140
+ size,
141
+ variant,
142
+ color,
143
+ hasHover
144
+ }) => __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues({}, tagSizeStyles(theme, size)), tagVariantColors({ theme, variant, color, hasHover, isDisabled })), {
145
+ display: "flex",
146
+ textTransform: "uppercase",
147
+ alignItems: "center",
148
+ maxWidth: "max-content",
149
+ gap: theme.spacing.spacing_20,
150
+ borderRadius: theme.radius[border === "rounded" ? "radius_70" : "radius_0"],
151
+ width: "150px",
152
+ ["> :first-child"]: {
153
+ whiteSpace: "nowrap",
154
+ display: "block",
155
+ overflow: "hidden",
156
+ textOverflow: "ellipsis"
157
+ }
158
+ }), (isClickable || isDismissible) && { userSelect: "none" }), isClickable && { cursor: "pointer" }), isDisabled && { cursor: "not-allowed" }), {
159
+ ["&:focus-visible"]: {
160
+ outline: `2px solid ${theme.palette.border.dark}`,
161
+ outlineOffset: "1px"
162
+ }
163
+ })
164
+ );
165
+ var TagButtonCloseStyled = import_styled.default.button`
166
+ ${({ theme }) => ({
167
+ backgroundColor: "transparent",
168
+ color: "currentColor",
169
+ display: "inherit",
170
+ border: 0,
171
+ cursor: "pointer",
172
+ ["&:disabled"]: { cursor: "not-allowed" },
173
+ ["&:focus-visible"]: {
174
+ outline: `2px solid ${theme.palette.border.dark}`,
175
+ outlineOffset: "1px"
176
+ }
177
+ })}
178
+ `;
57
179
 
58
180
  // ../../dt-dds-react/core/assets/svgs/AllOut.tsx
59
181
  var import_jsx_runtime = require("react/jsx-runtime");
@@ -249,128 +371,6 @@ var import_jsx_runtime56 = require("react/jsx-runtime");
249
371
  // ../../dt-dds-react/core/assets/svgs/Settings.tsx
250
372
  var import_jsx_runtime57 = require("react/jsx-runtime");
251
373
 
252
- // src/Tag.styled.ts
253
- var import_styled = __toESM(require("@emotion/styled"));
254
-
255
- // src/utils/tagVariantColors.ts
256
- var getColors = (variant, theme, isDisabled, color) => {
257
- const resolvedColor = color === "primary" ? "accent" : color;
258
- if (variant === "solid") {
259
- const palette = theme.palette[resolvedColor];
260
- return {
261
- bgColor: isDisabled ? palette.light : palette.default,
262
- hoveredBgColor: palette.dark
263
- };
264
- }
265
- if (variant === "outlined") {
266
- const palette = theme.palette[resolvedColor];
267
- return {
268
- bgColor: palette.light,
269
- hoveredBgColor: palette.medium,
270
- borderTextColor: isDisabled ? palette.medium : palette.default,
271
- hoveredBorderTextColor: palette.dark
272
- };
273
- }
274
- };
275
- var tagVariantColors = ({
276
- theme,
277
- color,
278
- variant,
279
- hasHover,
280
- isDisabled
281
- }) => {
282
- const colors = getColors(variant, theme, isDisabled, color);
283
- return {
284
- solid: __spreadValues({
285
- border: theme.spacing.spacing_0,
286
- color: theme.palette.content.contrast,
287
- backgroundColor: colors == null ? void 0 : colors.bgColor
288
- }, hasHover && {
289
- "&:hover": {
290
- backgroundColor: colors == null ? void 0 : colors.hoveredBgColor,
291
- color: theme.palette.content.contrast
292
- }
293
- }),
294
- outlined: __spreadValues({
295
- border: `1px solid ${colors == null ? void 0 : colors.borderTextColor}`,
296
- color: colors == null ? void 0 : colors.borderTextColor,
297
- backgroundColor: colors == null ? void 0 : colors.bgColor
298
- }, hasHover && {
299
- "&:hover": {
300
- borderColor: colors == null ? void 0 : colors.hoveredBorderTextColor,
301
- color: colors == null ? void 0 : colors.hoveredBorderTextColor,
302
- backgroundColor: colors == null ? void 0 : colors.hoveredBgColor
303
- }
304
- })
305
- }[variant];
306
- };
307
-
308
- // src/utils/tagVariantSize.ts
309
- var tagSizeStyles = (theme, size) => ({
310
- medium: {
311
- fontSize: "0.75rem",
312
- fontWeight: "700",
313
- lineHeight: "1rem",
314
- padding: `${theme.spacing.spacing_30} ${theme.spacing.spacing_40}`,
315
- height: "32px"
316
- },
317
- small: {
318
- fontSize: "0.625rem",
319
- fontWeight: "700",
320
- lineHeight: "0.875rem",
321
- padding: `${theme.spacing.spacing_10} ${theme.spacing.spacing_30}`,
322
- height: "18px"
323
- }
324
- })[size];
325
-
326
- // src/Tag.styled.ts
327
- var TagStyled = import_styled.default.div(
328
- ({
329
- theme,
330
- border,
331
- isDisabled,
332
- isClickable,
333
- isDismissible,
334
- size,
335
- variant,
336
- color,
337
- hasHover
338
- }) => __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues({}, tagSizeStyles(theme, size)), tagVariantColors({ theme, variant, color, hasHover, isDisabled })), {
339
- display: "flex",
340
- textTransform: "uppercase",
341
- alignItems: "center",
342
- maxWidth: "max-content",
343
- gap: theme.spacing.spacing_20,
344
- borderRadius: theme.radius[border === "rounded" ? "radius_70" : "radius_0"],
345
- width: "150px",
346
- ["> :first-child"]: {
347
- whiteSpace: "nowrap",
348
- display: "block",
349
- overflow: "hidden",
350
- textOverflow: "ellipsis"
351
- }
352
- }), (isClickable || isDismissible) && { userSelect: "none" }), isClickable && { cursor: "pointer" }), isDisabled && { cursor: "not-allowed" }), {
353
- ["&:focus-visible"]: {
354
- outline: `2px solid ${theme.palette.border.dark}`,
355
- outlineOffset: "1px"
356
- }
357
- })
358
- );
359
- var TagButtonCloseStyled = import_styled.default.button`
360
- ${({ theme }) => ({
361
- backgroundColor: "transparent",
362
- color: "currentColor",
363
- display: "inherit",
364
- border: 0,
365
- cursor: "pointer",
366
- ["&:disabled"]: { cursor: "not-allowed" },
367
- ["&:focus-visible"]: {
368
- outline: `2px solid ${theme.palette.border.dark}`,
369
- outlineOffset: "1px"
370
- }
371
- })}
372
- `;
373
-
374
374
  // src/Tag.tsx
375
375
  var import_jsx_runtime58 = require("react/jsx-runtime");
376
376
  var Tag = (0, import_react3.forwardRef)(
package/dist/index.mjs CHANGED
@@ -19,8 +19,130 @@ var __spreadValues = (a, b) => {
19
19
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
20
 
21
21
  // src/Tag.tsx
22
- import { Tooltip } from "@dt-dds/react-tooltip";
23
22
  import { forwardRef, useEffect, useRef, useState } from "react";
23
+ import { Tooltip } from "@dt-dds/react-tooltip";
24
+
25
+ // src/Tag.styled.ts
26
+ import styled from "@emotion/styled";
27
+
28
+ // src/utils/tagVariantColors.ts
29
+ var getColors = (variant, theme, isDisabled, color) => {
30
+ const resolvedColor = color === "primary" ? "accent" : color;
31
+ if (variant === "solid") {
32
+ const palette = theme.palette[resolvedColor];
33
+ return {
34
+ bgColor: isDisabled ? palette.light : palette.default,
35
+ hoveredBgColor: palette.dark
36
+ };
37
+ }
38
+ if (variant === "outlined") {
39
+ const palette = theme.palette[resolvedColor];
40
+ return {
41
+ bgColor: palette.light,
42
+ hoveredBgColor: palette.medium,
43
+ borderTextColor: isDisabled ? palette.medium : palette.default,
44
+ hoveredBorderTextColor: palette.dark
45
+ };
46
+ }
47
+ };
48
+ var tagVariantColors = ({
49
+ theme,
50
+ color,
51
+ variant,
52
+ hasHover,
53
+ isDisabled
54
+ }) => {
55
+ const colors = getColors(variant, theme, isDisabled, color);
56
+ return {
57
+ solid: __spreadValues({
58
+ border: theme.spacing.spacing_0,
59
+ color: theme.palette.content.contrast,
60
+ backgroundColor: colors == null ? void 0 : colors.bgColor
61
+ }, hasHover && {
62
+ "&:hover": {
63
+ backgroundColor: colors == null ? void 0 : colors.hoveredBgColor,
64
+ color: theme.palette.content.contrast
65
+ }
66
+ }),
67
+ outlined: __spreadValues({
68
+ border: `1px solid ${colors == null ? void 0 : colors.borderTextColor}`,
69
+ color: colors == null ? void 0 : colors.borderTextColor,
70
+ backgroundColor: colors == null ? void 0 : colors.bgColor
71
+ }, hasHover && {
72
+ "&:hover": {
73
+ borderColor: colors == null ? void 0 : colors.hoveredBorderTextColor,
74
+ color: colors == null ? void 0 : colors.hoveredBorderTextColor,
75
+ backgroundColor: colors == null ? void 0 : colors.hoveredBgColor
76
+ }
77
+ })
78
+ }[variant];
79
+ };
80
+
81
+ // src/utils/tagVariantSize.ts
82
+ var tagSizeStyles = (theme, size) => ({
83
+ medium: {
84
+ fontSize: "0.75rem",
85
+ fontWeight: "700",
86
+ lineHeight: "1rem",
87
+ padding: `${theme.spacing.spacing_30} ${theme.spacing.spacing_40}`,
88
+ height: "32px"
89
+ },
90
+ small: {
91
+ fontSize: "0.625rem",
92
+ fontWeight: "700",
93
+ lineHeight: "0.875rem",
94
+ padding: `${theme.spacing.spacing_10} ${theme.spacing.spacing_30}`,
95
+ height: "18px"
96
+ }
97
+ })[size];
98
+
99
+ // src/Tag.styled.ts
100
+ var TagStyled = styled.div(
101
+ ({
102
+ theme,
103
+ border,
104
+ isDisabled,
105
+ isClickable,
106
+ isDismissible,
107
+ size,
108
+ variant,
109
+ color,
110
+ hasHover
111
+ }) => __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues({}, tagSizeStyles(theme, size)), tagVariantColors({ theme, variant, color, hasHover, isDisabled })), {
112
+ display: "flex",
113
+ textTransform: "uppercase",
114
+ alignItems: "center",
115
+ maxWidth: "max-content",
116
+ gap: theme.spacing.spacing_20,
117
+ borderRadius: theme.radius[border === "rounded" ? "radius_70" : "radius_0"],
118
+ width: "150px",
119
+ ["> :first-child"]: {
120
+ whiteSpace: "nowrap",
121
+ display: "block",
122
+ overflow: "hidden",
123
+ textOverflow: "ellipsis"
124
+ }
125
+ }), (isClickable || isDismissible) && { userSelect: "none" }), isClickable && { cursor: "pointer" }), isDisabled && { cursor: "not-allowed" }), {
126
+ ["&:focus-visible"]: {
127
+ outline: `2px solid ${theme.palette.border.dark}`,
128
+ outlineOffset: "1px"
129
+ }
130
+ })
131
+ );
132
+ var TagButtonCloseStyled = styled.button`
133
+ ${({ theme }) => ({
134
+ backgroundColor: "transparent",
135
+ color: "currentColor",
136
+ display: "inherit",
137
+ border: 0,
138
+ cursor: "pointer",
139
+ ["&:disabled"]: { cursor: "not-allowed" },
140
+ ["&:focus-visible"]: {
141
+ outline: `2px solid ${theme.palette.border.dark}`,
142
+ outlineOffset: "1px"
143
+ }
144
+ })}
145
+ `;
24
146
 
25
147
  // ../../dt-dds-react/core/assets/svgs/AllOut.tsx
26
148
  import { jsx, jsxs } from "react/jsx-runtime";
@@ -216,128 +338,6 @@ import { jsx as jsx56 } from "react/jsx-runtime";
216
338
  // ../../dt-dds-react/core/assets/svgs/Settings.tsx
217
339
  import { jsx as jsx57 } from "react/jsx-runtime";
218
340
 
219
- // src/Tag.styled.ts
220
- import styled from "@emotion/styled";
221
-
222
- // src/utils/tagVariantColors.ts
223
- var getColors = (variant, theme, isDisabled, color) => {
224
- const resolvedColor = color === "primary" ? "accent" : color;
225
- if (variant === "solid") {
226
- const palette = theme.palette[resolvedColor];
227
- return {
228
- bgColor: isDisabled ? palette.light : palette.default,
229
- hoveredBgColor: palette.dark
230
- };
231
- }
232
- if (variant === "outlined") {
233
- const palette = theme.palette[resolvedColor];
234
- return {
235
- bgColor: palette.light,
236
- hoveredBgColor: palette.medium,
237
- borderTextColor: isDisabled ? palette.medium : palette.default,
238
- hoveredBorderTextColor: palette.dark
239
- };
240
- }
241
- };
242
- var tagVariantColors = ({
243
- theme,
244
- color,
245
- variant,
246
- hasHover,
247
- isDisabled
248
- }) => {
249
- const colors = getColors(variant, theme, isDisabled, color);
250
- return {
251
- solid: __spreadValues({
252
- border: theme.spacing.spacing_0,
253
- color: theme.palette.content.contrast,
254
- backgroundColor: colors == null ? void 0 : colors.bgColor
255
- }, hasHover && {
256
- "&:hover": {
257
- backgroundColor: colors == null ? void 0 : colors.hoveredBgColor,
258
- color: theme.palette.content.contrast
259
- }
260
- }),
261
- outlined: __spreadValues({
262
- border: `1px solid ${colors == null ? void 0 : colors.borderTextColor}`,
263
- color: colors == null ? void 0 : colors.borderTextColor,
264
- backgroundColor: colors == null ? void 0 : colors.bgColor
265
- }, hasHover && {
266
- "&:hover": {
267
- borderColor: colors == null ? void 0 : colors.hoveredBorderTextColor,
268
- color: colors == null ? void 0 : colors.hoveredBorderTextColor,
269
- backgroundColor: colors == null ? void 0 : colors.hoveredBgColor
270
- }
271
- })
272
- }[variant];
273
- };
274
-
275
- // src/utils/tagVariantSize.ts
276
- var tagSizeStyles = (theme, size) => ({
277
- medium: {
278
- fontSize: "0.75rem",
279
- fontWeight: "700",
280
- lineHeight: "1rem",
281
- padding: `${theme.spacing.spacing_30} ${theme.spacing.spacing_40}`,
282
- height: "32px"
283
- },
284
- small: {
285
- fontSize: "0.625rem",
286
- fontWeight: "700",
287
- lineHeight: "0.875rem",
288
- padding: `${theme.spacing.spacing_10} ${theme.spacing.spacing_30}`,
289
- height: "18px"
290
- }
291
- })[size];
292
-
293
- // src/Tag.styled.ts
294
- var TagStyled = styled.div(
295
- ({
296
- theme,
297
- border,
298
- isDisabled,
299
- isClickable,
300
- isDismissible,
301
- size,
302
- variant,
303
- color,
304
- hasHover
305
- }) => __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues({}, tagSizeStyles(theme, size)), tagVariantColors({ theme, variant, color, hasHover, isDisabled })), {
306
- display: "flex",
307
- textTransform: "uppercase",
308
- alignItems: "center",
309
- maxWidth: "max-content",
310
- gap: theme.spacing.spacing_20,
311
- borderRadius: theme.radius[border === "rounded" ? "radius_70" : "radius_0"],
312
- width: "150px",
313
- ["> :first-child"]: {
314
- whiteSpace: "nowrap",
315
- display: "block",
316
- overflow: "hidden",
317
- textOverflow: "ellipsis"
318
- }
319
- }), (isClickable || isDismissible) && { userSelect: "none" }), isClickable && { cursor: "pointer" }), isDisabled && { cursor: "not-allowed" }), {
320
- ["&:focus-visible"]: {
321
- outline: `2px solid ${theme.palette.border.dark}`,
322
- outlineOffset: "1px"
323
- }
324
- })
325
- );
326
- var TagButtonCloseStyled = styled.button`
327
- ${({ theme }) => ({
328
- backgroundColor: "transparent",
329
- color: "currentColor",
330
- display: "inherit",
331
- border: 0,
332
- cursor: "pointer",
333
- ["&:disabled"]: { cursor: "not-allowed" },
334
- ["&:focus-visible"]: {
335
- outline: `2px solid ${theme.palette.border.dark}`,
336
- outlineOffset: "1px"
337
- }
338
- })}
339
- `;
340
-
341
341
  // src/Tag.tsx
342
342
  import { jsx as jsx58, jsxs as jsxs25 } from "react/jsx-runtime";
343
343
  var Tag = forwardRef(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dt-dds/react-tag",
3
- "version": "1.0.0-beta.53",
3
+ "version": "1.0.0-beta.55",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  ".": "./dist/index.js"
@@ -20,9 +20,9 @@
20
20
  "test:update:snapshot": "jest -u"
21
21
  },
22
22
  "dependencies": {
23
- "@dt-dds/react-core": "1.0.0-beta.51",
24
- "@dt-dds/react-tooltip": "1.0.0-beta.59",
25
- "@dt-dds/themes": "1.0.0-beta.9"
23
+ "@dt-dds/react-core": "1.0.0-beta.52",
24
+ "@dt-dds/react-tooltip": "1.0.0-beta.61",
25
+ "@dt-dds/themes": "1.0.0-beta.10"
26
26
  },
27
27
  "devDependencies": {
28
28
  "@babel/core": "^7.22.9",