@wakastellar/ui 4.0.0 → 4.0.1

package/dist/components/waka-notifications/index.es.js

@@ -0,0 +1,282 @@
+"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 { Popover as r, PopoverContent as i, PopoverTrigger as a } from "../popover/index.es.js";
+import { ScrollArea as o } from "../scroll-area/index.es.js";
+import { Separator as s } from "../separator/index.es.js";
+import { Tabs as c, TabsContent as l, TabsList as u, TabsTrigger as d } from "../tabs/index.es.js";
+import * as f from "react";
+import { Bell as p, Check as m, Settings as h, Trash2 as g } from "lucide-react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/components/waka-notifications/index.tsx
+var b = {
+	info: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200",
+	success: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
+	warning: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
+	error: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
+}, x = f.forwardRef(({ notification: t, onMarkAsRead: r, onDelete: i }, a) => /* @__PURE__ */ y("div", {
+	ref: a,
+	className: e("flex gap-3 p-4 hover:bg-muted/50 transition-colors border-l-4", t.read ? "border-l-transparent opacity-60" : "border-l-primary", "relative group"),
+	children: [
+		/* @__PURE__ */ v("div", {
+			className: e("flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center", b[t.type]),
+			children: t.icon || /* @__PURE__ */ v(p, { className: "h-5 w-5" })
+		}),
+		/* @__PURE__ */ y("div", {
+			className: "flex-1 min-w-0 space-y-1",
+			children: [
+				/* @__PURE__ */ y("div", {
+					className: "flex items-start justify-between gap-2",
+					children: [/* @__PURE__ */ v("h4", {
+						className: e("text-sm font-semibold", t.read && "font-normal"),
+						children: t.title
+					}), /* @__PURE__ */ v("span", {
+						className: "text-xs text-muted-foreground whitespace-nowrap",
+						children: ((e) => {
+							let t = (/* @__PURE__ */ new Date()).getTime() - e.getTime(), n = Math.floor(t / 6e4), r = Math.floor(t / 36e5), i = Math.floor(t / 864e5);
+							return n < 1 ? "À l'instant" : n < 60 ? `Il y a ${n} min` : r < 24 ? `Il y a ${r}h` : i < 7 ? `Il y a ${i}j` : e.toLocaleDateString("fr-FR");
+						})(t.timestamp)
+					})]
+				}),
+				/* @__PURE__ */ v("p", {
+					className: "text-sm text-muted-foreground line-clamp-2",
+					children: t.message
+				}),
+				t.action && /* @__PURE__ */ v(n, {
+					variant: "link",
+					size: "sm",
+					className: "h-auto p-0 text-primary",
+					onClick: t.action.onClick,
+					children: t.action.label
+				})
+			]
+		}),
+		/* @__PURE__ */ y("div", {
+			className: "flex-shrink-0 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity",
+			children: [!t.read && r && /* @__PURE__ */ y(n, {
+				variant: "ghost",
+				size: "icon",
+				className: "h-8 w-8",
+				onClick: () => r(t.id),
+				children: [/* @__PURE__ */ v(m, { className: "h-4 w-4" }), /* @__PURE__ */ v("span", {
+					className: "sr-only",
+					children: "Marquer comme lu"
+				})]
+			}), i && /* @__PURE__ */ y(n, {
+				variant: "ghost",
+				size: "icon",
+				className: "h-8 w-8 text-destructive hover:text-destructive",
+				onClick: () => i(t.id),
+				children: [/* @__PURE__ */ v(g, { className: "h-4 w-4" }), /* @__PURE__ */ v("span", {
+					className: "sr-only",
+					children: "Supprimer"
+				})]
+			})]
+		})
+	]
+}));
+x.displayName = "NotificationItem";
+var S = f.forwardRef(({ notifications: b, onMarkAsRead: S, onMarkAllAsRead: C, onDelete: w, onDeleteAll: T, onSettingsClick: E, maxHeight: D = "400px", className: O, iconClassName: k, badgeClassName: A, showBadge: j = !0, showTabs: M = !0, emptyMessage: N = "Aucune notification", emptyIcon: P }, F) => {
+	let [I, L] = f.useState(!1), [R, z] = f.useState("all"), B = b.filter((e) => !e.read).length, V = f.useMemo(() => R === "all" ? b : R === "unread" ? b.filter((e) => !e.read) : b, [b, R]), H = () => /* @__PURE__ */ y("div", {
+		className: "flex flex-col items-center justify-center py-12 px-4 text-center",
+		children: [P || /* @__PURE__ */ v(p, { className: "h-12 w-12 text-muted-foreground/50 mb-4" }), /* @__PURE__ */ v("p", {
+			className: "text-sm text-muted-foreground",
+			children: N
+		})]
+	});
+	return /* @__PURE__ */ y(r, {
+		open: I,
+		onOpenChange: L,
+		children: [/* @__PURE__ */ v(a, {
+			asChild: !0,
+			children: /* @__PURE__ */ y(n, {
+				ref: F,
+				variant: "ghost",
+				size: "icon",
+				className: e("relative", O),
+				children: [
+					/* @__PURE__ */ v(p, { className: e("h-5 w-5", k) }),
+					j && B > 0 && /* @__PURE__ */ v(t, {
+						variant: "destructive",
+						className: e("absolute -top-1 -right-1 h-5 min-w-[20px] flex items-center justify-center p-0 text-xs", A),
+						children: B > 99 ? "99+" : B
+					}),
+					/* @__PURE__ */ y("span", {
+						className: "sr-only",
+						children: [
+							"Notifications (",
+							B,
+							" non lues)"
+						]
+					})
+				]
+			})
+		}), /* @__PURE__ */ y(i, {
+			className: "w-[380px] p-0",
+			align: "end",
+			sideOffset: 8,
+			children: [
+				/* @__PURE__ */ y("div", {
+					className: "flex items-center justify-between p-4 border-b",
+					children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("h3", {
+						className: "font-semibold text-base",
+						children: "Notifications"
+					}), B > 0 && /* @__PURE__ */ y("p", {
+						className: "text-xs text-muted-foreground",
+						children: [
+							B,
+							" non ",
+							B > 1 ? "lues" : "lue"
+						]
+					})] }), /* @__PURE__ */ y("div", {
+						className: "flex gap-1",
+						children: [C && B > 0 && /* @__PURE__ */ y(n, {
+							variant: "ghost",
+							size: "sm",
+							className: "h-8 text-xs",
+							onClick: C,
+							children: [/* @__PURE__ */ v(m, { className: "h-3 w-3 mr-1" }), "Tout marquer"]
+						}), E && /* @__PURE__ */ y(n, {
+							variant: "ghost",
+							size: "icon",
+							className: "h-8 w-8",
+							onClick: E,
+							children: [/* @__PURE__ */ v(h, { className: "h-4 w-4" }), /* @__PURE__ */ v("span", {
+								className: "sr-only",
+								children: "Paramètres"
+							})]
+						})]
+					})]
+				}),
+				M && b.length > 0 && /* @__PURE__ */ y(c, {
+					value: R,
+					onValueChange: z,
+					className: "w-full",
+					children: [
+						/* @__PURE__ */ y(u, {
+							className: "w-full rounded-none border-b bg-transparent p-0",
+							children: [/* @__PURE__ */ y(d, {
+								value: "all",
+								className: "flex-1 rounded-none data-[state=active]:border-b-2 data-[state=active]:border-primary",
+								children: [
+									"Toutes (",
+									b.length,
+									")"
+								]
+							}), /* @__PURE__ */ y(d, {
+								value: "unread",
+								className: "flex-1 rounded-none data-[state=active]:border-b-2 data-[state=active]:border-primary",
+								children: [
+									"Non lues (",
+									B,
+									")"
+								]
+							})]
+						}),
+						/* @__PURE__ */ v(l, {
+							value: "all",
+							className: "m-0",
+							children: /* @__PURE__ */ v(o, {
+								className: "h-[400px]",
+								style: { maxHeight: D },
+								children: /* @__PURE__ */ v("div", {
+									className: "p-0",
+									children: V.length === 0 ? /* @__PURE__ */ v(H, {}) : /* @__PURE__ */ v("div", {
+										className: "divide-y",
+										children: V.map((e) => /* @__PURE__ */ v(x, {
+											notification: e,
+											onMarkAsRead: S,
+											onDelete: w
+										}, e.id))
+									})
+								})
+							})
+						}),
+						/* @__PURE__ */ v(l, {
+							value: "unread",
+							className: "m-0",
+							children: /* @__PURE__ */ v(o, {
+								className: "h-[400px]",
+								style: { maxHeight: D },
+								children: /* @__PURE__ */ v("div", {
+									className: "p-0",
+									children: V.length === 0 ? /* @__PURE__ */ v(H, {}) : /* @__PURE__ */ v("div", {
+										className: "divide-y",
+										children: V.map((e) => /* @__PURE__ */ v(x, {
+											notification: e,
+											onMarkAsRead: S,
+											onDelete: w
+										}, e.id))
+									})
+								})
+							})
+						})
+					]
+				}),
+				!M && /* @__PURE__ */ v(o, {
+					className: "h-[400px]",
+					style: { maxHeight: D },
+					children: /* @__PURE__ */ v("div", {
+						className: "p-0",
+						children: b.length === 0 ? /* @__PURE__ */ v(H, {}) : /* @__PURE__ */ v("div", {
+							className: "divide-y",
+							children: b.map((e) => /* @__PURE__ */ v(x, {
+								notification: e,
+								onMarkAsRead: S,
+								onDelete: w
+							}, e.id))
+						})
+					})
+				}),
+				b.length > 0 && T && /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(s, {}), /* @__PURE__ */ v("div", {
+					className: "p-2",
+					children: /* @__PURE__ */ y(n, {
+						variant: "ghost",
+						size: "sm",
+						className: "w-full text-destructive hover:text-destructive",
+						onClick: T,
+						children: [/* @__PURE__ */ v(g, { className: "h-3 w-3 mr-2" }), "Tout supprimer"]
+					})
+				})] })
+			]
+		})]
+	});
+});
+S.displayName = "WakaNotifications";
+function C(e = []) {
+	let [t, n] = f.useState(e);
+	return {
+		notifications: t,
+		addNotification: f.useCallback((e) => {
+			let t = {
+				...e,
+				id: `notification-${Date.now()}-${Math.random()}`,
+				timestamp: /* @__PURE__ */ new Date(),
+				read: !1
+			};
+			n((e) => [t, ...e]);
+		}, []),
+		markAsRead: f.useCallback((e) => {
+			n((t) => t.map((t) => t.id === e ? {
+				...t,
+				read: !0
+			} : t));
+		}, []),
+		markAllAsRead: f.useCallback(() => {
+			n((e) => e.map((e) => ({
+				...e,
+				read: !0
+			})));
+		}, []),
+		deleteNotification: f.useCallback((e) => {
+			n((t) => t.filter((t) => t.id !== e));
+		}, []),
+		deleteAllNotifications: f.useCallback(() => {
+			n([]);
+		}, []),
+		unreadCount: f.useMemo(() => t.filter((e) => !e.read).length, [t])
+	};
+}
+//#endregion
+export { S as WakaNotifications, C as useNotifications };

