@wakastellar/ui 4.0.0 → 4.0.1

package/dist/components/waka-bottom-sheet/index.es.js

@@ -0,0 +1,237 @@
+"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-bottom-sheet/index.tsx
+var o = n("fixed inset-x-0 bottom-0 z-50 flex flex-col bg-background touch-none", {
+	variants: { variant: {
+		default: "rounded-t-2xl shadow-2xl border-t border-border",
+		flat: "shadow-lg",
+		glass: "rounded-t-2xl bg-background/80 backdrop-blur-xl border-t border-white/20"
+	} },
+	defaultVariants: { variant: "default" }
+}), s = n("fixed inset-0 z-40 transition-opacity", {
+	variants: { variant: {
+		default: "bg-black/50",
+		blur: "bg-black/30 backdrop-blur-sm",
+		none: "bg-transparent pointer-events-none"
+	} },
+	defaultVariants: { variant: "default" }
+}), c = n("mx-auto mt-3 mb-2 rounded-full bg-muted transition-colors", {
+	variants: { size: {
+		sm: "w-8 h-1",
+		default: "w-12 h-1.5",
+		lg: "w-16 h-2"
+	} },
+	defaultVariants: { size: "default" }
+});
+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);
+}
+var d = t.forwardRef(({ open: n, onOpenChange: d, snapPoints: f = [
+	25,
+	50,
+	90
+], defaultSnapPoint: ee = 0, snapPoint: p, onSnapPointChange: m, showBackdrop: h = !0, closeOnBackdropClick: g = !0, showHandle: _ = !0, blockScroll: v = !0, hapticFeedback: y = !0, header: b, footer: x, children: S, onDragStart: C, onDragEnd: w, animationDuration: T = 300, closeOnEscape: E = !0, variant: D, className: O, ...k }, A) => {
+	let j = t.useRef(null), M = t.useRef(null), [N, P] = t.useState(ee), [F, I] = t.useState(!1), [L, R] = t.useState({
+		y: 0,
+		height: 0
+	}), [z, B] = t.useState(0), [V, te] = t.useState(0), [H, U] = t.useState(!1), W = p ?? N, G = t.useCallback((e) => {
+		P(e), m?.(e);
+	}, [m]);
+	t.useImperativeHandle(A, () => j.current);
+	let K = t.useCallback((e) => e === "full" ? V : e === "content" ? M.current?.scrollHeight ?? V * .5 : e / 100 * V, [V]), q = t.useMemo(() => f.map(K), [f, K]);
+	t.useEffect(() => {
+		let e = () => te(window.innerHeight);
+		return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+	}, []), t.useEffect(() => {
+		n && V > 0 && B(q[W] ?? q[0]);
+	}, [
+		n,
+		V,
+		q,
+		W
+	]), t.useEffect(() => {
+		if (v && n) {
+			let e = document.body.style.overflow;
+			return document.body.style.overflow = "hidden", () => {
+				document.body.style.overflow = e;
+			};
+		}
+	}, [v, n]), t.useEffect(() => {
+		if (!E || !n) return;
+		let e = (e) => {
+			e.key === "Escape" && d(!1);
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [
+		E,
+		n,
+		d
+	]);
+	let J = t.useCallback((e) => {
+		let t = 0, n = Infinity;
+		return q.forEach((r, i) => {
+			let a = Math.abs(e - r);
+			a < n && (n = a, t = i);
+		}), t;
+	}, [q]), Y = t.useCallback((e) => {
+		H || (I(!0), R({
+			y: e,
+			height: z
+		}), C?.());
+	}, [
+		H,
+		z,
+		C
+	]), X = t.useCallback((e) => {
+		if (!F) return;
+		let t = L.y - e;
+		B(u(L.height + t, 0, V));
+	}, [
+		F,
+		L,
+		V
+	]), Z = t.useCallback(() => {
+		if (!F) return;
+		if (I(!1), z < q[0] * .5) {
+			U(!0), B(0), setTimeout(() => {
+				d(!1), U(!1);
+			}, T), w?.(-1);
+			return;
+		}
+		let e = J(z), t = q[e];
+		y && e !== W && l("light"), U(!0), B(t), G(e), setTimeout(() => {
+			U(!1);
+		}, T), w?.(e);
+	}, [
+		F,
+		z,
+		q,
+		J,
+		y,
+		W,
+		T,
+		d,
+		w,
+		G
+	]), ne = t.useCallback((e) => {
+		Y(e.touches[0].clientY);
+	}, [Y]), Q = t.useCallback((e) => {
+		X(e.touches[0].clientY);
+	}, [X]), $ = t.useCallback(() => {
+		Z();
+	}, [Z]), re = t.useCallback((e) => {
+		Y(e.clientY), e.preventDefault();
+	}, [Y]);
+	t.useEffect(() => {
+		if (!F) return;
+		let e = (e) => {
+			X(e.clientY);
+		}, t = () => {
+			Z();
+		};
+		return document.addEventListener("mousemove", e), document.addEventListener("mouseup", t), () => {
+			document.removeEventListener("mousemove", e), document.removeEventListener("mouseup", t);
+		};
+	}, [
+		F,
+		X,
+		Z
+	]);
+	let ie = t.useCallback(() => {
+		g && d(!1);
+	}, [g, d]);
+	t.useCallback((e) => {
+		if (e < 0 || e >= f.length) return;
+		let t = q[e];
+		U(!0), B(t), G(e), y && l("light"), setTimeout(() => {
+			U(!1);
+		}, T);
+	}, [
+		f.length,
+		q,
+		y,
+		T,
+		G
+	]);
+	let ae = n ? u(z / (V * .5), 0, 1) : 0;
+	return !n && z === 0 ? null : /* @__PURE__ */ a(r, { children: [h && /* @__PURE__ */ i("div", {
+		className: e(s({ variant: "default" })),
+		style: {
+			opacity: ae,
+			transition: H || !F ? `opacity ${T}ms ease-out` : "none"
+		},
+		onClick: ie,
+		"aria-hidden": "true"
+	}), /* @__PURE__ */ a("div", {
+		ref: j,
+		role: "dialog",
+		"aria-modal": "true",
+		className: e(o({ variant: D }), O),
+		style: {
+			height: z,
+			maxHeight: V,
+			transition: H || !F ? `height ${T}ms ease-out` : "none"
+		},
+		...k,
+		children: [
+			_ && /* @__PURE__ */ i("div", {
+				className: "flex-shrink-0 cursor-grab active:cursor-grabbing",
+				onTouchStart: ne,
+				onTouchMove: Q,
+				onTouchEnd: $,
+				onTouchCancel: $,
+				onMouseDown: re,
+				children: /* @__PURE__ */ i("div", { className: e(c({ size: "default" })) })
+			}),
+			b && /* @__PURE__ */ i("div", {
+				className: "flex-shrink-0 px-4 pb-2 border-b border-border",
+				children: b
+			}),
+			/* @__PURE__ */ i("div", {
+				ref: M,
+				className: "flex-1 overflow-auto overscroll-contain px-4 py-2",
+				children: S
+			}),
+			x && /* @__PURE__ */ i("div", {
+				className: "flex-shrink-0 px-4 pt-2 pb-4 border-t border-border safe-area-inset-bottom",
+				children: x
+			})
+		]
+	})] });
+});
+d.displayName = "WakaBottomSheet";
+function f(e = {}) {
+	let { defaultOpen: n = !1, defaultSnapPoint: r = 0, onOpenChange: i, onSnapPointChange: a } = e, [o, s] = t.useState(n), [c, l] = t.useState(r);
+	return {
+		open: o,
+		snapPoint: c,
+		onOpenChange: t.useCallback((e) => {
+			s(e), i?.(e);
+		}, [i]),
+		onSnapPointChange: t.useCallback((e) => {
+			l(e), a?.(e);
+		}, [a]),
+		openSheet: t.useCallback((e) => {
+			e !== void 0 && l(e), s(!0);
+		}, []),
+		closeSheet: t.useCallback(() => {
+			s(!1);
+		}, []),
+		toggleSheet: t.useCallback(() => {
+			s((e) => !e);
+		}, [])
+	};
+}
+//#endregion
+export { d as WakaBottomSheet, f as useBottomSheet };

package/dist/components/waka-breadcrumb/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(`../dropdown-menu/index.cjs.js`);let r=require(`react`);r=e.__toESM(r);let i=require(`lucide-react`),a=require(`react/jsx-runtime`);function o({item:e,index:n,isLast:r,size:o,variant:s,showHomeIcon:c,renderLink:l,onItemClick:u}){let d={sm:`text-xs py-0.5 px-1.5`,md:`text-sm py-1 px-2`,lg:`text-base py-1.5 px-3`},f={sm:`h-3 w-3`,md:`h-4 w-4`,lg:`h-5 w-5`},p={default:r?`text-foreground font-medium`:`text-muted-foreground hover:text-foreground`,ghost:r?`text-foreground font-medium bg-muted rounded-md`:`text-muted-foreground hover:text-foreground hover:bg-muted rounded-md`,outline:r?`text-foreground font-medium border rounded-md`:`text-muted-foreground hover:text-foreground hover:border-foreground border border-transparent rounded-md`},m=(0,a.jsxs)(`span`,{className:`flex items-center gap-1.5`,children:[n===0&&c&&!e.icon&&(0,a.jsx)(i.Home,{className:f[o]}),e.icon&&(0,a.jsx)(`span`,{className:f[o],children:e.icon}),(0,a.jsx)(`span`,{className:`truncate max-w-[150px]`,children:e.label})]}),h=t.cn(`inline-flex items-center transition-colors`,d[o],p[s],e.disabled&&`opacity-50 pointer-events-none`),g=t=>{u&&(t.preventDefault(),u(e,n))};return r||!e.href?(0,a.jsx)(`span`,{className:t.cn(h,`cursor-default`),"aria-current":r?`page`:void 0,children:m}):l?l(e,(0,a.jsx)(`span`,{className:h,onClick:g,children:m})):(0,a.jsx)(`a`,{href:e.href,className:h,onClick:g,children:m})}function s({items:e,startIndex:t,size:r,renderLink:o,onItemClick:s}){return(0,a.jsxs)(n.DropdownMenu,{children:[(0,a.jsx)(n.DropdownMenuTrigger,{asChild:!0,children:(0,a.jsx)(`button`,{type:`button`,className:`inline-flex items-center justify-center p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors`,"aria-label":`Afficher les éléments masqués`,children:(0,a.jsx)(i.MoreHorizontal,{className:{sm:`h-3 w-3`,md:`h-4 w-4`,lg:`h-5 w-5`}[r]})})}),(0,a.jsx)(n.DropdownMenuContent,{align:`start`,children:e.map((e,r)=>{let i=t+r;return o&&e.href?(0,a.jsx)(n.DropdownMenuItem,{asChild:!0,children:o(e,(0,a.jsxs)(`span`,{className:`flex items-center gap-2 w-full`,children:[e.icon,e.label]}))},i):(0,a.jsxs)(n.DropdownMenuItem,{onClick:()=>{s?.(e,i)},disabled:e.disabled,children:[e.icon&&(0,a.jsx)(`span`,{className:`mr-2`,children:e.icon}),e.label]},i)})})]})}function c({items:e,separator:n,showHomeIcon:c=!1,maxItems:l,renderLink:u,onItemClick:d,size:f=`md`,variant:p=`default`,className:m}){let h=(0,a.jsx)(i.ChevronRight,{className:t.cn({sm:`h-3 w-3`,md:`h-4 w-4`,lg:`h-5 w-5`}[f],`text-muted-foreground`)}),g=()=>n??h,_=l&&e.length>l,v,y=[],b=0;if(_&&l){let t=Math.max(l-2,1);v=[e[0],...e.slice(-t)],y=e.slice(1,-t),b=1}else v=e;return(0,a.jsx)(`nav`,{"aria-label":`Fil d'Ariane`,className:t.cn(`flex items-center`,m),children:(0,a.jsxs)(`ol`,{className:`flex items-center flex-wrap gap-1`,children:[v.length>0&&(0,a.jsx)(`li`,{className:`flex items-center`,children:(0,a.jsx)(o,{item:v[0],index:0,isLast:v.length===1&&!_,size:f,variant:p,showHomeIcon:c,renderLink:u,onItemClick:d})}),_&&y.length>0&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(`li`,{className:`flex items-center`,"aria-hidden":`true`,children:g()}),(0,a.jsx)(`li`,{className:`flex items-center`,children:(0,a.jsx)(s,{items:y,startIndex:b,size:f,renderLink:u,onItemClick:d})})]}),v.slice(1).map((t,n)=>{let i=_?e.length-(v.length-1-n):n+1;return(0,a.jsxs)(r.Fragment,{children:[(0,a.jsx)(`li`,{className:`flex items-center`,"aria-hidden":`true`,children:g()}),(0,a.jsx)(`li`,{className:`flex items-center`,children:(0,a.jsx)(o,{item:t,index:i,isLast:i===e.length-1,size:f,variant:p,showHomeIcon:!1,renderLink:u,onItemClick:d})})]},i)})]})})}function l(e,t){let{homeLabel:n=`Accueil`,labelMap:i={},excludePaths:a=[]}=t||{};return r.useMemo(()=>{let t=e.split(`/`).filter(Boolean).filter(e=>!a.includes(e)),r=[{label:n,href:`/`}],o=``;return t.forEach(e=>{o+=`/${e}`;let t=i[e]||e.charAt(0).toUpperCase()+e.slice(1).replace(/-/g,` `);r.push({label:t,href:o})}),r},[e,n,i,a])}exports.default=c,exports.useBreadcrumbFromPath=l;

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

