erp-pro-ui 0.1.3 → 0.1.4
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/animations.css +40 -0
- package/dist/chunks/skeleton-BNea1Rcp.cjs +422 -0
- package/dist/chunks/skeleton-BNea1Rcp.cjs.map +1 -0
- package/dist/chunks/skeleton-CtLumdRw.mjs +368 -0
- package/dist/chunks/skeleton-CtLumdRw.mjs.map +1 -0
- package/dist/components/data-display/skeleton/Skeleton.d.ts +32 -5
- package/dist/components/data-display/skeleton/Skeleton.d.ts.map +1 -1
- package/dist/components/data-display/skeleton/index.d.ts +2 -2
- package/dist/components/data-display/skeleton/index.d.ts.map +1 -1
- package/dist/docs.cjs +2 -2
- package/dist/docs.cjs.map +1 -1
- package/dist/docs.mjs +2 -2
- package/dist/docs.mjs.map +1 -1
- package/dist/index.cjs +9 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/skeleton.cjs +9 -1
- package/dist/skeleton.mjs +2 -2
- package/package.json +6 -6
- package/dist/chunks/skeleton-BhYWOp0Q.mjs +0 -215
- package/dist/chunks/skeleton-BhYWOp0Q.mjs.map +0 -1
- package/dist/chunks/skeleton-DTXpHYYB.cjs +0 -221
- package/dist/chunks/skeleton-DTXpHYYB.cjs.map +0 -1
|
@@ -1,215 +0,0 @@
|
|
|
1
|
-
import { forwardRef } from "react";
|
|
2
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
//#region src/components/data-display/skeleton/Skeleton.tsx
|
|
4
|
-
var animationStyles = {
|
|
5
|
-
pulse: "animate-pulse",
|
|
6
|
-
wave: "animate-shimmer bg-gradient-to-r from-neutral-200 via-neutral-100 to-neutral-200 dark:from-neutral-700 dark:via-neutral-600 dark:to-neutral-700 bg-[length:200%_100%]",
|
|
7
|
-
none: ""
|
|
8
|
-
};
|
|
9
|
-
var variantStyles = {
|
|
10
|
-
text: "rounded",
|
|
11
|
-
circular: "rounded-full",
|
|
12
|
-
rectangular: "rounded-none",
|
|
13
|
-
rounded: "rounded-lg"
|
|
14
|
-
};
|
|
15
|
-
var Skeleton = forwardRef(({ variant = "text", animation = "pulse", width, height, borderRadius, className = "", lines = 1, lineGap = 8, lastLineWidth = "80%" }, ref) => {
|
|
16
|
-
const baseStyles = `
|
|
17
|
-
bg-neutral-200 dark:bg-neutral-700
|
|
18
|
-
${animation !== "wave" ? animationStyles[animation] : ""}
|
|
19
|
-
${animation === "wave" ? animationStyles.wave : ""}
|
|
20
|
-
${variantStyles[variant]}
|
|
21
|
-
`;
|
|
22
|
-
const getSize = () => {
|
|
23
|
-
const style = {};
|
|
24
|
-
if (width) style.width = typeof width === "number" ? `${width}px` : width;
|
|
25
|
-
else if (variant === "text") style.width = "100%";
|
|
26
|
-
if (height) style.height = typeof height === "number" ? `${height}px` : height;
|
|
27
|
-
else if (variant === "text") style.height = "1em";
|
|
28
|
-
else if (variant === "circular") {
|
|
29
|
-
style.width = style.width || "40px";
|
|
30
|
-
style.height = style.width;
|
|
31
|
-
}
|
|
32
|
-
if (borderRadius) style.borderRadius = typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
|
|
33
|
-
return style;
|
|
34
|
-
};
|
|
35
|
-
if (variant === "text" && lines > 1) return /* @__PURE__ */ jsx("div", {
|
|
36
|
-
ref,
|
|
37
|
-
className: `flex flex-col ${className}`,
|
|
38
|
-
style: { gap: typeof lineGap === "number" ? `${lineGap}px` : lineGap },
|
|
39
|
-
children: Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ jsx("div", {
|
|
40
|
-
className: baseStyles,
|
|
41
|
-
style: {
|
|
42
|
-
...getSize(),
|
|
43
|
-
width: index === lines - 1 ? lastLineWidth : width || "100%"
|
|
44
|
-
}
|
|
45
|
-
}, index))
|
|
46
|
-
});
|
|
47
|
-
return /* @__PURE__ */ jsx("div", {
|
|
48
|
-
ref,
|
|
49
|
-
className: `${baseStyles} ${className}`,
|
|
50
|
-
style: getSize()
|
|
51
|
-
});
|
|
52
|
-
});
|
|
53
|
-
Skeleton.displayName = "Skeleton";
|
|
54
|
-
var SkeletonText = forwardRef(({ lines = 3, ...props }, ref) => {
|
|
55
|
-
return /* @__PURE__ */ jsx(Skeleton, {
|
|
56
|
-
ref,
|
|
57
|
-
variant: "text",
|
|
58
|
-
lines,
|
|
59
|
-
...props
|
|
60
|
-
});
|
|
61
|
-
});
|
|
62
|
-
SkeletonText.displayName = "SkeletonText";
|
|
63
|
-
var SkeletonAvatar = forwardRef(({ size = 40, animation = "pulse", className = "", ...props }, ref) => {
|
|
64
|
-
const sizeValue = typeof size === "number" ? `${size}px` : size;
|
|
65
|
-
return /* @__PURE__ */ jsx(Skeleton, {
|
|
66
|
-
ref,
|
|
67
|
-
variant: "circular",
|
|
68
|
-
width: sizeValue,
|
|
69
|
-
height: sizeValue,
|
|
70
|
-
animation,
|
|
71
|
-
className,
|
|
72
|
-
...props
|
|
73
|
-
});
|
|
74
|
-
});
|
|
75
|
-
SkeletonAvatar.displayName = "SkeletonAvatar";
|
|
76
|
-
var SkeletonButton = forwardRef(({ size = "md", animation = "pulse", className = "", ...props }, ref) => {
|
|
77
|
-
const sizeStyles = {
|
|
78
|
-
sm: {
|
|
79
|
-
width: 80,
|
|
80
|
-
height: 32
|
|
81
|
-
},
|
|
82
|
-
md: {
|
|
83
|
-
width: 100,
|
|
84
|
-
height: 40
|
|
85
|
-
},
|
|
86
|
-
lg: {
|
|
87
|
-
width: 120,
|
|
88
|
-
height: 48
|
|
89
|
-
}
|
|
90
|
-
};
|
|
91
|
-
return /* @__PURE__ */ jsx(Skeleton, {
|
|
92
|
-
ref,
|
|
93
|
-
variant: "rounded",
|
|
94
|
-
width: sizeStyles[size].width,
|
|
95
|
-
height: sizeStyles[size].height,
|
|
96
|
-
animation,
|
|
97
|
-
className,
|
|
98
|
-
...props
|
|
99
|
-
});
|
|
100
|
-
});
|
|
101
|
-
SkeletonButton.displayName = "SkeletonButton";
|
|
102
|
-
var SkeletonImage = forwardRef(({ width = "100%", height = 200, animation = "pulse", className = "", ...props }, ref) => {
|
|
103
|
-
return /* @__PURE__ */ jsx(Skeleton, {
|
|
104
|
-
ref,
|
|
105
|
-
variant: "rounded",
|
|
106
|
-
width,
|
|
107
|
-
height,
|
|
108
|
-
animation,
|
|
109
|
-
className,
|
|
110
|
-
...props
|
|
111
|
-
});
|
|
112
|
-
});
|
|
113
|
-
SkeletonImage.displayName = "SkeletonImage";
|
|
114
|
-
var SkeletonCard = forwardRef(({ showImage = true, imageHeight = 200, lines = 3, showAvatar = false, showActions = false, className = "", animation = "pulse" }, ref) => {
|
|
115
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
116
|
-
ref,
|
|
117
|
-
className: `bg-white dark:bg-neutral-800 rounded-xl overflow-hidden shadow-sm border border-neutral-200 dark:border-neutral-700 ${className}`,
|
|
118
|
-
children: [showImage && /* @__PURE__ */ jsx(SkeletonImage, {
|
|
119
|
-
height: imageHeight,
|
|
120
|
-
animation,
|
|
121
|
-
borderRadius: 0
|
|
122
|
-
}), /* @__PURE__ */ jsxs("div", {
|
|
123
|
-
className: "p-4 flex flex-col gap-4",
|
|
124
|
-
children: [
|
|
125
|
-
showAvatar && /* @__PURE__ */ jsxs("div", {
|
|
126
|
-
className: "flex items-center gap-3",
|
|
127
|
-
children: [/* @__PURE__ */ jsx(SkeletonAvatar, {
|
|
128
|
-
size: 40,
|
|
129
|
-
animation
|
|
130
|
-
}), /* @__PURE__ */ jsxs("div", {
|
|
131
|
-
className: "flex-1",
|
|
132
|
-
children: [/* @__PURE__ */ jsx(Skeleton, {
|
|
133
|
-
variant: "text",
|
|
134
|
-
width: "60%",
|
|
135
|
-
height: 14,
|
|
136
|
-
animation
|
|
137
|
-
}), /* @__PURE__ */ jsx(Skeleton, {
|
|
138
|
-
variant: "text",
|
|
139
|
-
width: "40%",
|
|
140
|
-
height: 12,
|
|
141
|
-
animation,
|
|
142
|
-
className: "mt-2"
|
|
143
|
-
})]
|
|
144
|
-
})]
|
|
145
|
-
}),
|
|
146
|
-
/* @__PURE__ */ jsx(SkeletonText, {
|
|
147
|
-
lines,
|
|
148
|
-
animation,
|
|
149
|
-
height: 14,
|
|
150
|
-
lineGap: 10
|
|
151
|
-
}),
|
|
152
|
-
showActions && /* @__PURE__ */ jsxs("div", {
|
|
153
|
-
className: "flex gap-3 mt-2",
|
|
154
|
-
children: [/* @__PURE__ */ jsx(SkeletonButton, {
|
|
155
|
-
size: "sm",
|
|
156
|
-
animation
|
|
157
|
-
}), /* @__PURE__ */ jsx(SkeletonButton, {
|
|
158
|
-
size: "sm",
|
|
159
|
-
animation
|
|
160
|
-
})]
|
|
161
|
-
})
|
|
162
|
-
]
|
|
163
|
-
})]
|
|
164
|
-
});
|
|
165
|
-
});
|
|
166
|
-
SkeletonCard.displayName = "SkeletonCard";
|
|
167
|
-
var SkeletonTableRow = forwardRef(({ columns = 4, animation = "pulse", className = "" }, ref) => {
|
|
168
|
-
return /* @__PURE__ */ jsx("div", {
|
|
169
|
-
ref,
|
|
170
|
-
className: `flex items-center gap-4 py-3 ${className}`,
|
|
171
|
-
children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsx(Skeleton, {
|
|
172
|
-
variant: "text",
|
|
173
|
-
width: index === 0 ? "20%" : `${Math.floor(80 / (columns - 1))}%`,
|
|
174
|
-
height: 16,
|
|
175
|
-
animation
|
|
176
|
-
}, index))
|
|
177
|
-
});
|
|
178
|
-
});
|
|
179
|
-
SkeletonTableRow.displayName = "SkeletonTableRow";
|
|
180
|
-
var SkeletonListItem = forwardRef(({ showAvatar = true, showSecondaryText = true, showAction = false, animation = "pulse", className = "" }, ref) => {
|
|
181
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
182
|
-
ref,
|
|
183
|
-
className: `flex items-center gap-3 py-3 ${className}`,
|
|
184
|
-
children: [
|
|
185
|
-
showAvatar && /* @__PURE__ */ jsx(SkeletonAvatar, {
|
|
186
|
-
size: 48,
|
|
187
|
-
animation
|
|
188
|
-
}),
|
|
189
|
-
/* @__PURE__ */ jsxs("div", {
|
|
190
|
-
className: "flex-1",
|
|
191
|
-
children: [/* @__PURE__ */ jsx(Skeleton, {
|
|
192
|
-
variant: "text",
|
|
193
|
-
width: "70%",
|
|
194
|
-
height: 16,
|
|
195
|
-
animation
|
|
196
|
-
}), showSecondaryText && /* @__PURE__ */ jsx(Skeleton, {
|
|
197
|
-
variant: "text",
|
|
198
|
-
width: "50%",
|
|
199
|
-
height: 14,
|
|
200
|
-
animation,
|
|
201
|
-
className: "mt-2"
|
|
202
|
-
})]
|
|
203
|
-
}),
|
|
204
|
-
showAction && /* @__PURE__ */ jsx(SkeletonButton, {
|
|
205
|
-
size: "sm",
|
|
206
|
-
animation
|
|
207
|
-
})
|
|
208
|
-
]
|
|
209
|
-
});
|
|
210
|
-
});
|
|
211
|
-
SkeletonListItem.displayName = "SkeletonListItem";
|
|
212
|
-
//#endregion
|
|
213
|
-
export { Skeleton as t };
|
|
214
|
-
|
|
215
|
-
//# sourceMappingURL=skeleton-BhYWOp0Q.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton-BhYWOp0Q.mjs","names":[],"sources":["../../src/components/data-display/skeleton/Skeleton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nexport type SkeletonVariant = \"text\" | \"circular\" | \"rectangular\" | \"rounded\";\nexport type SkeletonAnimation = \"pulse\" | \"wave\" | \"none\";\n\nexport interface SkeletonProps {\n /** The variant shape of the skeleton */\n variant?: SkeletonVariant;\n /** The animation type */\n animation?: SkeletonAnimation;\n /** Width of the skeleton */\n width?: number | string;\n /** Height of the skeleton */\n height?: number | string;\n /** Border radius for rounded variant */\n borderRadius?: number | string;\n /** Custom className */\n className?: string;\n /** Number of lines for text variant */\n lines?: number;\n /** Gap between lines */\n lineGap?: number | string;\n /** Whether the last line should be shorter */\n lastLineWidth?: number | string;\n}\n\nexport interface SkeletonTextProps extends Omit<SkeletonProps, \"variant\"> {\n /** Number of text lines */\n lines?: number;\n}\n\nexport interface SkeletonAvatarProps extends Omit<\n SkeletonProps,\n \"variant\" | \"width\" | \"height\"\n> {\n /** Size of the avatar */\n size?: number | string;\n}\n\nexport interface SkeletonCardProps {\n /** Whether to show image placeholder */\n showImage?: boolean;\n /** Image height */\n imageHeight?: number | string;\n /** Number of text lines */\n lines?: number;\n /** Whether to show avatar */\n showAvatar?: boolean;\n /** Whether to show action buttons */\n showActions?: boolean;\n /** Custom className */\n className?: string;\n /** Animation type */\n animation?: SkeletonAnimation;\n}\n\nconst animationStyles: Record<SkeletonAnimation, string> = {\n pulse: \"animate-pulse\",\n wave: \"animate-shimmer bg-gradient-to-r from-neutral-200 via-neutral-100 to-neutral-200 dark:from-neutral-700 dark:via-neutral-600 dark:to-neutral-700 bg-[length:200%_100%]\",\n none: \"\",\n};\n\nconst variantStyles: Record<SkeletonVariant, string> = {\n text: \"rounded\",\n circular: \"rounded-full\",\n rectangular: \"rounded-none\",\n rounded: \"rounded-lg\",\n};\n\n// Base Skeleton Component\nconst Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n (\n {\n variant = \"text\",\n animation = \"pulse\",\n width,\n height,\n borderRadius,\n className = \"\",\n lines = 1,\n lineGap = 8,\n lastLineWidth = \"80%\",\n },\n ref,\n ) => {\n const baseStyles = `\n bg-neutral-200 dark:bg-neutral-700\n ${animation !== \"wave\" ? animationStyles[animation] : \"\"}\n ${animation === \"wave\" ? animationStyles.wave : \"\"}\n ${variantStyles[variant]}\n `;\n\n const getSize = () => {\n const style: React.CSSProperties = {};\n\n if (width) {\n style.width = typeof width === \"number\" ? `${width}px` : width;\n } else if (variant === \"text\") {\n style.width = \"100%\";\n }\n\n if (height) {\n style.height = typeof height === \"number\" ? `${height}px` : height;\n } else if (variant === \"text\") {\n style.height = \"1em\";\n } else if (variant === \"circular\") {\n style.width = style.width || \"40px\";\n style.height = style.width;\n }\n\n if (borderRadius) {\n style.borderRadius =\n typeof borderRadius === \"number\" ? `${borderRadius}px` : borderRadius;\n }\n\n return style;\n };\n\n // Render multiple lines for text variant\n if (variant === \"text\" && lines > 1) {\n return (\n <div\n ref={ref}\n className={`flex flex-col ${className}`}\n style={{\n gap: typeof lineGap === \"number\" ? `${lineGap}px` : lineGap,\n }}\n >\n {Array.from({ length: lines }).map((_, index) => (\n <div\n key={index}\n className={baseStyles}\n style={{\n ...getSize(),\n width: index === lines - 1 ? lastLineWidth : width || \"100%\",\n }}\n />\n ))}\n </div>\n );\n }\n\n return (\n <div\n ref={ref}\n className={`${baseStyles} ${className}`}\n style={getSize()}\n />\n );\n },\n);\n\nSkeleton.displayName = \"Skeleton\";\n\n// Skeleton Text Component\nconst SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n ({ lines = 3, ...props }, ref) => {\n return <Skeleton ref={ref} variant=\"text\" lines={lines} {...props} />;\n },\n);\n\nSkeletonText.displayName = \"SkeletonText\";\n\n// Skeleton Avatar Component\nconst SkeletonAvatar = forwardRef<HTMLDivElement, SkeletonAvatarProps>(\n ({ size = 40, animation = \"pulse\", className = \"\", ...props }, ref) => {\n const sizeValue = typeof size === \"number\" ? `${size}px` : size;\n\n return (\n <Skeleton\n ref={ref}\n variant=\"circular\"\n width={sizeValue}\n height={sizeValue}\n animation={animation}\n className={className}\n {...props}\n />\n );\n },\n);\n\nSkeletonAvatar.displayName = \"SkeletonAvatar\";\n\n// Skeleton Button Component\nconst SkeletonButton = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, \"variant\"> & { size?: \"sm\" | \"md\" | \"lg\" }\n>(({ size = \"md\", animation = \"pulse\", className = \"\", ...props }, ref) => {\n const sizeStyles = {\n sm: { width: 80, height: 32 },\n md: { width: 100, height: 40 },\n lg: { width: 120, height: 48 },\n };\n\n return (\n <Skeleton\n ref={ref}\n variant=\"rounded\"\n width={sizeStyles[size].width}\n height={sizeStyles[size].height}\n animation={animation}\n className={className}\n {...props}\n />\n );\n});\n\nSkeletonButton.displayName = \"SkeletonButton\";\n\n// Skeleton Image Component\nconst SkeletonImage = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, \"variant\">\n>(\n (\n {\n width = \"100%\",\n height = 200,\n animation = \"pulse\",\n className = \"\",\n ...props\n },\n ref,\n ) => {\n return (\n <Skeleton\n ref={ref}\n variant=\"rounded\"\n width={width}\n height={height}\n animation={animation}\n className={className}\n {...props}\n />\n );\n },\n);\n\nSkeletonImage.displayName = \"SkeletonImage\";\n\n// Skeleton Card Component\nconst SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n (\n {\n showImage = true,\n imageHeight = 200,\n lines = 3,\n showAvatar = false,\n showActions = false,\n className = \"\",\n animation = \"pulse\",\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n className={`bg-white dark:bg-neutral-800 rounded-xl overflow-hidden shadow-sm border border-neutral-200 dark:border-neutral-700 ${className}`}\n >\n {showImage && (\n <SkeletonImage\n height={imageHeight}\n animation={animation}\n borderRadius={0}\n />\n )}\n\n <div className=\"p-4 flex flex-col gap-4\">\n {showAvatar && (\n <div className=\"flex items-center gap-3\">\n <SkeletonAvatar size={40} animation={animation} />\n <div className=\"flex-1\">\n <Skeleton\n variant=\"text\"\n width=\"60%\"\n height={14}\n animation={animation}\n />\n <Skeleton\n variant=\"text\"\n width=\"40%\"\n height={12}\n animation={animation}\n className=\"mt-2\"\n />\n </div>\n </div>\n )}\n\n <SkeletonText\n lines={lines}\n animation={animation}\n height={14}\n lineGap={10}\n />\n\n {showActions && (\n <div className=\"flex gap-3 mt-2\">\n <SkeletonButton size=\"sm\" animation={animation} />\n <SkeletonButton size=\"sm\" animation={animation} />\n </div>\n )}\n </div>\n </div>\n );\n },\n);\n\nSkeletonCard.displayName = \"SkeletonCard\";\n\n// Skeleton Table Row Component\nconst SkeletonTableRow = forwardRef<\n HTMLDivElement,\n { columns?: number; animation?: SkeletonAnimation; className?: string }\n>(({ columns = 4, animation = \"pulse\", className = \"\" }, ref) => {\n return (\n <div ref={ref} className={`flex items-center gap-4 py-3 ${className}`}>\n {Array.from({ length: columns }).map((_, index) => (\n <Skeleton\n key={index}\n variant=\"text\"\n width={index === 0 ? \"20%\" : `${Math.floor(80 / (columns - 1))}%`}\n height={16}\n animation={animation}\n />\n ))}\n </div>\n );\n});\n\nSkeletonTableRow.displayName = \"SkeletonTableRow\";\n\n// Skeleton List Item Component\nconst SkeletonListItem = forwardRef<\n HTMLDivElement,\n {\n showAvatar?: boolean;\n showSecondaryText?: boolean;\n showAction?: boolean;\n animation?: SkeletonAnimation;\n className?: string;\n }\n>(\n (\n {\n showAvatar = true,\n showSecondaryText = true,\n showAction = false,\n animation = \"pulse\",\n className = \"\",\n },\n ref,\n ) => {\n return (\n <div ref={ref} className={`flex items-center gap-3 py-3 ${className}`}>\n {showAvatar && <SkeletonAvatar size={48} animation={animation} />}\n <div className=\"flex-1\">\n <Skeleton\n variant=\"text\"\n width=\"70%\"\n height={16}\n animation={animation}\n />\n {showSecondaryText && (\n <Skeleton\n variant=\"text\"\n width=\"50%\"\n height={14}\n animation={animation}\n className=\"mt-2\"\n />\n )}\n </div>\n {showAction && <SkeletonButton size=\"sm\" animation={animation} />}\n </div>\n );\n },\n);\n\nSkeletonListItem.displayName = \"SkeletonListItem\";\n\nexport default Skeleton;\nexport {\n Skeleton,\n SkeletonText,\n SkeletonAvatar,\n SkeletonButton,\n SkeletonImage,\n SkeletonCard,\n SkeletonTableRow,\n SkeletonListItem,\n};\n"],"mappings":"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"}
|
|
@@ -1,221 +0,0 @@
|
|
|
1
|
-
require("./chunk-B_GkZjkl.cjs");
|
|
2
|
-
let react = require("react");
|
|
3
|
-
let react_jsx_runtime = require("react/jsx-runtime");
|
|
4
|
-
//#region src/components/data-display/skeleton/Skeleton.tsx
|
|
5
|
-
var animationStyles = {
|
|
6
|
-
pulse: "animate-pulse",
|
|
7
|
-
wave: "animate-shimmer bg-gradient-to-r from-neutral-200 via-neutral-100 to-neutral-200 dark:from-neutral-700 dark:via-neutral-600 dark:to-neutral-700 bg-[length:200%_100%]",
|
|
8
|
-
none: ""
|
|
9
|
-
};
|
|
10
|
-
var variantStyles = {
|
|
11
|
-
text: "rounded",
|
|
12
|
-
circular: "rounded-full",
|
|
13
|
-
rectangular: "rounded-none",
|
|
14
|
-
rounded: "rounded-lg"
|
|
15
|
-
};
|
|
16
|
-
var Skeleton = (0, react.forwardRef)(({ variant = "text", animation = "pulse", width, height, borderRadius, className = "", lines = 1, lineGap = 8, lastLineWidth = "80%" }, ref) => {
|
|
17
|
-
const baseStyles = `
|
|
18
|
-
bg-neutral-200 dark:bg-neutral-700
|
|
19
|
-
${animation !== "wave" ? animationStyles[animation] : ""}
|
|
20
|
-
${animation === "wave" ? animationStyles.wave : ""}
|
|
21
|
-
${variantStyles[variant]}
|
|
22
|
-
`;
|
|
23
|
-
const getSize = () => {
|
|
24
|
-
const style = {};
|
|
25
|
-
if (width) style.width = typeof width === "number" ? `${width}px` : width;
|
|
26
|
-
else if (variant === "text") style.width = "100%";
|
|
27
|
-
if (height) style.height = typeof height === "number" ? `${height}px` : height;
|
|
28
|
-
else if (variant === "text") style.height = "1em";
|
|
29
|
-
else if (variant === "circular") {
|
|
30
|
-
style.width = style.width || "40px";
|
|
31
|
-
style.height = style.width;
|
|
32
|
-
}
|
|
33
|
-
if (borderRadius) style.borderRadius = typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
|
|
34
|
-
return style;
|
|
35
|
-
};
|
|
36
|
-
if (variant === "text" && lines > 1) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
37
|
-
ref,
|
|
38
|
-
className: `flex flex-col ${className}`,
|
|
39
|
-
style: { gap: typeof lineGap === "number" ? `${lineGap}px` : lineGap },
|
|
40
|
-
children: Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
41
|
-
className: baseStyles,
|
|
42
|
-
style: {
|
|
43
|
-
...getSize(),
|
|
44
|
-
width: index === lines - 1 ? lastLineWidth : width || "100%"
|
|
45
|
-
}
|
|
46
|
-
}, index))
|
|
47
|
-
});
|
|
48
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
49
|
-
ref,
|
|
50
|
-
className: `${baseStyles} ${className}`,
|
|
51
|
-
style: getSize()
|
|
52
|
-
});
|
|
53
|
-
});
|
|
54
|
-
Skeleton.displayName = "Skeleton";
|
|
55
|
-
var SkeletonText = (0, react.forwardRef)(({ lines = 3, ...props }, ref) => {
|
|
56
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
|
|
57
|
-
ref,
|
|
58
|
-
variant: "text",
|
|
59
|
-
lines,
|
|
60
|
-
...props
|
|
61
|
-
});
|
|
62
|
-
});
|
|
63
|
-
SkeletonText.displayName = "SkeletonText";
|
|
64
|
-
var SkeletonAvatar = (0, react.forwardRef)(({ size = 40, animation = "pulse", className = "", ...props }, ref) => {
|
|
65
|
-
const sizeValue = typeof size === "number" ? `${size}px` : size;
|
|
66
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
|
|
67
|
-
ref,
|
|
68
|
-
variant: "circular",
|
|
69
|
-
width: sizeValue,
|
|
70
|
-
height: sizeValue,
|
|
71
|
-
animation,
|
|
72
|
-
className,
|
|
73
|
-
...props
|
|
74
|
-
});
|
|
75
|
-
});
|
|
76
|
-
SkeletonAvatar.displayName = "SkeletonAvatar";
|
|
77
|
-
var SkeletonButton = (0, react.forwardRef)(({ size = "md", animation = "pulse", className = "", ...props }, ref) => {
|
|
78
|
-
const sizeStyles = {
|
|
79
|
-
sm: {
|
|
80
|
-
width: 80,
|
|
81
|
-
height: 32
|
|
82
|
-
},
|
|
83
|
-
md: {
|
|
84
|
-
width: 100,
|
|
85
|
-
height: 40
|
|
86
|
-
},
|
|
87
|
-
lg: {
|
|
88
|
-
width: 120,
|
|
89
|
-
height: 48
|
|
90
|
-
}
|
|
91
|
-
};
|
|
92
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
|
|
93
|
-
ref,
|
|
94
|
-
variant: "rounded",
|
|
95
|
-
width: sizeStyles[size].width,
|
|
96
|
-
height: sizeStyles[size].height,
|
|
97
|
-
animation,
|
|
98
|
-
className,
|
|
99
|
-
...props
|
|
100
|
-
});
|
|
101
|
-
});
|
|
102
|
-
SkeletonButton.displayName = "SkeletonButton";
|
|
103
|
-
var SkeletonImage = (0, react.forwardRef)(({ width = "100%", height = 200, animation = "pulse", className = "", ...props }, ref) => {
|
|
104
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
|
|
105
|
-
ref,
|
|
106
|
-
variant: "rounded",
|
|
107
|
-
width,
|
|
108
|
-
height,
|
|
109
|
-
animation,
|
|
110
|
-
className,
|
|
111
|
-
...props
|
|
112
|
-
});
|
|
113
|
-
});
|
|
114
|
-
SkeletonImage.displayName = "SkeletonImage";
|
|
115
|
-
var SkeletonCard = (0, react.forwardRef)(({ showImage = true, imageHeight = 200, lines = 3, showAvatar = false, showActions = false, className = "", animation = "pulse" }, ref) => {
|
|
116
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
117
|
-
ref,
|
|
118
|
-
className: `bg-white dark:bg-neutral-800 rounded-xl overflow-hidden shadow-sm border border-neutral-200 dark:border-neutral-700 ${className}`,
|
|
119
|
-
children: [showImage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonImage, {
|
|
120
|
-
height: imageHeight,
|
|
121
|
-
animation,
|
|
122
|
-
borderRadius: 0
|
|
123
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
124
|
-
className: "p-4 flex flex-col gap-4",
|
|
125
|
-
children: [
|
|
126
|
-
showAvatar && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
127
|
-
className: "flex items-center gap-3",
|
|
128
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonAvatar, {
|
|
129
|
-
size: 40,
|
|
130
|
-
animation
|
|
131
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
132
|
-
className: "flex-1",
|
|
133
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
|
|
134
|
-
variant: "text",
|
|
135
|
-
width: "60%",
|
|
136
|
-
height: 14,
|
|
137
|
-
animation
|
|
138
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
|
|
139
|
-
variant: "text",
|
|
140
|
-
width: "40%",
|
|
141
|
-
height: 12,
|
|
142
|
-
animation,
|
|
143
|
-
className: "mt-2"
|
|
144
|
-
})]
|
|
145
|
-
})]
|
|
146
|
-
}),
|
|
147
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonText, {
|
|
148
|
-
lines,
|
|
149
|
-
animation,
|
|
150
|
-
height: 14,
|
|
151
|
-
lineGap: 10
|
|
152
|
-
}),
|
|
153
|
-
showActions && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
154
|
-
className: "flex gap-3 mt-2",
|
|
155
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonButton, {
|
|
156
|
-
size: "sm",
|
|
157
|
-
animation
|
|
158
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonButton, {
|
|
159
|
-
size: "sm",
|
|
160
|
-
animation
|
|
161
|
-
})]
|
|
162
|
-
})
|
|
163
|
-
]
|
|
164
|
-
})]
|
|
165
|
-
});
|
|
166
|
-
});
|
|
167
|
-
SkeletonCard.displayName = "SkeletonCard";
|
|
168
|
-
var SkeletonTableRow = (0, react.forwardRef)(({ columns = 4, animation = "pulse", className = "" }, ref) => {
|
|
169
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
170
|
-
ref,
|
|
171
|
-
className: `flex items-center gap-4 py-3 ${className}`,
|
|
172
|
-
children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
|
|
173
|
-
variant: "text",
|
|
174
|
-
width: index === 0 ? "20%" : `${Math.floor(80 / (columns - 1))}%`,
|
|
175
|
-
height: 16,
|
|
176
|
-
animation
|
|
177
|
-
}, index))
|
|
178
|
-
});
|
|
179
|
-
});
|
|
180
|
-
SkeletonTableRow.displayName = "SkeletonTableRow";
|
|
181
|
-
var SkeletonListItem = (0, react.forwardRef)(({ showAvatar = true, showSecondaryText = true, showAction = false, animation = "pulse", className = "" }, ref) => {
|
|
182
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
183
|
-
ref,
|
|
184
|
-
className: `flex items-center gap-3 py-3 ${className}`,
|
|
185
|
-
children: [
|
|
186
|
-
showAvatar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonAvatar, {
|
|
187
|
-
size: 48,
|
|
188
|
-
animation
|
|
189
|
-
}),
|
|
190
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
191
|
-
className: "flex-1",
|
|
192
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
|
|
193
|
-
variant: "text",
|
|
194
|
-
width: "70%",
|
|
195
|
-
height: 16,
|
|
196
|
-
animation
|
|
197
|
-
}), showSecondaryText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
|
|
198
|
-
variant: "text",
|
|
199
|
-
width: "50%",
|
|
200
|
-
height: 14,
|
|
201
|
-
animation,
|
|
202
|
-
className: "mt-2"
|
|
203
|
-
})]
|
|
204
|
-
}),
|
|
205
|
-
showAction && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonButton, {
|
|
206
|
-
size: "sm",
|
|
207
|
-
animation
|
|
208
|
-
})
|
|
209
|
-
]
|
|
210
|
-
});
|
|
211
|
-
});
|
|
212
|
-
SkeletonListItem.displayName = "SkeletonListItem";
|
|
213
|
-
//#endregion
|
|
214
|
-
Object.defineProperty(exports, "Skeleton", {
|
|
215
|
-
enumerable: true,
|
|
216
|
-
get: function() {
|
|
217
|
-
return Skeleton;
|
|
218
|
-
}
|
|
219
|
-
});
|
|
220
|
-
|
|
221
|
-
//# sourceMappingURL=skeleton-DTXpHYYB.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton-DTXpHYYB.cjs","names":[],"sources":["../../src/components/data-display/skeleton/Skeleton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nexport type SkeletonVariant = \"text\" | \"circular\" | \"rectangular\" | \"rounded\";\nexport type SkeletonAnimation = \"pulse\" | \"wave\" | \"none\";\n\nexport interface SkeletonProps {\n /** The variant shape of the skeleton */\n variant?: SkeletonVariant;\n /** The animation type */\n animation?: SkeletonAnimation;\n /** Width of the skeleton */\n width?: number | string;\n /** Height of the skeleton */\n height?: number | string;\n /** Border radius for rounded variant */\n borderRadius?: number | string;\n /** Custom className */\n className?: string;\n /** Number of lines for text variant */\n lines?: number;\n /** Gap between lines */\n lineGap?: number | string;\n /** Whether the last line should be shorter */\n lastLineWidth?: number | string;\n}\n\nexport interface SkeletonTextProps extends Omit<SkeletonProps, \"variant\"> {\n /** Number of text lines */\n lines?: number;\n}\n\nexport interface SkeletonAvatarProps extends Omit<\n SkeletonProps,\n \"variant\" | \"width\" | \"height\"\n> {\n /** Size of the avatar */\n size?: number | string;\n}\n\nexport interface SkeletonCardProps {\n /** Whether to show image placeholder */\n showImage?: boolean;\n /** Image height */\n imageHeight?: number | string;\n /** Number of text lines */\n lines?: number;\n /** Whether to show avatar */\n showAvatar?: boolean;\n /** Whether to show action buttons */\n showActions?: boolean;\n /** Custom className */\n className?: string;\n /** Animation type */\n animation?: SkeletonAnimation;\n}\n\nconst animationStyles: Record<SkeletonAnimation, string> = {\n pulse: \"animate-pulse\",\n wave: \"animate-shimmer bg-gradient-to-r from-neutral-200 via-neutral-100 to-neutral-200 dark:from-neutral-700 dark:via-neutral-600 dark:to-neutral-700 bg-[length:200%_100%]\",\n none: \"\",\n};\n\nconst variantStyles: Record<SkeletonVariant, string> = {\n text: \"rounded\",\n circular: \"rounded-full\",\n rectangular: \"rounded-none\",\n rounded: \"rounded-lg\",\n};\n\n// Base Skeleton Component\nconst Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n (\n {\n variant = \"text\",\n animation = \"pulse\",\n width,\n height,\n borderRadius,\n className = \"\",\n lines = 1,\n lineGap = 8,\n lastLineWidth = \"80%\",\n },\n ref,\n ) => {\n const baseStyles = `\n bg-neutral-200 dark:bg-neutral-700\n ${animation !== \"wave\" ? animationStyles[animation] : \"\"}\n ${animation === \"wave\" ? animationStyles.wave : \"\"}\n ${variantStyles[variant]}\n `;\n\n const getSize = () => {\n const style: React.CSSProperties = {};\n\n if (width) {\n style.width = typeof width === \"number\" ? `${width}px` : width;\n } else if (variant === \"text\") {\n style.width = \"100%\";\n }\n\n if (height) {\n style.height = typeof height === \"number\" ? `${height}px` : height;\n } else if (variant === \"text\") {\n style.height = \"1em\";\n } else if (variant === \"circular\") {\n style.width = style.width || \"40px\";\n style.height = style.width;\n }\n\n if (borderRadius) {\n style.borderRadius =\n typeof borderRadius === \"number\" ? `${borderRadius}px` : borderRadius;\n }\n\n return style;\n };\n\n // Render multiple lines for text variant\n if (variant === \"text\" && lines > 1) {\n return (\n <div\n ref={ref}\n className={`flex flex-col ${className}`}\n style={{\n gap: typeof lineGap === \"number\" ? `${lineGap}px` : lineGap,\n }}\n >\n {Array.from({ length: lines }).map((_, index) => (\n <div\n key={index}\n className={baseStyles}\n style={{\n ...getSize(),\n width: index === lines - 1 ? lastLineWidth : width || \"100%\",\n }}\n />\n ))}\n </div>\n );\n }\n\n return (\n <div\n ref={ref}\n className={`${baseStyles} ${className}`}\n style={getSize()}\n />\n );\n },\n);\n\nSkeleton.displayName = \"Skeleton\";\n\n// Skeleton Text Component\nconst SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n ({ lines = 3, ...props }, ref) => {\n return <Skeleton ref={ref} variant=\"text\" lines={lines} {...props} />;\n },\n);\n\nSkeletonText.displayName = \"SkeletonText\";\n\n// Skeleton Avatar Component\nconst SkeletonAvatar = forwardRef<HTMLDivElement, SkeletonAvatarProps>(\n ({ size = 40, animation = \"pulse\", className = \"\", ...props }, ref) => {\n const sizeValue = typeof size === \"number\" ? `${size}px` : size;\n\n return (\n <Skeleton\n ref={ref}\n variant=\"circular\"\n width={sizeValue}\n height={sizeValue}\n animation={animation}\n className={className}\n {...props}\n />\n );\n },\n);\n\nSkeletonAvatar.displayName = \"SkeletonAvatar\";\n\n// Skeleton Button Component\nconst SkeletonButton = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, \"variant\"> & { size?: \"sm\" | \"md\" | \"lg\" }\n>(({ size = \"md\", animation = \"pulse\", className = \"\", ...props }, ref) => {\n const sizeStyles = {\n sm: { width: 80, height: 32 },\n md: { width: 100, height: 40 },\n lg: { width: 120, height: 48 },\n };\n\n return (\n <Skeleton\n ref={ref}\n variant=\"rounded\"\n width={sizeStyles[size].width}\n height={sizeStyles[size].height}\n animation={animation}\n className={className}\n {...props}\n />\n );\n});\n\nSkeletonButton.displayName = \"SkeletonButton\";\n\n// Skeleton Image Component\nconst SkeletonImage = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, \"variant\">\n>(\n (\n {\n width = \"100%\",\n height = 200,\n animation = \"pulse\",\n className = \"\",\n ...props\n },\n ref,\n ) => {\n return (\n <Skeleton\n ref={ref}\n variant=\"rounded\"\n width={width}\n height={height}\n animation={animation}\n className={className}\n {...props}\n />\n );\n },\n);\n\nSkeletonImage.displayName = \"SkeletonImage\";\n\n// Skeleton Card Component\nconst SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n (\n {\n showImage = true,\n imageHeight = 200,\n lines = 3,\n showAvatar = false,\n showActions = false,\n className = \"\",\n animation = \"pulse\",\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n className={`bg-white dark:bg-neutral-800 rounded-xl overflow-hidden shadow-sm border border-neutral-200 dark:border-neutral-700 ${className}`}\n >\n {showImage && (\n <SkeletonImage\n height={imageHeight}\n animation={animation}\n borderRadius={0}\n />\n )}\n\n <div className=\"p-4 flex flex-col gap-4\">\n {showAvatar && (\n <div className=\"flex items-center gap-3\">\n <SkeletonAvatar size={40} animation={animation} />\n <div className=\"flex-1\">\n <Skeleton\n variant=\"text\"\n width=\"60%\"\n height={14}\n animation={animation}\n />\n <Skeleton\n variant=\"text\"\n width=\"40%\"\n height={12}\n animation={animation}\n className=\"mt-2\"\n />\n </div>\n </div>\n )}\n\n <SkeletonText\n lines={lines}\n animation={animation}\n height={14}\n lineGap={10}\n />\n\n {showActions && (\n <div className=\"flex gap-3 mt-2\">\n <SkeletonButton size=\"sm\" animation={animation} />\n <SkeletonButton size=\"sm\" animation={animation} />\n </div>\n )}\n </div>\n </div>\n );\n },\n);\n\nSkeletonCard.displayName = \"SkeletonCard\";\n\n// Skeleton Table Row Component\nconst SkeletonTableRow = forwardRef<\n HTMLDivElement,\n { columns?: number; animation?: SkeletonAnimation; className?: string }\n>(({ columns = 4, animation = \"pulse\", className = \"\" }, ref) => {\n return (\n <div ref={ref} className={`flex items-center gap-4 py-3 ${className}`}>\n {Array.from({ length: columns }).map((_, index) => (\n <Skeleton\n key={index}\n variant=\"text\"\n width={index === 0 ? \"20%\" : `${Math.floor(80 / (columns - 1))}%`}\n height={16}\n animation={animation}\n />\n ))}\n </div>\n );\n});\n\nSkeletonTableRow.displayName = \"SkeletonTableRow\";\n\n// Skeleton List Item Component\nconst SkeletonListItem = forwardRef<\n HTMLDivElement,\n {\n showAvatar?: boolean;\n showSecondaryText?: boolean;\n showAction?: boolean;\n animation?: SkeletonAnimation;\n className?: string;\n }\n>(\n (\n {\n showAvatar = true,\n showSecondaryText = true,\n showAction = false,\n animation = \"pulse\",\n className = \"\",\n },\n ref,\n ) => {\n return (\n <div ref={ref} className={`flex items-center gap-3 py-3 ${className}`}>\n {showAvatar && <SkeletonAvatar size={48} animation={animation} />}\n <div className=\"flex-1\">\n <Skeleton\n variant=\"text\"\n width=\"70%\"\n height={16}\n animation={animation}\n />\n {showSecondaryText && (\n <Skeleton\n variant=\"text\"\n width=\"50%\"\n height={14}\n animation={animation}\n className=\"mt-2\"\n />\n )}\n </div>\n {showAction && <SkeletonButton size=\"sm\" animation={animation} />}\n </div>\n );\n },\n);\n\nSkeletonListItem.displayName = \"SkeletonListItem\";\n\nexport default Skeleton;\nexport {\n Skeleton,\n SkeletonText,\n SkeletonAvatar,\n SkeletonButton,\n SkeletonImage,\n SkeletonCard,\n SkeletonTableRow,\n SkeletonListItem,\n};\n"],"mappings":"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"}
|