@lattice-php/lattice 0.1.0 → 0.2.0

package/dist/layout/menu-item.js

@@ -0,0 +1,130 @@
+import { cn } from "../lib/utils.js";
+import { Icon } from "../icons/sprite.js";
+import { IconRenderer } from "../icons/icon-renderer.js";
+import { useT } from "../i18n/instance.js";
+import { SidebarCollapsedContext, useSidebarCollapsed } from "./context.js";
+import { useEffect, useRef, useState } from "react";
+import { Link, usePage } from "@inertiajs/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region resources/js/layout/menu-item.tsx
+var rowClass = "flex items-center gap-2 rounded-md px-3 py-2 text-sm text-lt-fg transition-colors hover:bg-lt-muted";
+function schemaContainsPath(schema, path) {
+	return (schema ?? []).some((child) => child.props?.href === path || schemaContainsPath(child.schema, path));
+}
+var MenuItemComponent = ({ children, node }) => {
+	const collapsed = useSidebarCollapsed();
+	const icon = node.props.icon;
+	const label = node.props.label;
+	const href = node.props.href ?? "";
+	const currentPath = usePage().url.split("?")[0];
+	const slug = label.toLowerCase().replace(/\s+/g, "-");
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [icon ? /* @__PURE__ */ jsx(IconRenderer, {
+		className: "size-lt-icon-md shrink-0",
+		icon
+	}) : null, /* @__PURE__ */ jsx("span", {
+		className: cn(collapsed && "sr-only"),
+		children: label
+	})] });
+	if (href === "") {
+		if (!children) return collapsed ? null : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("span", {
+			className: "flex items-center gap-2 px-3 py-2 text-xs font-semibold tracking-wide text-lt-muted-fg uppercase",
+			children: content
+		}) });
+		if (collapsed) return /* @__PURE__ */ jsx(FlyoutGroup, {
+			icon,
+			label,
+			testId: `menu-${slug}`,
+			children
+		});
+		return /* @__PURE__ */ jsx(CollapsibleItem, {
+			content,
+			defaultOpen: schemaContainsPath(node.schema, currentPath),
+			testId: `menu-${slug}`,
+			children
+		});
+	}
+	const active = currentPath === href;
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, {
+		"aria-current": active ? "page" : void 0,
+		className: cn(rowClass, collapsed && "justify-center", active && "bg-lt-muted font-medium"),
+		"data-test": `menu-${slug}`,
+		href,
+		method: node.props.method ?? "get",
+		title: collapsed ? label : void 0,
+		children: content
+	}) });
+};
+function CollapsibleItem({ children, content, defaultOpen, testId }) {
+	const [open, setOpen] = useState(defaultOpen);
+	return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsxs("button", {
+		"aria-expanded": open,
+		className: cn(rowClass, "w-full"),
+		"data-test": testId,
+		onClick: () => setOpen((value) => !value),
+		type: "button",
+		children: [content, /* @__PURE__ */ jsx(Icon, {
+			name: "chevron-right",
+			className: cn("ml-auto size-lt-icon-md shrink-0 transition-transform", open && "rotate-90")
+		})]
+	}), open ? /* @__PURE__ */ jsx("ul", {
+		className: "mt-1 flex flex-col gap-1 pl-3",
+		children
+	}) : null] });
+}
+function FlyoutGroup({ children, icon, label, testId }) {
+	const { t } = useT("lattice");
+	const [open, setOpen] = useState(false);
+	const [position, setPosition] = useState({
+		left: 0,
+		top: 0
+	});
+	const triggerRef = useRef(null);
+	const url = usePage().url;
+	useEffect(() => setOpen(false), [url]);
+	function toggle() {
+		const rect = triggerRef.current?.getBoundingClientRect();
+		if (rect) setPosition({
+			left: rect.right + 4,
+			top: rect.top
+		});
+		setOpen((value) => !value);
+	}
+	return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("button", {
+		"aria-expanded": open,
+		"aria-label": label,
+		className: cn(rowClass, "w-full justify-center"),
+		"data-test": testId,
+		onClick: toggle,
+		ref: triggerRef,
+		title: label,
+		type: "button",
+		children: icon ? /* @__PURE__ */ jsx(IconRenderer, {
+			className: "size-lt-icon-md shrink-0",
+			icon
+		}) : /* @__PURE__ */ jsx("span", { children: label })
+	}), open ? createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+		"aria-label": t("a11y.closeMenu", "Close menu"),
+		className: "fixed inset-0 z-40 cursor-default",
+		"data-test": `${testId}-close`,
+		onClick: () => setOpen(false),
+		type: "button"
+	}), /* @__PURE__ */ jsx(SidebarCollapsedContext.Provider, {
+		value: false,
+		children: /* @__PURE__ */ jsxs("ul", {
+			className: "fixed z-50 min-w-48 rounded-md border border-lt-border bg-lt-popover p-1 text-lt-popover-fg shadow-lg",
+			style: {
+				left: position.left,
+				top: position.top
+			},
+			children: [/* @__PURE__ */ jsx("li", {
+				className: "px-3 py-1.5 text-xs font-semibold tracking-wide text-lt-muted-fg uppercase",
+				children: label
+			}), children]
+		})
+	})] }), document.body) : null] });
+}
+//#endregion
+export { MenuItemComponent as default };
+
+//# sourceMappingURL=menu-item.js.map

