@lattice-php/lattice 0.1.0

package/dist/core/components/modal.js

@@ -0,0 +1,75 @@
+import { getStringProp } from "../props.js";
+import { Button } from "./button.js";
+import { LATTICE_EVENT } from "../../events/event-names.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+//#region resources/js/core/components/modal.tsx
+function matchesModal(event, modal) {
+	const target = event.detail?.modal;
+	return target === void 0 || target === modal;
+}
+var ModalComponent = ({ children, node }) => {
+	const title = getStringProp(node.props, "title", "Dialog");
+	const description = getStringProp(node.props, "description");
+	const closeLabel = getStringProp(node.props, "closeLabel", "Close");
+	const [isOpen, setIsOpen] = useState(node.props?.open === true);
+	const titleId = `${node.id ?? node.key ?? "lattice-modal"}-title`;
+	const descriptionId = `${node.id ?? node.key ?? "lattice-modal"}-description`;
+	useEffect(() => {
+		function open(event) {
+			if (node.id && matchesModal(event, node.id)) setIsOpen(true);
+		}
+		function close(event) {
+			if (!node.id || matchesModal(event, node.id)) setIsOpen(false);
+		}
+		window.addEventListener(LATTICE_EVENT.openModal, open);
+		window.addEventListener(LATTICE_EVENT.closeModal, close);
+		return () => {
+			window.removeEventListener(LATTICE_EVENT.openModal, open);
+			window.removeEventListener(LATTICE_EVENT.closeModal, close);
+		};
+	}, [node.id]);
+	if (!isOpen) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
+		children: /* @__PURE__ */ jsxs("div", {
+			"aria-describedby": description ? descriptionId : void 0,
+			"aria-labelledby": titleId,
+			"aria-modal": "true",
+			className: "max-h-[min(680px,calc(100vh-2rem))] w-full max-w-lg overflow-y-auto rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lg",
+			role: "dialog",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between gap-4",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "grid gap-2",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "text-lg font-semibold leading-none tracking-tight",
+						id: titleId,
+						children: title
+					}), description && /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-lt-muted-fg",
+						id: descriptionId,
+						children: description
+					})]
+				}), /* @__PURE__ */ jsx(Button, {
+					"aria-label": closeLabel,
+					onClick: () => setIsOpen(false),
+					size: "icon",
+					variant: "ghost",
+					children: /* @__PURE__ */ jsx(X, {
+						"aria-hidden": "true",
+						className: "size-4"
+					})
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "mt-6 space-y-6",
+				children
+			})]
+		})
+	});
+};
+//#endregion
+export { ModalComponent as default };
+
+//# sourceMappingURL=modal.js.map

package/dist/core/components/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","names":[],"sources":["../../../resources/js/core/components/modal.tsx"],"sourcesContent":["import { X } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { Button } from \"@lattice/lattice/core/components/button\";\nimport { getStringProp } from \"@lattice/lattice/core/props\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { LATTICE_EVENT } from \"@lattice/lattice/events/event-names\";\n\ntype ModalEvent = CustomEvent<{\n  modal?: string;\n}>;\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    modal: {\n      closeLabel?: string;\n      description?: string;\n      open?: boolean;\n      title?: string;\n    };\n  }\n}\n\nfunction matchesModal(event: Event, modal: string): boolean {\n  const target = (event as ModalEvent).detail?.modal;\n\n  return target === undefined || target === modal;\n}\n\nconst ModalComponent: RendererComponent<\"modal\"> = ({ children, node }) => {\n  const title = getStringProp(node.props, \"title\", \"Dialog\");\n  const description = getStringProp(node.props, \"description\");\n  const closeLabel = getStringProp(node.props, \"closeLabel\", \"Close\");\n  const [isOpen, setIsOpen] = useState(node.props?.open === true);\n  const titleId = `${node.id ?? node.key ?? \"lattice-modal\"}-title`;\n  const descriptionId = `${node.id ?? node.key ?? \"lattice-modal\"}-description`;\n\n  useEffect(() => {\n    function open(event: Event): void {\n      if (node.id && matchesModal(event, node.id)) {\n        setIsOpen(true);\n      }\n    }\n\n    function close(event: Event): void {\n      if (!node.id || matchesModal(event, node.id)) {\n        setIsOpen(false);\n      }\n    }\n\n    window.addEventListener(LATTICE_EVENT.openModal, open);\n    window.addEventListener(LATTICE_EVENT.closeModal, close);\n\n    return () => {\n      window.removeEventListener(LATTICE_EVENT.openModal, open);\n      window.removeEventListener(LATTICE_EVENT.closeModal, close);\n    };\n  }, [node.id]);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4\">\n      <div\n        aria-describedby={description ? descriptionId : undefined}\n        aria-labelledby={titleId}\n        aria-modal=\"true\"\n        className=\"max-h-[min(680px,calc(100vh-2rem))] w-full max-w-lg overflow-y-auto rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lg\"\n        role=\"dialog\"\n      >\n        <div className=\"flex items-start justify-between gap-4\">\n          <div className=\"grid gap-2\">\n            <h2 className=\"text-lg font-semibold leading-none tracking-tight\" id={titleId}>\n              {title}\n            </h2>\n\n            {description && (\n              <p className=\"text-sm text-lt-muted-fg\" id={descriptionId}>\n                {description}\n              </p>\n            )}\n          </div>\n\n          <Button\n            aria-label={closeLabel}\n            onClick={() => setIsOpen(false)}\n            size=\"icon\"\n            variant=\"ghost\"\n          >\n            <X aria-hidden=\"true\" className=\"size-4\" />\n          </Button>\n        </div>\n\n        <div className=\"mt-6 space-y-6\">{children}</div>\n      </div>\n    </div>\n  );\n};\n\nexport default ModalComponent;\n"],"mappings":";;;;;;;AAsBA,SAAS,aAAa,OAAc,OAAwB;CAC1D,MAAM,SAAU,MAAqB,QAAQ;CAE7C,OAAO,WAAW,KAAA,KAAa,WAAW;AAC5C;AAEA,IAAM,kBAA8C,EAAE,UAAU,WAAW;CACzE,MAAM,QAAQ,cAAc,KAAK,OAAO,SAAS,QAAQ;CACzD,MAAM,cAAc,cAAc,KAAK,OAAO,aAAa;CAC3D,MAAM,aAAa,cAAc,KAAK,OAAO,cAAc,OAAO;CAClE,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK,OAAO,SAAS,IAAI;CAC9D,MAAM,UAAU,GAAG,KAAK,MAAM,KAAK,OAAO,gBAAgB;CAC1D,MAAM,gBAAgB,GAAG,KAAK,MAAM,KAAK,OAAO,gBAAgB;CAEhE,gBAAgB;EACd,SAAS,KAAK,OAAoB;GAChC,IAAI,KAAK,MAAM,aAAa,OAAO,KAAK,EAAE,GACxC,UAAU,IAAI;EAElB;EAEA,SAAS,MAAM,OAAoB;GACjC,IAAI,CAAC,KAAK,MAAM,aAAa,OAAO,KAAK,EAAE,GACzC,UAAU,KAAK;EAEnB;EAEA,OAAO,iBAAiB,cAAc,WAAW,IAAI;EACrD,OAAO,iBAAiB,cAAc,YAAY,KAAK;EAEvD,aAAa;GACX,OAAO,oBAAoB,cAAc,WAAW,IAAI;GACxD,OAAO,oBAAoB,cAAc,YAAY,KAAK;EAC5D;CACF,GAAG,CAAC,KAAK,EAAE,CAAC;CAEZ,IAAI,CAAC,QACH,OAAO;CAGT,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,OAAD;GACE,oBAAkB,cAAc,gBAAgB,KAAA;GAChD,mBAAiB;GACjB,cAAW;GACX,WAAU;GACV,MAAK;aALP,CAOE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,MAAD;MAAI,WAAU;MAAoD,IAAI;gBACnE;KACC,CAAA,GAEH,eACC,oBAAC,KAAD;MAAG,WAAU;MAA2B,IAAI;gBACzC;KACA,CAAA,CAEF;QAEL,oBAAC,QAAD;KACE,cAAY;KACZ,eAAe,UAAU,KAAK;KAC9B,MAAK;KACL,SAAQ;eAER,oBAAC,GAAD;MAAG,eAAY;MAAO,WAAU;KAAU,CAAA;IACpC,CAAA,CACL;OAEL,oBAAC,OAAD;IAAK,WAAU;IAAkB;GAAc,CAAA,CAC5C;;CACF,CAAA;AAET"}

