@g4rcez/components 5.0.2 → 5.0.3

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

@@ -3,30 +3,35 @@ import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDis
 import { AnimatePresence, motion, MotionConfig } from "motion/react";
 import { XIcon } from "@phosphor-icons/react";
 import React, { Fragment, useCallback, useId, useState } from "react";
-const FloatItem = ({ item, context, setter, get, refs }) => (<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} 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>);
+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({
@@ -60,14 +65,14 @@ export const AnimatedList = (props) => {
                                     <Fragment>
                                         {item.avatar ? (<div>
                                                 <div className="relative px-list-avatar-px">
-                                                    <button onClick={setter} className="flex size-10 items-center justify-center ring-primary">
+                                                    <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 onClick={setter} className="cursor-pointer text-left transition-all ease-out hover:text-primary">
+                                                <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>

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

@@ -1 +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;AAkDrE,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"}
+{"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

@@ -47,17 +47,19 @@ function Notification(props) {
         }} 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 shrink-0 opacity-80", loading && "animate-spin")}>
-                            <Icon className="size-4"/>
+                        <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="line-clamp-2 select-text text-typography-xs font-medium leading-relaxed opacity-90"/>
+                            <Base.Description className="text-typography-xs line-clamp-2 select-text font-medium leading-relaxed opacity-90"/>
                         </div>
 
-                        {closable && !loading ? (<Base.Close className="rounded-notification-close-radius -mr-1 -mt-1 shrink-0 p-notification-close-p text-foreground/40 transition hover:bg-foreground/10 hover:text-foreground">
-                                <XIcon className="size-3.5"/>
+                        {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>
@@ -76,7 +78,7 @@ function NotificationsViewport({ max = 5 }) {
                 {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="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 shadow-notification backdrop-blur transition-all hover:bg-card-background hover:text-foreground/80">
+            {!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>);

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

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/display/progress.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,KAAK,aAAa,GAAG;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAKF,eAAO,MAAM,QAAQ,GAAI,OAAO,eAAe,CAAC,aAAa,CAAC,gCAuC7D,CAAC"}
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/display/progress.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,KAAK,aAAa,GAAG;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAIF,eAAO,MAAM,QAAQ,GAAI,OAAO,eAAe,CAAC,aAAa,CAAC,gCA6B7D,CAAC"}

package/dist/components/display/progress.js

@@ -0,0 +1,3 @@
+"use client";
+import { t as e } from "../../progress-8LO5gWLp.js";
+export { e as Progress };

package/dist/components/display/progress.jsx

@@ -9,13 +9,11 @@ export const Progress = (props) => {
     const range = max - min;
     const rawValue = props.value ?? props.percent;
     const hasValue = Is.number(rawValue) && range > 0;
-    const percent = hasValue
-        ? clamp(((rawValue - min) / range) * 100, 0, 100)
-        : null;
+    const percent = hasValue ? clamp(((rawValue - min) / range) * 100, 0, 100) : null;
     return (<RadixProgress.Root min={min} max={max} value={hasValue ? rawValue : null} style={{ transform: "translateZ(0)" }} className={css("relative h-progress-track-h w-full overflow-hidden rounded-progress-radius bg-background", props.container)}>
-      <RadixProgress.Indicator className={css("h-full bg-primary transition-[width] duration-500 ease-in-out", props.className)}/>
-      {percent !== null ? (<p className={css("absolute inset-0 flex w-full items-center justify-center font-semibold tabular-nums text-primary-foreground", props.textClassName)}>
-          {props.label ? props.label : `${Math.round(percent)} %`}
-        </p>) : null}
-    </RadixProgress.Root>);
+            <RadixProgress.Indicator className={css("h-full bg-primary transition-[width] duration-500 ease-in-out", props.className)}/>
+            {percent !== null ? (<p className={css("absolute inset-0 flex w-full items-center justify-center font-semibold tabular-nums text-primary-foreground", props.textClassName)}>
+                    {props.label ? props.label : `${Math.round(percent)} %`}
+                </p>) : null}
+        </RadixProgress.Root>);
 };

package/dist/components/display/shortcut.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../shortcut-CQCmgmlU.js";
+export { e as Shortcut };

package/dist/components/display/skeleton.js

@@ -0,0 +1,41 @@
+import { t as e } from "../../dom-Bn4wY_Zx.js";
+import { Polymorph as t } from "../core/polymorph.js";
+import { t as n } from "../../use-translations-BE4PuhLm.js";
+import { useRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/display/skeleton.tsx
+var a = /* @__PURE__ */ i("div", {
+	role: "status",
+	"aria-busy": "true",
+	"aria-label": "Loading content",
+	className: "h-skeleton-cell-h w-10/12 animate-pulse rounded-skeleton-radius bg-muted"
+}), o = (r) => {
+	let a = n();
+	return /* @__PURE__ */ i(t, {
+		...r,
+		role: "status",
+		"aria-busy": "true",
+		"aria-label": a.skeletonLoading,
+		as: r.as || "span",
+		className: e("block h-skeleton-height w-skeleton-width animate-pulse rounded-skeleton-radius bg-muted", r.className)
+	});
+}, s = (t) => {
+	let a = n(), s = r(Array.from({ length: t.rows }).map((e, t) => {
+		let n = Math.max(100, Math.random() * 99);
+		return /* @__PURE__ */ i(o, {
+			style: { width: `${n}%` },
+			as: "li"
+		}, `skeleton-${n}-${t}`);
+	}));
+	return /* @__PURE__ */ i("ul", {
+		role: "status",
+		"aria-busy": "true",
+		"aria-label": a.skeletonLoading,
+		className: e("flex flex-col gap-skeleton-list-gap", t.className),
+		children: s.current
+	});
+};
+//#endregion
+export { o as Skeleton, a as SkeletonCell, s as SkeletonList };
+
+//# sourceMappingURL=skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../../src/components/display/skeleton.tsx"],"sourcesContent":["import React, { CSSProperties, useRef, type ElementType } from \"react\";\nimport { useTranslations } from \"../../hooks/use-translations\";\nimport { css } from \"../../lib/dom\";\nimport { Polymorph } from \"../core/polymorph\";\n\nexport const SkeletonCell = (\n    <div\n        role=\"status\"\n        aria-busy=\"true\"\n        aria-label=\"Loading content\"\n        className=\"h-skeleton-cell-h w-10/12 animate-pulse rounded-skeleton-radius bg-muted\"\n    />\n);\n\nexport const Skeleton = (props: { className?: string; as?: ElementType; style?: CSSProperties }) => {\n    const t = useTranslations();\n    return (\n        <Polymorph\n            {...props}\n            role=\"status\"\n            aria-busy=\"true\"\n            aria-label={t.skeletonLoading}\n            as={props.as || \"span\"}\n            className={css(\"block h-skeleton-height w-skeleton-width animate-pulse rounded-skeleton-radius bg-muted\", props.className)}\n        />\n    );\n};\n\nexport const SkeletonList = (props: { className?: string; rows: number }) => {\n    const t = useTranslations();\n    const items = useRef(\n        Array.from({ length: props.rows }).map((_, i) => {\n            const rand = Math.max(100, Math.random() * 99);\n            return <Skeleton key={`skeleton-${rand}-${i}`} style={{ width: `${rand}%` }} as=\"li\" />;\n        })\n    );\n    return (\n        <ul role=\"status\" aria-busy=\"true\" aria-label={t.skeletonLoading} className={css(\"flex flex-col gap-skeleton-list-gap\", props.className)}>\n            {items.current}\n        </ul>\n    );\n};\n"],"mappings":";;;;;;AAKA,IAAa,IACT,kBAAC,OAAD;CACI,MAAK;CACL,aAAU;CACV,cAAW;CACX,WAAU;AACb,CAAA,GAGQ,KAAY,MAA2E;CAChG,IAAM,IAAI,EAAgB;CAC1B,OACI,kBAAC,GAAD;EACI,GAAI;EACJ,MAAK;EACL,aAAU;EACV,cAAY,EAAE;EACd,IAAI,EAAM,MAAM;EAChB,WAAW,EAAI,2FAA2F,EAAM,SAAS;CAC5H,CAAA;AAET,GAEa,KAAgB,MAAgD;CACzE,IAAM,IAAI,EAAgB,GACpB,IAAQ,EACV,MAAM,KAAK,EAAE,QAAQ,EAAM,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM;EAC7C,IAAM,IAAO,KAAK,IAAI,KAAK,KAAK,OAAO,IAAI,EAAE;EAC7C,OAAO,kBAAC,GAAD;GAAwC,OAAO,EAAE,OAAO,GAAG,EAAK,GAAG;GAAG,IAAG;EAAM,GAAhE,YAAY,EAAK,GAAG,GAA4C;CAC1F,CAAC,CACL;CACA,OACI,kBAAC,MAAD;EAAI,MAAK;EAAS,aAAU;EAAO,cAAY,EAAE;EAAiB,WAAW,EAAI,uCAAuC,EAAM,SAAS;YAClI,EAAM;CACP,CAAA;AAEZ"}

package/dist/components/display/spinner.js

@@ -0,0 +1,17 @@
+import { t as e } from "../../dom-Bn4wY_Zx.js";
+import { t } from "../../use-translations-BE4PuhLm.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/display/spinner.tsx
+var r = (r) => /* @__PURE__ */ n("span", {
+	role: "status",
+	"aria-live": "polite",
+	"aria-label": t().spinnerLoading,
+	className: e("box-border inline-block aspect-square size-spinner-size animate-spin rounded-full border-spinner-border border-background border-b-primary", r.className)
+}), i = () => /* @__PURE__ */ n("div", {
+	className: "flex h-full w-full items-center justify-center p-spinner-container-p",
+	children: /* @__PURE__ */ n(r, {})
+});
+//#endregion
+export { i as Loading, r as Spinner };
+
+//# sourceMappingURL=spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","names":[],"sources":["../../../src/components/display/spinner.tsx"],"sourcesContent":["import { useTranslations } from \"../../hooks/use-translations\";\nimport { css } from \"../../lib/dom\";\n\nexport const Spinner = (props: { className?: string }) => {\n    const t = useTranslations();\n    return (\n        <span\n            role=\"status\"\n            aria-live=\"polite\"\n            aria-label={t.spinnerLoading}\n            className={css(\n                \"box-border inline-block aspect-square size-spinner-size animate-spin rounded-full border-spinner-border border-background border-b-primary\",\n                props.className\n            )}\n        />\n    );\n};\n\nexport const Loading = () => {\n    return (\n        <div className=\"flex h-full w-full items-center justify-center p-spinner-container-p\">\n            <Spinner />\n        </div>\n    );\n};\n"],"mappings":";;;;AAGA,IAAa,KAAW,MAGhB,kBAAC,QAAD;CACI,MAAK;CACL,aAAU;CACV,cALE,EAKU,EAAE;CACd,WAAW,EACP,8IACA,EAAM,SACV;AACH,CAAA,GAII,UAEL,kBAAC,OAAD;CAAK,WAAU;WACX,kBAAC,GAAD,CAAU,CAAA;AACT,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../src/components/display/step.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAA2C,iBAAiB,EAA2C,MAAM,OAAO,CAAC;AAEnI,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAUpC,KAAK,gBAAgB,GAAG;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAoCF,KAAK,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/D,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IACrD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAgCF,eAAO,MAAM,cAAc,+BAAgC,CAAC;AAE5D,eAAO,MAAM,IAAI,GAAI,gEAAgE,SAAS,sBA6F7F,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,sBA0BrF,CAAC"}
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../src/components/display/step.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAA2C,iBAAiB,EAA2C,MAAM,OAAO,CAAC;AAEnI,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAUpC,KAAK,gBAAgB,GAAG;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AA8CF,KAAK,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/D,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IACrD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAgCF,eAAO,MAAM,cAAc,+BAAgC,CAAC;AAE5D,eAAO,MAAM,IAAI,GAAI,gEAAgE,SAAS,sBA8F7F,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,sBA0BrF,CAAC"}

package/dist/components/display/step.js

@@ -0,0 +1,3 @@
+"use client";
+import { n as e, r as t, t as n } from "../../step-DFpJ7zCG.js";
+export { n as Step, e as Steps, t as useStepContext };