@jameskabz/nextcraft-ui 0.8.5 → 0.8.6
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.
|
@@ -25,10 +25,22 @@ module.exports = __toCommonJS(craft_loader_exports);
|
|
|
25
25
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
26
26
|
var import_cn = require("../utils/cn");
|
|
27
27
|
const sizeMap = {
|
|
28
|
-
small:
|
|
29
|
-
medium:
|
|
30
|
-
large:
|
|
31
|
-
xl:
|
|
28
|
+
small: 24,
|
|
29
|
+
medium: 32,
|
|
30
|
+
large: 48,
|
|
31
|
+
xl: 64
|
|
32
|
+
};
|
|
33
|
+
const textSizeMap = {
|
|
34
|
+
small: "text-sm",
|
|
35
|
+
medium: "text-base",
|
|
36
|
+
large: "text-lg",
|
|
37
|
+
xl: "text-xl"
|
|
38
|
+
};
|
|
39
|
+
const gapSizeMap = {
|
|
40
|
+
small: "gap-4",
|
|
41
|
+
medium: "gap-6",
|
|
42
|
+
large: "gap-8",
|
|
43
|
+
xl: "gap-10"
|
|
32
44
|
};
|
|
33
45
|
function Spinner({ size, color }) {
|
|
34
46
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
@@ -67,7 +79,7 @@ function Spinner({ size, color }) {
|
|
|
67
79
|
);
|
|
68
80
|
}
|
|
69
81
|
function Dots({ size, color }) {
|
|
70
|
-
const dotSize = Math.max(
|
|
82
|
+
const dotSize = Math.max(6, Math.floor(size / 5));
|
|
71
83
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-2", children: [0, 1, 2].map((index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
72
84
|
"span",
|
|
73
85
|
{
|
|
@@ -84,14 +96,14 @@ function Dots({ size, color }) {
|
|
|
84
96
|
}
|
|
85
97
|
function Bars({ size, color }) {
|
|
86
98
|
const barHeight = size;
|
|
87
|
-
const barWidth = Math.max(
|
|
88
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-end gap-1", children: [0, 1, 2, 3].map((index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
99
|
+
const barWidth = Math.max(4, Math.floor(size / 5));
|
|
100
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-end gap-1.5", children: [0, 1, 2, 3].map((index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
89
101
|
"span",
|
|
90
102
|
{
|
|
91
103
|
className: "inline-flex animate-pulse rounded-sm",
|
|
92
104
|
style: {
|
|
93
105
|
width: barWidth,
|
|
94
|
-
height: barHeight - index *
|
|
106
|
+
height: barHeight - index * 6,
|
|
95
107
|
backgroundColor: color,
|
|
96
108
|
animationDelay: `${index * 100}ms`
|
|
97
109
|
}
|
|
@@ -112,7 +124,7 @@ function Ripple({ size, color }) {
|
|
|
112
124
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
113
125
|
"span",
|
|
114
126
|
{
|
|
115
|
-
className: "inline-flex rounded-full border-
|
|
127
|
+
className: "inline-flex rounded-full border-4 animate-ping",
|
|
116
128
|
style: { width: size, height: size, borderColor: color }
|
|
117
129
|
}
|
|
118
130
|
);
|
|
@@ -121,13 +133,13 @@ function Ring({ size, color }) {
|
|
|
121
133
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
122
134
|
"span",
|
|
123
135
|
{
|
|
124
|
-
className: "inline-flex animate-spin rounded-full border-
|
|
136
|
+
className: "inline-flex animate-spin rounded-full border-4 border-t-transparent",
|
|
125
137
|
style: { width: size, height: size, borderColor: color }
|
|
126
138
|
}
|
|
127
139
|
);
|
|
128
140
|
}
|
|
129
141
|
function Bounce({ size, color }) {
|
|
130
|
-
const dotSize = Math.max(
|
|
142
|
+
const dotSize = Math.max(6, Math.floor(size / 4));
|
|
131
143
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-2", children: [0, 1].map((index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
132
144
|
"span",
|
|
133
145
|
{
|
|
@@ -156,11 +168,14 @@ function CraftLoader({
|
|
|
156
168
|
}) {
|
|
157
169
|
if (!loading) return null;
|
|
158
170
|
const px = sizeMap[size];
|
|
171
|
+
const textSize = textSizeMap[size];
|
|
172
|
+
const gapSize = gapSizeMap[size];
|
|
159
173
|
const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
160
174
|
"div",
|
|
161
175
|
{
|
|
162
176
|
className: (0, import_cn.cn)(
|
|
163
|
-
"flex flex-col items-center justify-center
|
|
177
|
+
"flex flex-col items-center justify-center",
|
|
178
|
+
gapSize,
|
|
164
179
|
textPosition === "top" && "flex-col-reverse",
|
|
165
180
|
className
|
|
166
181
|
),
|
|
@@ -173,7 +188,7 @@ function CraftLoader({
|
|
|
173
188
|
type === "ripple" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ripple, { size: px, color }),
|
|
174
189
|
type === "ring" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ring, { size: px, color }),
|
|
175
190
|
type === "bounce" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Bounce, { size: px, color }),
|
|
176
|
-
text ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "
|
|
191
|
+
text ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_cn.cn)(textSize, "font-medium text-[rgb(var(--nc-fg-muted))]"), children: text }) : null
|
|
177
192
|
]
|
|
178
193
|
}
|
|
179
194
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/craft-loader.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\nexport type CraftLoaderType =\n | \"spin\"\n | \"pulse\"\n | \"bounce\"\n | \"ripple\"\n | \"bars\"\n | \"dots\"\n | \"ring\";\n\nexport type CraftLoaderSize = \"small\" | \"medium\" | \"large\" | \"xl\";\n\nexport type CraftLoaderProps = {\n loading?: boolean;\n type?: CraftLoaderType;\n size?: CraftLoaderSize;\n color?: string;\n overlay?: boolean;\n text?: React.ReactNode;\n textPosition?: \"top\" | \"bottom\";\n backgroundColor?: string;\n tone?: ThemeName;\n className?: string;\n};\n\nconst sizeMap: Record<CraftLoaderSize, number> = {\n small:
|
|
1
|
+
{"version":3,"sources":["../../src/components/craft-loader.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\nexport type CraftLoaderType =\n | \"spin\"\n | \"pulse\"\n | \"bounce\"\n | \"ripple\"\n | \"bars\"\n | \"dots\"\n | \"ring\";\n\nexport type CraftLoaderSize = \"small\" | \"medium\" | \"large\" | \"xl\";\n\nexport type CraftLoaderProps = {\n loading?: boolean;\n type?: CraftLoaderType;\n size?: CraftLoaderSize;\n color?: string;\n overlay?: boolean;\n text?: React.ReactNode;\n textPosition?: \"top\" | \"bottom\";\n backgroundColor?: string;\n tone?: ThemeName;\n className?: string;\n};\n\nconst sizeMap: Record<CraftLoaderSize, number> = {\n small: 24,\n medium: 32,\n large: 48,\n xl: 64,\n};\n\nconst textSizeMap: Record<CraftLoaderSize, string> = {\n small: \"text-sm\",\n medium: \"text-base\",\n large: \"text-lg\",\n xl: \"text-xl\",\n};\n\nconst gapSizeMap: Record<CraftLoaderSize, string> = {\n small: \"gap-4\",\n medium: \"gap-6\",\n large: \"gap-8\",\n xl: \"gap-10\",\n};\n\nfunction Spinner({ size, color }: { size: number; color: string }) {\n return (\n <svg\n className=\"animate-spin\"\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke={color}\n strokeWidth=\"4\"\n className=\"opacity-25\"\n />\n <path\n d=\"M4 12a8 8 0 018-8\"\n stroke={color}\n strokeWidth=\"4\"\n strokeLinecap=\"round\"\n className=\"opacity-75\"\n />\n </svg>\n );\n}\n\nfunction Dots({ size, color }: { size: number; color: string }) {\n const dotSize = Math.max(6, Math.floor(size / 5));\n return (\n <div className=\"flex items-center gap-2\">\n {[0, 1, 2].map((index) => (\n <span\n key={index}\n className=\"inline-flex animate-bounce rounded-full\"\n style={{\n width: dotSize,\n height: dotSize,\n backgroundColor: color,\n animationDelay: `${index * 120}ms`,\n }}\n />\n ))}\n </div>\n );\n}\n\nfunction Bars({ size, color }: { size: number; color: string }) {\n const barHeight = size;\n const barWidth = Math.max(4, Math.floor(size / 5));\n return (\n <div className=\"flex items-end gap-1.5\">\n {[0, 1, 2, 3].map((index) => (\n <span\n key={index}\n className=\"inline-flex animate-pulse rounded-sm\"\n style={{\n width: barWidth,\n height: barHeight - index * 6,\n backgroundColor: color,\n animationDelay: `${index * 100}ms`,\n }}\n />\n ))}\n </div>\n );\n}\n\nfunction Pulse({ size, color }: { size: number; color: string }) {\n return (\n <span\n className=\"inline-flex animate-pulse rounded-full\"\n style={{ width: size, height: size, backgroundColor: color }}\n />\n );\n}\n\nfunction Ripple({ size, color }: { size: number; color: string }) {\n return (\n <span\n className=\"inline-flex rounded-full border-4 animate-ping\"\n style={{ width: size, height: size, borderColor: color }}\n />\n );\n}\n\nfunction Ring({ size, color }: { size: number; color: string }) {\n return (\n <span\n className=\"inline-flex animate-spin rounded-full border-4 border-t-transparent\"\n style={{ width: size, height: size, borderColor: color }}\n />\n );\n}\n\nfunction Bounce({ size, color }: { size: number; color: string }) {\n const dotSize = Math.max(6, Math.floor(size / 4));\n return (\n <div className=\"flex items-center gap-2\">\n {[0, 1].map((index) => (\n <span\n key={index}\n className=\"inline-flex animate-bounce rounded-full\"\n style={{\n width: dotSize,\n height: dotSize,\n backgroundColor: color,\n animationDelay: `${index * 140}ms`,\n }}\n />\n ))}\n </div>\n );\n}\n\nexport function CraftLoader({\n loading = false,\n type = \"dots\",\n size = \"medium\",\n color = \"rgb(var(--nc-accent-1))\",\n overlay = false,\n text,\n textPosition = \"bottom\",\n backgroundColor = \"rgba(0, 0, 0, 0.75)\",\n tone,\n className,\n}: CraftLoaderProps) {\n if (!loading) return null;\n\n const px = sizeMap[size];\n const textSize = textSizeMap[size];\n const gapSize = gapSizeMap[size];\n\n const content = (\n <div\n className={cn(\n \"flex flex-col items-center justify-center\",\n gapSize,\n textPosition === \"top\" && \"flex-col-reverse\",\n className\n )}\n data-nc-theme={tone}\n >\n {type === \"spin\" && <Spinner size={px} color={color} />}\n {type === \"dots\" && <Dots size={px} color={color} />}\n {type === \"bars\" && <Bars size={px} color={color} />}\n {type === \"pulse\" && <Pulse size={px} color={color} />}\n {type === \"ripple\" && <Ripple size={px} color={color} />}\n {type === \"ring\" && <Ring size={px} color={color} />}\n {type === \"bounce\" && <Bounce size={px} color={color} />}\n {text ? (\n <span className={cn(textSize, \"font-medium text-[rgb(var(--nc-fg-muted))]\")}>\n {text}\n </span>\n ) : null}\n </div>\n );\n\n if (!overlay) return content;\n\n return (\n <div\n className=\"fixed inset-0 z-50 flex items-center justify-center overflow-hidden backdrop-blur-md\"\n style={{ backgroundColor }}\n data-nc-theme={tone}\n >\n <span\n className=\"pointer-events-none absolute inset-0 bg-linear-to-br from-[rgb(var(--nc-accent-1)/0.12)] via-transparent to-[rgb(var(--nc-accent-3)/0.12)]\"\n aria-hidden=\"true\"\n />\n <span\n className=\"pointer-events-none absolute -left-1/4 -top-1/3 h-full w-[120%] rotate-6 bg-white/10 blur-2xl opacity-40\"\n aria-hidden=\"true\"\n />\n <div className=\"relative z-10\">{content}</div>\n </div>\n );\n}"],"mappings":"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","names":[]}
|
|
@@ -2,10 +2,22 @@
|
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { cn } from "../utils/cn";
|
|
4
4
|
const sizeMap = {
|
|
5
|
-
small:
|
|
6
|
-
medium:
|
|
7
|
-
large:
|
|
8
|
-
xl:
|
|
5
|
+
small: 24,
|
|
6
|
+
medium: 32,
|
|
7
|
+
large: 48,
|
|
8
|
+
xl: 64
|
|
9
|
+
};
|
|
10
|
+
const textSizeMap = {
|
|
11
|
+
small: "text-sm",
|
|
12
|
+
medium: "text-base",
|
|
13
|
+
large: "text-lg",
|
|
14
|
+
xl: "text-xl"
|
|
15
|
+
};
|
|
16
|
+
const gapSizeMap = {
|
|
17
|
+
small: "gap-4",
|
|
18
|
+
medium: "gap-6",
|
|
19
|
+
large: "gap-8",
|
|
20
|
+
xl: "gap-10"
|
|
9
21
|
};
|
|
10
22
|
function Spinner({ size, color }) {
|
|
11
23
|
return /* @__PURE__ */ jsxs(
|
|
@@ -44,7 +56,7 @@ function Spinner({ size, color }) {
|
|
|
44
56
|
);
|
|
45
57
|
}
|
|
46
58
|
function Dots({ size, color }) {
|
|
47
|
-
const dotSize = Math.max(
|
|
59
|
+
const dotSize = Math.max(6, Math.floor(size / 5));
|
|
48
60
|
return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: [0, 1, 2].map((index) => /* @__PURE__ */ jsx(
|
|
49
61
|
"span",
|
|
50
62
|
{
|
|
@@ -61,14 +73,14 @@ function Dots({ size, color }) {
|
|
|
61
73
|
}
|
|
62
74
|
function Bars({ size, color }) {
|
|
63
75
|
const barHeight = size;
|
|
64
|
-
const barWidth = Math.max(
|
|
65
|
-
return /* @__PURE__ */ jsx("div", { className: "flex items-end gap-1", children: [0, 1, 2, 3].map((index) => /* @__PURE__ */ jsx(
|
|
76
|
+
const barWidth = Math.max(4, Math.floor(size / 5));
|
|
77
|
+
return /* @__PURE__ */ jsx("div", { className: "flex items-end gap-1.5", children: [0, 1, 2, 3].map((index) => /* @__PURE__ */ jsx(
|
|
66
78
|
"span",
|
|
67
79
|
{
|
|
68
80
|
className: "inline-flex animate-pulse rounded-sm",
|
|
69
81
|
style: {
|
|
70
82
|
width: barWidth,
|
|
71
|
-
height: barHeight - index *
|
|
83
|
+
height: barHeight - index * 6,
|
|
72
84
|
backgroundColor: color,
|
|
73
85
|
animationDelay: `${index * 100}ms`
|
|
74
86
|
}
|
|
@@ -89,7 +101,7 @@ function Ripple({ size, color }) {
|
|
|
89
101
|
return /* @__PURE__ */ jsx(
|
|
90
102
|
"span",
|
|
91
103
|
{
|
|
92
|
-
className: "inline-flex rounded-full border-
|
|
104
|
+
className: "inline-flex rounded-full border-4 animate-ping",
|
|
93
105
|
style: { width: size, height: size, borderColor: color }
|
|
94
106
|
}
|
|
95
107
|
);
|
|
@@ -98,13 +110,13 @@ function Ring({ size, color }) {
|
|
|
98
110
|
return /* @__PURE__ */ jsx(
|
|
99
111
|
"span",
|
|
100
112
|
{
|
|
101
|
-
className: "inline-flex animate-spin rounded-full border-
|
|
113
|
+
className: "inline-flex animate-spin rounded-full border-4 border-t-transparent",
|
|
102
114
|
style: { width: size, height: size, borderColor: color }
|
|
103
115
|
}
|
|
104
116
|
);
|
|
105
117
|
}
|
|
106
118
|
function Bounce({ size, color }) {
|
|
107
|
-
const dotSize = Math.max(
|
|
119
|
+
const dotSize = Math.max(6, Math.floor(size / 4));
|
|
108
120
|
return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: [0, 1].map((index) => /* @__PURE__ */ jsx(
|
|
109
121
|
"span",
|
|
110
122
|
{
|
|
@@ -133,11 +145,14 @@ function CraftLoader({
|
|
|
133
145
|
}) {
|
|
134
146
|
if (!loading) return null;
|
|
135
147
|
const px = sizeMap[size];
|
|
148
|
+
const textSize = textSizeMap[size];
|
|
149
|
+
const gapSize = gapSizeMap[size];
|
|
136
150
|
const content = /* @__PURE__ */ jsxs(
|
|
137
151
|
"div",
|
|
138
152
|
{
|
|
139
153
|
className: cn(
|
|
140
|
-
"flex flex-col items-center justify-center
|
|
154
|
+
"flex flex-col items-center justify-center",
|
|
155
|
+
gapSize,
|
|
141
156
|
textPosition === "top" && "flex-col-reverse",
|
|
142
157
|
className
|
|
143
158
|
),
|
|
@@ -150,7 +165,7 @@ function CraftLoader({
|
|
|
150
165
|
type === "ripple" && /* @__PURE__ */ jsx(Ripple, { size: px, color }),
|
|
151
166
|
type === "ring" && /* @__PURE__ */ jsx(Ring, { size: px, color }),
|
|
152
167
|
type === "bounce" && /* @__PURE__ */ jsx(Bounce, { size: px, color }),
|
|
153
|
-
text ? /* @__PURE__ */ jsx("span", { className: "
|
|
168
|
+
text ? /* @__PURE__ */ jsx("span", { className: cn(textSize, "font-medium text-[rgb(var(--nc-fg-muted))]"), children: text }) : null
|
|
154
169
|
]
|
|
155
170
|
}
|
|
156
171
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/craft-loader.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\nexport type CraftLoaderType =\n | \"spin\"\n | \"pulse\"\n | \"bounce\"\n | \"ripple\"\n | \"bars\"\n | \"dots\"\n | \"ring\";\n\nexport type CraftLoaderSize = \"small\" | \"medium\" | \"large\" | \"xl\";\n\nexport type CraftLoaderProps = {\n loading?: boolean;\n type?: CraftLoaderType;\n size?: CraftLoaderSize;\n color?: string;\n overlay?: boolean;\n text?: React.ReactNode;\n textPosition?: \"top\" | \"bottom\";\n backgroundColor?: string;\n tone?: ThemeName;\n className?: string;\n};\n\nconst sizeMap: Record<CraftLoaderSize, number> = {\n small:
|
|
1
|
+
{"version":3,"sources":["../../src/components/craft-loader.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\nexport type CraftLoaderType =\n | \"spin\"\n | \"pulse\"\n | \"bounce\"\n | \"ripple\"\n | \"bars\"\n | \"dots\"\n | \"ring\";\n\nexport type CraftLoaderSize = \"small\" | \"medium\" | \"large\" | \"xl\";\n\nexport type CraftLoaderProps = {\n loading?: boolean;\n type?: CraftLoaderType;\n size?: CraftLoaderSize;\n color?: string;\n overlay?: boolean;\n text?: React.ReactNode;\n textPosition?: \"top\" | \"bottom\";\n backgroundColor?: string;\n tone?: ThemeName;\n className?: string;\n};\n\nconst sizeMap: Record<CraftLoaderSize, number> = {\n small: 24,\n medium: 32,\n large: 48,\n xl: 64,\n};\n\nconst textSizeMap: Record<CraftLoaderSize, string> = {\n small: \"text-sm\",\n medium: \"text-base\",\n large: \"text-lg\",\n xl: \"text-xl\",\n};\n\nconst gapSizeMap: Record<CraftLoaderSize, string> = {\n small: \"gap-4\",\n medium: \"gap-6\",\n large: \"gap-8\",\n xl: \"gap-10\",\n};\n\nfunction Spinner({ size, color }: { size: number; color: string }) {\n return (\n <svg\n className=\"animate-spin\"\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke={color}\n strokeWidth=\"4\"\n className=\"opacity-25\"\n />\n <path\n d=\"M4 12a8 8 0 018-8\"\n stroke={color}\n strokeWidth=\"4\"\n strokeLinecap=\"round\"\n className=\"opacity-75\"\n />\n </svg>\n );\n}\n\nfunction Dots({ size, color }: { size: number; color: string }) {\n const dotSize = Math.max(6, Math.floor(size / 5));\n return (\n <div className=\"flex items-center gap-2\">\n {[0, 1, 2].map((index) => (\n <span\n key={index}\n className=\"inline-flex animate-bounce rounded-full\"\n style={{\n width: dotSize,\n height: dotSize,\n backgroundColor: color,\n animationDelay: `${index * 120}ms`,\n }}\n />\n ))}\n </div>\n );\n}\n\nfunction Bars({ size, color }: { size: number; color: string }) {\n const barHeight = size;\n const barWidth = Math.max(4, Math.floor(size / 5));\n return (\n <div className=\"flex items-end gap-1.5\">\n {[0, 1, 2, 3].map((index) => (\n <span\n key={index}\n className=\"inline-flex animate-pulse rounded-sm\"\n style={{\n width: barWidth,\n height: barHeight - index * 6,\n backgroundColor: color,\n animationDelay: `${index * 100}ms`,\n }}\n />\n ))}\n </div>\n );\n}\n\nfunction Pulse({ size, color }: { size: number; color: string }) {\n return (\n <span\n className=\"inline-flex animate-pulse rounded-full\"\n style={{ width: size, height: size, backgroundColor: color }}\n />\n );\n}\n\nfunction Ripple({ size, color }: { size: number; color: string }) {\n return (\n <span\n className=\"inline-flex rounded-full border-4 animate-ping\"\n style={{ width: size, height: size, borderColor: color }}\n />\n );\n}\n\nfunction Ring({ size, color }: { size: number; color: string }) {\n return (\n <span\n className=\"inline-flex animate-spin rounded-full border-4 border-t-transparent\"\n style={{ width: size, height: size, borderColor: color }}\n />\n );\n}\n\nfunction Bounce({ size, color }: { size: number; color: string }) {\n const dotSize = Math.max(6, Math.floor(size / 4));\n return (\n <div className=\"flex items-center gap-2\">\n {[0, 1].map((index) => (\n <span\n key={index}\n className=\"inline-flex animate-bounce rounded-full\"\n style={{\n width: dotSize,\n height: dotSize,\n backgroundColor: color,\n animationDelay: `${index * 140}ms`,\n }}\n />\n ))}\n </div>\n );\n}\n\nexport function CraftLoader({\n loading = false,\n type = \"dots\",\n size = \"medium\",\n color = \"rgb(var(--nc-accent-1))\",\n overlay = false,\n text,\n textPosition = \"bottom\",\n backgroundColor = \"rgba(0, 0, 0, 0.75)\",\n tone,\n className,\n}: CraftLoaderProps) {\n if (!loading) return null;\n\n const px = sizeMap[size];\n const textSize = textSizeMap[size];\n const gapSize = gapSizeMap[size];\n\n const content = (\n <div\n className={cn(\n \"flex flex-col items-center justify-center\",\n gapSize,\n textPosition === \"top\" && \"flex-col-reverse\",\n className\n )}\n data-nc-theme={tone}\n >\n {type === \"spin\" && <Spinner size={px} color={color} />}\n {type === \"dots\" && <Dots size={px} color={color} />}\n {type === \"bars\" && <Bars size={px} color={color} />}\n {type === \"pulse\" && <Pulse size={px} color={color} />}\n {type === \"ripple\" && <Ripple size={px} color={color} />}\n {type === \"ring\" && <Ring size={px} color={color} />}\n {type === \"bounce\" && <Bounce size={px} color={color} />}\n {text ? (\n <span className={cn(textSize, \"font-medium text-[rgb(var(--nc-fg-muted))]\")}>\n {text}\n </span>\n ) : null}\n </div>\n );\n\n if (!overlay) return content;\n\n return (\n <div\n className=\"fixed inset-0 z-50 flex items-center justify-center overflow-hidden backdrop-blur-md\"\n style={{ backgroundColor }}\n data-nc-theme={tone}\n >\n <span\n className=\"pointer-events-none absolute inset-0 bg-linear-to-br from-[rgb(var(--nc-accent-1)/0.12)] via-transparent to-[rgb(var(--nc-accent-3)/0.12)]\"\n aria-hidden=\"true\"\n />\n <span\n className=\"pointer-events-none absolute -left-1/4 -top-1/3 h-full w-[120%] rotate-6 bg-white/10 blur-2xl opacity-40\"\n aria-hidden=\"true\"\n />\n <div className=\"relative z-10\">{content}</div>\n </div>\n );\n}"],"mappings":"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","names":[]}
|
package/dist/styles.css
CHANGED
|
@@ -634,8 +634,8 @@
|
|
|
634
634
|
.justify-start {
|
|
635
635
|
justify-content: flex-start;
|
|
636
636
|
}
|
|
637
|
-
.gap-1 {
|
|
638
|
-
gap: calc(var(--spacing) * 1);
|
|
637
|
+
.gap-1\.5 {
|
|
638
|
+
gap: calc(var(--spacing) * 1.5);
|
|
639
639
|
}
|
|
640
640
|
.gap-2 {
|
|
641
641
|
gap: calc(var(--spacing) * 2);
|
|
@@ -774,6 +774,10 @@
|
|
|
774
774
|
border-style: var(--tw-border-style);
|
|
775
775
|
border-width: 2px;
|
|
776
776
|
}
|
|
777
|
+
.border-4 {
|
|
778
|
+
border-style: var(--tw-border-style);
|
|
779
|
+
border-width: 4px;
|
|
780
|
+
}
|
|
777
781
|
.border-\[3px\] {
|
|
778
782
|
border-style: var(--tw-border-style);
|
|
779
783
|
border-width: 3px;
|