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