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.
@@ -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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"}