package/dist/core/components/segmented-control.d.ts

@@ -0,0 +1,16 @@
+import { Option } from '../../../../core/props';
+import { RendererComponent } from '../../../../core/types';
+declare module '../../../../core/types' {
+    interface ComponentProps {
+        "segmented-control": {
+            emits?: string;
+            label?: string;
+            name?: string;
+            options?: Option[];
+            tabIndex?: number;
+            value?: string;
+        };
+    }
+}
+declare const SegmentedControlComponent: RendererComponent<"segmented-control">;
+export default SegmentedControlComponent;

package/dist/core/components/segmented-control.js

@@ -0,0 +1,30 @@
+import { getOptionalNumberProp, getOptions, getStringProp } from "../props.js";
+import { SegmentedPills } from "./segmented-pills.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/core/components/segmented-control.tsx
+var SegmentedControlComponent = ({ node }) => {
+	const options = getOptions(node.props);
+	const name = getStringProp(node.props, "name");
+	const emits = getStringProp(node.props, "emits");
+	const [value, setValue] = useState(getStringProp(node.props, "value") || options[0]?.value || "");
+	if (options.length === 0) return null;
+	function select(next) {
+		setValue(next);
+		if (emits) window.dispatchEvent(new CustomEvent(emits, { detail: {
+			name,
+			value: next
+		} }));
+	}
+	return /* @__PURE__ */ jsx(SegmentedPills, {
+		ariaLabel: getStringProp(node.props, "label"),
+		onSelect: select,
+		options,
+		tabIndex: getOptionalNumberProp(node.props, "tabIndex"),
+		value
+	});
+};
+//#endregion
+export { SegmentedControlComponent as default };
+
+//# sourceMappingURL=segmented-control.js.map

package/dist/core/components/segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.js","names":[],"sources":["../../../resources/js/core/components/segmented-control.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {\n  type Option,\n  getOptionalNumberProp,\n  getOptions,\n  getStringProp,\n} from \"@lattice/lattice/core/props\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { SegmentedPills } from \"./segmented-pills\";\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    \"segmented-control\": {\n      emits?: string;\n      label?: string;\n      name?: string;\n      options?: Option[];\n      tabIndex?: number;\n      value?: string;\n    };\n  }\n}\n\nconst SegmentedControlComponent: RendererComponent<\"segmented-control\"> = ({ node }) => {\n  const options = getOptions(node.props);\n  const name = getStringProp(node.props, \"name\");\n  const emits = getStringProp(node.props, \"emits\");\n  const [value, setValue] = useState(getStringProp(node.props, \"value\") || options[0]?.value || \"\");\n\n  if (options.length === 0) {\n    return null;\n  }\n\n  function select(next: string): void {\n    setValue(next);\n\n    if (emits) {\n      window.dispatchEvent(new CustomEvent(emits, { detail: { name, value: next } }));\n    }\n  }\n\n  return (\n    <SegmentedPills\n      ariaLabel={getStringProp(node.props, \"label\")}\n      onSelect={select}\n      options={options}\n      tabIndex={getOptionalNumberProp(node.props, \"tabIndex\")}\n      value={value}\n    />\n  );\n};\n\nexport default SegmentedControlComponent;\n"],"mappings":";;;;;AAuBA,IAAM,6BAAqE,EAAE,WAAW;CACtF,MAAM,UAAU,WAAW,KAAK,KAAK;CACrC,MAAM,OAAO,cAAc,KAAK,OAAO,MAAM;CAC7C,MAAM,QAAQ,cAAc,KAAK,OAAO,OAAO;CAC/C,MAAM,CAAC,OAAO,YAAY,SAAS,cAAc,KAAK,OAAO,OAAO,KAAK,QAAQ,IAAI,SAAS,EAAE;CAEhG,IAAI,QAAQ,WAAW,GACrB,OAAO;CAGT,SAAS,OAAO,MAAoB;EAClC,SAAS,IAAI;EAEb,IAAI,OACF,OAAO,cAAc,IAAI,YAAY,OAAO,EAAE,QAAQ;GAAE;GAAM,OAAO;EAAK,EAAE,CAAC,CAAC;CAElF;CAEA,OACE,oBAAC,gBAAD;EACE,WAAW,cAAc,KAAK,OAAO,OAAO;EAC5C,UAAU;EACD;EACT,UAAU,sBAAsB,KAAK,OAAO,UAAU;EAC/C;CACR,CAAA;AAEL"}