package/dist/components/waka-number-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`),n=require(`../button/index.cjs.js`),r=require(`../input/index.cjs.js`);let i=require(`react`);i=e.__toESM(i);let a=require(`lucide-react`),o=require(`react/jsx-runtime`);function s(e,t,n){let r=e;return t!==void 0&&r<t&&(r=t),n!==void 0&&r>n&&(r=n),r}function c(e,t){let n=10**t;return Math.round(e*n)/n}function l({value:e,onChange:l,min:u,max:d,step:f=1,precision:p=0,placeholder:m=`0`,disabled:h=!1,error:g=!1,size:_=`md`,buttonPosition:v=`sides`,allowEmpty:y=!1,formatValue:b,parseValue:x,className:S,id:C,name:w}){let[T,E]=i.useState(e===void 0?``:b?b(e):String(e)),[D,O]=i.useState(!1);i.useEffect(()=>{D||E(e===void 0?``:b?b(e):String(e))},[e,b,D]);let k=e=>{let t=e.target.value;if(E(t),t===``&&y){l?.(void 0);return}let n;if(x)n=x(t);else{let e=t.replace(`,`,`.`);n=parseFloat(e)}if(n!==void 0&&!isNaN(n)){let e=s(c(n,p),u,d);l?.(e)}},A=()=>{if(O(!1),e!==void 0)E(b?b(e):String(e));else if(!y){let e=u===void 0?0:u;l?.(e),E(b?b(e):String(e))}},j=()=>{O(!0)},M=()=>{let t=s(c((e??(u===void 0?0:u))+f,p),u,d);l?.(t)},N=()=>{let t=s(c((e??(u===void 0?0:u))-f,p),u,d);l?.(t)},P=e=>{e.key===`ArrowUp`?(e.preventDefault(),M()):e.key===`ArrowDown`&&(e.preventDefault(),N())},F={sm:`h-8 text-xs`,md:`h-9 text-sm`,lg:`h-10 text-base`},I={sm:`h-8 w-8`,md:`h-9 w-9`,lg:`h-10 w-10`},L={sm:`h-3 w-3`,md:`h-4 w-4`,lg:`h-5 w-5`},R=d===void 0||(e??0)<d,z=u===void 0||(e??0)>u,B=(e,r)=>{let i=e===`increment`,s=i?a.Plus:a.Minus,c=i?M:N,l=i?R:z;return(0,o.jsx)(n.Button,{type:`button`,variant:`outline`,size:`icon`,className:t.cn(I[_],`flex-shrink-0`,r===`left`&&`rounded-r-none border-r-0`,r===`right`&&`rounded-l-none border-l-0`),onClick:c,disabled:h||!l,tabIndex:-1,"aria-label":i?`Augmenter`:`Diminuer`,children:(0,o.jsx)(s,{className:L[_]})})};return v===`none`?(0,o.jsx)(r.Input,{id:C,name:w,type:`text`,inputMode:`decimal`,value:T,onChange:k,onBlur:A,onFocus:j,onKeyDown:P,placeholder:m,disabled:h,className:t.cn(F[_],`text-center`,g&&`border-destructive focus-visible:ring-destructive`,S)}):v===`right`?(0,o.jsxs)(`div`,{className:t.cn(`flex`,S),children:[(0,o.jsx)(r.Input,{id:C,name:w,type:`text`,inputMode:`decimal`,value:T,onChange:k,onBlur:A,onFocus:j,onKeyDown:P,placeholder:m,disabled:h,className:t.cn(F[_],`rounded-r-none`,g&&`border-destructive focus-visible:ring-destructive`)}),(0,o.jsxs)(`div`,{className:`flex flex-col`,children:[(0,o.jsx)(n.Button,{type:`button`,variant:`outline`,size:`icon`,className:t.cn(`h-[50%] w-6 rounded-none rounded-tr-md border-l-0 border-b-0`,_===`sm`&&`h-4`,_===`lg`&&`h-5`),onClick:M,disabled:h||!R,tabIndex:-1,"aria-label":`Augmenter`,children:(0,o.jsx)(a.Plus,{className:`h-2.5 w-2.5`})}),(0,o.jsx)(n.Button,{type:`button`,variant:`outline`,size:`icon`,className:t.cn(`h-[50%] w-6 rounded-none rounded-br-md border-l-0`,_===`sm`&&`h-4`,_===`lg`&&`h-5`),onClick:N,disabled:h||!z,tabIndex:-1,"aria-label":`Diminuer`,children:(0,o.jsx)(a.Minus,{className:`h-2.5 w-2.5`})})]})]}):(0,o.jsxs)(`div`,{className:t.cn(`flex`,S),children:[B(`decrement`,`left`),(0,o.jsx)(r.Input,{id:C,name:w,type:`text`,inputMode:`decimal`,value:T,onChange:k,onBlur:A,onFocus:j,onKeyDown:P,placeholder:m,disabled:h,className:t.cn(F[_],`rounded-none text-center`,g&&`border-destructive focus-visible:ring-destructive`)}),B(`increment`,`right`)]})}function u(e={}){let{initialValue:t,min:n,max:r,step:a=1}=e,[o,c]=i.useState(t);return{value:o,onChange:c,increment:()=>{c(e=>s((e??(n===void 0?0:n))+a,n,r))},decrement:()=>{c(e=>s((e??(n===void 0?0:n))-a,n,r))},reset:()=>c(t),clear:()=>c(void 0),min:n,max:r,step:a}}exports.default=l,exports.useNumberInput=u;

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

@@ -47,14 +47,14 @@ export interface UseNumberInputOptions {
     step?: number;
 }
 export declare function useNumberInput(options?: UseNumberInputOptions): {
-    value: number;
-    onChange: React.Dispatch<React.SetStateAction<number>>;
+    value: number | undefined;
+    onChange: React.Dispatch<React.SetStateAction<number | undefined>>;
     increment: () => void;
     decrement: () => void;
     reset: () => void;
     clear: () => void;
-    min: number;
-    max: number;
+    min: number | undefined;
+    max: number | undefined;
     step: number;
 };
 export default WakaNumberInput;

package/dist/components/waka-number-input/index.es.js

@@ -0,0 +1,178 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Button as t } from "../button/index.es.js";
+import { Input as n } from "../input/index.es.js";
+import * as r from "react";
+import { Minus as i, Plus as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/waka-number-input/index.tsx
+function c(e, t, n) {
+	let r = e;
+	return t !== void 0 && r < t && (r = t), n !== void 0 && r > n && (r = n), r;
+}
+function l(e, t) {
+	let n = 10 ** t;
+	return Math.round(e * n) / n;
+}
+function u({ value: u, onChange: d, min: f, max: p, step: m = 1, precision: h = 0, placeholder: g = "0", disabled: _ = !1, error: v = !1, size: y = "md", buttonPosition: b = "sides", allowEmpty: x = !1, formatValue: S, parseValue: C, className: w, id: T, name: E }) {
+	let [D, O] = r.useState(u === void 0 ? "" : S ? S(u) : String(u)), [k, A] = r.useState(!1);
+	r.useEffect(() => {
+		k || O(u === void 0 ? "" : S ? S(u) : String(u));
+	}, [
+		u,
+		S,
+		k
+	]);
+	let j = (e) => {
+		let t = e.target.value;
+		if (O(t), t === "" && x) {
+			d?.(void 0);
+			return;
+		}
+		let n;
+		if (C) n = C(t);
+		else {
+			let e = t.replace(",", ".");
+			n = parseFloat(e);
+		}
+		if (n !== void 0 && !isNaN(n)) {
+			let e = c(l(n, h), f, p);
+			d?.(e);
+		}
+	}, M = () => {
+		if (A(!1), u !== void 0) O(S ? S(u) : String(u));
+		else if (!x) {
+			let e = f === void 0 ? 0 : f;
+			d?.(e), O(S ? S(e) : String(e));
+		}
+	}, N = () => {
+		A(!0);
+	}, P = () => {
+		let e = c(l((u ?? (f === void 0 ? 0 : f)) + m, h), f, p);
+		d?.(e);
+	}, F = () => {
+		let e = c(l((u ?? (f === void 0 ? 0 : f)) - m, h), f, p);
+		d?.(e);
+	}, I = (e) => {
+		e.key === "ArrowUp" ? (e.preventDefault(), P()) : e.key === "ArrowDown" && (e.preventDefault(), F());
+	}, L = {
+		sm: "h-8 text-xs",
+		md: "h-9 text-sm",
+		lg: "h-10 text-base"
+	}, R = {
+		sm: "h-8 w-8",
+		md: "h-9 w-9",
+		lg: "h-10 w-10"
+	}, z = {
+		sm: "h-3 w-3",
+		md: "h-4 w-4",
+		lg: "h-5 w-5"
+	}, B = p === void 0 || (u ?? 0) < p, V = f === void 0 || (u ?? 0) > f, H = (n, r) => {
+		let s = n === "increment", c = s ? a : i, l = s ? P : F, u = s ? B : V;
+		return /* @__PURE__ */ o(t, {
+			type: "button",
+			variant: "outline",
+			size: "icon",
+			className: e(R[y], "flex-shrink-0", r === "left" && "rounded-r-none border-r-0", r === "right" && "rounded-l-none border-l-0"),
+			onClick: l,
+			disabled: _ || !u,
+			tabIndex: -1,
+			"aria-label": s ? "Augmenter" : "Diminuer",
+			children: /* @__PURE__ */ o(c, { className: z[y] })
+		});
+	};
+	return b === "none" ? /* @__PURE__ */ o(n, {
+		id: T,
+		name: E,
+		type: "text",
+		inputMode: "decimal",
+		value: D,
+		onChange: j,
+		onBlur: M,
+		onFocus: N,
+		onKeyDown: I,
+		placeholder: g,
+		disabled: _,
+		className: e(L[y], "text-center", v && "border-destructive focus-visible:ring-destructive", w)
+	}) : b === "right" ? /* @__PURE__ */ s("div", {
+		className: e("flex", w),
+		children: [/* @__PURE__ */ o(n, {
+			id: T,
+			name: E,
+			type: "text",
+			inputMode: "decimal",
+			value: D,
+			onChange: j,
+			onBlur: M,
+			onFocus: N,
+			onKeyDown: I,
+			placeholder: g,
+			disabled: _,
+			className: e(L[y], "rounded-r-none", v && "border-destructive focus-visible:ring-destructive")
+		}), /* @__PURE__ */ s("div", {
+			className: "flex flex-col",
+			children: [/* @__PURE__ */ o(t, {
+				type: "button",
+				variant: "outline",
+				size: "icon",
+				className: e("h-[50%] w-6 rounded-none rounded-tr-md border-l-0 border-b-0", y === "sm" && "h-4", y === "lg" && "h-5"),
+				onClick: P,
+				disabled: _ || !B,
+				tabIndex: -1,
+				"aria-label": "Augmenter",
+				children: /* @__PURE__ */ o(a, { className: "h-2.5 w-2.5" })
+			}), /* @__PURE__ */ o(t, {
+				type: "button",
+				variant: "outline",
+				size: "icon",
+				className: e("h-[50%] w-6 rounded-none rounded-br-md border-l-0", y === "sm" && "h-4", y === "lg" && "h-5"),
+				onClick: F,
+				disabled: _ || !V,
+				tabIndex: -1,
+				"aria-label": "Diminuer",
+				children: /* @__PURE__ */ o(i, { className: "h-2.5 w-2.5" })
+			})]
+		})]
+	}) : /* @__PURE__ */ s("div", {
+		className: e("flex", w),
+		children: [
+			H("decrement", "left"),
+			/* @__PURE__ */ o(n, {
+				id: T,
+				name: E,
+				type: "text",
+				inputMode: "decimal",
+				value: D,
+				onChange: j,
+				onBlur: M,
+				onFocus: N,
+				onKeyDown: I,
+				placeholder: g,
+				disabled: _,
+				className: e(L[y], "rounded-none text-center", v && "border-destructive focus-visible:ring-destructive")
+			}),
+			H("increment", "right")
+		]
+	});
+}
+function d(e = {}) {
+	let { initialValue: t, min: n, max: i, step: a = 1 } = e, [o, s] = r.useState(t);
+	return {
+		value: o,
+		onChange: s,
+		increment: () => {
+			s((e) => c((e ?? (n === void 0 ? 0 : n)) + a, n, i));
+		},
+		decrement: () => {
+			s((e) => c((e ?? (n === void 0 ? 0 : n)) - a, n, i));
+		},
+		reset: () => s(t),
+		clear: () => s(void 0),
+		min: n,
+		max: i,
+		step: a
+	};
+}
+//#endregion
+export { u as default, d as useNumberInput };

package/dist/components/waka-orbital-menu/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(e=!1){let[t,r]=n.useState(e);return{isOpen:t,toggle:n.useCallback(()=>{r(e=>!e)},[]),open:n.useCallback(()=>{r(!0)},[]),close:n.useCallback(()=>{r(!1)},[]),setIsOpen:r}}function a({items:e,isOpen:i,onOpenChange:a,radius:o=120,itemSize:s=`default`,centerSize:c=`default`,centerContent:l,animationDuration:u=300,startAngle:d=-90,angleSpan:f=360,showLabels:p=!0,labelPosition:m=`outside`,className:h,itemClassName:g,centerClassName:_}){let[v,y]=n.useState(!1),[b,x]=n.useState(null),[S,C]=n.useState(0),w=i!==void 0,T=w?i:v,E=n.useCallback(()=>{w?a?.(!T):y(e=>!e)},[w,T,a]),D={sm:40,default:56,lg:72},O={sm:48,default:64,lg:80},k=D[s],A=O[c],j=(e,t)=>{let n=d+e*(f/(f===360?t:t-1||1))+S,r=n*Math.PI/180;return{x:Math.cos(r)*o,y:Math.sin(r)*o,angle:n}},M=(e,t,n)=>{let r=m===`outside`?k/2+8:0,i=(n%360+360)%360;return m===`inside`?{transform:`translate(-50%, -50%)`,textAlign:`center`}:i>=315||i<45?{transform:`translate(-50%, calc(-100% - ${r}px))`,textAlign:`center`}:i>=45&&i<135?{transform:`translate(${r}px, -50%)`,textAlign:`left`}:i>=135&&i<225?{transform:`translate(-50%, ${r}px)`,textAlign:`center`}:{transform:`translate(calc(-100% - ${r}px), -50%)`,textAlign:`right`}},N=(o+k)*2+40;return(0,r.jsxs)(`div`,{className:t.cn(`relative inline-flex items-center justify-center`,h),style:{width:N,height:N},children:[e.map((n,i)=>{let{x:a,y:o,angle:s}=j(i,e.length),c=b===n.id,l=M(a,o,s);return(0,r.jsxs)(`div`,{className:`absolute`,style:{left:`50%`,top:`50%`,transform:`translate(-50%, -50%) translate(${a}px, ${o}px)`,opacity:+!!T,scale:+!!T,transition:`all ${u}ms cubic-bezier(0.68, -0.55, 0.265, 1.55)`,transitionDelay:T?`${i*50}ms`:`${(e.length-i-1)*30}ms`,pointerEvents:T?`auto`:`none`},onMouseEnter:()=>x(n.id),onMouseLeave:()=>x(null),children:[(0,r.jsx)(`button`,{type:`button`,onClick:()=>{n.disabled||n.onClick?.()},disabled:n.disabled,className:t.cn(`relative flex items-center justify-center rounded-full transition-all duration-200`,`bg-background border-2 border-border shadow-lg`,`hover:scale-110 hover:shadow-xl hover:border-primary`,`focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2`,`active:scale-95`,n.disabled&&`opacity-50 cursor-not-allowed hover:scale-100`,g),style:{width:k,height:k,backgroundColor:n.color,borderColor:c?void 0:n.color},children:(0,r.jsx)(`span`,{className:t.cn(`transition-transform duration-200`,c&&`scale-110`),children:n.icon})}),p&&c&&(0,r.jsx)(`div`,{className:t.cn(`absolute left-1/2 top-1/2 z-10 whitespace-nowrap`,`rounded-md bg-foreground px-2 py-1 text-xs font-medium text-background shadow-lg`,`animate-in fade-in-0 zoom-in-95 duration-150`),style:{transform:l.transform,textAlign:l.textAlign},children:n.label})]},n.id)}),(0,r.jsxs)(`button`,{type:`button`,onClick:E,className:t.cn(`relative z-10 flex items-center justify-center rounded-full`,`bg-primary text-primary-foreground shadow-xl`,`transition-all duration-300 ease-out`,`hover:shadow-2xl hover:scale-105`,`focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2`,`active:scale-95`,_),style:{width:A,height:A},"aria-expanded":T,"aria-label":T?`Close menu`:`Open menu`,children:[(0,r.jsx)(`span`,{className:`transition-transform duration-300`,style:{transform:`rotate(${T?45:0}deg)`},children:l||(0,r.jsxs)(`svg`,{width:A*.4,height:A*.4,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,focusable:`false`,children:[(0,r.jsx)(`line`,{x1:`12`,y1:`5`,x2:`12`,y2:`19`}),(0,r.jsx)(`line`,{x1:`5`,y1:`12`,x2:`19`,y2:`12`})]})}),T&&(0,r.jsx)(`span`,{className:`absolute inset-0 rounded-full bg-primary animate-ping opacity-20`,style:{animationDuration:`1s`,animationIterationCount:`1`}})]}),(0,r.jsx)(`div`,{className:t.cn(`absolute pointer-events-none rounded-full border-2 border-dashed border-muted-foreground/20`,`transition-all duration-300`),style:{width:o*2,height:o*2,opacity:+!!T,scale:T?1:.8}}),T&&e.length>3&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(`button`,{type:`button`,onClick:()=>C(t=>t-f/e.length),className:t.cn(`absolute z-20 flex items-center justify-center`,`w-8 h-8 rounded-full bg-muted text-muted-foreground`,`hover:bg-accent hover:text-accent-foreground`,`transition-all duration-200`,`focus:outline-none focus:ring-2 focus:ring-primary`),style:{left:8,top:`50%`,transform:`translateY(-50%)`},"aria-label":`Rotate left`,children:(0,r.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,focusable:`false`,children:(0,r.jsx)(`polyline`,{points:`15 18 9 12 15 6`})})}),(0,r.jsx)(`button`,{type:`button`,onClick:()=>C(t=>t+f/e.length),className:t.cn(`absolute z-20 flex items-center justify-center`,`w-8 h-8 rounded-full bg-muted text-muted-foreground`,`hover:bg-accent hover:text-accent-foreground`,`transition-all duration-200`,`focus:outline-none focus:ring-2 focus:ring-primary`),style:{right:8,top:`50%`,transform:`translateY(-50%)`},"aria-label":`Rotate right`,children:(0,r.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,focusable:`false`,children:(0,r.jsx)(`polyline`,{points:`9 18 15 12 9 6`})})})]})]})}function o({direction:e=`top`,...t}){let n={top:{startAngle:-180,angleSpan:180},bottom:{startAngle:0,angleSpan:180},left:{startAngle:-270,angleSpan:180},right:{startAngle:-90,angleSpan:180}};return(0,r.jsx)(a,{...t,startAngle:n[e].startAngle,angleSpan:n[e].angleSpan})}exports.WakaOrbitalMenuCompact=o,exports.default=a,exports.useOrbitalMenu=i;