@@ -0,0 +1,179 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { DropdownMenu as t, DropdownMenuContent as n, DropdownMenuItem as r, DropdownMenuTrigger as i } from "../dropdown-menu/index.es.js";
+import * as a from "react";
+import { ChevronRight as o, Home as s, MoreHorizontal as c } from "lucide-react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/waka-breadcrumb/index.tsx
+function f({ item: t, index: n, isLast: r, size: i, variant: a, showHomeIcon: o, renderLink: c, onItemClick: l }) {
+	let f = {
+		sm: "text-xs py-0.5 px-1.5",
+		md: "text-sm py-1 px-2",
+		lg: "text-base py-1.5 px-3"
+	}, p = {
+		sm: "h-3 w-3",
+		md: "h-4 w-4",
+		lg: "h-5 w-5"
+	}, m = {
+		default: r ? "text-foreground font-medium" : "text-muted-foreground hover:text-foreground",
+		ghost: r ? "text-foreground font-medium bg-muted rounded-md" : "text-muted-foreground hover:text-foreground hover:bg-muted rounded-md",
+		outline: r ? "text-foreground font-medium border rounded-md" : "text-muted-foreground hover:text-foreground hover:border-foreground border border-transparent rounded-md"
+	}, h = /* @__PURE__ */ d("span", {
+		className: "flex items-center gap-1.5",
+		children: [
+			n === 0 && o && !t.icon && /* @__PURE__ */ u(s, { className: p[i] }),
+			t.icon && /* @__PURE__ */ u("span", {
+				className: p[i],
+				children: t.icon
+			}),
+			/* @__PURE__ */ u("span", {
+				className: "truncate max-w-[150px]",
+				children: t.label
+			})
+		]
+	}), g = e("inline-flex items-center transition-colors", f[i], m[a], t.disabled && "opacity-50 pointer-events-none"), _ = (e) => {
+		l && (e.preventDefault(), l(t, n));
+	};
+	return r || !t.href ? /* @__PURE__ */ u("span", {
+		className: e(g, "cursor-default"),
+		"aria-current": r ? "page" : void 0,
+		children: h
+	}) : c ? c(t, /* @__PURE__ */ u("span", {
+		className: g,
+		onClick: _,
+		children: h
+	})) : /* @__PURE__ */ u("a", {
+		href: t.href,
+		className: g,
+		onClick: _,
+		children: h
+	});
+}
+function p({ items: e, startIndex: a, size: o, renderLink: s, onItemClick: l }) {
+	return /* @__PURE__ */ d(t, { children: [/* @__PURE__ */ u(i, {
+		asChild: !0,
+		children: /* @__PURE__ */ u("button", {
+			type: "button",
+			className: "inline-flex items-center justify-center p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+			"aria-label": "Afficher les éléments masqués",
+			children: /* @__PURE__ */ u(c, { className: {
+				sm: "h-3 w-3",
+				md: "h-4 w-4",
+				lg: "h-5 w-5"
+			}[o] })
+		})
+	}), /* @__PURE__ */ u(n, {
+		align: "start",
+		children: e.map((e, t) => {
+			let n = a + t;
+			return s && e.href ? /* @__PURE__ */ u(r, {
+				asChild: !0,
+				children: s(e, /* @__PURE__ */ d("span", {
+					className: "flex items-center gap-2 w-full",
+					children: [e.icon, e.label]
+				}))
+			}, n) : /* @__PURE__ */ d(r, {
+				onClick: () => {
+					l?.(e, n);
+				},
+				disabled: e.disabled,
+				children: [e.icon && /* @__PURE__ */ u("span", {
+					className: "mr-2",
+					children: e.icon
+				}), e.label]
+			}, n);
+		})
+	})] });
+}
+function m({ items: t, separator: n, showHomeIcon: r = !1, maxItems: i, renderLink: s, onItemClick: c, size: m = "md", variant: h = "default", className: g }) {
+	let _ = /* @__PURE__ */ u(o, { className: e({
+		sm: "h-3 w-3",
+		md: "h-4 w-4",
+		lg: "h-5 w-5"
+	}[m], "text-muted-foreground") }), v = () => n ?? _, y = i && t.length > i, b, x = [], S = 0;
+	if (y && i) {
+		let e = Math.max(i - 2, 1);
+		b = [t[0], ...t.slice(-e)], x = t.slice(1, -e), S = 1;
+	} else b = t;
+	return /* @__PURE__ */ u("nav", {
+		"aria-label": "Fil d'Ariane",
+		className: e("flex items-center", g),
+		children: /* @__PURE__ */ d("ol", {
+			className: "flex items-center flex-wrap gap-1",
+			children: [
+				b.length > 0 && /* @__PURE__ */ u("li", {
+					className: "flex items-center",
+					children: /* @__PURE__ */ u(f, {
+						item: b[0],
+						index: 0,
+						isLast: b.length === 1 && !y,
+						size: m,
+						variant: h,
+						showHomeIcon: r,
+						renderLink: s,
+						onItemClick: c
+					})
+				}),
+				y && x.length > 0 && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("li", {
+					className: "flex items-center",
+					"aria-hidden": "true",
+					children: v()
+				}), /* @__PURE__ */ u("li", {
+					className: "flex items-center",
+					children: /* @__PURE__ */ u(p, {
+						items: x,
+						startIndex: S,
+						size: m,
+						renderLink: s,
+						onItemClick: c
+					})
+				})] }),
+				b.slice(1).map((e, n) => {
+					let r = y ? t.length - (b.length - 1 - n) : n + 1;
+					return /* @__PURE__ */ d(a.Fragment, { children: [/* @__PURE__ */ u("li", {
+						className: "flex items-center",
+						"aria-hidden": "true",
+						children: v()
+					}), /* @__PURE__ */ u("li", {
+						className: "flex items-center",
+						children: /* @__PURE__ */ u(f, {
+							item: e,
+							index: r,
+							isLast: r === t.length - 1,
+							size: m,
+							variant: h,
+							showHomeIcon: !1,
+							renderLink: s,
+							onItemClick: c
+						})
+					})] }, r);
+				})
+			]
+		})
+	});
+}
+function h(e, t) {
+	let { homeLabel: n = "Accueil", labelMap: r = {}, excludePaths: i = [] } = t || {};
+	return a.useMemo(() => {
+		let t = e.split("/").filter(Boolean).filter((e) => !i.includes(e)), a = [{
+			label: n,
+			href: "/"
+		}], o = "";
+		return t.forEach((e) => {
+			o += `/${e}`;
+			let t = r[e] || e.charAt(0).toUpperCase() + e.slice(1).replace(/-/g, " ");
+			a.push({
+				label: t,
+				href: o
+			});
+		}), a;
+	}, [
+		e,
+		n,
+		r,
+		i
+	]);
+}
+//#endregion
+export { m as default, h as useBreadcrumbFromPath };

