@g4rcez/components 4.1.2 → 5.0.0

package/dist/tabs-Ciy0l9OF.js

@@ -0,0 +1,122 @@
+import { p as e, t } from "./dom-Bn4wY_Zx.js";
+import { t as n } from "./polymorph-BLXhrn9n.js";
+import { t as r } from "./use-stable-ref-D5LFCx0u.js";
+import { Card as i } from "./components/display/card.js";
+import a, { createContext as o, useContext as s, useEffect as c, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/hooks/use-reactive.ts
+var p = (e, t) => {
+	let [n, r] = u(() => t || e);
+	return c(() => {
+		r(e);
+	}, [e]), [n, r];
+}, m = {
+	ArrowUp: "ArrowUp",
+	ArrowDown: "ArrowDown",
+	ArrowLeft: "ArrowLeft",
+	ArrowRight: "ArrowRight"
+}, h = o(""), g = (e) => e.hasAttribute("disabled") || e.getAttribute("aria-disabled") === "true", _ = (e, t, n) => {
+	let r = n === "forward" ? 1 : -1, i = t + r;
+	for (let t = i; t >= 0 && t < e.length; t += r) {
+		let n = e[t];
+		if (!g(n)) return n;
+	}
+	return n === "backward" ? _(e, e.length - 1, "backward") : _(e, -1, "forward");
+}, v = (e, t) => {
+	let n = Array.from(e.querySelectorAll("li")), r = n.findIndex((e) => e.dataset.active === "true");
+	if (r === -1) return null;
+	let i = _(n, r, t);
+	return i === null ? null : (i.querySelector("button")?.focus({ preventScroll: !1 }), i.getAttribute("data-id") || "");
+}, y = (e, t) => {
+	let n = Array.from(e.querySelectorAll("li")), r = t === "first" ? n : [...n].reverse();
+	for (let e of r) if (!g(e)) return e.querySelector("button")?.focus({ preventScroll: !1 }), e.getAttribute("data-id") || "";
+	return null;
+}, b = {
+	[m.ArrowLeft]: (e, t) => v(t, "backward"),
+	[m.ArrowRight]: (e, t) => v(t, "forward")
+}, x = (o) => {
+	let [s, u] = p(o.active), m = l(null), g = r(o.onChange);
+	c(() => {
+		let e = m.current;
+		if (e === null) return;
+		let t = e.querySelector("li[data-active=true]");
+		t === null && (t = e.querySelector("li[data-id]"), u(t.getAttribute("data-id") || ""));
+	}, [o.active, u]), c(() => {
+		g.current && g.current(s);
+	}, [g, s]);
+	let _ = a.Children.toArray(o.children), v = (e) => {
+		let t = e.currentTarget;
+		u(t.dataset.id || "");
+	};
+	return /* @__PURE__ */ d(h.Provider, {
+		value: s,
+		children: /* @__PURE__ */ d(i, {
+			className: o.className,
+			container: t("pt-0 max-w-full w-full min-w-0", o.container),
+			header: /* @__PURE__ */ f("header", {
+				className: "relative mb-tabs-header-mb overflow-x-auto",
+				children: [/* @__PURE__ */ d("div", { className: "absolute bottom-0 h-tabs-divider-h w-full bg-card-border" }), /* @__PURE__ */ d("nav", {
+					className: "min-w-0",
+					children: /* @__PURE__ */ d("ul", {
+						role: "tablist",
+						onKeyDown: (t) => {
+							if (m.current === null) return;
+							let n = t.key;
+							if (e.keyof(b, n)) {
+								let e = b[n], r = e(t, m.current);
+								if (r === null) return;
+								u(r);
+							} else if (n === "Home") {
+								t.preventDefault();
+								let e = y(m.current, "first");
+								e && u(e);
+							} else if (n === "End") {
+								t.preventDefault();
+								let e = y(m.current, "last");
+								e && u(e);
+							}
+						},
+						ref: m,
+						className: "flex w-0 min-w-full flex-1 justify-start overflow-x-auto",
+						children: _.map((e) => {
+							let r = e.props, i = s === r.id;
+							return /* @__PURE__ */ d("li", {
+								"data-id": r.id,
+								"data-active": i,
+								className: t("relative w-fit border-b border-transparent transition-all", i ? "border-primary font-medium text-primary" : "", r.disabled ? "aria-disabled:text-disabled" : ""),
+								children: /* @__PURE__ */ d(n, {
+									role: "tab",
+									as: "button",
+									type: "button",
+									"data-id": r.id,
+									id: `${r.id}-tab`,
+									"aria-selected": i,
+									disabled: r.disabled,
+									tabIndex: i ? 0 : -1,
+									"aria-controls": `${r.id}-panel`,
+									onClick: r.disabled ? void 0 : v,
+									className: "block w-full whitespace-nowrap px-tabs-item-px py-tabs-item-py disabled:cursor-not-allowed",
+									children: r.title
+								})
+							}, `tab-header-${r.id}`);
+						})
+					})
+				})]
+			}),
+			children: o.children
+		})
+	});
+}, S = () => s(h), C = (e) => {
+	let t = S();
+	return e.id === t ? /* @__PURE__ */ d("div", {
+		role: "tabpanel",
+		tabIndex: 0,
+		id: `${e.id}-panel`,
+		"aria-labelledby": `${e.id}-tab`,
+		children: e.children
+	}) : null;
+};
+//#endregion
+export { x as n, p as r, C as t };
+
+//# sourceMappingURL=tabs-Ciy0l9OF.js.map

package/dist/tabs-Ciy0l9OF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-Ciy0l9OF.js","names":[],"sources":["../src/hooks/use-reactive.ts","../src/lib/keyboard-area.ts","../src/components/display/tabs.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useState } from \"react\";\n\nexport const useReactive = <T>(t: T, initial?: T) => {\n    const [state, setState] = useState(() => (initial ? initial : t));\n    useEffect(() => {\n        setState(t);\n    }, [t]);\n    return [state, setState] as const;\n};\n","import React from \"react\";\n\ntype EventKey =\n    | \"Backspace\"\n    | \"Tab\"\n    | \"Enter\"\n    | \"Shift\"\n    | \"Control\"\n    | \"Alt\"\n    | \"Pause\"\n    | \"CapsLock\"\n    | \"Escape\"\n    | \"Space\"\n    | \"PageUp\"\n    | \"PageDown\"\n    | \"End\"\n    | \"Home\"\n    | \"ArrowLeft\"\n    | \"ArrowUp\"\n    | \"ArrowRight\"\n    | \"ArrowDown\"\n    | \"PrintScreen\"\n    | \"Insert\"\n    | \"Delete\"\n    | \"0\"\n    | \"1\"\n    | \"2\"\n    | \"3\"\n    | \"4\"\n    | \"5\"\n    | \"6\"\n    | \"7\"\n    | \"8\"\n    | \"9\"\n    | \"a\"\n    | \"b\"\n    | \"c\"\n    | \"d\"\n    | \"e\"\n    | \"f\"\n    | \"g\"\n    | \"h\"\n    | \"i\"\n    | \"j\"\n    | \"k\"\n    | \"l\"\n    | \"m\"\n    | \"n\"\n    | \"o\"\n    | \"p\"\n    | \"q\"\n    | \"r\"\n    | \"s\"\n    | \"t\"\n    | \"u\"\n    | \"v\"\n    | \"w\"\n    | \"x\"\n    | \"y\"\n    | \"z\"\n    | \"Meta\"\n    | \"ContextMenu\"\n    | \"F1\"\n    | \"F2\"\n    | \"F3\"\n    | \"F4\"\n    | \"F5\"\n    | \"F6\"\n    | \"F7\"\n    | \"F8\"\n    | \"F9\"\n    | \"F10\"\n    | \"F11\"\n    | \"F12\"\n    | \"NumLock\"\n    | \"ScrollLock\"\n    | \"AudioVolumeMute\"\n    | \"AudioVolumeUp\"\n    | \"AudioVolumeDown\"\n    | \"MediaTrackNext\"\n    | \"MediaTrackPrevious\"\n    | \"MediaStop\"\n    | \"MediaPlayPause\"\n    | \"LaunchMail\"\n    | \"LaunchMediaPlayer\"\n    | \"LaunchApplication1\"\n    | \"LaunchApplication2\"\n    | \"Semicolon\"\n    | \"Equal\"\n    | \"Comma\"\n    | \"Minus\"\n    | \"Period\"\n    | \"Slash\"\n    | \"Backquote\"\n    | \"BracketLeft\"\n    | \"Backslash\"\n    | \"BracketRight\"\n    | \"Quote\";\n\nexport const keyboardKeys = {\n    ArrowUp: \"ArrowUp\",\n    ArrowDown: \"ArrowDown\",\n    ArrowLeft: \"ArrowLeft\",\n    ArrowRight: \"ArrowRight\",\n} as const;\n\ntype Callback<T extends HTMLElement = HTMLElement> = (e: KeyboardEvent | React.KeyboardEvent<T>) => void;\n\nexport class KeyboardArea<T extends HTMLElement> {\n    private set = new Set();\n\n    public key(key: EventKey, callback: Callback<T>) {\n        const fn: Callback<T> = (e) => (e.key === key ? callback(e) : undefined);\n        return () => this.set.delete(fn);\n    }\n\n    public onKeyDown(_: Callback<T>) {}\n}\n","\"use client\";\nimport React, { createContext, PropsWithChildren, useContext, useEffect, useRef } from \"react\";\nimport { Is, Nullable } from \"sidekicker\";\nimport { useReactive } from \"../../hooks/use-reactive\";\nimport { useStableRef } from \"../../hooks/use-stable-ref\";\nimport { css } from \"../../lib/dom\";\nimport { keyboardKeys } from \"../../lib/keyboard-area\";\nimport { Label } from \"../../types\";\nimport { Polymorph } from \"../core/polymorph\";\nimport { Card, CardProps } from \"./card\";\n\nexport type TabsProps = Omit<CardProps<\"div\">, \"onChange\"> & {\n    active: string;\n    container?: string;\n    className?: string;\n    onChange?: (id: string) => void;\n};\n\nconst Context = createContext<string>(\"\");\n\nconst isElementDisabled = (element: HTMLElement): boolean => element.hasAttribute(\"disabled\") || element.getAttribute(\"aria-disabled\") === \"true\";\n\nconst getNElement = (elements: HTMLElement[], currentIndex: number, direction: \"backward\" | \"forward\"): HTMLElement | null => {\n    const step = direction === \"forward\" ? 1 : -1;\n    const startIndex = currentIndex + step;\n    for (let i = startIndex; i >= 0 && i < elements.length; i += step) {\n        const element = elements[i];\n        if (!isElementDisabled(element)) return element;\n    }\n    return direction === \"backward\" ? getNElement(elements, elements.length - 1, \"backward\") : getNElement(elements, -1, \"forward\");\n};\n\nconst moveOn = (ul: HTMLUListElement, direction: \"backward\" | \"forward\") => {\n    const items = Array.from(ul.querySelectorAll(\"li\"));\n    const find = items.findIndex((x) => x.dataset.active === \"true\");\n    if (find === -1) return null;\n    const item = getNElement(items, find, direction);\n    if (item === null) return null;\n    item.querySelector(\"button\")?.focus({ preventScroll: false });\n    return item.getAttribute(\"data-id\") || \"\";\n};\n\nconst moveToEdge = (ul: HTMLUListElement, edge: \"first\" | \"last\") => {\n    const items = Array.from(ul.querySelectorAll(\"li\"));\n    const ordered = edge === \"first\" ? items : [...items].reverse();\n    for (const item of ordered) {\n        if (!isElementDisabled(item)) {\n            item.querySelector(\"button\")?.focus({ preventScroll: false });\n            return item.getAttribute(\"data-id\") || \"\";\n        }\n    }\n    return null;\n};\n\nconst actionKeys = {\n    [keyboardKeys.ArrowLeft]: (_: unknown, ul: HTMLUListElement): Nullable<string> => moveOn(ul, \"backward\"),\n    [keyboardKeys.ArrowRight]: (_: unknown, ul: HTMLUListElement): Nullable<string> => moveOn(ul, \"forward\"),\n};\n\nexport const Tabs = (props: PropsWithChildren<TabsProps>) => {\n    const [active, setActive] = useReactive(props.active);\n    const ref = useRef<HTMLUListElement | null>(null);\n    const onChangeRef = useStableRef(props.onChange);\n\n    useEffect(() => {\n        const header = ref.current;\n        if (header === null) return;\n        let first = header.querySelector<HTMLElement>(`li[data-active=true]`);\n        if (first === null) {\n            first = header.querySelector<HTMLElement>(`li[data-id]`)!;\n            const id = first.getAttribute(\"data-id\") || \"\";\n            setActive(id);\n        }\n    }, [props.active, setActive]);\n\n    useEffect(() => {\n        if (onChangeRef.current) onChangeRef.current(active);\n    }, [onChangeRef, active]);\n\n    const items = React.Children.toArray(props.children as React.ReactElement<TabProps>) as Array<React.ReactElement<TabProps>>;\n\n    const onClick = (e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {\n        const anchor = e.currentTarget;\n        setActive(anchor.dataset.id || \"\");\n    };\n\n    const onKeyDown = (e: React.KeyboardEvent<HTMLUListElement>) => {\n        if (ref.current === null) return;\n        const k = e.key;\n        if (Is.keyof(actionKeys, k)) {\n            const fn = actionKeys[k];\n            const result = fn(e, ref.current);\n            if (result === null) return;\n            setActive(result);\n        } else if (k === \"Home\") {\n            e.preventDefault();\n            const result = moveToEdge(ref.current, \"first\");\n            if (result) setActive(result);\n        } else if (k === \"End\") {\n            e.preventDefault();\n            const result = moveToEdge(ref.current, \"last\");\n            if (result) setActive(result);\n        }\n    };\n\n    return (\n        <Context.Provider value={active}>\n            <Card\n                className={props.className}\n                container={css(\"pt-0 max-w-full w-full min-w-0\", props.container)}\n                header={\n                    <header className=\"relative mb-tabs-header-mb overflow-x-auto\">\n                        <div className=\"absolute bottom-0 h-tabs-divider-h w-full bg-card-border\" />\n                        <nav className=\"min-w-0\">\n                            <ul role=\"tablist\" onKeyDown={onKeyDown} ref={ref} className=\"flex w-0 min-w-full flex-1 justify-start overflow-x-auto\">\n                                {items.map((x: React.ReactElement<TabProps>) => {\n                                    const inner = x.props;\n                                    const current = active === inner.id;\n                                    return (\n                                        <li\n                                            data-id={inner.id}\n                                            data-active={current}\n                                            key={`tab-header-${inner.id}`}\n                                            className={css(\n                                                \"relative w-fit border-b border-transparent transition-all\",\n                                                current ? \"border-primary font-medium text-primary\" : \"\",\n                                                inner.disabled ? \"aria-disabled:text-disabled\" : \"\"\n                                            )}\n                                        >\n                                            <Polymorph\n                                                role=\"tab\"\n                                                as=\"button\"\n                                                type=\"button\"\n                                                data-id={inner.id}\n                                                id={`${inner.id}-tab`}\n                                                aria-selected={current}\n                                                disabled={inner.disabled}\n                                                tabIndex={current ? 0 : -1}\n                                                aria-controls={`${inner.id}-panel`}\n                                                onClick={inner.disabled ? undefined : onClick}\n                                                className=\"block w-full whitespace-nowrap px-tabs-item-px py-tabs-item-py disabled:cursor-not-allowed\"\n                                            >\n                                                {inner.title as React.ReactNode}\n                                            </Polymorph>\n                                        </li>\n                                    );\n                                })}\n                            </ul>\n                        </nav>\n                    </header>\n                }\n            >\n                {props.children}\n            </Card>\n        </Context.Provider>\n    );\n};\n\nconst useTabs = () => useContext(Context);\n\ntype CommonTabProps = { id: string; disabled?: boolean };\n\nexport type TabProps = CommonTabProps &\n    (\n        | { title: string; label?: undefined }\n        | {\n              label: string;\n              title: Omit<Label, string>;\n          }\n    );\n\nexport const Tab = (props: PropsWithChildren<TabProps>) => {\n    const active = useTabs();\n    if (props.id !== active) return null;\n    return (\n        <div role=\"tabpanel\" tabIndex={0} id={`${props.id}-panel`} aria-labelledby={`${props.id}-tab`}>\n            {props.children}\n        </div>\n    );\n};\n"],"mappings":"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"}