package/dist/core/components/segmented-pills.d.ts

@@ -0,0 +1,13 @@
+import { Option } from '../../../../core/props';
+/**
+ * Presentational segmented pill group. Used by the form choice field (bound to a
+ * form value) and the core segmented control (standalone, emits an event).
+ */
+export declare function SegmentedPills({ ariaLabel, disabled, onSelect, options, tabIndex, value, }: {
+    ariaLabel?: string;
+    disabled?: boolean;
+    onSelect: (value: string) => void;
+    options: Option[];
+    tabIndex?: number;
+    value: string;
+}): import("react").JSX.Element;

package/dist/core/components/segmented-pills.js

@@ -0,0 +1,31 @@
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/core/components/segmented-pills.tsx
+/**
+* Presentational segmented pill group. Used by the form choice field (bound to a
+* form value) and the core segmented control (standalone, emits an event).
+*/
+function SegmentedPills({ ariaLabel, disabled = false, onSelect, options, tabIndex, value }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": ariaLabel,
+		className: "inline-flex w-fit max-w-full gap-1 overflow-x-auto rounded-lt bg-lt-muted p-1",
+		role: "radiogroup",
+		children: options.map((option) => {
+			const isSelected = value === option.value;
+			return /* @__PURE__ */ jsx("button", {
+				"aria-checked": isSelected,
+				className: cn("whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors", isSelected ? "bg-lt-bg text-lt-fg shadow-xs" : "text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg", disabled && "cursor-not-allowed opacity-60"),
+				disabled,
+				onClick: () => onSelect(option.value),
+				role: "radio",
+				tabIndex,
+				type: "button",
+				children: option.label
+			}, option.value);
+		})
+	});
+}
+//#endregion
+export { SegmentedPills };
+
+//# sourceMappingURL=segmented-pills.js.map

package/dist/core/components/segmented-pills.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-pills.js","names":[],"sources":["../../../resources/js/core/components/segmented-pills.tsx"],"sourcesContent":["import type { Option } from \"@lattice/lattice/core/props\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\n\n/**\n * Presentational segmented pill group. Used by the form choice field (bound to a\n * form value) and the core segmented control (standalone, emits an event).\n */\nexport function SegmentedPills({\n  ariaLabel,\n  disabled = false,\n  onSelect,\n  options,\n  tabIndex,\n  value,\n}: {\n  ariaLabel?: string;\n  disabled?: boolean;\n  onSelect: (value: string) => void;\n  options: Option[];\n  tabIndex?: number;\n  value: string;\n}) {\n  return (\n    <div\n      aria-label={ariaLabel}\n      className=\"inline-flex w-fit max-w-full gap-1 overflow-x-auto rounded-lt bg-lt-muted p-1\"\n      role=\"radiogroup\"\n    >\n      {options.map((option) => {\n        const isSelected = value === option.value;\n\n        return (\n          <button\n            aria-checked={isSelected}\n            className={cn(\n              \"whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors\",\n              isSelected\n                ? \"bg-lt-bg text-lt-fg shadow-xs\"\n                : \"text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg\",\n              disabled && \"cursor-not-allowed opacity-60\",\n            )}\n            disabled={disabled}\n            key={option.value}\n            onClick={() => onSelect(option.value)}\n            role=\"radio\"\n            tabIndex={tabIndex}\n            type=\"button\"\n          >\n            {option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAOA,SAAgB,eAAe,EAC7B,WACA,WAAW,OACX,UACA,SACA,UACA,SAQC;CACD,OACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAU;EACV,MAAK;YAEJ,QAAQ,KAAK,WAAW;GACvB,MAAM,aAAa,UAAU,OAAO;GAEpC,OACE,oBAAC,UAAD;IACE,gBAAc;IACd,WAAW,GACT,qFACA,aACI,kCACA,uDACJ,YAAY,+BACd;IACU;IAEV,eAAe,SAAS,OAAO,KAAK;IACpC,MAAK;IACK;IACV,MAAK;cAEJ,OAAO;GACF,GAPD,OAAO,KAON;EAEZ,CAAC;CACE,CAAA;AAET"}

package/dist/core/components/spinner.d.ts

@@ -0,0 +1,2 @@
+declare function Spinner({ className, ...props }: React.ComponentProps<"svg">): import("react").JSX.Element;
+export { Spinner };

package/dist/core/components/spinner.js

@@ -0,0 +1,16 @@
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Loader2Icon } from "lucide-react";
+//#region resources/js/core/components/spinner.tsx
+function Spinner({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Loader2Icon, {
+		role: "status",
+		"aria-label": "Loading",
+		className: cn("size-4 animate-spin", className),
+		...props
+	});
+}
+//#endregion
+export { Spinner };
+
+//# sourceMappingURL=spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","names":[],"sources":["../../../resources/js/core/components/spinner.tsx"],"sourcesContent":["import { Loader2Icon } from \"lucide-react\";\n\nimport { cn } from \"@lattice/lattice/lib/utils\";\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <Loader2Icon\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Spinner };\n"],"mappings":";;;;AAIA,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAsC;CACrE,OACE,oBAAC,aAAD;EACE,MAAK;EACL,cAAW;EACX,WAAW,GAAG,uBAAuB,SAAS;EAC9C,GAAI;CACL,CAAA;AAEL"}

package/dist/core/components/stack.d.ts

