@eqtylab/equality 1.3.0 → 1.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.
Files changed (16) hide show
  1. package/dist/badge.module.module.css.module.css +53 -6
  2. package/dist/generated/color-vars.css +4 -0
  3. package/dist/generated/dark-tokens.css +2 -0
  4. package/dist/generated/global-dark-tokens.css +2 -0
  5. package/dist/generated/global-light-tokens.css +2 -0
  6. package/dist/generated/light-tokens.css +2 -0
  7. package/dist/generated/tailwind-tokens.css +2 -0
  8. package/dist/index.cjs +15 -3
  9. package/dist/index.cjs.map +1 -1
  10. package/dist/index.d.cts +8 -5
  11. package/dist/index.d.ts +8 -5
  12. package/dist/index.js +15 -3
  13. package/dist/index.js.map +1 -1
  14. package/dist/spinner.module.module.css.module.css +1 -1
  15. package/dist/theme.module.module.css.module.css +6 -0
  16. package/package.json +2 -1
package/dist/badge.module.module.css.module.css CHANGED
@@ -1,9 +1,5 @@
1
1
  /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
2
2
  .badge {
3
- padding-inline: calc(0.25rem * 2);
4
- padding-block: calc(0.25rem * 0.5);
5
- font-size: 0.75rem;
6
- line-height: var(--tw-leading, calc(1 / 0.75));
7
3
  --tw-font-weight: 500;
8
4
  font-weight: 500;
9
5
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
@@ -12,15 +8,34 @@
12
8
  border-radius: calc(infinity * 1px);
13
9
  display: flex;
14
10
  align-items: center;
15
- gap: calc(0.25rem * 1);
16
- min-height: calc(0.25rem * 5);
17
11
  width: max-content;
12
+ }
13
+ .badge--md {
14
+ padding-inline: calc(0.25rem * 2);
15
+ padding-block: calc(0.25rem * 0.5);
16
+ font-size: 0.75rem;
17
+ line-height: var(--tw-leading, calc(1 / 0.75));
18
+ min-height: calc(0.25rem * 5);
18
19
  min-width: calc(0.25rem * 5);
20
+ gap: calc(0.25rem * 1);
21
+ }
22
+ .badge--sm {
23
+ padding-inline: calc(0.25rem * 1);
24
+ padding-block: calc(0.25rem * 0);
25
+ font-size: 0.75rem;
26
+ line-height: var(--tw-leading, calc(1 / 0.75));
27
+ min-height: calc(0.25rem * 4);
28
+ min-width: calc(0.25rem * 4);
29
+ gap: calc(0.25rem * 0.5);
19
30
  }
20
31
  .badge--primary {
21
32
  background-color: var(--color-badge-background-primary);
22
33
  color: var(--color-badge-text-primary);
23
34
  }
35
+ .badge--secondary {
36
+ background-color: var(--color-badge-background-secondary);
37
+ color: var(--color-badge-text-secondary);
38
+ }
24
39
  .badge--danger {
25
40
  background-color: var(--color-badge-background-danger);
26
41
  color: var(--color-badge-text-danger);
@@ -55,6 +70,14 @@
55
70
  }
56
71
  }
57
72
  }
73
+ .badge--sm .closable-btn {
74
+ width: calc(0.25rem * 3);
75
+ height: calc(0.25rem * 3);
76
+ & svg {
77
+ width: calc(0.25rem * 2.5);
78
+ height: calc(0.25rem * 2.5);
79
+ }
80
+ }
58
81
  .badge--primary .closable-btn {
59
82
  background-color: var(--color-badge-background-primary);
60
83
  color: var(--color-badge-text-primary);
@@ -69,6 +92,20 @@
69
92
  }
70
93
  }
71
94
  }
