@jameskabz/nextcraft-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/README.md +28 -0
- package/dist/index.cjs +79 -49
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +14 -10
- package/dist/index.d.ts +14 -10
- package/dist/index.js +80 -50
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -41,6 +41,34 @@ export default {
|
|
|
41
41
|
};
|
|
42
42
|
```
|
|
43
43
|
|
|
44
|
+
## Troubleshooting: Module not found
|
|
45
|
+
|
|
46
|
+
If your app (for example, a folder named `spendwise`) shows:
|
|
47
|
+
|
|
48
|
+
```
|
|
49
|
+
Module not found: Can't resolve '@jameskabz/nextcraft-ui'
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
Do the following:
|
|
53
|
+
|
|
54
|
+
1) Ensure the package is installed in the app:
|
|
55
|
+
```bash
|
|
56
|
+
npm install @jameskabz/nextcraft-ui
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
2) If you are developing locally from this repo, build and install it from a path:
|
|
60
|
+
```bash
|
|
61
|
+
# in this repo
|
|
62
|
+
npm run build
|
|
63
|
+
|
|
64
|
+
# in your app (spendwise)
|
|
65
|
+
npm install ../nextcraft-ui
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
3) Verify the package exports point to the built files:
|
|
69
|
+
- This repo expects ESM at `dist/index.js` and CJS at `dist/index.cjs`.
|
|
70
|
+
- If you change build outputs, update `package.json` `module` and `exports` accordingly.
|
|
71
|
+
|
|
44
72
|
## Scripts
|
|
45
73
|
|
|
46
74
|
- `npm run build` builds the library with `tsup`.
|
package/dist/index.cjs
CHANGED
|
@@ -36,67 +36,87 @@ __export(index_exports, {
|
|
|
36
36
|
});
|
|
37
37
|
module.exports = __toCommonJS(index_exports);
|
|
38
38
|
|
|
39
|
-
// src/utils/cn.ts
|
|
40
|
-
function cn(...values) {
|
|
41
|
-
return values.filter(Boolean).join(" ");
|
|
42
|
-
}
|
|
43
|
-
|
|
44
39
|
// src/components/craft-button.tsx
|
|
45
40
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
41
|
+
var cn = (...classes) => classes.filter(Boolean).join(" ");
|
|
46
42
|
var sizeClasses = {
|
|
47
|
-
sm: "h-9 px-
|
|
48
|
-
md: "h-11 px-
|
|
49
|
-
lg: "h-
|
|
43
|
+
sm: "h-9 px-4 text-xs",
|
|
44
|
+
md: "h-11 px-6 text-sm",
|
|
45
|
+
lg: "h-13 px-8 text-base"
|
|
50
46
|
};
|
|
51
47
|
var variantClasses = {
|
|
52
|
-
solid: "bg-
|
|
53
|
-
ghost: "bg-white/5 text-white hover:bg-white/10 border border-white/10",
|
|
54
|
-
outline: "bg-transparent text-
|
|
48
|
+
solid: "bg-gradient-to-br from-sky-400 via-blue-500 to-indigo-600 text-white shadow-lg shadow-blue-500/50 hover:shadow-xl hover:shadow-blue-500/60 hover:scale-[1.02] active:scale-[0.98]",
|
|
49
|
+
ghost: "bg-white/5 text-white hover:bg-white/10 backdrop-blur-sm border border-white/10 hover:border-white/20",
|
|
50
|
+
outline: "bg-transparent text-sky-400 border-2 border-sky-400/50 hover:border-sky-400 hover:bg-sky-400/10",
|
|
51
|
+
gradient: "bg-gradient-to-r from-violet-600 via-fuchsia-500 to-pink-500 text-white shadow-lg shadow-fuchsia-500/50 hover:shadow-xl hover:shadow-fuchsia-500/60 hover:scale-[1.02] active:scale-[0.98]"
|
|
55
52
|
};
|
|
56
53
|
function CraftButton({
|
|
57
54
|
className,
|
|
58
55
|
variant = "solid",
|
|
59
56
|
size = "md",
|
|
60
57
|
glow = true,
|
|
58
|
+
disabled,
|
|
61
59
|
...props
|
|
62
60
|
}) {
|
|
63
61
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
64
62
|
"button",
|
|
65
63
|
{
|
|
66
64
|
className: cn(
|
|
67
|
-
"relative inline-flex items-center justify-center gap-2 rounded-
|
|
65
|
+
"relative inline-flex items-center justify-center gap-2 rounded-xl font-semibold tracking-wide transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100",
|
|
68
66
|
sizeClasses[size],
|
|
69
67
|
variantClasses[variant],
|
|
70
|
-
glow && variant === "solid" ? "before:absolute before:-inset-
|
|
68
|
+
glow && (variant === "solid" || variant === "gradient") ? "before:absolute before:-inset-1 before:rounded-xl before:bg-linear-to-r before:from-sky-400/20 before:via-blue-500/20 before:to-indigo-600/20 before:blur-xl before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity" : "",
|
|
71
69
|
className
|
|
72
70
|
),
|
|
71
|
+
disabled,
|
|
73
72
|
...props
|
|
74
73
|
}
|
|
75
74
|
);
|
|
76
75
|
}
|
|
77
76
|
|
|
77
|
+
// src/utils/cn.ts
|
|
78
|
+
function cn2(...values) {
|
|
79
|
+
return values.filter(Boolean).join(" ");
|
|
80
|
+
}
|
|
81
|
+
|
|
78
82
|
// src/components/glass-card.tsx
|
|
79
83
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
80
|
-
var
|
|
81
|
-
aurora: "from-emerald-
|
|
82
|
-
ember: "from-amber-
|
|
83
|
-
ocean: "from-sky-
|
|
84
|
+
var cardToneClasses = {
|
|
85
|
+
aurora: "bg-gradient-to-br from-emerald-400/15 via-teal-400/10 to-cyan-400/15 border-emerald-300/30",
|
|
86
|
+
ember: "bg-gradient-to-br from-amber-400/15 via-orange-400/10 to-rose-400/15 border-amber-300/30",
|
|
87
|
+
ocean: "bg-gradient-to-br from-sky-400/15 via-blue-400/10 to-indigo-400/15 border-sky-300/30",
|
|
88
|
+
midnight: "bg-gradient-to-br from-violet-400/15 via-purple-400/10 to-fuchsia-400/15 border-violet-300/30",
|
|
89
|
+
cosmic: "bg-gradient-to-br from-pink-400/15 via-purple-400/10 to-indigo-400/15 border-pink-300/30"
|
|
90
|
+
};
|
|
91
|
+
var intensityClasses = {
|
|
92
|
+
subtle: "backdrop-blur-md bg-opacity-50",
|
|
93
|
+
medium: "backdrop-blur-xl bg-opacity-70",
|
|
94
|
+
strong: "backdrop-blur-2xl bg-opacity-90"
|
|
84
95
|
};
|
|
85
96
|
function GlassCard({
|
|
86
97
|
className,
|
|
87
|
-
tone = "
|
|
98
|
+
tone = "ocean",
|
|
99
|
+
intensity = "medium",
|
|
100
|
+
bordered = true,
|
|
101
|
+
children,
|
|
88
102
|
...props
|
|
89
103
|
}) {
|
|
90
104
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
91
105
|
"div",
|
|
92
106
|
{
|
|
93
|
-
className:
|
|
94
|
-
"relative overflow-hidden rounded-
|
|
95
|
-
"
|
|
96
|
-
|
|
107
|
+
className: cn2(
|
|
108
|
+
"relative overflow-hidden rounded-3xl p-6 text-white",
|
|
109
|
+
"shadow-[0_8px_32px_rgba(0,0,0,0.3)]",
|
|
110
|
+
"transition-all duration-300",
|
|
111
|
+
"hover:shadow-[0_8px_40px_rgba(0,0,0,0.4)]",
|
|
112
|
+
intensityClasses[intensity],
|
|
113
|
+
cardToneClasses[tone],
|
|
114
|
+
bordered ? "border-2" : "border-0",
|
|
115
|
+
"before:absolute before:inset-0 before:bg-linear-to-br before:from-white/10 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300",
|
|
97
116
|
className
|
|
98
117
|
),
|
|
99
|
-
...props
|
|
118
|
+
...props,
|
|
119
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "relative z-10", children })
|
|
100
120
|
}
|
|
101
121
|
);
|
|
102
122
|
}
|
|
@@ -104,35 +124,45 @@ function GlassCard({
|
|
|
104
124
|
// src/components/craft-input.tsx
|
|
105
125
|
var React = __toESM(require("react"), 1);
|
|
106
126
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
107
|
-
var
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
127
|
+
var cn3 = (...classes) => classes.filter(Boolean).join(" ");
|
|
128
|
+
var inputToneClasses = {
|
|
129
|
+
aurora: "border-emerald-400/30 focus:border-emerald-400/80 focus:ring-emerald-400/30 placeholder:text-emerald-200/40",
|
|
130
|
+
ember: "border-amber-400/30 focus:border-amber-400/80 focus:ring-amber-400/30 placeholder:text-amber-200/40",
|
|
131
|
+
ocean: "border-sky-400/30 focus:border-sky-400/80 focus:ring-sky-400/30 placeholder:text-sky-200/40",
|
|
132
|
+
midnight: "border-violet-400/30 focus:border-violet-400/80 focus:ring-violet-400/30 placeholder:text-violet-200/40"
|
|
111
133
|
};
|
|
112
|
-
var
|
|
113
|
-
sm: "h-
|
|
114
|
-
md: "h-
|
|
115
|
-
lg: "h-
|
|
134
|
+
var inputSizeClasses = {
|
|
135
|
+
sm: "h-10 px-4 text-sm",
|
|
136
|
+
md: "h-12 px-5 text-base",
|
|
137
|
+
lg: "h-14 px-6 text-lg"
|
|
116
138
|
};
|
|
117
139
|
var CraftInput = React.forwardRef(
|
|
118
|
-
({ className, tone = "
|
|
119
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.
|
|
120
|
-
"
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
140
|
+
({ className, tone = "ocean", inputSize = "md", glow = true, icon, ...props }, ref) => {
|
|
141
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative w-full", children: [
|
|
142
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute left-4 top-1/2 -translate-y-1/2 text-white/50", children: icon }),
|
|
143
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
144
|
+
"input",
|
|
145
|
+
{
|
|
146
|
+
ref,
|
|
147
|
+
className: cn3(
|
|
148
|
+
"w-full rounded-2xl border-2 bg-white/5 text-white backdrop-blur-xl",
|
|
149
|
+
"shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]",
|
|
150
|
+
"focus:outline-none focus:ring-4",
|
|
151
|
+
"transition-all duration-300",
|
|
152
|
+
"disabled:opacity-50 disabled:cursor-not-allowed",
|
|
153
|
+
inputSizeClasses[inputSize],
|
|
154
|
+
inputToneClasses[tone],
|
|
155
|
+
glow ? "focus:shadow-[0_0_30px_-5px_var(--glow-color)]" : "",
|
|
156
|
+
icon ? "pl-12" : "",
|
|
157
|
+
className
|
|
158
|
+
),
|
|
159
|
+
style: {
|
|
160
|
+
"--glow-color": tone === "aurora" ? "rgba(52,211,153,0.5)" : tone === "ember" ? "rgba(251,191,36,0.5)" : tone === "midnight" ? "rgba(167,139,250,0.5)" : "rgba(56,189,248,0.5)"
|
|
161
|
+
},
|
|
162
|
+
...props
|
|
163
|
+
}
|
|
164
|
+
)
|
|
165
|
+
] });
|
|
136
166
|
}
|
|
137
167
|
);
|
|
138
168
|
CraftInput.displayName = "CraftInput";
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/components/craft-button.tsx","../src/utils/cn.ts","../src/components/glass-card.tsx","../src/components/craft-input.tsx"],"sourcesContent":["export { CraftButton } from \"./components/craft-button\";\nexport type { CraftButtonProps } from \"./components/craft-button\";\n\nexport { GlassCard } from \"./components/glass-card\";\nexport type { GlassCardProps } from \"./components/glass-card\";\n\nexport { CraftInput } from \"./components/craft-input\";\nexport type { CraftInputProps } from \"./components/craft-input\";\n","import * as React from \"react\";\n\nconst cn = (...classes: (string | boolean | undefined)[]) => \n classes.filter(Boolean).join(\" \");\n\ntype CraftButtonVariant = \"solid\" | \"ghost\" | \"outline\" | \"gradient\";\ntype CraftButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport type CraftButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n variant?: CraftButtonVariant;\n size?: CraftButtonSize;\n glow?: boolean;\n};\n\nconst sizeClasses: Record<CraftButtonSize, string> = {\n sm: \"h-9 px-4 text-xs\",\n md: \"h-11 px-6 text-sm\",\n lg: \"h-13 px-8 text-base\",\n};\n\nconst variantClasses: Record<CraftButtonVariant, string> = {\n solid:\n \"bg-gradient-to-br from-sky-400 via-blue-500 to-indigo-600 text-white shadow-lg shadow-blue-500/50 hover:shadow-xl hover:shadow-blue-500/60 hover:scale-[1.02] active:scale-[0.98]\",\n ghost:\n \"bg-white/5 text-white hover:bg-white/10 backdrop-blur-sm border border-white/10 hover:border-white/20\",\n outline:\n \"bg-transparent text-sky-400 border-2 border-sky-400/50 hover:border-sky-400 hover:bg-sky-400/10\",\n gradient:\n \"bg-gradient-to-r from-violet-600 via-fuchsia-500 to-pink-500 text-white shadow-lg shadow-fuchsia-500/50 hover:shadow-xl hover:shadow-fuchsia-500/60 hover:scale-[1.02] active:scale-[0.98]\",\n};\n\nexport function CraftButton({\n className,\n variant = \"solid\",\n size = \"md\",\n glow = true,\n disabled,\n ...props\n}: CraftButtonProps) {\n return (\n <button\n className={cn(\n \"relative inline-flex items-center justify-center gap-2 rounded-xl font-semibold tracking-wide transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100\",\n sizeClasses[size],\n variantClasses[variant],\n glow && (variant === \"solid\" || variant === \"gradient\")\n ? \"before:absolute before:-inset-1 before:rounded-xl before:bg-linear-to-r before:from-sky-400/20 before:via-blue-500/20 before:to-indigo-600/20 before:blur-xl before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity\"\n : \"\",\n className\n )}\n disabled={disabled}\n {...props}\n />\n );\n}","export function cn(...values: Array<string | false | null | undefined>): string {\n return values.filter(Boolean).join(\" \");\n}\n","import { cn } from \"@/utils/cn\";\n\nexport type GlassCardProps = React.HTMLAttributes<HTMLDivElement> & {\n tone?: \"aurora\" | \"ember\" | \"ocean\" | \"midnight\" | \"cosmic\";\n intensity?: \"subtle\" | \"medium\" | \"strong\";\n bordered?: boolean;\n};\n\nconst cardToneClasses: Record<NonNullable<GlassCardProps[\"tone\"]>, string> = {\n aurora:\n \"bg-gradient-to-br from-emerald-400/15 via-teal-400/10 to-cyan-400/15 border-emerald-300/30\",\n ember: \n \"bg-gradient-to-br from-amber-400/15 via-orange-400/10 to-rose-400/15 border-amber-300/30\",\n ocean: \n \"bg-gradient-to-br from-sky-400/15 via-blue-400/10 to-indigo-400/15 border-sky-300/30\",\n midnight:\n \"bg-gradient-to-br from-violet-400/15 via-purple-400/10 to-fuchsia-400/15 border-violet-300/30\",\n cosmic:\n \"bg-gradient-to-br from-pink-400/15 via-purple-400/10 to-indigo-400/15 border-pink-300/30\",\n};\n\nconst intensityClasses: Record<NonNullable<GlassCardProps[\"intensity\"]>, string> = {\n subtle: \"backdrop-blur-md bg-opacity-50\",\n medium: \"backdrop-blur-xl bg-opacity-70\",\n strong: \"backdrop-blur-2xl bg-opacity-90\",\n};\n\nexport function GlassCard({\n className,\n tone = \"ocean\",\n intensity = \"medium\",\n bordered = true,\n children,\n ...props\n}: GlassCardProps) {\n return (\n <div\n className={cn(\n \"relative overflow-hidden rounded-3xl p-6 text-white\",\n \"shadow-[0_8px_32px_rgba(0,0,0,0.3)]\",\n \"transition-all duration-300\",\n \"hover:shadow-[0_8px_40px_rgba(0,0,0,0.4)]\",\n intensityClasses[intensity],\n cardToneClasses[tone],\n bordered ? \"border-2\" : \"border-0\",\n \"before:absolute before:inset-0 before:bg-linear-to-br before:from-white/10 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300\",\n className\n )}\n {...props}\n >\n <div className=\"relative z-10\">{children}</div>\n </div>\n );\n}","\nimport * as React from \"react\";\n\nconst cn = (...classes: (string | boolean | undefined)[]) => \n classes.filter(Boolean).join(\" \");\n\n// ============================================================================\n// CRAFT INPUT\n// ============================================================================\n\ntype CraftInputTone = \"aurora\" | \"ember\" | \"ocean\" | \"midnight\";\ntype CraftInputSize = \"sm\" | \"md\" | \"lg\";\n\nexport type CraftInputProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"size\"\n> & {\n tone?: CraftInputTone;\n inputSize?: CraftInputSize;\n glow?: boolean;\n icon?: React.ReactNode;\n};\n\nconst inputToneClasses: Record<CraftInputTone, string> = {\n aurora:\n \"border-emerald-400/30 focus:border-emerald-400/80 focus:ring-emerald-400/30 placeholder:text-emerald-200/40\",\n ember:\n \"border-amber-400/30 focus:border-amber-400/80 focus:ring-amber-400/30 placeholder:text-amber-200/40\",\n ocean: \n \"border-sky-400/30 focus:border-sky-400/80 focus:ring-sky-400/30 placeholder:text-sky-200/40\",\n midnight:\n \"border-violet-400/30 focus:border-violet-400/80 focus:ring-violet-400/30 placeholder:text-violet-200/40\",\n};\n\nconst inputSizeClasses: Record<CraftInputSize, string> = {\n sm: \"h-10 px-4 text-sm\",\n md: \"h-12 px-5 text-base\",\n lg: \"h-14 px-6 text-lg\",\n};\n\nexport const CraftInput = React.forwardRef<HTMLInputElement, CraftInputProps>(\n (\n { className, tone = \"ocean\", inputSize = \"md\", glow = true, icon, ...props },\n ref\n ) => {\n return (\n <div className=\"relative w-full\">\n {icon && (\n <div className=\"absolute left-4 top-1/2 -translate-y-1/2 text-white/50\">\n {icon}\n </div>\n )}\n <input\n ref={ref}\n className={cn(\n \"w-full rounded-2xl border-2 bg-white/5 text-white backdrop-blur-xl\",\n \"shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]\",\n \"focus:outline-none focus:ring-4\",\n \"transition-all duration-300\",\n \"disabled:opacity-50 disabled:cursor-not-allowed\",\n inputSizeClasses[inputSize],\n inputToneClasses[tone],\n glow ? \"focus:shadow-[0_0_30px_-5px_var(--glow-color)]\" : \"\",\n icon ? \"pl-12\" : \"\",\n className\n )}\n style={{\n \"--glow-color\": tone === \"aurora\" ? \"rgba(52,211,153,0.5)\" : \n tone === \"ember\" ? \"rgba(251,191,36,0.5)\" : \n tone === \"midnight\" ? \"rgba(167,139,250,0.5)\" :\n \"rgba(56,189,248,0.5)\"\n } as React.CSSProperties}\n {...props}\n />\n </div>\n );\n }\n);\n\nCraftInput.displayName = \"CraftInput\";"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACwCI;AAtCJ,IAAM,KAAK,IAAI,YACb,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AAWlC,IAAM,cAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,iBAAqD;AAAA,EACzD,OACE;AAAA,EACF,OACE;AAAA,EACF,SACE;AAAA,EACF,UACE;AACJ;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,YAAY,IAAI;AAAA,QAChB,eAAe,OAAO;AAAA,QACtB,SAAS,YAAY,WAAW,YAAY,cACxC,kPACA;AAAA,QACJ;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;;;ACtDO,SAASA,OAAM,QAA0D;AAC9E,SAAO,OAAO,OAAO,OAAO,EAAE,KAAK,GAAG;AACxC;;;ACgDM,IAAAC,sBAAA;AA1CN,IAAM,kBAAuE;AAAA,EAC3E,QACE;AAAA,EACF,OACE;AAAA,EACF,OACE;AAAA,EACF,UACE;AAAA,EACF,QACE;AACJ;AAEA,IAAM,mBAA6E;AAAA,EACjF,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AACV;AAEO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,iBAAiB,SAAS;AAAA,QAC1B,gBAAgB,IAAI;AAAA,QACpB,WAAW,aAAa;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,uDAAC,SAAI,WAAU,iBAAiB,UAAS;AAAA;AAAA,EAC3C;AAEJ;;;ACpDA,YAAuB;AA6CjB,IAAAC,sBAAA;AA3CN,IAAMC,MAAK,IAAI,YACb,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AAmBlC,IAAM,mBAAmD;AAAA,EACvD,QACE;AAAA,EACF,OACE;AAAA,EACF,OACE;AAAA,EACF,UACE;AACJ;AAEA,IAAM,mBAAmD;AAAA,EACvD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,aAAmB;AAAA,EAC9B,CACE,EAAE,WAAW,OAAO,SAAS,YAAY,MAAM,OAAO,MAAM,MAAM,GAAG,MAAM,GAC3E,QACG;AACH,WACE,8CAAC,SAAI,WAAU,mBACZ;AAAA,cACC,6CAAC,SAAI,WAAU,0DACZ,gBACH;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAWA;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,iBAAiB,SAAS;AAAA,YAC1B,iBAAiB,IAAI;AAAA,YACrB,OAAO,mDAAmD;AAAA,YAC1D,OAAO,UAAU;AAAA,YACjB;AAAA,UACF;AAAA,UACA,OAAO;AAAA,YACL,gBAAgB,SAAS,WAAW,yBACpB,SAAS,UAAU,yBACnB,SAAS,aAAa,0BACtB;AAAA,UAClB;AAAA,UACC,GAAG;AAAA;AAAA,MACN;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;","names":["cn","import_jsx_runtime","cn","import_jsx_runtime","cn"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,31 +1,35 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import * as React from 'react';
|
|
2
|
+
import * as React$1 from 'react';
|
|
3
3
|
|
|
4
|
-
type CraftButtonVariant = "solid" | "ghost" | "outline";
|
|
4
|
+
type CraftButtonVariant = "solid" | "ghost" | "outline" | "gradient";
|
|
5
5
|
type CraftButtonSize = "sm" | "md" | "lg";
|
|
6
|
-
type CraftButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
6
|
+
type CraftButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
7
7
|
variant?: CraftButtonVariant;
|
|
8
8
|
size?: CraftButtonSize;
|
|
9
9
|
glow?: boolean;
|
|
10
10
|
};
|
|
11
|
-
declare function CraftButton({ className, variant, size, glow, ...props }: CraftButtonProps): react_jsx_runtime.JSX.Element;
|
|
11
|
+
declare function CraftButton({ className, variant, size, glow, disabled, ...props }: CraftButtonProps): react_jsx_runtime.JSX.Element;
|
|
12
12
|
|
|
13
13
|
type GlassCardProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
14
|
-
tone?: "aurora" | "ember" | "ocean";
|
|
14
|
+
tone?: "aurora" | "ember" | "ocean" | "midnight" | "cosmic";
|
|
15
|
+
intensity?: "subtle" | "medium" | "strong";
|
|
16
|
+
bordered?: boolean;
|
|
15
17
|
};
|
|
16
|
-
declare function GlassCard({ className, tone, ...props }: GlassCardProps): react_jsx_runtime.JSX.Element;
|
|
18
|
+
declare function GlassCard({ className, tone, intensity, bordered, children, ...props }: GlassCardProps): react_jsx_runtime.JSX.Element;
|
|
17
19
|
|
|
18
|
-
type CraftInputTone = "aurora" | "ember" | "ocean";
|
|
20
|
+
type CraftInputTone = "aurora" | "ember" | "ocean" | "midnight";
|
|
19
21
|
type CraftInputSize = "sm" | "md" | "lg";
|
|
20
|
-
type CraftInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
|
|
22
|
+
type CraftInputProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> & {
|
|
21
23
|
tone?: CraftInputTone;
|
|
22
24
|
inputSize?: CraftInputSize;
|
|
23
25
|
glow?: boolean;
|
|
26
|
+
icon?: React$1.ReactNode;
|
|
24
27
|
};
|
|
25
|
-
declare const CraftInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
|
|
28
|
+
declare const CraftInput: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> & {
|
|
26
29
|
tone?: CraftInputTone;
|
|
27
30
|
inputSize?: CraftInputSize;
|
|
28
31
|
glow?: boolean;
|
|
29
|
-
|
|
32
|
+
icon?: React$1.ReactNode;
|
|
33
|
+
} & React$1.RefAttributes<HTMLInputElement>>;
|
|
30
34
|
|
|
31
35
|
export { CraftButton, type CraftButtonProps, CraftInput, type CraftInputProps, GlassCard, type GlassCardProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,31 +1,35 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import * as React from 'react';
|
|
2
|
+
import * as React$1 from 'react';
|
|
3
3
|
|
|
4
|
-
type CraftButtonVariant = "solid" | "ghost" | "outline";
|
|
4
|
+
type CraftButtonVariant = "solid" | "ghost" | "outline" | "gradient";
|
|
5
5
|
type CraftButtonSize = "sm" | "md" | "lg";
|
|
6
|
-
type CraftButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
6
|
+
type CraftButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
7
7
|
variant?: CraftButtonVariant;
|
|
8
8
|
size?: CraftButtonSize;
|
|
9
9
|
glow?: boolean;
|
|
10
10
|
};
|
|
11
|
-
declare function CraftButton({ className, variant, size, glow, ...props }: CraftButtonProps): react_jsx_runtime.JSX.Element;
|
|
11
|
+
declare function CraftButton({ className, variant, size, glow, disabled, ...props }: CraftButtonProps): react_jsx_runtime.JSX.Element;
|
|
12
12
|
|
|
13
13
|
type GlassCardProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
14
|
-
tone?: "aurora" | "ember" | "ocean";
|
|
14
|
+
tone?: "aurora" | "ember" | "ocean" | "midnight" | "cosmic";
|
|
15
|
+
intensity?: "subtle" | "medium" | "strong";
|
|
16
|
+
bordered?: boolean;
|
|
15
17
|
};
|
|
16
|
-
declare function GlassCard({ className, tone, ...props }: GlassCardProps): react_jsx_runtime.JSX.Element;
|
|
18
|
+
declare function GlassCard({ className, tone, intensity, bordered, children, ...props }: GlassCardProps): react_jsx_runtime.JSX.Element;
|
|
17
19
|
|
|
18
|
-
type CraftInputTone = "aurora" | "ember" | "ocean";
|
|
20
|
+
type CraftInputTone = "aurora" | "ember" | "ocean" | "midnight";
|
|
19
21
|
type CraftInputSize = "sm" | "md" | "lg";
|
|
20
|
-
type CraftInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
|
|
22
|
+
type CraftInputProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> & {
|
|
21
23
|
tone?: CraftInputTone;
|
|
22
24
|
inputSize?: CraftInputSize;
|
|
23
25
|
glow?: boolean;
|
|
26
|
+
icon?: React$1.ReactNode;
|
|
24
27
|
};
|
|
25
|
-
declare const CraftInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
|
|
28
|
+
declare const CraftInput: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> & {
|
|
26
29
|
tone?: CraftInputTone;
|
|
27
30
|
inputSize?: CraftInputSize;
|
|
28
31
|
glow?: boolean;
|
|
29
|
-
|
|
32
|
+
icon?: React$1.ReactNode;
|
|
33
|
+
} & React$1.RefAttributes<HTMLInputElement>>;
|
|
30
34
|
|
|
31
35
|
export { CraftButton, type CraftButtonProps, CraftInput, type CraftInputProps, GlassCard, type GlassCardProps };
|
package/dist/index.js
CHANGED
|
@@ -1,100 +1,130 @@
|
|
|
1
|
-
// src/utils/cn.ts
|
|
2
|
-
function cn(...values) {
|
|
3
|
-
return values.filter(Boolean).join(" ");
|
|
4
|
-
}
|
|
5
|
-
|
|
6
1
|
// src/components/craft-button.tsx
|
|
7
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
var cn = (...classes) => classes.filter(Boolean).join(" ");
|
|
8
4
|
var sizeClasses = {
|
|
9
|
-
sm: "h-9 px-
|
|
10
|
-
md: "h-11 px-
|
|
11
|
-
lg: "h-
|
|
5
|
+
sm: "h-9 px-4 text-xs",
|
|
6
|
+
md: "h-11 px-6 text-sm",
|
|
7
|
+
lg: "h-13 px-8 text-base"
|
|
12
8
|
};
|
|
13
9
|
var variantClasses = {
|
|
14
|
-
solid: "bg-
|
|
15
|
-
ghost: "bg-white/5 text-white hover:bg-white/10 border border-white/10",
|
|
16
|
-
outline: "bg-transparent text-
|
|
10
|
+
solid: "bg-gradient-to-br from-sky-400 via-blue-500 to-indigo-600 text-white shadow-lg shadow-blue-500/50 hover:shadow-xl hover:shadow-blue-500/60 hover:scale-[1.02] active:scale-[0.98]",
|
|
11
|
+
ghost: "bg-white/5 text-white hover:bg-white/10 backdrop-blur-sm border border-white/10 hover:border-white/20",
|
|
12
|
+
outline: "bg-transparent text-sky-400 border-2 border-sky-400/50 hover:border-sky-400 hover:bg-sky-400/10",
|
|
13
|
+
gradient: "bg-gradient-to-r from-violet-600 via-fuchsia-500 to-pink-500 text-white shadow-lg shadow-fuchsia-500/50 hover:shadow-xl hover:shadow-fuchsia-500/60 hover:scale-[1.02] active:scale-[0.98]"
|
|
17
14
|
};
|
|
18
15
|
function CraftButton({
|
|
19
16
|
className,
|
|
20
17
|
variant = "solid",
|
|
21
18
|
size = "md",
|
|
22
19
|
glow = true,
|
|
20
|
+
disabled,
|
|
23
21
|
...props
|
|
24
22
|
}) {
|
|
25
23
|
return /* @__PURE__ */ jsx(
|
|
26
24
|
"button",
|
|
27
25
|
{
|
|
28
26
|
className: cn(
|
|
29
|
-
"relative inline-flex items-center justify-center gap-2 rounded-
|
|
27
|
+
"relative inline-flex items-center justify-center gap-2 rounded-xl font-semibold tracking-wide transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100",
|
|
30
28
|
sizeClasses[size],
|
|
31
29
|
variantClasses[variant],
|
|
32
|
-
glow && variant === "solid" ? "before:absolute before:-inset-
|
|
30
|
+
glow && (variant === "solid" || variant === "gradient") ? "before:absolute before:-inset-1 before:rounded-xl before:bg-linear-to-r before:from-sky-400/20 before:via-blue-500/20 before:to-indigo-600/20 before:blur-xl before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity" : "",
|
|
33
31
|
className
|
|
34
32
|
),
|
|
33
|
+
disabled,
|
|
35
34
|
...props
|
|
36
35
|
}
|
|
37
36
|
);
|
|
38
37
|
}
|
|
39
38
|
|
|
39
|
+
// src/utils/cn.ts
|
|
40
|
+
function cn2(...values) {
|
|
41
|
+
return values.filter(Boolean).join(" ");
|
|
42
|
+
}
|
|
43
|
+
|
|
40
44
|
// src/components/glass-card.tsx
|
|
41
45
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
42
|
-
var
|
|
43
|
-
aurora: "from-emerald-
|
|
44
|
-
ember: "from-amber-
|
|
45
|
-
ocean: "from-sky-
|
|
46
|
+
var cardToneClasses = {
|
|
47
|
+
aurora: "bg-gradient-to-br from-emerald-400/15 via-teal-400/10 to-cyan-400/15 border-emerald-300/30",
|
|
48
|
+
ember: "bg-gradient-to-br from-amber-400/15 via-orange-400/10 to-rose-400/15 border-amber-300/30",
|
|
49
|
+
ocean: "bg-gradient-to-br from-sky-400/15 via-blue-400/10 to-indigo-400/15 border-sky-300/30",
|
|
50
|
+
midnight: "bg-gradient-to-br from-violet-400/15 via-purple-400/10 to-fuchsia-400/15 border-violet-300/30",
|
|
51
|
+
cosmic: "bg-gradient-to-br from-pink-400/15 via-purple-400/10 to-indigo-400/15 border-pink-300/30"
|
|
52
|
+
};
|
|
53
|
+
var intensityClasses = {
|
|
54
|
+
subtle: "backdrop-blur-md bg-opacity-50",
|
|
55
|
+
medium: "backdrop-blur-xl bg-opacity-70",
|
|
56
|
+
strong: "backdrop-blur-2xl bg-opacity-90"
|
|
46
57
|
};
|
|
47
58
|
function GlassCard({
|
|
48
59
|
className,
|
|
49
|
-
tone = "
|
|
60
|
+
tone = "ocean",
|
|
61
|
+
intensity = "medium",
|
|
62
|
+
bordered = true,
|
|
63
|
+
children,
|
|
50
64
|
...props
|
|
51
65
|
}) {
|
|
52
66
|
return /* @__PURE__ */ jsx2(
|
|
53
67
|
"div",
|
|
54
68
|
{
|
|
55
|
-
className:
|
|
56
|
-
"relative overflow-hidden rounded-
|
|
57
|
-
"
|
|
58
|
-
|
|
69
|
+
className: cn2(
|
|
70
|
+
"relative overflow-hidden rounded-3xl p-6 text-white",
|
|
71
|
+
"shadow-[0_8px_32px_rgba(0,0,0,0.3)]",
|
|
72
|
+
"transition-all duration-300",
|
|
73
|
+
"hover:shadow-[0_8px_40px_rgba(0,0,0,0.4)]",
|
|
74
|
+
intensityClasses[intensity],
|
|
75
|
+
cardToneClasses[tone],
|
|
76
|
+
bordered ? "border-2" : "border-0",
|
|
77
|
+
"before:absolute before:inset-0 before:bg-linear-to-br before:from-white/10 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300",
|
|
59
78
|
className
|
|
60
79
|
),
|
|
61
|
-
...props
|
|
80
|
+
...props,
|
|
81
|
+
children: /* @__PURE__ */ jsx2("div", { className: "relative z-10", children })
|
|
62
82
|
}
|
|
63
83
|
);
|
|
64
84
|
}
|
|
65
85
|
|
|
66
86
|
// src/components/craft-input.tsx
|
|
67
87
|
import * as React from "react";
|
|
68
|
-
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
69
|
-
var
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
88
|
+
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
89
|
+
var cn3 = (...classes) => classes.filter(Boolean).join(" ");
|
|
90
|
+
var inputToneClasses = {
|
|
91
|
+
aurora: "border-emerald-400/30 focus:border-emerald-400/80 focus:ring-emerald-400/30 placeholder:text-emerald-200/40",
|
|
92
|
+
ember: "border-amber-400/30 focus:border-amber-400/80 focus:ring-amber-400/30 placeholder:text-amber-200/40",
|
|
93
|
+
ocean: "border-sky-400/30 focus:border-sky-400/80 focus:ring-sky-400/30 placeholder:text-sky-200/40",
|
|
94
|
+
midnight: "border-violet-400/30 focus:border-violet-400/80 focus:ring-violet-400/30 placeholder:text-violet-200/40"
|
|
73
95
|
};
|
|
74
|
-
var
|
|
75
|
-
sm: "h-
|
|
76
|
-
md: "h-
|
|
77
|
-
lg: "h-
|
|
96
|
+
var inputSizeClasses = {
|
|
97
|
+
sm: "h-10 px-4 text-sm",
|
|
98
|
+
md: "h-12 px-5 text-base",
|
|
99
|
+
lg: "h-14 px-6 text-lg"
|
|
78
100
|
};
|
|
79
101
|
var CraftInput = React.forwardRef(
|
|
80
|
-
({ className, tone = "
|
|
81
|
-
return /* @__PURE__ */
|
|
82
|
-
"
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
102
|
+
({ className, tone = "ocean", inputSize = "md", glow = true, icon, ...props }, ref) => {
|
|
103
|
+
return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
|
|
104
|
+
icon && /* @__PURE__ */ jsx3("div", { className: "absolute left-4 top-1/2 -translate-y-1/2 text-white/50", children: icon }),
|
|
105
|
+
/* @__PURE__ */ jsx3(
|
|
106
|
+
"input",
|
|
107
|
+
{
|
|
108
|
+
ref,
|
|
109
|
+
className: cn3(
|
|
110
|
+
"w-full rounded-2xl border-2 bg-white/5 text-white backdrop-blur-xl",
|
|
111
|
+
"shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]",
|
|
112
|
+
"focus:outline-none focus:ring-4",
|
|
113
|
+
"transition-all duration-300",
|
|
114
|
+
"disabled:opacity-50 disabled:cursor-not-allowed",
|
|
115
|
+
inputSizeClasses[inputSize],
|
|
116
|
+
inputToneClasses[tone],
|
|
117
|
+
glow ? "focus:shadow-[0_0_30px_-5px_var(--glow-color)]" : "",
|
|
118
|
+
icon ? "pl-12" : "",
|
|
119
|
+
className
|
|
120
|
+
),
|
|
121
|
+
style: {
|
|
122
|
+
"--glow-color": tone === "aurora" ? "rgba(52,211,153,0.5)" : tone === "ember" ? "rgba(251,191,36,0.5)" : tone === "midnight" ? "rgba(167,139,250,0.5)" : "rgba(56,189,248,0.5)"
|
|
123
|
+
},
|
|
124
|
+
...props
|
|
125
|
+
}
|
|
126
|
+
)
|
|
127
|
+
] });
|
|
98
128
|
}
|
|
99
129
|
);
|
|
100
130
|
CraftInput.displayName = "CraftInput";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/
|
|
1
|
+
{"version":3,"sources":["../src/components/craft-button.tsx","../src/utils/cn.ts","../src/components/glass-card.tsx","../src/components/craft-input.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst cn = (...classes: (string | boolean | undefined)[]) => \n classes.filter(Boolean).join(\" \");\n\ntype CraftButtonVariant = \"solid\" | \"ghost\" | \"outline\" | \"gradient\";\ntype CraftButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport type CraftButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n variant?: CraftButtonVariant;\n size?: CraftButtonSize;\n glow?: boolean;\n};\n\nconst sizeClasses: Record<CraftButtonSize, string> = {\n sm: \"h-9 px-4 text-xs\",\n md: \"h-11 px-6 text-sm\",\n lg: \"h-13 px-8 text-base\",\n};\n\nconst variantClasses: Record<CraftButtonVariant, string> = {\n solid:\n \"bg-gradient-to-br from-sky-400 via-blue-500 to-indigo-600 text-white shadow-lg shadow-blue-500/50 hover:shadow-xl hover:shadow-blue-500/60 hover:scale-[1.02] active:scale-[0.98]\",\n ghost:\n \"bg-white/5 text-white hover:bg-white/10 backdrop-blur-sm border border-white/10 hover:border-white/20\",\n outline:\n \"bg-transparent text-sky-400 border-2 border-sky-400/50 hover:border-sky-400 hover:bg-sky-400/10\",\n gradient:\n \"bg-gradient-to-r from-violet-600 via-fuchsia-500 to-pink-500 text-white shadow-lg shadow-fuchsia-500/50 hover:shadow-xl hover:shadow-fuchsia-500/60 hover:scale-[1.02] active:scale-[0.98]\",\n};\n\nexport function CraftButton({\n className,\n variant = \"solid\",\n size = \"md\",\n glow = true,\n disabled,\n ...props\n}: CraftButtonProps) {\n return (\n <button\n className={cn(\n \"relative inline-flex items-center justify-center gap-2 rounded-xl font-semibold tracking-wide transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100\",\n sizeClasses[size],\n variantClasses[variant],\n glow && (variant === \"solid\" || variant === \"gradient\")\n ? \"before:absolute before:-inset-1 before:rounded-xl before:bg-linear-to-r before:from-sky-400/20 before:via-blue-500/20 before:to-indigo-600/20 before:blur-xl before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity\"\n : \"\",\n className\n )}\n disabled={disabled}\n {...props}\n />\n );\n}","export function cn(...values: Array<string | false | null | undefined>): string {\n return values.filter(Boolean).join(\" \");\n}\n","import { cn } from \"@/utils/cn\";\n\nexport type GlassCardProps = React.HTMLAttributes<HTMLDivElement> & {\n tone?: \"aurora\" | \"ember\" | \"ocean\" | \"midnight\" | \"cosmic\";\n intensity?: \"subtle\" | \"medium\" | \"strong\";\n bordered?: boolean;\n};\n\nconst cardToneClasses: Record<NonNullable<GlassCardProps[\"tone\"]>, string> = {\n aurora:\n \"bg-gradient-to-br from-emerald-400/15 via-teal-400/10 to-cyan-400/15 border-emerald-300/30\",\n ember: \n \"bg-gradient-to-br from-amber-400/15 via-orange-400/10 to-rose-400/15 border-amber-300/30\",\n ocean: \n \"bg-gradient-to-br from-sky-400/15 via-blue-400/10 to-indigo-400/15 border-sky-300/30\",\n midnight:\n \"bg-gradient-to-br from-violet-400/15 via-purple-400/10 to-fuchsia-400/15 border-violet-300/30\",\n cosmic:\n \"bg-gradient-to-br from-pink-400/15 via-purple-400/10 to-indigo-400/15 border-pink-300/30\",\n};\n\nconst intensityClasses: Record<NonNullable<GlassCardProps[\"intensity\"]>, string> = {\n subtle: \"backdrop-blur-md bg-opacity-50\",\n medium: \"backdrop-blur-xl bg-opacity-70\",\n strong: \"backdrop-blur-2xl bg-opacity-90\",\n};\n\nexport function GlassCard({\n className,\n tone = \"ocean\",\n intensity = \"medium\",\n bordered = true,\n children,\n ...props\n}: GlassCardProps) {\n return (\n <div\n className={cn(\n \"relative overflow-hidden rounded-3xl p-6 text-white\",\n \"shadow-[0_8px_32px_rgba(0,0,0,0.3)]\",\n \"transition-all duration-300\",\n \"hover:shadow-[0_8px_40px_rgba(0,0,0,0.4)]\",\n intensityClasses[intensity],\n cardToneClasses[tone],\n bordered ? \"border-2\" : \"border-0\",\n \"before:absolute before:inset-0 before:bg-linear-to-br before:from-white/10 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300\",\n className\n )}\n {...props}\n >\n <div className=\"relative z-10\">{children}</div>\n </div>\n );\n}","\nimport * as React from \"react\";\n\nconst cn = (...classes: (string | boolean | undefined)[]) => \n classes.filter(Boolean).join(\" \");\n\n// ============================================================================\n// CRAFT INPUT\n// ============================================================================\n\ntype CraftInputTone = \"aurora\" | \"ember\" | \"ocean\" | \"midnight\";\ntype CraftInputSize = \"sm\" | \"md\" | \"lg\";\n\nexport type CraftInputProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"size\"\n> & {\n tone?: CraftInputTone;\n inputSize?: CraftInputSize;\n glow?: boolean;\n icon?: React.ReactNode;\n};\n\nconst inputToneClasses: Record<CraftInputTone, string> = {\n aurora:\n \"border-emerald-400/30 focus:border-emerald-400/80 focus:ring-emerald-400/30 placeholder:text-emerald-200/40\",\n ember:\n \"border-amber-400/30 focus:border-amber-400/80 focus:ring-amber-400/30 placeholder:text-amber-200/40\",\n ocean: \n \"border-sky-400/30 focus:border-sky-400/80 focus:ring-sky-400/30 placeholder:text-sky-200/40\",\n midnight:\n \"border-violet-400/30 focus:border-violet-400/80 focus:ring-violet-400/30 placeholder:text-violet-200/40\",\n};\n\nconst inputSizeClasses: Record<CraftInputSize, string> = {\n sm: \"h-10 px-4 text-sm\",\n md: \"h-12 px-5 text-base\",\n lg: \"h-14 px-6 text-lg\",\n};\n\nexport const CraftInput = React.forwardRef<HTMLInputElement, CraftInputProps>(\n (\n { className, tone = \"ocean\", inputSize = \"md\", glow = true, icon, ...props },\n ref\n ) => {\n return (\n <div className=\"relative w-full\">\n {icon && (\n <div className=\"absolute left-4 top-1/2 -translate-y-1/2 text-white/50\">\n {icon}\n </div>\n )}\n <input\n ref={ref}\n className={cn(\n \"w-full rounded-2xl border-2 bg-white/5 text-white backdrop-blur-xl\",\n \"shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]\",\n \"focus:outline-none focus:ring-4\",\n \"transition-all duration-300\",\n \"disabled:opacity-50 disabled:cursor-not-allowed\",\n inputSizeClasses[inputSize],\n inputToneClasses[tone],\n glow ? \"focus:shadow-[0_0_30px_-5px_var(--glow-color)]\" : \"\",\n icon ? \"pl-12\" : \"\",\n className\n )}\n style={{\n \"--glow-color\": tone === \"aurora\" ? \"rgba(52,211,153,0.5)\" : \n tone === \"ember\" ? \"rgba(251,191,36,0.5)\" : \n tone === \"midnight\" ? \"rgba(167,139,250,0.5)\" :\n \"rgba(56,189,248,0.5)\"\n } as React.CSSProperties}\n {...props}\n />\n </div>\n );\n }\n);\n\nCraftInput.displayName = \"CraftInput\";"],"mappings":";AAwCI;AAtCJ,IAAM,KAAK,IAAI,YACb,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AAWlC,IAAM,cAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,iBAAqD;AAAA,EACzD,OACE;AAAA,EACF,OACE;AAAA,EACF,SACE;AAAA,EACF,UACE;AACJ;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,YAAY,IAAI;AAAA,QAChB,eAAe,OAAO;AAAA,QACtB,SAAS,YAAY,WAAW,YAAY,cACxC,kPACA;AAAA,QACJ;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;;;ACtDO,SAASA,OAAM,QAA0D;AAC9E,SAAO,OAAO,OAAO,OAAO,EAAE,KAAK,GAAG;AACxC;;;ACgDM,gBAAAC,YAAA;AA1CN,IAAM,kBAAuE;AAAA,EAC3E,QACE;AAAA,EACF,OACE;AAAA,EACF,OACE;AAAA,EACF,UACE;AAAA,EACF,QACE;AACJ;AAEA,IAAM,mBAA6E;AAAA,EACjF,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AACV;AAEO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,iBAAiB,SAAS;AAAA,QAC1B,gBAAgB,IAAI;AAAA,QACpB,WAAW,aAAa;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,0BAAAD,KAAC,SAAI,WAAU,iBAAiB,UAAS;AAAA;AAAA,EAC3C;AAEJ;;;ACpDA,YAAY,WAAW;AA6CjB,SAEI,OAAAE,MAFJ;AA3CN,IAAMC,MAAK,IAAI,YACb,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AAmBlC,IAAM,mBAAmD;AAAA,EACvD,QACE;AAAA,EACF,OACE;AAAA,EACF,OACE;AAAA,EACF,UACE;AACJ;AAEA,IAAM,mBAAmD;AAAA,EACvD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,aAAmB;AAAA,EAC9B,CACE,EAAE,WAAW,OAAO,SAAS,YAAY,MAAM,OAAO,MAAM,MAAM,GAAG,MAAM,GAC3E,QACG;AACH,WACE,qBAAC,SAAI,WAAU,mBACZ;AAAA,cACC,gBAAAD,KAAC,SAAI,WAAU,0DACZ,gBACH;AAAA,MAEF,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAWC;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,iBAAiB,SAAS;AAAA,YAC1B,iBAAiB,IAAI;AAAA,YACrB,OAAO,mDAAmD;AAAA,YAC1D,OAAO,UAAU;AAAA,YACjB;AAAA,UACF;AAAA,UACA,OAAO;AAAA,YACL,gBAAgB,SAAS,WAAW,yBACpB,SAAS,UAAU,yBACnB,SAAS,aAAa,0BACtB;AAAA,UAClB;AAAA,UACC,GAAG;AAAA;AAAA,MACN;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;","names":["cn","jsx","cn","jsx","cn"]}
|