@@ -0,0 +1,13 @@
+import { RendererComponent } from '../../../../core/types';
+declare module '../../../../core/types' {
+    interface ComponentProps {
+        stack: {
+            align?: string;
+            direction?: string;
+            gap?: string;
+            width?: string;
+        };
+    }
+}
+declare const StackComponent: RendererComponent<"stack">;
+export default StackComponent;

package/dist/core/components/stack.js

@@ -0,0 +1,47 @@
+import { cn } from "../../lib/utils.js";
+import { getStringProp } from "../props.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/core/components/stack.tsx
+var gridAlignments = {
+	center: "justify-items-center text-center",
+	start: "justify-items-start text-left",
+	stretch: "justify-items-stretch"
+};
+var flexAlignments = {
+	center: "items-center justify-center text-center",
+	start: "items-center justify-start text-left",
+	stretch: "items-stretch justify-stretch"
+};
+var stackGaps = {
+	xs: "gap-1",
+	lg: "gap-6",
+	md: "gap-4",
+	sm: "gap-2",
+	xl: "gap-8"
+};
+var stackWidths = {
+	full: "w-full",
+	lg: "mx-auto w-full max-w-4xl",
+	md: "mx-auto w-full max-w-2xl",
+	sm: "mx-auto w-full max-w-md"
+};
+var StackComponent = ({ children, node }) => {
+	const align = getStringProp(node.props, "align", "stretch");
+	const direction = getStringProp(node.props, "direction", "column");
+	const gap = getStringProp(node.props, "gap", "md");
+	const width = getStringProp(node.props, "width", "full");
+	if (direction === "row") return /* @__PURE__ */ jsx("div", {
+		"data-lattice-component": node.id,
+		className: cn("flex flex-wrap", flexAlignments[align] ?? flexAlignments.stretch, stackGaps[gap] ?? stackGaps.md, stackWidths[width] ?? stackWidths.full),
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-lattice-component": node.id,
+		className: cn("grid", gridAlignments[align] ?? gridAlignments.stretch, stackGaps[gap] ?? stackGaps.md, stackWidths[width] ?? stackWidths.full),
+		children
+	});
+};
+//#endregion
+export { StackComponent as default };
+
+//# sourceMappingURL=stack.js.map

package/dist/core/components/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","names":[],"sources":["../../../resources/js/core/components/stack.tsx"],"sourcesContent":["import { getStringProp } from \"@lattice/lattice/core/props\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    stack: {\n      align?: string;\n      direction?: string;\n      gap?: string;\n      width?: string;\n    };\n  }\n}\n\nconst gridAlignments: Record<string, string> = {\n  center: \"justify-items-center text-center\",\n  start: \"justify-items-start text-left\",\n  stretch: \"justify-items-stretch\",\n};\n\nconst flexAlignments: Record<string, string> = {\n  center: \"items-center justify-center text-center\",\n  start: \"items-center justify-start text-left\",\n  stretch: \"items-stretch justify-stretch\",\n};\n\nconst stackGaps: Record<string, string> = {\n  xs: \"gap-1\",\n  lg: \"gap-6\",\n  md: \"gap-4\",\n  sm: \"gap-2\",\n  xl: \"gap-8\",\n};\n\nconst stackWidths: Record<string, string> = {\n  full: \"w-full\",\n  lg: \"mx-auto w-full max-w-4xl\",\n  md: \"mx-auto w-full max-w-2xl\",\n  sm: \"mx-auto w-full max-w-md\",\n};\n\nconst StackComponent: RendererComponent<\"stack\"> = ({ children, node }) => {\n  const align = getStringProp(node.props, \"align\", \"stretch\");\n  const direction = getStringProp(node.props, \"direction\", \"column\");\n  const gap = getStringProp(node.props, \"gap\", \"md\");\n  const width = getStringProp(node.props, \"width\", \"full\");\n\n  if (direction === \"row\") {\n    return (\n      <div\n        data-lattice-component={node.id}\n        className={cn(\n          \"flex flex-wrap\",\n          flexAlignments[align] ?? flexAlignments.stretch,\n          stackGaps[gap] ?? stackGaps.md,\n          stackWidths[width] ?? stackWidths.full,\n        )}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-lattice-component={node.id}\n      className={cn(\n        \"grid\",\n        gridAlignments[align] ?? gridAlignments.stretch,\n        stackGaps[gap] ?? stackGaps.md,\n        stackWidths[width] ?? stackWidths.full,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default StackComponent;\n"],"mappings":";;;;AAeA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,OAAO;CACP,SAAS;AACX;AAEA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,OAAO;CACP,SAAS;AACX;AAEA,IAAM,YAAoC;CACxC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,cAAsC;CAC1C,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,kBAA8C,EAAE,UAAU,WAAW;CACzE,MAAM,QAAQ,cAAc,KAAK,OAAO,SAAS,SAAS;CAC1D,MAAM,YAAY,cAAc,KAAK,OAAO,aAAa,QAAQ;CACjE,MAAM,MAAM,cAAc,KAAK,OAAO,OAAO,IAAI;CACjD,MAAM,QAAQ,cAAc,KAAK,OAAO,SAAS,MAAM;CAEvD,IAAI,cAAc,OAChB,OACE,oBAAC,OAAD;EACE,0BAAwB,KAAK;EAC7B,WAAW,GACT,kBACA,eAAe,UAAU,eAAe,SACxC,UAAU,QAAQ,UAAU,IAC5B,YAAY,UAAU,YAAY,IACpC;EAEC;CACE,CAAA;CAIT,OACE,oBAAC,OAAD;EACE,0BAAwB,KAAK;EAC7B,WAAW,GACT,QACA,eAAe,UAAU,eAAe,SACxC,UAAU,QAAQ,UAAU,IAC5B,YAAY,UAAU,YAAY,IACpC;EAEC;CACE,CAAA;AAET"}

package/dist/core/components/tabs.d.ts

@@ -0,0 +1,22 @@
+import { RendererComponent } from '../../../../core/types';
+declare module '../../../../core/types' {
+    interface ComponentProps {
+        tab: {
+            confirm?: {
+                redirectUrl?: string;
+                required?: boolean;
+                timeout?: number;
+            };
+            label?: string;
+            value?: string;
+        };
+        tabs: {
+            activeValue?: string;
+            defaultValue?: string;
+            queryKey?: string;
+        };
+    }
+}
+export declare const TabsComponent: RendererComponent<"tabs">;
+declare const TabComponent: RendererComponent<"tab">;
+export default TabComponent;

