@jameskabz/nextcraft-ui 0.8.4 → 0.8.5
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.
|
@@ -181,7 +181,7 @@ function CraftLoader({
|
|
|
181
181
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
182
182
|
"div",
|
|
183
183
|
{
|
|
184
|
-
className: "
|
|
184
|
+
className: "fixed inset-0 z-50 flex items-center justify-center overflow-hidden backdrop-blur-md",
|
|
185
185
|
style: { backgroundColor },
|
|
186
186
|
"data-nc-theme": tone,
|
|
187
187
|
children: [
|
|
@@ -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: 16,\n medium: 24,\n large: 32,\n xl: 40,\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(4, Math.floor(size / 6));\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(3, Math.floor(size / 6));\n return (\n <div className=\"flex items-end gap-1\">\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 * 4,\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-2 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-2 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(4, Math.floor(size / 5));\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\n const content = (\n <div\n className={cn(\n \"flex flex-col items-center justify-center gap-3\",\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 ? <span className=\"text-xs text-[rgb(var(--nc-fg-muted))]\">{text}</span> : null}\n </div>\n );\n\n if (!overlay) return content;\n\n return (\n <div\n className=\"
|
|
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: 16,\n medium: 24,\n large: 32,\n xl: 40,\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(4, Math.floor(size / 6));\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(3, Math.floor(size / 6));\n return (\n <div className=\"flex items-end gap-1\">\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 * 4,\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-2 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-2 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(4, Math.floor(size / 5));\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\n const content = (\n <div\n className={cn(\n \"flex flex-col items-center justify-center gap-3\",\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 ? <span className=\"text-xs text-[rgb(var(--nc-fg-muted))]\">{text}</span> : 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}\n"],"mappings":"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","names":[]}
|
|
@@ -158,7 +158,7 @@ function CraftLoader({
|
|
|
158
158
|
return /* @__PURE__ */ jsxs(
|
|
159
159
|
"div",
|
|
160
160
|
{
|
|
161
|
-
className: "
|
|
161
|
+
className: "fixed inset-0 z-50 flex items-center justify-center overflow-hidden backdrop-blur-md",
|
|
162
162
|
style: { backgroundColor },
|
|
163
163
|
"data-nc-theme": tone,
|
|
164
164
|
children: [
|
|
@@ -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: 16,\n medium: 24,\n large: 32,\n xl: 40,\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(4, Math.floor(size / 6));\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(3, Math.floor(size / 6));\n return (\n <div className=\"flex items-end gap-1\">\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 * 4,\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-2 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-2 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(4, Math.floor(size / 5));\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\n const content = (\n <div\n className={cn(\n \"flex flex-col items-center justify-center gap-3\",\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 ? <span className=\"text-xs text-[rgb(var(--nc-fg-muted))]\">{text}</span> : null}\n </div>\n );\n\n if (!overlay) return content;\n\n return (\n <div\n className=\"
|
|
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: 16,\n medium: 24,\n large: 32,\n xl: 40,\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(4, Math.floor(size / 6));\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(3, Math.floor(size / 6));\n return (\n <div className=\"flex items-end gap-1\">\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 * 4,\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-2 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-2 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(4, Math.floor(size / 5));\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\n const content = (\n <div\n className={cn(\n \"flex flex-col items-center justify-center gap-3\",\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 ? <span className=\"text-xs text-[rgb(var(--nc-fg-muted))]\">{text}</span> : 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}\n"],"mappings":"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","names":[]}
|