@digitalpromise/design 4.8.5 → 4.9.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.
- package/dist/forms.cjs +1 -1
- package/dist/forms.js +1 -1
- package/dist/{icon-Ce5_UC8P.js → icon-B0jP5FtS.js} +42 -58
- package/dist/icon-DcmjUgZF.cjs +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +39 -5
- package/dist/index.js +257 -105
- package/dist/theme.css +1 -1
- package/dist/tokens.d.ts +2 -0
- package/dist/tokens.js +41 -1
- package/package.json +20 -20
- package/dist/icon-1CrM76QC.cjs +0 -1
package/dist/index.js
CHANGED
|
@@ -1,188 +1,340 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { I as
|
|
3
|
-
import { B as
|
|
4
|
-
import { jsx as
|
|
5
|
-
import { useSearchParams as
|
|
6
|
-
import { useRef as
|
|
7
|
-
const
|
|
2
|
+
import { I as N } from "./icon-B0jP5FtS.js";
|
|
3
|
+
import { B as le } from "./icon-B0jP5FtS.js";
|
|
4
|
+
import { jsx as n, jsxs as h, Fragment as k } from "react/jsx-runtime";
|
|
5
|
+
import { useSearchParams as I, usePathname as z, useRouter as L } from "next/navigation";
|
|
6
|
+
import { useRef as R, useState as F, useEffect as M, useId as O } from "react";
|
|
7
|
+
const Y = [
|
|
8
|
+
"default",
|
|
9
|
+
"danger",
|
|
10
|
+
"inverse",
|
|
11
|
+
"emphasize",
|
|
12
|
+
"decolor"
|
|
13
|
+
], Z = ["md", "sm", "xs"], K = [
|
|
14
|
+
"ghost",
|
|
15
|
+
"outline",
|
|
16
|
+
"secondary",
|
|
17
|
+
"tertiary"
|
|
18
|
+
], V = "inline-flex items-center justify-center rounded-lg cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", A = {
|
|
19
|
+
md: "h-12 w-12 p-3",
|
|
20
|
+
sm: "h-8 w-8 p-2",
|
|
21
|
+
xs: "h-6 w-6 p-0"
|
|
22
|
+
}, E = {
|
|
23
|
+
default: "text-gray-5 hover:text-neutral-5 transition-colors",
|
|
24
|
+
danger: "text-red-4 hover:text-red-5",
|
|
25
|
+
inverse: "text-white hover:text-gray-1",
|
|
26
|
+
emphasize: "bg-white text-gray-5 hover:bg-gray-1 hover:text-neutral-5 focus-visible:bg-blue-1 focus-visible:text-blue-4 focus-visible:hover:bg-blue-2 focus-visible:hover:text-blue-5",
|
|
27
|
+
decolor: "text-gray-5 hover:text-neutral-5 transition-colors"
|
|
28
|
+
}, G = {
|
|
29
|
+
ghost: "",
|
|
30
|
+
outline: "border-2 border-gray-5"
|
|
31
|
+
}, q = {
|
|
32
|
+
default: "btn btn-primary",
|
|
33
|
+
danger: "btn btn-primary btn-danger",
|
|
34
|
+
inverse: "btn btn-primary btn-inverse",
|
|
35
|
+
emphasize: "btn btn-primary",
|
|
36
|
+
decolor: "btn btn-primary btn-decolor"
|
|
37
|
+
}, D = {
|
|
38
|
+
default: "flex items-center gap-2 py-3 text-gray-5",
|
|
39
|
+
danger: "flex items-center gap-2 py-3 text-red-4 hover:text-red-5",
|
|
40
|
+
inverse: "flex items-center gap-2 py-3 text-white hover:text-gray-1",
|
|
41
|
+
emphasize: "flex items-center gap-2 py-3 text-gray-5",
|
|
42
|
+
decolor: "flex items-center gap-2 py-3 text-gray-5 hover:text-neutral-5"
|
|
43
|
+
};
|
|
44
|
+
function j(e, o) {
|
|
45
|
+
return `${e === "xs" ? "block h-5 w-5 shrink-0 leading-none" : e === "sm" ? "block h-4 w-4 shrink-0 text-base leading-none" : "block h-6 w-6 shrink-0 text-2xl leading-none"} ${o ?? ""}`.trim();
|
|
46
|
+
}
|
|
47
|
+
function Q({
|
|
48
|
+
className: e,
|
|
49
|
+
size: o = "md",
|
|
50
|
+
state: t = "default",
|
|
51
|
+
variant: s = "ghost"
|
|
52
|
+
}) {
|
|
53
|
+
return s === "secondary" ? `${q[t]} ${e ?? ""}`.trim() : s === "tertiary" ? `${D[t]} ${e ?? ""}`.trim() : `${V} ${A[o]} ${E[t]} ${G[s]} ${e ?? ""}`.trim();
|
|
54
|
+
}
|
|
55
|
+
function T({
|
|
56
|
+
children: e,
|
|
57
|
+
icon: o,
|
|
58
|
+
iconClassName: t,
|
|
59
|
+
iconPosition: s = "start",
|
|
60
|
+
size: l = "md",
|
|
61
|
+
textClassName: u,
|
|
62
|
+
variant: i = "ghost"
|
|
63
|
+
}) {
|
|
64
|
+
const a = o ? /* @__PURE__ */ n(
|
|
65
|
+
N,
|
|
66
|
+
{
|
|
67
|
+
name: o,
|
|
68
|
+
className: i === "ghost" || i === "outline" ? j(l, t) : i === "tertiary" ? `h-5 w-5 shrink-0 ${t ?? ""}`.trim() : t
|
|
69
|
+
}
|
|
70
|
+
) : null;
|
|
71
|
+
if (i === "tertiary") {
|
|
72
|
+
const r = e ? /* @__PURE__ */ n("span", { className: `font-semibold underline ${u ?? ""}`.trim(), children: e }) : null;
|
|
73
|
+
return s === "end" ? /* @__PURE__ */ h(k, { children: [
|
|
74
|
+
r,
|
|
75
|
+
a
|
|
76
|
+
] }) : /* @__PURE__ */ h(k, { children: [
|
|
77
|
+
a,
|
|
78
|
+
r
|
|
79
|
+
] });
|
|
80
|
+
}
|
|
81
|
+
if (i === "secondary") {
|
|
82
|
+
const r = u ? /* @__PURE__ */ n("span", { className: u, children: e }) : e;
|
|
83
|
+
return a ? r ? s === "end" ? /* @__PURE__ */ h(k, { children: [
|
|
84
|
+
r,
|
|
85
|
+
" ",
|
|
86
|
+
a
|
|
87
|
+
] }) : /* @__PURE__ */ h(k, { children: [
|
|
88
|
+
a,
|
|
89
|
+
" ",
|
|
90
|
+
r
|
|
91
|
+
] }) : a : r;
|
|
92
|
+
}
|
|
93
|
+
return /* @__PURE__ */ h(k, { children: [
|
|
94
|
+
a,
|
|
95
|
+
e
|
|
96
|
+
] });
|
|
97
|
+
}
|
|
98
|
+
function ee({
|
|
99
|
+
children: e,
|
|
100
|
+
icon: o,
|
|
101
|
+
iconClassName: t,
|
|
102
|
+
iconPosition: s = "start",
|
|
103
|
+
label: l,
|
|
104
|
+
className: u,
|
|
105
|
+
size: i = "md",
|
|
106
|
+
state: a = "default",
|
|
107
|
+
textClassName: r,
|
|
108
|
+
type: c = "button",
|
|
109
|
+
variant: m = "ghost",
|
|
110
|
+
...y
|
|
111
|
+
}) {
|
|
112
|
+
return /* @__PURE__ */ n(
|
|
113
|
+
"button",
|
|
114
|
+
{
|
|
115
|
+
type: c,
|
|
116
|
+
className: Q({ className: u, size: i, state: a, variant: m }),
|
|
117
|
+
...y,
|
|
118
|
+
"aria-label": l,
|
|
119
|
+
children: T({
|
|
120
|
+
children: e,
|
|
121
|
+
icon: o,
|
|
122
|
+
iconClassName: t,
|
|
123
|
+
iconPosition: s,
|
|
124
|
+
size: i,
|
|
125
|
+
textClassName: r,
|
|
126
|
+
variant: m
|
|
127
|
+
})
|
|
128
|
+
}
|
|
129
|
+
);
|
|
130
|
+
}
|
|
131
|
+
function te({
|
|
132
|
+
name: e,
|
|
133
|
+
size: o = "md",
|
|
134
|
+
className: t
|
|
135
|
+
}) {
|
|
136
|
+
return /* @__PURE__ */ n(
|
|
137
|
+
N,
|
|
138
|
+
{
|
|
139
|
+
name: e,
|
|
140
|
+
className: j(o, t)
|
|
141
|
+
}
|
|
142
|
+
);
|
|
143
|
+
}
|
|
144
|
+
const U = /* @__PURE__ */ new Map([
|
|
8
145
|
["black", "/primary-badge-engine-logo-black.svg"],
|
|
9
146
|
["white", "/primary-badge-engine-logo-white.svg"],
|
|
10
147
|
["color", "/primary-badge-engine-logo-color.svg"]
|
|
11
148
|
]);
|
|
12
|
-
function
|
|
13
|
-
variant:
|
|
14
|
-
className:
|
|
149
|
+
function ne({
|
|
150
|
+
variant: e = "color",
|
|
151
|
+
className: o
|
|
15
152
|
}) {
|
|
16
|
-
const
|
|
17
|
-
return
|
|
153
|
+
const t = U.get(e);
|
|
154
|
+
return t === void 0 ? null : /* @__PURE__ */ n(
|
|
18
155
|
"img",
|
|
19
156
|
{
|
|
20
|
-
src:
|
|
157
|
+
src: t,
|
|
21
158
|
width: 186,
|
|
22
159
|
height: 36,
|
|
23
160
|
alt: "Badge Engine",
|
|
24
|
-
className:
|
|
161
|
+
className: o
|
|
25
162
|
}
|
|
26
163
|
);
|
|
27
164
|
}
|
|
28
|
-
function
|
|
29
|
-
count:
|
|
30
|
-
limit:
|
|
31
|
-
pageParamKey:
|
|
165
|
+
function re({
|
|
166
|
+
count: e,
|
|
167
|
+
limit: o,
|
|
168
|
+
pageParamKey: t = "page"
|
|
32
169
|
}) {
|
|
33
|
-
const
|
|
170
|
+
const s = I(), l = z(), u = L(), i = s.get(t), a = i ? Number.parseInt(i, 10) : Number.NaN, r = Number.isFinite(a) ? a : 1, c = Math.max(1, Math.ceil(e / o)), m = c <= 7 ? Array.from({ length: c }, (d, g) => g + 1) : r <= 4 ? [1, 2, 3, 4, 5, "ellipsis", c] : r >= c - 3 ? [1, "ellipsis", c - 4, c - 3, c - 2, c - 1, c] : [
|
|
34
171
|
1,
|
|
35
172
|
"ellipsis",
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
173
|
+
r - 1,
|
|
174
|
+
r,
|
|
175
|
+
r + 1,
|
|
39
176
|
"ellipsis",
|
|
40
|
-
|
|
41
|
-
],
|
|
42
|
-
if (
|
|
177
|
+
c
|
|
178
|
+
], y = r === 1, C = r === c, $ = (d) => {
|
|
179
|
+
if (y && d === "prev" || C && d === "next")
|
|
43
180
|
return;
|
|
44
|
-
const
|
|
45
|
-
|
|
46
|
-
},
|
|
47
|
-
const
|
|
48
|
-
|
|
181
|
+
const g = d === "prev" ? r - 1 : r + 1, b = new URLSearchParams(s.toString());
|
|
182
|
+
b.set(t, String(g)), u.push(`${l}?${b.toString()}`, { scroll: !1 });
|
|
183
|
+
}, f = (d) => {
|
|
184
|
+
const g = new URLSearchParams(s.toString());
|
|
185
|
+
g.set(t, String(d)), u.push(`${l}?${g.toString()}`, { scroll: !1 });
|
|
49
186
|
};
|
|
50
|
-
return /* @__PURE__ */
|
|
51
|
-
/* @__PURE__ */
|
|
187
|
+
return /* @__PURE__ */ h("ul", { className: "flex items-center justify-center gap-4 font-medium", children: [
|
|
188
|
+
/* @__PURE__ */ n("li", { className: "mr-2", children: /* @__PURE__ */ n(
|
|
52
189
|
"button",
|
|
53
190
|
{
|
|
54
191
|
type: "button",
|
|
55
192
|
"aria-label": "Previous page",
|
|
56
|
-
disabled:
|
|
193
|
+
disabled: y,
|
|
57
194
|
className: "inline-flex h-[42px] w-[42px] items-center justify-center rounded-[4px] bg-transparent p-[9px] text-gray-5 transition hover:bg-transparent hover:text-neutral-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
|
|
58
|
-
onClick: () =>
|
|
59
|
-
children: /* @__PURE__ */
|
|
195
|
+
onClick: () => $("prev"),
|
|
196
|
+
children: /* @__PURE__ */ n(N, { name: "ArrowLineLeft" })
|
|
60
197
|
}
|
|
61
198
|
) }),
|
|
62
|
-
|
|
63
|
-
const
|
|
64
|
-
return /* @__PURE__ */
|
|
199
|
+
m.map((d, g) => {
|
|
200
|
+
const b = d === "ellipsis", x = b ? void 0 : d, w = x === r, S = b || w, P = b ? "Pagination ellipsis" : `Go to page ${x}`;
|
|
201
|
+
return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
|
|
65
202
|
"button",
|
|
66
203
|
{
|
|
67
204
|
type: "button",
|
|
68
|
-
"aria-label":
|
|
69
|
-
"aria-current":
|
|
70
|
-
disabled:
|
|
71
|
-
className: `flex h-[36px] w-[36px] items-center justify-center rounded-[4px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 ${
|
|
72
|
-
onClick: !
|
|
73
|
-
children:
|
|
205
|
+
"aria-label": P,
|
|
206
|
+
"aria-current": w ? "page" : void 0,
|
|
207
|
+
disabled: S,
|
|
208
|
+
className: `flex h-[36px] w-[36px] items-center justify-center rounded-[4px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 ${w ? "bg-blue-1 text-blue-4" : ""} ${S ? "cursor-default" : "cursor-pointer hover:bg-gray-1"}`.trim(),
|
|
209
|
+
onClick: !S && x ? () => f(x) : void 0,
|
|
210
|
+
children: b ? "..." : x
|
|
74
211
|
}
|
|
75
|
-
) }, `${
|
|
212
|
+
) }, `${d}-${g}`);
|
|
76
213
|
}),
|
|
77
|
-
/* @__PURE__ */
|
|
214
|
+
/* @__PURE__ */ n("li", { className: "ml-2", children: /* @__PURE__ */ n(
|
|
78
215
|
"button",
|
|
79
216
|
{
|
|
80
217
|
type: "button",
|
|
81
218
|
"aria-label": "Next page",
|
|
82
|
-
disabled:
|
|
219
|
+
disabled: C,
|
|
83
220
|
className: "inline-flex h-[42px] w-[42px] items-center justify-center rounded-[4px] bg-transparent p-[9px] text-gray-5 transition hover:bg-transparent hover:text-neutral-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
|
|
84
|
-
onClick: () =>
|
|
85
|
-
children: /* @__PURE__ */
|
|
221
|
+
onClick: () => $("next"),
|
|
222
|
+
children: /* @__PURE__ */ n(N, { name: "ArrowLineRight" })
|
|
86
223
|
}
|
|
87
224
|
) })
|
|
88
225
|
] });
|
|
89
226
|
}
|
|
90
|
-
function
|
|
91
|
-
placeholder:
|
|
92
|
-
className:
|
|
93
|
-
inputWidth:
|
|
94
|
-
value:
|
|
95
|
-
onChange:
|
|
96
|
-
syncToUrl:
|
|
97
|
-
id:
|
|
98
|
-
paramKey:
|
|
227
|
+
function se({
|
|
228
|
+
placeholder: e,
|
|
229
|
+
className: o,
|
|
230
|
+
inputWidth: t,
|
|
231
|
+
value: s,
|
|
232
|
+
onChange: l,
|
|
233
|
+
syncToUrl: u = !0,
|
|
234
|
+
id: i = "search",
|
|
235
|
+
paramKey: a = "s",
|
|
236
|
+
firstResultSelector: r,
|
|
237
|
+
onEnter: c
|
|
99
238
|
}) {
|
|
100
|
-
const
|
|
101
|
-
|
|
102
|
-
),
|
|
103
|
-
|
|
104
|
-
!
|
|
105
|
-
}, [
|
|
106
|
-
const
|
|
107
|
-
if (!
|
|
108
|
-
const
|
|
109
|
-
|
|
110
|
-
const
|
|
111
|
-
|
|
239
|
+
const m = I(), y = z(), C = L(), $ = R(null), f = s !== void 0, [d, g] = F(
|
|
240
|
+
f ? s : m.get(a)?.toString() ?? ""
|
|
241
|
+
), b = f ? s : d, x = Math.max(e.length, 1), w = `calc(${x}ch + 60px)`, S = t === void 0 ? w : typeof t == "number" ? `${t}px` : t;
|
|
242
|
+
M(() => {
|
|
243
|
+
!u || f || g(m.get(a)?.toString() ?? "");
|
|
244
|
+
}, [f, a, m, u]);
|
|
245
|
+
const P = (v) => {
|
|
246
|
+
if (!u) return;
|
|
247
|
+
const p = new URLSearchParams(m.toString());
|
|
248
|
+
v ? (p.set(a, v), p.delete("page")) : (p.delete(a), p.delete("page"));
|
|
249
|
+
const B = p.toString();
|
|
250
|
+
C.replace(B ? `${y}?${B}` : y);
|
|
112
251
|
};
|
|
113
|
-
return /* @__PURE__ */
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
252
|
+
return /* @__PURE__ */ h("form", { className: o ?? "", noValidate: !0, onSubmit: (v) => {
|
|
253
|
+
if (v.preventDefault(), c?.(b), r && b.trim()) {
|
|
254
|
+
const p = document.querySelector(r);
|
|
255
|
+
p && p.focus();
|
|
256
|
+
}
|
|
257
|
+
}, children: [
|
|
258
|
+
/* @__PURE__ */ n("label", { className: "sr-only", htmlFor: i, children: "Search" }),
|
|
259
|
+
/* @__PURE__ */ h("div", { className: "relative max-w-full", style: { width: S }, children: [
|
|
260
|
+
/* @__PURE__ */ n(
|
|
261
|
+
N,
|
|
118
262
|
{
|
|
119
263
|
name: "Magnifier",
|
|
120
264
|
"aria-hidden": !0,
|
|
121
265
|
className: "absolute left-[15px] top-1/2 z-10 -translate-y-1/2 text-large leading-5 text-gray-5"
|
|
122
266
|
}
|
|
123
267
|
),
|
|
124
|
-
/* @__PURE__ */
|
|
268
|
+
/* @__PURE__ */ n(
|
|
125
269
|
"input",
|
|
126
270
|
{
|
|
127
|
-
ref:
|
|
271
|
+
ref: $,
|
|
128
272
|
className: "hide-search-clear block w-full max-w-full rounded-sm bg-white py-[11px] pl-[15px] pr-[40px] text-base leading-5 indent-[30px] outline-1 outline-gray-5 transition focus:outline-2 focus:outline-blue-4",
|
|
129
273
|
style: {
|
|
130
274
|
color: "#000000",
|
|
131
275
|
WebkitTextFillColor: "#000000"
|
|
132
276
|
},
|
|
133
|
-
size:
|
|
134
|
-
id:
|
|
277
|
+
size: x,
|
|
278
|
+
id: i,
|
|
135
279
|
type: "search",
|
|
136
280
|
autoComplete: "off",
|
|
137
|
-
value:
|
|
138
|
-
placeholder:
|
|
139
|
-
onChange: (
|
|
140
|
-
const
|
|
141
|
-
|
|
281
|
+
value: b,
|
|
282
|
+
placeholder: e,
|
|
283
|
+
onChange: (v) => {
|
|
284
|
+
const p = v.target.value;
|
|
285
|
+
f || g(p), l?.(p), P(p);
|
|
142
286
|
}
|
|
143
287
|
}
|
|
144
288
|
),
|
|
145
|
-
|
|
289
|
+
b.length > 0 && /* @__PURE__ */ n(
|
|
146
290
|
"button",
|
|
147
291
|
{
|
|
148
292
|
type: "button",
|
|
149
293
|
"aria-label": "Clear search",
|
|
150
294
|
className: "absolute right-1 top-1/2 z-10 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-lg p-2 text-gray-5 hover:text-neutral-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-4",
|
|
151
295
|
onClick: () => {
|
|
152
|
-
|
|
296
|
+
f || g(""), l?.(""), P(""), $.current?.focus();
|
|
153
297
|
},
|
|
154
|
-
children: /* @__PURE__ */
|
|
298
|
+
children: /* @__PURE__ */ n(N, { name: "Close" })
|
|
155
299
|
}
|
|
156
300
|
)
|
|
157
301
|
] })
|
|
158
302
|
] });
|
|
159
303
|
}
|
|
160
|
-
function
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
304
|
+
function ie({ columns: e, rows: o, rowKey: t }) {
|
|
305
|
+
const s = O();
|
|
306
|
+
return /* @__PURE__ */ h("table", { className: "w-full table-auto border-y border-gray-2 text-gray-5", children: [
|
|
307
|
+
/* @__PURE__ */ n("thead", { className: "font-bold", children: /* @__PURE__ */ n("tr", { children: e.map((l) => /* @__PURE__ */ n(
|
|
308
|
+
"th",
|
|
164
309
|
{
|
|
165
|
-
|
|
166
|
-
|
|
310
|
+
id: `${s}-col-${l.key}`,
|
|
311
|
+
scope: "col",
|
|
312
|
+
className: `px-3 py-4 text-left ${l.headerClassName ?? ""}`.trim(),
|
|
313
|
+
children: l.header
|
|
167
314
|
},
|
|
168
|
-
|
|
315
|
+
l.key
|
|
169
316
|
)) }) }),
|
|
170
|
-
/* @__PURE__ */
|
|
317
|
+
/* @__PURE__ */ n("tbody", { children: o.map((l, u) => /* @__PURE__ */ n("tr", { className: "border-t border-gray-2", children: e.map((i) => /* @__PURE__ */ n(
|
|
171
318
|
"td",
|
|
172
319
|
{
|
|
173
|
-
|
|
174
|
-
|
|
320
|
+
headers: `${s}-col-${i.key}`,
|
|
321
|
+
className: `${i.cellClassName ?? "px-3 py-4"}`.trim(),
|
|
322
|
+
children: i.render(l)
|
|
175
323
|
},
|
|
176
|
-
|
|
177
|
-
)) },
|
|
324
|
+
i.key
|
|
325
|
+
)) }, t(l, u))) })
|
|
178
326
|
] });
|
|
179
327
|
}
|
|
180
328
|
export {
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
329
|
+
le as Button,
|
|
330
|
+
N as Icon,
|
|
331
|
+
ee as IconButton,
|
|
332
|
+
te as IconButtonGlyph,
|
|
333
|
+
ne as Logo,
|
|
334
|
+
re as Pagination,
|
|
335
|
+
se as Search,
|
|
336
|
+
ie as Table,
|
|
337
|
+
Z as iconButtonSizes,
|
|
338
|
+
Y as iconButtonStates,
|
|
339
|
+
K as iconButtonVariants
|
|
188
340
|
};
|
package/dist/theme.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@theme{--color-*: initial; --text-*: initial; --spacing-*: initial;}@theme{ --color-gray-1: #f4f4f4; --color-gray-2: #e6e6e6; --color-gray-3: #a3a3a3; --color-gray-4: #767676; --color-gray-5: #454545; --color-blue-1: #eaf4fb; --color-blue-2: #d5e8f5; --color-blue-3: #2077be; --color-blue-4: #1166aa; --color-blue-5: #075593; --color-indigo-1: #eef2f9; --color-indigo-2: #d9dff3; --color-indigo-3: #5770be; --color-indigo-4: #465faa; --color-indigo-5: #3a4f92; --color-purple-1: #f1eef6; --color-purple-2: #e4dcf0; --color-purple-3: #8164af; --color-purple-4: #72559f; --color-purple-5: #5e4586; --color-violet-1: #f5eef6; --color-violet-2: #ecddef; --color-violet-3: #9f57af; --color-violet-4: #8a4799; --color-violet-5: #713c7c; --color-magenta-1: #f6eef4; --color-magenta-2: #f0dce9; --color-magenta-3: #aa558e; --color-magenta-4: #8f4777; --color-magenta-5: #7d3c68; --color-red-1: #ffefea; --color-red-2: #fee0d7; --color-red-3: #cc4a22; --color-red-4: #bc3a11; --color-red-5: #a22a06; --color-orange-1: #fcf2e8; --color-orange-2: #fae3cb; --color-orange-3: #d46b00; --color-orange-4: #b55b00; --color-orange-5: #8c4500; --color-green-1: #f5f9eb; --color-green-2: #e6f1cd; --color-green-3: #69930d; --color-green-4: #577d04; --color-green-5: #426001; --color-jade-1: #eef7f1; --color-jade-2: #d4eadd; --color-jade-3: #299a55; --color-jade-4: #14833f; --color-jade-5: #07652c; --color-teal-1: #eaf8fb; --color-teal-2: #caeef4; --color-teal-3: #1692a9; --color-teal-4: #1a7b8d; --color-teal-5: #11606e; --color-neutral-1: #ffffff; --color-neutral-2: rgba(0, 0, 0, .08); --color-neutral-3: rgba(0, 0, 0, .15); --color-neutral-4: rgba(0, 0, 0, .45); --color-neutral-5: #000000; --color-primary: #1166aa; --color-primary-hover: #eaf4fb; --color-danger: #bc3a11; --color-danger-hover: #a22a06; --color-disabled: #a3a3a3; --text-small: .875rem; --text-medium: 1rem; --text-medium-large: 1.25rem; --text-large: 1.5rem; --text-x-large: 2rem; --text-xx-large: 3rem; --text-xxx-large: 4rem; --text-base: 1rem; --spacing-0: 0; --spacing-1: .25rem; --spacing-2: .5rem; --spacing-3: .75rem; --spacing-4: 1rem; --spacing-5: 1.5rem; --spacing-6: 2rem; --spacing-7: 3rem; --spacing-8: 4rem; --spacing-9: 5rem; --spacing-10: 6rem; --spacing-11: 15rem; --spacing-12: 22.5rem; }@source "./components"
|
|
1
|
+
@theme{--color-*: initial; --text-*: initial; --spacing-*: initial;}@theme{ --color-gray-1: #f4f4f4; --color-gray-2: #e6e6e6; --color-gray-3: #a3a3a3; --color-gray-4: #767676; --color-gray-5: #454545; --color-blue-1: #eaf4fb; --color-blue-2: #d5e8f5; --color-blue-3: #2077be; --color-blue-4: #1166aa; --color-blue-5: #075593; --color-indigo-1: #eef2f9; --color-indigo-2: #d9dff3; --color-indigo-3: #5770be; --color-indigo-4: #465faa; --color-indigo-5: #3a4f92; --color-purple-1: #f1eef6; --color-purple-2: #e4dcf0; --color-purple-3: #8164af; --color-purple-4: #72559f; --color-purple-5: #5e4586; --color-violet-1: #f5eef6; --color-violet-2: #ecddef; --color-violet-3: #9f57af; --color-violet-4: #8a4799; --color-violet-5: #713c7c; --color-magenta-1: #f6eef4; --color-magenta-2: #f0dce9; --color-magenta-3: #aa558e; --color-magenta-4: #8f4777; --color-magenta-5: #7d3c68; --color-red-1: #ffefea; --color-red-2: #fee0d7; --color-red-3: #cc4a22; --color-red-4: #bc3a11; --color-red-5: #a22a06; --color-orange-1: #fcf2e8; --color-orange-2: #fae3cb; --color-orange-3: #d46b00; --color-orange-4: #b55b00; --color-orange-5: #8c4500; --color-green-1: #f5f9eb; --color-green-2: #e6f1cd; --color-green-3: #69930d; --color-green-4: #577d04; --color-green-5: #426001; --color-jade-1: #eef7f1; --color-jade-2: #d4eadd; --color-jade-3: #299a55; --color-jade-4: #14833f; --color-jade-5: #07652c; --color-teal-1: #eaf8fb; --color-teal-2: #caeef4; --color-teal-3: #1692a9; --color-teal-4: #1a7b8d; --color-teal-5: #11606e; --color-neutral-1: #ffffff; --color-neutral-2: rgba(0, 0, 0, .08); --color-neutral-3: rgba(0, 0, 0, .15); --color-neutral-4: rgba(0, 0, 0, .45); --color-neutral-5: #000000; --color-primary: #1166aa; --color-primary-hover: #eaf4fb; --color-danger: #bc3a11; --color-danger-hover: #a22a06; --color-disabled: #a3a3a3; --color-focus: #14833f; --color-focus-outer: #ffffff; --text-small: .875rem; --text-medium: 1rem; --text-medium-large: 1.25rem; --text-large: 1.5rem; --text-x-large: 2rem; --text-xx-large: 3rem; --text-xxx-large: 4rem; --text-base: 1rem; --spacing-0: 0; --spacing-1: .25rem; --spacing-2: .5rem; --spacing-3: .75rem; --spacing-4: 1rem; --spacing-5: 1.5rem; --spacing-6: 2rem; --spacing-7: 3rem; --spacing-8: 4rem; --spacing-9: 5rem; --spacing-10: 6rem; --spacing-11: 15rem; --spacing-12: 22.5rem; }@source "./components";:root{--focus-ring-color: #14833F;--focus-ring-outer-color: #FFFFFF;--focus-ring-width: 4px;--focus-ring-outer-width: 2px;--focus-ring-offset: 2px}.focus-ring:focus-visible,*:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-offset) var(--focus-ring-outer-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width) + var(--focus-ring-outer-width)) var(--focus-ring-outer-color)}.focus-ring-inside:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--focus-ring-outer-width) var(--focus-ring-outer-color),inset 0 0 0 calc(var(--focus-ring-outer-width) + var(--focus-ring-width)) var(--focus-ring-color)}.focus-ring-none:focus-visible{outline:none;box-shadow:none}@layer components{.btn{@apply transition cursor-pointer font-semibold px-[1.375rem] py-[.625rem] rounded-3xl disabled:opacity-50;}.btn-primary{@apply bg-blue-3 border-2 border-blue-3 leading-5 text-neutral-1 hover:border-blue-4 hover:bg-blue-4 disabled:border-blue-3 disabled:bg-blue-3;}.btn-primary.btn-danger{@apply border-red-3 bg-red-3 text-neutral-1 hover:border-red-4 hover:bg-red-4;}.btn-primary.btn-inverse{@apply bg-neutral-1 text-blue-4 hover:bg-blue-1 hover:border-blue-5 hover:text-blue-5;}.btn-primary.btn-decolor{@apply border-gray-5 bg-gray-5 text-neutral-1 hover:border-neutral-5 hover:bg-neutral-5;}.btn-secondary{@apply bg-neutral-1 border-2 border-blue-3 text-blue-4 hover:border-blue-4 hover:bg-blue-1 hover:text-blue-5;}.btn-secondary.btn-danger{@apply border-red-3 text-red-3 hover:border-red-4 hover:text-red-4 hover:bg-red-1;}.btn-secondary.btn-inverse{@apply border-neutral-1 text-neutral-1 bg-indigo-3 hover:bg-indigo-4;}.btn-secondary.btn-decolor{@apply text-gray-5 border-gray-5 hover:text-neutral-5 hover:border-neutral-5 hover:bg-gray-1;}.btn-tertiary{@apply px-0 py-3 text-blue-4 underline hover:text-blue-5;}.btn-tertiary.btn-danger{@apply text-red-4 hover:text-red-5;}.btn-tertiary.btn-inverse{@apply text-neutral-1 hover:text-gray-1;}.btn-tertiary.btn-decolor{@apply text-gray-5 hover:text-neutral-5;}}@utility hide-search-clear{&::-webkit-search-cancel-button,&::-webkit-search-decoration {-webkit-appearance: none; appearance: none;} &::-ms-clear {display: none;}}@utility focus-ring{&:focus-visible {outline: none; box-shadow: 0 0 0 var(--focus-ring-offset) var(--focus-ring-outer-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width) + var(--focus-ring-outer-width)) var(--focus-ring-outer-color);}}@utility focus-ring-inside{&:focus-visible {outline: none; box-shadow: inset 0 0 0 var(--focus-ring-outer-width) var(--focus-ring-outer-color),inset 0 0 0 calc(var(--focus-ring-outer-width) + var(--focus-ring-width)) var(--focus-ring-color);}}@utility focus-ring-none{&:focus-visible {outline: none; box-shadow: none;}}
|
package/dist/tokens.d.ts
CHANGED
package/dist/tokens.js
CHANGED
|
@@ -1264,6 +1264,46 @@ module.exports = {
|
|
|
1264
1264
|
},
|
|
1265
1265
|
path: ["color", "disabled"],
|
|
1266
1266
|
},
|
|
1267
|
+
focus: {
|
|
1268
|
+
key: "{color.focus}",
|
|
1269
|
+
$value: "#14833f",
|
|
1270
|
+
$description: "Keyboard focus indicator color (Jade-4).",
|
|
1271
|
+
filePath: "tokens/color/theme.json",
|
|
1272
|
+
isSource: true,
|
|
1273
|
+
$type: "color",
|
|
1274
|
+
original: {
|
|
1275
|
+
$value: "#14833F",
|
|
1276
|
+
$description: "Keyboard focus indicator color (Jade-4).",
|
|
1277
|
+
$type: "color",
|
|
1278
|
+
key: "{color.focus}",
|
|
1279
|
+
},
|
|
1280
|
+
name: "ColorFocus",
|
|
1281
|
+
attributes: {
|
|
1282
|
+
category: "color",
|
|
1283
|
+
type: "focus",
|
|
1284
|
+
},
|
|
1285
|
+
path: ["color", "focus"],
|
|
1286
|
+
},
|
|
1287
|
+
"focus-outer": {
|
|
1288
|
+
key: "{color.focus-outer}",
|
|
1289
|
+
$value: "#ffffff",
|
|
1290
|
+
$description: "Outer stroke color for keyboard focus indicator.",
|
|
1291
|
+
filePath: "tokens/color/theme.json",
|
|
1292
|
+
isSource: true,
|
|
1293
|
+
$type: "color",
|
|
1294
|
+
original: {
|
|
1295
|
+
$value: "#FFFFFF",
|
|
1296
|
+
$description: "Outer stroke color for keyboard focus indicator.",
|
|
1297
|
+
$type: "color",
|
|
1298
|
+
key: "{color.focus-outer}",
|
|
1299
|
+
},
|
|
1300
|
+
name: "ColorFocusOuter",
|
|
1301
|
+
attributes: {
|
|
1302
|
+
category: "color",
|
|
1303
|
+
type: "focus-outer",
|
|
1304
|
+
},
|
|
1305
|
+
path: ["color", "focus-outer"],
|
|
1306
|
+
},
|
|
1267
1307
|
},
|
|
1268
1308
|
text: {
|
|
1269
1309
|
small: {
|
|
@@ -1418,7 +1458,7 @@ module.exports = {
|
|
|
1418
1458
|
spacing: {
|
|
1419
1459
|
0: {
|
|
1420
1460
|
key: "{spacing.0}",
|
|
1421
|
-
$value:
|
|
1461
|
+
$value: 0,
|
|
1422
1462
|
filePath: "tokens/size/spacing.json",
|
|
1423
1463
|
isSource: true,
|
|
1424
1464
|
$type: "dimension",
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@digitalpromise/design",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "4.
|
|
4
|
+
"version": "4.9.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"exports": {
|
|
@@ -14,38 +14,38 @@
|
|
|
14
14
|
"dist"
|
|
15
15
|
],
|
|
16
16
|
"devDependencies": {
|
|
17
|
-
"@chromatic-com/storybook": "^5.
|
|
17
|
+
"@chromatic-com/storybook": "^5.1.2",
|
|
18
18
|
"@digitalpromise/icons": "^2.6.1",
|
|
19
19
|
"@eslint/js": "^10.0.1",
|
|
20
|
-
"@microsoft/api-extractor": "^7.
|
|
21
|
-
"@storybook/addon-docs": "^10.
|
|
22
|
-
"@storybook/addon-links": "^10.
|
|
23
|
-
"@storybook/react-vite": "^10.
|
|
24
|
-
"@tailwindcss/vite": "^4.2.
|
|
20
|
+
"@microsoft/api-extractor": "^7.58.2",
|
|
21
|
+
"@storybook/addon-docs": "^10.3.5",
|
|
22
|
+
"@storybook/addon-links": "^10.3.5",
|
|
23
|
+
"@storybook/react-vite": "^10.3.5",
|
|
24
|
+
"@tailwindcss/vite": "^4.2.2",
|
|
25
25
|
"@testing-library/jest-dom": "^6.9.1",
|
|
26
26
|
"@testing-library/react": "^16.3.2",
|
|
27
27
|
"@types/jest": "^30.0.0",
|
|
28
28
|
"@types/react": "^19.2.14",
|
|
29
29
|
"@types/react-dom": "^19.2.3",
|
|
30
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
31
|
-
"@typescript-eslint/parser": "^8.
|
|
32
|
-
"@vitejs/plugin-react-swc": "^4.
|
|
33
|
-
"eslint": "^9.39.
|
|
30
|
+
"@typescript-eslint/eslint-plugin": "^8.58.2",
|
|
31
|
+
"@typescript-eslint/parser": "^8.58.2",
|
|
32
|
+
"@vitejs/plugin-react-swc": "^4.3.0",
|
|
33
|
+
"eslint": "^9.39.4",
|
|
34
34
|
"eslint-plugin-react-hooks": "^7.0.1",
|
|
35
|
-
"eslint-plugin-storybook": "^10.
|
|
35
|
+
"eslint-plugin-storybook": "^10.3.5",
|
|
36
36
|
"jsdom": "^28.1.0",
|
|
37
|
-
"react": "^19.2.
|
|
38
|
-
"react-dom": "^19.2.
|
|
37
|
+
"react": "^19.2.5",
|
|
38
|
+
"react-dom": "^19.2.5",
|
|
39
39
|
"react-select": "^5.10.2",
|
|
40
40
|
"rollup-preserve-directives": "^1.1.3",
|
|
41
|
-
"storybook": "^10.
|
|
42
|
-
"style-dictionary": "^5.
|
|
43
|
-
"tailwindcss": "^4.2.
|
|
41
|
+
"storybook": "^10.3.5",
|
|
42
|
+
"style-dictionary": "^5.4.0",
|
|
43
|
+
"tailwindcss": "^4.2.2",
|
|
44
44
|
"typescript": "^5.9.3",
|
|
45
|
-
"typescript-eslint": "^8.
|
|
45
|
+
"typescript-eslint": "^8.58.2",
|
|
46
46
|
"unplugin-dts": "1.0.0-beta.6",
|
|
47
|
-
"vite": "^7.3.
|
|
48
|
-
"vitest": "^4.
|
|
47
|
+
"vite": "^7.3.2",
|
|
48
|
+
"vitest": "^4.1.4"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"next": "^16.0.0",
|