package/dist/layout/menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.js","names":[],"sources":["../../resources/js/layout/menu-item.tsx"],"sourcesContent":["import { Link, usePage } from \"@inertiajs/react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { RendererComponent, Schema } from \"@lattice/lattice/core/types\";\nimport { Icon, IconRenderer } from \"@lattice/lattice/icons\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\nimport { useT } from \"@lattice/lattice/i18n\";\nimport { SidebarCollapsedContext, useSidebarCollapsed } from \"./context\";\n\nconst rowClass =\n  \"flex items-center gap-2 rounded-md px-3 py-2 text-sm text-lt-fg transition-colors hover:bg-lt-muted\";\n\nfunction schemaContainsPath(schema: Schema | undefined, path: string): boolean {\n  return (schema ?? []).some(\n    (child) => child.props?.href === path || schemaContainsPath(child.schema, path),\n  );\n}\n\nconst MenuItemComponent: RendererComponent<\"menu-item\"> = ({ children, node }) => {\n  const collapsed = useSidebarCollapsed();\n  const icon = node.props.icon;\n  const label = node.props.label;\n  const href = node.props.href ?? \"\";\n  const currentPath = usePage().url.split(\"?\")[0];\n  const slug = label.toLowerCase().replace(/\\s+/g, \"-\");\n\n  const content = (\n    <>\n      {icon ? <IconRenderer className=\"size-lt-icon-md shrink-0\" icon={icon} /> : null}\n      <span className={cn(collapsed && \"sr-only\")}>{label}</span>\n    </>\n  );\n\n  if (href === \"\") {\n    if (!children) {\n      return collapsed ? null : (\n        <li>\n          <span className=\"flex items-center gap-2 px-3 py-2 text-xs font-semibold tracking-wide text-lt-muted-fg uppercase\">\n            {content}\n          </span>\n        </li>\n      );\n    }\n\n    if (collapsed) {\n      return (\n        <FlyoutGroup icon={icon} label={label} testId={`menu-${slug}`}>\n          {children}\n        </FlyoutGroup>\n      );\n    }\n\n    return (\n      <CollapsibleItem\n        content={content}\n        defaultOpen={schemaContainsPath(node.schema, currentPath)}\n        testId={`menu-${slug}`}\n      >\n        {children}\n      </CollapsibleItem>\n    );\n  }\n\n  const active = currentPath === href;\n\n  return (\n    <li>\n      <Link\n        aria-current={active ? \"page\" : undefined}\n        className={cn(rowClass, collapsed && \"justify-center\", active && \"bg-lt-muted font-medium\")}\n        data-test={`menu-${slug}`}\n        href={href}\n        method={node.props.method ?? \"get\"}\n        title={collapsed ? label : undefined}\n      >\n        {content}\n      </Link>\n    </li>\n  );\n};\n\nfunction CollapsibleItem({\n  children,\n  content,\n  defaultOpen,\n  testId,\n}: {\n  children: ReactNode;\n  content: ReactNode;\n  defaultOpen: boolean;\n  testId: string;\n}) {\n  const [open, setOpen] = useState(defaultOpen);\n\n  return (\n    <li>\n      <button\n        aria-expanded={open}\n        className={cn(rowClass, \"w-full\")}\n        data-test={testId}\n        onClick={() => setOpen((value) => !value)}\n        type=\"button\"\n      >\n        {content}\n        <Icon\n          name=\"chevron-right\"\n          className={cn(\n            \"ml-auto size-lt-icon-md shrink-0 transition-transform\",\n            open && \"rotate-90\",\n          )}\n        />\n      </button>\n      {open ? <ul className=\"mt-1 flex flex-col gap-1 pl-3\">{children}</ul> : null}\n    </li>\n  );\n}\n\nfunction FlyoutGroup({\n  children,\n  icon,\n  label,\n  testId,\n}: {\n  children: ReactNode;\n  icon?: string | null;\n  label: string;\n  testId: string;\n}) {\n  const { t } = useT(\"lattice\");\n  const [open, setOpen] = useState(false);\n  const [position, setPosition] = useState({ left: 0, top: 0 });\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const url = usePage().url;\n\n  useEffect(() => setOpen(false), [url]);\n\n  function toggle(): void {\n    const rect = triggerRef.current?.getBoundingClientRect();\n\n    if (rect) {\n      setPosition({ left: rect.right + 4, top: rect.top });\n    }\n\n    setOpen((value) => !value);\n  }\n\n  return (\n    <li>\n      <button\n        aria-expanded={open}\n        aria-label={label}\n        className={cn(rowClass, \"w-full justify-center\")}\n        data-test={testId}\n        onClick={toggle}\n        ref={triggerRef}\n        title={label}\n        type=\"button\"\n      >\n        {icon ? (\n          <IconRenderer className=\"size-lt-icon-md shrink-0\" icon={icon} />\n        ) : (\n          <span>{label}</span>\n        )}\n      </button>\n      {open\n        ? createPortal(\n            <>\n              <button\n                aria-label={t(\"a11y.closeMenu\", \"Close menu\")}\n                className=\"fixed inset-0 z-40 cursor-default\"\n                data-test={`${testId}-close`}\n                onClick={() => setOpen(false)}\n                type=\"button\"\n              />\n              <SidebarCollapsedContext.Provider value={false}>\n                <ul\n                  className=\"fixed z-50 min-w-48 rounded-md border border-lt-border bg-lt-popover p-1 text-lt-popover-fg shadow-lg\"\n                  style={{ left: position.left, top: position.top }}\n                >\n                  <li className=\"px-3 py-1.5 text-xs font-semibold tracking-wide text-lt-muted-fg uppercase\">\n                    {label}\n                  </li>\n                  {children}\n                </ul>\n              </SidebarCollapsedContext.Provider>\n            </>,\n            document.body,\n          )\n        : null}\n    </li>\n  );\n}\n\nexport default MenuItemComponent;\n"],"mappings":"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"}

