@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-env-var-editor/index.es.js

@@ -0,0 +1,289 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Badge as t } from "../badge/index.es.js";
+import { Button as n } from "../button/index.es.js";
+import { Input as r } from "../input/index.es.js";
+import { ScrollArea as i } from "../scroll-area/index.es.js";
+import { Tooltip as a, TooltipContent as o, TooltipProvider as s, TooltipTrigger as c } from "../tooltip/index.es.js";
+import * as l from "react";
+import { AlertTriangle as u, CheckCircle2 as d, Copy as f, Download as p, Eye as m, EyeOff as h, Lock as g, Plus as _, Save as v, Search as y, Trash2 as b, Unlock as x, Upload as S, Variable as C } from "lucide-react";
+import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
+//#region src/components/waka-env-var-editor/index.tsx
+function D({ variable: i, index: p, onChange: _, onDelete: v, readOnly: y, showSource: S }) {
+	let [C, w] = l.useState(!i.isSecret), [D, O] = l.useState(!1);
+	return i.isSecret && !C ? "•".repeat(Math.min(i.value.length, 20)) : i.value, /* @__PURE__ */ E("div", {
+		className: e("flex items-center gap-2 p-2 border-b hover:bg-muted/30 transition-colors", i.isRequired && !i.value && "bg-yellow-500/5"),
+		children: [
+			/* @__PURE__ */ T(s, { children: /* @__PURE__ */ E(a, { children: [/* @__PURE__ */ T(c, {
+				asChild: !0,
+				children: /* @__PURE__ */ T("button", {
+					className: e("p-1.5 rounded hover:bg-muted transition-colors", y && "pointer-events-none"),
+					onClick: () => !y && _(p, "isSecret", !i.isSecret),
+					children: i.isSecret ? /* @__PURE__ */ T(g, { className: "h-4 w-4 text-yellow-500" }) : /* @__PURE__ */ T(x, { className: "h-4 w-4 text-muted-foreground" })
+				})
+			}), /* @__PURE__ */ T(o, { children: i.isSecret ? "Secret variable" : "Not a secret" })] }) }),
+			/* @__PURE__ */ T(r, {
+				value: i.key,
+				onChange: (e) => _(p, "key", e.target.value),
+				placeholder: "KEY_NAME",
+				className: "font-mono text-sm w-48 h-8",
+				readOnly: y
+			}),
+			/* @__PURE__ */ T("span", {
+				className: "text-muted-foreground",
+				children: "="
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "flex-1 relative",
+				children: [/* @__PURE__ */ T(r, {
+					type: i.isSecret && !C ? "password" : "text",
+					value: i.value,
+					onChange: (e) => _(p, "value", e.target.value),
+					placeholder: "value",
+					className: "font-mono text-sm h-8 pr-16",
+					readOnly: y
+				}), /* @__PURE__ */ E("div", {
+					className: "absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-1",
+					children: [i.isSecret && /* @__PURE__ */ T(n, {
+						variant: "ghost",
+						size: "sm",
+						className: "h-6 w-6 p-0",
+						onClick: () => w(!C),
+						children: T(C ? h : m, { className: "h-3 w-3" })
+					}), /* @__PURE__ */ T(n, {
+						variant: "ghost",
+						size: "sm",
+						className: "h-6 w-6 p-0",
+						onClick: () => {
+							navigator.clipboard.writeText(i.value), O(!0), setTimeout(() => O(!1), 2e3);
+						},
+						children: D ? /* @__PURE__ */ T(d, { className: "h-3 w-3 text-green-500" }) : /* @__PURE__ */ T(f, { className: "h-3 w-3" })
+					})]
+				})]
+			}),
+			S && i.source && /* @__PURE__ */ T(t, {
+				variant: "outline",
+				className: "text-xs shrink-0",
+				children: i.source
+			}),
+			i.isRequired && !i.value && /* @__PURE__ */ T(s, { children: /* @__PURE__ */ E(a, { children: [/* @__PURE__ */ T(c, { children: /* @__PURE__ */ T(u, { className: "h-4 w-4 text-yellow-500" }) }), /* @__PURE__ */ T(o, { children: "Required variable is empty" })] }) }),
+			!y && /* @__PURE__ */ T(n, {
+				variant: "ghost",
+				size: "sm",
+				className: "h-8 w-8 p-0 text-destructive hover:text-destructive",
+				onClick: () => v(p),
+				children: /* @__PURE__ */ T(b, { className: "h-4 w-4" })
+			})
+		]
+	});
+}
+function O({ variables: a, onChange: o, onSave: s, onImport: c, onExport: d, readOnly: f = !1, showSource: m = !1, title: h = "Environment Variables", className: b }) {
+	let [x, O] = l.useState(a), [k, A] = l.useState(""), [j, M] = l.useState(!1), N = l.useRef(null);
+	l.useEffect(() => {
+		O(a), M(!1);
+	}, [a]);
+	let P = (e, t, n) => {
+		let r = [...x];
+		r[e] = {
+			...r[e],
+			[t]: n
+		}, O(r), M(!0), o?.(r);
+	}, F = (e) => {
+		let t = x.filter((t, n) => n !== e);
+		O(t), M(!0), o?.(t);
+	}, I = () => {
+		let e = [...x, {
+			key: "",
+			value: "",
+			isSecret: !1
+		}];
+		O(e), M(!0), o?.(e);
+	}, L = () => {
+		s?.(x), M(!1);
+	}, R = (e) => {
+		let t = e.target.files?.[0];
+		if (t) {
+			let e = new FileReader();
+			e.onload = (e) => {
+				let t = e.target?.result;
+				if (c) c(t);
+				else {
+					let e = t.split("\n").filter((e) => e.trim() && !e.startsWith("#")).map((e) => {
+						let [t, ...n] = e.split("="), r = n.join("=").replace(/^["']|["']$/g, "");
+						return {
+							key: t.trim(),
+							value: r,
+							isSecret: t.includes("SECRET") || t.includes("PASSWORD") || t.includes("KEY")
+						};
+					});
+					O(e), M(!0), o?.(e);
+				}
+			}, e.readAsText(t);
+		}
+		N.current && (N.current.value = "");
+	}, z = x.filter((e) => e.key.toLowerCase().includes(k.toLowerCase()) || !e.isSecret && e.value.toLowerCase().includes(k.toLowerCase())), B = x.filter((e) => e.isSecret).length, V = x.filter((e) => e.isRequired && !e.value).length;
+	return /* @__PURE__ */ E("div", {
+		className: e("flex flex-col border rounded-lg bg-background", b),
+		children: [
+			/* @__PURE__ */ E("div", {
+				className: "flex items-center justify-between gap-4 p-3 border-b",
+				children: [/* @__PURE__ */ E("div", {
+					className: "flex items-center gap-3",
+					children: [
+						/* @__PURE__ */ T(C, { className: "h-5 w-5" }),
+						/* @__PURE__ */ T("h3", {
+							className: "font-semibold",
+							children: h
+						}),
+						/* @__PURE__ */ T(t, {
+							variant: "secondary",
+							children: x.length
+						}),
+						B > 0 && /* @__PURE__ */ E(t, {
+							variant: "outline",
+							className: "text-yellow-500",
+							children: [
+								/* @__PURE__ */ T(g, { className: "h-3 w-3 mr-1" }),
+								B,
+								" secrets"
+							]
+						}),
+						V > 0 && /* @__PURE__ */ E(t, {
+							variant: "outline",
+							className: "text-yellow-500",
+							children: [
+								/* @__PURE__ */ T(u, { className: "h-3 w-3 mr-1" }),
+								V,
+								" missing"
+							]
+						})
+					]
+				}), /* @__PURE__ */ T("div", {
+					className: "flex items-center gap-2",
+					children: s && j && /* @__PURE__ */ E(n, {
+						size: "sm",
+						onClick: L,
+						children: [/* @__PURE__ */ T(v, { className: "h-4 w-4 mr-1" }), "Save"]
+					})
+				})]
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "flex items-center gap-2 p-2 border-b bg-muted/30",
+				children: [
+					/* @__PURE__ */ E("div", {
+						className: "relative flex-1 max-w-sm",
+						children: [/* @__PURE__ */ T(y, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ T(r, {
+							placeholder: "Search variables...",
+							value: k,
+							onChange: (e) => A(e.target.value),
+							className: "pl-8 h-8"
+						})]
+					}),
+					!f && /* @__PURE__ */ E(w, { children: [
+						/* @__PURE__ */ E(n, {
+							variant: "outline",
+							size: "sm",
+							className: "h-8",
+							onClick: I,
+							children: [/* @__PURE__ */ T(_, { className: "h-4 w-4 mr-1" }), "Add"]
+						}),
+						/* @__PURE__ */ T("input", {
+							type: "file",
+							ref: N,
+							accept: ".env,.txt",
+							onChange: R,
+							className: "hidden"
+						}),
+						/* @__PURE__ */ E(n, {
+							variant: "outline",
+							size: "sm",
+							className: "h-8",
+							onClick: () => N.current?.click(),
+							children: [/* @__PURE__ */ T(S, { className: "h-4 w-4 mr-1" }), "Import"]
+						})
+					] }),
+					d && /* @__PURE__ */ E(n, {
+						variant: "outline",
+						size: "sm",
+						className: "h-8",
+						onClick: d,
+						children: [/* @__PURE__ */ T(p, { className: "h-4 w-4 mr-1" }), "Export"]
+					})
+				]
+			}),
+			/* @__PURE__ */ T(i, {
+				className: "flex-1 max-h-[400px]",
+				children: z.length === 0 ? /* @__PURE__ */ E("div", {
+					className: "flex flex-col items-center justify-center h-32 text-muted-foreground",
+					children: [
+						/* @__PURE__ */ T(C, { className: "h-8 w-8 mb-2" }),
+						/* @__PURE__ */ T("span", { children: "No variables found" }),
+						!f && /* @__PURE__ */ T(n, {
+							variant: "link",
+							size: "sm",
+							onClick: I,
+							children: "Add your first variable"
+						})
+					]
+				}) : z.map((e, t) => /* @__PURE__ */ T(D, {
+					variable: e,
+					index: x.indexOf(e),
+					onChange: P,
+					onDelete: F,
+					readOnly: f,
+					showSource: m
+				}, t))
+			}),
+			!f && /* @__PURE__ */ T("div", {
+				className: "px-3 py-2 border-t bg-muted/30 text-xs text-muted-foreground",
+				children: "💡 Click the lock icon to mark a variable as secret. Secrets are masked by default."
+			})
+		]
+	});
+}
+var k = [
+	{
+		key: "NODE_ENV",
+		value: "production",
+		isRequired: !0
+	},
+	{
+		key: "DATABASE_URL",
+		value: "postgresql://user:pass@localhost:5432/db",
+		isSecret: !0,
+		isRequired: !0
+	},
+	{
+		key: "API_KEY",
+		value: "sk-1234567890abcdef",
+		isSecret: !0
+	},
+	{
+		key: "PORT",
+		value: "3000"
+	},
+	{
+		key: "LOG_LEVEL",
+		value: "info"
+	},
+	{
+		key: "REDIS_URL",
+		value: "redis://localhost:6379",
+		isSecret: !0
+	},
+	{
+		key: "AWS_ACCESS_KEY_ID",
+		value: "",
+		isSecret: !0,
+		isRequired: !0
+	},
+	{
+		key: "AWS_SECRET_ACCESS_KEY",
+		value: "",
+		isSecret: !0,
+		isRequired: !0
+	}
+];
+//#endregion
+export { O as WakaEnvVarEditor, k as defaultEnvVariables };

package/dist/components/waka-error-shake/index.cjs.js

@@ -0,0 +1,62 @@
+"use client";"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../utils/cn.cjs.js");let n=require("react");n=e.__toESM(n);let r=require("react/jsx-runtime");var i={light:{shake:`4px`,duration:300,glitchOffset:`2px`,flashOpacity:.1},medium:{shake:`8px`,duration:400,glitchOffset:`4px`,flashOpacity:.15},strong:{shake:`12px`,duration:500,glitchOffset:`6px`,flashOpacity:.2}},a=n.forwardRef(({className:e,trigger:a=!1,intensity:o=`medium`,duration:s,glitchEffect:c=!1,flashEffect:l=!0,flashColor:u=`rgb(239 68 68)`,onComplete:d,children:f,style:p,...m},h)=>{let[g,_]=n.useState(!1),[v,y]=n.useState(0),b=n.useRef(null),x=i[o],S=s??x.duration,C=n.useCallback(()=>{_(!0),y(e=>e+1),typeof navigator<`u`&&`vibrate`in navigator&&navigator.vibrate([30,20,30]),setTimeout(()=>{_(!1),d?.()},S)},[S,d]),w=n.useCallback(()=>{_(!1)},[]);return n.useImperativeHandle(h,()=>({shake:C,reset:w}),[C,w]),n.useEffect(()=>{a&&C()},[a,C]),(0,r.jsxs)(`div`,{ref:b,className:t.cn(`relative inline-block`,e),style:p,...m,children:[(0,r.jsx)(`div`,{className:t.cn(g&&`waka-error-shake-animation`),style:g?{"--shake-distance":x.shake,"--shake-duration":`${S}ms`}:void 0,children:f},v),l&&g&&(0,r.jsx)(`div`,{className:`absolute inset-0 pointer-events-none rounded-inherit waka-error-flash-animation`,style:{backgroundColor:u,"--flash-opacity":x.flashOpacity,"--flash-duration":`${S}ms`}}),c&&g&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(`div`,{className:`absolute inset-0 pointer-events-none waka-error-glitch-red`,style:{"--glitch-offset":x.glitchOffset,"--glitch-duration":`${S}ms`,mixBlendMode:`multiply`,opacity:.5},children:(0,r.jsx)(`div`,{style:{filter:`url(#waka-glitch-red-filter)`,opacity:.7},children:f})}),(0,r.jsx)(`div`,{className:`absolute inset-0 pointer-events-none waka-error-glitch-cyan`,style:{"--glitch-offset":x.glitchOffset,"--glitch-duration":`${S}ms`,mixBlendMode:`multiply`,opacity:.5},children:(0,r.jsx)(`div`,{style:{filter:`url(#waka-glitch-cyan-filter)`,opacity:.7},children:f})}),(0,r.jsx)(`div`,{className:`absolute inset-0 pointer-events-none waka-error-scanlines`,style:{background:`repeating-linear-gradient(
+                  0deg,
+                  transparent,
+                  transparent 2px,
+                  rgba(0, 0, 0, 0.1) 2px,
+                  rgba(0, 0, 0, 0.1) 4px
+                )`,opacity:.3}})]}),c&&(0,r.jsx)(`svg`,{className:`absolute w-0 h-0`,"aria-hidden":`true`,children:(0,r.jsxs)(`defs`,{children:[(0,r.jsx)(`filter`,{id:`waka-glitch-red-filter`,children:(0,r.jsx)(`feColorMatrix`,{type:`matrix`,values:`1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0`})}),(0,r.jsx)(`filter`,{id:`waka-glitch-cyan-filter`,children:(0,r.jsx)(`feColorMatrix`,{type:`matrix`,values:`0 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0`})})]})}),(0,r.jsx)(`style`,{dangerouslySetInnerHTML:{__html:`
+              @keyframes waka-error-shake {
+                0%, 100% { transform: translateX(0); }
+                10%, 30%, 50%, 70%, 90% { transform: translateX(calc(-1 * var(--shake-distance))); }
+                20%, 40%, 60%, 80% { transform: translateX(var(--shake-distance)); }
+              }
+
+              @keyframes waka-error-flash {
+                0%, 100% { opacity: 0; }
+                25%, 75% { opacity: var(--flash-opacity); }
+                50% { opacity: calc(var(--flash-opacity) * 1.5); }
+              }
+
+              @keyframes waka-error-glitch-red {
+                0%, 100% { transform: translateX(0); }
+                25% { transform: translateX(var(--glitch-offset)); }
+                50% { transform: translateX(calc(-0.5 * var(--glitch-offset))); }
+                75% { transform: translateX(calc(0.75 * var(--glitch-offset))); }
+              }
+
+              @keyframes waka-error-glitch-cyan {
+                0%, 100% { transform: translateX(0); }
+                25% { transform: translateX(calc(-1 * var(--glitch-offset))); }
+                50% { transform: translateX(calc(0.5 * var(--glitch-offset))); }
+                75% { transform: translateX(calc(-0.75 * var(--glitch-offset))); }
+              }
+
+              @keyframes waka-error-scanlines {
+                0% { background-position: 0 0; }
+                100% { background-position: 0 4px; }
+              }
+
+              .waka-error-shake-animation {
+                animation: waka-error-shake var(--shake-duration) ease-in-out;
+              }
+
+              .waka-error-flash-animation {
+                animation: waka-error-flash var(--flash-duration) ease-out;
+              }
+
+              .waka-error-glitch-red {
+                animation: waka-error-glitch-red var(--glitch-duration) steps(3) infinite;
+              }
+
+              .waka-error-glitch-cyan {
+                animation: waka-error-glitch-cyan var(--glitch-duration) steps(3) infinite;
+              }
+
+              .waka-error-scanlines {
+                animation: waka-error-scanlines 100ms linear infinite;
+              }
+
+              .rounded-inherit {
+                border-radius: inherit;
+              }
+            `}})]})});a.displayName=`WakaErrorShake`;function o(e={}){let t=n.useRef(null),[i,o]=n.useState(!1),s=n.useCallback(()=>{o(!0),t.current?.shake()},[]),c=n.useCallback(()=>{o(!1),t.current?.reset()},[]),l=n.useCallback(()=>{o(!1),e.onComplete?.()},[e]);return{ref:t,isShaking:i,shake:s,reset:c,ShakeWrapper:n.useCallback(({children:n})=>(0,r.jsx)(a,{ref:t,intensity:e.intensity,duration:e.duration,glitchEffect:e.glitchEffect,flashEffect:e.flashEffect,flashColor:e.flashColor,onComplete:l,children:n}),[e,l])}}var s=n.forwardRef(({hasError:e=!1,...t},i)=>{let[o,s]=n.useState(!1),[c,l]=n.useState(!1);return n.useEffect(()=>{e&&!o&&(l(!0),requestAnimationFrame(()=>{l(!1)})),s(e)},[e,o]),(0,r.jsx)(a,{ref:i,trigger:c,...t})});s.displayName=`WakaFormFieldShake`,exports.WakaErrorShake=a,exports.WakaFormFieldShake=s,exports.useErrorShake=o;