package/dist/core/components/tabs.js

@@ -0,0 +1,118 @@
+import { cn } from "../../lib/utils.js";
+import { getStringProp } from "../props.js";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { router } from "@inertiajs/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/core/components/tabs.tsx
+var TabsContext = createContext(null);
+function useTabsContext() {
+	const context = useContext(TabsContext);
+	if (!context) return {
+		activeValue: "",
+		setActiveValue: () => {}
+	};
+	return context;
+}
+function getTabs(node) {
+	return (node.children ?? []).filter((child) => child.type === "tab").map((child) => ({
+		confirm: getConfirmationProp(child.props),
+		label: getStringProp(child.props, "label"),
+		value: getStringProp(child.props, "value")
+	})).filter((tab) => tab.value !== "");
+}
+function getConfirmationProp(props) {
+	const confirm = props?.confirm;
+	if (!confirm || typeof confirm !== "object" || Array.isArray(confirm)) return;
+	return { required: confirm.required === true };
+}
+function queryValue(queryKey, tabs) {
+	if (typeof window === "undefined") return null;
+	const value = new URLSearchParams(window.location.search).get(queryKey);
+	if (!value || !tabs.some((tab) => tab.value === value)) return null;
+	return value;
+}
+function replaceQueryValue(queryKey, value) {
+	if (typeof window === "undefined") return;
+	const url = new URL(window.location.href);
+	url.searchParams.set(queryKey, value);
+	window.history.replaceState(window.history.state, "", `${url.pathname}${url.search}${url.hash}`);
+}
+function queryUrl(queryKey, value) {
+	if (typeof window === "undefined") return "";
+	const url = new URL(window.location.href);
+	url.searchParams.set(queryKey, value);
+	return `${url.pathname}${url.search}${url.hash}`;
+}
+var TabsComponent = ({ children, node }) => {
+	const tabs = useMemo(() => getTabs(node), [node]);
+	const firstValue = tabs[0]?.value ?? "";
+	const queryKey = getStringProp(node.props, "queryKey", "tabs");
+	const serverActiveValue = getStringProp(node.props, "activeValue", "");
+	const defaultValue = getStringProp(node.props, "defaultValue", firstValue);
+	const [activeValue, setActiveTabValue] = useState(() => serverActiveValue || (queryValue(queryKey, tabs) ?? defaultValue) || firstValue);
+	function selectTab(tab) {
+		if (tab.confirm?.required) {
+			router.visit(queryUrl(queryKey, tab.value), { preserveScroll: true });
+			return;
+		}
+		setActiveTabValue(tab.value);
+		replaceQueryValue(queryKey, tab.value);
+	}
+	function selectTabValue(value) {
+		const tab = tabs.find((item) => item.value === value);
+		if (tab) selectTab(tab);
+	}
+	return /* @__PURE__ */ jsx(TabsContext.Provider, {
+		value: {
+			activeValue,
+			setActiveValue: selectTabValue
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "grid gap-6",
+			"data-lattice-tabs": node.key ?? node.id,
+			children: [/* @__PURE__ */ jsx("div", {
+				"aria-label": getStringProp(node.props, "label", "Tabs"),
+				className: "inline-flex w-fit max-w-full gap-1 overflow-x-auto rounded-lt bg-lt-muted p-1",
+				role: "tablist",
+				children: tabs.map((tab) => {
+					const isActive = activeValue === tab.value;
+					return /* @__PURE__ */ jsx("button", {
+						"aria-controls": `${tab.value}-panel`,
+						"aria-selected": isActive,
+						className: cn("whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors", isActive ? "bg-lt-bg text-lt-fg shadow-xs" : "text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg"),
+						id: `${tab.value}-tab`,
+						onClick: () => selectTab(tab),
+						role: "tab",
+						type: "button",
+						children: tab.label
+					}, tab.value);
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "min-w-0",
+				children
+			})]
+		})
+	});
+};
+var TabComponent = ({ children, node }) => {
+	const { activeValue } = useTabsContext();
+	const value = getStringProp(node.props, "value");
+	const isActive = activeValue === value;
+	const [hasOpened, setHasOpened] = useState(isActive);
+	useEffect(() => {
+		if (isActive) setHasOpened(true);
+	}, [isActive]);
+	return /* @__PURE__ */ jsx("section", {
+		"aria-labelledby": `${value}-tab`,
+		className: cn("space-y-8", !isActive && "hidden"),
+		hidden: !isActive,
+		id: `${value}-panel`,
+		role: "tabpanel",
+		tabIndex: 0,
+		children: hasOpened ? children : null
+	});
+};
+//#endregion
+export { TabsComponent, TabComponent as default };
+
+//# sourceMappingURL=tabs.js.map

package/dist/core/components/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":[],"sources":["../../../resources/js/core/components/tabs.tsx"],"sourcesContent":["import { router } from \"@inertiajs/react\";\nimport { createContext, useContext, useEffect, useMemo, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { getStringProp } from \"@lattice/lattice/core/props\";\nimport type { Node, RendererComponent } from \"@lattice/lattice/core/types\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\n\ntype TabsContextValue = {\n  activeValue: string;\n  setActiveValue: (value: string) => void;\n};\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nfunction useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    return {\n      activeValue: \"\",\n      setActiveValue: () => {},\n    };\n  }\n\n  return context;\n}\n\ntype TabItem = {\n  confirm?: {\n    required?: boolean;\n  };\n  label: string;\n  value: string;\n};\n\nfunction getTabs(node: Node): TabItem[] {\n  return (node.children ?? [])\n    .filter((child) => child.type === \"tab\")\n    .map((child) => ({\n      confirm: getConfirmationProp(child.props),\n      label: getStringProp(child.props, \"label\"),\n      value: getStringProp(child.props, \"value\"),\n    }))\n    .filter((tab) => tab.value !== \"\");\n}\n\nfunction getConfirmationProp(props: Node[\"props\"]): TabItem[\"confirm\"] {\n  const confirm = props?.confirm;\n\n  if (!confirm || typeof confirm !== \"object\" || Array.isArray(confirm)) {\n    return undefined;\n  }\n\n  const confirmation = confirm as Record<string, unknown>;\n\n  return {\n    required: confirmation.required === true,\n  };\n}\n\nfunction queryValue(queryKey: string, tabs: Array<{ value: string }>): string | null {\n  if (typeof window === \"undefined\") {\n    return null;\n  }\n\n  const value = new URLSearchParams(window.location.search).get(queryKey);\n\n  if (!value || !tabs.some((tab) => tab.value === value)) {\n    return null;\n  }\n\n  return value;\n}\n\nfunction replaceQueryValue(queryKey: string, value: string): void {\n  if (typeof window === \"undefined\") {\n    return;\n  }\n\n  const url = new URL(window.location.href);\n  url.searchParams.set(queryKey, value);\n  window.history.replaceState(window.history.state, \"\", `${url.pathname}${url.search}${url.hash}`);\n}\n\nfunction queryUrl(queryKey: string, value: string): string {\n  if (typeof window === \"undefined\") {\n    return \"\";\n  }\n\n  const url = new URL(window.location.href);\n  url.searchParams.set(queryKey, value);\n\n  return `${url.pathname}${url.search}${url.hash}`;\n}\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    tab: {\n      confirm?: {\n        redirectUrl?: string;\n        required?: boolean;\n        timeout?: number;\n      };\n      label?: string;\n      value?: string;\n    };\n    tabs: {\n      activeValue?: string;\n      defaultValue?: string;\n      queryKey?: string;\n    };\n  }\n}\n\nexport const TabsComponent: RendererComponent<\"tabs\"> = ({ children, node }) => {\n  const tabs = useMemo(() => getTabs(node), [node]);\n  const firstValue = tabs[0]?.value ?? \"\";\n  const queryKey = getStringProp(node.props, \"queryKey\", \"tabs\");\n  const serverActiveValue = getStringProp(node.props, \"activeValue\", \"\");\n  const defaultValue = getStringProp(node.props, \"defaultValue\", firstValue);\n  const [activeValue, setActiveTabValue] = useState(\n    () => serverActiveValue || (queryValue(queryKey, tabs) ?? defaultValue) || firstValue,\n  );\n\n  function selectTab(tab: TabItem): void {\n    if (tab.confirm?.required) {\n      router.visit(queryUrl(queryKey, tab.value), {\n        preserveScroll: true,\n      });\n\n      return;\n    }\n\n    setActiveTabValue(tab.value);\n    replaceQueryValue(queryKey, tab.value);\n  }\n\n  function selectTabValue(value: string): void {\n    const tab = tabs.find((item) => item.value === value);\n\n    if (tab) {\n      selectTab(tab);\n    }\n  }\n\n  return (\n    <TabsContext.Provider value={{ activeValue, setActiveValue: selectTabValue }}>\n      <div className=\"grid gap-6\" data-lattice-tabs={node.key ?? node.id}>\n        <div\n          aria-label={getStringProp(node.props, \"label\", \"Tabs\")}\n          className=\"inline-flex w-fit max-w-full gap-1 overflow-x-auto rounded-lt bg-lt-muted p-1\"\n          role=\"tablist\"\n        >\n          {tabs.map((tab) => {\n            const isActive = activeValue === tab.value;\n\n            return (\n              <button\n                aria-controls={`${tab.value}-panel`}\n                aria-selected={isActive}\n                className={cn(\n                  \"whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors\",\n                  isActive\n                    ? \"bg-lt-bg text-lt-fg shadow-xs\"\n                    : \"text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg\",\n                )}\n                id={`${tab.value}-tab`}\n                key={tab.value}\n                onClick={() => selectTab(tab)}\n                role=\"tab\"\n                type=\"button\"\n              >\n                {tab.label}\n              </button>\n            );\n          })}\n        </div>\n\n        <div className=\"min-w-0\">{children}</div>\n      </div>\n    </TabsContext.Provider>\n  );\n};\n\nconst TabComponent: RendererComponent<\"tab\"> = ({ children, node }) => {\n  const { activeValue } = useTabsContext();\n  const value = getStringProp(node.props, \"value\");\n  const isActive = activeValue === value;\n  const [hasOpened, setHasOpened] = useState(isActive);\n\n  useEffect(() => {\n    if (isActive) {\n      setHasOpened(true);\n    }\n  }, [isActive]);\n\n  return (\n    <section\n      aria-labelledby={`${value}-tab`}\n      className={cn(\"space-y-8\", !isActive && \"hidden\")}\n      hidden={!isActive}\n      id={`${value}-panel`}\n      role=\"tabpanel\"\n      tabIndex={0}\n    >\n      {hasOpened ? (children as ReactNode) : null}\n    </section>\n  );\n};\n\nexport default TabComponent;\n"],"mappings":"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"}