package/dist/layout/menu.d.ts

@@ -0,0 +1,3 @@
+import { RendererComponent } from '../core/types';
+declare const MenuComponent: RendererComponent<"menu">;
+export default MenuComponent;

package/dist/layout/menu.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/layout/menu.tsx
+var MenuComponent = ({ children, node }) => /* @__PURE__ */ jsx("nav", {
+	"data-lattice-component": node.id,
+	children: /* @__PURE__ */ jsx("ul", {
+		className: "flex flex-col gap-1",
+		children
+	})
+});
+//#endregion
+export { MenuComponent as default };
+
+//# sourceMappingURL=menu.js.map

package/dist/layout/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","names":[],"sources":["../../resources/js/layout/menu.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice/lattice/core/types\";\n\nconst MenuComponent: RendererComponent<\"menu\"> = ({ children, node }) => (\n  <nav data-lattice-component={node.id}>\n    <ul className=\"flex flex-col gap-1\">{children}</ul>\n  </nav>\n);\n\nexport default MenuComponent;\n"],"mappings":";;AAEA,IAAM,iBAA4C,EAAE,UAAU,WAC5D,oBAAC,OAAD;CAAK,0BAAwB,KAAK;WAChC,oBAAC,MAAD;EAAI,WAAU;EAAuB;CAAa,CAAA;AAC/C,CAAA"}

