@digitalpromise/design 4.9.3 → 4.9.5
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/index.cjs +1 -1
- package/dist/index.js +47 -49
- package/dist/theme.css +1 -1
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("./icon-KeRREHrI.cjs"),e=require("react/jsx-runtime"),j=require("next/navigation"),k=require("react"),z=["default","danger","inverse","emphasize","decolor"],L=["md","sm","xs"],R=["ghost","outline","secondary","tertiary"],F="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",q={md:"h-12 w-12 p-3",sm:"h-8 w-8 p-2",xs:"h-6 w-6 p-0"},M={default:"text-gray-5 hover:text-neutral-5 transition-colors",danger:"text-red-4 hover:text-red-5",inverse:"text-white hover:text-gray-1",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",decolor:"text-gray-5 hover:text-neutral-5 transition-colors"},O={ghost:"",outline:"border-2 border-gray-5"},V={default:"btn btn-primary",danger:"btn btn-primary btn-danger",inverse:"btn btn-primary btn-inverse",emphasize:"btn btn-primary",decolor:"btn btn-primary btn-decolor"},G={default:"flex items-center gap-2 py-3 text-gray-5",danger:"flex items-center gap-2 py-3 text-red-4 hover:text-red-5",inverse:"flex items-center gap-2 py-3 text-white hover:text-gray-1",emphasize:"flex items-center gap-2 py-3 text-gray-5",decolor:"flex items-center gap-2 py-3 text-gray-5 hover:text-neutral-5"};function I(t,
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("./icon-KeRREHrI.cjs"),e=require("react/jsx-runtime"),j=require("next/navigation"),k=require("react"),z=["default","danger","inverse","emphasize","decolor"],L=["md","sm","xs"],R=["ghost","outline","secondary","tertiary"],F="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",q={md:"h-12 w-12 p-3",sm:"h-8 w-8 p-2",xs:"h-6 w-6 p-0"},M={default:"text-gray-5 hover:text-neutral-5 transition-colors",danger:"text-red-4 hover:text-red-5",inverse:"text-white hover:text-gray-1",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",decolor:"text-gray-5 hover:text-neutral-5 transition-colors"},O={ghost:"",outline:"border-2 border-gray-5"},V={default:"btn btn-primary inline-flex items-center justify-center gap-2",danger:"btn btn-primary btn-danger inline-flex items-center justify-center gap-2",inverse:"btn btn-primary btn-inverse inline-flex items-center justify-center gap-2",emphasize:"btn btn-primary inline-flex items-center justify-center gap-2",decolor:"btn btn-primary btn-decolor inline-flex items-center justify-center gap-2"},G={default:"flex items-center gap-2 py-3 text-gray-5",danger:"flex items-center gap-2 py-3 text-red-4 hover:text-red-5",inverse:"flex items-center gap-2 py-3 text-white hover:text-gray-1",emphasize:"flex items-center gap-2 py-3 text-gray-5",decolor:"flex items-center gap-2 py-3 text-gray-5 hover:text-neutral-5"};function I(t,a){return`${t==="xs"?"block h-5 w-5 shrink-0 leading-none":t==="sm"?"block h-4 w-4 shrink-0 text-base leading-none":"block h-6 w-6 shrink-0 text-2xl leading-none"} ${a??""}`.trim()}function A({className:t,size:a="md",state:n="default",variant:s="ghost"}){return s==="secondary"?`${V[n]} ${t??""}`.trim():s==="tertiary"?`${G[n]} ${t??""}`.trim():`${F} ${q[a]} ${M[n]} ${O[s]} ${t??""}`.trim()}function E({children:t,icon:a,iconClassName:n,iconPosition:s="start",size:l="md",textClassName:u,variant:i="ghost"}){const o=a?e.jsx(f.Icon,{name:a,className:i==="ghost"||i==="outline"?I(l,n):i==="tertiary"?`h-5 w-5 shrink-0 ${n??""}`.trim():n}):null;if(i==="tertiary"){const r=t?e.jsx("span",{className:`font-semibold underline ${u??""}`.trim(),children:t}):null;return s==="end"?e.jsxs(e.Fragment,{children:[r,o]}):e.jsxs(e.Fragment,{children:[o,r]})}if(i==="secondary"){const r=u?e.jsx("span",{className:u,children:t}):t;return o?r?s==="end"?e.jsxs(e.Fragment,{children:[r,o]}):e.jsxs(e.Fragment,{children:[o,r]}):o:r}return e.jsxs(e.Fragment,{children:[o,t]})}function T({children:t,icon:a,iconClassName:n,iconPosition:s="start",label:l,className:u,size:i="md",state:o="default",textClassName:r,type:c="button",variant:x="ghost",...y}){return e.jsx("button",{type:c,className:A({className:u,size:i,state:o,variant:x}),...y,"aria-label":l,children:E({children:t,icon:a,iconClassName:n,iconPosition:s,size:i,textClassName:r,variant:x})})}function D({name:t,size:a="md",className:n}){return e.jsx(f.Icon,{name:t,className:I(a,n)})}const Q=new Map([["black","/primary-badge-engine-logo-black.svg"],["white","/primary-badge-engine-logo-white.svg"],["color","/primary-badge-engine-logo-color.svg"]]);function U({variant:t="color",className:a}){const n=Q.get(t);return n===void 0?null:e.jsx("img",{src:n,width:186,height:36,alt:"Badge Engine",className:a})}function _({count:t,limit:a=10,pageParamKey:n="page"}){const s=j.useSearchParams(),l=j.usePathname(),u=j.useRouter(),i=s.get(n),o=i?Number.parseInt(i,10):Number.NaN,r=Number.isFinite(o)?o:1,c=Math.max(1,Math.ceil(t/a)),x=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]:[1,"ellipsis",r-1,r,r+1,"ellipsis",c],y=r===1,w=r===c,N=d=>{if(y&&d==="prev"||w&&d==="next")return;const g=d==="prev"?r-1:r+1,b=new URLSearchParams(s.toString());b.set(n,String(g)),u.push(`${l}?${b.toString()}`,{scroll:!1})},m=d=>{const g=new URLSearchParams(s.toString());g.set(n,String(d)),u.push(`${l}?${g.toString()}`,{scroll:!1})};return e.jsxs("ul",{className:"flex items-center justify-center gap-4 font-medium",children:[e.jsx("li",{className:"mr-2",children:e.jsx("button",{type:"button","aria-label":"Previous page",disabled:y,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",onClick:()=>N("prev"),children:e.jsx(f.Icon,{name:"ArrowLineLeft"})})}),x.map((d,g)=>{const b=d==="ellipsis",h=b?void 0:d,S=h===r,$=b||S,P=b?"Pagination ellipsis":`Go to page ${h}`;return e.jsx("li",{children:e.jsx("button",{type:"button","aria-label":P,"aria-current":S?"page":void 0,disabled:$,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 ${S?"bg-blue-1 text-blue-4":""} ${$?"cursor-default":"cursor-pointer hover:bg-gray-1"}`.trim(),onClick:!$&&h?()=>m(h):void 0,children:b?"...":h})},`${d}-${g}`)}),e.jsx("li",{className:"ml-2",children:e.jsx("button",{type:"button","aria-label":"Next page",disabled:w,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",onClick:()=>N("next"),children:e.jsx(f.Icon,{name:"ArrowLineRight"})})})]})}function H({placeholder:t,className:a,inputWidth:n,value:s,onChange:l,syncToUrl:u=!0,id:i="search",paramKey:o="s",firstResultSelector:r,onEnter:c}){const x=j.useSearchParams(),y=j.usePathname(),w=j.useRouter(),N=k.useRef(null),m=s!==void 0,[d,g]=k.useState(m?s:x.get(o)?.toString()??""),b=m?s:d,h=Math.max(t.length,1),S=`calc(${h}ch + 60px)`,$=n===void 0?S:typeof n=="number"?`${n}px`:n;k.useEffect(()=>{!u||m||g(x.get(o)?.toString()??"")},[m,o,x,u]);const P=v=>{if(!u)return;const p=new URLSearchParams(x.toString());v?(p.set(o,v),p.delete("page")):(p.delete(o),p.delete("page"));const C=p.toString();w.replace(C?`${y}?${C}`:y)},B=v=>{if(v.preventDefault(),c?.(b),r&&b.trim()){const p=document.querySelector(r);p&&p.focus()}};return e.jsxs("form",{className:`search-field ${a??""}`.trim(),noValidate:!0,onSubmit:B,children:[e.jsx("label",{className:"sr-only",htmlFor:i,children:"Search"}),e.jsxs("div",{className:"relative max-w-full",style:{width:$},children:[e.jsx(f.Icon,{name:"Magnifier","aria-hidden":!0,className:"absolute left-[15px] top-1/2 z-10 -translate-y-1/2 text-large leading-5 text-gray-5"}),e.jsx("input",{ref:N,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",style:{color:"#000000",WebkitTextFillColor:"#000000"},size:h,id:i,type:"search",autoComplete:"off",value:b,placeholder:t,onChange:v=>{const p=v.target.value;m||g(p),l?.(p),P(p)}}),b.length>0&&e.jsx("button",{type:"button","aria-label":"Clear search",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",onClick:()=>{m||g(""),l?.(""),P(""),N.current?.focus()},children:e.jsx(f.Icon,{name:"Close"})})]})]})}function J({columns:t,rows:a,rowKey:n}){const s=k.useId();return e.jsxs("table",{className:"w-full table-auto border-y border-gray-2 text-gray-5",children:[e.jsx("thead",{className:"font-bold",children:e.jsx("tr",{children:t.map(l=>e.jsx("th",{id:`${s}-col-${l.key}`,scope:"col",className:`px-3 py-4 text-left leading-[23px] ${l.headerClassName??""}`.trim(),children:l.header},l.key))})}),e.jsx("tbody",{children:a.map((l,u)=>e.jsx("tr",{className:"border-t border-gray-2",children:t.map(i=>e.jsx("td",{headers:`${s}-col-${i.key}`,className:`${i.cellClassName??"px-3 py-4"}`.trim(),children:i.render(l)},i.key))},n(l,u)))})]})}exports.Button=f.Button;exports.Icon=f.Icon;exports.IconButton=T;exports.IconButtonGlyph=D;exports.Logo=U;exports.Pagination=_;exports.Search=H;exports.Table=J;exports.iconButtonSizes=L;exports.iconButtonStates=z;exports.iconButtonVariants=R;
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { I as N } from "./icon-DOAUhyEM.js";
|
|
3
3
|
import { B as le } from "./icon-DOAUhyEM.js";
|
|
4
|
-
import { jsx as n, jsxs as
|
|
5
|
-
import { useSearchParams as
|
|
4
|
+
import { jsx as n, jsxs as m, Fragment as k } from "react/jsx-runtime";
|
|
5
|
+
import { useSearchParams as B, usePathname as I, useRouter as z } from "next/navigation";
|
|
6
6
|
import { useRef as F, useState as M, useEffect as O, useId as V } from "react";
|
|
7
7
|
const Y = [
|
|
8
8
|
"default",
|
|
@@ -29,11 +29,11 @@ const Y = [
|
|
|
29
29
|
ghost: "",
|
|
30
30
|
outline: "border-2 border-gray-5"
|
|
31
31
|
}, D = {
|
|
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"
|
|
32
|
+
default: "btn btn-primary inline-flex items-center justify-center gap-2",
|
|
33
|
+
danger: "btn btn-primary btn-danger inline-flex items-center justify-center gap-2",
|
|
34
|
+
inverse: "btn btn-primary btn-inverse inline-flex items-center justify-center gap-2",
|
|
35
|
+
emphasize: "btn btn-primary inline-flex items-center justify-center gap-2",
|
|
36
|
+
decolor: "btn btn-primary btn-decolor inline-flex items-center justify-center gap-2"
|
|
37
37
|
}, Q = {
|
|
38
38
|
default: "flex items-center gap-2 py-3 text-gray-5",
|
|
39
39
|
danger: "flex items-center gap-2 py-3 text-red-4 hover:text-red-5",
|
|
@@ -41,7 +41,7 @@ const Y = [
|
|
|
41
41
|
emphasize: "flex items-center gap-2 py-3 text-gray-5",
|
|
42
42
|
decolor: "flex items-center gap-2 py-3 text-gray-5 hover:text-neutral-5"
|
|
43
43
|
};
|
|
44
|
-
function
|
|
44
|
+
function L(e, a) {
|
|
45
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"} ${a ?? ""}`.trim();
|
|
46
46
|
}
|
|
47
47
|
function T({
|
|
@@ -65,32 +65,30 @@ function U({
|
|
|
65
65
|
N,
|
|
66
66
|
{
|
|
67
67
|
name: a,
|
|
68
|
-
className: i === "ghost" || i === "outline" ?
|
|
68
|
+
className: i === "ghost" || i === "outline" ? L(l, t) : i === "tertiary" ? `h-5 w-5 shrink-0 ${t ?? ""}`.trim() : t
|
|
69
69
|
}
|
|
70
70
|
) : null;
|
|
71
71
|
if (i === "tertiary") {
|
|
72
72
|
const r = e ? /* @__PURE__ */ n("span", { className: `font-semibold underline ${u ?? ""}`.trim(), children: e }) : null;
|
|
73
|
-
return s === "end" ? /* @__PURE__ */
|
|
73
|
+
return s === "end" ? /* @__PURE__ */ m(k, { children: [
|
|
74
74
|
r,
|
|
75
75
|
o
|
|
76
|
-
] }) : /* @__PURE__ */
|
|
76
|
+
] }) : /* @__PURE__ */ m(k, { children: [
|
|
77
77
|
o,
|
|
78
78
|
r
|
|
79
79
|
] });
|
|
80
80
|
}
|
|
81
81
|
if (i === "secondary") {
|
|
82
82
|
const r = u ? /* @__PURE__ */ n("span", { className: u, children: e }) : e;
|
|
83
|
-
return o ? r ? s === "end" ? /* @__PURE__ */
|
|
83
|
+
return o ? r ? s === "end" ? /* @__PURE__ */ m(k, { children: [
|
|
84
84
|
r,
|
|
85
|
-
" ",
|
|
86
85
|
o
|
|
87
|
-
] }) : /* @__PURE__ */
|
|
86
|
+
] }) : /* @__PURE__ */ m(k, { children: [
|
|
88
87
|
o,
|
|
89
|
-
" ",
|
|
90
88
|
r
|
|
91
89
|
] }) : o : r;
|
|
92
90
|
}
|
|
93
|
-
return /* @__PURE__ */
|
|
91
|
+
return /* @__PURE__ */ m(k, { children: [
|
|
94
92
|
o,
|
|
95
93
|
e
|
|
96
94
|
] });
|
|
@@ -106,14 +104,14 @@ function ee({
|
|
|
106
104
|
state: o = "default",
|
|
107
105
|
textClassName: r,
|
|
108
106
|
type: c = "button",
|
|
109
|
-
variant:
|
|
107
|
+
variant: f = "ghost",
|
|
110
108
|
...y
|
|
111
109
|
}) {
|
|
112
110
|
return /* @__PURE__ */ n(
|
|
113
111
|
"button",
|
|
114
112
|
{
|
|
115
113
|
type: c,
|
|
116
|
-
className: T({ className: u, size: i, state: o, variant:
|
|
114
|
+
className: T({ className: u, size: i, state: o, variant: f }),
|
|
117
115
|
...y,
|
|
118
116
|
"aria-label": l,
|
|
119
117
|
children: U({
|
|
@@ -123,7 +121,7 @@ function ee({
|
|
|
123
121
|
iconPosition: s,
|
|
124
122
|
size: i,
|
|
125
123
|
textClassName: r,
|
|
126
|
-
variant:
|
|
124
|
+
variant: f
|
|
127
125
|
})
|
|
128
126
|
}
|
|
129
127
|
);
|
|
@@ -137,7 +135,7 @@ function te({
|
|
|
137
135
|
N,
|
|
138
136
|
{
|
|
139
137
|
name: e,
|
|
140
|
-
className:
|
|
138
|
+
className: L(a, t)
|
|
141
139
|
}
|
|
142
140
|
);
|
|
143
141
|
}
|
|
@@ -167,7 +165,7 @@ function re({
|
|
|
167
165
|
limit: a = 10,
|
|
168
166
|
pageParamKey: t = "page"
|
|
169
167
|
}) {
|
|
170
|
-
const s =
|
|
168
|
+
const s = B(), l = I(), u = z(), i = s.get(t), o = i ? Number.parseInt(i, 10) : Number.NaN, r = Number.isFinite(o) ? o : 1, c = Math.max(1, Math.ceil(e / a)), f = 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] : [
|
|
171
169
|
1,
|
|
172
170
|
"ellipsis",
|
|
173
171
|
r - 1,
|
|
@@ -178,13 +176,13 @@ function re({
|
|
|
178
176
|
], y = r === 1, C = r === c, $ = (d) => {
|
|
179
177
|
if (y && d === "prev" || C && d === "next")
|
|
180
178
|
return;
|
|
181
|
-
const g = d === "prev" ? r - 1 : r + 1,
|
|
182
|
-
|
|
183
|
-
},
|
|
179
|
+
const g = d === "prev" ? r - 1 : r + 1, p = new URLSearchParams(s.toString());
|
|
180
|
+
p.set(t, String(g)), u.push(`${l}?${p.toString()}`, { scroll: !1 });
|
|
181
|
+
}, h = (d) => {
|
|
184
182
|
const g = new URLSearchParams(s.toString());
|
|
185
183
|
g.set(t, String(d)), u.push(`${l}?${g.toString()}`, { scroll: !1 });
|
|
186
184
|
};
|
|
187
|
-
return /* @__PURE__ */
|
|
185
|
+
return /* @__PURE__ */ m("ul", { className: "flex items-center justify-center gap-4 font-medium", children: [
|
|
188
186
|
/* @__PURE__ */ n("li", { className: "mr-2", children: /* @__PURE__ */ n(
|
|
189
187
|
"button",
|
|
190
188
|
{
|
|
@@ -196,8 +194,8 @@ function re({
|
|
|
196
194
|
children: /* @__PURE__ */ n(N, { name: "ArrowLineLeft" })
|
|
197
195
|
}
|
|
198
196
|
) }),
|
|
199
|
-
|
|
200
|
-
const
|
|
197
|
+
f.map((d, g) => {
|
|
198
|
+
const p = d === "ellipsis", x = p ? void 0 : d, w = x === r, S = p || w, P = p ? "Pagination ellipsis" : `Go to page ${x}`;
|
|
201
199
|
return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
|
|
202
200
|
"button",
|
|
203
201
|
{
|
|
@@ -206,8 +204,8 @@ function re({
|
|
|
206
204
|
"aria-current": w ? "page" : void 0,
|
|
207
205
|
disabled: S,
|
|
208
206
|
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 ? () =>
|
|
210
|
-
children:
|
|
207
|
+
onClick: !S && x ? () => h(x) : void 0,
|
|
208
|
+
children: p ? "..." : x
|
|
211
209
|
}
|
|
212
210
|
) }, `${d}-${g}`);
|
|
213
211
|
}),
|
|
@@ -236,27 +234,27 @@ function se({
|
|
|
236
234
|
firstResultSelector: r,
|
|
237
235
|
onEnter: c
|
|
238
236
|
}) {
|
|
239
|
-
const
|
|
240
|
-
|
|
241
|
-
),
|
|
237
|
+
const f = B(), y = I(), C = z(), $ = F(null), h = s !== void 0, [d, g] = M(
|
|
238
|
+
h ? s : f.get(o)?.toString() ?? ""
|
|
239
|
+
), p = h ? 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
240
|
O(() => {
|
|
243
|
-
!u ||
|
|
244
|
-
}, [
|
|
241
|
+
!u || h || g(f.get(o)?.toString() ?? "");
|
|
242
|
+
}, [h, o, f, u]);
|
|
245
243
|
const P = (v) => {
|
|
246
244
|
if (!u) return;
|
|
247
|
-
const
|
|
248
|
-
v ? (
|
|
249
|
-
const
|
|
250
|
-
C.replace(
|
|
245
|
+
const b = new URLSearchParams(f.toString());
|
|
246
|
+
v ? (b.set(o, v), b.delete("page")) : (b.delete(o), b.delete("page"));
|
|
247
|
+
const j = b.toString();
|
|
248
|
+
C.replace(j ? `${y}?${j}` : y);
|
|
251
249
|
}, R = (v) => {
|
|
252
|
-
if (v.preventDefault(), c?.(
|
|
253
|
-
const
|
|
254
|
-
|
|
250
|
+
if (v.preventDefault(), c?.(p), r && p.trim()) {
|
|
251
|
+
const b = document.querySelector(r);
|
|
252
|
+
b && b.focus();
|
|
255
253
|
}
|
|
256
254
|
};
|
|
257
|
-
return /* @__PURE__ */
|
|
255
|
+
return /* @__PURE__ */ m("form", { className: `search-field ${a ?? ""}`.trim(), noValidate: !0, onSubmit: R, children: [
|
|
258
256
|
/* @__PURE__ */ n("label", { className: "sr-only", htmlFor: i, children: "Search" }),
|
|
259
|
-
/* @__PURE__ */
|
|
257
|
+
/* @__PURE__ */ m("div", { className: "relative max-w-full", style: { width: S }, children: [
|
|
260
258
|
/* @__PURE__ */ n(
|
|
261
259
|
N,
|
|
262
260
|
{
|
|
@@ -278,22 +276,22 @@ function se({
|
|
|
278
276
|
id: i,
|
|
279
277
|
type: "search",
|
|
280
278
|
autoComplete: "off",
|
|
281
|
-
value:
|
|
279
|
+
value: p,
|
|
282
280
|
placeholder: e,
|
|
283
281
|
onChange: (v) => {
|
|
284
|
-
const
|
|
285
|
-
|
|
282
|
+
const b = v.target.value;
|
|
283
|
+
h || g(b), l?.(b), P(b);
|
|
286
284
|
}
|
|
287
285
|
}
|
|
288
286
|
),
|
|
289
|
-
|
|
287
|
+
p.length > 0 && /* @__PURE__ */ n(
|
|
290
288
|
"button",
|
|
291
289
|
{
|
|
292
290
|
type: "button",
|
|
293
291
|
"aria-label": "Clear search",
|
|
294
292
|
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",
|
|
295
293
|
onClick: () => {
|
|
296
|
-
|
|
294
|
+
h || g(""), l?.(""), P(""), $.current?.focus();
|
|
297
295
|
},
|
|
298
296
|
children: /* @__PURE__ */ n(N, { name: "Close" })
|
|
299
297
|
}
|
|
@@ -303,7 +301,7 @@ function se({
|
|
|
303
301
|
}
|
|
304
302
|
function ie({ columns: e, rows: a, rowKey: t }) {
|
|
305
303
|
const s = V();
|
|
306
|
-
return /* @__PURE__ */
|
|
304
|
+
return /* @__PURE__ */ m("table", { className: "w-full table-auto border-y border-gray-2 text-gray-5", children: [
|
|
307
305
|
/* @__PURE__ */ n("thead", { className: "font-bold", children: /* @__PURE__ */ n("tr", { children: e.map((l) => /* @__PURE__ */ n(
|
|
308
306
|
"th",
|
|
309
307
|
{
|
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; --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;}}.search-field input[type=search]::placeholder{color:#454545;-webkit-text-fill-color:#454545}.search-field>div>svg[aria-hidden=true]{left:15px!important}.search-field>div>input[type=search]{padding-left:47px!important;padding-right:48px!important;text-indent:0!important}.search-field>div>button[aria-label="Clear search"]{cursor:pointer;right:8px!important}button[aria-label="Previous page"]:not(:disabled),button[aria-label="Next page"]:not(:disabled){cursor:pointer}@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;}}
|
|
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 rounded-none;}.btn-tertiary.btn-danger{@apply text-red-4 hover:text-red-5 rounded-none;}.btn-tertiary.btn-inverse{@apply text-neutral-1 hover:text-gray-1 rounded-none;}.btn-tertiary.btn-decolor{@apply text-gray-5 hover:text-neutral-5 rounded-none;}}@utility hide-search-clear{&::-webkit-search-cancel-button,&::-webkit-search-decoration {-webkit-appearance: none; appearance: none;} &::-ms-clear {display: none;}}.search-field input[type=search]::placeholder{color:#454545;-webkit-text-fill-color:#454545}.search-field>div>svg[aria-hidden=true]{left:15px!important}.search-field>div>input[type=search]{padding-left:47px!important;padding-right:48px!important;text-indent:0!important}.search-field>div>button[aria-label="Clear search"]{cursor:pointer;right:8px!important}button[aria-label="Previous page"]:not(:disabled),button[aria-label="Next page"]:not(:disabled){cursor:pointer}@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/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@digitalpromise/design",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "4.9.
|
|
4
|
+
"version": "4.9.5",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"exports": {
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"@chromatic-com/storybook": "^5.1.2",
|
|
18
18
|
"@digitalpromise/icons": "^3.2.0",
|
|
19
19
|
"@eslint/js": "^10.0.1",
|
|
20
|
-
"@microsoft/api-extractor": "^7.58.
|
|
20
|
+
"@microsoft/api-extractor": "^7.58.3",
|
|
21
21
|
"@storybook/addon-docs": "^10.3.5",
|
|
22
22
|
"@storybook/addon-links": "^10.3.5",
|
|
23
23
|
"@storybook/react-vite": "^10.3.5",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"@typescript-eslint/parser": "^8.58.2",
|
|
32
32
|
"@vitejs/plugin-react-swc": "^4.3.0",
|
|
33
33
|
"eslint": "^9.39.4",
|
|
34
|
-
"eslint-plugin-react-hooks": "^7.0
|
|
34
|
+
"eslint-plugin-react-hooks": "^7.1.0",
|
|
35
35
|
"eslint-plugin-storybook": "^10.3.5",
|
|
36
36
|
"jsdom": "^28.1.0",
|
|
37
37
|
"react": "^19.2.5",
|