@validationcloud/fractal-ui 1.20.0 → 1.21.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.
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
type SkeletonProps = React.ComponentPropsWithoutRef<'span'>;
|
|
3
|
+
/**
|
|
4
|
+
* Universal skeleton component for <span> elements.
|
|
5
|
+
* Animated fallback automatically sizes itself automatically according to line-height.
|
|
6
|
+
* Explicit width needs to be set for the component to work properly.
|
|
7
|
+
*/
|
|
8
|
+
export declare function Skeleton({ className, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react';
|
|
2
|
+
import { Skeleton } from './skeleton';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
component: typeof Skeleton;
|
|
5
|
+
};
|
|
6
|
+
export default meta;
|
|
7
|
+
type Story = StoryObj<typeof meta>;
|
|
8
|
+
export declare const Default: Story;
|
|
9
|
+
export declare const InlineTextSkeleton: Story;
|
|
10
|
+
export declare const TextSkeleton: Story;
|
|
11
|
+
export declare const ListSkeleton: Story;
|
|
12
|
+
export declare const FormSkeleton: Story;
|
|
13
|
+
export declare const TableSkeleton: Story;
|
package/dist/fractal-ui.js
CHANGED
|
@@ -191,7 +191,7 @@ function S0() {
|
|
|
191
191
|
var G = B.children;
|
|
192
192
|
if (G !== void 0)
|
|
193
193
|
if (T)
|
|
194
|
-
if (
|
|
194
|
+
if (q(G)) {
|
|
195
195
|
for (T = 0; T < G.length; T++)
|
|
196
196
|
p(G[T]);
|
|
197
197
|
Object.freeze && Object.freeze(G);
|
|
@@ -205,7 +205,7 @@ function S0() {
|
|
|
205
205
|
var K = Object.keys(B).filter(function(h2) {
|
|
206
206
|
return h2 !== "key";
|
|
207
207
|
});
|
|
208
|
-
T = 0 < K.length ? "{key: someKey, " + K.join(": ..., ") + ": ...}" : "{key: someKey}",
|
|
208
|
+
T = 0 < K.length ? "{key: someKey, " + K.join(": ..., ") + ": ...}" : "{key: someKey}", $[G + T] || (K = 0 < K.length ? "{" + K.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
209
209
|
`A props object containing a "key" prop is being spread into JSX:
|
|
210
210
|
let props = %s;
|
|
211
211
|
<%s {...props} />
|
|
@@ -216,7 +216,7 @@ React keys must be passed directly to JSX without using spread:
|
|
|
216
216
|
G,
|
|
217
217
|
K,
|
|
218
218
|
G
|
|
219
|
-
),
|
|
219
|
+
), $[G + T] = !0);
|
|
220
220
|
}
|
|
221
221
|
if (G = null, k !== void 0 && (o(k), G = "" + k), d(B) && (o(B.key), G = "" + B.key), "key" in B) {
|
|
222
222
|
k = {};
|
|
@@ -240,7 +240,7 @@ React keys must be passed directly to JSX without using spread:
|
|
|
240
240
|
function p(L) {
|
|
241
241
|
typeof L == "object" && L !== null && L.$$typeof === v && L._store && (L._store.validated = 1);
|
|
242
242
|
}
|
|
243
|
-
var h = Z0, v = Symbol.for("react.transitional.element"), m = Symbol.for("react.portal"), g = Symbol.for("react.fragment"), b = Symbol.for("react.strict_mode"), M = Symbol.for("react.profiler"), _ = Symbol.for("react.consumer"), Z = Symbol.for("react.context"), A = Symbol.for("react.forward_ref"), S = Symbol.for("react.suspense"), E = Symbol.for("react.suspense_list"), w = Symbol.for("react.memo"), P = Symbol.for("react.lazy"), D = Symbol.for("react.activity"), z = Symbol.for("react.client.reference"), N = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty,
|
|
243
|
+
var h = Z0, v = Symbol.for("react.transitional.element"), m = Symbol.for("react.portal"), g = Symbol.for("react.fragment"), b = Symbol.for("react.strict_mode"), M = Symbol.for("react.profiler"), _ = Symbol.for("react.consumer"), Z = Symbol.for("react.context"), A = Symbol.for("react.forward_ref"), S = Symbol.for("react.suspense"), E = Symbol.for("react.suspense_list"), w = Symbol.for("react.memo"), P = Symbol.for("react.lazy"), D = Symbol.for("react.activity"), z = Symbol.for("react.client.reference"), N = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, q = Array.isArray, V = console.createTask ? console.createTask : function() {
|
|
244
244
|
return null;
|
|
245
245
|
};
|
|
246
246
|
h = {
|
|
@@ -251,7 +251,7 @@ React keys must be passed directly to JSX without using spread:
|
|
|
251
251
|
var H, O = {}, F = h["react-stack-bottom-frame"].bind(
|
|
252
252
|
h,
|
|
253
253
|
n
|
|
254
|
-
)(), U = V(i(n)),
|
|
254
|
+
)(), U = V(i(n)), $ = {};
|
|
255
255
|
H2.Fragment = g, H2.jsx = function(L, B, k, T, J) {
|
|
256
256
|
var Q = 1e4 > N.recentlyCreatedOwnerStacks++;
|
|
257
257
|
return u(
|
|
@@ -1036,12 +1036,12 @@ const Fe = (e) => ({
|
|
|
1036
1036
|
}, h = k1(i), v = B1(h), m = await n.getDimensions(s), g = h === "y", b = g ? "top" : "left", M = g ? "bottom" : "right", _ = g ? "clientHeight" : "clientWidth", Z = r.reference[v] + r.reference[h] - p[h] - r.floating[v], A = p[h] - r.reference[h], S = await (n.getOffsetParent == null ? void 0 : n.getOffsetParent(s));
|
|
1037
1037
|
let E = S ? S[_] : 0;
|
|
1038
1038
|
(!E || !await (n.isElement == null ? void 0 : n.isElement(S))) && (E = d.floating[_] || r.floating[v]);
|
|
1039
|
-
const w = Z / 2 - A / 2, P = E / 2 - m[v] / 2 - 1, D = b2(u[b], P), z = b2(u[M], P), N = D, j = E - m[v] - z,
|
|
1039
|
+
const w = Z / 2 - A / 2, P = E / 2 - m[v] / 2 - 1, D = b2(u[b], P), z = b2(u[M], P), N = D, j = E - m[v] - z, q = E / 2 - m[v] / 2 + w, V = b1(N, q, j), H = !a.arrow && P2(i) != null && q !== V && r.reference[v] / 2 - (q < N ? D : z) - m[v] / 2 < 0, O = H ? q < N ? q - N : q - j : 0;
|
|
1040
1040
|
return {
|
|
1041
1041
|
[h]: p[h] + O,
|
|
1042
1042
|
data: {
|
|
1043
1043
|
[h]: V,
|
|
1044
|
-
centerOffset:
|
|
1044
|
+
centerOffset: q - V - O,
|
|
1045
1045
|
...H && {
|
|
1046
1046
|
alignmentOffset: O
|
|
1047
1047
|
}
|
|
@@ -1105,16 +1105,16 @@ const Fe = (e) => ({
|
|
|
1105
1105
|
if (!O)
|
|
1106
1106
|
switch (h) {
|
|
1107
1107
|
case "bestFit": {
|
|
1108
|
-
var
|
|
1109
|
-
const F = (
|
|
1108
|
+
var q;
|
|
1109
|
+
const F = (q = D.filter((U) => {
|
|
1110
1110
|
if (S) {
|
|
1111
|
-
const
|
|
1112
|
-
return
|
|
1111
|
+
const $ = L2(U.placement);
|
|
1112
|
+
return $ === M || // Create a bias to the `y` side axis due to horizontal
|
|
1113
1113
|
// reading directions favoring greater width.
|
|
1114
|
-
|
|
1114
|
+
$ === "y";
|
|
1115
1115
|
}
|
|
1116
1116
|
return !0;
|
|
1117
|
-
}).map((U) => [U.placement, U.overflows.filter((
|
|
1117
|
+
}).map((U) => [U.placement, U.overflows.filter(($) => $ > 0).reduce(($, L) => $ + L, 0)]).sort((U, $) => U[1] - $[1])[0]) == null ? void 0 : q[0];
|
|
1118
1118
|
F && (O = F);
|
|
1119
1119
|
break;
|
|
1120
1120
|
}
|
|
@@ -1946,7 +1946,7 @@ function Qe(e) {
|
|
|
1946
1946
|
middleware: p
|
|
1947
1947
|
};
|
|
1948
1948
|
z.current && (F.platform = z.current), Je(S.current, E.current, F).then((U) => {
|
|
1949
|
-
const
|
|
1949
|
+
const $ = {
|
|
1950
1950
|
...U,
|
|
1951
1951
|
// The floating element's position may be recomputed while it's closed
|
|
1952
1952
|
// but still mounted (such as when transitioning out). To ensure
|
|
@@ -1954,8 +1954,8 @@ function Qe(e) {
|
|
|
1954
1954
|
// setting it to `true` when `open === false` (must be specified).
|
|
1955
1955
|
isPositioned: N.current !== !1
|
|
1956
1956
|
};
|
|
1957
|
-
|
|
1958
|
-
u(
|
|
1957
|
+
q.current && !o1(w.current, $) && (w.current = $, v3.flushSync(() => {
|
|
1958
|
+
u($);
|
|
1959
1959
|
}));
|
|
1960
1960
|
});
|
|
1961
1961
|
}, [p, l, t, z, N]);
|
|
@@ -1965,9 +1965,9 @@ function Qe(e) {
|
|
|
1965
1965
|
isPositioned: !1
|
|
1966
1966
|
})));
|
|
1967
1967
|
}, [s]);
|
|
1968
|
-
const
|
|
1969
|
-
K2(() => (
|
|
1970
|
-
|
|
1968
|
+
const q = f.useRef(!1);
|
|
1969
|
+
K2(() => (q.current = !0, () => {
|
|
1970
|
+
q.current = !1;
|
|
1971
1971
|
}), []), K2(() => {
|
|
1972
1972
|
if (Z && (S.current = Z), A && (E.current = A), Z && A) {
|
|
1973
1973
|
if (D.current)
|
|
@@ -1991,17 +1991,17 @@ function Qe(e) {
|
|
|
1991
1991
|
};
|
|
1992
1992
|
if (!H.floating)
|
|
1993
1993
|
return F;
|
|
1994
|
-
const U = r3(H.floating, c.x),
|
|
1994
|
+
const U = r3(H.floating, c.x), $ = r3(H.floating, c.y);
|
|
1995
1995
|
return d ? {
|
|
1996
1996
|
...F,
|
|
1997
|
-
transform: "translate(" + U + "px, " +
|
|
1997
|
+
transform: "translate(" + U + "px, " + $ + "px)",
|
|
1998
1998
|
...B3(H.floating) >= 1.5 && {
|
|
1999
1999
|
willChange: "transform"
|
|
2000
2000
|
}
|
|
2001
2001
|
} : {
|
|
2002
2002
|
position: t,
|
|
2003
2003
|
left: U,
|
|
2004
|
-
top:
|
|
2004
|
+
top: $
|
|
2005
2005
|
};
|
|
2006
2006
|
}, [t, d, H.floating, c.x, c.y]);
|
|
2007
2007
|
return f.useMemo(() => ({
|
|
@@ -2108,7 +2108,7 @@ var O1 = "PopperContent", [c4, f4] = D3(O1), z3 = f.forwardRef(
|
|
|
2108
2108
|
boundary: z.filter(p4),
|
|
2109
2109
|
// with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
|
|
2110
2110
|
altBoundary: N
|
|
2111
|
-
}, { refs:
|
|
2111
|
+
}, { refs: q, floatingStyles: V, placement: H, isPositioned: O, middlewareData: F } = Qe({
|
|
2112
2112
|
// default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
|
|
2113
2113
|
strategy: "fixed",
|
|
2114
2114
|
placement: P,
|
|
@@ -2138,7 +2138,7 @@ var O1 = "PopperContent", [c4, f4] = D3(O1), z3 = f.forwardRef(
|
|
|
2138
2138
|
h4({ arrowWidth: E, arrowHeight: w }),
|
|
2139
2139
|
p && r4({ strategy: "referenceHidden", ...j })
|
|
2140
2140
|
]
|
|
2141
|
-
}), [U,
|
|
2141
|
+
}), [U, $] = I3(H), L = r2(v);
|
|
2142
2142
|
g2(() => {
|
|
2143
2143
|
O && (L == null || L());
|
|
2144
2144
|
}, [O, L]);
|
|
@@ -2148,7 +2148,7 @@ var O1 = "PopperContent", [c4, f4] = D3(O1), z3 = f.forwardRef(
|
|
|
2148
2148
|
}, [b]), /* @__PURE__ */ C.jsx(
|
|
2149
2149
|
"div",
|
|
2150
2150
|
{
|
|
2151
|
-
ref:
|
|
2151
|
+
ref: q.setFloating,
|
|
2152
2152
|
"data-radix-popper-content-wrapper": "",
|
|
2153
2153
|
style: {
|
|
2154
2154
|
...V,
|
|
@@ -2182,7 +2182,7 @@ var O1 = "PopperContent", [c4, f4] = D3(O1), z3 = f.forwardRef(
|
|
|
2182
2182
|
o2.div,
|
|
2183
2183
|
{
|
|
2184
2184
|
"data-side": U,
|
|
2185
|
-
"data-align":
|
|
2185
|
+
"data-align": $,
|
|
2186
2186
|
...m,
|
|
2187
2187
|
ref: _,
|
|
2188
2188
|
style: {
|
|
@@ -3362,9 +3362,9 @@ const Y = (e) => {
|
|
|
3362
3362
|
"left-bottom"
|
|
3363
3363
|
], A = () => [...Z(), y, x], S = () => ["auto", "hidden", "clip", "visible", "scroll"], E = () => ["auto", "contain", "none"], w = () => [y, x, a], P = () => [y2, "full", "auto", ...w()], D = () => [F2, "none", "subgrid", y, x], z = () => ["auto", {
|
|
3364
3364
|
span: ["full", F2, y, x]
|
|
3365
|
-
}, F2, y, x], N = () => [F2, "auto", y, x], j = () => ["auto", "min", "max", "fr", y, x],
|
|
3365
|
+
}, F2, y, x], N = () => [F2, "auto", y, x], j = () => ["auto", "min", "max", "fr", y, x], q = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], V = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], H = () => ["auto", ...w()], O = () => [y2, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...w()], F = () => [e, y, x], U = () => [...Z(), f3, c3, {
|
|
3366
3366
|
position: [y, x]
|
|
3367
|
-
}],
|
|
3367
|
+
}], $ = () => ["no-repeat", {
|
|
3368
3368
|
repeat: ["", "x", "y", "space", "round"]
|
|
3369
3369
|
}], L = () => ["auto", "cover", "contain", El, yl, {
|
|
3370
3370
|
size: [y, x]
|
|
@@ -3786,7 +3786,7 @@ const Y = (e) => {
|
|
|
3786
3786
|
* @see https://tailwindcss.com/docs/justify-content
|
|
3787
3787
|
*/
|
|
3788
3788
|
"justify-content": [{
|
|
3789
|
-
justify: [
|
|
3789
|
+
justify: [...q(), "normal"]
|
|
3790
3790
|
}],
|
|
3791
3791
|
/**
|
|
3792
3792
|
* Justify Items
|
|
@@ -3807,7 +3807,7 @@ const Y = (e) => {
|
|
|
3807
3807
|
* @see https://tailwindcss.com/docs/align-content
|
|
3808
3808
|
*/
|
|
3809
3809
|
"align-content": [{
|
|
3810
|
-
content: ["normal",
|
|
3810
|
+
content: ["normal", ...q()]
|
|
3811
3811
|
}],
|
|
3812
3812
|
/**
|
|
3813
3813
|
* Align Items
|
|
@@ -3832,7 +3832,7 @@ const Y = (e) => {
|
|
|
3832
3832
|
* @see https://tailwindcss.com/docs/place-content
|
|
3833
3833
|
*/
|
|
3834
3834
|
"place-content": [{
|
|
3835
|
-
"place-content":
|
|
3835
|
+
"place-content": q()
|
|
3836
3836
|
}],
|
|
3837
3837
|
/**
|
|
3838
3838
|
* Place Items
|
|
@@ -4342,7 +4342,7 @@ const Y = (e) => {
|
|
|
4342
4342
|
* @see https://tailwindcss.com/docs/background-repeat
|
|
4343
4343
|
*/
|
|
4344
4344
|
"bg-repeat": [{
|
|
4345
|
-
bg:
|
|
4345
|
+
bg: $()
|
|
4346
4346
|
}],
|
|
4347
4347
|
/**
|
|
4348
4348
|
* Background Size
|
|
@@ -5019,7 +5019,7 @@ const Y = (e) => {
|
|
|
5019
5019
|
* @see https://tailwindcss.com/docs/mask-repeat
|
|
5020
5020
|
*/
|
|
5021
5021
|
"mask-repeat": [{
|
|
5022
|
-
mask:
|
|
5022
|
+
mask: $()
|
|
5023
5023
|
}],
|
|
5024
5024
|
/**
|
|
5025
5025
|
* Mask Size
|
|
@@ -5830,7 +5830,7 @@ const Y = (e) => {
|
|
|
5830
5830
|
}, b0 = (e, l, t) => {
|
|
5831
5831
|
const o = l[t];
|
|
5832
5832
|
o !== void 0 && (e[t] = e[t] ? e[t].concat(o) : o);
|
|
5833
|
-
}, kl = (e, ...l) => typeof e == "function" ? s3(u3, e, ...l) : s3(() => Bl(u3(), e), ...l),
|
|
5833
|
+
}, kl = (e, ...l) => typeof e == "function" ? s3(u3, e, ...l) : s3(() => Bl(u3(), e), ...l), W = kl({
|
|
5834
5834
|
extend: {
|
|
5835
5835
|
classGroups: {
|
|
5836
5836
|
gap: ["gap-r3", "gap-r4", "gap-r5", "gap-r6"],
|
|
@@ -5876,7 +5876,7 @@ const Y = (e) => {
|
|
|
5876
5876
|
n,
|
|
5877
5877
|
{
|
|
5878
5878
|
ref: r,
|
|
5879
|
-
className:
|
|
5879
|
+
className: W("flex items-center justify-center text-nowrap", Dl[l], Rl[t], o),
|
|
5880
5880
|
...i
|
|
5881
5881
|
}
|
|
5882
5882
|
);
|
|
@@ -5900,7 +5900,7 @@ const Hl = n1(
|
|
|
5900
5900
|
c,
|
|
5901
5901
|
{
|
|
5902
5902
|
ref: s,
|
|
5903
|
-
className:
|
|
5903
|
+
className: W(
|
|
5904
5904
|
// borders:
|
|
5905
5905
|
o,
|
|
5906
5906
|
t,
|
|
@@ -5927,7 +5927,7 @@ function Vl({ padding: e, children: l, className: t, ...o }) {
|
|
|
5927
5927
|
return /* @__PURE__ */ C.jsx(
|
|
5928
5928
|
"div",
|
|
5929
5929
|
{
|
|
5930
|
-
className:
|
|
5930
|
+
className: W(
|
|
5931
5931
|
"border-b-neutral-60 flex flex-row items-center justify-between border-b",
|
|
5932
5932
|
// nullify outside padding with negative margin on top and side:
|
|
5933
5933
|
e === "p-r6" && "xs:-mx-5 xs:-mt-5 -mx-4 -mt-4 md:-mx-6 md:-mt-6",
|
|
@@ -6045,7 +6045,7 @@ const Q2 = {
|
|
|
6045
6045
|
d,
|
|
6046
6046
|
{
|
|
6047
6047
|
ref: n,
|
|
6048
|
-
className:
|
|
6048
|
+
className: W(
|
|
6049
6049
|
...Q2.base,
|
|
6050
6050
|
...Q2.variants[l],
|
|
6051
6051
|
l !== "text" && Q2.sizes[t],
|
|
@@ -6071,8 +6071,8 @@ function Kl({
|
|
|
6071
6071
|
className: r,
|
|
6072
6072
|
...n
|
|
6073
6073
|
}) {
|
|
6074
|
-
return /* @__PURE__ */ C.jsxs("div", { className:
|
|
6075
|
-
/* @__PURE__ */ C.jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ C.jsx(_1, { icon: e, className:
|
|
6074
|
+
return /* @__PURE__ */ C.jsxs("div", { className: W("relative", r), ...n, children: [
|
|
6075
|
+
/* @__PURE__ */ C.jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ C.jsx(_1, { icon: e, className: W("size-full", l) }) }),
|
|
6076
6076
|
/* @__PURE__ */ C.jsx(
|
|
6077
6077
|
"div",
|
|
6078
6078
|
{
|
|
@@ -6080,7 +6080,7 @@ function Kl({
|
|
|
6080
6080
|
style: {
|
|
6081
6081
|
transform: `scale(${i})`
|
|
6082
6082
|
},
|
|
6083
|
-
children: /* @__PURE__ */ C.jsx(_1, { icon: t, className:
|
|
6083
|
+
children: /* @__PURE__ */ C.jsx(_1, { icon: t, className: W("size-full", o) })
|
|
6084
6084
|
}
|
|
6085
6085
|
)
|
|
6086
6086
|
] });
|
|
@@ -6089,7 +6089,7 @@ function zl({ className: e, ...l }) {
|
|
|
6089
6089
|
return /* @__PURE__ */ C.jsx(
|
|
6090
6090
|
P4,
|
|
6091
6091
|
{
|
|
6092
|
-
className:
|
|
6092
|
+
className: W(
|
|
6093
6093
|
"overflow-hidden",
|
|
6094
6094
|
// custom scrollbar styles, override by redefining these CSS variables
|
|
6095
6095
|
"[--scrollbar-size:--spacing(2.5)] [--thumb-color:var(--color-neutral-60)] [--thumb-hover-color:var(--color-neutral-55)] [--track-color:var(--color-transparent)] [--track-hover-color:var(--color-transparent)]",
|
|
@@ -6100,13 +6100,13 @@ function zl({ className: e, ...l }) {
|
|
|
6100
6100
|
);
|
|
6101
6101
|
}
|
|
6102
6102
|
function Nl({ className: e, ...l }) {
|
|
6103
|
-
return /* @__PURE__ */ C.jsx(B4, { className:
|
|
6103
|
+
return /* @__PURE__ */ C.jsx(B4, { className: W("", e), ...l });
|
|
6104
6104
|
}
|
|
6105
6105
|
function jl({ className: e, ...l }) {
|
|
6106
6106
|
return /* @__PURE__ */ C.jsx(
|
|
6107
6107
|
k4,
|
|
6108
6108
|
{
|
|
6109
|
-
className:
|
|
6109
|
+
className: W(
|
|
6110
6110
|
"flex touch-none p-[1px] transition-colors duration-150 ease-out select-none",
|
|
6111
6111
|
// colors
|
|
6112
6112
|
"bg-(--track-color) hover:bg-(--track-hover-color)",
|
|
@@ -6122,7 +6122,7 @@ function Il({ className: e, ...l }) {
|
|
|
6122
6122
|
return /* @__PURE__ */ C.jsx(
|
|
6123
6123
|
D4,
|
|
6124
6124
|
{
|
|
6125
|
-
className:
|
|
6125
|
+
className: W(
|
|
6126
6126
|
"relative flex-1 rounded-(--scrollbar-size) transition-colors duration-150 ease-out",
|
|
6127
6127
|
// colors
|
|
6128
6128
|
"bg-(--thumb-color) hover:bg-(--thumb-hover-color)",
|
|
@@ -6135,7 +6135,7 @@ function Il({ className: e, ...l }) {
|
|
|
6135
6135
|
);
|
|
6136
6136
|
}
|
|
6137
6137
|
function Ul({ className: e, ...l }) {
|
|
6138
|
-
return /* @__PURE__ */ C.jsx(R4, { className:
|
|
6138
|
+
return /* @__PURE__ */ C.jsx(R4, { className: W("", e), ...l });
|
|
6139
6139
|
}
|
|
6140
6140
|
const e5 = {
|
|
6141
6141
|
Root: zl,
|
|
@@ -6148,7 +6148,7 @@ function l5({ clearIcon: e, cta: l, disabled: t, className: o, ...i }) {
|
|
|
6148
6148
|
return /* @__PURE__ */ C.jsx(
|
|
6149
6149
|
"button",
|
|
6150
6150
|
{
|
|
6151
|
-
className:
|
|
6151
|
+
className: W(
|
|
6152
6152
|
"group flex h-full w-10 items-center justify-center focus:outline-none",
|
|
6153
6153
|
t && "pointer-events-none",
|
|
6154
6154
|
o
|
|
@@ -6157,7 +6157,7 @@ function l5({ clearIcon: e, cta: l, disabled: t, className: o, ...i }) {
|
|
|
6157
6157
|
children: /* @__PURE__ */ C.jsx(
|
|
6158
6158
|
"div",
|
|
6159
6159
|
{
|
|
6160
|
-
className:
|
|
6160
|
+
className: W(
|
|
6161
6161
|
"bg-neutral-80 group-focus:ring-neutral-40 flex h-8 w-full items-center justify-center rounded-lg group-focus:ring-1",
|
|
6162
6162
|
l && "bg-ctaGradient hover:bg-ctaGradientHover",
|
|
6163
6163
|
t && "bg-neutral-55"
|
|
@@ -6166,7 +6166,7 @@ function l5({ clearIcon: e, cta: l, disabled: t, className: o, ...i }) {
|
|
|
6166
6166
|
_1,
|
|
6167
6167
|
{
|
|
6168
6168
|
icon: e ? "close" : "enter",
|
|
6169
|
-
className:
|
|
6169
|
+
className: W(
|
|
6170
6170
|
"text-neutral-10 group-hover:text-neutral-40 h-3.5 w-3.5",
|
|
6171
6171
|
l && "group-hover:text-neutral-10",
|
|
6172
6172
|
t && "text-neutral-30"
|
|
@@ -6184,7 +6184,7 @@ function t5({ className: e, ...l }) {
|
|
|
6184
6184
|
return /* @__PURE__ */ C.jsx(
|
|
6185
6185
|
"div",
|
|
6186
6186
|
{
|
|
6187
|
-
className:
|
|
6187
|
+
className: W("absolute h-0 w-0 overflow-clip", e),
|
|
6188
6188
|
...l,
|
|
6189
6189
|
dangerouslySetInnerHTML: { __html: t }
|
|
6190
6190
|
}
|
|
@@ -6197,7 +6197,7 @@ const Wl = n1(
|
|
|
6197
6197
|
r,
|
|
6198
6198
|
{
|
|
6199
6199
|
ref: i,
|
|
6200
|
-
className:
|
|
6200
|
+
className: W(
|
|
6201
6201
|
e.includes("left") && "xs:pl-4 pl-3 md:pl-6 xl:pl-10",
|
|
6202
6202
|
e.includes("right") && "xs:pr-4 pr-3 md:pr-6 xl:pr-10",
|
|
6203
6203
|
e.includes("top") && "xs:pt-4 pt-3 md:pt-6",
|
|
@@ -6253,20 +6253,26 @@ function o5({ name: e, size: l = "md", className: t, ...o }) {
|
|
|
6253
6253
|
"svg",
|
|
6254
6254
|
{
|
|
6255
6255
|
...o,
|
|
6256
|
-
className:
|
|
6256
|
+
className: W(`text-protocols-${h3(e)}`, t),
|
|
6257
6257
|
height: i,
|
|
6258
6258
|
width: i,
|
|
6259
6259
|
children: /* @__PURE__ */ C.jsx("use", { href: `#${h3(e, l)}` })
|
|
6260
6260
|
}
|
|
6261
6261
|
);
|
|
6262
6262
|
}
|
|
6263
|
+
function i5({ className: e, ...l }) {
|
|
6264
|
+
return /* @__PURE__ */ C.jsxs("span", { className: W("relative inline-block", e), ...l, children: [
|
|
6265
|
+
/* @__PURE__ */ C.jsx("div", { className: "inline-block" }),
|
|
6266
|
+
/* @__PURE__ */ C.jsx("div", { className: W("absolute inset-0 animate-pulse rounded bg-neutral-50") })
|
|
6267
|
+
] });
|
|
6268
|
+
}
|
|
6263
6269
|
const ql = {
|
|
6264
6270
|
"data-lpignore": !0,
|
|
6265
6271
|
"data-1p-ignore": !0,
|
|
6266
6272
|
"data-form-type": "other",
|
|
6267
6273
|
"data-bwignore": !0,
|
|
6268
6274
|
autoComplete: "off"
|
|
6269
|
-
},
|
|
6275
|
+
}, r5 = ({
|
|
6270
6276
|
variant: e = "outlined",
|
|
6271
6277
|
disablePasswordManagers: l,
|
|
6272
6278
|
rightAccessory: t,
|
|
@@ -6278,7 +6284,7 @@ const ql = {
|
|
|
6278
6284
|
return /* @__PURE__ */ C.jsxs(
|
|
6279
6285
|
"div",
|
|
6280
6286
|
{
|
|
6281
|
-
className:
|
|
6287
|
+
className: W(
|
|
6282
6288
|
// base wrapper styles:
|
|
6283
6289
|
"flex min-h-10 flex-row items-center justify-between rounded-lg",
|
|
6284
6290
|
// variant-specific base:
|
|
@@ -6293,7 +6299,7 @@ const ql = {
|
|
|
6293
6299
|
/* @__PURE__ */ C.jsx(
|
|
6294
6300
|
"input",
|
|
6295
6301
|
{
|
|
6296
|
-
className:
|
|
6302
|
+
className: W(
|
|
6297
6303
|
// base input styles:
|
|
6298
6304
|
"tg-body placeholder-neutral-40 flex-1 bg-transparent px-3 focus:outline-none disabled:cursor-not-allowed",
|
|
6299
6305
|
// text color:
|
|
@@ -6314,7 +6320,7 @@ const ql = {
|
|
|
6314
6320
|
}
|
|
6315
6321
|
);
|
|
6316
6322
|
};
|
|
6317
|
-
function
|
|
6323
|
+
function n5({
|
|
6318
6324
|
content: e,
|
|
6319
6325
|
color: l = "bg-neutral-80",
|
|
6320
6326
|
side: t = "bottom",
|
|
@@ -6339,7 +6345,7 @@ function r5({
|
|
|
6339
6345
|
/* @__PURE__ */ C.jsxs(
|
|
6340
6346
|
K4,
|
|
6341
6347
|
{
|
|
6342
|
-
className:
|
|
6348
|
+
className: W(
|
|
6343
6349
|
"tg-caption text-neutral-20 max-h-(--radix-tooltip-content-available-height) origin-(--radix-tooltip-content-transform-origin) rounded-lg p-3 text-center text-pretty shadow-md",
|
|
6344
6350
|
// animations
|
|
6345
6351
|
"data-[state=closed]:animate-tooltip-exit data-[state=delayed-open]:animate-tooltip-delayed-enter data-[state=instant-open]:animate-tooltip-enter",
|
|
@@ -6356,7 +6362,7 @@ function r5({
|
|
|
6356
6362
|
/* @__PURE__ */ C.jsx(
|
|
6357
6363
|
el,
|
|
6358
6364
|
{
|
|
6359
|
-
className:
|
|
6365
|
+
className: W(
|
|
6360
6366
|
l === "bg-neutral-60" && "fill-neutral-60",
|
|
6361
6367
|
l === "bg-neutral-80" && "fill-neutral-80",
|
|
6362
6368
|
l === "bg-secondary-40" && "fill-secondary-40"
|
|
@@ -6372,7 +6378,7 @@ function r5({
|
|
|
6372
6378
|
}
|
|
6373
6379
|
);
|
|
6374
6380
|
}
|
|
6375
|
-
function
|
|
6381
|
+
function d5({
|
|
6376
6382
|
children: e,
|
|
6377
6383
|
delayDuration: l = 300,
|
|
6378
6384
|
skipDelayDuration: t = 50,
|
|
@@ -6391,7 +6397,8 @@ export {
|
|
|
6391
6397
|
Wl as PagePadding,
|
|
6392
6398
|
o5 as ProtocolLogo,
|
|
6393
6399
|
e5 as ScrollArea,
|
|
6394
|
-
i5 as
|
|
6395
|
-
r5 as
|
|
6396
|
-
n5 as
|
|
6400
|
+
i5 as Skeleton,
|
|
6401
|
+
r5 as TextInput,
|
|
6402
|
+
n5 as Tooltip,
|
|
6403
|
+
d5 as TooltipProvider
|
|
6397
6404
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ export { InputButton } from './components/input-button/input-button';
|
|
|
8
8
|
export { MountSvgSprite } from './components/mount-svg-sprite/mount-svg-sprite';
|
|
9
9
|
export { PagePadding } from './components/page-padding/page-padding';
|
|
10
10
|
export { ProtocolLogo } from './components/protocol-logo/protocol-logo';
|
|
11
|
+
export { Skeleton } from './components/skeleton/skeleton';
|
|
11
12
|
export { TextInput } from './components/text-input/text-input';
|
|
12
13
|
export { Tooltip } from './components/tooltip/tooltip';
|
|
13
14
|
export { TooltipProvider } from './components/tooltip-provider/tooltip-provider';
|