package/dist/layout/outlet.d.ts

@@ -0,0 +1,6 @@
+import { RendererComponent } from '../core/types';
+/**
+ * Renders the active page at the position the layout schema places it.
+ */
+declare const OutletComponent: RendererComponent<"outlet">;
+export default OutletComponent;

package/dist/layout/outlet.js

@@ -0,0 +1,14 @@
+import { OutletContext } from "./context.js";
+import { useContext } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region resources/js/layout/outlet.tsx
+/**
+* Renders the active page at the position the layout schema places it.
+*/
+var OutletComponent = () => {
+	return /* @__PURE__ */ jsx(Fragment, { children: useContext(OutletContext) });
+};
+//#endregion
+export { OutletComponent as default };
+
+//# sourceMappingURL=outlet.js.map

package/dist/layout/outlet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlet.js","names":[],"sources":["../../resources/js/layout/outlet.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { OutletContext } from \"./context\";\n\n/**\n * Renders the active page at the position the layout schema places it.\n */\nconst OutletComponent: RendererComponent<\"outlet\"> = () => {\n  return <>{useContext(OutletContext)}</>;\n};\n\nexport default OutletComponent;\n"],"mappings":";;;;;;;AAOA,IAAM,wBAAqD;CACzD,OAAO,oBAAA,UAAA,EAAA,UAAG,WAAW,aAAa,EAAI,CAAA;AACxC"}

