@lattice-php/lattice 0.19.0 → 0.21.0

package/dist/lattice.css

@@ -85,6 +85,7 @@
 
   --lt-duration-fast: 120ms;
   --lt-duration-base: 160ms;
+  --lt-duration-slow: 240ms;
 
   --lt-sidebar-w: 16rem;
   --lt-sidebar-w-collapsed: 4rem;
@@ -96,6 +97,20 @@
   color-scheme: light;
 }
 
+/*
+ * Radix keeps dialogs mounted until their exit animation ends, so reduced
+ * motion zeroes the durations instead of removing the animations — the
+ * animation events still fire and close stays instant.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :root,
+  [data-theme="light"] {
+    --lt-duration-fast: 0ms;
+    --lt-duration-base: 0ms;
+    --lt-duration-slow: 0ms;
+  }
+}
+
 [data-theme="dark"],
 .dark {
   --lt-bg: var(--background, oklch(0.145 0 0));
@@ -205,6 +220,14 @@
   --font-weight-lt-bold: var(--lt-font-weight-bold);
   --animate-lt-toast-in: lt-toast-in var(--lt-duration-base) ease-out;
   --animate-lt-toast-out: lt-toast-out var(--lt-duration-fast) ease-in;
+  --animate-lt-fade-in: lt-fade-in var(--lt-duration-base) ease-out;
+  --animate-lt-fade-out: lt-fade-out var(--lt-duration-fast) ease-in;
+  --animate-lt-dialog-in: lt-dialog-in var(--lt-duration-base) ease-out;
+  --animate-lt-dialog-out: lt-dialog-out var(--lt-duration-fast) ease-in;
+  --animate-lt-sheet-in-start: lt-sheet-in-start var(--lt-duration-slow) ease-out;
+  --animate-lt-sheet-out-start: lt-sheet-out-start var(--lt-duration-fast) ease-in;
+  --animate-lt-sheet-in-end: lt-sheet-in-end var(--lt-duration-slow) ease-out;
+  --animate-lt-sheet-out-end: lt-sheet-out-end var(--lt-duration-fast) ease-in;
 }
 
 @theme {
@@ -285,13 +308,124 @@
   }
 }
 
+@keyframes lt-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes lt-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* Centering uses Tailwind's standalone translate property, which composes
+   with transform — so these keyframes may only animate opacity and scale,
+   never a translate of their own. */
+@keyframes lt-dialog-in {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes lt-dialog-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+}
+
+/* Sheet slides are physical (translateX): under RTL a sheet docks to the
+   correct logical edge but enters from the mirrored side. Shipped locales
+   are LTR. */
+@keyframes lt-sheet-in-start {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes lt-sheet-out-start {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes lt-sheet-in-end {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes lt-sheet-out-end {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
 /*
- * Status colours for Badge and Icon table cells. Each tone sets a soft
- * background and a readable foreground in oklch; the `.dark` block swaps them.
- * Defined here (not as utility strings in the renderer) so the palette lives
- * with the theme and can be overridden, and so the cells can pick a tone by
- * name without Tailwind needing to see every class. Gray follows the muted token.
+ * Named colours. Semantic names alias the theme tokens; hue names carry their
+ * own oklch values with `.dark` overrides. Renderers resolve a named colour to
+ * `var(--lt-color-<name>)` for paint, or to an `.lt-tone-<name>` class for the
+ * soft-background/strong-foreground pair used by badge and icon cells. Defined
+ * here (not as utility strings in the renderers) so the palette lives with the
+ * theme and can be overridden, and so a colour can be picked by name at
+ * runtime without Tailwind needing to see every class.
  */
+:root {
+  --lt-color-default: var(--lt-fg);
+  --lt-color-muted: var(--lt-muted-fg);
+  --lt-color-primary: var(--lt-primary);
+  --lt-color-success: var(--lt-success);
+  --lt-color-info: var(--lt-info);
+  --lt-color-warning: var(--lt-warning);
+  --lt-color-danger: var(--lt-danger);
+  --lt-color-gray: var(--lt-muted-fg);
+  --lt-color-red: oklch(0.51 0.19 27);
+  --lt-color-orange: oklch(0.55 0.14 55);
+  --lt-color-yellow: oklch(0.52 0.1 85);
+  --lt-color-green: oklch(0.52 0.13 152);
+  --lt-color-blue: oklch(0.54 0.17 252);
+  --lt-color-purple: oklch(0.53 0.19 305);
+}
+
+[data-theme="dark"],
+.dark {
+  --lt-color-red: oklch(0.83 0.11 27);
+  --lt-color-orange: oklch(0.84 0.1 65);
+  --lt-color-yellow: oklch(0.87 0.11 100);
+  --lt-color-green: oklch(0.85 0.13 155);
+  --lt-color-blue: oklch(0.84 0.11 250);
+  --lt-color-purple: oklch(0.85 0.11 305);
+}
+
 .lt-cell-badge {
   display: inline-flex;
   align-items: center;
@@ -301,67 +435,98 @@
   font-size: 0.75rem;
   line-height: 1rem;
   font-weight: 500;
-  background-color: var(--lt-cell-bg, var(--lt-muted));
-  color: var(--lt-cell-fg, var(--lt-muted-fg));
+  background-color: var(--lt-tone-bg, var(--lt-muted));
+  color: var(--lt-tone-fg, var(--lt-muted-fg));
 }
 
 .lt-cell-icon {
   display: inline-flex;
-  color: var(--lt-cell-fg, var(--lt-fg));
+  color: var(--lt-tone-fg, var(--lt-fg));
 }
 
-.lt-cell-tone-gray {
-  --lt-cell-bg: var(--lt-muted);
-  --lt-cell-fg: var(--lt-muted-fg);
+.lt-tone-gray {
+  --lt-tone-bg: var(--lt-muted);
+  --lt-tone-fg: var(--lt-color-gray);
+}
+.lt-tone-red {
+  --lt-tone-bg: oklch(0.94 0.03 25);
+  --lt-tone-fg: var(--lt-color-red);
+}
+.lt-tone-orange {
+  --lt-tone-bg: oklch(0.95 0.04 65);
+  --lt-tone-fg: var(--lt-color-orange);
+}
+.lt-tone-yellow {
+  --lt-tone-bg: oklch(0.96 0.05 100);
+  --lt-tone-fg: var(--lt-color-yellow);
+}
+.lt-tone-green {
+  --lt-tone-bg: oklch(0.95 0.05 155);
+  --lt-tone-fg: var(--lt-color-green);
+}
+.lt-tone-blue {
+  --lt-tone-bg: oklch(0.95 0.03 245);
+  --lt-tone-fg: var(--lt-color-blue);
+}
+.lt-tone-purple {
+  --lt-tone-bg: oklch(0.95 0.03 305);
+  --lt-tone-fg: var(--lt-color-purple);
+}
+
+.lt-tone-default,
+.lt-tone-primary,
+.lt-tone-success,
+.lt-tone-info,
+.lt-tone-warning,
+.lt-tone-danger {
+  --lt-tone-bg: color-mix(in oklab, var(--lt-tone-fg) 12%, transparent);
+}
+.lt-tone-default {
+  --lt-tone-fg: var(--lt-color-default);
 }
-.lt-cell-tone-red {
-  --lt-cell-bg: oklch(0.94 0.03 25);
-  --lt-cell-fg: oklch(0.51 0.19 27);
+.lt-tone-muted {
+  --lt-tone-bg: var(--lt-muted);
+  --lt-tone-fg: var(--lt-color-muted);
 }
-.lt-cell-tone-orange {
-  --lt-cell-bg: oklch(0.95 0.04 65);
-  --lt-cell-fg: oklch(0.55 0.14 55);
+.lt-tone-primary {
+  --lt-tone-fg: var(--lt-color-primary);
 }
-.lt-cell-tone-yellow {
-  --lt-cell-bg: oklch(0.96 0.05 100);
-  --lt-cell-fg: oklch(0.52 0.1 85);
+.lt-tone-success {
+  --lt-tone-fg: var(--lt-color-success);
 }
-.lt-cell-tone-green {
-  --lt-cell-bg: oklch(0.95 0.05 155);
-  --lt-cell-fg: oklch(0.52 0.13 152);
+.lt-tone-info {
+  --lt-tone-fg: var(--lt-color-info);
 }
-.lt-cell-tone-blue {
-  --lt-cell-bg: oklch(0.95 0.03 245);
-  --lt-cell-fg: oklch(0.54 0.17 252);
+.lt-tone-warning {
+  --lt-tone-fg: var(--lt-color-warning);
 }
-.lt-cell-tone-purple {
-  --lt-cell-bg: oklch(0.95 0.03 305);
-  --lt-cell-fg: oklch(0.53 0.19 305);
+.lt-tone-danger {
+  --lt-tone-fg: var(--lt-color-danger);
 }
 
-.dark .lt-cell-tone-red {
-  --lt-cell-bg: oklch(0.29 0.08 27);
-  --lt-cell-fg: oklch(0.83 0.11 27);
+[data-theme="dark"] .lt-tone-red,
+.dark .lt-tone-red {
+  --lt-tone-bg: oklch(0.29 0.08 27);
 }
-.dark .lt-cell-tone-orange {
-  --lt-cell-bg: oklch(0.3 0.07 65);
-  --lt-cell-fg: oklch(0.84 0.1 65);
+[data-theme="dark"] .lt-tone-orange,
+.dark .lt-tone-orange {
+  --lt-tone-bg: oklch(0.3 0.07 65);
 }
-.dark .lt-cell-tone-yellow {
-  --lt-cell-bg: oklch(0.31 0.06 100);
-  --lt-cell-fg: oklch(0.87 0.11 100);
+[data-theme="dark"] .lt-tone-yellow,
+.dark .lt-tone-yellow {
+  --lt-tone-bg: oklch(0.31 0.06 100);
 }
-.dark .lt-cell-tone-green {
-  --lt-cell-bg: oklch(0.3 0.07 155);
-  --lt-cell-fg: oklch(0.85 0.13 155);
+[data-theme="dark"] .lt-tone-green,
+.dark .lt-tone-green {
+  --lt-tone-bg: oklch(0.3 0.07 155);
 }
-.dark .lt-cell-tone-blue {
-  --lt-cell-bg: oklch(0.3 0.07 245);
-  --lt-cell-fg: oklch(0.84 0.11 250);
+[data-theme="dark"] .lt-tone-blue,
+.dark .lt-tone-blue {
+  --lt-tone-bg: oklch(0.3 0.07 245);
 }
-.dark .lt-cell-tone-purple {
-  --lt-cell-bg: oklch(0.3 0.07 305);
-  --lt-cell-fg: oklch(0.85 0.11 305);
+[data-theme="dark"] .lt-tone-purple,
+.dark .lt-tone-purple {
+  --lt-tone-bg: oklch(0.3 0.07 305);
 }
 
 /*

package/dist/layout/components/breadcrumbs.js

@@ -1,13 +1,15 @@
+import { useT } from "../../i18n/instance.js";
 import { nodeIdentity } from "../../core/test-id.js";
 import { Link, usePage } from "@inertiajs/react";
 import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/layout/components/breadcrumbs.tsx
 var BreadcrumbsComponent = ({ node }) => {
+	const { t } = useT("lattice");
 	const crumbs = usePage().props.lattice?.breadcrumbs ?? [];
 	if (crumbs.length === 0) return null;
 	return /* @__PURE__ */ jsx("nav", {
-		"aria-label": "Breadcrumb",
+		"aria-label": t("common.breadcrumb", "Breadcrumb"),
 		"data-lattice-component": nodeIdentity(node),
 		children: /* @__PURE__ */ jsx("ol", {
 			className: "flex items-center gap-2 text-sm text-lt-muted-fg",

package/dist/layout/components/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.js","names":[],"sources":["../../../resources/js/layout/components/breadcrumbs.tsx"],"sourcesContent":["import { Link, usePage } from \"@inertiajs/react\";\nimport { Fragment } from \"react\";\nimport type { PagePayload, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\n\nconst BreadcrumbsComponent: RendererComponent<\"breadcrumbs\"> = ({ node }) => {\n  const page = usePage();\n  const crumbs = (page.props.lattice as PagePayload | undefined)?.breadcrumbs ?? [];\n\n  if (crumbs.length === 0) {\n    return null;\n  }\n\n  return (\n    <nav aria-label=\"Breadcrumb\" data-lattice-component={nodeIdentity(node)}>\n      <ol className=\"flex items-center gap-2 text-sm text-lt-muted-fg\">\n        {crumbs.map((crumb, index) => {\n          const isLast = index === crumbs.length - 1;\n\n          return (\n            <Fragment key={crumb.href}>\n              <li>\n                {isLast ? (\n                  <span aria-current=\"page\" className=\"text-lt-fg\">\n                    {crumb.title}\n                  </span>\n                ) : (\n                  <Link className=\"hover:text-lt-fg\" href={crumb.href}>\n                    {crumb.title}\n                  </Link>\n                )}\n              </li>\n              {isLast ? null : <li aria-hidden=\"true\">/</li>}\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n\nexport default BreadcrumbsComponent;\n"],"mappings":";;;;;AAKA,IAAM,wBAA0D,EAAE,WAAW;CAE3E,MAAM,SADO,QACG,EAAK,MAAM,SAAqC,eAAe,CAAC;CAEhF,IAAI,OAAO,WAAW,GACpB,OAAO;CAGT,OACE,oBAAC,OAAD;EAAK,cAAW;EAAa,0BAAwB,aAAa,IAAI;YACpE,oBAAC,MAAD;GAAI,WAAU;aACX,OAAO,KAAK,OAAO,UAAU;IAC5B,MAAM,SAAS,UAAU,OAAO,SAAS;IAEzC,OACE,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,MAAD,EAAA,UACG,SACC,oBAAC,QAAD;KAAM,gBAAa;KAAO,WAAU;eACjC,MAAM;IACH,CAAA,IAEN,oBAAC,MAAD;KAAM,WAAU;KAAmB,MAAM,MAAM;eAC5C,MAAM;IACH,CAAA,EAEN,CAAA,GACH,SAAS,OAAO,oBAAC,MAAD;KAAI,eAAY;eAAO;IAAK,CAAA,CACrC,EAAA,GAbK,MAAM,IAaX;GAEd,CAAC;EACC,CAAA;CACD,CAAA;AAET"}
+{"version":3,"file":"breadcrumbs.js","names":[],"sources":["../../../resources/js/layout/components/breadcrumbs.tsx"],"sourcesContent":["import { Link, usePage } from \"@inertiajs/react\";\nimport { Fragment } from \"react\";\nimport type { PagePayload, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\n\nconst BreadcrumbsComponent: RendererComponent<\"breadcrumbs\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const page = usePage();\n  const crumbs = (page.props.lattice as PagePayload | undefined)?.breadcrumbs ?? [];\n\n  if (crumbs.length === 0) {\n    return null;\n  }\n\n  return (\n    <nav\n      aria-label={t(\"common.breadcrumb\", \"Breadcrumb\")}\n      data-lattice-component={nodeIdentity(node)}\n    >\n      <ol className=\"flex items-center gap-2 text-sm text-lt-muted-fg\">\n        {crumbs.map((crumb, index) => {\n          const isLast = index === crumbs.length - 1;\n\n          return (\n            <Fragment key={crumb.href}>\n              <li>\n                {isLast ? (\n                  <span aria-current=\"page\" className=\"text-lt-fg\">\n                    {crumb.title}\n                  </span>\n                ) : (\n                  <Link className=\"hover:text-lt-fg\" href={crumb.href}>\n                    {crumb.title}\n                  </Link>\n                )}\n              </li>\n              {isLast ? null : <li aria-hidden=\"true\">/</li>}\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n\nexport default BreadcrumbsComponent;\n"],"mappings":";;;;;;AAMA,IAAM,wBAA0D,EAAE,WAAW;CAC3E,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,MAAM,SADO,QACG,EAAK,MAAM,SAAqC,eAAe,CAAC;CAEhF,IAAI,OAAO,WAAW,GACpB,OAAO;CAGT,OACE,oBAAC,OAAD;EACE,cAAY,EAAE,qBAAqB,YAAY;EAC/C,0BAAwB,aAAa,IAAI;YAEzC,oBAAC,MAAD;GAAI,WAAU;aACX,OAAO,KAAK,OAAO,UAAU;IAC5B,MAAM,SAAS,UAAU,OAAO,SAAS;IAEzC,OACE,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,MAAD,EAAA,UACG,SACC,oBAAC,QAAD;KAAM,gBAAa;KAAO,WAAU;eACjC,MAAM;IACH,CAAA,IAEN,oBAAC,MAAD;KAAM,WAAU;KAAmB,MAAM,MAAM;eAC5C,MAAM;IACH,CAAA,EAEN,CAAA,GACH,SAAS,OAAO,oBAAC,MAAD;KAAI,eAAY;eAAO;IAAK,CAAA,CACrC,EAAA,GAbK,MAAM,IAaX;GAEd,CAAC;EACC,CAAA;CACD,CAAA;AAET"}

package/dist/layout/components/sidebar.js

@@ -1,70 +1,37 @@
-import { LATTICE_EVENT } from "../../events/event-names.js";
+import { LATTICE_EVENT } from "../../core/event-names.js";
+import { useWindowEvent } from "../../core/hooks/use-window-event.js";
 import { cn } from "../../lib/utils.js";
 import { CollapsedContext } from "../../core/collapsed-context.js";
 import { nodeIdentity } from "../../core/test-id.js";
+import { useMediaQuery } from "../../lib/use-media-query.js";
+import { useCollapsibleState } from "../../ui/use-collapsible-state.js";
 import { router } from "@inertiajs/react";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/layout/components/sidebar.tsx
 var DESKTOP_QUERY = "(min-width: 768px)";
-function readStored(key, remember) {
-	if (!remember || typeof window === "undefined") return false;
-	return window.localStorage.getItem(key) === "true";
-}
 function matchesTarget(event, identity) {
 	const target = event.detail?.target;
 	return target == null || target === identity;
 }
-function useIsDesktop() {
-	const supported = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
-	const [isDesktop, setIsDesktop] = useState(() => supported() ? window.matchMedia(DESKTOP_QUERY).matches : true);
-	useEffect(() => {
-		if (!supported()) return;
-		const query = window.matchMedia(DESKTOP_QUERY);
-		const update = () => setIsDesktop(query.matches);
-		update();
-		query.addEventListener("change", update);
-		return () => query.removeEventListener("change", update);
-	}, []);
-	return isDesktop;
-}
 var SidebarComponent = ({ children, node }) => {
 	const collapsible = node.props.collapsible;
 	const rememberState = node.props.rememberState;
 	const identity = nodeIdentity(node);
 	const storageKey = `lattice:sidebar:${identity ?? "default"}`;
-	const isDesktop = useIsDesktop();
-	const [collapsed, setCollapsed] = useState(() => readStored(storageKey, collapsible && rememberState));
+	const isDesktop = useMediaQuery(DESKTOP_QUERY, true);
+	const [collapsed, toggleCollapsed] = useCollapsibleState(storageKey, false, collapsible && rememberState);
 	const [mobileOpen, setMobileOpen] = useState(false);
-	useEffect(() => {
-		function toggle(event) {
-			if (!matchesTarget(event, identity)) return;
-			if (window.matchMedia?.(DESKTOP_QUERY).matches ?? true) {
-				if (!collapsible) return;
-				setCollapsed((value) => {
-					const next = !value;
-					if (rememberState && typeof window !== "undefined") window.localStorage.setItem(storageKey, String(next));
-					return next;
-				});
-			} else setMobileOpen((open) => !open);
-		}
-		window.addEventListener(LATTICE_EVENT.toggleSidebar, toggle);
-		return () => window.removeEventListener(LATTICE_EVENT.toggleSidebar, toggle);
-	}, [
-		identity,
-		collapsible,
-		rememberState,
-		storageKey
-	]);
+	useWindowEvent(LATTICE_EVENT.toggleSidebar, (event) => {
+		if (!matchesTarget(event, identity)) return;
+		if (window.matchMedia?.(DESKTOP_QUERY).matches ?? true) {
+			if (collapsible) toggleCollapsed();
+		} else setMobileOpen((open) => !open);
+	});
 	useEffect(() => router.on("navigate", () => setMobileOpen(false)), []);
-	useEffect(() => {
-		if (!mobileOpen) return;
-		function close(event) {
-			if (event.key === "Escape") setMobileOpen(false);
-		}
-		window.addEventListener("keydown", close);
-		return () => window.removeEventListener("keydown", close);
-	}, [mobileOpen]);
+	useWindowEvent("keydown", (event) => {
+		if (event.key === "Escape") setMobileOpen(false);
+	}, { enabled: mobileOpen });
 	const isCollapsed = collapsible && collapsed && isDesktop;
 	return /* @__PURE__ */ jsxs(CollapsedContext.Provider, {
 		value: isCollapsed,

package/dist/layout/components/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","names":[],"sources":["../../../resources/js/layout/components/sidebar.tsx"],"sourcesContent":["import { router } from \"@inertiajs/react\";\nimport { useEffect, useState } from \"react\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { CollapsedContext } from \"@lattice-php/lattice/core/collapsed-context\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst DESKTOP_QUERY = \"(min-width: 768px)\";\n\nfunction readStored(key: string, remember: boolean): boolean {\n  if (!remember || typeof window === \"undefined\") {\n    return false;\n  }\n\n  return window.localStorage.getItem(key) === \"true\";\n}\n\nfunction matchesTarget(event: Event, identity: string | undefined): boolean {\n  const target = (event as CustomEvent<{ target?: string }>).detail?.target;\n\n  return target == null || target === identity;\n}\n\nfunction useIsDesktop(): boolean {\n  const supported = () => typeof window !== \"undefined\" && typeof window.matchMedia === \"function\";\n  const [isDesktop, setIsDesktop] = useState(() =>\n    supported() ? window.matchMedia(DESKTOP_QUERY).matches : true,\n  );\n\n  useEffect(() => {\n    if (!supported()) {\n      return;\n    }\n\n    const query = window.matchMedia(DESKTOP_QUERY);\n    const update = (): void => setIsDesktop(query.matches);\n\n    update();\n    query.addEventListener(\"change\", update);\n\n    return () => query.removeEventListener(\"change\", update);\n  }, []);\n\n  return isDesktop;\n}\n\nconst SidebarComponent: RendererComponent<\"sidebar\"> = ({ children, node }) => {\n  const collapsible = node.props.collapsible;\n  const rememberState = node.props.rememberState;\n  const identity = nodeIdentity(node);\n  const storageKey = `lattice:sidebar:${identity ?? \"default\"}`;\n  const isDesktop = useIsDesktop();\n\n  const [collapsed, setCollapsed] = useState(() =>\n    readStored(storageKey, collapsible && rememberState),\n  );\n  const [mobileOpen, setMobileOpen] = useState(false);\n\n  useEffect(() => {\n    function toggle(event: Event): void {\n      if (!matchesTarget(event, identity)) {\n        return;\n      }\n\n      if (window.matchMedia?.(DESKTOP_QUERY).matches ?? true) {\n        if (!collapsible) {\n          return;\n        }\n\n        setCollapsed((value) => {\n          const next = !value;\n\n          if (rememberState && typeof window !== \"undefined\") {\n            window.localStorage.setItem(storageKey, String(next));\n          }\n\n          return next;\n        });\n      } else {\n        setMobileOpen((open) => !open);\n      }\n    }\n\n    window.addEventListener(LATTICE_EVENT.toggleSidebar, toggle);\n\n    return () => window.removeEventListener(LATTICE_EVENT.toggleSidebar, toggle);\n  }, [identity, collapsible, rememberState, storageKey]);\n\n  useEffect(() => router.on(\"navigate\", () => setMobileOpen(false)), []);\n\n  useEffect(() => {\n    if (!mobileOpen) {\n      return;\n    }\n\n    function close(event: KeyboardEvent): void {\n      if (event.key === \"Escape\") {\n        setMobileOpen(false);\n      }\n    }\n\n    window.addEventListener(\"keydown\", close);\n\n    return () => window.removeEventListener(\"keydown\", close);\n  }, [mobileOpen]);\n\n  const isCollapsed = collapsible && collapsed && isDesktop;\n\n  return (\n    <CollapsedContext.Provider value={isCollapsed}>\n      {mobileOpen ? (\n        <div\n          aria-hidden=\"true\"\n          className=\"fixed inset-0 z-lt-overlay bg-lt-overlay md:hidden\"\n          data-test=\"sidebar-backdrop\"\n          onClick={() => setMobileOpen(false)}\n        />\n      ) : null}\n      <aside\n        className={cn(\n          \"fixed inset-y-0 left-0 z-lt-modal flex h-svh w-72 max-w-[80vw] shrink-0 flex-col gap-4 border-r border-lt-border bg-lt-bg p-4 transition-transform\",\n          \"md:sticky md:top-0 md:z-auto md:max-w-none md:translate-x-0 md:transition-[width]\",\n          mobileOpen ? \"translate-x-0\" : \"-translate-x-full\",\n          isCollapsed\n            ? \"md:w-16 md:overflow-visible\"\n            : \"md:w-64 md:overflow-x-hidden md:overflow-y-auto\",\n        )}\n        data-collapsed={isCollapsed ? \"true\" : \"false\"}\n        data-lattice-component={identity}\n        data-test=\"sidebar\"\n      >\n        {children}\n      </aside>\n    </CollapsedContext.Provider>\n  );\n};\n\nexport default SidebarComponent;\n"],"mappings":";;;;;;;;AAQA,IAAM,gBAAgB;AAEtB,SAAS,WAAW,KAAa,UAA4B;CAC3D,IAAI,CAAC,YAAY,OAAO,WAAW,aACjC,OAAO;CAGT,OAAO,OAAO,aAAa,QAAQ,GAAG,MAAM;AAC9C;AAEA,SAAS,cAAc,OAAc,UAAuC;CAC1E,MAAM,SAAU,MAA2C,QAAQ;CAEnE,OAAO,UAAU,QAAQ,WAAW;AACtC;AAEA,SAAS,eAAwB;CAC/B,MAAM,kBAAkB,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe;CACtF,MAAM,CAAC,WAAW,gBAAgB,eAChC,UAAU,IAAI,OAAO,WAAW,aAAa,EAAE,UAAU,IAC3D;CAEA,gBAAgB;EACd,IAAI,CAAC,UAAU,GACb;EAGF,MAAM,QAAQ,OAAO,WAAW,aAAa;EAC7C,MAAM,eAAqB,aAAa,MAAM,OAAO;EAErD,OAAO;EACP,MAAM,iBAAiB,UAAU,MAAM;EAEvC,aAAa,MAAM,oBAAoB,UAAU,MAAM;CACzD,GAAG,CAAC,CAAC;CAEL,OAAO;AACT;AAEA,IAAM,oBAAkD,EAAE,UAAU,WAAW;CAC7E,MAAM,cAAc,KAAK,MAAM;CAC/B,MAAM,gBAAgB,KAAK,MAAM;CACjC,MAAM,WAAW,aAAa,IAAI;CAClC,MAAM,aAAa,mBAAmB,YAAY;CAClD,MAAM,YAAY,aAAa;CAE/B,MAAM,CAAC,WAAW,gBAAgB,eAChC,WAAW,YAAY,eAAe,aAAa,CACrD;CACA,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAElD,gBAAgB;EACd,SAAS,OAAO,OAAoB;GAClC,IAAI,CAAC,cAAc,OAAO,QAAQ,GAChC;GAGF,IAAI,OAAO,aAAa,aAAa,EAAE,WAAW,MAAM;IACtD,IAAI,CAAC,aACH;IAGF,cAAc,UAAU;KACtB,MAAM,OAAO,CAAC;KAEd,IAAI,iBAAiB,OAAO,WAAW,aACrC,OAAO,aAAa,QAAQ,YAAY,OAAO,IAAI,CAAC;KAGtD,OAAO;IACT,CAAC;GACH,OACE,eAAe,SAAS,CAAC,IAAI;EAEjC;EAEA,OAAO,iBAAiB,cAAc,eAAe,MAAM;EAE3D,aAAa,OAAO,oBAAoB,cAAc,eAAe,MAAM;CAC7E,GAAG;EAAC;EAAU;EAAa;EAAe;CAAU,CAAC;CAErD,gBAAgB,OAAO,GAAG,kBAAkB,cAAc,KAAK,CAAC,GAAG,CAAC,CAAC;CAErE,gBAAgB;EACd,IAAI,CAAC,YACH;EAGF,SAAS,MAAM,OAA4B;GACzC,IAAI,MAAM,QAAQ,UAChB,cAAc,KAAK;EAEvB;EAEA,OAAO,iBAAiB,WAAW,KAAK;EAExC,aAAa,OAAO,oBAAoB,WAAW,KAAK;CAC1D,GAAG,CAAC,UAAU,CAAC;CAEf,MAAM,cAAc,eAAe,aAAa;CAEhD,OACE,qBAAC,iBAAiB,UAAlB;EAA2B,OAAO;YAAlC,CACG,aACC,oBAAC,OAAD;GACE,eAAY;GACZ,WAAU;GACV,aAAU;GACV,eAAe,cAAc,KAAK;EACnC,CAAA,IACC,MACJ,oBAAC,SAAD;GACE,WAAW,GACT,sJACA,qFACA,aAAa,kBAAkB,qBAC/B,cACI,gCACA,iDACN;GACA,kBAAgB,cAAc,SAAS;GACvC,0BAAwB;GACxB,aAAU;GAET;EACI,CAAA,CACkB;;AAE/B"}
+{"version":3,"file":"sidebar.js","names":[],"sources":["../../../resources/js/layout/components/sidebar.tsx"],"sourcesContent":["import { router } from \"@inertiajs/react\";\nimport { useEffect, useState } from \"react\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { CollapsedContext } from \"@lattice-php/lattice/core/collapsed-context\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/core/event-names\";\nimport { useWindowEvent } from \"@lattice-php/lattice/core/hooks/use-window-event\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useMediaQuery } from \"@lattice-php/lattice/lib/use-media-query\";\nimport { useCollapsibleState } from \"@lattice-php/lattice/ui/use-collapsible-state\";\n\nconst DESKTOP_QUERY = \"(min-width: 768px)\";\n\nfunction matchesTarget(event: Event, identity: string | undefined): boolean {\n  const target = (event as CustomEvent<{ target?: string }>).detail?.target;\n\n  return target == null || target === identity;\n}\n\nconst SidebarComponent: RendererComponent<\"sidebar\"> = ({ children, node }) => {\n  const collapsible = node.props.collapsible;\n  const rememberState = node.props.rememberState;\n  const identity = nodeIdentity(node);\n  const storageKey = `lattice:sidebar:${identity ?? \"default\"}`;\n  const isDesktop = useMediaQuery(DESKTOP_QUERY, true);\n\n  const [collapsed, toggleCollapsed] = useCollapsibleState(\n    storageKey,\n    false,\n    collapsible && rememberState,\n  );\n  const [mobileOpen, setMobileOpen] = useState(false);\n\n  useWindowEvent(LATTICE_EVENT.toggleSidebar, (event) => {\n    if (!matchesTarget(event, identity)) {\n      return;\n    }\n\n    if (window.matchMedia?.(DESKTOP_QUERY).matches ?? true) {\n      if (collapsible) {\n        toggleCollapsed();\n      }\n    } else {\n      setMobileOpen((open) => !open);\n    }\n  });\n\n  useEffect(() => router.on(\"navigate\", () => setMobileOpen(false)), []);\n\n  useWindowEvent(\n    \"keydown\",\n    (event) => {\n      if ((event as KeyboardEvent).key === \"Escape\") {\n        setMobileOpen(false);\n      }\n    },\n    { enabled: mobileOpen },\n  );\n\n  const isCollapsed = collapsible && collapsed && isDesktop;\n\n  return (\n    <CollapsedContext.Provider value={isCollapsed}>\n      {mobileOpen ? (\n        <div\n          aria-hidden=\"true\"\n          className=\"fixed inset-0 z-lt-overlay bg-lt-overlay md:hidden\"\n          data-test=\"sidebar-backdrop\"\n          onClick={() => setMobileOpen(false)}\n        />\n      ) : null}\n      <aside\n        className={cn(\n          \"fixed inset-y-0 left-0 z-lt-modal flex h-svh w-72 max-w-[80vw] shrink-0 flex-col gap-4 border-r border-lt-border bg-lt-bg p-4 transition-transform\",\n          \"md:sticky md:top-0 md:z-auto md:max-w-none md:translate-x-0 md:transition-[width]\",\n          mobileOpen ? \"translate-x-0\" : \"-translate-x-full\",\n          isCollapsed\n            ? \"md:w-16 md:overflow-visible\"\n            : \"md:w-64 md:overflow-x-hidden md:overflow-y-auto\",\n        )}\n        data-collapsed={isCollapsed ? \"true\" : \"false\"}\n        data-lattice-component={identity}\n        data-test=\"sidebar\"\n      >\n        {children}\n      </aside>\n    </CollapsedContext.Provider>\n  );\n};\n\nexport default SidebarComponent;\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,gBAAgB;AAEtB,SAAS,cAAc,OAAc,UAAuC;CAC1E,MAAM,SAAU,MAA2C,QAAQ;CAEnE,OAAO,UAAU,QAAQ,WAAW;AACtC;AAEA,IAAM,oBAAkD,EAAE,UAAU,WAAW;CAC7E,MAAM,cAAc,KAAK,MAAM;CAC/B,MAAM,gBAAgB,KAAK,MAAM;CACjC,MAAM,WAAW,aAAa,IAAI;CAClC,MAAM,aAAa,mBAAmB,YAAY;CAClD,MAAM,YAAY,cAAc,eAAe,IAAI;CAEnD,MAAM,CAAC,WAAW,mBAAmB,oBACnC,YACA,OACA,eAAe,aACjB;CACA,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAElD,eAAe,cAAc,gBAAgB,UAAU;EACrD,IAAI,CAAC,cAAc,OAAO,QAAQ,GAChC;EAGF,IAAI,OAAO,aAAa,aAAa,EAAE,WAAW;OAC5C,aACF,gBAAgB;EAAA,OAGlB,eAAe,SAAS,CAAC,IAAI;CAEjC,CAAC;CAED,gBAAgB,OAAO,GAAG,kBAAkB,cAAc,KAAK,CAAC,GAAG,CAAC,CAAC;CAErE,eACE,YACC,UAAU;EACT,IAAK,MAAwB,QAAQ,UACnC,cAAc,KAAK;CAEvB,GACA,EAAE,SAAS,WAAW,CACxB;CAEA,MAAM,cAAc,eAAe,aAAa;CAEhD,OACE,qBAAC,iBAAiB,UAAlB;EAA2B,OAAO;YAAlC,CACG,aACC,oBAAC,OAAD;GACE,eAAY;GACZ,WAAU;GACV,aAAU;GACV,eAAe,cAAc,KAAK;EACnC,CAAA,IACC,MACJ,oBAAC,SAAD;GACE,WAAW,GACT,sJACA,qFACA,aAAa,kBAAkB,qBAC/B,cACI,gCACA,iDACN;GACA,kBAAgB,cAAc,SAAS;GACvC,0BAAwB;GACxB,aAAU;GAET;EACI,CAAA,CACkB;;AAE/B"}

package/dist/layout/plugin.d.ts

@@ -1,2 +1 @@
-export type LayoutComponentType = "breadcrumbs" | "callouts" | "dropdown" | "menu" | "menu-item" | "outlet" | "sidebar" | "topbar";
 export declare const layoutComponents: import('../core/registry.js').Plugin;

package/dist/layout/plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.js","names":[],"sources":["../../resources/js/layout/plugin.ts"],"sourcesContent":["import {\n  createPlugin,\n  eagerComponent,\n  type ComponentRegistryFor,\n} from \"@lattice-php/lattice/core/registry\";\nimport BreadcrumbsComponent from \"./components/breadcrumbs\";\nimport CalloutsComponent from \"./components/callouts\";\nimport DropdownComponent from \"./components/dropdown\";\nimport MenuComponent from \"./components/menu\";\nimport MenuItemComponent from \"./components/menu-item\";\nimport OutletComponent from \"./components/outlet\";\nimport SidebarComponent from \"./components/sidebar\";\nimport TopbarComponent from \"./components/topbar\";\n\nexport type LayoutComponentType =\n  | \"breadcrumbs\"\n  | \"callouts\"\n  | \"dropdown\"\n  | \"menu\"\n  | \"menu-item\"\n  | \"outlet\"\n  | \"sidebar\"\n  | \"topbar\";\n\nexport const layoutComponents = createPlugin({\n  components: {\n    breadcrumbs: eagerComponent(BreadcrumbsComponent),\n    callouts: eagerComponent(CalloutsComponent),\n    dropdown: eagerComponent(DropdownComponent),\n    menu: eagerComponent(MenuComponent),\n    \"menu-item\": eagerComponent(MenuItemComponent),\n    outlet: eagerComponent(OutletComponent),\n    sidebar: eagerComponent(SidebarComponent),\n    topbar: eagerComponent(TopbarComponent),\n  } satisfies ComponentRegistryFor<LayoutComponentType>,\n  name: \"lattice/layout\",\n});\n"],"mappings":";;;;;;;;;;AAwBA,IAAa,mBAAmB,aAAa;CAC3C,YAAY;EACV,aAAa,eAAe,oBAAoB;EAChD,UAAU,eAAe,QAAiB;EAC1C,UAAU,eAAe,iBAAiB;EAC1C,MAAM,eAAe,aAAa;EAClC,aAAa,eAAe,iBAAiB;EAC7C,QAAQ,eAAe,eAAe;EACtC,SAAS,eAAe,gBAAgB;EACxC,QAAQ,eAAe,eAAe;CACxC;CACA,MAAM;AACR,CAAC"}
+{"version":3,"file":"plugin.js","names":[],"sources":["../../resources/js/layout/plugin.ts"],"sourcesContent":["import {\n  createPlugin,\n  eagerComponent,\n  type ComponentRegistryFor,\n} from \"@lattice-php/lattice/core/registry\";\nimport type { LayoutNodeType } from \"@lattice-php/lattice/types/generated\";\nimport BreadcrumbsComponent from \"./components/breadcrumbs\";\nimport CalloutsComponent from \"./components/callouts\";\nimport DropdownComponent from \"./components/dropdown\";\nimport MenuComponent from \"./components/menu\";\nimport MenuItemComponent from \"./components/menu-item\";\nimport OutletComponent from \"./components/outlet\";\nimport SidebarComponent from \"./components/sidebar\";\nimport TopbarComponent from \"./components/topbar\";\n\nexport const layoutComponents = createPlugin({\n  components: {\n    breadcrumbs: eagerComponent(BreadcrumbsComponent),\n    callouts: eagerComponent(CalloutsComponent),\n    dropdown: eagerComponent(DropdownComponent),\n    menu: eagerComponent(MenuComponent),\n    \"menu-item\": eagerComponent(MenuItemComponent),\n    outlet: eagerComponent(OutletComponent),\n    sidebar: eagerComponent(SidebarComponent),\n    topbar: eagerComponent(TopbarComponent),\n  } satisfies ComponentRegistryFor<LayoutNodeType>,\n  name: \"lattice/layout\",\n});\n"],"mappings":";;;;;;;;;;AAeA,IAAa,mBAAmB,aAAa;CAC3C,YAAY;EACV,aAAa,eAAe,oBAAoB;EAChD,UAAU,eAAe,QAAiB;EAC1C,UAAU,eAAe,iBAAiB;EAC1C,MAAM,eAAe,aAAa;EAClC,aAAa,eAAe,iBAAiB;EAC7C,QAAQ,eAAe,eAAe;EACtC,SAAS,eAAe,gBAAgB;EACxC,QAAQ,eAAe,eAAe;CACxC;CACA,MAAM;AACR,CAAC"}

package/dist/lib/color.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+import { Color, ColorName } from '../types/generated.js';
+export declare function namedColor(value: ColorName): Color;
+export declare function coerceColor(value: unknown): Color | undefined;
+export declare function colorValue(color: Color): string;
+export declare function toneProps(color: Color): {
+    className?: string;
+    style?: CSSProperties;
+};

package/dist/lib/color.js

@@ -0,0 +1,48 @@
+//#region resources/js/lib/color.ts
+var names = new Set([
+	"default",
+	"muted",
+	"primary",
+	"success",
+	"info",
+	"warning",
+	"danger",
+	"gray",
+	"red",
+	"orange",
+	"yellow",
+	"green",
+	"blue",
+	"purple"
+]);
+function namedColor(value) {
+	return {
+		kind: "named",
+		value,
+		dark: null
+	};
+}
+function coerceColor(value) {
+	if (typeof value === "string" && value !== "") return names.has(value) ? namedColor(value) : {
+		kind: "css",
+		value,
+		dark: null
+	};
+	if (typeof value === "object" && value !== null && "kind" in value && "value" in value) return value;
+}
+function colorValue(color) {
+	if (color.kind === "named") return `var(--lt-color-${color.value})`;
+	return color.dark === null ? color.value : `light-dark(${color.value}, ${color.dark})`;
+}
+function toneProps(color) {
+	if (color.kind === "named") return { className: `lt-tone-${color.value}` };
+	const paint = colorValue(color);
+	return { style: {
+		"--lt-tone-bg": `color-mix(in oklab, ${paint} 12%, transparent)`,
+		"--lt-tone-fg": paint
+	} };
+}
+//#endregion
+export { coerceColor, colorValue, namedColor, toneProps };
+
+//# sourceMappingURL=color.js.map

package/dist/lib/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","names":[],"sources":["../../resources/js/lib/color.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport type { Color, ColorName } from \"@lattice-php/lattice/types/generated\";\n\nconst names: ReadonlySet<string> = new Set([\n  \"default\",\n  \"muted\",\n  \"primary\",\n  \"success\",\n  \"info\",\n  \"warning\",\n  \"danger\",\n  \"gray\",\n  \"red\",\n  \"orange\",\n  \"yellow\",\n  \"green\",\n  \"blue\",\n  \"purple\",\n] satisfies ColorName[]);\n\nexport function namedColor(value: ColorName): Color {\n  return { kind: \"named\", value, dark: null };\n}\n\nexport function coerceColor(value: unknown): Color | undefined {\n  if (typeof value === \"string\" && value !== \"\") {\n    return names.has(value) ? namedColor(value as ColorName) : { kind: \"css\", value, dark: null };\n  }\n\n  if (typeof value === \"object\" && value !== null && \"kind\" in value && \"value\" in value) {\n    return value as Color;\n  }\n\n  return undefined;\n}\n\nexport function colorValue(color: Color): string {\n  if (color.kind === \"named\") {\n    return `var(--lt-color-${color.value})`;\n  }\n\n  return color.dark === null ? color.value : `light-dark(${color.value}, ${color.dark})`;\n}\n\nexport function toneProps(color: Color): { className?: string; style?: CSSProperties } {\n  if (color.kind === \"named\") {\n    return { className: `lt-tone-${color.value}` };\n  }\n\n  const paint = colorValue(color);\n\n  return {\n    style: {\n      \"--lt-tone-bg\": `color-mix(in oklab, ${paint} 12%, transparent)`,\n      \"--lt-tone-fg\": paint,\n    } as CSSProperties,\n  };\n}\n"],"mappings":";AAGA,IAAM,QAA6B,IAAI,IAAI;CACzC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAuB;AAEvB,SAAgB,WAAW,OAAyB;CAClD,OAAO;EAAE,MAAM;EAAS;EAAO,MAAM;CAAK;AAC5C;AAEA,SAAgB,YAAY,OAAmC;CAC7D,IAAI,OAAO,UAAU,YAAY,UAAU,IACzC,OAAO,MAAM,IAAI,KAAK,IAAI,WAAW,KAAkB,IAAI;EAAE,MAAM;EAAO;EAAO,MAAM;CAAK;CAG9F,IAAI,OAAO,UAAU,YAAY,UAAU,QAAQ,UAAU,SAAS,WAAW,OAC/E,OAAO;AAIX;AAEA,SAAgB,WAAW,OAAsB;CAC/C,IAAI,MAAM,SAAS,SACjB,OAAO,kBAAkB,MAAM,MAAM;CAGvC,OAAO,MAAM,SAAS,OAAO,MAAM,QAAQ,cAAc,MAAM,MAAM,IAAI,MAAM,KAAK;AACtF;AAEA,SAAgB,UAAU,OAA6D;CACrF,IAAI,MAAM,SAAS,SACjB,OAAO,EAAE,WAAW,WAAW,MAAM,QAAQ;CAG/C,MAAM,QAAQ,WAAW,KAAK;CAE9B,OAAO,EACL,OAAO;EACL,gBAAgB,uBAAuB,MAAM;EAC7C,gBAAgB;CAClB,EACF;AACF"}

package/dist/lib/is-truthy.d.ts

@@ -0,0 +1,2 @@
+/** Coerce a wire value (boolean, `1`/`0`, `"1"`/`"true"`) to a boolean. */
+export declare function isTruthy(value: unknown): boolean;

package/dist/lib/is-truthy.js

@@ -0,0 +1,9 @@
+//#region resources/js/lib/is-truthy.ts
+/** Coerce a wire value (boolean, `1`/`0`, `"1"`/`"true"`) to a boolean. */
+function isTruthy(value) {
+	return value === true || value === 1 || value === "1" || value === "true";
+}
+//#endregion
+export { isTruthy };
+
+//# sourceMappingURL=is-truthy.js.map

package/dist/lib/is-truthy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-truthy.js","names":[],"sources":["../../resources/js/lib/is-truthy.ts"],"sourcesContent":["/** Coerce a wire value (boolean, `1`/`0`, `\"1\"`/`\"true\"`) to a boolean. */\nexport function isTruthy(value: unknown): boolean {\n  return value === true || value === 1 || value === \"1\" || value === \"true\";\n}\n"],"mappings":";;AACA,SAAgB,SAAS,OAAyB;CAChD,OAAO,UAAU,QAAQ,UAAU,KAAK,UAAU,OAAO,UAAU;AACrE"}

package/dist/lib/use-debounced-callback.d.ts

@@ -0,0 +1,10 @@
+export type DebouncedCallback<A extends unknown[]> = {
+    (...args: A): void;
+    cancel: () => void;
+};
+/**
+ * A debounced wrapper around `callback` that is stable across renders (it reads
+ * the latest callback via a ref) and clears its pending timer on unmount, so a
+ * late fire can never run against a torn-down component.
+ */
+export declare function useDebouncedCallback<A extends unknown[]>(callback: (...args: A) => void, delayMs: number): DebouncedCallback<A>;

package/dist/lib/use-debounced-callback.js

@@ -0,0 +1,34 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+//#region resources/js/lib/use-debounced-callback.ts
+/**
+* A debounced wrapper around `callback` that is stable across renders (it reads
+* the latest callback via a ref) and clears its pending timer on unmount, so a
+* late fire can never run against a torn-down component.
+*/
+function useDebouncedCallback(callback, delayMs) {
+	const callbackRef = useRef(callback);
+	callbackRef.current = callback;
+	const timerRef = useRef(null);
+	const cancel = useCallback(() => {
+		if (timerRef.current !== null) {
+			clearTimeout(timerRef.current);
+			timerRef.current = null;
+		}
+	}, []);
+	useEffect(() => cancel, [cancel]);
+	return useMemo(() => {
+		const debounced = (...args) => {
+			cancel();
+			timerRef.current = setTimeout(() => {
+				timerRef.current = null;
+				callbackRef.current(...args);
+			}, delayMs);
+		};
+		debounced.cancel = cancel;
+		return debounced;
+	}, [cancel, delayMs]);
+}
+//#endregion
+export { useDebouncedCallback };
+
+//# sourceMappingURL=use-debounced-callback.js.map

package/dist/lib/use-debounced-callback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-debounced-callback.js","names":[],"sources":["../../resources/js/lib/use-debounced-callback.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef } from \"react\";\n\nexport type DebouncedCallback<A extends unknown[]> = {\n  (...args: A): void;\n  cancel: () => void;\n};\n\n/**\n * A debounced wrapper around `callback` that is stable across renders (it reads\n * the latest callback via a ref) and clears its pending timer on unmount, so a\n * late fire can never run against a torn-down component.\n */\nexport function useDebouncedCallback<A extends unknown[]>(\n  callback: (...args: A) => void,\n  delayMs: number,\n): DebouncedCallback<A> {\n  const callbackRef = useRef(callback);\n  callbackRef.current = callback;\n\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const cancel = useCallback(() => {\n    if (timerRef.current !== null) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => cancel, [cancel]);\n\n  return useMemo(() => {\n    const debounced = (...args: A): void => {\n      cancel();\n      timerRef.current = setTimeout(() => {\n        timerRef.current = null;\n        callbackRef.current(...args);\n      }, delayMs);\n    };\n\n    debounced.cancel = cancel;\n\n    return debounced;\n  }, [cancel, delayMs]);\n}\n"],"mappings":";;;;;;;AAYA,SAAgB,qBACd,UACA,SACsB;CACtB,MAAM,cAAc,OAAO,QAAQ;CACnC,YAAY,UAAU;CAEtB,MAAM,WAAW,OAA6C,IAAI;CAElE,MAAM,SAAS,kBAAkB;EAC/B,IAAI,SAAS,YAAY,MAAM;GAC7B,aAAa,SAAS,OAAO;GAC7B,SAAS,UAAU;EACrB;CACF,GAAG,CAAC,CAAC;CAEL,gBAAgB,QAAQ,CAAC,MAAM,CAAC;CAEhC,OAAO,cAAc;EACnB,MAAM,aAAa,GAAG,SAAkB;GACtC,OAAO;GACP,SAAS,UAAU,iBAAiB;IAClC,SAAS,UAAU;IACnB,YAAY,QAAQ,GAAG,IAAI;GAC7B,GAAG,OAAO;EACZ;EAEA,UAAU,SAAS;EAEnB,OAAO;CACT,GAAG,CAAC,QAAQ,OAAO,CAAC;AACtB"}

package/dist/lib/use-media-query.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Track a CSS media query. `fallback` is the SSR / no-`matchMedia` value and the
+ * initial state before the effect subscribes.
+ */
+export declare function useMediaQuery(query: string, fallback?: boolean): boolean;

package/dist/lib/use-media-query.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+//#region resources/js/lib/use-media-query.ts
+function matches(query, fallback) {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return fallback;
+	return window.matchMedia(query).matches;
+}
+/**
+* Track a CSS media query. `fallback` is the SSR / no-`matchMedia` value and the
+* initial state before the effect subscribes.
+*/
+function useMediaQuery(query, fallback = false) {
+	const [state, setState] = useState(() => matches(query, fallback));
+	useEffect(() => {
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+		const media = window.matchMedia(query);
+		const update = () => setState(media.matches);
+		update();
+		media.addEventListener("change", update);
+		return () => media.removeEventListener("change", update);
+	}, [query]);
+	return state;
+}
+//#endregion
+export { useMediaQuery };
+
+//# sourceMappingURL=use-media-query.js.map