@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-swipe-card/index.es.js

@@ -0,0 +1,347 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { cva as n } from "class-variance-authority";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/waka-swipe-card/index.tsx
+var o = n("relative touch-none select-none", {
+	variants: { size: {
+		sm: "w-64 h-80",
+		default: "w-80 h-96",
+		lg: "w-96 h-[28rem]",
+		full: "w-full h-full"
+	} },
+	defaultVariants: { size: "default" }
+}), s = n("absolute inset-0 rounded-2xl bg-card shadow-xl overflow-hidden transition-shadow", {
+	variants: { variant: {
+		default: "border border-border",
+		elevated: "shadow-2xl",
+		glass: "bg-card/80 backdrop-blur-xl border border-white/20"
+	} },
+	defaultVariants: { variant: "default" }
+}), c = n("absolute inset-0 rounded-2xl flex items-center justify-center transition-opacity pointer-events-none", { variants: { direction: {
+	left: "bg-destructive/20",
+	right: "bg-green-500/20",
+	up: "bg-primary/20",
+	down: "bg-muted/20"
+} } });
+function l(e = "light") {
+	typeof window < "u" && "vibrate" in navigator && navigator.vibrate({
+		light: 10,
+		medium: 20,
+		heavy: 30
+	}[e]);
+}
+function u(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+function d({ cards: n, renderCard: d, onSwipe: f, onSwipeStart: p, onSwipeProgress: m, swipeThreshold: h = .3, allowedDirections: g = ["left", "right"], showOverlay: _ = !0, overlayContent: v, stackSize: y = 3, stackScale: b = .95, stackOffset: x = 8, animationDuration: S = 300, hapticFeedback: C = !0, disabled: w = !1, onEmpty: T, className: E, size: D, ...O }, k) {
+	let A = t.useRef(null), [j, M] = t.useState(0), [N, P] = t.useState([]), [F, I] = t.useState(!1), [L, ee] = t.useState({
+		x: 0,
+		y: 0
+	}), [R, z] = t.useState({
+		x: 0,
+		y: 0
+	}), [B, V] = t.useState(null), [H, U] = t.useState(!1), [W, G] = t.useState(null), K = n[j] ?? null, q = n.slice(j, j + y), J = t.useCallback(() => {
+		if (!A.current) return 0;
+		let { width: e, height: t } = A.current.getBoundingClientRect(), n = Math.abs(R.x), r = Math.abs(R.y), i = Math.max(e, t) * .5;
+		return u(Math.max(n, r) / i, 0, 1);
+	}, [R]), Y = t.useCallback((e, t) => {
+		let n = Math.abs(e), r = Math.abs(t);
+		return n < 20 && r < 20 ? null : n > r ? e > 0 ? "right" : "left" : t > 0 ? "down" : "up";
+	}, []), X = t.useCallback((e) => {
+		w || H || !K || (I(!0), ee({
+			x: e.clientX,
+			y: e.clientY
+		}), z({
+			x: 0,
+			y: 0
+		}), e.target.setPointerCapture(e.pointerId));
+	}, [
+		w,
+		H,
+		K
+	]), Z = t.useCallback((e) => {
+		if (!F || w) return;
+		let t = e.clientX - L.x, n = e.clientY - L.y, r = Y(t, n);
+		if (r && !g.includes(r) ? z(r === "left" || r === "right" ? {
+			x: 0,
+			y: n
+		} : {
+			x: t,
+			y: 0
+		}) : z({
+			x: t,
+			y: n
+		}), r !== B && (r && !B && K && (p?.(K, r), C && l("light")), V(r)), r && K) {
+			let e = J();
+			m?.(K, r, e);
+		}
+	}, [
+		F,
+		w,
+		L,
+		Y,
+		g,
+		B,
+		K,
+		p,
+		C,
+		m,
+		J
+	]), Q = t.useCallback((e) => {
+		if (!F) return;
+		e.target.releasePointerCapture(e.pointerId), I(!1);
+		let t = J(), n = B;
+		n && t >= h && g.includes(n) && K ? (C && l("medium"), U(!0), G(n), setTimeout(() => {
+			f?.(K, n), P((e) => [...e, {
+				card: K,
+				direction: n
+			}]), M((e) => e + 1), U(!1), G(null), z({
+				x: 0,
+				y: 0
+			}), V(null);
+		}, S)) : (z({
+			x: 0,
+			y: 0
+		}), V(null));
+	}, [
+		F,
+		J,
+		B,
+		h,
+		g,
+		K,
+		C,
+		f,
+		S
+	]);
+	t.useImperativeHandle(k, () => ({
+		swipe: (e) => {
+			!K || H || (C && l("medium"), U(!0), G(e), setTimeout(() => {
+				f?.(K, e), P((t) => [...t, {
+					card: K,
+					direction: e
+				}]), M((e) => e + 1), U(!1), G(null);
+			}, S));
+		},
+		rewind: () => {
+			N.length === 0 || H || (N[N.length - 1], P((e) => e.slice(0, -1)), M((e) => e - 1), C && l("light"));
+		},
+		getCurrentCard: () => K
+	}), [
+		K,
+		H,
+		C,
+		f,
+		S,
+		N
+	]), t.useEffect(() => {
+		j >= n.length && n.length > 0 && T?.();
+	}, [
+		j,
+		n.length,
+		T
+	]);
+	let te = (e) => {
+		let t = e - j;
+		if (t === 0) {
+			let e = R.x / 20 * !!F;
+			if (W) {
+				let e = 1e3, n = {
+					left: {
+						x: -e,
+						y: 0,
+						rotate: -30
+					},
+					right: {
+						x: e,
+						y: 0,
+						rotate: 30
+					},
+					up: {
+						x: 0,
+						y: -e,
+						rotate: 0
+					},
+					down: {
+						x: 0,
+						y: e,
+						rotate: 0
+					}
+				}[W];
+				return {
+					transform: `translate(${n.x}px, ${n.y}px) rotate(${n.rotate}deg)`,
+					transition: `transform ${S}ms ease-out`,
+					zIndex: y - t
+				};
+			}
+			return {
+				transform: `translate(${R.x}px, ${R.y}px) rotate(${e}deg)`,
+				transition: F ? "none" : `transform ${S}ms ease-out`,
+				zIndex: y - t,
+				cursor: w ? "default" : "grab"
+			};
+		}
+		let n = b ** +t, r = x * t, i = F || W ? J() : 0, a = i * (1 - b);
+		return {
+			transform: `translateY(${r - i * x}px) scale(${n + a})`,
+			transition: `transform ${S}ms ease-out`,
+			zIndex: y - t,
+			pointerEvents: "none"
+		};
+	}, $ = (e) => B === e ? J() : 0;
+	return q.length === 0 ? /* @__PURE__ */ i("div", {
+		ref: A,
+		className: e(o({ size: D }), "flex items-center justify-center", E),
+		...O,
+		children: /* @__PURE__ */ a("div", {
+			className: "text-muted-foreground text-center",
+			children: [/* @__PURE__ */ i("p", {
+				className: "text-lg font-medium",
+				children: "No more cards"
+			}), /* @__PURE__ */ i("p", {
+				className: "text-sm",
+				children: "Check back later"
+			})]
+		})
+	}) : /* @__PURE__ */ i("div", {
+		ref: A,
+		className: e(o({ size: D }), E),
+		...O,
+		children: q.map((t, n) => {
+			let o = j + n, l = n === 0;
+			return /* @__PURE__ */ a("div", {
+				className: e(s({ variant: "default" })),
+				style: te(o),
+				onPointerDown: l ? X : void 0,
+				onPointerMove: l ? Z : void 0,
+				onPointerUp: l ? Q : void 0,
+				onPointerCancel: l ? Q : void 0,
+				children: [d(t, o), l && _ && /* @__PURE__ */ a(r, { children: [
+					g.includes("left") && /* @__PURE__ */ i("div", {
+						className: e(c({ direction: "left" })),
+						style: { opacity: $("left") },
+						children: v?.left ?? /* @__PURE__ */ i("span", {
+							className: "text-4xl",
+							children: "✕"
+						})
+					}),
+					g.includes("right") && /* @__PURE__ */ i("div", {
+						className: e(c({ direction: "right" })),
+						style: { opacity: $("right") },
+						children: v?.right ?? /* @__PURE__ */ i("span", {
+							className: "text-4xl",
+							children: "❤"
+						})
+					}),
+					g.includes("up") && /* @__PURE__ */ i("div", {
+						className: e(c({ direction: "up" })),
+						style: { opacity: $("up") },
+						children: v?.up ?? /* @__PURE__ */ i("span", {
+							className: "text-4xl",
+							children: "⬆"
+						})
+					}),
+					g.includes("down") && /* @__PURE__ */ i("div", {
+						className: e(c({ direction: "down" })),
+						style: { opacity: $("down") },
+						children: v?.down ?? /* @__PURE__ */ i("span", {
+							className: "text-4xl",
+							children: "⬇"
+						})
+					})
+				] })]
+			}, t.id);
+		})
+	});
+}
+var f = t.forwardRef(d), p = n("rounded-full flex items-center justify-center transition-all active:scale-95 shadow-lg", {
+	variants: {
+		size: {
+			sm: "w-10 h-10 text-lg",
+			default: "w-14 h-14 text-2xl",
+			lg: "w-18 h-18 text-3xl"
+		},
+		action: {
+			left: "bg-destructive/10 hover:bg-destructive/20 text-destructive border border-destructive/20",
+			right: "bg-green-500/10 hover:bg-green-500/20 text-green-500 border border-green-500/20",
+			up: "bg-primary/10 hover:bg-primary/20 text-primary border border-primary/20",
+			down: "bg-muted hover:bg-muted/80 text-muted-foreground border border-border",
+			rewind: "bg-amber-500/10 hover:bg-amber-500/20 text-amber-500 border border-amber-500/20"
+		}
+	},
+	defaultVariants: { size: "default" }
+});
+function m({ swipeCardRef: t, showRewind: n = !0, directions: r = ["left", "right"], size: o = "default", className: s, ...c }) {
+	let l = (e) => {
+		t.current?.swipe(e);
+	}, u = () => {
+		t.current?.rewind();
+	}, d = {
+		left: "✕",
+		right: "❤",
+		up: "⬆",
+		down: "⬇",
+		rewind: "↶"
+	};
+	return /* @__PURE__ */ a("div", {
+		className: e("flex items-center justify-center gap-4", s),
+		...c,
+		children: [
+			n && /* @__PURE__ */ i("button", {
+				type: "button",
+				className: e(p({
+					size: "sm",
+					action: "rewind"
+				})),
+				onClick: u,
+				"aria-label": "Rewind last swipe",
+				children: d.rewind
+			}),
+			r.includes("left") && /* @__PURE__ */ i("button", {
+				type: "button",
+				className: e(p({
+					size: o,
+					action: "left"
+				})),
+				onClick: () => l("left"),
+				"aria-label": "Swipe left",
+				children: d.left
+			}),
+			r.includes("up") && /* @__PURE__ */ i("button", {
+				type: "button",
+				className: e(p({
+					size: o,
+					action: "up"
+				})),
+				onClick: () => l("up"),
+				"aria-label": "Swipe up",
+				children: d.up
+			}),
+			r.includes("right") && /* @__PURE__ */ i("button", {
+				type: "button",
+				className: e(p({
+					size: o,
+					action: "right"
+				})),
+				onClick: () => l("right"),
+				"aria-label": "Swipe right",
+				children: d.right
+			}),
+			r.includes("down") && /* @__PURE__ */ i("button", {
+				type: "button",
+				className: e(p({
+					size: o,
+					action: "down"
+				})),
+				onClick: () => l("down"),
+				"aria-label": "Swipe down",
+				children: d.down
+			})
+		]
+	});
+}
+//#endregion
+export { f as WakaSwipeCard, m as WakaSwipeCardActions };

package/dist/components/waka-tabs-morph/index.cjs.js

@@ -0,0 +1 @@
+"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`);function i({tab:e,isActive:n,size:i,variant:a,orientation:o,fullWidth:s,onClick:c,setRef:l}){return(0,r.jsxs)(`button`,{ref:l,type:`button`,role:`tab`,"aria-selected":n,"aria-controls":`tabpanel-${e.id}`,id:`tab-${e.id}`,disabled:e.disabled,onClick:c,className:t.cn(`relative z-10 inline-flex items-center justify-center font-medium`,`transition-colors duration-200`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2`,{sm:`text-xs px-3 py-1.5 gap-1.5`,md:`text-sm px-4 py-2 gap-2`,lg:`text-base px-5 py-2.5 gap-2.5`}[i],s&&`flex-1`,o===`vertical`&&`w-full justify-start`,a===`default`&&[n?`text-foreground`:`text-muted-foreground hover:text-foreground`],a===`pills`&&[n?`text-primary-foreground`:`text-muted-foreground hover:text-foreground`],a===`underline`&&[n?`text-foreground`:`text-muted-foreground hover:text-foreground`],a===`enclosed`&&[n?`text-foreground`:`text-muted-foreground hover:text-foreground hover:bg-muted/50`],e.disabled&&`opacity-50 cursor-not-allowed`),children:[e.icon&&(0,r.jsx)(`span`,{className:{sm:`h-3.5 w-3.5`,md:`h-4 w-4`,lg:`h-5 w-5`}[i],children:e.icon}),(0,r.jsx)(`span`,{children:e.label}),e.badge!==void 0&&(0,r.jsx)(`span`,{className:t.cn(`inline-flex items-center justify-center rounded-full font-medium`,{sm:`text-[10px] px-1.5 py-0.5 min-w-[16px]`,md:`text-xs px-2 py-0.5 min-w-[18px]`,lg:`text-xs px-2 py-1 min-w-[20px]`}[i],n?a===`pills`?`bg-primary-foreground/20 text-primary-foreground`:`bg-primary text-primary-foreground`:`bg-muted text-muted-foreground`),children:e.badge})]})}function a({style:e,variant:n,orientation:i,animationDuration:a}){let o={transition:`all ${a}ms cubic-bezier(0.4, 0, 0.2, 1)`,...e};return n===`underline`?(0,r.jsx)(`span`,{className:t.cn(`absolute bg-primary`,i===`horizontal`?`bottom-0 h-0.5 rounded-full`:`left-0 w-0.5 rounded-full`),style:o}):n===`pills`?(0,r.jsx)(`span`,{className:`absolute bg-primary rounded-full`,style:o}):n===`enclosed`?(0,r.jsx)(`span`,{className:`absolute bg-background border border-border rounded-lg shadow-sm`,style:o}):(0,r.jsx)(`span`,{className:`absolute bg-muted rounded-md`,style:o})}function o({tabs:e,activeTab:o,defaultTab:s,onChange:c,orientation:l=`horizontal`,size:u=`md`,variant:d=`default`,fullWidth:f=!1,animationDuration:p=300,className:m,contentClassName:h,renderContent:g}){let[_,v]=n.useState(s??e[0]?.id),y=o??_,b=n.useRef(null),x=n.useRef(new Map),[S,C]=n.useState({opacity:0}),w=n.useCallback(()=>{let e=x.current.get(y),t=b.current;if(!e||!t){C({opacity:0});return}let n=t.getBoundingClientRect(),r=e.getBoundingClientRect();C(l===`horizontal`?{left:r.left-n.left,width:r.width,height:d===`underline`?2:r.height,top:d===`underline`?void 0:0,opacity:1}:{top:r.top-n.top,height:r.height,width:d===`underline`?2:r.width,left:d===`underline`?void 0:0,opacity:1})},[y,l,d]);n.useEffect(()=>{w()},[w]),n.useEffect(()=>{let e=()=>w();return window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[w]);let T=t=>{e.find(e=>e.id===t)?.disabled||(v(t),c?.(t))},E=e=>t=>{t?x.current.set(e,t):x.current.delete(e)},D=e.find(e=>e.id===y);return(0,r.jsxs)(`div`,{className:t.cn(`flex`,l===`horizontal`?`flex-col`:`flex-row gap-4`),children:[(0,r.jsxs)(`div`,{ref:b,role:`tablist`,"aria-orientation":l,className:t.cn(`relative inline-flex`,l===`horizontal`?`flex-row`:`flex-col`,d===`default`&&[`bg-muted rounded-lg`,{sm:`p-0.5`,md:`p-1`,lg:`p-1.5`}[u]],d===`pills`&&`gap-1`,d===`underline`&&[`border-b border-border`,l===`vertical`&&`border-b-0 border-r`],d===`enclosed`&&[`bg-muted/50 rounded-lg p-1`],f&&`w-full`,m),children:[(0,r.jsx)(a,{style:S,variant:d,orientation:l,animationDuration:p}),e.map(e=>(0,r.jsx)(i,{tab:e,isActive:e.id===y,size:u,variant:d,orientation:l,fullWidth:f,onClick:()=>T(e.id),setRef:E(e.id)},e.id))]}),(D?.content||g)&&(0,r.jsx)(`div`,{role:`tabpanel`,id:`tabpanel-${y}`,"aria-labelledby":`tab-${y}`,className:t.cn(`focus-visible:outline-none`,`animate-in fade-in-0 duration-200`,h),children:g?g(D):D?.content})]})}function s(e,t){let[r,i]=n.useState(t??e[0]?.id),a=n.useCallback(t=>{let n=e.find(e=>e.id===t);n&&!n.disabled&&i(t)},[e]),o=n.useCallback(()=>{let t=e.findIndex(e=>e.id===r),n=(t+1)%e.length;for(;e[n]?.disabled&&n!==t;)n=(n+1)%e.length;e[n]?.disabled||i(e[n].id)},[e,r]),s=n.useCallback(()=>{let t=e.findIndex(e=>e.id===r),n=t===0?e.length-1:t-1;for(;e[n]?.disabled&&n!==t;)n=n===0?e.length-1:n-1;e[n]?.disabled||i(e[n].id)},[e,r]),c=n.useCallback(()=>{let t=e.find(e=>!e.disabled);t&&i(t.id)},[e]),l=n.useCallback(()=>{let t=[...e].reverse().find(e=>!e.disabled);t&&i(t.id)},[e]);return{activeTab:r,activeTabData:e.find(e=>e.id===r),setActiveTab:i,goToTab:a,goToNext:o,goToPrevious:s,goToFirst:c,goToLast:l}}function c({tabId:e,activeTab:n,children:i,keepMounted:a=!1,className:o}){let s=e===n;return!s&&!a?null:(0,r.jsx)(`div`,{role:`tabpanel`,id:`tabpanel-${e}`,"aria-labelledby":`tab-${e}`,hidden:!s,className:t.cn(`focus-visible:outline-none`,s&&`animate-in fade-in-0 duration-200`,o),children:i})}exports.WakaTabPanel=c,exports.default=o,exports.useTabs=s;

package/dist/components/waka-tabs-morph/index.d.ts

@@ -42,7 +42,7 @@ export interface WakaTabsMorphProps {
 export declare function WakaTabsMorph({ tabs, activeTab, defaultTab, onChange, orientation, size, variant, fullWidth, animationDuration, className, contentClassName, renderContent, }: WakaTabsMorphProps): import("react/jsx-runtime").JSX.Element;
 export declare function useTabs(tabs: TabItem[], initialTab?: string): {
     activeTab: string;
-    activeTabData: TabItem;
+    activeTabData: TabItem | undefined;
     setActiveTab: React.Dispatch<React.SetStateAction<string>>;
     goToTab: (tabId: string) => void;
     goToNext: () => void;
@@ -62,5 +62,5 @@ export interface WakaTabPanelProps {
     /** Custom className */
     className?: string;
 }
-export declare function WakaTabPanel({ tabId, activeTab, children, keepMounted, className, }: WakaTabPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function WakaTabPanel({ tabId, activeTab, children, keepMounted, className, }: WakaTabPanelProps): import("react/jsx-runtime").JSX.Element | null;
 export default WakaTabsMorph;

package/dist/components/waka-tabs-morph/index.es.js

@@ -0,0 +1,176 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/waka-tabs-morph/index.tsx
+function i({ tab: t, isActive: i, size: a, variant: o, orientation: s, fullWidth: c, onClick: l, setRef: u }) {
+	return /* @__PURE__ */ r("button", {
+		ref: u,
+		type: "button",
+		role: "tab",
+		"aria-selected": i,
+		"aria-controls": `tabpanel-${t.id}`,
+		id: `tab-${t.id}`,
+		disabled: t.disabled,
+		onClick: l,
+		className: e("relative z-10 inline-flex items-center justify-center font-medium", "transition-colors duration-200", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", {
+			sm: "text-xs px-3 py-1.5 gap-1.5",
+			md: "text-sm px-4 py-2 gap-2",
+			lg: "text-base px-5 py-2.5 gap-2.5"
+		}[a], c && "flex-1", s === "vertical" && "w-full justify-start", o === "default" && [i ? "text-foreground" : "text-muted-foreground hover:text-foreground"], o === "pills" && [i ? "text-primary-foreground" : "text-muted-foreground hover:text-foreground"], o === "underline" && [i ? "text-foreground" : "text-muted-foreground hover:text-foreground"], o === "enclosed" && [i ? "text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"], t.disabled && "opacity-50 cursor-not-allowed"),
+		children: [
+			t.icon && /* @__PURE__ */ n("span", {
+				className: {
+					sm: "h-3.5 w-3.5",
+					md: "h-4 w-4",
+					lg: "h-5 w-5"
+				}[a],
+				children: t.icon
+			}),
+			/* @__PURE__ */ n("span", { children: t.label }),
+			t.badge !== void 0 && /* @__PURE__ */ n("span", {
+				className: e("inline-flex items-center justify-center rounded-full font-medium", {
+					sm: "text-[10px] px-1.5 py-0.5 min-w-[16px]",
+					md: "text-xs px-2 py-0.5 min-w-[18px]",
+					lg: "text-xs px-2 py-1 min-w-[20px]"
+				}[a], i ? o === "pills" ? "bg-primary-foreground/20 text-primary-foreground" : "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"),
+				children: t.badge
+			})
+		]
+	});
+}
+function a({ style: t, variant: r, orientation: i, animationDuration: a }) {
+	let o = {
+		transition: `all ${a}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+		...t
+	};
+	return r === "underline" ? /* @__PURE__ */ n("span", {
+		className: e("absolute bg-primary", i === "horizontal" ? "bottom-0 h-0.5 rounded-full" : "left-0 w-0.5 rounded-full"),
+		style: o
+	}) : r === "pills" ? /* @__PURE__ */ n("span", {
+		className: "absolute bg-primary rounded-full",
+		style: o
+	}) : r === "enclosed" ? /* @__PURE__ */ n("span", {
+		className: "absolute bg-background border border-border rounded-lg shadow-sm",
+		style: o
+	}) : /* @__PURE__ */ n("span", {
+		className: "absolute bg-muted rounded-md",
+		style: o
+	});
+}
+function o({ tabs: o, activeTab: s, defaultTab: c, onChange: l, orientation: u = "horizontal", size: d = "md", variant: f = "default", fullWidth: p = !1, animationDuration: m = 300, className: h, contentClassName: g, renderContent: _ }) {
+	let [v, y] = t.useState(c ?? o[0]?.id), b = s ?? v, x = t.useRef(null), S = t.useRef(/* @__PURE__ */ new Map()), [C, w] = t.useState({ opacity: 0 }), T = t.useCallback(() => {
+		let e = S.current.get(b), t = x.current;
+		if (!e || !t) {
+			w({ opacity: 0 });
+			return;
+		}
+		let n = t.getBoundingClientRect(), r = e.getBoundingClientRect();
+		w(u === "horizontal" ? {
+			left: r.left - n.left,
+			width: r.width,
+			height: f === "underline" ? 2 : r.height,
+			top: f === "underline" ? void 0 : 0,
+			opacity: 1
+		} : {
+			top: r.top - n.top,
+			height: r.height,
+			width: f === "underline" ? 2 : r.width,
+			left: f === "underline" ? void 0 : 0,
+			opacity: 1
+		});
+	}, [
+		b,
+		u,
+		f
+	]);
+	t.useEffect(() => {
+		T();
+	}, [T]), t.useEffect(() => {
+		let e = () => T();
+		return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+	}, [T]);
+	let E = (e) => {
+		o.find((t) => t.id === e)?.disabled || (y(e), l?.(e));
+	}, D = (e) => (t) => {
+		t ? S.current.set(e, t) : S.current.delete(e);
+	}, O = o.find((e) => e.id === b);
+	return /* @__PURE__ */ r("div", {
+		className: e("flex", u === "horizontal" ? "flex-col" : "flex-row gap-4"),
+		children: [/* @__PURE__ */ r("div", {
+			ref: x,
+			role: "tablist",
+			"aria-orientation": u,
+			className: e("relative inline-flex", u === "horizontal" ? "flex-row" : "flex-col", f === "default" && ["bg-muted rounded-lg", {
+				sm: "p-0.5",
+				md: "p-1",
+				lg: "p-1.5"
+			}[d]], f === "pills" && "gap-1", f === "underline" && ["border-b border-border", u === "vertical" && "border-b-0 border-r"], f === "enclosed" && ["bg-muted/50 rounded-lg p-1"], p && "w-full", h),
+			children: [/* @__PURE__ */ n(a, {
+				style: C,
+				variant: f,
+				orientation: u,
+				animationDuration: m
+			}), o.map((e) => /* @__PURE__ */ n(i, {
+				tab: e,
+				isActive: e.id === b,
+				size: d,
+				variant: f,
+				orientation: u,
+				fullWidth: p,
+				onClick: () => E(e.id),
+				setRef: D(e.id)
+			}, e.id))]
+		}), (O?.content || _) && /* @__PURE__ */ n("div", {
+			role: "tabpanel",
+			id: `tabpanel-${b}`,
+			"aria-labelledby": `tab-${b}`,
+			className: e("focus-visible:outline-none", "animate-in fade-in-0 duration-200", g),
+			children: _ ? _(O) : O?.content
+		})]
+	});
+}
+function s(e, n) {
+	let [r, i] = t.useState(n ?? e[0]?.id), a = t.useCallback((t) => {
+		let n = e.find((e) => e.id === t);
+		n && !n.disabled && i(t);
+	}, [e]), o = t.useCallback(() => {
+		let t = e.findIndex((e) => e.id === r), n = (t + 1) % e.length;
+		for (; e[n]?.disabled && n !== t;) n = (n + 1) % e.length;
+		e[n]?.disabled || i(e[n].id);
+	}, [e, r]), s = t.useCallback(() => {
+		let t = e.findIndex((e) => e.id === r), n = t === 0 ? e.length - 1 : t - 1;
+		for (; e[n]?.disabled && n !== t;) n = n === 0 ? e.length - 1 : n - 1;
+		e[n]?.disabled || i(e[n].id);
+	}, [e, r]), c = t.useCallback(() => {
+		let t = e.find((e) => !e.disabled);
+		t && i(t.id);
+	}, [e]), l = t.useCallback(() => {
+		let t = [...e].reverse().find((e) => !e.disabled);
+		t && i(t.id);
+	}, [e]);
+	return {
+		activeTab: r,
+		activeTabData: e.find((e) => e.id === r),
+		setActiveTab: i,
+		goToTab: a,
+		goToNext: o,
+		goToPrevious: s,
+		goToFirst: c,
+		goToLast: l
+	};
+}
+function c({ tabId: t, activeTab: r, children: i, keepMounted: a = !1, className: o }) {
+	let s = t === r;
+	return !s && !a ? null : /* @__PURE__ */ n("div", {
+		role: "tabpanel",
+		id: `tabpanel-${t}`,
+		"aria-labelledby": `tab-${t}`,
+		hidden: !s,
+		className: e("focus-visible:outline-none", s && "animate-in fade-in-0 duration-200", o),
+		children: i
+	});
+}
+//#endregion
+export { c as WakaTabPanel, o as default, s as useTabs };

package/dist/components/waka-tag-input/index.cjs.js

@@ -0,0 +1 @@
+"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={default:{name:`Default`,bgColor:`bg-secondary`,textColor:`text-secondary-foreground`,borderColor:`border-secondary`},primary:{name:`Primary`,bgColor:`bg-primary/10`,textColor:`text-primary`,borderColor:`border-primary/30`},success:{name:`Success`,bgColor:`bg-green-100 dark:bg-green-900/30`,textColor:`text-green-700 dark:text-green-400`,borderColor:`border-green-200 dark:border-green-800`},warning:{name:`Warning`,bgColor:`bg-yellow-100 dark:bg-yellow-900/30`,textColor:`text-yellow-700 dark:text-yellow-400`,borderColor:`border-yellow-200 dark:border-yellow-800`},danger:{name:`Danger`,bgColor:`bg-red-100 dark:bg-red-900/30`,textColor:`text-red-700 dark:text-red-400`,borderColor:`border-red-200 dark:border-red-800`},info:{name:`Info`,bgColor:`bg-blue-100 dark:bg-blue-900/30`,textColor:`text-blue-700 dark:text-blue-400`,borderColor:`border-blue-200 dark:border-blue-800`}};function o({tag:e,category:n,onRemove:o,draggable:s=!1,disabled:c=!1,onDragStart:l,onDragEnd:u,onDragOver:d,onDrop:f,isDragging:p=!1,isDragOver:m=!1}){let h=n||a.default,g=e.color?{backgroundColor:`${e.color}20`,color:e.color,borderColor:`${e.color}40`}:void 0;return(0,i.jsxs)(`div`,{className:t.cn(`group inline-flex items-center gap-1 px-2 py-1 rounded-md text-sm font-medium border`,`transition-all duration-200 animate-in fade-in-0 zoom-in-95`,!g&&h.bgColor,!g&&h.textColor,!g&&h.borderColor,s&&!c&&`cursor-grab active:cursor-grabbing`,p&&`opacity-50 scale-95`,m&&`ring-2 ring-primary ring-offset-1`,c&&`opacity-50 cursor-not-allowed`),style:g,draggable:s&&!c,onDragStart:l,onDragEnd:u,onDragOver:d,onDrop:f,children:[s&&!c&&(0,i.jsx)(r.GripVertical,{className:`h-3 w-3 opacity-50 group-hover:opacity-100 transition-opacity`}),(0,i.jsx)(`span`,{className:`max-w-[150px] truncate`,children:e.value}),!c&&(0,i.jsx)(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),o()},className:t.cn(`ml-0.5 p-0.5 rounded-sm hover:bg-black/10 dark:hover:bg-white/10`,`opacity-60 hover:opacity-100 transition-opacity`,`focus:outline-none focus:ring-1 focus:ring-offset-1`),"aria-label":`Remove ${e.value}`,children:(0,i.jsx)(r.X,{className:`h-3 w-3`})})]})}function s({suggestions:e,query:n,selectedIndex:o,onSelect:s,categories:l,visible:u}){return!u||e.length===0?null:(0,i.jsx)(`div`,{className:t.cn(`absolute left-0 right-0 top-full mt-1 z-50`,`bg-popover border rounded-md shadow-lg`,`max-h-60 overflow-y-auto`,`animate-in fade-in-0 zoom-in-95`),children:(0,i.jsx)(`ul`,{className:`py-1`,role:`listbox`,children:e.map((e,u)=>{let d=e.category?l?.[e.category]||a[e.category]:void 0;return(0,i.jsxs)(`li`,{role:`option`,"aria-selected":u===o,className:t.cn(`px-3 py-2 cursor-pointer flex items-center gap-2`,`hover:bg-accent transition-colors`,u===o&&`bg-accent`),onClick:()=>s(e),children:[d&&(0,i.jsx)(`span`,{className:t.cn(`w-2 h-2 rounded-full`,d.bgColor.replace(`/10`,``).replace(`/30`,``))}),(0,i.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,i.jsx)(`div`,{className:`text-sm font-medium truncate`,children:c(e.value,n)}),e.description&&(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground truncate`,children:e.description})]}),u===o&&(0,i.jsx)(r.Check,{className:`h-4 w-4 text-primary flex-shrink-0`})]},`${e.value}-${u}`)})})})}function c(e,t){if(!t)return e;let n=e.toLowerCase(),r=t.toLowerCase(),a=n.indexOf(r);return a===-1?e:(0,i.jsxs)(i.Fragment,{children:[e.slice(0,a),(0,i.jsx)(`span`,{className:`font-semibold text-primary`,children:e.slice(a,a+t.length)}),e.slice(a+t.length)]})}function l({tags:e,onChange:c,suggestions:l=[],onSuggestionsLoad:u,onTagCreate:d,maxTags:f,allowDuplicates:p=!1,validationPattern:m,validationMessage:h=`Invalid tag format`,categories:g=a,draggable:_=!1,placeholder:v=`Add a tag...`,disabled:y=!1,error:b=!1,errorMessage:x,delimiters:S=[`Enter`,`,`],minLength:C=1,maxLength:w=50,className:T,id:E,name:D}){let[O,k]=n.useState(``),[A,j]=n.useState(l),[M,N]=n.useState(-1),[P,F]=n.useState(!1),[I,L]=n.useState(null),[R,z]=n.useState(null),[B,V]=n.useState(null),[H,U]=n.useState(!1),W=n.useRef(null),G=n.useRef(null),K=n.useMemo(()=>{if(!O.trim())return[];let t=O.toLowerCase();return A.filter(n=>{let r=n.value.toLowerCase().includes(t),i=p||!e.some(e=>e.value.toLowerCase()===n.value.toLowerCase());return r&&i})},[A,O,e,p]);n.useEffect(()=>{if(!u||!O.trim()){j(l);return}let e=setTimeout(async()=>{U(!0);try{j(await u(O))}catch{j([])}finally{U(!1)}},300);return()=>clearTimeout(e)},[O,u,l]),n.useEffect(()=>{N(-1)},[K]),n.useEffect(()=>{let e=e=>{G.current&&!G.current.contains(e.target)&&F(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]);let q=()=>`tag-${Date.now()}-${Math.random().toString(36).slice(2,9)}`,J=e=>e.length<C?(L(`Tag must be at least ${C} character${C>1?`s`:``}`),!1):e.length>w?(L(`Tag must be at most ${w} characters`),!1):m&&!m.test(e)?(L(h),!1):(L(null),!0),Y=(t,n)=>{let r=t.trim();if(!r)return!1;if(f&&e.length>=f)return L(`Maximum ${f} tags allowed`),!1;if(!p&&e.some(e=>e.value.toLowerCase()===r.toLowerCase()))return L(`Tag already exists`),!1;if(!J(r))return!1;let i={id:q(),value:r,category:n};return c([...e,i]),d?.(r),k(``),F(!1),L(null),!0},X=t=>{c(e.filter(e=>e.id!==t)),L(null)},Z=t=>{t.preventDefault();let n=t.clipboardData.getData(`text`).split(/[,;\n\t]+/).map(e=>e.trim()).filter(Boolean),r=0,i=[...e];for(let e of n){if(f&&i.length>=f)break;!p&&i.some(t=>t.value.toLowerCase()===e.toLowerCase())||m&&!m.test(e)||e.length<C||e.length>w||(i.push({id:q(),value:e}),r++)}r>0&&c(i)},Q=t=>{let n=t.key;if(P&&K.length>0){if(n===`ArrowDown`){t.preventDefault(),N(e=>e<K.length-1?e+1:0);return}if(n===`ArrowUp`){t.preventDefault(),N(e=>e>0?e-1:K.length-1);return}if(n===`Escape`){t.preventDefault(),F(!1),N(-1);return}}if(S.includes(n)||n===`,`&&S.includes(`,`)){if(t.preventDefault(),M>=0&&K[M]){let e=K[M];Y(e.value,e.category)}else O.trim()&&Y(O);return}n===`Backspace`&&!O&&e.length>0&&X(e[e.length-1].id)},ee=e=>{Y(e.value,e.category)},te=e=>t=>{z(e),t.dataTransfer.effectAllowed=`move`},ne=()=>{z(null),V(null)},re=e=>t=>{t.preventDefault(),R!==null&&R!==e&&V(e)},ie=t=>n=>{if(n.preventDefault(),R!==null&&R!==t){let n=[...e],[r]=n.splice(R,1);n.splice(t,0,r),c(n)}z(null),V(null)},$=I||b&&x;return(0,i.jsxs)(`div`,{className:t.cn(`space-y-1.5`,T),ref:G,children:[(0,i.jsxs)(`div`,{className:t.cn(`relative flex flex-wrap items-center gap-1.5 p-2 rounded-md border bg-background`,`transition-colors duration-200`,`focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2`,b||I?`border-destructive focus-within:ring-destructive`:`border-input`,y&&`opacity-50 cursor-not-allowed bg-muted`),onClick:()=>W.current?.focus(),children:[e.map((e,t)=>(0,i.jsx)(o,{tag:e,category:e.category?g[e.category]:void 0,onRemove:()=>X(e.id),draggable:_,disabled:y,onDragStart:te(t),onDragEnd:ne,onDragOver:re(t),onDrop:ie(t),isDragging:R===t,isDragOver:B===t},e.id)),(!f||e.length<f)&&!y&&(0,i.jsxs)(`div`,{className:`flex-1 min-w-[120px] relative`,children:[(0,i.jsx)(`input`,{ref:W,id:E,name:D,type:`text`,value:O,onChange:e=>{k(e.target.value),F(!0),L(null)},onFocus:()=>F(!0),onKeyDown:Q,onPaste:Z,placeholder:e.length===0?v:``,disabled:y,className:t.cn(`w-full bg-transparent border-none outline-none text-sm`,`placeholder:text-muted-foreground`),autoComplete:`off`,"aria-autocomplete":`list`,"aria-expanded":P,"aria-haspopup":`listbox`}),H&&(0,i.jsx)(`div`,{className:`absolute right-2 top-1/2 -translate-y-1/2`,children:(0,i.jsx)(`div`,{className:`h-4 w-4 border-2 border-primary/30 border-t-primary rounded-full animate-spin`})})]}),!y&&O.trim()&&!P&&(0,i.jsxs)(`button`,{type:`button`,onClick:()=>Y(O),className:t.cn(`flex items-center gap-1 px-2 py-1 rounded-md text-xs`,`bg-primary/10 text-primary hover:bg-primary/20`,`transition-colors`),children:[(0,i.jsx)(r.Plus,{className:`h-3 w-3`}),`Add`]}),(0,i.jsx)(s,{suggestions:K,query:O,selectedIndex:M,onSelect:ee,categories:g,visible:P&&!y})]}),$&&(0,i.jsx)(`p`,{className:`text-sm text-destructive animate-in fade-in-0 slide-in-from-top-1`,children:$}),f&&(0,i.jsxs)(`p`,{className:t.cn(`text-xs text-muted-foreground`,e.length>=f&&`text-destructive`),children:[e.length,`/`,f,` tags`]}),D&&(0,i.jsx)(`input`,{type:`hidden`,name:`${D}_values`,value:e.map(e=>e.value).join(`,`)})]})}l.displayName=`WakaTagInput`;function u(e={}){let{initialTags:t=[],maxTags:r,allowDuplicates:i=!1,validationPattern:a,onTagsChange:o}=e,[s,c]=n.useState(t),l=()=>`tag-${Date.now()}-${Math.random().toString(36).slice(2,9)}`,u=n.useCallback(e=>{c(e),o?.(e)},[o]);return{tags:s,setTags:u,addTag:n.useCallback((e,t)=>{let n=e.trim();if(!n||r&&s.length>=r||!i&&s.some(e=>e.value.toLowerCase()===n.toLowerCase())||a&&!a.test(n))return!1;let o={id:l(),value:n,category:t};return u([...s,o]),!0},[s,r,i,a,u]),addTags:n.useCallback((e,t)=>{let n=0,o=[...s];for(let s of e){let e=s.trim();if(e){if(r&&o.length>=r)break;!i&&o.some(t=>t.value.toLowerCase()===e.toLowerCase())||a&&!a.test(e)||(o.push({id:l(),value:e,category:t}),n++)}}return n>0&&u(o),n},[s,r,i,a,u]),removeTag:n.useCallback(e=>{u(s.filter(t=>t.id!==e))},[s,u]),removeTagByValue:n.useCallback(e=>{u(s.filter(t=>t.value.toLowerCase()!==e.toLowerCase()))},[s,u]),clearTags:n.useCallback(()=>{u([])},[u]),hasTag:n.useCallback(e=>s.some(t=>t.value.toLowerCase()===e.toLowerCase()),[s]),getTag:n.useCallback(e=>s.find(t=>t.id===e),[s]),reorderTags:n.useCallback((e,t)=>{let n=[...s],[r]=n.splice(e,1);n.splice(t,0,r),u(n)},[s,u]),updateTagCategory:n.useCallback((e,t)=>{u(s.map(n=>n.id===e?{...n,category:t}:n))},[s,u]),getTagsByCategory:n.useCallback(e=>s.filter(t=>t.category===e),[s]),values:n.useMemo(()=>s.map(e=>e.value),[s]),count:s.length,isEmpty:s.length===0,isFull:r?s.length>=r:!1}}exports.SuggestionDropdown=s,exports.TagChip=o,exports.default=l,exports.defaultCategories=a,exports.useTagInput=u;

package/dist/components/waka-tag-input/index.d.ts

@@ -94,7 +94,7 @@ interface SuggestionDropdownProps {
     categories?: Record<string, TagCategory>;
     visible: boolean;
 }
-declare function SuggestionDropdown({ suggestions, query, selectedIndex, onSelect, categories, visible, }: SuggestionDropdownProps): import("react/jsx-runtime").JSX.Element;
+declare function SuggestionDropdown({ suggestions, query, selectedIndex, onSelect, categories, visible, }: SuggestionDropdownProps): import("react/jsx-runtime").JSX.Element | null;
 export declare function WakaTagInput({ tags, onChange, suggestions: staticSuggestions, onSuggestionsLoad, onTagCreate, maxTags, allowDuplicates, validationPattern, validationMessage, categories, draggable, placeholder, disabled, error, errorMessage, delimiters, minLength, maxLength, className, id, name, }: WakaTagInputProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace WakaTagInput {
     var displayName: string;