package/dist/layout/schema-layout.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+/**
+ * Persistent Inertia layout that renders a server-composed layout schema and
+ * exposes the active page (`children`) to the Outlet via context. The same
+ * component instance is reused across navigations that share a layout, so
+ * shell state (open sidebar, scroll position) survives page visits.
+ */
+export default function SchemaLayout({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/layout/schema-layout.js

@@ -0,0 +1,30 @@
+import { Renderer } from "../core/renderer.js";
+import { OutletContext } from "./context.js";
+import { useRegistry } from "../provider.js";
+import { usePage } from "@inertiajs/react";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region resources/js/layout/schema-layout.tsx
+/**
+* Persistent Inertia layout that renders a server-composed layout schema and
+* exposes the active page (`children`) to the Outlet via context. The same
+* component instance is reused across navigations that share a layout, so
+* shell state (open sidebar, scroll position) survives page visits.
+*/
+function SchemaLayout({ children }) {
+	const lattice = usePage().props.lattice;
+	const registry = useRegistry();
+	const layout = lattice.layout;
+	if (!layout) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsx(OutletContext.Provider, {
+		value: children,
+		children: /* @__PURE__ */ jsx(Renderer, {
+			fallback: null,
+			nodes: layout.schema,
+			registry
+		})
+	});
+}
+//#endregion
+export { SchemaLayout as default };
+
+//# sourceMappingURL=schema-layout.js.map

package/dist/layout/schema-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema-layout.js","names":[],"sources":["../../resources/js/layout/schema-layout.tsx"],"sourcesContent":["import { usePage } from \"@inertiajs/react\";\nimport type { ReactNode } from \"react\";\nimport { Renderer } from \"@lattice/lattice/core/renderer\";\nimport type { PagePayload } from \"@lattice/lattice/core/types\";\nimport { useRegistry } from \"@lattice/lattice/provider\";\nimport { OutletContext } from \"./context\";\n\n/**\n * Persistent Inertia layout that renders a server-composed layout schema and\n * exposes the active page (`children`) to the Outlet via context. The same\n * component instance is reused across navigations that share a layout, so\n * shell state (open sidebar, scroll position) survives page visits.\n */\nexport default function SchemaLayout({ children }: { children: ReactNode }) {\n  const lattice = usePage().props.lattice as PagePayload;\n  const registry = useRegistry();\n  const layout = lattice.layout;\n\n  if (!layout) {\n    return <>{children}</>;\n  }\n\n  return (\n    <OutletContext.Provider value={children}>\n      <Renderer fallback={null} nodes={layout.schema} registry={registry} />\n    </OutletContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAaA,SAAwB,aAAa,EAAE,YAAqC;CAC1E,MAAM,UAAU,QAAQ,EAAE,MAAM;CAChC,MAAM,WAAW,YAAY;CAC7B,MAAM,SAAS,QAAQ;CAEvB,IAAI,CAAC,QACH,OAAO,oBAAA,UAAA,EAAG,SAAW,CAAA;CAGvB,OACE,oBAAC,cAAc,UAAf;EAAwB,OAAO;YAC7B,oBAAC,UAAD;GAAU,UAAU;GAAM,OAAO,OAAO;GAAkB;EAAW,CAAA;CAC/C,CAAA;AAE5B"}

package/dist/layout/sidebar.d.ts

@@ -0,0 +1,3 @@
+import { RendererComponent } from '../core/types';
+declare const SidebarComponent: RendererComponent<"sidebar">;
+export default SidebarComponent;

package/dist/layout/sidebar.js

@@ -0,0 +1,48 @@
+import { cn } from "../lib/utils.js";
+import { Icon } from "../icons/sprite.js";
+import { SidebarCollapsedContext } from "./context.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/layout/sidebar.tsx
+function readStored(key, remember) {
+	if (!remember || typeof window === "undefined") return false;
+	return window.localStorage.getItem(key) === "true";
+}
+var SidebarComponent = ({ children, node }) => {
+	const collapsible = node.props.collapsible;
+	const rememberState = node.props.rememberState;
+	const storageKey = `lattice:sidebar:${node.id ?? "default"}`;
+	const [collapsed, setCollapsed] = useState(() => readStored(storageKey, collapsible && rememberState));
+	function toggle() {
+		setCollapsed((value) => {
+			const next = !value;
+			if (rememberState && typeof window !== "undefined") window.localStorage.setItem(storageKey, String(next));
+			return next;
+		});
+	}
+	const isCollapsed = collapsible && collapsed;
+	return /* @__PURE__ */ jsx(SidebarCollapsedContext.Provider, {
+		value: isCollapsed,
+		children: /* @__PURE__ */ jsxs("aside", {
+			className: cn("flex shrink-0 flex-col gap-4 overflow-hidden border-r border-lt-border p-4 transition-[width]", isCollapsed ? "w-16" : "w-64"),
+			"data-lattice-component": node.id,
+			children: [collapsible ? /* @__PURE__ */ jsx("button", {
+				"aria-expanded": !isCollapsed,
+				"aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+				"data-test": "sidebar-toggle",
+				className: cn("inline-flex items-center rounded-md p-2 text-lt-fg transition-colors hover:bg-lt-muted", isCollapsed ? "self-center" : "self-end"),
+				onClick: toggle,
+				type: "button",
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "panel-left",
+					"aria-hidden": "true",
+					className: "size-lt-icon-md shrink-0"
+				})
+			}) : null, children]
+		})
+	});
+};
+//#endregion
+export { SidebarComponent as default };
+
+//# sourceMappingURL=sidebar.js.map

