@g4rcez/components 5.0.1 → 5.0.3

package/dist/components/display/list.d.ts

@@ -0,0 +1,16 @@
+import React, { PropsWithChildren } from "react";
+import { Label } from "../../types";
+type AnimatedItemProps = {
+    title: Label;
+    description: Label;
+    children: Label;
+    avatar?: Label;
+    leading?: React.FC<{
+        open: () => void;
+    }>;
+};
+type AnimatedListProps = object;
+export declare const AnimatedList: (props: PropsWithChildren<AnimatedListProps>) => React.JSX.Element;
+export declare const AnimatedListItem: (props: PropsWithChildren<AnimatedItemProps>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=list.d.ts.map

package/dist/components/display/list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/components/display/list.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAEzF,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,KAAK,iBAAiB,GAAG;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,KAAK,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;CAC5C,CAAC;AAIF,KAAK,iBAAiB,GAAG,MAAM,CAAC;AAiEhC,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,CAAC,iBAAiB,CAAC,sBAgFvE,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,iBAAiB,CAAC,iBAAiB,CAAC,sBAA0C,CAAC"}

package/dist/components/display/list.js

@@ -1,153 +1,163 @@
 "use client";
-import { r as e, t } from "../../proxy-BcJ_5Dwq.js";
-import { t as n } from "../../X.es-Cjq2a_OA.js";
-import { a as r, d as i, f as a, l as o, n as s, o as c, v as l, x as u } from "../../floating-ui.react-CwXtBJ_y.js";
-import { t as d } from "../../MotionConfig-DKKYqBH2.js";
-import f, { Fragment as p, useCallback as m, useId as h, useState as g } from "react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { t as e } from "../../X.es-Cjq2a_OA.js";
+import { t } from "../../use-translations-BE4PuhLm.js";
+import { a as n, d as r, f as i, l as a, n as o, o as s, v as c, x as l } from "../../floating-ui.react-CwXtBJ_y.js";
+import { t as u } from "../../proxy-fP2NxmhM.js";
+import { t as d } from "../../AnimatePresence-j36AYeOQ.js";
+import { t as f } from "../../MotionConfig-CXHoPGbK.js";
+import p, { Fragment as m, useCallback as h, useId as g, useState as _ } from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
 //#region src/components/display/list.tsx
-var y = ({ item: i, context: a, setter: o, get: l, refs: u }) => /* @__PURE__ */ _(c, { children: /* @__PURE__ */ _(d, {
-	reducedMotion: "user",
-	transition: {
-		type: "spring",
-		damping: 30,
-		stiffness: 350
-	},
-	children: /* @__PURE__ */ v(e, {
-		mode: "wait",
-		presenceAffectsLayout: !0,
-		children: [i ? /* @__PURE__ */ _(t.div, {
-			exit: { opacity: 0 },
-			animate: { opacity: 1 },
-			initial: { opacity: 0 },
-			transition: {
-				type: "tween",
-				duration: .15,
-				ease: "easeOut"
-			},
-			className: "pointer-events-none fixed inset-0 top-0 z-overlay h-screen w-screen bg-floating-overlay/70"
-		}, "overlay") : null, i ? /* @__PURE__ */ _(r, {
-			lockScroll: !0,
-			className: "absolute inset-0 z-floating flex items-center justify-center",
-			children: /* @__PURE__ */ _(s, {
-				visuallyHiddenDismiss: !0,
-				modal: !0,
-				closeOnFocusOut: !0,
-				context: a,
-				children: /* @__PURE__ */ v(t.div, {
-					layout: !0,
-					layoutId: `item-${i.id}`,
-					initial: {
-						opacity: .6,
-						scale: .98
-					},
-					animate: {
-						opacity: 1,
-						scale: 1
-					},
-					exit: {
-						opacity: 0,
-						scale: .98
-					},
-					className: "relative flex h-min w-min min-w-xs flex-col gap-list-card-gap rounded-list-radius border border-card-border bg-card-background p-list-card-p py-list-card-py pb-list-card-pb shadow-shadow-card",
-					ref: u.setFloating,
-					...l(),
-					children: [
-						/* @__PURE__ */ _("nav", {
-							className: "absolute right-4 top-1 lg:right-2",
-							children: /* @__PURE__ */ _("button", {
-								type: "button",
-								onClick: o,
-								className: "p-list-close-p opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger",
-								children: /* @__PURE__ */ _(n, {})
+var b = ({ item: r, context: i, setter: a, get: c, refs: l }) => {
+	let p = t();
+	return /* @__PURE__ */ v(s, { children: /* @__PURE__ */ v(f, {
+		reducedMotion: "user",
+		transition: {
+			type: "spring",
+			damping: 30,
+			stiffness: 350
+		},
+		children: /* @__PURE__ */ y(d, {
+			mode: "wait",
+			presenceAffectsLayout: !0,
+			children: [r ? /* @__PURE__ */ v(u.div, {
+				exit: { opacity: 0 },
+				animate: { opacity: 1 },
+				initial: { opacity: 0 },
+				transition: {
+					type: "tween",
+					duration: .15,
+					ease: "easeOut"
+				},
+				className: "pointer-events-none fixed inset-0 top-0 z-overlay h-screen w-screen bg-floating-overlay/70"
+			}, "overlay") : null, r ? /* @__PURE__ */ v(n, {
+				lockScroll: !0,
+				className: "absolute inset-0 z-floating flex items-center justify-center",
+				children: /* @__PURE__ */ v(o, {
+					visuallyHiddenDismiss: !0,
+					modal: !0,
+					closeOnFocusOut: !0,
+					context: i,
+					children: /* @__PURE__ */ y(u.div, {
+						layout: !0,
+						layoutId: `item-${r.id}`,
+						initial: {
+							opacity: .6,
+							scale: .98
+						},
+						animate: {
+							opacity: 1,
+							scale: 1
+						},
+						exit: {
+							opacity: 0,
+							scale: .98
+						},
+						className: "relative flex h-min w-min min-w-xs flex-col gap-list-card-gap rounded-list-radius border border-card-border bg-card-background p-list-card-p py-list-card-py pb-list-card-pb shadow-shadow-card",
+						ref: l.setFloating,
+						...c(),
+						children: [
+							/* @__PURE__ */ v("nav", {
+								className: "absolute right-4 top-1 lg:right-2",
+								children: /* @__PURE__ */ v("button", {
+									type: "button",
+									onClick: a,
+									"aria-label": p.listCloseDetails,
+									className: "p-list-close-p opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger",
+									children: /* @__PURE__ */ v(e, {})
+								})
+							}),
+							/* @__PURE__ */ y(u.header, {
+								layout: !0,
+								className: "flex w-full flex-wrap items-center justify-between gap-list-header-gap",
+								children: [/* @__PURE__ */ v("h3", {
+									className: "min-w-full text-balance text-list-title-text font-medium",
+									children: r.title
+								}), /* @__PURE__ */ v("p", {
+									className: "text-typography-sm leading-snug text-secondary",
+									children: r.description
+								})]
+							}),
+							/* @__PURE__ */ v(u.div, {
+								layout: !0,
+								children: r.children
 							})
-						}),
-						/* @__PURE__ */ v(t.header, {
-							layout: !0,
-							className: "flex w-full flex-wrap items-center justify-between gap-list-header-gap",
-							children: [/* @__PURE__ */ _("h3", {
-								className: "min-w-full text-balance text-list-title-text font-medium",
-								children: i.title
-							}), /* @__PURE__ */ _("p", {
-								className: "text-typography-sm leading-snug text-secondary",
-								children: i.description
-							})]
-						}),
-						/* @__PURE__ */ _(t.div, {
-							layout: !0,
-							children: i.children
-						})
-					]
+						]
+					})
 				})
-			})
-		}, "card") : null]
-	})
-}) }), b = (e) => {
-	let [n, r] = g(null), s = h(), { context: c, refs: d } = a({
-		open: n !== null,
+			}, "card") : null]
+		})
+	}) });
+}, x = (e) => {
+	let n = t(), [o, s] = _(null), d = g(), { context: f, refs: x } = i({
+		open: o !== null,
 		transform: !0,
-		onOpenChange: (e) => e ? void 0 : r(null)
-	}), { getFloatingProps: b } = l([
-		o(c),
-		u(c, { role: "dialog" }),
-		i(c, {
+		onOpenChange: (e) => e ? void 0 : s(null)
+	}), { getFloatingProps: S } = c([
+		a(f),
+		l(f, { role: "dialog" }),
+		r(f, {
 			escapeKey: !0,
 			referencePress: !0,
 			outsidePress: !0
 		})
-	]), x = m(() => {
-		r(null);
-	}, []), S = f.Children.toArray(e.children);
-	return /* @__PURE__ */ v(p, { children: [/* @__PURE__ */ _(y, {
-		refs: d,
-		context: c,
-		get: b,
-		item: n,
-		setter: x
-	}), /* @__PURE__ */ _("ul", {
+	]), C = h(() => {
+		s(null);
+	}, []), w = p.Children.toArray(e.children);
+	return /* @__PURE__ */ y(m, { children: [/* @__PURE__ */ v(b, {
+		refs: x,
+		context: f,
+		get: S,
+		item: o,
+		setter: C
+	}), /* @__PURE__ */ v("ul", {
 		role: "list",
-		children: S.map((e, n) => {
-			let i = e.props, a = `${s}-${n}`, o = () => r({
-				...i,
-				id: a
-			}), c = i.leading;
-			return /* @__PURE__ */ _(t.li, {
+		children: w.map((e, t) => {
+			let r = e.props, i = `${d}-${t}`, a = () => s({
+				...r,
+				id: i
+			}), o = r.leading;
+			return /* @__PURE__ */ v(u.li, {
 				layout: !0,
-				layoutId: `item-${a}`,
+				layoutId: `item-${i}`,
 				className: "border-b border-card-border py-list-item-py last:border-transparent",
-				children: /* @__PURE__ */ _(t.div, {
-					layoutId: `toast-${a}`,
+				children: /* @__PURE__ */ v(u.div, {
+					layoutId: `toast-${i}`,
 					className: "relative",
-					children: /* @__PURE__ */ _("div", {
+					children: /* @__PURE__ */ v("div", {
 						className: "relative flex items-start space-x-3",
-						children: /* @__PURE__ */ v(p, { children: [i.avatar ? /* @__PURE__ */ _("div", { children: /* @__PURE__ */ _("div", {
+						children: /* @__PURE__ */ y(m, { children: [r.avatar ? /* @__PURE__ */ v("div", { children: /* @__PURE__ */ v("div", {
 							className: "relative px-list-avatar-px",
-							children: /* @__PURE__ */ _("button", {
-								onClick: o,
+							children: /* @__PURE__ */ v("button", {
+								type: "button",
+								onClick: a,
+								"aria-label": n.listOpenDetails(String(r.title)),
 								className: "flex size-10 items-center justify-center ring-primary",
-								children: i.avatar
+								children: r.avatar
 							})
-						}) }) : null, /* @__PURE__ */ _("div", {
+						}) }) : null, /* @__PURE__ */ v("div", {
 							className: "min-w-0 flex-1 py-list-body-py text-foreground",
-							children: /* @__PURE__ */ v("div", {
+							children: /* @__PURE__ */ y("div", {
 								className: "flex flex-row flex-nowrap justify-between gap-list-item-gap",
-								children: [/* @__PURE__ */ v("button", {
-									onClick: o,
+								children: [/* @__PURE__ */ y("button", {
+									type: "button",
+									onClick: a,
+									"aria-label": n.listOpenDetails(String(r.title)),
 									className: "cursor-pointer text-left transition-all ease-out hover:text-primary",
-									children: [/* @__PURE__ */ _("h3", { children: i.title }), /* @__PURE__ */ _("p", {
+									children: [/* @__PURE__ */ v("h3", { children: r.title }), /* @__PURE__ */ v("p", {
 										className: "text-typography-sm leading-snug text-secondary",
-										children: i.description
+										children: r.description
 									})]
-								}), c ? /* @__PURE__ */ _(c, { open: o }) : null]
+								}), o ? /* @__PURE__ */ v(o, { open: a }) : null]
 							})
 						})] })
 					})
 				})
-			}, a);
+			}, i);
 		})
 	})] });
-}, x = (e) => /* @__PURE__ */ _(p, { children: e.children });
+}, S = (e) => /* @__PURE__ */ v(m, { children: e.children });
 //#endregion
-export { b as AnimatedList, x as AnimatedListItem };
+export { x as AnimatedList, S as AnimatedListItem };
 
 //# sourceMappingURL=list.js.map

package/dist/components/display/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","names":[],"sources":["../../../src/components/display/list.tsx"],"sourcesContent":["\"use client\";\nimport {\n    FloatingContext,\n    FloatingFocusManager,\n    FloatingOverlay,\n    FloatingPortal,\n    useClick,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useRole,\n} from \"@floating-ui/react\";\nimport { AnimatePresence, motion, MotionConfig } from \"motion/react\";\nimport { XIcon } from \"@phosphor-icons/react\";\nimport React, { Fragment, PropsWithChildren, useCallback, useId, useState } from \"react\";\nimport { Label } from \"../../types\";\n\ntype AnimatedItemProps = {\n    title: Label;\n    description: Label;\n    children: Label;\n    avatar?: Label;\n    leading?: React.FC<{ open: () => void }>;\n};\n\ntype IdAnimatedItem = AnimatedItemProps & { id: string };\n\ntype AnimatedListProps = object;\n\ntype FloatItemProps = {\n    setter: () => void;\n    context: FloatingContext;\n    item: IdAnimatedItem | null;\n    refs: { setFloating: (node: HTMLElement | null) => void };\n    get: ReturnType<typeof useInteractions>[\"getFloatingProps\"];\n};\n\nconst FloatItem = ({ item, context, setter, get, refs }: FloatItemProps) => (\n    <FloatingPortal>\n        <MotionConfig reducedMotion=\"user\" transition={{ type: \"spring\", damping: 30, stiffness: 350 }}>\n            <AnimatePresence mode=\"wait\" presenceAffectsLayout>\n                {item ? (\n                    <motion.div\n                        key=\"overlay\"\n                        exit={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        initial={{ opacity: 0 }}\n                        transition={{ type: \"tween\", duration: 0.15, ease: \"easeOut\" }}\n                        className=\"pointer-events-none fixed inset-0 top-0 z-overlay h-screen w-screen bg-floating-overlay/70\"\n                    />\n                ) : null}\n                {item ? (\n                    <FloatingOverlay key=\"card\" lockScroll className=\"absolute inset-0 z-floating flex items-center justify-center\">\n                        <FloatingFocusManager visuallyHiddenDismiss modal closeOnFocusOut context={context}>\n                            <motion.div\n                                layout\n                                layoutId={`item-${item.id}`}\n                                initial={{ opacity: 0.6, scale: 0.98 }}\n                                animate={{ opacity: 1, scale: 1 }}\n                                exit={{ opacity: 0, scale: 0.98 }}\n                                className=\"relative flex h-min w-min min-w-xs flex-col gap-list-card-gap rounded-list-radius border border-card-border bg-card-background p-list-card-p py-list-card-py pb-list-card-pb shadow-shadow-card\"\n                                ref={refs.setFloating}\n                                {...get()}\n                            >\n                                <nav className=\"absolute right-4 top-1 lg:right-2\">\n                                    <button\n                                        type=\"button\"\n                                        onClick={setter}\n                                        className=\"p-list-close-p opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger\"\n                                    >\n                                        <XIcon />\n                                    </button>\n                                </nav>\n                                <motion.header layout className=\"flex w-full flex-wrap items-center justify-between gap-list-header-gap\">\n                                    <h3 className=\"min-w-full text-balance text-list-title-text font-medium\">{item.title}</h3>\n                                    <p className=\"text-typography-sm leading-snug text-secondary\">{item.description}</p>\n                                </motion.header>\n                                <motion.div layout>{item.children}</motion.div>\n                            </motion.div>\n                        </FloatingFocusManager>\n                    </FloatingOverlay>\n                ) : null}\n            </AnimatePresence>\n        </MotionConfig>\n    </FloatingPortal>\n);\n\nexport const AnimatedList = (props: PropsWithChildren<AnimatedListProps>) => {\n    const [selected, setSelected] = useState<IdAnimatedItem | null>(null);\n    const id = useId();\n    const { context, refs } = useFloating({\n        open: selected !== null,\n        transform: true,\n        onOpenChange: (open) => (open ? undefined : setSelected(null)),\n    });\n    const click = useClick(context);\n    const role = useRole(context, { role: \"dialog\" });\n    const dismiss = useDismiss(context, {\n        escapeKey: true,\n        referencePress: true,\n        outsidePress: true,\n    });\n    const { getFloatingProps } = useInteractions([click, role, dismiss]);\n\n    const clear = useCallback(() => {\n        setSelected(null);\n    }, []);\n\n    const items = React.Children.toArray(props.children);\n\n    return (\n        <Fragment>\n            <FloatItem refs={refs} context={context} get={getFloatingProps} item={selected} setter={clear} />\n            <ul role=\"list\">\n                {items.map((x, index) => {\n                    const item = (x as React.ReactElement<AnimatedItemProps>).props;\n                    const innerId = `${id}-${index}`;\n                    const setter = () => setSelected({ ...item, id: innerId });\n                    const Leading = item.leading;\n                    return (\n                        <motion.li\n                            layout\n                            key={innerId}\n                            layoutId={`item-${innerId}`}\n                            className={`border-b border-card-border py-list-item-py last:border-transparent`}\n                        >\n                            <motion.div layoutId={`toast-${innerId}`} className=\"relative\">\n                                <div className=\"relative flex items-start space-x-3\">\n                                    <Fragment>\n                                        {item.avatar ? (\n                                            <div>\n                                                <div className=\"relative px-list-avatar-px\">\n                                                    <button onClick={setter} className=\"flex size-10 items-center justify-center ring-primary\">\n                                                        {item.avatar}\n                                                    </button>\n                                                </div>\n                                            </div>\n                                        ) : null}\n                                        <div className=\"min-w-0 flex-1 py-list-body-py text-foreground\">\n                                            <div className=\"flex flex-row flex-nowrap justify-between gap-list-item-gap\">\n                                                <button\n                                                    onClick={setter}\n                                                    className=\"cursor-pointer text-left transition-all ease-out hover:text-primary\"\n                                                >\n                                                    <h3>{item.title}</h3>\n                                                    <p className=\"text-typography-sm leading-snug text-secondary\">{item.description}</p>\n                                                </button>\n                                                {Leading ? <Leading open={setter} /> : null}\n                                            </div>\n                                        </div>\n                                    </Fragment>\n                                </div>\n                            </motion.div>\n                        </motion.li>\n                    );\n                })}\n            </ul>\n        </Fragment>\n    );\n};\n\nexport const AnimatedListItem = (props: PropsWithChildren<AnimatedItemProps>) => <Fragment>{props.children}</Fragment>;\n"],"mappings":"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"}
+{"version":3,"file":"list.js","names":[],"sources":["../../../src/components/display/list.tsx"],"sourcesContent":["\"use client\";\nimport {\n    FloatingContext,\n    FloatingFocusManager,\n    FloatingOverlay,\n    FloatingPortal,\n    useClick,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useRole,\n} from \"@floating-ui/react\";\nimport { AnimatePresence, motion, MotionConfig } from \"motion/react\";\nimport { XIcon } from \"@phosphor-icons/react\";\nimport React, { Fragment, PropsWithChildren, useCallback, useId, useState } from \"react\";\nimport { useTranslations } from \"../../hooks/use-translations\";\nimport { Label } from \"../../types\";\n\ntype AnimatedItemProps = {\n    title: Label;\n    description: Label;\n    children: Label;\n    avatar?: Label;\n    leading?: React.FC<{ open: () => void }>;\n};\n\ntype IdAnimatedItem = AnimatedItemProps & { id: string };\n\ntype AnimatedListProps = object;\n\ntype FloatItemProps = {\n    setter: () => void;\n    context: FloatingContext;\n    item: IdAnimatedItem | null;\n    refs: { setFloating: (node: HTMLElement | null) => void };\n    get: ReturnType<typeof useInteractions>[\"getFloatingProps\"];\n};\n\nconst FloatItem = ({ item, context, setter, get, refs }: FloatItemProps) => {\n    const translations = useTranslations();\n\n    return (\n        <FloatingPortal>\n            <MotionConfig reducedMotion=\"user\" transition={{ type: \"spring\", damping: 30, stiffness: 350 }}>\n                <AnimatePresence mode=\"wait\" presenceAffectsLayout>\n                    {item ? (\n                        <motion.div\n                            key=\"overlay\"\n                            exit={{ opacity: 0 }}\n                            animate={{ opacity: 1 }}\n                            initial={{ opacity: 0 }}\n                            transition={{ type: \"tween\", duration: 0.15, ease: \"easeOut\" }}\n                            className=\"pointer-events-none fixed inset-0 top-0 z-overlay h-screen w-screen bg-floating-overlay/70\"\n                        />\n                    ) : null}\n                    {item ? (\n                        <FloatingOverlay key=\"card\" lockScroll className=\"absolute inset-0 z-floating flex items-center justify-center\">\n                            <FloatingFocusManager visuallyHiddenDismiss modal closeOnFocusOut context={context}>\n                                <motion.div\n                                    layout\n                                    layoutId={`item-${item.id}`}\n                                    initial={{ opacity: 0.6, scale: 0.98 }}\n                                    animate={{ opacity: 1, scale: 1 }}\n                                    exit={{ opacity: 0, scale: 0.98 }}\n                                    className=\"relative flex h-min w-min min-w-xs flex-col gap-list-card-gap rounded-list-radius border border-card-border bg-card-background p-list-card-p py-list-card-py pb-list-card-pb shadow-shadow-card\"\n                                    ref={refs.setFloating}\n                                    {...get()}\n                                >\n                                    <nav className=\"absolute right-4 top-1 lg:right-2\">\n                                        <button\n                                            type=\"button\"\n                                            onClick={setter}\n                                            aria-label={translations.listCloseDetails}\n                                            className=\"p-list-close-p opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger\"\n                                        >\n                                            <XIcon />\n                                        </button>\n                                    </nav>\n                                    <motion.header layout className=\"flex w-full flex-wrap items-center justify-between gap-list-header-gap\">\n                                        <h3 className=\"min-w-full text-balance text-list-title-text font-medium\">{item.title}</h3>\n                                        <p className=\"text-typography-sm leading-snug text-secondary\">{item.description}</p>\n                                    </motion.header>\n                                    <motion.div layout>{item.children}</motion.div>\n                                </motion.div>\n                            </FloatingFocusManager>\n                        </FloatingOverlay>\n                    ) : null}\n                </AnimatePresence>\n            </MotionConfig>\n        </FloatingPortal>\n    );\n};\n\nexport const AnimatedList = (props: PropsWithChildren<AnimatedListProps>) => {\n    const translations = useTranslations();\n    const [selected, setSelected] = useState<IdAnimatedItem | null>(null);\n    const id = useId();\n    const { context, refs } = useFloating({\n        open: selected !== null,\n        transform: true,\n        onOpenChange: (open) => (open ? undefined : setSelected(null)),\n    });\n    const click = useClick(context);\n    const role = useRole(context, { role: \"dialog\" });\n    const dismiss = useDismiss(context, {\n        escapeKey: true,\n        referencePress: true,\n        outsidePress: true,\n    });\n    const { getFloatingProps } = useInteractions([click, role, dismiss]);\n\n    const clear = useCallback(() => {\n        setSelected(null);\n    }, []);\n\n    const items = React.Children.toArray(props.children);\n\n    return (\n        <Fragment>\n            <FloatItem refs={refs} context={context} get={getFloatingProps} item={selected} setter={clear} />\n            <ul role=\"list\">\n                {items.map((x, index) => {\n                    const item = (x as React.ReactElement<AnimatedItemProps>).props;\n                    const innerId = `${id}-${index}`;\n                    const setter = () => setSelected({ ...item, id: innerId });\n                    const Leading = item.leading;\n                    return (\n                        <motion.li\n                            layout\n                            key={innerId}\n                            layoutId={`item-${innerId}`}\n                            className={`border-b border-card-border py-list-item-py last:border-transparent`}\n                        >\n                            <motion.div layoutId={`toast-${innerId}`} className=\"relative\">\n                                <div className=\"relative flex items-start space-x-3\">\n                                    <Fragment>\n                                        {item.avatar ? (\n                                            <div>\n                                                <div className=\"relative px-list-avatar-px\">\n                                                    <button\n                                                        type=\"button\"\n                                                        onClick={setter}\n                                                        aria-label={translations.listOpenDetails(String(item.title))}\n                                                        className=\"flex size-10 items-center justify-center ring-primary\"\n                                                    >\n                                                        {item.avatar}\n                                                    </button>\n                                                </div>\n                                            </div>\n                                        ) : null}\n                                        <div className=\"min-w-0 flex-1 py-list-body-py text-foreground\">\n                                            <div className=\"flex flex-row flex-nowrap justify-between gap-list-item-gap\">\n                                                <button\n                                                    type=\"button\"\n                                                    onClick={setter}\n                                                    aria-label={translations.listOpenDetails(String(item.title))}\n                                                    className=\"cursor-pointer text-left transition-all ease-out hover:text-primary\"\n                                                >\n                                                    <h3>{item.title}</h3>\n                                                    <p className=\"text-typography-sm leading-snug text-secondary\">{item.description}</p>\n                                                </button>\n                                                {Leading ? <Leading open={setter} /> : null}\n                                            </div>\n                                        </div>\n                                    </Fragment>\n                                </div>\n                            </motion.div>\n                        </motion.li>\n                    );\n                })}\n            </ul>\n        </Fragment>\n    );\n};\n\nexport const AnimatedListItem = (props: PropsWithChildren<AnimatedItemProps>) => <Fragment>{props.children}</Fragment>;\n"],"mappings":"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"}

package/dist/components/display/list.jsx

@@ -0,0 +1,90 @@
+"use client";
+import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
+import { AnimatePresence, motion, MotionConfig } from "motion/react";
+import { XIcon } from "@phosphor-icons/react";
+import React, { Fragment, useCallback, useId, useState } from "react";
+import { useTranslations } from "../../hooks/use-translations";
+const FloatItem = ({ item, context, setter, get, refs }) => {
+    const translations = useTranslations();
+    return (<FloatingPortal>
+            <MotionConfig reducedMotion="user" transition={{ type: "spring", damping: 30, stiffness: 350 }}>
+                <AnimatePresence mode="wait" presenceAffectsLayout>
+                    {item ? (<motion.div key="overlay" exit={{ opacity: 0 }} animate={{ opacity: 1 }} initial={{ opacity: 0 }} transition={{ type: "tween", duration: 0.15, ease: "easeOut" }} className="pointer-events-none fixed inset-0 top-0 z-overlay h-screen w-screen bg-floating-overlay/70"/>) : null}
+                    {item ? (<FloatingOverlay key="card" lockScroll className="absolute inset-0 z-floating flex items-center justify-center">
+                            <FloatingFocusManager visuallyHiddenDismiss modal closeOnFocusOut context={context}>
+                                <motion.div layout layoutId={`item-${item.id}`} initial={{ opacity: 0.6, scale: 0.98 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.98 }} className="relative flex h-min w-min min-w-xs flex-col gap-list-card-gap rounded-list-radius border border-card-border bg-card-background p-list-card-p py-list-card-py pb-list-card-pb shadow-shadow-card" ref={refs.setFloating} {...get()}>
+                                    <nav className="absolute right-4 top-1 lg:right-2">
+                                        <button type="button" onClick={setter} aria-label={translations.listCloseDetails} className="p-list-close-p opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger">
+                                            <XIcon />
+                                        </button>
+                                    </nav>
+                                    <motion.header layout className="flex w-full flex-wrap items-center justify-between gap-list-header-gap">
+                                        <h3 className="min-w-full text-balance text-list-title-text font-medium">{item.title}</h3>
+                                        <p className="text-typography-sm leading-snug text-secondary">{item.description}</p>
+                                    </motion.header>
+                                    <motion.div layout>{item.children}</motion.div>
+                                </motion.div>
+                            </FloatingFocusManager>
+                        </FloatingOverlay>) : null}
+                </AnimatePresence>
+            </MotionConfig>
+        </FloatingPortal>);
+};
+export const AnimatedList = (props) => {
+    const translations = useTranslations();
+    const [selected, setSelected] = useState(null);
+    const id = useId();
+    const { context, refs } = useFloating({
+        open: selected !== null,
+        transform: true,
+        onOpenChange: (open) => (open ? undefined : setSelected(null)),
+    });
+    const click = useClick(context);
+    const role = useRole(context, { role: "dialog" });
+    const dismiss = useDismiss(context, {
+        escapeKey: true,
+        referencePress: true,
+        outsidePress: true,
+    });
+    const { getFloatingProps } = useInteractions([click, role, dismiss]);
+    const clear = useCallback(() => {
+        setSelected(null);
+    }, []);
+    const items = React.Children.toArray(props.children);
+    return (<Fragment>
+            <FloatItem refs={refs} context={context} get={getFloatingProps} item={selected} setter={clear}/>
+            <ul role="list">
+                {items.map((x, index) => {
+            const item = x.props;
+            const innerId = `${id}-${index}`;
+            const setter = () => setSelected({ ...item, id: innerId });
+            const Leading = item.leading;
+            return (<motion.li layout key={innerId} layoutId={`item-${innerId}`} className={`border-b border-card-border py-list-item-py last:border-transparent`}>
+                            <motion.div layoutId={`toast-${innerId}`} className="relative">
+                                <div className="relative flex items-start space-x-3">
+                                    <Fragment>
+                                        {item.avatar ? (<div>
+                                                <div className="relative px-list-avatar-px">
+                                                    <button type="button" onClick={setter} aria-label={translations.listOpenDetails(String(item.title))} className="flex size-10 items-center justify-center ring-primary">
+                                                        {item.avatar}
+                                                    </button>
+                                                </div>
+                                            </div>) : null}
+                                        <div className="min-w-0 flex-1 py-list-body-py text-foreground">
+                                            <div className="flex flex-row flex-nowrap justify-between gap-list-item-gap">
+                                                <button type="button" onClick={setter} aria-label={translations.listOpenDetails(String(item.title))} className="cursor-pointer text-left transition-all ease-out hover:text-primary">
+                                                    <h3>{item.title}</h3>
+                                                    <p className="text-typography-sm leading-snug text-secondary">{item.description}</p>
+                                                </button>
+                                                {Leading ? <Leading open={setter}/> : null}
+                                            </div>
+                                        </div>
+                                    </Fragment>
+                                </div>
+                            </motion.div>
+                        </motion.li>);
+        })}
+            </ul>
+        </Fragment>);
+};
+export const AnimatedListItem = (props) => <Fragment>{props.children}</Fragment>;

package/dist/components/display/notifications.d.ts

@@ -0,0 +1,27 @@
+import { type VariantProps } from "class-variance-authority";
+import { type PropsWithChildren } from "react";
+import { Label } from "../../types";
+declare const variants: (props?: ({
+    theme?: "warn" | "secondary" | "info" | "danger" | "success" | "muted" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type NotificationOptions = Partial<{
+    id: string;
+    title: Label;
+    timeout: number;
+    closable: boolean;
+    loading: boolean;
+    theme: VariantProps<typeof variants>["theme"];
+}>;
+type NotificationSubscriber = {
+    close: () => void;
+    clear: () => void;
+};
+type ContextFunction = (description: Label, args?: NotificationOptions) => NotificationSubscriber;
+export declare const useNotification: () => ContextFunction;
+export type NotificationProps = Partial<{
+    max: number;
+    timeout: number;
+}>;
+export declare function Notifications({ children, max, timeout }: PropsWithChildren<NotificationProps>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=notifications.d.ts.map

package/dist/components/display/notifications.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../src/components/display/notifications.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAiB,KAAK,iBAAiB,EAAmC,MAAM,OAAO,CAAC;AAG/F,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,QAAA,MAAM,QAAQ;;8EAgBb,CAAC;AAYF,KAAK,mBAAmB,GAAG,OAAO,CAAC;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;CACjD,CAAC,CAAC;AAQH,KAAK,sBAAsB,GAAG;IAAE,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAEvE,KAAK,eAAe,GAAG,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,mBAAmB,KAAK,sBAAsB,CAAC;AAMlG,eAAO,MAAM,eAAe,uBAAwC,CAAC;AAoDrE,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AA0F1E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAO,EAAE,OAAc,EAAE,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,+BAMxG"}

package/dist/components/display/notifications.js

@@ -1,3 +1,3 @@
 "use client";
-import { n as e, t } from "../../notifications-MT4XkLov.js";
+import { n as e, t } from "../../notifications-NhCESJUV.js";
 export { t as Notifications, e as useNotification };

package/dist/components/display/notifications.jsx

@@ -0,0 +1,132 @@
+"use client";
+import { Toast as Base } from "@base-ui/react/toast";
+import { cva } from "class-variance-authority";
+import { XIcon, CheckCircleIcon, WarningIcon, InfoIcon, CircleNotchIcon } from "@phosphor-icons/react";
+import { AnimatePresence, motion } from "motion/react";
+import { createContext, useCallback, useContext, useRef } from "react";
+import { useHover } from "../../hooks/use-hover";
+import { css } from "../../lib/dom";
+const variants = cva("shadow-notification text-typography-sm relative isolate z-tooltip flex w-full flex-col overflow-hidden rounded-notification-radius border bg-card-background backdrop-blur-md transition-all duration-300", {
+    variants: {
+        theme: {
+            default: "border-card-border text-foreground shadow-black/5",
+            info: "border-alert-info-border bg-alert-info-bg text-alert-info-text",
+            warn: "border-alert-warn-border bg-alert-warn-bg text-alert-warn-text",
+            muted: "border-alert-muted-border bg-alert-muted-bg text-alert-muted-text",
+            danger: "border-alert-danger-border bg-alert-danger-bg text-alert-danger-text",
+            success: "border-alert-success-border bg-alert-success-bg text-alert-success-text",
+            secondary: "border-alert-secondary-border bg-alert-secondary-bg text-alert-secondary-text",
+        },
+    },
+    defaultVariants: { theme: "default" },
+});
+const themeIcons = {
+    default: InfoIcon,
+    info: InfoIcon,
+    warn: WarningIcon,
+    muted: InfoIcon,
+    danger: WarningIcon,
+    success: CheckCircleIcon,
+    secondary: InfoIcon,
+};
+const NotificationContext = createContext(() => {
+    throw new Error("Not implemented");
+});
+export const useNotification = () => useContext(NotificationContext);
+function Notification(props) {
+    const closable = props.toast.data?.closable ?? true;
+    const loading = props.toast.data?.loading ?? false;
+    const theme = props.toast.data?.theme || "default";
+    const className = variants({ theme });
+    const Icon = loading ? CircleNotchIcon : themeIcons[theme] || InfoIcon;
+    return (<Base.Root toast={props.toast} swipeDirection="right">
+            <motion.li layout initial={{ opacity: 0, y: -20, scale: 0.95 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, scale: 0.9, y: -20, transition: { duration: 0.2 } }} transition={{
+            type: "spring",
+            damping: 25,
+            stiffness: 300,
+        }} className="pointer-events-auto w-full list-none">
+                <Base.Content className={className}>
+                    <div className="flex items-start gap-notification-gap p-notification-p">
+                        <div className={css("mt-0.5 flex size-4 shrink-0 items-center justify-center opacity-80", loading && "animate-spin")}>
+                            <Icon aria-hidden="true"/>
+                        </div>
+
+                        <div className="flex flex-1 flex-col gap-notification-inner-gap overflow-hidden">
+                            {props.toast.title ? <Base.Title className="select-text truncate font-semibold leading-tight tracking-tight"/> : null}
+                            <Base.Description className="text-typography-xs line-clamp-2 select-text font-medium leading-relaxed opacity-90"/>
+                        </div>
+
+                        {closable && !loading ? (<Base.Close className="-mr-1 -mt-1 shrink-0 rounded-notification-close-radius p-notification-close-p text-foreground/40 transition hover:bg-foreground/10 hover:text-foreground">
+                                <span className="flex size-3.5 items-center justify-center">
+                                    <XIcon aria-hidden="true"/>
+                                </span>
+                            </Base.Close>) : null}
+                    </div>
+                </Base.Content>
+            </motion.li>
+        </Base.Root>);
+}
+function NotificationsViewport({ max = 5 }) {
+    const ref = useRef(null);
+    const hover = useHover(ref);
+    const toastManager = Base.useToastManager();
+    const allToasts = max ? toastManager.toasts.slice(0, max) : toastManager.toasts;
+    const visibleToasts = hover ? allToasts : allToasts.slice(0, 3);
+    const hiddenCount = allToasts.length - visibleToasts.length;
+    return (<Base.Viewport ref={ref} className="pointer-events-none fixed left-1/2 top-notification-list-top z-floating flex w-full max-w-notification-list-max-w -translate-x-1/2 flex-col gap-notification-list-gap overflow-visible outline-none">
+            <AnimatePresence mode="popLayout" initial={false}>
+                {visibleToasts.map((toast) => (<Notification key={toast.id} toast={toast}/>))}
+            </AnimatePresence>
+
+            {!hover && hiddenCount > 0 && (<motion.div layout initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} className="shadow-notification pointer-events-auto cursor-default self-center rounded-full border border-card-border bg-card-background/80 px-notification-badge-px py-notification-badge-py text-notification-badge-text font-bold uppercase tracking-wider text-foreground/50 backdrop-blur transition-all hover:bg-card-background hover:text-foreground/80">
+                    +{hiddenCount} more
+                </motion.div>)}
+        </Base.Viewport>);
+}
+function NotificationsInner({ children, max = 5 }) {
+    const toastManager = Base.useToastManager();
+    const clear = useCallback(() => {
+        toastManager.toasts.forEach((t) => toastManager.close(t.id));
+    }, [toastManager]);
+    const notify = useCallback((description, args) => {
+        const data = {
+            theme: args?.theme,
+            closable: args?.closable,
+            loading: args?.loading,
+        };
+        if (args?.id) {
+            const existing = toastManager.toasts.find((t) => t.id === args.id);
+            if (existing) {
+                toastManager.update(args.id, {
+                    description,
+                    title: args.title,
+                    timeout: args.timeout,
+                    data,
+                });
+                return { close: () => toastManager.close(args.id), clear };
+            }
+        }
+        const id = toastManager.add({
+            description,
+            id: args?.id,
+            title: args?.title,
+            timeout: args?.timeout,
+            data,
+        });
+        return {
+            close: () => toastManager.close(id),
+            clear,
+        };
+    }, [toastManager, clear]);
+    return (<NotificationContext.Provider value={notify}>
+            {children}
+            <Base.Portal>
+                <NotificationsViewport max={max}/>
+            </Base.Portal>
+        </NotificationContext.Provider>);
+}
+export function Notifications({ children, max = 5, timeout = 5000 }) {
+    return (<Base.Provider limit={max} timeout={timeout}>
+            <NotificationsInner max={max}>{children}</NotificationsInner>
+        </Base.Provider>);
+}