package/dist/task-list-tKumO4WH.js

@@ -0,0 +1,96 @@
+import { D as e, E as t, Ft as n, O as r, _t as i, t as a, xt as o } from "./MotionConfigContext-BORpSKe8.js";
+import { n as s } from "./animate-BNYgkk_j.js";
+import { useContext as c, useEffect as l, useMemo as u, useState as d } from "react";
+import { jsx as f } from "react/jsx-runtime";
+//#region ../../node_modules/.pnpm/motion-dom@12.40.0/node_modules/motion-dom/dist/es/utils/stagger.mjs
+function p(e, t) {
+	if (e === "first") return 0;
+	{
+		let n = t - 1;
+		return e === "last" ? n : n / 2;
+	}
+}
+function m(e = .1, { startDelay: t = 0, from: n = 0, ease: r } = {}) {
+	return (a, o) => {
+		let s = typeof n == "number" ? n : p(n, o), c = e * Math.abs(s - a);
+		if (r) {
+			let t = o * e;
+			c = i(r)(c / t) * t;
+		}
+		return t + c;
+	};
+}
+//#endregion
+//#region ../../node_modules/.pnpm/framer-motion@12.40.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/framer-motion/dist/es/utils/use-unmount-effect.mjs
+function h(e) {
+	return l(() => () => e(), []);
+}
+//#endregion
+//#region ../../node_modules/.pnpm/framer-motion@12.40.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs
+function g() {
+	!e.current && t();
+	let [n] = d(r.current);
+	return process.env.NODE_ENV !== "production" && o(n !== !0, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled"), n;
+}
+//#endregion
+//#region ../../node_modules/.pnpm/framer-motion@12.40.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion-config.mjs
+function _() {
+	let e = g(), { reducedMotion: t } = c(a);
+	return t === "never" ? !1 : t === "always" ? !0 : e;
+}
+//#endregion
+//#region ../../node_modules/.pnpm/framer-motion@12.40.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/framer-motion/dist/es/animation/hooks/use-animate.mjs
+function v() {
+	let e = n(() => ({
+		current: null,
+		animations: []
+	})), t = _() ?? void 0, { skipAnimations: r } = c(a), i = u(() => s({
+		scope: e,
+		reduceMotion: t,
+		skipAnimations: r
+	}), [
+		e,
+		t,
+		r
+	]);
+	return h(() => {
+		e.animations.forEach((e) => e.stop()), e.animations.length = 0;
+	}), [e, i];
+}
+//#endregion
+//#region src/components/form/task-list.tsx
+var y = (e) => {
+	let [t, n] = v();
+	return l(() => {
+		let e = t.current;
+		if (!e) return;
+		let r = (t) => {
+			let r = t.target, i = Array.from(e.querySelectorAll("input[data-task=true]")), a = i.every((e) => e.checked), o = i.indexOf(r);
+			a && o !== -1 && n("input", {
+				scale: [
+					1,
+					1.35,
+					1
+				],
+				rotate: [
+					0,
+					20,
+					-20,
+					0
+				]
+			}, {
+				duration: .5,
+				delay: m(.075, { from: o })
+			});
+		};
+		return e.addEventListener("change", r), () => e.removeEventListener("change", r);
+	}, [t, n]), /* @__PURE__ */ f("fieldset", {
+		...e,
+		"data-component": "task-list",
+		ref: t
+	});
+};
+//#endregion
+export { y as t };
+
+//# sourceMappingURL=task-list-tKumO4WH.js.map

package/dist/task-list-tKumO4WH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"task-list-tKumO4WH.js","names":[],"sources":["../../../node_modules/.pnpm/motion-dom@12.40.0/node_modules/motion-dom/dist/es/utils/stagger.mjs","../../../node_modules/.pnpm/framer-motion@12.40.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/framer-motion/dist/es/utils/use-unmount-effect.mjs","../../../node_modules/.pnpm/framer-motion@12.40.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs","../../../node_modules/.pnpm/framer-motion@12.40.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion-config.mjs","../../../node_modules/.pnpm/framer-motion@12.40.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/framer-motion/dist/es/animation/hooks/use-animate.mjs","../src/components/form/task-list.tsx"],"sourcesContent":["import { easingDefinitionToFunction } from 'motion-utils';\n\nfunction getOriginIndex(from, total) {\n    if (from === \"first\") {\n        return 0;\n    }\n    else {\n        const lastIndex = total - 1;\n        return from === \"last\" ? lastIndex : lastIndex / 2;\n    }\n}\nfunction stagger(duration = 0.1, { startDelay = 0, from = 0, ease } = {}) {\n    return (i, total) => {\n        const fromIndex = typeof from === \"number\" ? from : getOriginIndex(from, total);\n        const distance = Math.abs(fromIndex - i);\n        let delay = duration * distance;\n        if (ease) {\n            const maxDelay = total * duration;\n            const easingFunction = easingDefinitionToFunction(ease);\n            delay = easingFunction(delay / maxDelay) * maxDelay;\n        }\n        return startDelay + delay;\n    };\n}\n\nexport { getOriginIndex, stagger };\n//# sourceMappingURL=stagger.mjs.map\n","\"use client\";\nimport { useEffect } from 'react';\n\nfunction useUnmountEffect(callback) {\n    return useEffect(() => () => callback(), []);\n}\n\nexport { useUnmountEffect };\n//# sourceMappingURL=use-unmount-effect.mjs.map\n","\"use client\";\nimport { hasReducedMotionListener, initPrefersReducedMotion, prefersReducedMotion } from 'motion-dom';\nimport { warnOnce } from 'motion-utils';\nimport { useState } from 'react';\n\n/**\n * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.\n *\n * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing\n * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.\n *\n * It will actively respond to changes and re-render your components with the latest setting.\n *\n * ```jsx\n * export function Sidebar({ isOpen }) {\n *   const shouldReduceMotion = useReducedMotion()\n *   const closedX = shouldReduceMotion ? 0 : \"-100%\"\n *\n *   return (\n *     <motion.div animate={{\n *       opacity: isOpen ? 1 : 0,\n *       x: isOpen ? 0 : closedX\n *     }} />\n *   )\n * }\n * ```\n *\n * @return boolean\n *\n * @public\n */\nfunction useReducedMotion() {\n    /**\n     * Lazy initialisation of prefersReducedMotion\n     */\n    !hasReducedMotionListener.current && initPrefersReducedMotion();\n    const [shouldReduceMotion] = useState(prefersReducedMotion.current);\n    if (process.env.NODE_ENV !== \"production\") {\n        warnOnce(shouldReduceMotion !== true, \"You have Reduced Motion enabled on your device. Animations may not appear as expected.\", \"reduced-motion-disabled\");\n    }\n    /**\n     * TODO See if people miss automatically updating shouldReduceMotion setting\n     */\n    return shouldReduceMotion;\n}\n\nexport { useReducedMotion };\n//# sourceMappingURL=use-reduced-motion.mjs.map\n","\"use client\";\nimport { useContext } from 'react';\nimport { MotionConfigContext } from '../../context/MotionConfigContext.mjs';\nimport { useReducedMotion } from './use-reduced-motion.mjs';\n\nfunction useReducedMotionConfig() {\n    const reducedMotionPreference = useReducedMotion();\n    const { reducedMotion } = useContext(MotionConfigContext);\n    if (reducedMotion === \"never\") {\n        return false;\n    }\n    else if (reducedMotion === \"always\") {\n        return true;\n    }\n    else {\n        return reducedMotionPreference;\n    }\n}\n\nexport { useReducedMotionConfig };\n//# sourceMappingURL=use-reduced-motion-config.mjs.map\n","\"use client\";\nimport { useContext, useMemo } from 'react';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { useUnmountEffect } from '../../utils/use-unmount-effect.mjs';\nimport { useReducedMotionConfig } from '../../utils/reduced-motion/use-reduced-motion-config.mjs';\nimport { MotionConfigContext } from '../../context/MotionConfigContext.mjs';\nimport { createScopedAnimate } from '../animate/index.mjs';\n\nfunction useAnimate() {\n    const scope = useConstant(() => ({\n        current: null, // Will be hydrated by React\n        animations: [],\n    }));\n    const reduceMotion = useReducedMotionConfig() ?? undefined;\n    const { skipAnimations } = useContext(MotionConfigContext);\n    const animate = useMemo(() => createScopedAnimate({ scope, reduceMotion, skipAnimations }), [scope, reduceMotion, skipAnimations]);\n    useUnmountEffect(() => {\n        scope.animations.forEach((animation) => animation.stop());\n        scope.animations.length = 0;\n    });\n    return [scope, animate];\n}\n\nexport { useAnimate };\n//# sourceMappingURL=use-animate.mjs.map\n","\"use client\";\nimport { stagger, useAnimate } from \"motion/react\";\nimport { ComponentProps, PropsWithChildren, useEffect } from \"react\";\n\nexport const TaskList = (props: PropsWithChildren<ComponentProps<\"fieldset\">>) => {\n    const [ref, animate] = useAnimate();\n\n    useEffect(() => {\n        const container = ref.current as HTMLFieldSetElement | null;\n        if (!container) return;\n        const handler = (e: Event) => {\n            const input = e.target as HTMLInputElement;\n            const items = Array.from(container.querySelectorAll(\"input[data-task=true]\")) as HTMLInputElement[];\n            const allTaskChecked = items.every((el) => el.checked);\n            const index = items.indexOf(input);\n            if (allTaskChecked && index !== -1) {\n                animate(\n                    \"input\",\n                    { scale: [1, 1.35, 1], rotate: [0, 20, -20, 0] },\n                    {\n                        duration: 0.5,\n                        delay: stagger(0.075, { from: index }),\n                    }\n                );\n            }\n        };\n        container.addEventListener(\"change\", handler);\n        return () => container.removeEventListener(\"change\", handler);\n    }, [ref, animate]);\n\n    return <fieldset {...props} data-component=\"task-list\" ref={ref} />;\n};\n"],"x_google_ignoreList":[0,1,2,3,4],"mappings":";;;;;AAEA,SAAS,EAAe,GAAM,GAAO;CACjC,IAAI,MAAS,SACT,OAAO;CAEN;EACD,IAAM,IAAY,IAAQ;EAC1B,OAAO,MAAS,SAAS,IAAY,IAAY;CACrD;AACJ;AACA,SAAS,EAAQ,IAAW,IAAK,EAAE,gBAAa,GAAG,UAAO,GAAG,YAAS,CAAC,GAAG;CACtE,QAAQ,GAAG,MAAU;EACjB,IAAM,IAAY,OAAO,KAAS,WAAW,IAAO,EAAe,GAAM,CAAK,GAE1E,IAAQ,IADK,KAAK,IAAI,IAAY,CACR;EAC9B,IAAI,GAAM;GACN,IAAM,IAAW,IAAQ;GAEzB,IADuB,EAA2B,CAC7B,EAAE,IAAQ,CAAQ,IAAI;EAC/C;EACA,OAAO,IAAa;CACxB;AACJ;;;ACpBA,SAAS,EAAiB,GAAU;CAChC,OAAO,cAAsB,EAAS,GAAG,CAAC,CAAC;AAC/C;;;AC0BA,SAAS,IAAmB;CAIxB,CAAC,EAAyB,WAAW,EAAyB;CAC9D,IAAM,CAAC,KAAsB,EAAS,EAAqB,OAAO;CAOlE,OANA,QAAA,IAAA,aAA6B,gBACzB,EAAS,MAAuB,IAAM,0FAA0F,yBAAyB,GAKtJ;AACX;;;ACvCA,SAAS,IAAyB;CAC9B,IAAM,IAA0B,EAAiB,GAC3C,EAAE,qBAAkB,EAAW,CAAmB;CAQpD,OAPA,MAAkB,UACX,KAEF,MAAkB,WAChB,KAGA;AAEf;;;ACTA,SAAS,IAAa;CAClB,IAAM,IAAQ,SAAmB;EAC7B,SAAS;EACT,YAAY,CAAC;CACjB,EAAE,GACI,IAAe,EAAuB,KAAK,KAAA,GAC3C,EAAE,sBAAmB,EAAW,CAAmB,GACnD,IAAU,QAAc,EAAoB;EAAE;EAAO;EAAc;CAAe,CAAC,GAAG;EAAC;EAAO;EAAc;CAAc,CAAC;CAKjI,OAJA,QAAuB;EAEnB,AADA,EAAM,WAAW,SAAS,MAAc,EAAU,KAAK,CAAC,GACxD,EAAM,WAAW,SAAS;CAC9B,CAAC,GACM,CAAC,GAAO,CAAO;AAC1B;;;ACjBA,IAAa,KAAY,MAAyD;CAC9E,IAAM,CAAC,GAAK,KAAW,EAAW;CAyBlC,OAvBA,QAAgB;EACZ,IAAM,IAAY,EAAI;EACtB,IAAI,CAAC,GAAW;EAChB,IAAM,KAAW,MAAa;GAC1B,IAAM,IAAQ,EAAE,QACV,IAAQ,MAAM,KAAK,EAAU,iBAAiB,uBAAuB,CAAC,GACtE,IAAiB,EAAM,OAAO,MAAO,EAAG,OAAO,GAC/C,IAAQ,EAAM,QAAQ,CAAK;GACjC,AAAI,KAAkB,MAAU,MAC5B,EACI,SACA;IAAE,OAAO;KAAC;KAAG;KAAM;IAAC;IAAG,QAAQ;KAAC;KAAG;KAAI;KAAK;IAAC;GAAE,GAC/C;IACI,UAAU;IACV,OAAO,EAAQ,MAAO,EAAE,MAAM,EAAM,CAAC;GACzC,CACJ;EAER;EAEA,OADA,EAAU,iBAAiB,UAAU,CAAO,SAC/B,EAAU,oBAAoB,UAAU,CAAO;CAChE,GAAG,CAAC,GAAK,CAAO,CAAC,GAEV,kBAAC,YAAD;EAAU,GAAI;EAAO,kBAAe;EAAiB;CAAM,CAAA;AACtE"}