package/dist/components/waka-error-shake/index.d.ts

@@ -34,7 +34,7 @@ export interface UseErrorShakeOptions {
     onComplete?: () => void;
 }
 export declare function useErrorShake(options?: UseErrorShakeOptions): {
-    ref: React.MutableRefObject<WakaErrorShakeRef>;
+    ref: React.RefObject<WakaErrorShakeRef | null>;
     isShaking: boolean;
     shake: () => void;
     reset: () => void;

package/dist/components/waka-error-shake/index.es.js

@@ -0,0 +1,167 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/waka-error-shake/index.tsx
+var a = {
+	light: {
+		shake: "4px",
+		duration: 300,
+		glitchOffset: "2px",
+		flashOpacity: .1
+	},
+	medium: {
+		shake: "8px",
+		duration: 400,
+		glitchOffset: "4px",
+		flashOpacity: .15
+	},
+	strong: {
+		shake: "12px",
+		duration: 500,
+		glitchOffset: "6px",
+		flashOpacity: .2
+	}
+}, o = t.forwardRef(({ className: o, trigger: s = !1, intensity: c = "medium", duration: l, glitchEffect: u = !1, flashEffect: d = !0, flashColor: f = "rgb(239 68 68)", onComplete: p, children: m, style: h, ...g }, _) => {
+	let [v, y] = t.useState(!1), [b, x] = t.useState(0), S = t.useRef(null), C = a[c], w = l ?? C.duration, T = t.useCallback(() => {
+		y(!0), x((e) => e + 1), typeof navigator < "u" && "vibrate" in navigator && navigator.vibrate([
+			30,
+			20,
+			30
+		]), setTimeout(() => {
+			y(!1), p?.();
+		}, w);
+	}, [w, p]), E = t.useCallback(() => {
+		y(!1);
+	}, []);
+	return t.useImperativeHandle(_, () => ({
+		shake: T,
+		reset: E
+	}), [T, E]), t.useEffect(() => {
+		s && T();
+	}, [s, T]), /* @__PURE__ */ i("div", {
+		ref: S,
+		className: e("relative inline-block", o),
+		style: h,
+		...g,
+		children: [
+			/* @__PURE__ */ r("div", {
+				className: e(v && "waka-error-shake-animation"),
+				style: v ? {
+					"--shake-distance": C.shake,
+					"--shake-duration": `${w}ms`
+				} : void 0,
+				children: m
+			}, b),
+			d && v && /* @__PURE__ */ r("div", {
+				className: "absolute inset-0 pointer-events-none rounded-inherit waka-error-flash-animation",
+				style: {
+					backgroundColor: f,
+					"--flash-opacity": C.flashOpacity,
+					"--flash-duration": `${w}ms`
+				}
+			}),
+			u && v && /* @__PURE__ */ i(n, { children: [
+				/* @__PURE__ */ r("div", {
+					className: "absolute inset-0 pointer-events-none waka-error-glitch-red",
+					style: {
+						"--glitch-offset": C.glitchOffset,
+						"--glitch-duration": `${w}ms`,
+						mixBlendMode: "multiply",
+						opacity: .5
+					},
+					children: /* @__PURE__ */ r("div", {
+						style: {
+							filter: "url(#waka-glitch-red-filter)",
+							opacity: .7
+						},
+						children: m
+					})
+				}),
+				/* @__PURE__ */ r("div", {
+					className: "absolute inset-0 pointer-events-none waka-error-glitch-cyan",
+					style: {
+						"--glitch-offset": C.glitchOffset,
+						"--glitch-duration": `${w}ms`,
+						mixBlendMode: "multiply",
+						opacity: .5
+					},
+					children: /* @__PURE__ */ r("div", {
+						style: {
+							filter: "url(#waka-glitch-cyan-filter)",
+							opacity: .7
+						},
+						children: m
+					})
+				}),
+				/* @__PURE__ */ r("div", {
+					className: "absolute inset-0 pointer-events-none waka-error-scanlines",
+					style: {
+						background: "repeating-linear-gradient(\n                  0deg,\n                  transparent,\n                  transparent 2px,\n                  rgba(0, 0, 0, 0.1) 2px,\n                  rgba(0, 0, 0, 0.1) 4px\n                )",
+						opacity: .3
+					}
+				})
+			] }),
+			u && /* @__PURE__ */ r("svg", {
+				className: "absolute w-0 h-0",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ i("defs", { children: [/* @__PURE__ */ r("filter", {
+					id: "waka-glitch-red-filter",
+					children: /* @__PURE__ */ r("feColorMatrix", {
+						type: "matrix",
+						values: "1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0"
+					})
+				}), /* @__PURE__ */ r("filter", {
+					id: "waka-glitch-cyan-filter",
+					children: /* @__PURE__ */ r("feColorMatrix", {
+						type: "matrix",
+						values: "0 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+					})
+				})] })
+			}),
+			/* @__PURE__ */ r("style", { dangerouslySetInnerHTML: { __html: "\n              @keyframes waka-error-shake {\n                0%, 100% { transform: translateX(0); }\n                10%, 30%, 50%, 70%, 90% { transform: translateX(calc(-1 * var(--shake-distance))); }\n                20%, 40%, 60%, 80% { transform: translateX(var(--shake-distance)); }\n              }\n\n              @keyframes waka-error-flash {\n                0%, 100% { opacity: 0; }\n                25%, 75% { opacity: var(--flash-opacity); }\n                50% { opacity: calc(var(--flash-opacity) * 1.5); }\n              }\n\n              @keyframes waka-error-glitch-red {\n                0%, 100% { transform: translateX(0); }\n                25% { transform: translateX(var(--glitch-offset)); }\n                50% { transform: translateX(calc(-0.5 * var(--glitch-offset))); }\n                75% { transform: translateX(calc(0.75 * var(--glitch-offset))); }\n              }\n\n              @keyframes waka-error-glitch-cyan {\n                0%, 100% { transform: translateX(0); }\n                25% { transform: translateX(calc(-1 * var(--glitch-offset))); }\n                50% { transform: translateX(calc(0.5 * var(--glitch-offset))); }\n                75% { transform: translateX(calc(-0.75 * var(--glitch-offset))); }\n              }\n\n              @keyframes waka-error-scanlines {\n                0% { background-position: 0 0; }\n                100% { background-position: 0 4px; }\n              }\n\n              .waka-error-shake-animation {\n                animation: waka-error-shake var(--shake-duration) ease-in-out;\n              }\n\n              .waka-error-flash-animation {\n                animation: waka-error-flash var(--flash-duration) ease-out;\n              }\n\n              .waka-error-glitch-red {\n                animation: waka-error-glitch-red var(--glitch-duration) steps(3) infinite;\n              }\n\n              .waka-error-glitch-cyan {\n                animation: waka-error-glitch-cyan var(--glitch-duration) steps(3) infinite;\n              }\n\n              .waka-error-scanlines {\n                animation: waka-error-scanlines 100ms linear infinite;\n              }\n\n              .rounded-inherit {\n                border-radius: inherit;\n              }\n            " } })
+		]
+	});
+});
+o.displayName = "WakaErrorShake";
+function s(e = {}) {
+	let n = t.useRef(null), [i, a] = t.useState(!1), s = t.useCallback(() => {
+		a(!0), n.current?.shake();
+	}, []), c = t.useCallback(() => {
+		a(!1), n.current?.reset();
+	}, []), l = t.useCallback(() => {
+		a(!1), e.onComplete?.();
+	}, [e]);
+	return {
+		ref: n,
+		isShaking: i,
+		shake: s,
+		reset: c,
+		ShakeWrapper: t.useCallback(({ children: t }) => /* @__PURE__ */ r(o, {
+			ref: n,
+			intensity: e.intensity,
+			duration: e.duration,
+			glitchEffect: e.glitchEffect,
+			flashEffect: e.flashEffect,
+			flashColor: e.flashColor,
+			onComplete: l,
+			children: t
+		}), [e, l])
+	};
+}
+var c = t.forwardRef(({ hasError: e = !1, ...n }, i) => {
+	let [a, s] = t.useState(!1), [c, l] = t.useState(!1);
+	return t.useEffect(() => {
+		e && !a && (l(!0), requestAnimationFrame(() => {
+			l(!1);
+		})), s(e);
+	}, [e, a]), /* @__PURE__ */ r(o, {
+		ref: i,
+		trigger: c,
+		...n
+	});
+});
+c.displayName = "WakaFormFieldShake";
+//#endregion
+export { o as WakaErrorShake, c as WakaFormFieldShake, s as useErrorShake };

package/dist/components/waka-feature-announcement/index.cjs.js

@@ -0,0 +1,57 @@
+"use client";"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../utils/cn.cjs.js");let n=require("react");n=e.__toESM(n);let r=require("lucide-react"),i=require("react/jsx-runtime");var a={sm:`max-w-sm`,md:`max-w-lg`,lg:`max-w-2xl`},o={default:`bg-muted text-muted-foreground`,primary:`bg-primary text-primary-foreground`,success:`bg-green-500 text-white`,warning:`bg-amber-500 text-white`};function s(e){return e?(typeof e==`string`?new Date(e):e).toLocaleDateString(void 0,{year:`numeric`,month:`short`,day:`numeric`}):``}function c({media:e,className:a}){let[o,s]=n.useState(!1),c=n.useRef(null);return e.type===`video`?(0,i.jsxs)(`div`,{className:t.cn(`relative group`,a),children:[(0,i.jsx)(`video`,{ref:c,src:e.src,poster:e.poster,className:`w-full h-full object-cover rounded-lg`,loop:!0,muted:!0,playsInline:!0,onPlay:()=>s(!0),onPause:()=>s(!1),children:(0,i.jsx)(`track`,{kind:`captions`})}),(0,i.jsx)(`button`,{type:`button`,onClick:()=>{c.current&&(o?c.current.pause():c.current.play(),s(!o))},className:t.cn(`absolute inset-0 flex items-center justify-center`,`bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg`,`focus:outline-none focus:opacity-100`),"aria-label":o?`Pause video`:`Play video`,children:(0,i.jsx)(`div`,{className:`bg-white/90 rounded-full p-3 shadow-lg`,children:o?(0,i.jsx)(r.Pause,{className:`h-6 w-6 text-gray-900`}):(0,i.jsx)(r.Play,{className:`h-6 w-6 text-gray-900`})})})]}):(0,i.jsx)(`img`,{src:e.src,alt:e.alt,className:t.cn(`w-full h-full object-cover rounded-lg`,a)})}function l({feature:e,isActive:n=!0,animation:a=`fadeIn`}){return(0,i.jsxs)(`div`,{className:t.cn(`flex flex-col h-full`,!n&&`hidden`,a===`slideIn`?`animate-slideIn`:a===`fadeIn`?`animate-fadeIn`:``),children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2 mb-3`,children:[(0,i.jsxs)(`span`,{className:t.cn(`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium`,o[e.badgeVariant||`primary`]),children:[(0,i.jsx)(r.Sparkles,{className:`h-3 w-3`}),e.badgeText||`What's New`]}),e.version&&(0,i.jsxs)(`span`,{className:`inline-flex items-center gap-1 text-xs text-muted-foreground`,children:[(0,i.jsx)(r.Tag,{className:`h-3 w-3`}),`v`,e.version]}),e.releaseDate&&(0,i.jsxs)(`span`,{className:`inline-flex items-center gap-1 text-xs text-muted-foreground`,children:[(0,i.jsx)(r.Calendar,{className:`h-3 w-3`}),s(e.releaseDate)]})]}),e.media&&(0,i.jsx)(`div`,{className:`relative mb-4 aspect-video bg-muted rounded-lg overflow-hidden`,children:(0,i.jsx)(c,{media:e.media,className:`absolute inset-0`})}),(0,i.jsxs)(`div`,{className:`flex-1`,children:[(0,i.jsx)(`h3`,{className:`text-lg font-semibold mb-2`,children:e.title}),(0,i.jsx)(`p`,{className:`text-sm text-muted-foreground leading-relaxed`,children:e.description})]}),e.learnMoreUrl&&(0,i.jsxs)(`a`,{href:e.learnMoreUrl,target:`_blank`,rel:`noopener noreferrer`,className:t.cn(`inline-flex items-center gap-1.5 mt-4 text-sm font-medium text-primary`,`hover:underline focus:outline-none focus:underline`),children:[e.learnMoreText||`Learn more`,(0,i.jsx)(r.ExternalLink,{className:`h-3.5 w-3.5`})]}),(0,i.jsx)(`style`,{children:`
+        @keyframes slideIn {
+          from {
+            transform: translateX(20px);
+            opacity: 0;
+          }
+          to {
+            transform: translateX(0);
+            opacity: 1;
+          }
+        }
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        .animate-slideIn {
+          animation: slideIn 0.3s ease-out;
+        }
+        .animate-fadeIn {
+          animation: fadeIn 0.3s ease-out;
+        }
+      `})]})}function u({total:e,current:n,onDotClick:r,className:a}){return e<=1?null:(0,i.jsx)(`div`,{className:t.cn(`flex items-center justify-center gap-2`,a),children:Array.from({length:e}).map((e,a)=>(0,i.jsx)(`button`,{type:`button`,onClick:()=>r(a),className:t.cn(`w-2 h-2 rounded-full transition-all duration-200`,`focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2`,a===n?`bg-primary w-6`:`bg-muted-foreground/30 hover:bg-muted-foreground/50`),"aria-label":`Go to feature ${a+1}`,"aria-current":a===n?`true`:void 0},a))})}function d({features:e,open:o,onOpenChange:s,onFeatureView:c,onLearnMore:d,onDismiss:f,dismissText:p=`Got it!`,showDots:m=!0,showArrows:h=!0,autoAdvance:g=!1,autoAdvanceInterval:_=5e3,closeOnOverlayClick:v=!0,closeOnEscape:y=!0,size:b=`md`,className:x,overlayClassName:S,currentIndex:C,setCurrentIndex:w}){let T=n.useRef(null),[E,D]=n.useState(!1),O=e[C],k=e.length>1;n.useEffect(()=>{if(g&&o&&k)return T.current=setInterval(()=>{w((C+1)%e.length)},_),()=>{T.current&&clearInterval(T.current)}},[g,o,k,C,e.length,_,w]),n.useEffect(()=>{if(!y||!o)return;let e=e=>{e.key===`Escape`&&(s?.(!1),f?.())};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[y,o,s,f]),n.useEffect(()=>{o&&O&&c?.(O,C)},[o,O,C,c]);let A=()=>{E||(D(!0),w(C===0?e.length-1:C-1),setTimeout(()=>D(!1),300))},j=()=>{E||(D(!0),w((C+1)%e.length),setTimeout(()=>D(!1),300))},M=()=>{s?.(!1),f?.()};return o?(0,i.jsxs)(`div`,{className:`fixed inset-0 z-50 flex items-center justify-center p-4`,children:[(0,i.jsx)(`div`,{className:t.cn(`absolute inset-0 bg-black/60 backdrop-blur-sm animate-backdropFadeIn`,S),onClick:()=>{v&&M()},"aria-hidden":`true`}),(0,i.jsxs)(`div`,{role:`dialog`,"aria-modal":`true`,"aria-labelledby":`feature-announcement-title`,className:t.cn(`relative w-full bg-background rounded-xl shadow-2xl border`,`animate-modalSlideIn`,a[b],x),children:[(0,i.jsx)(`button`,{type:`button`,onClick:M,className:t.cn(`absolute top-3 right-3 z-10 p-1.5 rounded-full`,`text-muted-foreground hover:text-foreground hover:bg-muted`,`transition-colors focus:outline-none focus:ring-2 focus:ring-primary`),"aria-label":`Close announcement`,children:(0,i.jsx)(r.X,{className:`h-4 w-4`})}),(0,i.jsx)(`div`,{className:`p-6`,children:(0,i.jsx)(l,{feature:O,isActive:!0,animation:`fadeIn`},O.id)}),(0,i.jsxs)(`div`,{className:`flex items-center justify-between px-6 pb-6`,children:[(0,i.jsx)(`div`,{className:`flex items-center gap-2`,children:h&&k&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`button`,{type:`button`,onClick:A,disabled:E,className:t.cn(`p-1.5 rounded-full`,`text-muted-foreground hover:text-foreground hover:bg-muted`,`transition-colors focus:outline-none focus:ring-2 focus:ring-primary`,`disabled:opacity-50 disabled:cursor-not-allowed`),"aria-label":`Previous feature`,children:(0,i.jsx)(r.ChevronLeft,{className:`h-5 w-5`})}),(0,i.jsx)(`button`,{type:`button`,onClick:j,disabled:E,className:t.cn(`p-1.5 rounded-full`,`text-muted-foreground hover:text-foreground hover:bg-muted`,`transition-colors focus:outline-none focus:ring-2 focus:ring-primary`,`disabled:opacity-50 disabled:cursor-not-allowed`),"aria-label":`Next feature`,children:(0,i.jsx)(r.ChevronRight,{className:`h-5 w-5`})})]})}),m&&(0,i.jsx)(u,{total:e.length,current:C,onDotClick:w}),(0,i.jsx)(`button`,{type:`button`,onClick:M,className:t.cn(`px-4 py-2 rounded-lg text-sm font-medium`,`bg-primary text-primary-foreground`,`hover:bg-primary/90 transition-colors`,`focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2`),children:p})]})]}),(0,i.jsx)(`style`,{children:`
+        @keyframes backdropFadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        @keyframes modalSlideIn {
+          from {
+            opacity: 0;
+            transform: scale(0.95) translateY(10px);
+          }
+          to {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+          }
+        }
+        .animate-backdropFadeIn {
+          animation: backdropFadeIn 0.2s ease-out;
+        }
+        .animate-modalSlideIn {
+          animation: modalSlideIn 0.3s ease-out;
+        }
+      `})]}):null}function f({features:e,open:a,onOpenChange:s,onFeatureView:l,onDismiss:d,dismissText:f=`Dismiss`,showDots:p=!0,showArrows:m=!0,autoAdvance:h=!1,autoAdvanceInterval:g=5e3,className:_,currentIndex:v,setCurrentIndex:y}){let b=n.useRef(null),[x,S]=n.useState(!1),C=e[v],w=e.length>1;return n.useEffect(()=>{if(h&&a&&w)return b.current=setInterval(()=>{y((v+1)%e.length)},g),()=>{b.current&&clearInterval(b.current)}},[h,a,w,v,e.length,g,y]),n.useEffect(()=>{a&&C&&l?.(C,v)},[a,C,v,l]),a?(0,i.jsxs)(`div`,{className:t.cn(`relative w-full bg-background border rounded-xl shadow-lg overflow-hidden`,`animate-bannerSlideIn`,_),children:[(0,i.jsxs)(`div`,{className:`flex items-start gap-4 p-4`,children:[C.media&&(0,i.jsx)(`div`,{className:`hidden sm:block flex-shrink-0 w-32 h-20 rounded-lg overflow-hidden bg-muted`,children:(0,i.jsx)(c,{media:C.media})}),(0,i.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2 mb-1`,children:[(0,i.jsxs)(`span`,{className:t.cn(`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium`,o[C.badgeVariant||`primary`]),children:[(0,i.jsx)(r.Sparkles,{className:`h-3 w-3`}),C.badgeText||`New`]}),C.version&&(0,i.jsxs)(`span`,{className:`text-xs text-muted-foreground`,children:[`v`,C.version]})]}),(0,i.jsx)(`h4`,{className:`font-semibold text-sm truncate`,children:C.title}),(0,i.jsx)(`p`,{className:`text-xs text-muted-foreground line-clamp-2 mt-0.5`,children:C.description}),C.learnMoreUrl&&(0,i.jsxs)(`a`,{href:C.learnMoreUrl,target:`_blank`,rel:`noopener noreferrer`,className:`inline-flex items-center gap-1 mt-1.5 text-xs font-medium text-primary hover:underline`,children:[C.learnMoreText||`Learn more`,(0,i.jsx)(r.ExternalLink,{className:`h-3 w-3`})]})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-2 flex-shrink-0`,children:[m&&w&&(0,i.jsxs)(`div`,{className:`hidden sm:flex items-center gap-1`,children:[(0,i.jsx)(`button`,{type:`button`,onClick:()=>{x||(S(!0),y(v===0?e.length-1:v-1),setTimeout(()=>S(!1),300))},disabled:x,className:`p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors`,"aria-label":`Previous feature`,children:(0,i.jsx)(r.ChevronLeft,{className:`h-4 w-4`})}),(0,i.jsx)(`button`,{type:`button`,onClick:()=>{x||(S(!0),y((v+1)%e.length),setTimeout(()=>S(!1),300))},disabled:x,className:`p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors`,"aria-label":`Next feature`,children:(0,i.jsx)(r.ChevronRight,{className:`h-4 w-4`})})]}),(0,i.jsx)(`button`,{type:`button`,onClick:()=>{s?.(!1),d?.()},className:`p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors`,"aria-label":f,children:(0,i.jsx)(r.X,{className:`h-4 w-4`})})]})]}),p&&w&&(0,i.jsx)(`div`,{className:`px-4 pb-3`,children:(0,i.jsx)(u,{total:e.length,current:v,onDotClick:y,className:`justify-start`})}),(0,i.jsx)(`style`,{children:`
+        @keyframes bannerSlideIn {
+          from {
+            opacity: 0;
+            transform: translateY(-10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        .animate-bannerSlideIn {
+          animation: bannerSlideIn 0.3s ease-out;
+        }
+      `})]}):null}function p({features:e,mode:t=`modal`,open:r=!1,onOpenChange:a,onFeatureView:o,onLearnMore:s,onDismiss:c,dismissText:l,showDots:u=!0,showArrows:p=!0,autoAdvance:m=!1,autoAdvanceInterval:h=5e3,closeOnOverlayClick:g=!0,closeOnEscape:_=!0,size:v=`md`,className:y,overlayClassName:b}){let[x,S]=n.useState(0);if(n.useEffect(()=>{S(0)},[e]),!e||e.length===0)return null;let C={features:e,open:r,onOpenChange:a,onFeatureView:o,onLearnMore:s,onDismiss:c,dismissText:l,showDots:u,showArrows:p,autoAdvance:m,autoAdvanceInterval:h,className:y,currentIndex:x,setCurrentIndex:S};return t===`banner`?(0,i.jsx)(f,{...C}):(0,i.jsx)(d,{...C,closeOnOverlayClick:g,closeOnEscape:_,size:v,overlayClassName:b})}function m({defaultOpen:e=!1,storageKey:t,features:r=[],currentVersion:i,onOpen:a,onClose:o}={}){let[s,c]=n.useState(e),[l,u]=n.useState(0),[d,f]=n.useState(!1);return n.useEffect(()=>{if(t&&typeof window<`u`)try{let e=localStorage.getItem(t);if(e){let t=JSON.parse(e);(i&&t.version===i||!i&&t.seen)&&f(!0)}}catch{}},[t,i]),{isOpen:s,open:n.useCallback(()=>{c(!0),a?.()},[a]),close:n.useCallback(()=>{c(!1),o?.()},[o]),toggle:n.useCallback(()=>{c(e=>{let t=!e;return t?a?.():o?.(),t})},[a,o]),onOpenChange:n.useCallback(e=>{c(e),e?a?.():o?.()},[a,o]),markAsSeen:n.useCallback(()=>{if(f(!0),t&&typeof window<`u`)try{let e=i?{seen:!0,version:i,timestamp:Date.now()}:{seen:!0,timestamp:Date.now()};localStorage.setItem(t,JSON.stringify(e))}catch{}},[t,i]),hasBeenSeen:d,currentIndex:l,setCurrentIndex:u,nextFeature:n.useCallback(()=>{u(e=>(e+1)%r.length)},[r.length]),previousFeature:n.useCallback(()=>{u(e=>e===0?r.length-1:e-1)},[r.length]),totalFeatures:r.length}}exports.WakaFeatureAnnouncement=p,exports.default=p,exports.useFeatureAnnouncement=m;

package/dist/components/waka-feature-announcement/index.d.ts

@@ -107,6 +107,6 @@ export interface UseFeatureAnnouncementReturn {
     /** Total number of features */
     totalFeatures: number;
 }
-export declare function WakaFeatureAnnouncement({ features, mode, open, onOpenChange, onFeatureView, onLearnMore, onDismiss, dismissText, showDots, showArrows, autoAdvance, autoAdvanceInterval, closeOnOverlayClick, closeOnEscape, size, className, overlayClassName, }: WakaFeatureAnnouncementProps): import("react/jsx-runtime").JSX.Element;
+export declare function WakaFeatureAnnouncement({ features, mode, open, onOpenChange, onFeatureView, onLearnMore, onDismiss, dismissText, showDots, showArrows, autoAdvance, autoAdvanceInterval, closeOnOverlayClick, closeOnEscape, size, className, overlayClassName, }: WakaFeatureAnnouncementProps): import("react/jsx-runtime").JSX.Element | null;
 export declare function useFeatureAnnouncement({ defaultOpen, storageKey, features, currentVersion, onOpen, onClose, }?: UseFeatureAnnouncementOptions): UseFeatureAnnouncementReturn;
 export default WakaFeatureAnnouncement;