package/dist/core/components/text.d.ts

@@ -0,0 +1,11 @@
+import { RendererComponent } from '../../../../core/types';
+declare module '../../../../core/types' {
+    interface ComponentProps {
+        text: {
+            align?: string;
+            text?: string;
+        };
+    }
+}
+declare const TextComponent: RendererComponent<"text">;
+export default TextComponent;

package/dist/core/components/text.js

@@ -0,0 +1,18 @@
+import { cn } from "../../lib/utils.js";
+import { getStringProp } from "../props.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/core/components/text.tsx
+var textAlignments = {
+	center: "text-center",
+	left: "text-left"
+};
+var TextComponent = ({ node }) => {
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("max-w-2xl text-base leading-7 text-lt-muted-fg", textAlignments[getStringProp(node.props, "align", "left")] ?? textAlignments.left),
+		children: getStringProp(node.props, "text")
+	});
+};
+//#endregion
+export { TextComponent as default };
+
+//# sourceMappingURL=text.js.map

package/dist/core/components/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","names":[],"sources":["../../../resources/js/core/components/text.tsx"],"sourcesContent":["import { getStringProp } from \"@lattice/lattice/core/props\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    text: {\n      align?: string;\n      text?: string;\n    };\n  }\n}\n\nconst textAlignments: Record<string, string> = {\n  center: \"text-center\",\n  left: \"text-left\",\n};\n\nconst TextComponent: RendererComponent<\"text\"> = ({ node }) => {\n  const align = getStringProp(node.props, \"align\", \"left\");\n\n  return (\n    <p\n      className={cn(\n        \"max-w-2xl text-base leading-7 text-lt-muted-fg\",\n        textAlignments[align] ?? textAlignments.left,\n      )}\n    >\n      {getStringProp(node.props, \"text\")}\n    </p>\n  );\n};\n\nexport default TextComponent;\n"],"mappings":";;;;AAaA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,MAAM;AACR;AAEA,IAAM,iBAA4C,EAAE,WAAW;CAG7D,OACE,oBAAC,KAAD;EACE,WAAW,GACT,kDACA,eANQ,cAAc,KAAK,OAAO,SAAS,MAM5B,MAAU,eAAe,IAC1C;YAEC,cAAc,KAAK,OAAO,MAAM;CAChC,CAAA;AAEP"}