package/dist/components/waka-breadcrumb-path/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`);function a({width:e,height:r,color:a,strokeWidth:o,animationDuration:s,isAnimating:c}){let l=n.useRef(null),[u,d]=n.useState(0);n.useEffect(()=>{l.current&&d(l.current.getTotalLength())},[e,r]);let f=r/2,p=`M 0 ${f} Q ${e/4} ${f-8} ${e/2} ${f} Q ${3*e/4} ${f+8} ${e} ${f}`;return(0,i.jsxs)(`svg`,{width:e,height:r,className:`absolute left-0 top-0 pointer-events-none overflow-visible`,style:{zIndex:-1},children:[(0,i.jsx)(`path`,{d:p,fill:`none`,stroke:a,strokeWidth:o,opacity:.2,strokeLinecap:`round`}),(0,i.jsx)(`path`,{ref:l,d:p,fill:`none`,stroke:a,strokeWidth:o,strokeLinecap:`round`,strokeDasharray:u,strokeDashoffset:c?u:0,style:{transition:`stroke-dashoffset ${s}ms ease-out`}}),(0,i.jsx)(`circle`,{cx:e,cy:f,r:o+1,fill:a,className:t.cn(`transition-all`,c?`opacity-0 scale-0`:`opacity-100 scale-100`),style:{transitionDuration:`${s/2}ms`,transitionDelay:c?`0ms`:`${s/2}ms`,transformOrigin:`center`}})]})}function o({items:e,size:a,renderItem:o}){let[s,c]=n.useState(!1),l=n.useRef(null),u=n.useRef(null);return n.useEffect(()=>{let e=e=>{u.current&&l.current&&!u.current.contains(e.target)&&!l.current.contains(e.target)&&c(!1)};if(s)return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[s]),(0,i.jsxs)(`div`,{className:`relative`,children:[(0,i.jsx)(`button`,{ref:l,type:`button`,onClick:()=>c(!s),className:t.cn(`flex items-center justify-center rounded-md`,`text-muted-foreground hover:text-foreground hover:bg-muted`,`transition-colors duration-200`,{sm:`p-1`,md:`p-1.5`,lg:`p-2`}[a]),"aria-label":`Show hidden items`,"aria-expanded":s,children:(0,i.jsx)(r.MoreHorizontal,{className:{sm:`h-3 w-3`,md:`h-4 w-4`,lg:`h-5 w-5`}[a]})}),(0,i.jsx)(`div`,{ref:u,className:t.cn(`absolute top-full left-0 mt-2 z-50`,`min-w-[160px] py-1 rounded-lg`,`bg-popover border shadow-lg`,`transition-all duration-200`,s?`opacity-100 translate-y-0 visible`:`opacity-0 -translate-y-2 invisible`),children:e.map(e=>o?(0,i.jsx)(`div`,{className:`px-1`,children:o(e,!1)},e.id):(0,i.jsxs)(e.href?`a`:`button`,{href:e.href,onClick:()=>{e.onClick?.(),c(!1)},className:t.cn(`w-full flex items-center gap-2 px-3 py-2 text-sm`,`text-foreground hover:bg-muted`,`transition-colors duration-150`),children:[e.icon&&(0,i.jsx)(`span`,{className:`h-4 w-4 opacity-70`,children:e.icon}),(0,i.jsx)(`span`,{className:`truncate`,children:e.label})]},e.id))})]})}function s({item:e,isLast:n,size:r,renderItem:a,isNew:o,animationDuration:s}){let c={sm:`text-xs px-2 py-1`,md:`text-sm px-3 py-1.5`,lg:`text-base px-4 py-2`},l={sm:`h-3 w-3`,md:`h-4 w-4`,lg:`h-5 w-5`};if(a)return(0,i.jsx)(i.Fragment,{children:a(e,n)});let u=e.href&&!n?`a`:`span`,d=!n&&(e.href||e.onClick);return(0,i.jsxs)(u,{href:e.href,onClick:d?e.onClick:void 0,className:t.cn(`inline-flex items-center gap-1.5 rounded-md font-medium`,`transition-all`,c[r],n?`text-foreground bg-muted`:`text-muted-foreground hover:text-foreground hover:bg-muted/50`,d&&`cursor-pointer`,o&&`animate-in fade-in-0 slide-in-from-left-2`),style:{animationDuration:o?`${s}ms`:void 0},"aria-current":n?`page`:void 0,children:[e.icon&&(0,i.jsx)(`span`,{className:l[r],children:e.icon}),(0,i.jsx)(`span`,{className:`truncate max-w-[120px]`,children:e.label})]})}function c({items:e,maxItems:c=4,showPath:l=!0,pathColor:u=`hsl(var(--primary))`,pathStrokeWidth:d=2,animationDuration:f=400,size:p=`md`,renderItem:m,className:h}){let g=n.useRef(null),[_,v]=n.useState(!1),[y,b]=n.useState(e.length),[x,S]=n.useState(0);n.useEffect(()=>{if(e.length!==y){v(!0);let t=setTimeout(()=>{v(!1),b(e.length)},f);return()=>clearTimeout(t)}},[e.length,y,f]),n.useEffect(()=>{if(!g.current||!l)return;let e=new ResizeObserver(e=>{for(let t of e)S(t.contentRect.width)});return e.observe(g.current),()=>e.disconnect()},[l]);let C={sm:`h-3 w-3`,md:`h-4 w-4`,lg:`h-5 w-5`},w=e.length>c,T,E=[];if(w){let t=Math.max(c-2,1);T=[e[0],...e.slice(-t)],E=e.slice(1,-t)}else T=e;let D=p===`sm`?28:p===`lg`?44:36;return(0,i.jsxs)(`nav`,{ref:g,"aria-label":`Breadcrumb`,className:t.cn(`relative inline-flex items-center`,h),children:[l&&x>0&&(0,i.jsx)(a,{width:x,height:D,color:u,strokeWidth:d,animationDuration:f,isAnimating:_}),(0,i.jsxs)(`ol`,{className:`relative flex items-center flex-wrap gap-1`,children:[T.length>0&&(0,i.jsx)(`li`,{className:`flex items-center`,children:(0,i.jsx)(s,{item:T[0],isLast:T.length===1&&!w,size:p,renderItem:m,animationDuration:f})}),w&&E.length>0&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`li`,{className:`flex items-center text-muted-foreground`,"aria-hidden":`true`,children:(0,i.jsx)(r.ChevronRight,{className:C[p]})}),(0,i.jsx)(`li`,{className:`flex items-center`,children:(0,i.jsx)(o,{items:E,size:p,renderItem:m})})]}),T.slice(1).map((a,o)=>{let c=w?e.length-(T.length-1-o):o+1,l=c===e.length-1,u=c===e.length-1&&e.length>y;return(0,i.jsxs)(n.Fragment,{children:[(0,i.jsx)(`li`,{className:`flex items-center text-muted-foreground`,"aria-hidden":`true`,children:(0,i.jsx)(r.ChevronRight,{className:t.cn(C[p],`transition-all`,u&&`animate-in fade-in-0`),style:{animationDuration:u?`${f}ms`:void 0}})}),(0,i.jsx)(`li`,{className:`flex items-center`,children:(0,i.jsx)(s,{item:a,isLast:l,size:p,renderItem:m,isNew:u,animationDuration:f})})]},a.id)})]})]})}function l(e=[]){let[t,r]=n.useState(e);return{items:t,push:n.useCallback(e=>{r(t=>[...t,e])},[]),pop:n.useCallback(()=>{r(e=>e.slice(0,-1))},[]),goTo:n.useCallback(e=>{r(t=>{let n=t.findIndex(t=>t.id===e);return n===-1?t:t.slice(0,n+1)})},[]),reset:n.useCallback((e=[])=>{r(e)},[]),replace:n.useCallback((e,t)=>{r(n=>n.map(n=>n.id===e?t:n))},[]),setItems:r}}exports.default=c,exports.useBreadcrumbPath=l;

package/dist/components/waka-breadcrumb-path/index.es.js

@@ -0,0 +1,247 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { ChevronRight as n, MoreHorizontal as r } from "lucide-react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/waka-breadcrumb-path/index.tsx
+function s({ width: n, height: r, color: i, strokeWidth: s, animationDuration: c, isAnimating: l }) {
+	let u = t.useRef(null), [d, f] = t.useState(0);
+	t.useEffect(() => {
+		u.current && f(u.current.getTotalLength());
+	}, [n, r]);
+	let p = r / 2, m = `M 0 ${p} Q ${n / 4} ${p - 8} ${n / 2} ${p} Q ${3 * n / 4} ${p + 8} ${n} ${p}`;
+	return /* @__PURE__ */ o("svg", {
+		width: n,
+		height: r,
+		className: "absolute left-0 top-0 pointer-events-none overflow-visible",
+		style: { zIndex: -1 },
+		children: [
+			/* @__PURE__ */ a("path", {
+				d: m,
+				fill: "none",
+				stroke: i,
+				strokeWidth: s,
+				opacity: .2,
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ a("path", {
+				ref: u,
+				d: m,
+				fill: "none",
+				stroke: i,
+				strokeWidth: s,
+				strokeLinecap: "round",
+				strokeDasharray: d,
+				strokeDashoffset: l ? d : 0,
+				style: { transition: `stroke-dashoffset ${c}ms ease-out` }
+			}),
+			/* @__PURE__ */ a("circle", {
+				cx: n,
+				cy: p,
+				r: s + 1,
+				fill: i,
+				className: e("transition-all", l ? "opacity-0 scale-0" : "opacity-100 scale-100"),
+				style: {
+					transitionDuration: `${c / 2}ms`,
+					transitionDelay: l ? "0ms" : `${c / 2}ms`,
+					transformOrigin: "center"
+				}
+			})
+		]
+	});
+}
+function c({ items: n, size: i, renderItem: s }) {
+	let [c, l] = t.useState(!1), u = t.useRef(null), d = t.useRef(null);
+	return t.useEffect(() => {
+		let e = (e) => {
+			d.current && u.current && !d.current.contains(e.target) && !u.current.contains(e.target) && l(!1);
+		};
+		if (c) return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [c]), /* @__PURE__ */ o("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ a("button", {
+			ref: u,
+			type: "button",
+			onClick: () => l(!c),
+			className: e("flex items-center justify-center rounded-md", "text-muted-foreground hover:text-foreground hover:bg-muted", "transition-colors duration-200", {
+				sm: "p-1",
+				md: "p-1.5",
+				lg: "p-2"
+			}[i]),
+			"aria-label": "Show hidden items",
+			"aria-expanded": c,
+			children: /* @__PURE__ */ a(r, { className: {
+				sm: "h-3 w-3",
+				md: "h-4 w-4",
+				lg: "h-5 w-5"
+			}[i] })
+		}), /* @__PURE__ */ a("div", {
+			ref: d,
+			className: e("absolute top-full left-0 mt-2 z-50", "min-w-[160px] py-1 rounded-lg", "bg-popover border shadow-lg", "transition-all duration-200", c ? "opacity-100 translate-y-0 visible" : "opacity-0 -translate-y-2 invisible"),
+			children: n.map((t) => s ? /* @__PURE__ */ a("div", {
+				className: "px-1",
+				children: s(t, !1)
+			}, t.id) : /* @__PURE__ */ o(t.href ? "a" : "button", {
+				href: t.href,
+				onClick: () => {
+					t.onClick?.(), l(!1);
+				},
+				className: e("w-full flex items-center gap-2 px-3 py-2 text-sm", "text-foreground hover:bg-muted", "transition-colors duration-150"),
+				children: [t.icon && /* @__PURE__ */ a("span", {
+					className: "h-4 w-4 opacity-70",
+					children: t.icon
+				}), /* @__PURE__ */ a("span", {
+					className: "truncate",
+					children: t.label
+				})]
+			}, t.id))
+		})]
+	});
+}
+function l({ item: t, isLast: n, size: r, renderItem: s, isNew: c, animationDuration: l }) {
+	let u = {
+		sm: "text-xs px-2 py-1",
+		md: "text-sm px-3 py-1.5",
+		lg: "text-base px-4 py-2"
+	}, d = {
+		sm: "h-3 w-3",
+		md: "h-4 w-4",
+		lg: "h-5 w-5"
+	};
+	if (s) return /* @__PURE__ */ a(i, { children: s(t, n) });
+	let f = t.href && !n ? "a" : "span", p = !n && (t.href || t.onClick);
+	return /* @__PURE__ */ o(f, {
+		href: t.href,
+		onClick: p ? t.onClick : void 0,
+		className: e("inline-flex items-center gap-1.5 rounded-md font-medium", "transition-all", u[r], n ? "text-foreground bg-muted" : "text-muted-foreground hover:text-foreground hover:bg-muted/50", p && "cursor-pointer", c && "animate-in fade-in-0 slide-in-from-left-2"),
+		style: { animationDuration: c ? `${l}ms` : void 0 },
+		"aria-current": n ? "page" : void 0,
+		children: [t.icon && /* @__PURE__ */ a("span", {
+			className: d[r],
+			children: t.icon
+		}), /* @__PURE__ */ a("span", {
+			className: "truncate max-w-[120px]",
+			children: t.label
+		})]
+	});
+}
+function u({ items: r, maxItems: u = 4, showPath: d = !0, pathColor: f = "hsl(var(--primary))", pathStrokeWidth: p = 2, animationDuration: m = 400, size: h = "md", renderItem: g, className: _ }) {
+	let v = t.useRef(null), [y, b] = t.useState(!1), [x, S] = t.useState(r.length), [C, w] = t.useState(0);
+	t.useEffect(() => {
+		if (r.length !== x) {
+			b(!0);
+			let e = setTimeout(() => {
+				b(!1), S(r.length);
+			}, m);
+			return () => clearTimeout(e);
+		}
+	}, [
+		r.length,
+		x,
+		m
+	]), t.useEffect(() => {
+		if (!v.current || !d) return;
+		let e = new ResizeObserver((e) => {
+			for (let t of e) w(t.contentRect.width);
+		});
+		return e.observe(v.current), () => e.disconnect();
+	}, [d]);
+	let T = {
+		sm: "h-3 w-3",
+		md: "h-4 w-4",
+		lg: "h-5 w-5"
+	}, E = r.length > u, D, O = [];
+	if (E) {
+		let e = Math.max(u - 2, 1);
+		D = [r[0], ...r.slice(-e)], O = r.slice(1, -e);
+	} else D = r;
+	let k = h === "sm" ? 28 : h === "lg" ? 44 : 36;
+	return /* @__PURE__ */ o("nav", {
+		ref: v,
+		"aria-label": "Breadcrumb",
+		className: e("relative inline-flex items-center", _),
+		children: [d && C > 0 && /* @__PURE__ */ a(s, {
+			width: C,
+			height: k,
+			color: f,
+			strokeWidth: p,
+			animationDuration: m,
+			isAnimating: y
+		}), /* @__PURE__ */ o("ol", {
+			className: "relative flex items-center flex-wrap gap-1",
+			children: [
+				D.length > 0 && /* @__PURE__ */ a("li", {
+					className: "flex items-center",
+					children: /* @__PURE__ */ a(l, {
+						item: D[0],
+						isLast: D.length === 1 && !E,
+						size: h,
+						renderItem: g,
+						animationDuration: m
+					})
+				}),
+				E && O.length > 0 && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("li", {
+					className: "flex items-center text-muted-foreground",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ a(n, { className: T[h] })
+				}), /* @__PURE__ */ a("li", {
+					className: "flex items-center",
+					children: /* @__PURE__ */ a(c, {
+						items: O,
+						size: h,
+						renderItem: g
+					})
+				})] }),
+				D.slice(1).map((i, s) => {
+					let c = E ? r.length - (D.length - 1 - s) : s + 1, u = c === r.length - 1, d = c === r.length - 1 && r.length > x;
+					return /* @__PURE__ */ o(t.Fragment, { children: [/* @__PURE__ */ a("li", {
+						className: "flex items-center text-muted-foreground",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ a(n, {
+							className: e(T[h], "transition-all", d && "animate-in fade-in-0"),
+							style: { animationDuration: d ? `${m}ms` : void 0 }
+						})
+					}), /* @__PURE__ */ a("li", {
+						className: "flex items-center",
+						children: /* @__PURE__ */ a(l, {
+							item: i,
+							isLast: u,
+							size: h,
+							renderItem: g,
+							isNew: d,
+							animationDuration: m
+						})
+					})] }, i.id);
+				})
+			]
+		})]
+	});
+}
+function d(e = []) {
+	let [n, r] = t.useState(e);
+	return {
+		items: n,
+		push: t.useCallback((e) => {
+			r((t) => [...t, e]);
+		}, []),
+		pop: t.useCallback(() => {
+			r((e) => e.slice(0, -1));
+		}, []),
+		goTo: t.useCallback((e) => {
+			r((t) => {
+				let n = t.findIndex((t) => t.id === e);
+				return n === -1 ? t : t.slice(0, n + 1);
+			});
+		}, []),
+		reset: t.useCallback((e = []) => {
+			r(e);
+		}, []),
+		replace: t.useCallback((e, t) => {
+			r((n) => n.map((n) => n.id === e ? t : n));
+		}, []),
+		setItems: r
+	};
+}
+//#endregion
+export { u as default, d as useBreadcrumbPath };