@popgrids/ui 0.0.14 → 0.0.16
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/button.cjs +124 -7
- package/dist/button.cjs.map +1 -1
- package/dist/button.d.cts +8 -6
- package/dist/button.d.ts +8 -6
- package/dist/button.js +124 -7
- package/dist/button.js.map +1 -1
- package/dist/dialog.cjs +11 -11
- package/dist/dialog.cjs.map +1 -1
- package/dist/dialog.d.cts +1 -1
- package/dist/dialog.d.ts +1 -1
- package/dist/dialog.js +1 -1
- package/dist/dialog.js.map +1 -1
- package/dist/index.cjs +139 -135
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +125 -121
- package/dist/index.js.map +1 -1
- package/dist/metafile-cjs.json +1 -1
- package/dist/metafile-esm.json +1 -1
- package/dist/notification-badge.d.cts +1 -1
- package/dist/notification-badge.d.ts +1 -1
- package/package.json +7 -6
package/dist/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import { cva } from 'class-variance-authority';
|
|
|
3
3
|
import { clsx } from 'clsx';
|
|
4
4
|
import { twMerge } from 'tailwind-merge';
|
|
5
5
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
6
|
-
import { Dialog } from '@base-ui/react';
|
|
6
|
+
import { Dialog } from '@base-ui/react/dialog';
|
|
7
7
|
import { XClose, CheckCircle, Circle, ChevronRight, Check, InfoCircle } from '@untitledui/icons';
|
|
8
8
|
import { Menu } from '@base-ui/react/menu';
|
|
9
9
|
import { Input as Input$1 } from '@base-ui/react/input';
|
|
@@ -16,6 +16,119 @@ import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
|
|
|
16
16
|
function cn(...inputs) {
|
|
17
17
|
return twMerge(clsx(inputs));
|
|
18
18
|
}
|
|
19
|
+
var loaderVariants = cva("flex shrink-0 items-center justify-center", {
|
|
20
|
+
variants: {
|
|
21
|
+
theme: {
|
|
22
|
+
default: "[--loader-foreground:var(--foreground)] [--loader-background:var(--foreground)]",
|
|
23
|
+
reversed: "[--loader-foreground:var(--background)] [--loader-background:var(--foreground)]",
|
|
24
|
+
black: "[--loader-foreground:var(--color-brand-midnight-900)] [--loader-background:var(--color-grayscale-300)]",
|
|
25
|
+
white: "[--loader-foreground:var(--color-grayscale-300)] [--loader-background:var(--color-brand-midnight-900)]"
|
|
26
|
+
},
|
|
27
|
+
variant: {
|
|
28
|
+
spinner: "size-5 motion-reduce:animate-none",
|
|
29
|
+
loader: "relative flex h-[13px] w-[23px] motion-reduce:animate-none"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
defaultVariants: {
|
|
33
|
+
theme: "default",
|
|
34
|
+
variant: "spinner"
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
var spinnerFgVariants = cva("", {
|
|
38
|
+
variants: {
|
|
39
|
+
theme: {
|
|
40
|
+
default: "fill-foreground opacity-[0.06]",
|
|
41
|
+
reversed: "fill-white opacity-10",
|
|
42
|
+
black: "fill-black opacity-[0.04]",
|
|
43
|
+
white: "fill-white opacity-[0.04]"
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
var spinnerBgVariants = cva("", {
|
|
48
|
+
variants: {
|
|
49
|
+
theme: {
|
|
50
|
+
default: "fill-foreground",
|
|
51
|
+
reversed: "fill-background",
|
|
52
|
+
black: "fill-black opacity-[0.98]",
|
|
53
|
+
white: "fill-white opacity-[0.98]"
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
function Loader({
|
|
58
|
+
theme = "default",
|
|
59
|
+
variant = "spinner",
|
|
60
|
+
className,
|
|
61
|
+
style,
|
|
62
|
+
...props
|
|
63
|
+
}) {
|
|
64
|
+
const dotCount = 21;
|
|
65
|
+
return /* @__PURE__ */ jsx(
|
|
66
|
+
"div",
|
|
67
|
+
{
|
|
68
|
+
"data-slot": "loader",
|
|
69
|
+
className: cn(
|
|
70
|
+
loaderVariants({ theme, variant }),
|
|
71
|
+
variant === "spinner" && "animate-spin",
|
|
72
|
+
className
|
|
73
|
+
),
|
|
74
|
+
...props,
|
|
75
|
+
children: variant === "spinner" ? /* @__PURE__ */ jsxs(
|
|
76
|
+
"svg",
|
|
77
|
+
{
|
|
78
|
+
width: "20",
|
|
79
|
+
height: "20",
|
|
80
|
+
viewBox: "0 0 20 20",
|
|
81
|
+
fill: "none",
|
|
82
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
83
|
+
children: [
|
|
84
|
+
/* @__PURE__ */ jsx("title", { children: "Loading spinner" }),
|
|
85
|
+
/* @__PURE__ */ jsxs("g", { clipPath: "url(#pop_loader_clip_path)", children: [
|
|
86
|
+
/* @__PURE__ */ jsx(
|
|
87
|
+
"path",
|
|
88
|
+
{
|
|
89
|
+
className: spinnerFgVariants({ theme }),
|
|
90
|
+
d: "M20 10C20 15.5137 15.5137 20 10 20C4.48628 20 6.78126e-07 15.5137 4.37114e-07 10C1.96101e-07 4.48627 4.48627 3.50301e-07 10 1.09288e-07C15.5137 -1.31724e-07 20 4.48627 20 10ZM2.35294 10C2.35294 14.2196 5.78039 17.6471 10 17.6471C14.2196 17.6471 17.6471 14.2196 17.6471 10C17.6471 5.78039 14.2196 2.35294 10 2.35294C5.78039 2.35294 2.35294 5.78039 2.35294 10Z"
|
|
91
|
+
}
|
|
92
|
+
),
|
|
93
|
+
/* @__PURE__ */ jsx(
|
|
94
|
+
"path",
|
|
95
|
+
{
|
|
96
|
+
className: spinnerBgVariants({ theme }),
|
|
97
|
+
d: "M20 10L17.6471 10C17.6471 5.78039 14.2196 2.35294 10 2.35294L10 7.10315e-07C15.5137 4.69302e-07 20 4.48627 20 10Z"
|
|
98
|
+
}
|
|
99
|
+
)
|
|
100
|
+
] }),
|
|
101
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "pop_loader_clip_path", children: /* @__PURE__ */ jsx(
|
|
102
|
+
"rect",
|
|
103
|
+
{
|
|
104
|
+
width: "20",
|
|
105
|
+
height: "20",
|
|
106
|
+
fill: "white",
|
|
107
|
+
transform: "translate(8.74228e-07 20) rotate(-90)"
|
|
108
|
+
}
|
|
109
|
+
) }) })
|
|
110
|
+
]
|
|
111
|
+
}
|
|
112
|
+
) : /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: dotCount }, (_, index) => {
|
|
113
|
+
const delaySeconds = index * 0.035;
|
|
114
|
+
return (
|
|
115
|
+
// biome-ignore lint/suspicious/noArrayIndexKey: Dots are static and ordered
|
|
116
|
+
/* @__PURE__ */ jsx(
|
|
117
|
+
"div",
|
|
118
|
+
{
|
|
119
|
+
className: "bg-grayscale-200 dark:bg-grayscale-700 animate-loader-wave absolute top-0 size-[3px] rounded-full motion-reduce:animate-none",
|
|
120
|
+
style: {
|
|
121
|
+
left: `${index}px`,
|
|
122
|
+
animationDelay: `${delaySeconds}s`
|
|
123
|
+
}
|
|
124
|
+
},
|
|
125
|
+
index
|
|
126
|
+
)
|
|
127
|
+
);
|
|
128
|
+
}) })
|
|
129
|
+
}
|
|
130
|
+
);
|
|
131
|
+
}
|
|
19
132
|
var buttonVariants = cva(
|
|
20
133
|
"inline-flex relative items-center gap-1.5 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 text-foreground bg-background group/button outline-none focus-visible:border-ring-3 focus-visible:ring-ring/60 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
21
134
|
{
|
|
@@ -212,17 +325,19 @@ var tintVariants = cva(
|
|
|
212
325
|
}
|
|
213
326
|
);
|
|
214
327
|
function Button({
|
|
215
|
-
|
|
328
|
+
align = "center",
|
|
216
329
|
children,
|
|
330
|
+
className,
|
|
217
331
|
collapsed = false,
|
|
218
|
-
|
|
219
|
-
align = "center",
|
|
332
|
+
leading,
|
|
220
333
|
outline = false,
|
|
221
334
|
pill = false,
|
|
335
|
+
loading = false,
|
|
336
|
+
loadingElement,
|
|
222
337
|
size = "default",
|
|
223
338
|
theme = "brand",
|
|
224
|
-
leading,
|
|
225
339
|
trailing,
|
|
340
|
+
variant = "default",
|
|
226
341
|
...props
|
|
227
342
|
}) {
|
|
228
343
|
return /* @__PURE__ */ jsx(
|
|
@@ -246,12 +361,14 @@ function Button({
|
|
|
246
361
|
),
|
|
247
362
|
...props,
|
|
248
363
|
children: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
249
|
-
|
|
250
|
-
|
|
364
|
+
loading && (loadingElement || /* @__PURE__ */ jsx(Loader, { className: "absolute inset-0 m-auto", variant: "spinner", theme: "reversed" })),
|
|
365
|
+
leading && /* @__PURE__ */ jsx("div", { className: cn("group-aria-busy/button:opacity-0 transition-opacity", { "opacity-0": loading }), children: leading }),
|
|
366
|
+
children && /* @__PURE__ */ jsx("span", { className: cn("min-w-[18px] truncate relative transition-opacity", { "opacity-0": loading }), children }),
|
|
251
367
|
trailing && /* @__PURE__ */ jsx(
|
|
252
368
|
"div",
|
|
253
369
|
{
|
|
254
|
-
className: cn("group-aria-busy/button:opacity-0", {
|
|
370
|
+
className: cn("group-aria-busy/button:opacity-0 transition-opacity", {
|
|
371
|
+
"opacity-0": loading,
|
|
255
372
|
"absolute top-1/2 right-0 translate-x-1/2 -translate-y-1/2": collapsed
|
|
256
373
|
}),
|
|
257
374
|
children: trailing
|
|
@@ -804,119 +921,6 @@ function Label({ className, render, ...props }) {
|
|
|
804
921
|
props: mergeProps(defaultProps, props)
|
|
805
922
|
});
|
|
806
923
|
}
|
|
807
|
-
var loaderVariants = cva("flex shrink-0 items-center justify-center", {
|
|
808
|
-
variants: {
|
|
809
|
-
theme: {
|
|
810
|
-
default: "[--loader-foreground:var(--foreground)] [--loader-background:var(--foreground)]",
|
|
811
|
-
reversed: "[--loader-foreground:var(--background)] [--loader-background:var(--foreground)]",
|
|
812
|
-
black: "[--loader-foreground:var(--color-brand-midnight-900)] [--loader-background:var(--color-grayscale-300)]",
|
|
813
|
-
white: "[--loader-foreground:var(--color-grayscale-300)] [--loader-background:var(--color-brand-midnight-900)]"
|
|
814
|
-
},
|
|
815
|
-
variant: {
|
|
816
|
-
spinner: "size-5 motion-reduce:animate-none",
|
|
817
|
-
loader: "relative flex h-[13px] w-[23px] motion-reduce:animate-none"
|
|
818
|
-
}
|
|
819
|
-
},
|
|
820
|
-
defaultVariants: {
|
|
821
|
-
theme: "default",
|
|
822
|
-
variant: "spinner"
|
|
823
|
-
}
|
|
824
|
-
});
|
|
825
|
-
var spinnerFgVariants = cva("", {
|
|
826
|
-
variants: {
|
|
827
|
-
theme: {
|
|
828
|
-
default: "fill-foreground opacity-[0.06]",
|
|
829
|
-
reversed: "fill-white opacity-10",
|
|
830
|
-
black: "fill-black opacity-[0.04]",
|
|
831
|
-
white: "fill-white opacity-[0.04]"
|
|
832
|
-
}
|
|
833
|
-
}
|
|
834
|
-
});
|
|
835
|
-
var spinnerBgVariants = cva("", {
|
|
836
|
-
variants: {
|
|
837
|
-
theme: {
|
|
838
|
-
default: "fill-foreground",
|
|
839
|
-
reversed: "fill-background",
|
|
840
|
-
black: "fill-black opacity-[0.98]",
|
|
841
|
-
white: "fill-white opacity-[0.98]"
|
|
842
|
-
}
|
|
843
|
-
}
|
|
844
|
-
});
|
|
845
|
-
function Loader({
|
|
846
|
-
theme = "default",
|
|
847
|
-
variant = "spinner",
|
|
848
|
-
className,
|
|
849
|
-
style,
|
|
850
|
-
...props
|
|
851
|
-
}) {
|
|
852
|
-
const dotCount = 21;
|
|
853
|
-
return /* @__PURE__ */ jsx(
|
|
854
|
-
"div",
|
|
855
|
-
{
|
|
856
|
-
"data-slot": "loader",
|
|
857
|
-
className: cn(
|
|
858
|
-
loaderVariants({ theme, variant }),
|
|
859
|
-
variant === "spinner" && "animate-spin",
|
|
860
|
-
className
|
|
861
|
-
),
|
|
862
|
-
...props,
|
|
863
|
-
children: variant === "spinner" ? /* @__PURE__ */ jsxs(
|
|
864
|
-
"svg",
|
|
865
|
-
{
|
|
866
|
-
width: "20",
|
|
867
|
-
height: "20",
|
|
868
|
-
viewBox: "0 0 20 20",
|
|
869
|
-
fill: "none",
|
|
870
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
871
|
-
children: [
|
|
872
|
-
/* @__PURE__ */ jsx("title", { children: "Loading spinner" }),
|
|
873
|
-
/* @__PURE__ */ jsxs("g", { clipPath: "url(#pop_loader_clip_path)", children: [
|
|
874
|
-
/* @__PURE__ */ jsx(
|
|
875
|
-
"path",
|
|
876
|
-
{
|
|
877
|
-
className: spinnerFgVariants({ theme }),
|
|
878
|
-
d: "M20 10C20 15.5137 15.5137 20 10 20C4.48628 20 6.78126e-07 15.5137 4.37114e-07 10C1.96101e-07 4.48627 4.48627 3.50301e-07 10 1.09288e-07C15.5137 -1.31724e-07 20 4.48627 20 10ZM2.35294 10C2.35294 14.2196 5.78039 17.6471 10 17.6471C14.2196 17.6471 17.6471 14.2196 17.6471 10C17.6471 5.78039 14.2196 2.35294 10 2.35294C5.78039 2.35294 2.35294 5.78039 2.35294 10Z"
|
|
879
|
-
}
|
|
880
|
-
),
|
|
881
|
-
/* @__PURE__ */ jsx(
|
|
882
|
-
"path",
|
|
883
|
-
{
|
|
884
|
-
className: spinnerBgVariants({ theme }),
|
|
885
|
-
d: "M20 10L17.6471 10C17.6471 5.78039 14.2196 2.35294 10 2.35294L10 7.10315e-07C15.5137 4.69302e-07 20 4.48627 20 10Z"
|
|
886
|
-
}
|
|
887
|
-
)
|
|
888
|
-
] }),
|
|
889
|
-
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "pop_loader_clip_path", children: /* @__PURE__ */ jsx(
|
|
890
|
-
"rect",
|
|
891
|
-
{
|
|
892
|
-
width: "20",
|
|
893
|
-
height: "20",
|
|
894
|
-
fill: "white",
|
|
895
|
-
transform: "translate(8.74228e-07 20) rotate(-90)"
|
|
896
|
-
}
|
|
897
|
-
) }) })
|
|
898
|
-
]
|
|
899
|
-
}
|
|
900
|
-
) : /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: dotCount }, (_, index) => {
|
|
901
|
-
const delaySeconds = index * 0.035;
|
|
902
|
-
return (
|
|
903
|
-
// biome-ignore lint/suspicious/noArrayIndexKey: Dots are static and ordered
|
|
904
|
-
/* @__PURE__ */ jsx(
|
|
905
|
-
"div",
|
|
906
|
-
{
|
|
907
|
-
className: "bg-grayscale-200 dark:bg-grayscale-700 animate-loader-wave absolute top-0 size-[3px] rounded-full motion-reduce:animate-none",
|
|
908
|
-
style: {
|
|
909
|
-
left: `${index}px`,
|
|
910
|
-
animationDelay: `${delaySeconds}s`
|
|
911
|
-
}
|
|
912
|
-
},
|
|
913
|
-
index
|
|
914
|
-
)
|
|
915
|
-
);
|
|
916
|
-
}) })
|
|
917
|
-
}
|
|
918
|
-
);
|
|
919
|
-
}
|
|
920
924
|
var notificationBadgeVariants = cva(
|
|
921
925
|
"inline-flex items-center justify-center rounded-full box-border shrink-0 whitespace-nowrap text-xs font-medium leading-[18px] min-w-[18px] h-[18px] px-[5px] py-0 transition-[color,background-color,border-color]",
|
|
922
926
|
{
|