95
+ .badge--secondary .closable-btn {
96
+ background-color: var(--color-badge-background-secondary);
97
+ color: var(--color-badge-text-secondary);
98
+ &:hover {
99
+ @media (hover: hover) {
100
+ background-color: var(--color-badge-text-secondary);
101
+ }
102
+ }
103
+ &:hover {
104
+ @media (hover: hover) {
105
+ color: var(--color-badge-background-secondary);
106
+ }
107
+ }
108
+ }
72
109
  .badge--danger .closable-btn {
73
110
  background-color: var(--color-badge-background-danger);
74
111
  color: var(--color-badge-text-danger);
@@ -132,9 +169,19 @@
132
169
  .badge .icon {
133
170
  color: inherit;
134
171
  }
172
+ .badge--monospace {
173
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
174
+ monospace;
175
+ }
176
+ .badge--square {
177
+ border-radius: 0.25rem;
178
+ }
135
179
  .badge--icon-only {
136
180
  padding: calc(0.25rem * 1);
137
181
  }
182
+ .badge--sm.badge--icon-only {
183
+ padding: calc(0.25rem * 0.5);
184
+ }
138
185
  @property --tw-font-weight {
139
186
  syntax: "*";
140
187
  inherits: false;
package/dist/generated/color-vars.css CHANGED
@@ -29,6 +29,7 @@
29
29
  --color-badge-background-primary: color(display-p3 0.795 0.7755 0.9866);
30
30
  --color-badge-background-question: color(display-p3 0.795 0.7755 0.9866);
31
31
  --color-badge-background-ready-for-review: color(display-p3 0.7289 0.7853 0.9401);
32
+ --color-badge-background-secondary: color(display-p3 0.7289 0.7853 0.9401);
32
33
  --color-badge-background-success: color(display-p3 0.7403 0.8486 0.7417);
33
34
  --color-badge-background-warning: color(display-p3 0.9327 0.8528 0.7204);
34
35
  --color-badge-text-accepted: color(display-p3 0.1608 0.1145 0.3417);
@@ -44,6 +45,7 @@
44
45
  --color-badge-text-primary: color(display-p3 0.1608 0.1145 0.3417);
45
46
  --color-badge-text-question: color(display-p3 0.1608 0.1145 0.3417);
46
47
  --color-badge-text-ready-for-review: color(display-p3 0.1017 0.1411 0.2832);
48
+ --color-badge-text-secondary: color(display-p3 0.1017 0.1411 0.2832);
47
49
  --color-badge-text-success: color(display-p3 0.1097 0.1998 0.08667);
48
50
  --color-badge-text-warning: color(display-p3 0.2723 0.1933 0.09642);
49
51
  --color-black: color(display-p3 0 0 0);
@@ -267,6 +269,7 @@
267
269
  --dark-color-badge-background-primary: color(display-p3 0.2473 0.1645 0.5241);
268
270
  --dark-color-badge-background-question: color(display-p3 0.2473 0.1645 0.5241);
269
271
  --dark-color-badge-background-ready-for-review: color(display-p3 0.1442 0.2013 0.4303);
272
+ --dark-color-badge-background-secondary: color(display-p3 0.1442 0.2013 0.4303);
270
273
  --dark-color-badge-background-success: color(display-p3 0.1689 0.3045 0.136);
271
274
  --dark-color-badge-background-warning: color(display-p3 0.4487 0.322 0.1436);
272
275
  --dark-color-badge-text-accepted: color(display-p3 0.795 0.7755 0.9866);
@@ -282,6 +285,7 @@
282
285
  --dark-color-badge-text-primary: color(display-p3 0.795 0.7755 0.9866);
283
286
  --dark-color-badge-text-question: color(display-p3 0.795 0.7755 0.9866);
284
287
  --dark-color-badge-text-ready-for-review: color(display-p3 0.7289 0.7853 0.9401);
288
+ --dark-color-badge-text-secondary: color(display-p3 0.7289 0.7853 0.9401);
285
289
  --dark-color-badge-text-success: color(display-p3 0.8698 0.8698 0.8698);
286
290
  --dark-color-badge-text-warning: color(display-p3 0.9327 0.8528 0.7204);
287
291
  --dark-color-border-base: color(display-p3 0.1792 0.1792 0.1792);
package/dist/generated/dark-tokens.css CHANGED
@@ -20,6 +20,7 @@
20
20
  --color-badge-background-primary: color(display-p3 0.2473 0.1645 0.5241);
21
21
  --color-badge-background-question: color(display-p3 0.2473 0.1645 0.5241);
22
22
  --color-badge-background-ready-for-review: color(display-p3 0.1442 0.2013 0.4303);
23
+ --color-badge-background-secondary: color(display-p3 0.1442 0.2013 0.4303);
23
24
  --color-badge-background-success: color(display-p3 0.1689 0.3045 0.136);
24
25
  --color-badge-background-warning: color(display-p3 0.4487 0.322 0.1436);
25
26
  --color-badge-text-accepted: color(display-p3 0.795 0.7755 0.9866);
@@ -35,6 +36,7 @@
35
36
  --color-badge-text-primary: color(display-p3 0.795 0.7755 0.9866);
36
37
  --color-badge-text-question: color(display-p3 0.795 0.7755 0.9866);
37
38
  --color-badge-text-ready-for-review: color(display-p3 0.7289 0.7853 0.9401);
39
+ --color-badge-text-secondary: color(display-p3 0.7289 0.7853 0.9401);
38
40
  --color-badge-text-success: color(display-p3 0.8698 0.8698 0.8698);
39
41
  --color-badge-text-warning: color(display-p3 0.9327 0.8528 0.7204);
40
42
  --color-border-base: color(display-p3 0.1792 0.1792 0.1792);
package/dist/generated/global-dark-tokens.css CHANGED
@@ -20,6 +20,7 @@ html[data-equality-theme='dark'] {
20
20
  --color-badge-background-primary: color(display-p3 0.2473 0.1645 0.5241);
21
21
  --color-badge-background-question: color(display-p3 0.2473 0.1645 0.5241);
22
22
  --color-badge-background-ready-for-review: color(display-p3 0.1442 0.2013 0.4303);
23
+ --color-badge-background-secondary: color(display-p3 0.1442 0.2013 0.4303);
23
24
  --color-badge-background-success: color(display-p3 0.1689 0.3045 0.136);
24
25
  --color-badge-background-warning: color(display-p3 0.4487 0.322 0.1436);
25
26
  --color-badge-text-accepted: color(display-p3 0.795 0.7755 0.9866);
@@ -35,6 +36,7 @@ html[data-equality-theme='dark'] {
35
36
  --color-badge-text-primary: color(display-p3 0.795 0.7755 0.9866);
36
37
  --color-badge-text-question: color(display-p3 0.795 0.7755 0.9866);
37
38
  --color-badge-text-ready-for-review: color(display-p3 0.7289 0.7853 0.9401);
39
+ --color-badge-text-secondary: color(display-p3 0.7289 0.7853 0.9401);
38
40
  --color-badge-text-success: color(display-p3 0.8698 0.8698 0.8698);
39
41
  --color-badge-text-warning: color(display-p3 0.9327 0.8528 0.7204);
40
42
  --color-border-base: color(display-p3 0.1792 0.1792 0.1792);
package/dist/generated/global-light-tokens.css CHANGED
@@ -33,6 +33,7 @@ html {
33
33
  --color-badge-background-primary: color(display-p3 0.795 0.7755 0.9866);
34
34
  --color-badge-background-question: color(display-p3 0.795 0.7755 0.9866);
35
35
  --color-badge-background-ready-for-review: color(display-p3 0.7289 0.7853 0.9401);
36
+ --color-badge-background-secondary: color(display-p3 0.7289 0.7853 0.9401);
36
37
  --color-badge-background-success: color(display-p3 0.7403 0.8486 0.7417);
37
38
  --color-badge-background-warning: color(display-p3 0.9327 0.8528 0.7204);
38
39
  --color-badge-text-accepted: color(display-p3 0.1608 0.1145 0.3417);
@@ -48,6 +49,7 @@ html {
48
49
  --color-badge-text-primary: color(display-p3 0.1608 0.1145 0.3417);
49
50
  --color-badge-text-question: color(display-p3 0.1608 0.1145 0.3417);
50
51
  --color-badge-text-ready-for-review: color(display-p3 0.1017 0.1411 0.2832);
52
+ --color-badge-text-secondary: color(display-p3 0.1017 0.1411 0.2832);
51
53
  --color-badge-text-success: color(display-p3 0.1097 0.1998 0.08667);
52
54
  --color-badge-text-warning: color(display-p3 0.2723 0.1933 0.09642);
53
55
  --color-black: color(display-p3 0 0 0);
package/dist/generated/light-tokens.css CHANGED
@@ -33,6 +33,7 @@
33
33
  --color-badge-background-primary: color(display-p3 0.795 0.7755 0.9866);
34
34
  --color-badge-background-question: color(display-p3 0.795 0.7755 0.9866);
35
35
  --color-badge-background-ready-for-review: color(display-p3 0.7289 0.7853 0.9401);
36
+ --color-badge-background-secondary: color(display-p3 0.7289 0.7853 0.9401);
36
37
  --color-badge-background-success: color(display-p3 0.7403 0.8486 0.7417);
37
38
  --color-badge-background-warning: color(display-p3 0.9327 0.8528 0.7204);
38
39
  --color-badge-text-accepted: color(display-p3 0.1608 0.1145 0.3417);
@@ -48,6 +49,7 @@
48
49
  --color-badge-text-primary: color(display-p3 0.1608 0.1145 0.3417);
49
50
  --color-badge-text-question: color(display-p3 0.1608 0.1145 0.3417);
50
51
  --color-badge-text-ready-for-review: color(display-p3 0.1017 0.1411 0.2832);
52
+ --color-badge-text-secondary: color(display-p3 0.1017 0.1411 0.2832);
51
53
  --color-badge-text-success: color(display-p3 0.1097 0.1998 0.08667);
52
54
  --color-badge-text-warning: color(display-p3 0.2723 0.1933 0.09642);
53
55
  --color-black: color(display-p3 0 0 0);
package/dist/generated/tailwind-tokens.css CHANGED
@@ -31,6 +31,7 @@
31
31
  --color-badge-background-primary: var(--color-badge-background-primary);
32
32
  --color-badge-background-question: var(--color-badge-background-question);
33
33
  --color-badge-background-ready-for-review: var(--color-badge-background-ready-for-review);
34
+ --color-badge-background-secondary: var(--color-badge-background-secondary);
34
35
  --color-badge-background-success: var(--color-badge-background-success);
35
36
  --color-badge-background-warning: var(--color-badge-background-warning);
36
37
  --color-badge-text-accepted: var(--color-badge-text-accepted);
@@ -46,6 +47,7 @@
46
47
  --color-badge-text-primary: var(--color-badge-text-primary);
47
48
  --color-badge-text-question: var(--color-badge-text-question);
48
49
  --color-badge-text-ready-for-review: var(--color-badge-text-ready-for-review);
50
+ --color-badge-text-secondary: var(--color-badge-text-secondary);
49
51
  --color-badge-text-success: var(--color-badge-text-success);
50
52
  --color-badge-text-warning: var(--color-badge-text-warning);
51
53
  --color-black: var(--color-black);
package/dist/index.cjs CHANGED
@@ -489,14 +489,20 @@ var badgeVariants = classVarianceAuthority.cva(styles7__default.default["badge"]
489
489
  variants: {
490
490
  variant: {
491
491
  primary: styles7__default.default["badge--primary"],
492
+ secondary: styles7__default.default["badge--secondary"],
492
493
  danger: styles7__default.default["badge--danger"],
493
494
  neutral: styles7__default.default["badge--neutral"],
494
495
  warning: styles7__default.default["badge--warning"],
495
496
  success: styles7__default.default["badge--success"]
497
+ },
498
+ size: {
499
+ sm: styles7__default.default["badge--sm"],
500
+ md: styles7__default.default["badge--md"]
496
501
  }
497
502
  },
498
503
  defaultVariants: {
499
- variant: "primary"
504
+ variant: "primary",
505
+ size: "md"
500
506
  }
501
507
  });
502
508
  var defaultVariantIcons = {
@@ -507,12 +513,15 @@ var defaultVariantIcons = {
507
513
  function Badge({
508
514
  className,
509
515
  variant,
516
+ size,
510
517
  closeable,
511
518
  handleClosable,
512
519
  truncate = false,
513
520
  truncateLength = 50,
514
521
  icon,
515
522
  display = "both",
523
+ monospace = false,
524
+ pill = true,
516
525
  ...props
517
526
  }) {
518
527
  const effectiveIcon = icon ?? (variant ? defaultVariantIcons[variant] : void 0);
@@ -554,8 +563,11 @@ function Badge({
554
563
  "div",
555
564
  {
556
565
  className: cn(
557
- variant !== null && badgeVariants({ variant }),
566
+ variant !== null && badgeVariants({ variant, size }),
558
567
  variant === null && styles7__default.default["badge"],
568
+ variant === null && styles7__default.default[`badge--${size ?? "md"}`],
569
+ monospace && styles7__default.default["badge--monospace"],
570
+ !pill && styles7__default.default["badge--square"],
559
571
  isIconOnly && styles7__default.default["badge--icon-only"],
560
572
  className
561
573
  ),
@@ -2062,7 +2074,7 @@ var ListOrGridViewToggle = ({
2062
2074
  )
2063
2075
  ] });
2064
2076
  };
2065
- var Spinner = ({ size = "md", variant = "neutral" }) => {
2077
+ var Spinner = ({ size = "md", variant = "primary" }) => {
2066
2078
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles29__default.default["spinner-container"], children: [
2067
2079
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(styles29__default.default["spinner"], styles29__default.default[size], styles29__default.default[variant]) }),
2068
2080
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(styles29__default.default["spinner-background"], styles29__default.default[size]) })