package/dist/layout/sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.js","names":[],"sources":["../../resources/js/layout/sidebar.tsx"],"sourcesContent":["import { Icon } from \"@lattice/lattice/icons\";\nimport { useState } from \"react\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\nimport { SidebarCollapsedContext } from \"./context\";\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\nconst SidebarComponent: RendererComponent<\"sidebar\"> = ({ children, node }) => {\n  const collapsible = node.props.collapsible;\n  const rememberState = node.props.rememberState;\n  const storageKey = `lattice:sidebar:${node.id ?? \"default\"}`;\n\n  const [collapsed, setCollapsed] = useState(() =>\n    readStored(storageKey, collapsible && rememberState),\n  );\n\n  function toggle(): void {\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  }\n\n  const isCollapsed = collapsible && collapsed;\n\n  return (\n    <SidebarCollapsedContext.Provider value={isCollapsed}>\n      <aside\n        className={cn(\n          \"flex shrink-0 flex-col gap-4 overflow-hidden border-r border-lt-border p-4 transition-[width]\",\n          isCollapsed ? \"w-16\" : \"w-64\",\n        )}\n        data-lattice-component={node.id}\n      >\n        {collapsible ? (\n          <button\n            aria-expanded={!isCollapsed}\n            aria-label={isCollapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n            data-test=\"sidebar-toggle\"\n            className={cn(\n              \"inline-flex items-center rounded-md p-2 text-lt-fg transition-colors hover:bg-lt-muted\",\n              isCollapsed ? \"self-center\" : \"self-end\",\n            )}\n            onClick={toggle}\n            type=\"button\"\n          >\n            <Icon name=\"panel-left\" aria-hidden=\"true\" className=\"size-lt-icon-md shrink-0\" />\n          </button>\n        ) : null}\n        {children}\n      </aside>\n    </SidebarCollapsedContext.Provider>\n  );\n};\n\nexport default SidebarComponent;\n"],"mappings":";;;;;;AAMA,SAAS,WAAW,KAAa,UAA4B;CAC3D,IAAI,CAAC,YAAY,OAAO,WAAW,aACjC,OAAO;CAGT,OAAO,OAAO,aAAa,QAAQ,GAAG,MAAM;AAC9C;AAEA,IAAM,oBAAkD,EAAE,UAAU,WAAW;CAC7E,MAAM,cAAc,KAAK,MAAM;CAC/B,MAAM,gBAAgB,KAAK,MAAM;CACjC,MAAM,aAAa,mBAAmB,KAAK,MAAM;CAEjD,MAAM,CAAC,WAAW,gBAAgB,eAChC,WAAW,YAAY,eAAe,aAAa,CACrD;CAEA,SAAS,SAAe;EACtB,cAAc,UAAU;GACtB,MAAM,OAAO,CAAC;GAEd,IAAI,iBAAiB,OAAO,WAAW,aACrC,OAAO,aAAa,QAAQ,YAAY,OAAO,IAAI,CAAC;GAGtD,OAAO;EACT,CAAC;CACH;CAEA,MAAM,cAAc,eAAe;CAEnC,OACE,oBAAC,wBAAwB,UAAzB;EAAkC,OAAO;YACvC,qBAAC,SAAD;GACE,WAAW,GACT,iGACA,cAAc,SAAS,MACzB;GACA,0BAAwB,KAAK;aAL/B,CAOG,cACC,oBAAC,UAAD;IACE,iBAAe,CAAC;IAChB,cAAY,cAAc,mBAAmB;IAC7C,aAAU;IACV,WAAW,GACT,0FACA,cAAc,gBAAgB,UAChC;IACA,SAAS;IACT,MAAK;cAEL,oBAAC,MAAD;KAAM,MAAK;KAAa,eAAY;KAAO,WAAU;IAA4B,CAAA;GAC3E,CAAA,IACN,MACH,QACI;;CACyB,CAAA;AAEtC"}

package/dist/lib/utils.d.ts

@@ -1,4 +1,2 @@
-import { InertiaLinkProps } from '@inertiajs/react';
 import { ClassValue } from 'clsx';
 export declare function cn(...inputs: ClassValue[]): string;
-export declare function toUrl(url: NonNullable<InertiaLinkProps["href"]>): string;

package/dist/lib/utils.js

@@ -4,10 +4,7 @@ import { twMerge } from "tailwind-merge";
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
-function toUrl(url) {
-	return typeof url === "string" ? url : url.url;
-}
 //#endregion
-export { cn, toUrl };
+export { cn };
 
 //# sourceMappingURL=utils.js.map

package/dist/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../resources/js/lib/utils.ts"],"sourcesContent":["import type { InertiaLinkProps } from \"@inertiajs/react\";\nimport { clsx } from \"clsx\";\nimport type { ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport function toUrl(url: NonNullable<InertiaLinkProps[\"href\"]>): string {\n  return typeof url === \"string\" ? url : url.url;\n}\n"],"mappings":";;;AAKA,SAAgB,GAAG,GAAG,QAAsB;CAC1C,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;AAEA,SAAgB,MAAM,KAAoD;CACxE,OAAO,OAAO,QAAQ,WAAW,MAAM,IAAI;AAC7C"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../resources/js/lib/utils.ts"],"sourcesContent":["import { clsx } from \"clsx\";\nimport type { ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";;;AAIA,SAAgB,GAAG,GAAG,QAAsB;CAC1C,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B"}