package/dist/core/props.d.ts

@@ -0,0 +1,14 @@
+import { NodeProps } from './types';
+export type Option = {
+    label: string;
+    value: string;
+};
+/**
+ * Read and validate an `options` prop, keeping only well-formed `{ label, value }`
+ * entries. Shared by the choice/select form fields and the segmented control.
+ */
+export declare function getOptions(props: NodeProps | undefined): Option[];
+export declare function getStringProp(props: NodeProps | undefined, name: string, fallback?: string): string;
+export declare function getNumberProp(props: NodeProps | undefined, name: string, fallback: number): number;
+export declare function getOptionalNumberProp(props: NodeProps | undefined, name: string): number | undefined;
+export declare function getBooleanProp(props: NodeProps | undefined, name: string, fallback?: boolean): boolean;

package/dist/core/props.js

@@ -0,0 +1,30 @@
+//#region resources/js/core/props.ts
+/**
+* Read and validate an `options` prop, keeping only well-formed `{ label, value }`
+* entries. Shared by the choice/select form fields and the segmented control.
+*/
+function getOptions(props) {
+	const value = props?.options;
+	if (!Array.isArray(value)) return [];
+	return value.filter((option) => typeof option === "object" && option !== null && typeof option.label === "string" && typeof option.value === "string");
+}
+function getStringProp(props, name, fallback = "") {
+	const value = props?.[name];
+	return typeof value === "string" ? value : fallback;
+}
+function getNumberProp(props, name, fallback) {
+	const value = props?.[name];
+	return typeof value === "number" ? value : fallback;
+}
+function getOptionalNumberProp(props, name) {
+	const value = props?.[name];
+	return typeof value === "number" ? value : void 0;
+}
+function getBooleanProp(props, name, fallback = false) {
+	const value = props?.[name];
+	return typeof value === "boolean" ? value : fallback;
+}
+//#endregion
+export { getBooleanProp, getNumberProp, getOptionalNumberProp, getOptions, getStringProp };
+
+//# sourceMappingURL=props.js.map

package/dist/core/props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.js","names":[],"sources":["../../resources/js/core/props.ts"],"sourcesContent":["import type { NodeProps } from \"./types\";\n\nexport type Option = {\n  label: string;\n  value: string;\n};\n\n/**\n * Read and validate an `options` prop, keeping only well-formed `{ label, value }`\n * entries. Shared by the choice/select form fields and the segmented control.\n */\nexport function getOptions(props: NodeProps | undefined): Option[] {\n  const value = props?.options;\n\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.filter(\n    (option): option is Option =>\n      typeof option === \"object\" &&\n      option !== null &&\n      typeof option.label === \"string\" &&\n      typeof option.value === \"string\",\n  );\n}\n\nexport function getStringProp(props: NodeProps | undefined, name: string, fallback = \"\") {\n  const value = props?.[name];\n\n  return typeof value === \"string\" ? value : fallback;\n}\n\nexport function getNumberProp(props: NodeProps | undefined, name: string, fallback: number) {\n  const value = props?.[name];\n\n  return typeof value === \"number\" ? value : fallback;\n}\n\nexport function getOptionalNumberProp(props: NodeProps | undefined, name: string) {\n  const value = props?.[name];\n\n  return typeof value === \"number\" ? value : undefined;\n}\n\nexport function getBooleanProp(props: NodeProps | undefined, name: string, fallback = false) {\n  const value = props?.[name];\n\n  return typeof value === \"boolean\" ? value : fallback;\n}\n"],"mappings":";;;;;AAWA,SAAgB,WAAW,OAAwC;CACjE,MAAM,QAAQ,OAAO;CAErB,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,QACV,WACC,OAAO,WAAW,YAClB,WAAW,QACX,OAAO,OAAO,UAAU,YACxB,OAAO,OAAO,UAAU,QAC5B;AACF;AAEA,SAAgB,cAAc,OAA8B,MAAc,WAAW,IAAI;CACvF,MAAM,QAAQ,QAAQ;CAEtB,OAAO,OAAO,UAAU,WAAW,QAAQ;AAC7C;AAEA,SAAgB,cAAc,OAA8B,MAAc,UAAkB;CAC1F,MAAM,QAAQ,QAAQ;CAEtB,OAAO,OAAO,UAAU,WAAW,QAAQ;AAC7C;AAEA,SAAgB,sBAAsB,OAA8B,MAAc;CAChF,MAAM,QAAQ,QAAQ;CAEtB,OAAO,OAAO,UAAU,WAAW,QAAQ,KAAA;AAC7C;AAEA,SAAgB,eAAe,OAA8B,MAAc,WAAW,OAAO;CAC3F,MAAM,QAAQ,QAAQ;CAEtB,OAAO,OAAO,UAAU,YAAY,QAAQ;AAC9C"}

package/dist/core/registry.d.ts

