@cellarnode/ui 0.16.9 → 0.17.1
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/components/__tests__/animated-list-skeleton.test.d.ts +2 -0
- package/dist/components/__tests__/animated-list-skeleton.test.d.ts.map +1 -0
- package/dist/components/__tests__/animated-list-skeleton.test.js +11 -0
- package/dist/components/__tests__/animated-list-skeleton.test.js.map +1 -0
- package/dist/components/__tests__/card-grid-skeleton.test.d.ts +2 -0
- package/dist/components/__tests__/card-grid-skeleton.test.d.ts.map +1 -0
- package/dist/components/__tests__/card-grid-skeleton.test.js +22 -0
- package/dist/components/__tests__/card-grid-skeleton.test.js.map +1 -0
- package/dist/components/__tests__/dashboard-stats-grid-skeleton.test.d.ts +2 -0
- package/dist/components/__tests__/dashboard-stats-grid-skeleton.test.d.ts.map +1 -0
- package/dist/components/__tests__/dashboard-stats-grid-skeleton.test.js +39 -0
- package/dist/components/__tests__/dashboard-stats-grid-skeleton.test.js.map +1 -0
- package/dist/components/__tests__/data-table-skeleton.test.d.ts +2 -0
- package/dist/components/__tests__/data-table-skeleton.test.d.ts.map +1 -0
- package/dist/components/__tests__/data-table-skeleton.test.js +27 -0
- package/dist/components/__tests__/data-table-skeleton.test.js.map +1 -0
- package/dist/components/__tests__/detail-page-skeleton.test.d.ts +2 -0
- package/dist/components/__tests__/detail-page-skeleton.test.d.ts.map +1 -0
- package/dist/components/__tests__/detail-page-skeleton.test.js +30 -0
- package/dist/components/__tests__/detail-page-skeleton.test.js.map +1 -0
- package/dist/components/__tests__/list-item-skeleton.test.d.ts +2 -0
- package/dist/components/__tests__/list-item-skeleton.test.d.ts.map +1 -0
- package/dist/components/__tests__/list-item-skeleton.test.js +38 -0
- package/dist/components/__tests__/list-item-skeleton.test.js.map +1 -0
- package/dist/components/__tests__/profile-header-skeleton.test.d.ts +2 -0
- package/dist/components/__tests__/profile-header-skeleton.test.d.ts.map +1 -0
- package/dist/components/__tests__/profile-header-skeleton.test.js +17 -0
- package/dist/components/__tests__/profile-header-skeleton.test.js.map +1 -0
- package/dist/components/__tests__/stat-card-skeleton.test.d.ts +2 -0
- package/dist/components/__tests__/stat-card-skeleton.test.d.ts.map +1 -0
- package/dist/components/__tests__/stat-card-skeleton.test.js +33 -0
- package/dist/components/__tests__/stat-card-skeleton.test.js.map +1 -0
- package/dist/components/animated-list.d.ts +11 -1
- package/dist/components/animated-list.d.ts.map +1 -1
- package/dist/components/animated-list.js +7 -1
- package/dist/components/animated-list.js.map +1 -1
- package/dist/components/animated-list.stories.d.ts +3 -2
- package/dist/components/animated-list.stories.d.ts.map +1 -1
- package/dist/components/bottle-extract-dialog.js +4 -5
- package/dist/components/bottle-extract-dialog.js.map +1 -1
- package/dist/components/card-grid-skeleton.d.ts +9 -0
- package/dist/components/card-grid-skeleton.d.ts.map +1 -0
- package/dist/components/card-grid-skeleton.js +16 -0
- package/dist/components/card-grid-skeleton.js.map +1 -0
- package/dist/components/card-grid-skeleton.stories.d.ts +35 -0
- package/dist/components/card-grid-skeleton.stories.d.ts.map +1 -0
- package/dist/components/card-grid-skeleton.stories.js +22 -0
- package/dist/components/card-grid-skeleton.stories.js.map +1 -0
- package/dist/components/dashboard-stats-grid.d.ts +11 -1
- package/dist/components/dashboard-stats-grid.d.ts.map +1 -1
- package/dist/components/dashboard-stats-grid.js +19 -12
- package/dist/components/dashboard-stats-grid.js.map +1 -1
- package/dist/components/dashboard-stats-grid.stories.d.ts +19 -0
- package/dist/components/dashboard-stats-grid.stories.d.ts.map +1 -0
- package/dist/components/dashboard-stats-grid.stories.js +34 -0
- package/dist/components/dashboard-stats-grid.stories.js.map +1 -0
- package/dist/components/data-table-skeleton.d.ts +9 -0
- package/dist/components/data-table-skeleton.d.ts.map +1 -0
- package/dist/components/data-table-skeleton.js +14 -0
- package/dist/components/data-table-skeleton.js.map +1 -0
- package/dist/components/data-table-skeleton.stories.d.ts +36 -0
- package/dist/components/data-table-skeleton.stories.d.ts.map +1 -0
- package/dist/components/data-table-skeleton.stories.js +22 -0
- package/dist/components/data-table-skeleton.stories.js.map +1 -0
- package/dist/components/detail-page-skeleton.d.ts +11 -0
- package/dist/components/detail-page-skeleton.d.ts.map +1 -0
- package/dist/components/detail-page-skeleton.js +14 -0
- package/dist/components/detail-page-skeleton.js.map +1 -0
- package/dist/components/detail-page-skeleton.stories.d.ts +15 -0
- package/dist/components/detail-page-skeleton.stories.d.ts.map +1 -0
- package/dist/components/detail-page-skeleton.stories.js +15 -0
- package/dist/components/detail-page-skeleton.stories.js.map +1 -0
- package/dist/components/extraction-phase-stepper.d.ts.map +1 -1
- package/dist/components/extraction-phase-stepper.js +5 -4
- package/dist/components/extraction-phase-stepper.js.map +1 -1
- package/dist/components/list-item-skeleton.d.ts +9 -0
- package/dist/components/list-item-skeleton.d.ts.map +1 -0
- package/dist/components/list-item-skeleton.js +13 -0
- package/dist/components/list-item-skeleton.js.map +1 -0
- package/dist/components/list-item-skeleton.stories.d.ts +27 -0
- package/dist/components/list-item-skeleton.stories.d.ts.map +1 -0
- package/dist/components/list-item-skeleton.stories.js +21 -0
- package/dist/components/list-item-skeleton.stories.js.map +1 -0
- package/dist/components/profile-header-skeleton.d.ts +12 -0
- package/dist/components/profile-header-skeleton.d.ts.map +1 -0
- package/dist/components/profile-header-skeleton.js +15 -0
- package/dist/components/profile-header-skeleton.js.map +1 -0
- package/dist/components/profile-header-skeleton.stories.d.ts +15 -0
- package/dist/components/profile-header-skeleton.stories.d.ts.map +1 -0
- package/dist/components/profile-header-skeleton.stories.js +15 -0
- package/dist/components/profile-header-skeleton.stories.js.map +1 -0
- package/dist/components/skeleton.d.ts +6 -1
- package/dist/components/skeleton.d.ts.map +1 -1
- package/dist/components/skeleton.js +5 -2
- package/dist/components/skeleton.js.map +1 -1
- package/dist/components/skeleton.stories.d.ts +9 -1
- package/dist/components/skeleton.stories.d.ts.map +1 -1
- package/dist/components/skeleton.stories.js +16 -5
- package/dist/components/skeleton.stories.js.map +1 -1
- package/dist/components/sortable-card-shell.test.d.ts +2 -0
- package/dist/components/sortable-card-shell.test.d.ts.map +1 -0
- package/dist/components/sortable-card-shell.test.js +115 -0
- package/dist/components/sortable-card-shell.test.js.map +1 -0
- package/dist/components/stat-card.d.ts +10 -1
- package/dist/components/stat-card.d.ts.map +1 -1
- package/dist/components/stat-card.js +15 -1
- package/dist/components/stat-card.js.map +1 -1
- package/dist/components/stat-card.stories.d.ts +6 -2
- package/dist/components/stat-card.stories.d.ts.map +1 -1
- package/dist/components/stat-card.stories.js +17 -4
- package/dist/components/stat-card.stories.js.map +1 -1
- package/dist/components/variant-picker-dialog.test.js +1 -1
- package/dist/components/variant-picker-dialog.test.js.map +1 -1
- package/dist/globe/__tests__/globe-loading-skeleton.test.d.ts +2 -0
- package/dist/globe/__tests__/globe-loading-skeleton.test.d.ts.map +1 -0
- package/dist/globe/__tests__/globe-loading-skeleton.test.js +29 -0
- package/dist/globe/__tests__/globe-loading-skeleton.test.js.map +1 -0
- package/dist/globe/globe-loading-skeleton.d.ts +13 -5
- package/dist/globe/globe-loading-skeleton.d.ts.map +1 -1
- package/dist/globe/globe-loading-skeleton.js +9 -2
- package/dist/globe/globe-loading-skeleton.js.map +1 -1
- package/dist/index.d.ts +6 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +7 -1
- package/dist/index.js.map +1 -1
- package/dist/skeleton/__tests__/loader.test.d.ts +2 -0
- package/dist/skeleton/__tests__/loader.test.d.ts.map +1 -0
- package/dist/skeleton/__tests__/loader.test.js +33 -0
- package/dist/skeleton/__tests__/loader.test.js.map +1 -0
- package/dist/skeleton/__tests__/primitive.test.d.ts +2 -0
- package/dist/skeleton/__tests__/primitive.test.d.ts.map +1 -0
- package/dist/skeleton/__tests__/primitive.test.js +36 -0
- package/dist/skeleton/__tests__/primitive.test.js.map +1 -0
- package/dist/skeleton/__tests__/provider.test.d.ts +2 -0
- package/dist/skeleton/__tests__/provider.test.d.ts.map +1 -0
- package/dist/skeleton/__tests__/provider.test.js +78 -0
- package/dist/skeleton/__tests__/provider.test.js.map +1 -0
- package/dist/skeleton/index.d.ts +5 -0
- package/dist/skeleton/index.d.ts.map +1 -0
- package/dist/skeleton/index.js +5 -0
- package/dist/skeleton/index.js.map +1 -0
- package/dist/skeleton/loader.d.ts +15 -0
- package/dist/skeleton/loader.d.ts.map +1 -0
- package/dist/skeleton/loader.js +21 -0
- package/dist/skeleton/loader.js.map +1 -0
- package/dist/skeleton/loader.stories.d.ts +16 -0
- package/dist/skeleton/loader.stories.d.ts.map +1 -0
- package/dist/skeleton/loader.stories.js +27 -0
- package/dist/skeleton/loader.stories.js.map +1 -0
- package/dist/skeleton/provider.d.ts +13 -0
- package/dist/skeleton/provider.d.ts.map +1 -0
- package/dist/skeleton/provider.js +27 -0
- package/dist/skeleton/provider.js.map +1 -0
- package/dist/skeleton/stagger.d.ts +30 -0
- package/dist/skeleton/stagger.d.ts.map +1 -0
- package/dist/skeleton/stagger.js +45 -0
- package/dist/skeleton/stagger.js.map +1 -0
- package/package.json +1 -1
- package/src/theme/tokens.css +93 -0
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { ProfileHeaderSkeleton } from "./profile-header-skeleton";
|
|
3
|
+
import { SkeletonProvider } from "../skeleton/provider";
|
|
4
|
+
const meta = {
|
|
5
|
+
title: "Components/ProfileHeaderSkeleton",
|
|
6
|
+
component: ProfileHeaderSkeleton,
|
|
7
|
+
tags: ["autodocs"],
|
|
8
|
+
parameters: { layout: "padded" },
|
|
9
|
+
};
|
|
10
|
+
export default meta;
|
|
11
|
+
export const Default = {};
|
|
12
|
+
export const InProvider = {
|
|
13
|
+
render: () => (_jsx(SkeletonProvider, { tier: "hero", children: _jsx(ProfileHeaderSkeleton, {}) })),
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=profile-header-skeleton.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"profile-header-skeleton.stories.js","sourceRoot":"","sources":["../../src/components/profile-header-skeleton.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,kCAAkC;IACzC,SAAS,EAAE,qBAAqB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE;CACY,CAAC;AAE/C,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC;AACjC,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,KAAC,gBAAgB,IAAC,IAAI,EAAC,MAAM,YAC3B,KAAC,qBAAqB,KAAG,GACR,CACpB;CACF,CAAC"}
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { type SkeletonTier } from "../skeleton/stagger";
|
|
3
|
+
export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
tier?: SkeletonTier;
|
|
5
|
+
}
|
|
6
|
+
declare function Skeleton({ tier, className, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
|
|
2
7
|
export { Skeleton };
|
|
3
8
|
//# sourceMappingURL=skeleton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/components/skeleton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/components/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAsB,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAE5E,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,iBAAS,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAY7D;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from "../lib/utils";
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
import { useSkeletonContext } from "../skeleton/stagger";
|
|
4
|
+
function Skeleton({ tier, className, ...props }) {
|
|
5
|
+
const ctx = useSkeletonContext();
|
|
6
|
+
const resolvedTier = tier ?? ctx.tier;
|
|
7
|
+
return (_jsx("div", { "data-skeleton": "", "data-tier": resolvedTier, "aria-hidden": "true", className: cn("rounded-md", className), ...props }));
|
|
5
8
|
}
|
|
6
9
|
export { Skeleton };
|
|
7
10
|
//# sourceMappingURL=skeleton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../src/components/skeleton.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../src/components/skeleton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAqB,MAAM,qBAAqB,CAAC;AAM5E,SAAS,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiB;IAC5D,MAAM,GAAG,GAAG,kBAAkB,EAAE,CAAC;IACjC,MAAM,YAAY,GAAiB,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC;IACpD,OAAO,CACL,+BACgB,EAAE,eACL,YAAY,iBACX,MAAM,EAClB,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,KAClC,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
|
@@ -7,10 +7,18 @@ declare const meta: {
|
|
|
7
7
|
parameters: {
|
|
8
8
|
layout: string;
|
|
9
9
|
};
|
|
10
|
+
argTypes: {
|
|
11
|
+
tier: {
|
|
12
|
+
control: "select";
|
|
13
|
+
options: string[];
|
|
14
|
+
};
|
|
15
|
+
};
|
|
10
16
|
};
|
|
11
17
|
export default meta;
|
|
12
18
|
type Story = StoryObj<typeof meta>;
|
|
13
19
|
export declare const Default: Story;
|
|
14
|
-
export declare const
|
|
20
|
+
export declare const ThreeTiers: Story;
|
|
21
|
+
export declare const InProviderInheritsTier: Story;
|
|
22
|
+
export declare const CardComposition: Story;
|
|
15
23
|
export declare const CircleSkeleton: Story;
|
|
16
24
|
//# sourceMappingURL=skeleton.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.stories.d.ts","sourceRoot":"","sources":["../../src/components/skeleton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"skeleton.stories.d.ts","sourceRoot":"","sources":["../../src/components/skeleton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,QAAA,MAAM,IAAI;;;;;;;;;;;;;CAWuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAUpC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAU7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC"}
|
|
@@ -1,19 +1,30 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Skeleton } from "./skeleton";
|
|
3
|
+
import { SkeletonProvider } from "../skeleton/provider";
|
|
3
4
|
const meta = {
|
|
4
5
|
title: "Components/Skeleton",
|
|
5
6
|
component: Skeleton,
|
|
6
7
|
tags: ["autodocs"],
|
|
7
8
|
parameters: { layout: "centered" },
|
|
9
|
+
argTypes: {
|
|
10
|
+
tier: {
|
|
11
|
+
control: "select",
|
|
12
|
+
options: ["hero", "data", "inline"],
|
|
13
|
+
},
|
|
14
|
+
},
|
|
8
15
|
};
|
|
9
16
|
export default meta;
|
|
10
17
|
export const Default = {
|
|
11
|
-
args: {
|
|
12
|
-
|
|
13
|
-
|
|
18
|
+
args: { className: "h-4 w-48" },
|
|
19
|
+
};
|
|
20
|
+
export const ThreeTiers = {
|
|
21
|
+
render: () => (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "w-16 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Inline" }), _jsx(Skeleton, { tier: "inline", className: "h-4 w-48" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "w-16 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Data" }), _jsx(Skeleton, { tier: "data", className: "h-4 w-48" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "w-16 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Hero" }), _jsx(Skeleton, { tier: "hero", className: "h-4 w-48" })] })] })),
|
|
22
|
+
};
|
|
23
|
+
export const InProviderInheritsTier = {
|
|
24
|
+
render: () => (_jsx(SkeletonProvider, { tier: "data", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Skeleton, { className: "h-4 w-64" }), _jsx(Skeleton, { className: "h-4 w-48" }), _jsx(Skeleton, { className: "h-4 w-56" })] }) })),
|
|
14
25
|
};
|
|
15
|
-
export const
|
|
16
|
-
render: () => (
|
|
26
|
+
export const CardComposition = {
|
|
27
|
+
render: () => (_jsx("div", { className: "w-80 rounded-lg border bg-card p-8 shadow-sm", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Skeleton, { className: "h-5 w-3/4" }), _jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "h-4 w-5/6" })] }) })),
|
|
17
28
|
};
|
|
18
29
|
export const CircleSkeleton = {
|
|
19
30
|
render: () => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Skeleton, { className: "size-12 rounded-full" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Skeleton, { className: "h-4 w-32" }), _jsx(Skeleton, { className: "h-3 w-24" })] })] })),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.stories.js","sourceRoot":"","sources":["../../src/components/skeleton.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"skeleton.stories.js","sourceRoot":"","sources":["../../src/components/skeleton.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE;IAClC,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC;SACpC;KACF;CAC8B,CAAC;AAElC,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE;CAChC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,eAAK,SAAS,EAAC,qBAAqB,aAClC,eAAK,SAAS,EAAC,yBAAyB,aACtC,eAAM,SAAS,EAAC,0EAA0E,uBAAc,EACxG,KAAC,QAAQ,IAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,UAAU,GAAG,IAC3C,EACN,eAAK,SAAS,EAAC,yBAAyB,aACtC,eAAM,SAAS,EAAC,0EAA0E,qBAAY,EACtG,KAAC,QAAQ,IAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,UAAU,GAAG,IACzC,EACN,eAAK,SAAS,EAAC,yBAAyB,aACtC,eAAM,SAAS,EAAC,0EAA0E,qBAAY,EACtG,KAAC,QAAQ,IAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,UAAU,GAAG,IACzC,IACF,CACP;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAU;IAC3C,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,KAAC,gBAAgB,IAAC,IAAI,EAAC,MAAM,YAC3B,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,EACjC,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,EACjC,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,IAC7B,GACW,CACpB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,cAAK,SAAS,EAAC,8CAA8C,YAC3D,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,QAAQ,IAAC,SAAS,EAAC,WAAW,GAAG,EAClC,KAAC,QAAQ,IAAC,SAAS,EAAC,YAAY,GAAG,EACnC,KAAC,QAAQ,IAAC,SAAS,EAAC,WAAW,GAAG,IAC9B,GACF,CACP;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,QAAQ,IAAC,SAAS,EAAC,sBAAsB,GAAG,EAC7C,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,EACjC,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,IAC7B,IACF,CACP;CACF,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sortable-card-shell.test.d.ts","sourceRoot":"","sources":["../../src/components/sortable-card-shell.test.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { describe, it, expect, beforeAll } from "vitest";
|
|
3
|
+
import { render, screen } from "@testing-library/react";
|
|
4
|
+
// @dnd-kit/dom touches `ResizeObserver` at module load time; jsdom does not
|
|
5
|
+
// provide one. Install a no-op polyfill BEFORE importing @dnd-kit/react or
|
|
6
|
+
// the shell (which transitively imports @dnd-kit/dom).
|
|
7
|
+
if (typeof globalThis.ResizeObserver === "undefined") {
|
|
8
|
+
class ResizeObserverPolyfill {
|
|
9
|
+
observe() { }
|
|
10
|
+
unobserve() { }
|
|
11
|
+
disconnect() { }
|
|
12
|
+
}
|
|
13
|
+
globalThis.ResizeObserver =
|
|
14
|
+
ResizeObserverPolyfill;
|
|
15
|
+
}
|
|
16
|
+
// Imports deferred to after the polyfill so module-level access succeeds.
|
|
17
|
+
const { DragDropProvider } = await import("@dnd-kit/react");
|
|
18
|
+
const { SortableCardShell, SORTABLE_CARD_NO_DRAG_SELECTOR } = await import("./sortable-card-shell");
|
|
19
|
+
beforeAll(() => {
|
|
20
|
+
// Sanity check — confirm the polyfill stuck.
|
|
21
|
+
expect(typeof globalThis.ResizeObserver).toBe("function");
|
|
22
|
+
});
|
|
23
|
+
// ─── Test harness ───────────────────────────────────────────────────────────
|
|
24
|
+
//
|
|
25
|
+
// `SortableCardShell` uses `useSortable` / `useDraggable` from @dnd-kit/react,
|
|
26
|
+
// which require a `DragDropProvider` ancestor. All tests wrap children in the
|
|
27
|
+
// provider; we are NOT testing dnd-kit's internals (activation, pointer
|
|
28
|
+
// tracking, drop detection) — we trust those. We test the two invariants
|
|
29
|
+
// this shell owns:
|
|
30
|
+
// 1. Visual affordances (grip is aria-hidden + pointer-events-none).
|
|
31
|
+
// 2. The interactive-element guard SELECTOR used by PointerSensor's
|
|
32
|
+
// `preventActivation` hook. The selector itself is a pure string, so
|
|
33
|
+
// we can verify its semantics by querying DOM with `closest()` — this
|
|
34
|
+
// is exactly the same call the guard performs at runtime.
|
|
35
|
+
//
|
|
36
|
+
// We do NOT try to actually fire a drag and assert the sensor's internal
|
|
37
|
+
// state: that would require a much heavier jsdom + PointerEvent polyfill
|
|
38
|
+
// setup and would mostly re-test @dnd-kit itself.
|
|
39
|
+
function renderWithProvider(ui) {
|
|
40
|
+
return render(_jsx(DragDropProvider, { children: ui }));
|
|
41
|
+
}
|
|
42
|
+
describe("SortableCardShell", () => {
|
|
43
|
+
it("renders children (smoke test, sortable mode)", () => {
|
|
44
|
+
renderWithProvider(_jsx(SortableCardShell, { id: "card-1", index: 0, group: "col-a", children: _jsx("div", { "data-testid": "card-body", children: "Ch\u00E2teau Margaux" }) }));
|
|
45
|
+
expect(screen.getByTestId("card-body")).toBeInTheDocument();
|
|
46
|
+
expect(screen.getByText("Château Margaux")).toBeInTheDocument();
|
|
47
|
+
});
|
|
48
|
+
it("renders children in draggable mode", () => {
|
|
49
|
+
renderWithProvider(_jsx(SortableCardShell, { id: "card-2", mode: "draggable", children: _jsx("div", { "data-testid": "card-body", children: "P\u00E9trus 2015" }) }));
|
|
50
|
+
expect(screen.getByTestId("card-body")).toBeInTheDocument();
|
|
51
|
+
});
|
|
52
|
+
it("renders a grip affordance that is aria-hidden and pointer-events-none", () => {
|
|
53
|
+
const { container } = renderWithProvider(_jsx(SortableCardShell, { id: "card-grip", index: 0, group: "col-a", children: _jsx("div", { children: "body" }) }));
|
|
54
|
+
// The grip is an aria-hidden <span> sibling of the card body. Query it
|
|
55
|
+
// by attribute — this is the most robust selector since the grip has no
|
|
56
|
+
// accessible name by design.
|
|
57
|
+
const grip = container.querySelector('[aria-hidden="true"]');
|
|
58
|
+
expect(grip).not.toBeNull();
|
|
59
|
+
// Pointer events must be disabled so the whole card remains the drag
|
|
60
|
+
// activation surface — the grip is purely visual.
|
|
61
|
+
expect(grip?.className).toContain("pointer-events-none");
|
|
62
|
+
// lucide-react renders an inline SVG inside the grip.
|
|
63
|
+
expect(grip?.querySelector("svg")).not.toBeNull();
|
|
64
|
+
});
|
|
65
|
+
it("omits the grip when hideGrip is true", () => {
|
|
66
|
+
const { container } = renderWithProvider(_jsx(SortableCardShell, { id: "card-no-grip", index: 0, group: "col-a", hideGrip: true, children: _jsx("div", { children: "body" }) }));
|
|
67
|
+
expect(container.querySelector('[aria-hidden="true"]')).toBeNull();
|
|
68
|
+
});
|
|
69
|
+
// ─── Interactive-element guard ────────────────────────────────────────────
|
|
70
|
+
//
|
|
71
|
+
// The shell registers a PointerSensor with
|
|
72
|
+
// `preventActivation: (e) => shouldPreventDragActivation(e)`, which does
|
|
73
|
+
// `target.closest(SORTABLE_CARD_NO_DRAG_SELECTOR)`. We verify the selector
|
|
74
|
+
// matches the right elements; that is the same check the guard performs.
|
|
75
|
+
it("interactive guard: a <button> inside the card matches the no-drag selector", () => {
|
|
76
|
+
renderWithProvider(_jsx(SortableCardShell, { id: "card-btn", index: 0, group: "col-a", children: _jsx("div", { children: _jsx("button", { type: "button", "data-testid": "row-menu", children: "Menu" }) }) }));
|
|
77
|
+
const btn = screen.getByTestId("row-menu");
|
|
78
|
+
// `closest()` on the button itself should return the button — meaning
|
|
79
|
+
// a pointerdown on that target would short-circuit activation.
|
|
80
|
+
expect(btn.closest(SORTABLE_CARD_NO_DRAG_SELECTOR)).toBe(btn);
|
|
81
|
+
});
|
|
82
|
+
it("interactive guard: an element with data-no-drag matches the no-drag selector", () => {
|
|
83
|
+
renderWithProvider(_jsx(SortableCardShell, { id: "card-no-drag", index: 0, group: "col-a", children: _jsx("div", { children: _jsx("div", { "data-no-drag": true, "data-testid": "badge", children: "Badge" }) }) }));
|
|
84
|
+
const badge = screen.getByTestId("badge");
|
|
85
|
+
expect(badge.closest(SORTABLE_CARD_NO_DRAG_SELECTOR)).toBe(badge);
|
|
86
|
+
});
|
|
87
|
+
it("interactive guard: a plain <div> does NOT match the no-drag selector (drag would proceed)", () => {
|
|
88
|
+
renderWithProvider(_jsx(SortableCardShell, { id: "card-plain", index: 0, group: "col-a", children: _jsx("div", { "data-testid": "plain-body", children: "Drag me from here" }) }));
|
|
89
|
+
const plain = screen.getByTestId("plain-body");
|
|
90
|
+
// No ancestor or self matches any interactive selector — activation is
|
|
91
|
+
// allowed to proceed (drag would start).
|
|
92
|
+
expect(plain.closest(SORTABLE_CARD_NO_DRAG_SELECTOR)).toBeNull();
|
|
93
|
+
});
|
|
94
|
+
it("interactive guard: a nested element inside a <button> matches via closest()", () => {
|
|
95
|
+
// Realistic case: a button containing an icon <span> — the pointerdown
|
|
96
|
+
// target is often the inner element, and `closest()` should still find
|
|
97
|
+
// the wrapping <button> ancestor.
|
|
98
|
+
renderWithProvider(_jsx(SortableCardShell, { id: "card-nested", index: 0, group: "col-a", children: _jsx("div", { children: _jsx("button", { type: "button", children: _jsx("span", { "data-testid": "icon", children: "x" }) }) }) }));
|
|
99
|
+
const icon = screen.getByTestId("icon");
|
|
100
|
+
const match = icon.closest(SORTABLE_CARD_NO_DRAG_SELECTOR);
|
|
101
|
+
expect(match).not.toBeNull();
|
|
102
|
+
expect(match?.tagName).toBe("BUTTON");
|
|
103
|
+
});
|
|
104
|
+
it("exports a selector string that includes the common interactive tags", () => {
|
|
105
|
+
// Defensive snapshot of the guard's surface area. If this list ever
|
|
106
|
+
// shrinks, a regression would silently break click-through; this test
|
|
107
|
+
// will flag it.
|
|
108
|
+
expect(SORTABLE_CARD_NO_DRAG_SELECTOR).toContain("[data-no-drag]");
|
|
109
|
+
expect(SORTABLE_CARD_NO_DRAG_SELECTOR).toContain("button");
|
|
110
|
+
expect(SORTABLE_CARD_NO_DRAG_SELECTOR).toContain("a");
|
|
111
|
+
expect(SORTABLE_CARD_NO_DRAG_SELECTOR).toContain("input");
|
|
112
|
+
expect(SORTABLE_CARD_NO_DRAG_SELECTOR).toContain("[role='menuitem']");
|
|
113
|
+
});
|
|
114
|
+
});
|
|
115
|
+
//# sourceMappingURL=sortable-card-shell.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sortable-card-shell.test.js","sourceRoot":"","sources":["../../src/components/sortable-card-shell.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { type SkeletonTier } from "../skeleton/stagger";
|
|
2
3
|
export interface StatCardProps {
|
|
3
4
|
icon: React.ReactNode;
|
|
4
5
|
label: string;
|
|
@@ -8,5 +9,13 @@ export interface StatCardProps {
|
|
|
8
9
|
renderLink?: (href: string, children: React.ReactNode) => React.ReactNode;
|
|
9
10
|
className?: string;
|
|
10
11
|
}
|
|
11
|
-
|
|
12
|
+
declare function StatCardBase({ icon, label, value, description, href, renderLink, className, }: StatCardProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export interface StatCardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
14
|
+
tier?: SkeletonTier;
|
|
15
|
+
}
|
|
16
|
+
declare function StatCardSkeleton({ tier, style, className, ...rest }: StatCardSkeletonProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare const StatCard: typeof StatCardBase & {
|
|
18
|
+
Skeleton: typeof StatCardSkeleton;
|
|
19
|
+
};
|
|
20
|
+
export {};
|
|
12
21
|
//# sourceMappingURL=stat-card.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../src/components/stat-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,
|
|
1
|
+
{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../src/components/stat-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAuC,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAE7F,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iBAAS,YAAY,CAAC,EACpB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAU,EACV,SAAS,GACV,EAAE,aAAa,2CAiCf;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,iBAAS,gBAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,qBAAqB,2CAgCnF;AAED,eAAO,MAAM,QAAQ;;CAA8D,CAAC"}
|
|
@@ -1,10 +1,24 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from "../lib/utils";
|
|
3
|
-
|
|
3
|
+
import { Skeleton } from "./skeleton";
|
|
4
|
+
import { useCascadeIndex, useSkeletonContext } from "../skeleton/stagger";
|
|
5
|
+
function StatCardBase({ icon, label, value, description, href, renderLink, className, }) {
|
|
4
6
|
const cardContent = (_jsxs("div", { className: cn("h-full border-border/60 bg-card rounded-2xl p-5 transition-colors", href && renderLink && "hover:bg-accent/30 cursor-pointer", className), children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: label }), _jsx("p", { className: "text-3xl font-bold tracking-tight text-foreground", children: value })] }), _jsx("div", { className: "tone-icon tone-brand shrink-0 rounded-xl p-2.5", children: icon })] }), description && (_jsx("p", { className: "mt-4 text-sm/5 text-muted-foreground", children: description }))] }));
|
|
5
7
|
if (href && renderLink) {
|
|
6
8
|
return _jsx(_Fragment, { children: renderLink(href, cardContent) });
|
|
7
9
|
}
|
|
8
10
|
return cardContent;
|
|
9
11
|
}
|
|
12
|
+
function StatCardSkeleton({ tier, style, className, ...rest }) {
|
|
13
|
+
const ctx = useSkeletonContext();
|
|
14
|
+
const resolvedTier = tier ?? (ctx.hasProvider ? ctx.tier : "hero");
|
|
15
|
+
const index = useCascadeIndex();
|
|
16
|
+
const delayMs = index * ctx.stagger;
|
|
17
|
+
const mergedStyle = {
|
|
18
|
+
...(style ?? {}),
|
|
19
|
+
["--skeleton-delay"]: `${delayMs}ms`,
|
|
20
|
+
};
|
|
21
|
+
return (_jsxs("div", { "data-skeleton-card": "", "data-tier": resolvedTier, className: cn("rounded-2xl border border-border/60 bg-card p-5", className), style: mergedStyle, ...rest, children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "grid gap-2.5", children: [_jsx(Skeleton, { tier: resolvedTier, className: "h-3 w-20" }), _jsx(Skeleton, { tier: resolvedTier, className: "h-7 w-24" })] }), _jsx(Skeleton, { tier: resolvedTier, className: "size-9 rounded-xl" })] }), _jsx(Skeleton, { tier: resolvedTier, className: "mt-4 h-3 w-40" })] }));
|
|
22
|
+
}
|
|
23
|
+
export const StatCard = Object.assign(StatCardBase, { Skeleton: StatCardSkeleton });
|
|
10
24
|
//# sourceMappingURL=stat-card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat-card.js","sourceRoot":"","sources":["../../src/components/stat-card.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"stat-card.js","sourceRoot":"","sources":["../../src/components/stat-card.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAqB,MAAM,qBAAqB,CAAC;AAY7F,SAAS,YAAY,CAAC,EACpB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAU,EACV,SAAS,GACK;IACd,MAAM,WAAW,GAAG,CAClB,eACE,SAAS,EAAE,EAAE,CACX,mEAAmE,EACnE,IAAI,IAAI,UAAU,IAAI,mCAAmC,EACzD,SAAS,CACV,aAED,eAAK,SAAS,EAAC,wCAAwC,aACrD,eAAK,SAAS,EAAC,cAAc,aAC3B,YAAG,SAAS,EAAC,yEAAyE,YACnF,KAAK,GACJ,EACJ,YAAG,SAAS,EAAC,mDAAmD,YAC7D,KAAK,GACJ,IACA,EACN,cAAK,SAAS,EAAC,gDAAgD,YAC5D,IAAI,GACD,IACF,EACL,WAAW,IAAI,CACd,YAAG,SAAS,EAAC,sCAAsC,YAAE,WAAW,GAAK,CACtE,IACG,CACP,CAAC;IAEF,IAAI,IAAI,IAAI,UAAU,EAAE,CAAC;QACvB,OAAO,4BAAG,UAAU,CAAC,IAAI,EAAE,WAAW,CAAC,GAAI,CAAC;IAC9C,CAAC;IAED,OAAO,WAAW,CAAC;AACrB,CAAC;AAMD,SAAS,gBAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAyB;IAClF,MAAM,GAAG,GAAG,kBAAkB,EAAE,CAAC;IACjC,MAAM,YAAY,GAAiB,IAAI,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACjF,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,OAAO,GAAG,KAAK,GAAG,GAAG,CAAC,OAAO,CAAC;IAEpC,MAAM,WAAW,GAAwB;QACvC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC;QAChB,CAAC,kBAA4B,CAAC,EAAE,GAAG,OAAO,IAAI;KAC/C,CAAC;IAEF,OAAO,CACL,qCACqB,EAAE,eACV,YAAY,EACvB,SAAS,EAAE,EAAE,CACX,iDAAiD,EACjD,SAAS,CACV,EACD,KAAK,EAAE,WAAW,KACd,IAAI,aAER,eAAK,SAAS,EAAC,wCAAwC,aACrD,eAAK,SAAS,EAAC,cAAc,aAC3B,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAC,UAAU,GAAG,EACrD,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAC,UAAU,GAAG,IACjD,EACN,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAC,mBAAmB,GAAG,IAC1D,EACN,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAC,eAAe,GAAG,IACtD,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC,CAAC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import type { StoryObj } from "@storybook/react-vite";
|
|
2
|
-
import { StatCard } from "./stat-card";
|
|
3
2
|
declare const meta: {
|
|
4
3
|
title: string;
|
|
5
|
-
component:
|
|
4
|
+
component: (({ icon, label, value, description, href, renderLink, className, }: import("./stat-card").StatCardProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
5
|
+
Skeleton: ({ tier, style, className, ...rest }: import("./stat-card").StatCardSkeletonProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
};
|
|
6
7
|
tags: string[];
|
|
7
8
|
parameters: {
|
|
8
9
|
layout: string;
|
|
@@ -14,4 +15,7 @@ export declare const Default: Story;
|
|
|
14
15
|
export declare const WithDescription: Story;
|
|
15
16
|
export declare const Grid: Story;
|
|
16
17
|
export declare const Clickable: Story;
|
|
18
|
+
export declare const SkeletonStandalone: Story;
|
|
19
|
+
export declare const SkeletonInProvider: Story;
|
|
20
|
+
export declare const SkeletonInlineTier: Story;
|
|
17
21
|
//# sourceMappingURL=stat-card.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat-card.stories.d.ts","sourceRoot":"","sources":["../../src/components/stat-card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"stat-card.stories.d.ts","sourceRoot":"","sources":["../../src/components/stat-card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAsE5D,QAAA,MAAM,IAAI;;;;;;;;;CAKuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KA8BlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAcvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAGhC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAYhC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAGhC,CAAC"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { StatCard } from "./stat-card";
|
|
3
|
+
import { SkeletonProvider } from "../skeleton/provider";
|
|
4
|
+
const WineIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "size-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M8 22h8M12 11v11M6 2h12l-2 7a4 4 0 0 1-8 0L6 2z" }) }));
|
|
5
|
+
const OffersIcon = () => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "size-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" }), _jsx("path", { d: "m3.3 7 8.7 5 8.7-5M12 22V12" })] }));
|
|
6
|
+
const MatchIcon = () => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "size-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }), _jsx("polyline", { points: "22 4 12 14.01 9 11.01" })] }));
|
|
7
|
+
const TenderIcon = () => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "size-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), _jsx("polyline", { points: "14 2 14 8 20 8" }), _jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }), _jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }), _jsx("polyline", { points: "10 9 9 9 8 9" })] }));
|
|
3
8
|
const meta = {
|
|
4
9
|
title: "Components/StatCard",
|
|
5
10
|
component: StatCard,
|
|
@@ -7,10 +12,6 @@ const meta = {
|
|
|
7
12
|
parameters: { layout: "padded" },
|
|
8
13
|
};
|
|
9
14
|
export default meta;
|
|
10
|
-
const WineIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "size-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M8 22h8M12 11v11M6 2h12l-2 7a4 4 0 0 1-8 0L6 2z" }) }));
|
|
11
|
-
const OffersIcon = () => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "size-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" }), _jsx("path", { d: "m3.3 7 8.7 5 8.7-5M12 22V12" })] }));
|
|
12
|
-
const MatchIcon = () => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "size-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }), _jsx("polyline", { points: "22 4 12 14.01 9 11.01" })] }));
|
|
13
|
-
const TenderIcon = () => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "size-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), _jsx("polyline", { points: "14 2 14 8 20 8" }), _jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }), _jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }), _jsx("polyline", { points: "10 9 9 9 8 9" })] }));
|
|
14
15
|
export const Default = {
|
|
15
16
|
args: {
|
|
16
17
|
icon: _jsx(WineIcon, {}),
|
|
@@ -43,4 +44,16 @@ export const Clickable = {
|
|
|
43
44
|
},
|
|
44
45
|
decorators: [(Story) => _jsx("div", { className: "w-64", children: _jsx(Story, {}) })],
|
|
45
46
|
};
|
|
47
|
+
export const SkeletonStandalone = {
|
|
48
|
+
args: { icon: null, label: "", value: "" },
|
|
49
|
+
render: () => _jsx(StatCard.Skeleton, {}),
|
|
50
|
+
};
|
|
51
|
+
export const SkeletonInProvider = {
|
|
52
|
+
args: { icon: null, label: "", value: "" },
|
|
53
|
+
render: () => (_jsx(SkeletonProvider, { tier: "hero", stagger: 120, children: _jsxs("div", { className: "grid grid-cols-4 gap-4", children: [_jsx(StatCard.Skeleton, {}), _jsx(StatCard.Skeleton, {}), _jsx(StatCard.Skeleton, {}), _jsx(StatCard.Skeleton, {})] }) })),
|
|
54
|
+
};
|
|
55
|
+
export const SkeletonInlineTier = {
|
|
56
|
+
args: { icon: null, label: "", value: "" },
|
|
57
|
+
render: () => _jsx(StatCard.Skeleton, { tier: "inline" }),
|
|
58
|
+
};
|
|
46
59
|
//# sourceMappingURL=stat-card.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat-card.stories.js","sourceRoot":"","sources":["../../src/components/stat-card.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"stat-card.stories.js","sourceRoot":"","sources":["../../src/components/stat-card.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,CACrB,cACE,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAC,QAAQ,EAClB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAE,GAAG,EAChB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,YAEtB,eAAM,CAAC,EAAC,iDAAiD,GAAG,GACxD,CACP,CAAC;AAEF,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CACvB,eACE,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAC,QAAQ,EAClB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAE,GAAG,EAChB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,aAEtB,eAAM,CAAC,EAAC,wHAAwH,GAAG,EACnI,eAAM,CAAC,EAAC,6BAA6B,GAAG,IACpC,CACP,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,eACE,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAC,QAAQ,EAClB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAE,GAAG,EAChB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,aAEtB,eAAM,CAAC,EAAC,oCAAoC,GAAG,EAC/C,mBAAU,MAAM,EAAC,uBAAuB,GAAG,IACvC,CACP,CAAC;AAEF,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CACvB,eACE,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAC,QAAQ,EAClB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAE,GAAG,EAChB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,aAEtB,eAAM,CAAC,EAAC,4DAA4D,GAAG,EACvE,mBAAU,MAAM,EAAC,gBAAgB,GAAG,EACpC,eAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,GAAG,EACvC,eAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,GAAG,EACvC,mBAAU,MAAM,EAAC,cAAc,GAAG,IAC9B,CACP,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE;CACD,CAAC;AAElC,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE,KAAC,QAAQ,KAAG;QAClB,KAAK,EAAE,iBAAiB;QACxB,KAAK,EAAE,GAAG;KACX;IACD,UAAU,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,cAAK,SAAS,EAAC,MAAM,YAAC,KAAC,KAAK,KAAG,GAAM,CAAC;CAC/D,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,IAAI,EAAE;QACJ,IAAI,EAAE,KAAC,SAAS,KAAG;QACnB,KAAK,EAAE,YAAY;QACnB,KAAK,EAAE,EAAE;QACT,WAAW,EAAE,mCAAmC;KACjD;IACD,UAAU,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,cAAK,SAAS,EAAC,MAAM,YAAC,KAAC,KAAK,KAAG,GAAM,CAAC;CAC/D,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,IAAI,EAAE,EAAE,IAAI,EAAE,KAAC,QAAQ,KAAG,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,EAAE;IAC5D,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,eAAK,SAAS,EAAC,uCAAuC,aACpD,KAAC,QAAQ,IACP,IAAI,EAAE,KAAC,QAAQ,KAAG,EAClB,KAAK,EAAC,WAAW,EACjB,KAAK,EAAE,GAAG,EACV,WAAW,EAAC,qBAAqB,GACjC,EACF,KAAC,QAAQ,IACP,IAAI,EAAE,KAAC,UAAU,KAAG,EACpB,KAAK,EAAC,iBAAiB,EACvB,KAAK,EAAE,EAAE,EACT,WAAW,EAAC,0BAA0B,GACtC,EACF,KAAC,QAAQ,IACP,IAAI,EAAE,KAAC,SAAS,KAAG,EACnB,KAAK,EAAC,YAAY,EAClB,KAAK,EAAE,EAAE,EACT,WAAW,EAAC,kBAAkB,GAC9B,EACF,KAAC,QAAQ,IACP,IAAI,EAAE,KAAC,UAAU,KAAG,EACpB,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE,CAAC,EACR,WAAW,EAAC,wBAAwB,GACpC,IACE,CACP;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,IAAI,EAAE,KAAC,UAAU,KAAG;QACpB,KAAK,EAAE,iBAAiB;QACxB,KAAK,EAAE,EAAE;QACT,WAAW,EAAE,0BAA0B;QACvC,IAAI,EAAE,SAAS;QACf,UAAU,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,CAC9B,YAAG,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,YAC/D,QAAQ,GACP,CACL;KACF;IACD,UAAU,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,cAAK,SAAS,EAAC,MAAM,YAAC,KAAC,KAAK,KAAG,GAAM,CAAC;CAC/D,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAU;IACvC,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1C,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,QAAQ,CAAC,QAAQ,KAAG;CACpC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAU;IACvC,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1C,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,KAAC,gBAAgB,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,YACxC,eAAK,SAAS,EAAC,wBAAwB,aACrC,KAAC,QAAQ,CAAC,QAAQ,KAAG,EACrB,KAAC,QAAQ,CAAC,QAAQ,KAAG,EACrB,KAAC,QAAQ,CAAC,QAAQ,KAAG,EACrB,KAAC,QAAQ,CAAC,QAAQ,KAAG,IACjB,GACW,CACpB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAU;IACvC,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1C,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,QAAQ,CAAC,QAAQ,IAAC,IAAI,EAAC,QAAQ,GAAG;CAClD,CAAC"}
|
|
@@ -68,7 +68,7 @@ const baseProps = {
|
|
|
68
68
|
};
|
|
69
69
|
describe("VariantPickerDialog", () => {
|
|
70
70
|
it("renders nothing when open=false", () => {
|
|
71
|
-
|
|
71
|
+
render(_jsx(VariantPickerDialog, { ...baseProps, open: false }));
|
|
72
72
|
// Radix Dialog.Root still renders the root element but portal content is absent
|
|
73
73
|
expect(screen.queryByText(/Solera Brandy/)).not.toBeInTheDocument();
|
|
74
74
|
expect(screen.queryByText(/Pick a product/i)).not.toBeInTheDocument();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"variant-picker-dialog.test.js","sourceRoot":"","sources":["../../src/components/variant-picker-dialog.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAA6B,MAAM,yBAAyB,CAAC;AAEzF,MAAM,QAAQ,GAA2B;IACvC;QACE,EAAE,EAAE,IAAI;QACR,UAAU,EAAE,IAAI;QAChB,YAAY,EAAE,eAAe;QAC7B,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,KAAK;QACX,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;QAC7D,eAAe,EAAE,OAAO;QACxB,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,cAAc;QACzB,eAAe,EAAE,OAAO;QACxB,QAAQ,EAAE,SAAS;QACnB,OAAO,EAAE,QAAQ;KAClB;IACD;QACE,EAAE,EAAE,IAAI;QACR,UAAU,EAAE,IAAI;QAChB,YAAY,EAAE,aAAa;QAC3B,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC;QACpE,eAAe,EAAE,UAAU;QAC3B,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,cAAc;QACzB,eAAe,EAAE,OAAO;QACxB,QAAQ,EAAE,SAAS;QACnB,OAAO,EAAE,aAAa;KACvB;CACF,CAAC;AAEF,MAAM,aAAa,GAA2B;IAC5C;QACE,EAAE,EAAE,IAAI;QACR,UAAU,EAAE,IAAI;QAChB,YAAY,EAAE,eAAe;QAC7B,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;QACnE,eAAe,EAAE,SAAS;QAC1B,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,cAAc;QACzB,eAAe,EAAE,OAAO;QACxB,QAAQ,EAAE,MAAM;QAChB,OAAO,EAAE,YAAY;KACtB;CACF,CAAC;AAEF,MAAM,SAAS,GAAG;IAChB,IAAI,EAAE,IAAI;IACV,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE;IAChB,QAAQ,EAAE,EAAE,CAAC,EAAE,EAAE;IACjB,MAAM,EAAE,EAAE,CAAC,EAAE,EAAE;IACf,WAAW,EAAE,EAAE;IACf,cAAc,EAAE,EAAE,CAAC,EAAE,EAAE;IACvB,kBAAkB,EAAE;QAClB,IAAI,EAAE,kCAAkC;QACxC,SAAS,EAAE,eAAe;QAC1B,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;KACnD;IACD,QAAQ;IACR,aAAa;CACd,CAAC;AAEF,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,iCAAiC,EAAE,GAAG,EAAE;QACzC,MAAM,
|
|
1
|
+
{"version":3,"file":"variant-picker-dialog.test.js","sourceRoot":"","sources":["../../src/components/variant-picker-dialog.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAA6B,MAAM,yBAAyB,CAAC;AAEzF,MAAM,QAAQ,GAA2B;IACvC;QACE,EAAE,EAAE,IAAI;QACR,UAAU,EAAE,IAAI;QAChB,YAAY,EAAE,eAAe;QAC7B,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,KAAK;QACX,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;QAC7D,eAAe,EAAE,OAAO;QACxB,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,cAAc;QACzB,eAAe,EAAE,OAAO;QACxB,QAAQ,EAAE,SAAS;QACnB,OAAO,EAAE,QAAQ;KAClB;IACD;QACE,EAAE,EAAE,IAAI;QACR,UAAU,EAAE,IAAI;QAChB,YAAY,EAAE,aAAa;QAC3B,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC;QACpE,eAAe,EAAE,UAAU;QAC3B,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,cAAc;QACzB,eAAe,EAAE,OAAO;QACxB,QAAQ,EAAE,SAAS;QACnB,OAAO,EAAE,aAAa;KACvB;CACF,CAAC;AAEF,MAAM,aAAa,GAA2B;IAC5C;QACE,EAAE,EAAE,IAAI;QACR,UAAU,EAAE,IAAI;QAChB,YAAY,EAAE,eAAe;QAC7B,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;QACnE,eAAe,EAAE,SAAS;QAC1B,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,cAAc;QACzB,eAAe,EAAE,OAAO;QACxB,QAAQ,EAAE,MAAM;QAChB,OAAO,EAAE,YAAY;KACtB;CACF,CAAC;AAEF,MAAM,SAAS,GAAG;IAChB,IAAI,EAAE,IAAI;IACV,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE;IAChB,QAAQ,EAAE,EAAE,CAAC,EAAE,EAAE;IACjB,MAAM,EAAE,EAAE,CAAC,EAAE,EAAE;IACf,WAAW,EAAE,EAAE;IACf,cAAc,EAAE,EAAE,CAAC,EAAE,EAAE;IACvB,kBAAkB,EAAE;QAClB,IAAI,EAAE,kCAAkC;QACxC,SAAS,EAAE,eAAe;QAC1B,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;KACnD;IACD,QAAQ;IACR,aAAa;CACd,CAAC;AAEF,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,iCAAiC,EAAE,GAAG,EAAE;QACzC,MAAM,CAAC,KAAC,mBAAmB,OAAK,SAAS,EAAE,IAAI,EAAE,KAAK,GAAI,CAAC,CAAC;QAC5D,gFAAgF;QAChF,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;QACpE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;IACxE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uDAAuD,EAAE,GAAG,EAAE;QAC/D,MAAM,CAAC,KAAC,mBAAmB,OAAK,SAAS,GAAI,CAAC,CAAC;QAC/C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAC/D,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAC9D,6EAA6E;QAC7E,6DAA6D;QAC7D,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACpE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sDAAsD,EAAE,GAAG,EAAE;QAC9D,MAAM,CAAC,KAAC,mBAAmB,OAAK,SAAS,GAAI,CAAC,CAAC;QAC/C,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC;QAC5E,MAAM,CAAC,SAAS,CAAC,CAAC,YAAY,EAAE,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6GAA6G,EAAE,GAAG,EAAE;QACrH,MAAM,QAAQ,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;QACzB,MAAM,OAAO,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;QACxB,MAAM,CAAC,KAAC,mBAAmB,OAAK,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC,CAAC;QACrF,0EAA0E;QAC1E,MAAM,IAAI,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAC;QACvE,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QACzB,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC;QAC5E,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;QACrC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAC3B,MAAM,CAAC,QAAQ,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;QAC5C,MAAM,CAAC,OAAO,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,GAAG,EAAE;QAC3C,MAAM,MAAM,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;QACvB,MAAM,CAAC,KAAC,mBAAmB,OAAK,SAAS,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC,CAAC;QAC/D,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;QAC/D,MAAM,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACpC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8FAA8F,EAAE,GAAG,EAAE;QACtG,MAAM,WAAW,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;QAC5B,MAAM,CACJ,KAAC,mBAAmB,OACd,SAAS,EACb,QAAQ,EAAE,EAAE,EACZ,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,EAAE,aAAa,EAAE,kBAAkB,EAAE,WAAW,EAAE,6BAA6B,EAAE,GAChG,CACH,CAAC;QACF,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,yCAAyC,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACxF,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,sBAAsB,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACzF,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,sBAAsB,EAAE,CAAC,CAAC,CAAC;QAC9E,MAAM,CAAC,WAAW,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACzC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gEAAgE,EAAE,GAAG,EAAE;QACxE,MAAM,OAAO,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;QACxB,MAAM,MAAM,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;QACvB,MAAM,CACJ,KAAC,mBAAmB,OACd,SAAS,EACb,QAAQ,EAAE,EAAE,EACZ,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,EAAE,CAAC,EAAE,EAAE,EACpB,aAAa,EAAE,EAAE,aAAa,EAAE,kBAAkB,EAAE,WAAW,EAAE,6BAA6B,EAAE,GAChG,CACH,CAAC;QACF,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC;QACnE,MAAM,CAAC,OAAO,CAAC,CAAC,gBAAgB,EAAE,CAAC;QACnC,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,GAAG,EAAE;QACpD,MAAM,CAAC,KAAC,mBAAmB,OAAK,SAAS,GAAI,CAAC,CAAC;QAC/C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,2BAA2B,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC5E,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sDAAsD,EAAE,GAAG,EAAE;QAC9D,MAAM,cAAc,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;QAC/B,MAAM,CAAC,KAAC,mBAAmB,OAAK,SAAS,EAAE,cAAc,EAAE,cAAc,GAAI,CAAC,CAAC;QAC/E,MAAM,KAAK,GAAG,MAAM,CAAC,oBAAoB,CAAC,wBAAwB,CAAC,CAAC;QACpE,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;QAC1D,MAAM,CAAC,cAAc,CAAC,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC;IACzD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,GAAG,EAAE;QACnD,MAAM,CACJ,KAAC,mBAAmB,OACd,SAAS,EACb,IAAI,EAAE,EAAE,YAAY,EAAE,gBAAgB,EAAE,GACxC,CACH,CAAC;QACF,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACtF,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"globe-loading-skeleton.test.d.ts","sourceRoot":"","sources":["../../../src/globe/__tests__/globe-loading-skeleton.test.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { describe, it, expect } from "vitest";
|
|
3
|
+
import { render } from "@testing-library/react";
|
|
4
|
+
import { GlobeLoadingSkeleton } from "../globe-loading-skeleton";
|
|
5
|
+
import { SkeletonProvider } from "../../skeleton/provider";
|
|
6
|
+
describe("<GlobeLoadingSkeleton>", () => {
|
|
7
|
+
it("emits data-skeleton-card and data-tier='hero' by default", () => {
|
|
8
|
+
const { container } = render(_jsx(GlobeLoadingSkeleton, {}));
|
|
9
|
+
const root = container.firstElementChild;
|
|
10
|
+
expect(root).toHaveAttribute("data-skeleton-card");
|
|
11
|
+
expect(root).toHaveAttribute("data-tier", "hero");
|
|
12
|
+
});
|
|
13
|
+
it("inherits tier from provider", () => {
|
|
14
|
+
const { container } = render(_jsx(SkeletonProvider, { tier: "data", children: _jsx(GlobeLoadingSkeleton, {}) }));
|
|
15
|
+
const region = container.querySelector("[data-skeleton-card]");
|
|
16
|
+
expect(region).toHaveAttribute("data-tier", "data");
|
|
17
|
+
});
|
|
18
|
+
it("suppresses its own role=status inside a provider (provider owns the region)", () => {
|
|
19
|
+
const { container } = render(_jsx(SkeletonProvider, { children: _jsx(GlobeLoadingSkeleton, {}) }));
|
|
20
|
+
const card = container.querySelector("[data-skeleton-card]");
|
|
21
|
+
expect(card).not.toHaveAttribute("role");
|
|
22
|
+
});
|
|
23
|
+
it("provides its own role=status outside a provider", () => {
|
|
24
|
+
const { container } = render(_jsx(GlobeLoadingSkeleton, {}));
|
|
25
|
+
const card = container.firstElementChild;
|
|
26
|
+
expect(card).toHaveAttribute("role", "status");
|
|
27
|
+
});
|
|
28
|
+
});
|
|
29
|
+
//# sourceMappingURL=globe-loading-skeleton.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"globe-loading-skeleton.test.js","sourceRoot":"","sources":["../../../src/globe/__tests__/globe-loading-skeleton.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,0DAA0D,EAAE,GAAG,EAAE;QAClE,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,oBAAoB,KAAG,CAAC,CAAC;QACvD,MAAM,IAAI,GAAG,SAAS,CAAC,iBAAgC,CAAC;QACxD,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,oBAAoB,CAAC,CAAC;QACnD,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACrC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,gBAAgB,IAAC,IAAI,EAAC,MAAM,YAC3B,KAAC,oBAAoB,KAAG,GACP,CACpB,CAAC;QACF,MAAM,MAAM,GAAG,SAAS,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAC/D,MAAM,CAAC,MAAM,CAAC,CAAC,eAAe,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6EAA6E,EAAE,GAAG,EAAE;QACrF,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,gBAAgB,cACf,KAAC,oBAAoB,KAAG,GACP,CACpB,CAAC;QACF,MAAM,IAAI,GAAG,SAAS,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAC7D,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,GAAG,EAAE;QACzD,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,oBAAoB,KAAG,CAAC,CAAC;QACvD,MAAM,IAAI,GAAG,SAAS,CAAC,iBAAgC,CAAC;QACxD,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -1,10 +1,18 @@
|
|
|
1
|
+
import { type SkeletonTier } from "../skeleton/stagger";
|
|
2
|
+
interface GlobeLoadingSkeletonProps {
|
|
3
|
+
height?: string;
|
|
4
|
+
label?: string;
|
|
5
|
+
className?: string;
|
|
6
|
+
tier?: SkeletonTier;
|
|
7
|
+
}
|
|
1
8
|
/**
|
|
2
9
|
* Animated loading skeleton shown while globe data is being fetched.
|
|
3
10
|
* Renders a pulsing globe silhouette with arc-trace lines and a status label.
|
|
11
|
+
*
|
|
12
|
+
* Integrates with SkeletonContext: inherits the ambient tier (default 'hero'
|
|
13
|
+
* when outside a provider) and emits the skeleton data-attrs so reduced-motion
|
|
14
|
+
* CSS and theming apply consistently with other primitives.
|
|
4
15
|
*/
|
|
5
|
-
export declare function GlobeLoadingSkeleton({ height, label, className, }:
|
|
6
|
-
|
|
7
|
-
label?: string;
|
|
8
|
-
className?: string;
|
|
9
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export declare function GlobeLoadingSkeleton({ height, label, className, tier, }: GlobeLoadingSkeletonProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export {};
|
|
10
18
|
//# sourceMappingURL=globe-loading-skeleton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"globe-loading-skeleton.d.ts","sourceRoot":"","sources":["../../src/globe/globe-loading-skeleton.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"globe-loading-skeleton.d.ts","sourceRoot":"","sources":["../../src/globe/globe-loading-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAE5E,UAAU,yBAAyB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,MAAoC,EACpC,KAA+B,EAC/B,SAAc,EACd,IAAI,GACL,EAAE,yBAAyB,2CAmE3B"}
|
|
@@ -1,10 +1,17 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useSkeletonContext } from "../skeleton/stagger";
|
|
2
3
|
/**
|
|
3
4
|
* Animated loading skeleton shown while globe data is being fetched.
|
|
4
5
|
* Renders a pulsing globe silhouette with arc-trace lines and a status label.
|
|
6
|
+
*
|
|
7
|
+
* Integrates with SkeletonContext: inherits the ambient tier (default 'hero'
|
|
8
|
+
* when outside a provider) and emits the skeleton data-attrs so reduced-motion
|
|
9
|
+
* CSS and theming apply consistently with other primitives.
|
|
5
10
|
*/
|
|
6
|
-
export function GlobeLoadingSkeleton({ height = "clamp(320px, 40vw, 450px)", label = "Mapping global flows…", className = "", }) {
|
|
7
|
-
|
|
11
|
+
export function GlobeLoadingSkeleton({ height = "clamp(320px, 40vw, 450px)", label = "Mapping global flows…", className = "", tier, }) {
|
|
12
|
+
const ctx = useSkeletonContext();
|
|
13
|
+
const resolvedTier = tier ?? (ctx.hasProvider ? ctx.tier : "hero");
|
|
14
|
+
return (_jsxs("div", { "data-skeleton-card": "", "data-tier": resolvedTier, className: `relative flex flex-col items-center justify-center overflow-hidden rounded-xl bg-primary/5 dark:bg-white/[0.03] ${className}`, style: { height }, role: ctx.hasProvider ? undefined : "status", "aria-live": ctx.hasProvider ? undefined : "polite", "aria-label": label, "aria-busy": "true", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute inset-0 rounded-full animate-ping bg-primary/10 dark:bg-white/5 scale-110" }), _jsxs("div", { className: "relative size-36 rounded-full border-2 border-primary/20 dark:border-white/10 bg-primary/5 dark:bg-white/5 animate-pulse", children: [_jsx("div", { className: "absolute inset-x-0 top-[30%] h-px bg-primary/15 dark:bg-white/10" }), _jsx("div", { className: "absolute inset-x-0 top-[50%] h-px bg-primary/20 dark:bg-white/15" }), _jsx("div", { className: "absolute inset-x-0 top-[70%] h-px bg-primary/15 dark:bg-white/10" }), _jsx("div", { className: "absolute inset-y-0 left-[50%] w-px -translate-x-1/2 bg-primary/15 dark:bg-white/10" }), _jsx("div", { className: "absolute inset-y-0 bg-primary/10 dark:bg-white/8", style: {
|
|
8
15
|
left: "25%",
|
|
9
16
|
right: "25%",
|
|
10
17
|
borderLeft: "1px solid",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"globe-loading-skeleton.js","sourceRoot":"","sources":["../../src/globe/globe-loading-skeleton.tsx"],"names":[],"mappings":";AAAA
|
|
1
|
+
{"version":3,"file":"globe-loading-skeleton.js","sourceRoot":"","sources":["../../src/globe/globe-loading-skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAqB,MAAM,qBAAqB,CAAC;AAS5E;;;;;;;GAOG;AACH,MAAM,UAAU,oBAAoB,CAAC,EACnC,MAAM,GAAG,2BAA2B,EACpC,KAAK,GAAG,uBAAuB,EAC/B,SAAS,GAAG,EAAE,EACd,IAAI,GACsB;IAC1B,MAAM,GAAG,GAAG,kBAAkB,EAAE,CAAC;IACjC,MAAM,YAAY,GAAiB,IAAI,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAEjF,OAAO,CACL,qCACqB,EAAE,eACV,YAAY,EACvB,SAAS,EAAE,mHAAmH,SAAS,EAAE,EACzI,KAAK,EAAE,EAAE,MAAM,EAAE,EACjB,IAAI,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,eACjC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,gBACrC,KAAK,eACP,MAAM,aAGhB,eAAK,SAAS,EAAC,UAAU,aAEvB,cAAK,SAAS,EAAC,oFAAoF,GAAG,EAEtG,eAAK,SAAS,EAAC,0HAA0H,aAEvI,cAAK,SAAS,EAAC,kEAAkE,GAAG,EACpF,cAAK,SAAS,EAAC,kEAAkE,GAAG,EACpF,cAAK,SAAS,EAAC,kEAAkE,GAAG,EAEpF,cAAK,SAAS,EAAC,oFAAoF,GAAG,EAEtG,cACE,SAAS,EAAC,kDAAkD,EAC5D,KAAK,EAAE;oCACL,IAAI,EAAE,KAAK;oCACX,KAAK,EAAE,KAAK;oCACZ,UAAU,EAAE,WAAW;oCACvB,WAAW,EAAE,WAAW;oCACxB,WAAW,EAAE,mDAAmD;oCAChE,YAAY,EAAE,KAAK;iCACpB,GACD,IACE,IACF,EAGN,eACE,SAAS,EAAC,uCAAuC,EACjD,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,iBACtB,MAAM,aAElB,KAAC,QAAQ,IAAC,CAAC,EAAC,2BAA2B,EAAC,KAAK,EAAC,IAAI,GAAG,EACrD,KAAC,QAAQ,IAAC,CAAC,EAAC,4BAA4B,EAAC,KAAK,EAAC,MAAM,GAAG,EACxD,KAAC,QAAQ,IAAC,CAAC,EAAC,6BAA6B,EAAC,KAAK,EAAC,MAAM,GAAG,EACzD,KAAC,QAAQ,IAAC,CAAC,EAAC,2BAA2B,EAAC,KAAK,EAAC,MAAM,GAAG,IACnD,EAGN,eAAK,SAAS,EAAC,8BAA8B,aAC3C,eAAM,SAAS,EAAC,wGAAwG,GAAG,EAC3H,eAAM,SAAS,EAAC,0GAA0G,GAAG,EAC7H,eAAM,SAAS,EAAC,0GAA0G,GAAG,EAC7H,eAAM,SAAS,EAAC,iEAAiE,YAC9E,KAAK,GACD,IACH,IACF,CACP,CAAC;AACJ,CAAC;AAED,SAAS,QAAQ,CAAC,EAAE,CAAC,EAAE,KAAK,EAAgC;IAC1D,OAAO,CACL,eACE,CAAC,EAAE,CAAC,EACJ,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,eAAe,EAAC,KAAK,EACrB,SAAS,EAAC,8BAA8B,EACxC,KAAK,EAAE;YACL,SAAS,EAAE,+BAA+B;YAC1C,cAAc,EAAE,KAAK;YACrB,OAAO,EAAE,GAAG;SACb,GACD,CACH,CAAC;AACJ,CAAC"}
|