@@ -0,0 +1,26 @@
+import { LazyExoticComponent } from 'react';
+import { RendererComponent, RendererComponentModule } from './types';
+export type EagerComponentRegistration = {
+    component: RendererComponent;
+    mode: "eager";
+};
+export type LazyComponentRegistration = {
+    component: LazyExoticComponent<RendererComponent>;
+    fallback?: RendererComponent;
+    load: () => Promise<RendererComponentModule>;
+    mode: "lazy";
+};
+export type ComponentRegistration = EagerComponentRegistration | LazyComponentRegistration;
+export type ComponentRegistry = Record<string, ComponentRegistration>;
+export type Plugin = {
+    components: ComponentRegistry;
+    name: string;
+};
+export type LazyComponentOptions<TType extends string> = {
+    fallback?: RendererComponent<TType>;
+};
+export declare function eagerComponent<TType extends string>(component: RendererComponent<TType>): EagerComponentRegistration;
+export declare function lazyComponent<TType extends string>(load: () => Promise<RendererComponentModule<TType>>, options?: LazyComponentOptions<TType>): LazyComponentRegistration;
+export declare function createPlugin(plugin: Plugin): Plugin;
+export declare function createRegistry(...plugins: Plugin[]): ComponentRegistry;
+export declare function extendRegistry(registry: ComponentRegistry, ...plugins: Plugin[]): ComponentRegistry;

package/dist/core/registry.js

@@ -0,0 +1,36 @@
+import { lazy } from "react";
+//#region resources/js/core/registry.ts
+function eagerComponent(component) {
+	return {
+		component,
+		mode: "eager"
+	};
+}
+function lazyComponent(load, options = {}) {
+	const erasedLoader = load;
+	return {
+		component: lazy(erasedLoader),
+		fallback: options.fallback,
+		load: erasedLoader,
+		mode: "lazy"
+	};
+}
+function createPlugin(plugin) {
+	return plugin;
+}
+function createRegistry(...plugins) {
+	return plugins.reduce((registry, plugin) => ({
+		...registry,
+		...plugin.components
+	}), {});
+}
+function extendRegistry(registry, ...plugins) {
+	return {
+		...registry,
+		...createRegistry(...plugins)
+	};
+}
+//#endregion
+export { createPlugin, createRegistry, eagerComponent, extendRegistry, lazyComponent };
+
+//# sourceMappingURL=registry.js.map

package/dist/core/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.js","names":[],"sources":["../../resources/js/core/registry.ts"],"sourcesContent":["import { lazy } from \"react\";\nimport type { LazyExoticComponent } from \"react\";\nimport type { RendererComponent, RendererComponentModule } from \"./types\";\n\nexport type EagerComponentRegistration = {\n  component: RendererComponent;\n  mode: \"eager\";\n};\n\nexport type LazyComponentRegistration = {\n  component: LazyExoticComponent<RendererComponent>;\n  fallback?: RendererComponent;\n  load: () => Promise<RendererComponentModule>;\n  mode: \"lazy\";\n};\n\nexport type ComponentRegistration = EagerComponentRegistration | LazyComponentRegistration;\n\nexport type ComponentRegistry = Record<string, ComponentRegistration>;\n\nexport type Plugin = {\n  components: ComponentRegistry;\n  name: string;\n};\n\nexport type LazyComponentOptions<TType extends string> = {\n  fallback?: RendererComponent<TType>;\n};\n\nexport function eagerComponent<TType extends string>(\n  component: RendererComponent<TType>,\n): EagerComponentRegistration {\n  return {\n    component: component as RendererComponent,\n    mode: \"eager\",\n  };\n}\n\nexport function lazyComponent<TType extends string>(\n  load: () => Promise<RendererComponentModule<TType>>,\n  options: LazyComponentOptions<TType> = {},\n): LazyComponentRegistration {\n  const erasedLoader = load as unknown as () => Promise<RendererComponentModule>;\n\n  return {\n    component: lazy(erasedLoader),\n    fallback: options.fallback as RendererComponent | undefined,\n    load: erasedLoader,\n    mode: \"lazy\",\n  };\n}\n\nexport function createPlugin(plugin: Plugin): Plugin {\n  return plugin;\n}\n\nexport function createRegistry(...plugins: Plugin[]): ComponentRegistry {\n  return plugins.reduce<ComponentRegistry>(\n    (registry, plugin) => ({\n      ...registry,\n      ...plugin.components,\n    }),\n    {},\n  );\n}\n\nexport function extendRegistry(\n  registry: ComponentRegistry,\n  ...plugins: Plugin[]\n): ComponentRegistry {\n  return {\n    ...registry,\n    ...createRegistry(...plugins),\n  };\n}\n"],"mappings":";;AA6BA,SAAgB,eACd,WAC4B;CAC5B,OAAO;EACM;EACX,MAAM;CACR;AACF;AAEA,SAAgB,cACd,MACA,UAAuC,CAAC,GACb;CAC3B,MAAM,eAAe;CAErB,OAAO;EACL,WAAW,KAAK,YAAY;EAC5B,UAAU,QAAQ;EAClB,MAAM;EACN,MAAM;CACR;AACF;AAEA,SAAgB,aAAa,QAAwB;CACnD,OAAO;AACT;AAEA,SAAgB,eAAe,GAAG,SAAsC;CACtE,OAAO,QAAQ,QACZ,UAAU,YAAY;EACrB,GAAG;EACH,GAAG,OAAO;CACZ,IACA,CAAC,CACH;AACF;AAEA,SAAgB,eACd,UACA,GAAG,SACgB;CACnB,OAAO;EACL,GAAG;EACH,GAAG,eAAe,GAAG,OAAO;CAC9B;AACF"}

package/dist/core/renderer.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { ComponentRegistry } from './registry';
+import { Node, UnknownComponent } from './types';
+type RendererContextValue = {
+    fallback: ReactNode;
+    missingComponent: UnknownComponent;
+    registry: ComponentRegistry;
+};
+export declare function useRendererContext(): RendererContextValue;
+export declare function Renderer({ fallback, missingComponent: UnknownComponent, nodes, registry, }: {
+    fallback?: ReactNode;
+    missingComponent?: UnknownComponent;
+    nodes: Node[];
+    registry: ComponentRegistry;
+}): import("react").JSX.Element;
+export {};