@lattice-php/lattice 0.1.0 → 0.3.0

package/dist/core/components/dialog.js

@@ -0,0 +1,75 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+import { Icon } from "../../icons/sprite.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+//#region resources/js/core/components/dialog.tsx
+var DIALOG_SURFACE = "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lg";
+function Dialog(props) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
+		"data-slot": "dialog",
+		...props
+	});
+}
+function DialogClose(props) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Close, {
+		"data-slot": "dialog-close",
+		...props
+	});
+}
+function DialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Title, {
+		className: cn("text-lg font-semibold leading-none tracking-tight", className),
+		"data-slot": "dialog-title",
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Description, {
+		className: cn("text-sm text-lt-muted-fg", className),
+		"data-slot": "dialog-description",
+		...props
+	});
+}
+function DialogContent({ children, className, ...props }) {
+	return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [/* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
+		className: "fixed inset-0 z-50 bg-lt-overlay",
+		"data-slot": "dialog-overlay"
+	}), /* @__PURE__ */ jsx(DialogPrimitive.Content, {
+		className: cn(DIALOG_SURFACE, className),
+		"data-slot": "dialog-content",
+		...props,
+		children
+	})] });
+}
+/**
+* The shared dialog header: a title with an optional description and a ghost
+* close button. Pass `description` as `undefined` to suppress the description
+* and the matching `aria-describedby` wiring on the content.
+*/
+function DialogHeader({ closeLabel, description, title }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-start justify-between gap-4",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "grid gap-2",
+			children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), description ? /* @__PURE__ */ jsx(DialogDescription, { children: description }) : null]
+		}), /* @__PURE__ */ jsx(DialogClose, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				"aria-label": closeLabel,
+				size: "icon",
+				variant: "ghost",
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "x",
+					"aria-hidden": "true",
+					className: "size-lt-icon-md"
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { DIALOG_SURFACE, Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle };
+
+//# sourceMappingURL=dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","names":[],"sources":["../../../resources/js/core/components/dialog.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { Button } from \"@lattice-php/lattice/core/components/button\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nexport const DIALOG_SURFACE =\n  \"fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lg\";\n\nfunction Dialog(props: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogClose(props: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      className={cn(\"text-lg font-semibold leading-none tracking-tight\", className)}\n      data-slot=\"dialog-title\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      className={cn(\"text-sm text-lt-muted-fg\", className)}\n      data-slot=\"dialog-description\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogContent({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content>) {\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Overlay\n        className=\"fixed inset-0 z-50 bg-lt-overlay\"\n        data-slot=\"dialog-overlay\"\n      />\n      <DialogPrimitive.Content\n        className={cn(DIALOG_SURFACE, className)}\n        data-slot=\"dialog-content\"\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n}\n\n/**\n * The shared dialog header: a title with an optional description and a ghost\n * close button. Pass `description` as `undefined` to suppress the description\n * and the matching `aria-describedby` wiring on the content.\n */\nfunction DialogHeader({\n  closeLabel,\n  description,\n  title,\n}: {\n  closeLabel?: string;\n  description?: React.ReactNode;\n  title: React.ReactNode;\n}) {\n  return (\n    <div className=\"flex items-start justify-between gap-4\">\n      <div className=\"grid gap-2\">\n        <DialogTitle>{title}</DialogTitle>\n        {description ? <DialogDescription>{description}</DialogDescription> : null}\n      </div>\n      <DialogClose asChild>\n        <Button aria-label={closeLabel} size=\"icon\" variant=\"ghost\">\n          <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n        </Button>\n      </DialogClose>\n    </div>\n  );\n}\n\nexport { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle };\n"],"mappings":";;;;;;;AAMA,IAAa,iBACX;AAEF,SAAS,OAAO,OAA0D;CACxE,OAAO,oBAAC,gBAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,YAAY,OAA2D;CAC9E,OAAO,oBAAC,gBAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAAC,gBAAgB,OAAjB;EACE,WAAW,GAAG,qDAAqD,SAAS;EAC5E,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAAC,gBAAgB,aAAjB;EACE,WAAW,GAAG,4BAA4B,SAAS;EACnD,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,UACA,WACA,GAAG,SACoD;CACvD,OACE,qBAAC,gBAAgB,QAAjB,EAAA,UAAA,CACE,oBAAC,gBAAgB,SAAjB;EACE,WAAU;EACV,aAAU;CACX,CAAA,GACD,oBAAC,gBAAgB,SAAjB;EACE,WAAW,GAAG,gBAAgB,SAAS;EACvC,aAAU;EACV,GAAI;EAEH;CACsB,CAAA,CACH,EAAA,CAAA;AAE5B;;;;;;AAOA,SAAS,aAAa,EACpB,YACA,aACA,SAKC;CACD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GAChC,cAAc,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,IAAI,IACnE;MACL,oBAAC,aAAD;GAAa,SAAA;aACX,oBAAC,QAAD;IAAQ,cAAY;IAAY,MAAK;IAAO,SAAQ;cAClD,oBAAC,MAAD;KAAM,MAAK;KAAI,eAAY;KAAO,WAAU;IAAmB,CAAA;GACzD,CAAA;EACG,CAAA,CACV;;AAET"}

package/dist/core/components/dropdown-menu.d.ts

@@ -0,0 +1,14 @@
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+import * as React from "react";
+declare function DropdownMenu(props: React.ComponentProps<typeof Popover>): React.JSX.Element;
+declare function DropdownMenuTrigger(props: React.ComponentProps<typeof PopoverTrigger>): React.JSX.Element;
+declare function DropdownMenuContent({ className, ...props }: React.ComponentProps<typeof PopoverContent>): React.JSX.Element;
+/**
+ * A menu entry that closes the menu when activated. Wrap the click handler in
+ * `onClick`; selecting the item dismisses the popover via `PopoverClose`.
+ */
+declare function DropdownMenuItem({ children, className, destructive, icon, ...props }: React.ComponentProps<"button"> & {
+    destructive?: boolean;
+    icon?: string;
+}): React.JSX.Element;
+export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger };

package/dist/core/components/dropdown-menu.js

@@ -0,0 +1,42 @@
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../icons/sprite.js";
+import { Popover, PopoverClose, PopoverContent, PopoverTrigger } from "./popover.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/core/components/dropdown-menu.tsx
+function DropdownMenu(props) {
+	return /* @__PURE__ */ jsx(Popover, { ...props });
+}
+function DropdownMenuTrigger(props) {
+	return /* @__PURE__ */ jsx(PopoverTrigger, { ...props });
+}
+function DropdownMenuContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(PopoverContent, {
+		className: cn("grid min-w-40 gap-1 p-1", className),
+		role: "menu",
+		...props
+	});
+}
+/**
+* A menu entry that closes the menu when activated. Wrap the click handler in
+* `onClick`; selecting the item dismisses the popover via `PopoverClose`.
+*/
+function DropdownMenuItem({ children, className, destructive = false, icon, ...props }) {
+	return /* @__PURE__ */ jsx(PopoverClose, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			role: "menuitem",
+			className: cn("flex w-full items-center gap-2 rounded-lt-sm px-3 py-1.5 text-left text-sm [&_svg]:size-lt-icon-sm", destructive ? "text-lt-danger hover:bg-lt-danger/10" : "hover:bg-lt-accent hover:text-lt-accent-fg", className),
+			...props,
+			children: [icon ? /* @__PURE__ */ jsx(Icon, {
+				name: icon,
+				"aria-hidden": "true"
+			}) : null, children]
+		})
+	});
+}
+//#endregion
+export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger };
+
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/core/components/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../../resources/js/core/components/dropdown-menu.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport * as React from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { Popover, PopoverClose, PopoverContent, PopoverTrigger } from \"./popover\";\n\nfunction DropdownMenu(props: React.ComponentProps<typeof Popover>) {\n  return <Popover {...props} />;\n}\n\nfunction DropdownMenuTrigger(props: React.ComponentProps<typeof PopoverTrigger>) {\n  return <PopoverTrigger {...props} />;\n}\n\nfunction DropdownMenuContent({ className, ...props }: React.ComponentProps<typeof PopoverContent>) {\n  return (\n    <PopoverContent className={cn(\"grid min-w-40 gap-1 p-1\", className)} role=\"menu\" {...props} />\n  );\n}\n\n/**\n * A menu entry that closes the menu when activated. Wrap the click handler in\n * `onClick`; selecting the item dismisses the popover via `PopoverClose`.\n */\nfunction DropdownMenuItem({\n  children,\n  className,\n  destructive = false,\n  icon,\n  ...props\n}: React.ComponentProps<\"button\"> & { destructive?: boolean; icon?: string }) {\n  return (\n    <PopoverClose asChild>\n      <button\n        type=\"button\"\n        role=\"menuitem\"\n        className={cn(\n          \"flex w-full items-center gap-2 rounded-lt-sm px-3 py-1.5 text-left text-sm [&_svg]:size-lt-icon-sm\",\n          destructive\n            ? \"text-lt-danger hover:bg-lt-danger/10\"\n            : \"hover:bg-lt-accent hover:text-lt-accent-fg\",\n          className,\n        )}\n        {...props}\n      >\n        {icon ? <Icon name={icon} aria-hidden=\"true\" /> : null}\n        {children}\n      </button>\n    </PopoverClose>\n  );\n}\n\nexport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger };\n"],"mappings":";;;;;;AAKA,SAAS,aAAa,OAA6C;CACjE,OAAO,oBAAC,SAAD,EAAS,GAAI,MAAQ,CAAA;AAC9B;AAEA,SAAS,oBAAoB,OAAoD;CAC/E,OAAO,oBAAC,gBAAD,EAAgB,GAAI,MAAQ,CAAA;AACrC;AAEA,SAAS,oBAAoB,EAAE,WAAW,GAAG,SAAsD;CACjG,OACE,oBAAC,gBAAD;EAAgB,WAAW,GAAG,2BAA2B,SAAS;EAAG,MAAK;EAAO,GAAI;CAAQ,CAAA;AAEjG;;;;;AAMA,SAAS,iBAAiB,EACxB,UACA,WACA,cAAc,OACd,MACA,GAAG,SACyE;CAC5E,OACE,oBAAC,cAAD;EAAc,SAAA;YACZ,qBAAC,UAAD;GACE,MAAK;GACL,MAAK;GACL,WAAW,GACT,sGACA,cACI,yCACA,8CACJ,SACF;GACA,GAAI;aAVN,CAYG,OAAO,oBAAC,MAAD;IAAM,MAAM;IAAM,eAAY;GAAQ,CAAA,IAAI,MACjD,QACK;;CACI,CAAA;AAElB"}

package/dist/core/components/floating-panel.d.ts

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

package/dist/core/components/floating-panel.js

@@ -0,0 +1,65 @@
+import { cn } from "../../lib/utils.js";
+import { RenderNode } from "../renderer.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/core/components/floating-panel.tsx
+function placementStyle(placement, offset) {
+	if (placement === "top-start") return {
+		left: offset,
+		top: offset
+	};
+	if (placement === "top-end") return {
+		right: offset,
+		top: offset
+	};
+	if (placement === "bottom-start") return {
+		bottom: offset,
+		left: offset
+	};
+	return {
+		bottom: offset,
+		right: offset
+	};
+}
+var FloatingPanelComponent = ({ children, node }) => {
+	const label = node.props.label ?? void 0;
+	const offset = Math.max(0, node.props.offset ?? 16);
+	const placement = node.props.placement ?? "bottom-end";
+	const trigger = node.props.trigger ?? [];
+	const [open, setOpen] = useState(false);
+	if (trigger.length === 0) return /* @__PURE__ */ jsx("div", {
+		"aria-label": label,
+		className: "fixed z-50 max-w-[calc(100vw-2rem)] rounded-lt border border-lt-border bg-lt-popover p-1 text-lt-popover-fg shadow-md",
+		"data-lattice-component": node.id,
+		role: label ? "group" : void 0,
+		style: placementStyle(placement, offset),
+		children
+	});
+	const expandsUpward = placement === "bottom-start" || placement === "bottom-end";
+	const anchorsToStart = placement === "top-start" || placement === "bottom-start";
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": label,
+		className: "fixed z-50 max-w-[calc(100vw-2rem)]",
+		"data-lattice-component": node.id,
+		role: label ? "group" : void 0,
+		style: placementStyle(placement, offset),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("flex w-fit gap-2", expandsUpward ? "flex-col-reverse" : "flex-col"),
+			children: [/* @__PURE__ */ jsx("button", {
+				"aria-expanded": open,
+				className: cn("inline-flex items-center gap-2 rounded-lt border border-lt-border bg-lt-popover px-3 py-1.5 text-sm font-medium text-lt-popover-fg shadow-md hover:bg-lt-muted", anchorsToStart ? "self-start" : "self-end"),
+				"data-test": node.key ? `${node.key}-trigger` : void 0,
+				onClick: () => setOpen((value) => !value),
+				type: "button",
+				children: trigger.map((triggerNode, index) => /* @__PURE__ */ jsx(RenderNode, { node: triggerNode }, triggerNode.key ?? `${triggerNode.type}-${index}`))
+			}), /* @__PURE__ */ jsx("div", {
+				className: open ? "block" : "hidden",
+				children
+			})]
+		})
+	});
+};
+//#endregion
+export { FloatingPanelComponent as default };
+
+//# sourceMappingURL=floating-panel.js.map

package/dist/core/components/floating-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-panel.js","names":[],"sources":["../../../resources/js/core/components/floating-panel.tsx"],"sourcesContent":["import { type CSSProperties, useState } from \"react\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport type { FloatingPlacement } from \"@lattice-php/lattice/types/generated\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction placementStyle(placement: FloatingPlacement, offset: number): CSSProperties {\n  if (placement === \"top-start\") {\n    return { left: offset, top: offset };\n  }\n\n  if (placement === \"top-end\") {\n    return { right: offset, top: offset };\n  }\n\n  if (placement === \"bottom-start\") {\n    return { bottom: offset, left: offset };\n  }\n\n  return { bottom: offset, right: offset };\n}\n\nconst FloatingPanelComponent: RendererComponent<\"floating-panel\"> = ({ children, node }) => {\n  const label = node.props.label ?? undefined;\n  const offset = Math.max(0, node.props.offset ?? 16);\n  const placement = node.props.placement ?? \"bottom-end\";\n  const trigger = node.props.trigger ?? [];\n  const [open, setOpen] = useState(false);\n\n  if (trigger.length === 0) {\n    return (\n      <div\n        aria-label={label}\n        className=\"fixed z-50 max-w-[calc(100vw-2rem)] rounded-lt border border-lt-border bg-lt-popover p-1 text-lt-popover-fg shadow-md\"\n        data-lattice-component={node.id}\n        role={label ? \"group\" : undefined}\n        style={placementStyle(placement, offset)}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  const expandsUpward = placement === \"bottom-start\" || placement === \"bottom-end\";\n  const anchorsToStart = placement === \"top-start\" || placement === \"bottom-start\";\n\n  return (\n    <div\n      aria-label={label}\n      className=\"fixed z-50 max-w-[calc(100vw-2rem)]\"\n      data-lattice-component={node.id}\n      role={label ? \"group\" : undefined}\n      style={placementStyle(placement, offset)}\n    >\n      <div className={cn(\"flex w-fit gap-2\", expandsUpward ? \"flex-col-reverse\" : \"flex-col\")}>\n        <button\n          aria-expanded={open}\n          className={cn(\n            \"inline-flex items-center gap-2 rounded-lt border border-lt-border bg-lt-popover px-3 py-1.5 text-sm font-medium text-lt-popover-fg shadow-md hover:bg-lt-muted\",\n            anchorsToStart ? \"self-start\" : \"self-end\",\n          )}\n          data-test={node.key ? `${node.key}-trigger` : undefined}\n          onClick={() => setOpen((value) => !value)}\n          type=\"button\"\n        >\n          {trigger.map((triggerNode, index) => (\n            <RenderNode\n              key={triggerNode.key ?? `${triggerNode.type}-${index}`}\n              node={triggerNode}\n            />\n          ))}\n        </button>\n        <div className={open ? \"block\" : \"hidden\"}>{children}</div>\n      </div>\n    </div>\n  );\n};\n\nexport default FloatingPanelComponent;\n"],"mappings":";;;;;AAMA,SAAS,eAAe,WAA8B,QAA+B;CACnF,IAAI,cAAc,aAChB,OAAO;EAAE,MAAM;EAAQ,KAAK;CAAO;CAGrC,IAAI,cAAc,WAChB,OAAO;EAAE,OAAO;EAAQ,KAAK;CAAO;CAGtC,IAAI,cAAc,gBAChB,OAAO;EAAE,QAAQ;EAAQ,MAAM;CAAO;CAGxC,OAAO;EAAE,QAAQ;EAAQ,OAAO;CAAO;AACzC;AAEA,IAAM,0BAA+D,EAAE,UAAU,WAAW;CAC1F,MAAM,QAAQ,KAAK,MAAM,SAAS,KAAA;CAClC,MAAM,SAAS,KAAK,IAAI,GAAG,KAAK,MAAM,UAAU,EAAE;CAClD,MAAM,YAAY,KAAK,MAAM,aAAa;CAC1C,MAAM,UAAU,KAAK,MAAM,WAAW,CAAC;CACvC,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,IAAI,QAAQ,WAAW,GACrB,OACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAU;EACV,0BAAwB,KAAK;EAC7B,MAAM,QAAQ,UAAU,KAAA;EACxB,OAAO,eAAe,WAAW,MAAM;EAEtC;CACE,CAAA;CAIT,MAAM,gBAAgB,cAAc,kBAAkB,cAAc;CACpE,MAAM,iBAAiB,cAAc,eAAe,cAAc;CAElE,OACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAU;EACV,0BAAwB,KAAK;EAC7B,MAAM,QAAQ,UAAU,KAAA;EACxB,OAAO,eAAe,WAAW,MAAM;YAEvC,qBAAC,OAAD;GAAK,WAAW,GAAG,oBAAoB,gBAAgB,qBAAqB,UAAU;aAAtF,CACE,oBAAC,UAAD;IACE,iBAAe;IACf,WAAW,GACT,kKACA,iBAAiB,eAAe,UAClC;IACA,aAAW,KAAK,MAAM,GAAG,KAAK,IAAI,YAAY,KAAA;IAC9C,eAAe,SAAS,UAAU,CAAC,KAAK;IACxC,MAAK;cAEJ,QAAQ,KAAK,aAAa,UACzB,oBAAC,YAAD,EAEE,MAAM,YACP,GAFM,YAAY,OAAO,GAAG,YAAY,KAAK,GAAG,OAEhD,CACF;GACK,CAAA,GACR,oBAAC,OAAD;IAAK,WAAW,OAAO,UAAU;IAAW;GAAc,CAAA,CACvD;;CACF,CAAA;AAET"}

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

@@ -1,12 +1,3 @@
-import { RendererComponent } from '../../../../core/types';
-declare module '../../../../core/types' {
-    interface ComponentProps {
-        fragment: {
-            endpoint?: string;
-            ref?: string;
-            lazy?: boolean;
-        };
-    }
-}
+import { RendererComponent } from '../types';
 declare const FragmentComponent: RendererComponent<"fragment">;
 export default FragmentComponent;

package/dist/core/components/fragment.js

@@ -1,30 +1,34 @@
-import { withRefHeader } from "../component-ref.js";
-import { getStringProp } from "../props.js";
 import { LATTICE_EVENT } from "../../events/event-names.js";
-import { Renderer, useRendererContext } from "../renderer.js";
+import { apiJson } from "../api.js";
+import { Skeleton } from "./skeleton.js";
+import { Renderer } from "../renderer.js";
 import { useCallback, useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/core/components/fragment.tsx
+var fragmentSizeHeights = {
+	lg: 320,
+	md: 64,
+	sm: 40,
+	xl: 384,
+	xs: 32
+};
 function getComponents(value) {
 	if (!Array.isArray(value)) return [];
 	return value.filter((node) => typeof node === "object" && node !== null && "type" in node && typeof node.type === "string");
 }
 var FragmentComponent = ({ node }) => {
-	const endpoint = getStringProp(node.props, "endpoint");
-	const isLazy = node.props?.lazy === true;
-	const componentRef = getStringProp(node.props, "ref");
-	const [components, setComponents] = useState(() => node.children ?? []);
+	const endpoint = node.props.endpoint ?? "";
+	const isLazy = node.props.lazy === true;
+	const componentRef = node.props.ref ?? "";
+	const placeholderHeight = fragmentSizeHeights[node.props.size];
+	const [components, setComponents] = useState(() => node.schema ?? []);
 	const [hasLoaded, setHasLoaded] = useState(!isLazy);
 	const [processing, setProcessing] = useState(isLazy && endpoint !== "");
-	const { fallback, missingComponent, registry } = useRendererContext();
 	const load = useCallback(async () => {
 		if (!endpoint) return;
 		setProcessing(true);
 		try {
-			setComponents(getComponents((await (await fetch(endpoint, { headers: {
-				Accept: "application/json",
-				...withRefHeader(componentRef)
-			} })).json()).components));
+			setComponents(getComponents((await apiJson(endpoint, { ref: componentRef })).schema));
 			setHasLoaded(true);
 		} finally {
 			setProcessing(false);
@@ -46,14 +50,21 @@ var FragmentComponent = ({ node }) => {
 		window.addEventListener(LATTICE_EVENT.reloadComponent, reload);
 		return () => window.removeEventListener(LATTICE_EVENT.reloadComponent, reload);
 	}, [load, node.id]);
+	useEffect(() => {
+		function reloadOnLocaleChange() {
+			if (!hasLoaded) return;
+			load();
+		}
+		window.addEventListener(LATTICE_EVENT.localeChange, reloadOnLocaleChange);
+		return () => window.removeEventListener(LATTICE_EVENT.localeChange, reloadOnLocaleChange);
+	}, [hasLoaded, load]);
 	return /* @__PURE__ */ jsx("div", {
 		"data-lattice-fragment": node.id,
-		children: processing && components.length === 0 ? /* @__PURE__ */ jsx("div", { className: "h-16 animate-pulse rounded-lt-sm bg-lt-muted" }) : /* @__PURE__ */ jsx(Renderer, {
-			fallback,
-			missingComponent,
-			nodes: components,
-			registry
-		})
+		style: processing && components.length === 0 ? { minHeight: placeholderHeight } : void 0,
+		children: processing && components.length === 0 ? /* @__PURE__ */ jsx(Skeleton, {
+			className: "w-full",
+			style: { height: placeholderHeight }
+		}) : /* @__PURE__ */ jsx(Renderer, { nodes: components })
 	});
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"fragment.js","names":[],"sources":["../../../resources/js/core/components/fragment.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { withRefHeader } from \"@lattice/lattice/core/component-ref\";\nimport { getStringProp } from \"@lattice/lattice/core/props\";\nimport { Renderer, useRendererContext } from \"@lattice/lattice/core/renderer\";\nimport type { Node, RendererComponent } from \"@lattice/lattice/core/types\";\nimport { LATTICE_EVENT, type ReloadComponentEvent } from \"@lattice/lattice/events/event-names\";\n\ntype FragmentResponse = {\n  components?: Node[];\n};\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    fragment: {\n      endpoint?: string;\n      ref?: string;\n      lazy?: boolean;\n    };\n  }\n}\n\nfunction getComponents(value: unknown): Node[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.filter(\n    (node): node is Node =>\n      typeof node === \"object\" && node !== null && \"type\" in node && typeof node.type === \"string\",\n  );\n}\n\nconst FragmentComponent: RendererComponent<\"fragment\"> = ({ node }) => {\n  const endpoint = getStringProp(node.props, \"endpoint\");\n  const isLazy = node.props?.lazy === true;\n  const componentRef = getStringProp(node.props, \"ref\");\n  const [components, setComponents] = useState(() => node.children ?? []);\n  const [hasLoaded, setHasLoaded] = useState(!isLazy);\n  const [processing, setProcessing] = useState(isLazy && endpoint !== \"\");\n  const { fallback, missingComponent, registry } = useRendererContext();\n\n  const load = useCallback(async (): Promise<void> => {\n    if (!endpoint) {\n      return;\n    }\n\n    setProcessing(true);\n\n    try {\n      const response = await fetch(endpoint, {\n        headers: {\n          Accept: \"application/json\",\n          ...withRefHeader(componentRef),\n        },\n      });\n      const result = (await response.json()) as FragmentResponse;\n\n      setComponents(getComponents(result.components));\n      setHasLoaded(true);\n    } finally {\n      setProcessing(false);\n    }\n  }, [endpoint, componentRef]);\n\n  useEffect(() => {\n    if (!isLazy || hasLoaded) {\n      return;\n    }\n\n    void load();\n  }, [hasLoaded, isLazy, load]);\n\n  useEffect(() => {\n    function reload(event: Event): void {\n      const detail = (event as ReloadComponentEvent).detail;\n\n      if (detail?.component !== node.id) {\n        return;\n      }\n\n      void load();\n    }\n\n    window.addEventListener(LATTICE_EVENT.reloadComponent, reload);\n\n    return () => window.removeEventListener(LATTICE_EVENT.reloadComponent, reload);\n  }, [load, node.id]);\n\n  return (\n    <div data-lattice-fragment={node.id}>\n      {processing && components.length === 0 ? (\n        <div className=\"h-16 animate-pulse rounded-lt-sm bg-lt-muted\" />\n      ) : (\n        <Renderer\n          fallback={fallback}\n          missingComponent={missingComponent}\n          nodes={components}\n          registry={registry}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default FragmentComponent;\n"],"mappings":";;;;;;;AAqBA,SAAS,cAAc,OAAwB;CAC7C,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,QACV,SACC,OAAO,SAAS,YAAY,SAAS,QAAQ,UAAU,QAAQ,OAAO,KAAK,SAAS,QACxF;AACF;AAEA,IAAM,qBAAoD,EAAE,WAAW;CACrE,MAAM,WAAW,cAAc,KAAK,OAAO,UAAU;CACrD,MAAM,SAAS,KAAK,OAAO,SAAS;CACpC,MAAM,eAAe,cAAc,KAAK,OAAO,KAAK;CACpD,MAAM,CAAC,YAAY,iBAAiB,eAAe,KAAK,YAAY,CAAC,CAAC;CACtE,MAAM,CAAC,WAAW,gBAAgB,SAAS,CAAC,MAAM;CAClD,MAAM,CAAC,YAAY,iBAAiB,SAAS,UAAU,aAAa,EAAE;CACtE,MAAM,EAAE,UAAU,kBAAkB,aAAa,mBAAmB;CAEpE,MAAM,OAAO,YAAY,YAA2B;EAClD,IAAI,CAAC,UACH;EAGF,cAAc,IAAI;EAElB,IAAI;GASF,cAAc,eAAc,OAFN,MANC,MAAM,UAAU,EACrC,SAAS;IACP,QAAQ;IACR,GAAG,cAAc,YAAY;GAC/B,EACF,CAAC,GAC8B,KAAK,GAED,UAAU,CAAC;GAC9C,aAAa,IAAI;EACnB,UAAU;GACR,cAAc,KAAK;EACrB;CACF,GAAG,CAAC,UAAU,YAAY,CAAC;CAE3B,gBAAgB;EACd,IAAI,CAAC,UAAU,WACb;EAGF,KAAU;CACZ,GAAG;EAAC;EAAW;EAAQ;CAAI,CAAC;CAE5B,gBAAgB;EACd,SAAS,OAAO,OAAoB;GAGlC,IAFgB,MAA+B,QAEnC,cAAc,KAAK,IAC7B;GAGF,KAAU;EACZ;EAEA,OAAO,iBAAiB,cAAc,iBAAiB,MAAM;EAE7D,aAAa,OAAO,oBAAoB,cAAc,iBAAiB,MAAM;CAC/E,GAAG,CAAC,MAAM,KAAK,EAAE,CAAC;CAElB,OACE,oBAAC,OAAD;EAAK,yBAAuB,KAAK;YAC9B,cAAc,WAAW,WAAW,IACnC,oBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA,IAE/D,oBAAC,UAAD;GACY;GACQ;GAClB,OAAO;GACG;EACX,CAAA;CAEA,CAAA;AAET"}
+{"version":3,"file":"fragment.js","names":[],"sources":["../../../resources/js/core/components/fragment.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { apiJson } from \"@lattice-php/lattice/core/api\";\nimport { Skeleton } from \"@lattice-php/lattice/core/components/skeleton\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport type { Node, RendererComponent, Schema } from \"@lattice-php/lattice/core/types\";\nimport { LATTICE_EVENT, type ReloadComponentEvent } from \"@lattice-php/lattice/events/event-names\";\n\ntype FragmentResponse = {\n  schema?: Schema;\n};\n\nconst fragmentSizeHeights = {\n  lg: 320,\n  md: 64,\n  sm: 40,\n  xl: 384,\n  xs: 32,\n} as const;\n\nfunction getComponents(value: unknown): Node[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.filter(\n    (node): node is Node =>\n      typeof node === \"object\" && node !== null && \"type\" in node && typeof node.type === \"string\",\n  );\n}\n\nconst FragmentComponent: RendererComponent<\"fragment\"> = ({ node }) => {\n  const endpoint = node.props.endpoint ?? \"\";\n  const isLazy = node.props.lazy === true;\n  const componentRef = node.props.ref ?? \"\";\n  const placeholderHeight = fragmentSizeHeights[node.props.size];\n  const [components, setComponents] = useState(() => node.schema ?? []);\n  const [hasLoaded, setHasLoaded] = useState(!isLazy);\n  const [processing, setProcessing] = useState(isLazy && endpoint !== \"\");\n\n  const load = useCallback(async (): Promise<void> => {\n    if (!endpoint) {\n      return;\n    }\n\n    setProcessing(true);\n\n    try {\n      const result = await apiJson<FragmentResponse>(endpoint, { ref: componentRef });\n\n      setComponents(getComponents(result.schema));\n      setHasLoaded(true);\n    } finally {\n      setProcessing(false);\n    }\n  }, [endpoint, componentRef]);\n\n  useEffect(() => {\n    if (!isLazy || hasLoaded) {\n      return;\n    }\n\n    void load();\n  }, [hasLoaded, isLazy, load]);\n\n  useEffect(() => {\n    function reload(event: Event): void {\n      const detail = (event as ReloadComponentEvent).detail;\n\n      if (detail?.component !== node.id) {\n        return;\n      }\n\n      void load();\n    }\n\n    window.addEventListener(LATTICE_EVENT.reloadComponent, reload);\n\n    return () => window.removeEventListener(LATTICE_EVENT.reloadComponent, reload);\n  }, [load, node.id]);\n\n  useEffect(() => {\n    function reloadOnLocaleChange(): void {\n      if (!hasLoaded) {\n        return;\n      }\n\n      void load();\n    }\n\n    window.addEventListener(LATTICE_EVENT.localeChange, reloadOnLocaleChange);\n\n    return () => window.removeEventListener(LATTICE_EVENT.localeChange, reloadOnLocaleChange);\n  }, [hasLoaded, load]);\n\n  return (\n    <div\n      data-lattice-fragment={node.id}\n      style={processing && components.length === 0 ? { minHeight: placeholderHeight } : undefined}\n    >\n      {processing && components.length === 0 ? (\n        <Skeleton className=\"w-full\" style={{ height: placeholderHeight }} />\n      ) : (\n        <Renderer nodes={components} />\n      )}\n    </div>\n  );\n};\n\nexport default FragmentComponent;\n"],"mappings":";;;;;;;AAWA,IAAM,sBAAsB;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAS,cAAc,OAAwB;CAC7C,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,QACV,SACC,OAAO,SAAS,YAAY,SAAS,QAAQ,UAAU,QAAQ,OAAO,KAAK,SAAS,QACxF;AACF;AAEA,IAAM,qBAAoD,EAAE,WAAW;CACrE,MAAM,WAAW,KAAK,MAAM,YAAY;CACxC,MAAM,SAAS,KAAK,MAAM,SAAS;CACnC,MAAM,eAAe,KAAK,MAAM,OAAO;CACvC,MAAM,oBAAoB,oBAAoB,KAAK,MAAM;CACzD,MAAM,CAAC,YAAY,iBAAiB,eAAe,KAAK,UAAU,CAAC,CAAC;CACpE,MAAM,CAAC,WAAW,gBAAgB,SAAS,CAAC,MAAM;CAClD,MAAM,CAAC,YAAY,iBAAiB,SAAS,UAAU,aAAa,EAAE;CAEtE,MAAM,OAAO,YAAY,YAA2B;EAClD,IAAI,CAAC,UACH;EAGF,cAAc,IAAI;EAElB,IAAI;GAGF,cAAc,eAAc,MAFP,QAA0B,UAAU,EAAE,KAAK,aAAa,CAAC,GAE3C,MAAM,CAAC;GAC1C,aAAa,IAAI;EACnB,UAAU;GACR,cAAc,KAAK;EACrB;CACF,GAAG,CAAC,UAAU,YAAY,CAAC;CAE3B,gBAAgB;EACd,IAAI,CAAC,UAAU,WACb;EAGF,KAAU;CACZ,GAAG;EAAC;EAAW;EAAQ;CAAI,CAAC;CAE5B,gBAAgB;EACd,SAAS,OAAO,OAAoB;GAGlC,IAFgB,MAA+B,QAEnC,cAAc,KAAK,IAC7B;GAGF,KAAU;EACZ;EAEA,OAAO,iBAAiB,cAAc,iBAAiB,MAAM;EAE7D,aAAa,OAAO,oBAAoB,cAAc,iBAAiB,MAAM;CAC/E,GAAG,CAAC,MAAM,KAAK,EAAE,CAAC;CAElB,gBAAgB;EACd,SAAS,uBAA6B;GACpC,IAAI,CAAC,WACH;GAGF,KAAU;EACZ;EAEA,OAAO,iBAAiB,cAAc,cAAc,oBAAoB;EAExE,aAAa,OAAO,oBAAoB,cAAc,cAAc,oBAAoB;CAC1F,GAAG,CAAC,WAAW,IAAI,CAAC;CAEpB,OACE,oBAAC,OAAD;EACE,yBAAuB,KAAK;EAC5B,OAAO,cAAc,WAAW,WAAW,IAAI,EAAE,WAAW,kBAAkB,IAAI,KAAA;YAEjF,cAAc,WAAW,WAAW,IACnC,oBAAC,UAAD;GAAU,WAAU;GAAS,OAAO,EAAE,QAAQ,kBAAkB;EAAI,CAAA,IAEpE,oBAAC,UAAD,EAAU,OAAO,WAAa,CAAA;CAE7B,CAAA;AAET"}

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

@@ -1,10 +1,3 @@
-import { RendererComponent } from '../../../../core/types';
-declare module '../../../../core/types' {
-    interface ComponentProps {
-        grid: {
-            columns?: number;
-        };
-    }
-}
+import { RendererComponent } from '../types';
 declare const GridComponent: RendererComponent<"grid">;
 export default GridComponent;

package/dist/core/components/grid.js

@@ -1,9 +1,8 @@
 import { cn } from "../../lib/utils.js";
-import { getNumberProp } from "../props.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/core/components/grid.tsx
 var GridComponent = ({ children, node }) => {
-	const columns = Math.min(Math.max(getNumberProp(node.props, "columns", 1), 1), 4);
+	const columns = Math.min(Math.max(node.props.columns ?? 1, 1), 4);
 	return /* @__PURE__ */ jsx("div", {
 		"data-lattice-component": node.id,
 		className: cn("grid gap-x-4 gap-y-6", columns >= 2 && "md:grid-cols-2", columns >= 3 && "lg:grid-cols-3", columns >= 4 && "xl:grid-cols-4"),

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

@@ -1 +1 @@
-{"version":3,"file":"grid.js","names":[],"sources":["../../../resources/js/core/components/grid.tsx"],"sourcesContent":["import { getNumberProp } 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    grid: {\n      columns?: number;\n    };\n  }\n}\n\nconst GridComponent: RendererComponent<\"grid\"> = ({ children, node }) => {\n  const columns = Math.min(Math.max(getNumberProp(node.props, \"columns\", 1), 1), 4);\n\n  return (\n    <div\n      data-lattice-component={node.id}\n      className={cn(\n        \"grid gap-x-4 gap-y-6\",\n        columns >= 2 && \"md:grid-cols-2\",\n        columns >= 3 && \"lg:grid-cols-3\",\n        columns >= 4 && \"xl:grid-cols-4\",\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default GridComponent;\n"],"mappings":";;;;AAYA,IAAM,iBAA4C,EAAE,UAAU,WAAW;CACvE,MAAM,UAAU,KAAK,IAAI,KAAK,IAAI,cAAc,KAAK,OAAO,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC;CAEhF,OACE,oBAAC,OAAD;EACE,0BAAwB,KAAK;EAC7B,WAAW,GACT,wBACA,WAAW,KAAK,kBAChB,WAAW,KAAK,kBAChB,WAAW,KAAK,gBAClB;EAEC;CACE,CAAA;AAET"}
+{"version":3,"file":"grid.js","names":[],"sources":["../../../resources/js/core/components/grid.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst GridComponent: RendererComponent<\"grid\"> = ({ children, node }) => {\n  const columns = Math.min(Math.max(node.props.columns ?? 1, 1), 4);\n\n  return (\n    <div\n      data-lattice-component={node.id}\n      className={cn(\n        \"grid gap-x-4 gap-y-6\",\n        columns >= 2 && \"md:grid-cols-2\",\n        columns >= 3 && \"lg:grid-cols-3\",\n        columns >= 4 && \"xl:grid-cols-4\",\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default GridComponent;\n"],"mappings":";;;AAGA,IAAM,iBAA4C,EAAE,UAAU,WAAW;CACvE,MAAM,UAAU,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC;CAEhE,OACE,oBAAC,OAAD;EACE,0BAAwB,KAAK;EAC7B,WAAW,GACT,wBACA,WAAW,KAAK,kBAChB,WAAW,KAAK,kBAChB,WAAW,KAAK,gBAClB;EAEC;CACE,CAAA;AAET"}

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

@@ -1,11 +1,3 @@
-import { RendererComponent } from '../../../../core/types';
-declare module '../../../../core/types' {
-    interface ComponentProps {
-        heading: {
-            level?: number;
-            text?: string;
-        };
-    }
-}
+import { RendererComponent } from '../types';
 declare const HeadingComponent: RendererComponent<"heading">;
 export default HeadingComponent;

package/dist/core/components/heading.js

@@ -1,10 +1,9 @@
 import { cn } from "../../lib/utils.js";
-import { getNumberProp, getStringProp } from "../props.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/core/components/heading.tsx
 var HeadingComponent = ({ node }) => {
-	const text = getStringProp(node.props, "text");
-	const level = Math.min(Math.max(getNumberProp(node.props, "level", 1), 1), 6);
+	const { text } = node.props;
+	const level = Math.min(Math.max(node.props.level, 1), 6);
 	const className = cn("max-w-3xl font-semibold tracking-normal text-balance text-lt-fg", level === 1 && "text-4xl leading-tight sm:text-5xl", level === 2 && "text-2xl", level > 2 && "text-lg");
 	switch (level) {
 		case 1: return /* @__PURE__ */ jsx("h1", {

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

@@ -1 +1 @@
-{"version":3,"file":"heading.js","names":[],"sources":["../../../resources/js/core/components/heading.tsx"],"sourcesContent":["import { getNumberProp, 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    heading: {\n      level?: number;\n      text?: string;\n    };\n  }\n}\n\nconst HeadingComponent: RendererComponent<\"heading\"> = ({ node }) => {\n  const text = getStringProp(node.props, \"text\");\n  const level = Math.min(Math.max(getNumberProp(node.props, \"level\", 1), 1), 6);\n  const className = cn(\n    \"max-w-3xl font-semibold tracking-normal text-balance text-lt-fg\",\n    level === 1 && \"text-4xl leading-tight sm:text-5xl\",\n    level === 2 && \"text-2xl\",\n    level > 2 && \"text-lg\",\n  );\n\n  switch (level) {\n    case 1:\n      return <h1 className={className}>{text}</h1>;\n    case 2:\n      return <h2 className={className}>{text}</h2>;\n    case 3:\n      return <h3 className={className}>{text}</h3>;\n    case 4:\n      return <h4 className={className}>{text}</h4>;\n    case 5:\n      return <h5 className={className}>{text}</h5>;\n    default:\n      return <h6 className={className}>{text}</h6>;\n  }\n};\n\nexport default HeadingComponent;\n"],"mappings":";;;;AAaA,IAAM,oBAAkD,EAAE,WAAW;CACnE,MAAM,OAAO,cAAc,KAAK,OAAO,MAAM;CAC7C,MAAM,QAAQ,KAAK,IAAI,KAAK,IAAI,cAAc,KAAK,OAAO,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC;CAC5E,MAAM,YAAY,GAChB,mEACA,UAAU,KAAK,sCACf,UAAU,KAAK,YACf,QAAQ,KAAK,SACf;CAEA,QAAQ,OAAR;EACE,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,SACE,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;CAC/C;AACF"}
+{"version":3,"file":"heading.js","names":[],"sources":["../../../resources/js/core/components/heading.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst HeadingComponent: RendererComponent<\"heading\"> = ({ node }) => {\n  const { text } = node.props;\n  const level = Math.min(Math.max(node.props.level, 1), 6);\n  const className = cn(\n    \"max-w-3xl font-semibold tracking-normal text-balance text-lt-fg\",\n    level === 1 && \"text-4xl leading-tight sm:text-5xl\",\n    level === 2 && \"text-2xl\",\n    level > 2 && \"text-lg\",\n  );\n\n  switch (level) {\n    case 1:\n      return <h1 className={className}>{text}</h1>;\n    case 2:\n      return <h2 className={className}>{text}</h2>;\n    case 3:\n      return <h3 className={className}>{text}</h3>;\n    case 4:\n      return <h4 className={className}>{text}</h4>;\n    case 5:\n      return <h5 className={className}>{text}</h5>;\n    default:\n      return <h6 className={className}>{text}</h6>;\n  }\n};\n\nexport default HeadingComponent;\n"],"mappings":";;;AAGA,IAAM,oBAAkD,EAAE,WAAW;CACnE,MAAM,EAAE,SAAS,KAAK;CACtB,MAAM,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,OAAO,CAAC,GAAG,CAAC;CACvD,MAAM,YAAY,GAChB,mEACA,UAAU,KAAK,sCACf,UAAU,KAAK,YACf,QAAQ,KAAK,SACf;CAEA,QAAQ,OAAR;EACE,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;EAC7C,SACE,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAS,CAAA;CAC/C;AACF"}

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

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

package/dist/core/components/icon.js

@@ -0,0 +1,31 @@
+import { cn } from "../../lib/utils.js";
+import { IconRenderer } from "../../icons/icon-renderer.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/core/components/icon.tsx
+var sizeClass = {
+	xs: "size-lt-icon-xs",
+	sm: "size-lt-icon-sm",
+	md: "size-lt-icon-md",
+	lg: "size-lt-icon-lg",
+	xl: "size-lt-icon-xl"
+};
+var colorClass = {
+	default: "text-lt-fg",
+	muted: "text-lt-muted-fg",
+	primary: "text-lt-primary",
+	success: "text-lt-success",
+	info: "text-lt-info",
+	warning: "text-lt-warning",
+	danger: "text-lt-danger"
+};
+var IconComponent = ({ node }) => {
+	const { name, size, color, class: className } = node.props;
+	return /* @__PURE__ */ jsx(IconRenderer, {
+		icon: name,
+		className: cn(sizeClass[size], color ? colorClass[color] : void 0, className)
+	});
+};
+//#endregion
+export { IconComponent as default };
+
+//# sourceMappingURL=icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","names":[],"sources":["../../../resources/js/core/components/icon.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { Color, Size } from \"@lattice-php/lattice/types/generated\";\n\nconst sizeClass: Record<Size, string> = {\n  xs: \"size-lt-icon-xs\",\n  sm: \"size-lt-icon-sm\",\n  md: \"size-lt-icon-md\",\n  lg: \"size-lt-icon-lg\",\n  xl: \"size-lt-icon-xl\",\n};\n\nconst colorClass: Record<Color, string> = {\n  default: \"text-lt-fg\",\n  muted: \"text-lt-muted-fg\",\n  primary: \"text-lt-primary\",\n  success: \"text-lt-success\",\n  info: \"text-lt-info\",\n  warning: \"text-lt-warning\",\n  danger: \"text-lt-danger\",\n};\n\nconst IconComponent: RendererComponent<\"icon\"> = ({ node }) => {\n  const { name, size, color, class: className } = node.props;\n\n  return (\n    <IconRenderer\n      icon={name}\n      className={cn(sizeClass[size], color ? colorClass[color] : undefined, className)}\n    />\n  );\n};\n\nexport default IconComponent;\n"],"mappings":";;;;AAKA,IAAM,YAAkC;CACtC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,aAAoC;CACxC,SAAS;CACT,OAAO;CACP,SAAS;CACT,SAAS;CACT,MAAM;CACN,SAAS;CACT,QAAQ;AACV;AAEA,IAAM,iBAA4C,EAAE,WAAW;CAC7D,MAAM,EAAE,MAAM,MAAM,OAAO,OAAO,cAAc,KAAK;CAErD,OACE,oBAAC,cAAD;EACE,MAAM;EACN,WAAW,GAAG,UAAU,OAAO,QAAQ,WAAW,SAAS,KAAA,GAAW,SAAS;CAChF,CAAA;AAEL"}

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

@@ -1 +1 @@
-export declare const coreComponents: import('../../../../core/registry').Plugin;
+export declare const coreComponents: import('../registry').Plugin;

package/dist/core/components/index.js

@@ -1,12 +1,17 @@
-import { createPlugin, eagerComponent } from "../registry.js";
+import { createPlugin, eagerComponent, lazyComponent } from "../registry.js";
 import ButtonComponent from "./button.js";
+import { ChatBox } from "../../chat/components/chat-box.js";
 import BadgeComponent from "./badge.js";
 import CardComponent from "./card.js";
+import FloatingPanelComponent from "./floating-panel.js";
 import FragmentComponent from "./fragment.js";
 import GridComponent from "./grid.js";
 import HeadingComponent from "./heading.js";
+import IconComponent from "./icon.js";
 import LinkComponent from "./link.js";
 import ModalComponent from "./modal.js";
+import RawBlockComponent from "./raw-block.js";
+import SectionComponent from "./section.js";
 import SegmentedControlComponent from "./segmented-control.js";
 import StackComponent from "./stack.js";
 import TabComponent, { TabsComponent } from "./tabs.js";
@@ -17,11 +22,17 @@ var coreComponents = createPlugin({
 		badge: eagerComponent(BadgeComponent),
 		button: eagerComponent(ButtonComponent),
 		card: eagerComponent(CardComponent),
+		chart: lazyComponent(() => import("./chart.js")),
+		"chat.box": eagerComponent(ChatBox),
+		"floating-panel": eagerComponent(FloatingPanelComponent),
 		fragment: eagerComponent(FragmentComponent),
 		grid: eagerComponent(GridComponent),
 		heading: eagerComponent(HeadingComponent),
+		icon: eagerComponent(IconComponent),
 		link: eagerComponent(LinkComponent),
 		modal: eagerComponent(ModalComponent),
+		"raw-block": eagerComponent(RawBlockComponent),
+		section: eagerComponent(SectionComponent),
 		"segmented-control": eagerComponent(SegmentedControlComponent),
 		stack: eagerComponent(StackComponent),
 		tab: eagerComponent(TabComponent),

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../resources/js/core/components/index.ts"],"sourcesContent":["import { createPlugin, eagerComponent } from \"@lattice/lattice/core/registry\";\nimport BadgeComponent from \"./badge\";\nimport ButtonComponent from \"./button\";\nimport CardComponent from \"./card\";\nimport FragmentComponent from \"./fragment\";\nimport GridComponent from \"./grid\";\nimport HeadingComponent from \"./heading\";\nimport LinkComponent from \"./link\";\nimport ModalComponent from \"./modal\";\nimport SegmentedControlComponent from \"./segmented-control\";\nimport StackComponent from \"./stack\";\nimport TabComponent, { TabsComponent } from \"./tabs\";\nimport TextComponent from \"./text\";\n\nexport const coreComponents = createPlugin({\n  components: {\n    badge: eagerComponent(BadgeComponent),\n    button: eagerComponent(ButtonComponent),\n    card: eagerComponent(CardComponent),\n    fragment: eagerComponent(FragmentComponent),\n    grid: eagerComponent(GridComponent),\n    heading: eagerComponent(HeadingComponent),\n    link: eagerComponent(LinkComponent),\n    modal: eagerComponent(ModalComponent),\n    \"segmented-control\": eagerComponent(SegmentedControlComponent),\n    stack: eagerComponent(StackComponent),\n    tab: eagerComponent(TabComponent),\n    tabs: eagerComponent(TabsComponent),\n    text: eagerComponent(TextComponent),\n  },\n  name: \"lattice/core\",\n});\n"],"mappings":";;;;;;;;;;;;;;AAcA,IAAa,iBAAiB,aAAa;CACzC,YAAY;EACV,OAAO,eAAe,cAAc;EACpC,QAAQ,eAAe,eAAe;EACtC,MAAM,eAAe,aAAa;EAClC,UAAU,eAAe,iBAAiB;EAC1C,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;EACxC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,qBAAqB,eAAe,yBAAyB;EAC7D,OAAO,eAAe,cAAc;EACpC,KAAK,eAAe,YAAY;EAChC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;CACpC;CACA,MAAM;AACR,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../resources/js/core/components/index.ts"],"sourcesContent":["import { createPlugin, eagerComponent, lazyComponent } from \"@lattice-php/lattice/core/registry\";\nimport type { RendererComponentModule } from \"@lattice-php/lattice/core/types\";\nimport ChatBoxComponent from \"../../chat/components/chat-box\";\nimport BadgeComponent from \"./badge\";\nimport ButtonComponent from \"./button\";\nimport CardComponent from \"./card\";\nimport FloatingPanelComponent from \"./floating-panel\";\nimport FragmentComponent from \"./fragment\";\nimport GridComponent from \"./grid\";\nimport HeadingComponent from \"./heading\";\nimport IconComponent from \"./icon\";\nimport LinkComponent from \"./link\";\nimport ModalComponent from \"./modal\";\nimport RawBlockComponent from \"./raw-block\";\nimport SectionComponent from \"./section\";\nimport SegmentedControlComponent from \"./segmented-control\";\nimport StackComponent from \"./stack\";\nimport TabComponent, { TabsComponent } from \"./tabs\";\nimport TextComponent from \"./text\";\n\nexport const coreComponents = createPlugin({\n  components: {\n    badge: eagerComponent(BadgeComponent),\n    button: eagerComponent(ButtonComponent),\n    card: eagerComponent(CardComponent),\n    chart: lazyComponent(\n      () => import(\"./chart\") as unknown as Promise<RendererComponentModule<\"chart\">>,\n    ),\n    \"chat.box\": eagerComponent(ChatBoxComponent),\n    \"floating-panel\": eagerComponent(FloatingPanelComponent),\n    fragment: eagerComponent(FragmentComponent),\n    grid: eagerComponent(GridComponent),\n    heading: eagerComponent(HeadingComponent),\n    icon: eagerComponent(IconComponent),\n    link: eagerComponent(LinkComponent),\n    modal: eagerComponent(ModalComponent),\n    \"raw-block\": eagerComponent(RawBlockComponent),\n    section: eagerComponent(SectionComponent),\n    \"segmented-control\": eagerComponent(SegmentedControlComponent),\n    stack: eagerComponent(StackComponent),\n    tab: eagerComponent(TabComponent),\n    tabs: eagerComponent(TabsComponent),\n    text: eagerComponent(TextComponent),\n  },\n  name: \"lattice/core\",\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBA,IAAa,iBAAiB,aAAa;CACzC,YAAY;EACV,OAAO,eAAe,cAAc;EACpC,QAAQ,eAAe,eAAe;EACtC,MAAM,eAAe,aAAa;EAClC,OAAO,oBACC,OAAO,aACf;EACA,YAAY,eAAe,OAAgB;EAC3C,kBAAkB,eAAe,sBAAsB;EACvD,UAAU,eAAe,iBAAiB;EAC1C,MAAM,eAAe,aAAa;EAClC,SAAS,eAAe,gBAAgB;EACxC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,aAAa,eAAe,iBAAiB;EAC7C,SAAS,eAAe,gBAAgB;EACxC,qBAAqB,eAAe,yBAAyB;EAC7D,OAAO,eAAe,cAAc;EACpC,KAAK,eAAe,YAAY;EAChC,MAAM,eAAe,aAAa;EAClC,MAAM,eAAe,aAAa;CACpC;CACA,MAAM;AACR,CAAC"}

package/dist/core/components/info-tooltip.d.ts

@@ -0,0 +1,3 @@
+export declare function InfoTooltip({ content }: {
+    content?: string | null;
+}): import("react").JSX.Element | null;

package/dist/core/components/info-tooltip.js

@@ -0,0 +1,26 @@
+import { Icon } from "../../icons/sprite.js";
+import { useT } from "../../i18n/instance.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/core/components/info-tooltip.tsx
+function InfoTooltip({ content }) {
+	const { t } = useT("lattice");
+	if (!content) return null;
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+		type: "button",
+		"aria-label": t("a11y.moreInfo", "More information"),
+		className: "ml-1 inline-flex rounded-lt-sm text-lt-muted-fg outline-none hover:text-lt-fg focus-visible:text-lt-fg focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]",
+		children: /* @__PURE__ */ jsx(Icon, {
+			name: "info",
+			className: "size-lt-icon-sm"
+		})
+	}), /* @__PURE__ */ jsx(PopoverContent, {
+		align: "start",
+		className: "max-w-xs p-3 text-sm [&_a]:underline",
+		dangerouslySetInnerHTML: { __html: content }
+	})] });
+}
+//#endregion
+export { InfoTooltip };
+
+//# sourceMappingURL=info-tooltip.js.map

package/dist/core/components/info-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"info-tooltip.js","names":[],"sources":["../../../resources/js/core/components/info-tooltip.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\nexport function InfoTooltip({ content }: { content?: string | null }) {\n  const { t } = useT(\"lattice\");\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        type=\"button\"\n        aria-label={t(\"a11y.moreInfo\", \"More information\")}\n        className=\"ml-1 inline-flex rounded-lt-sm text-lt-muted-fg outline-none hover:text-lt-fg focus-visible:text-lt-fg focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]\"\n      >\n        <Icon name=\"info\" className=\"size-lt-icon-sm\" />\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        className=\"max-w-xs p-3 text-sm [&_a]:underline\"\n        dangerouslySetInnerHTML={{ __html: content }}\n      />\n    </Popover>\n  );\n}\n"],"mappings":";;;;;AAIA,SAAgB,YAAY,EAAE,WAAwC;CACpE,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,IAAI,CAAC,SACH,OAAO;CAGT,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,MAAK;EACL,cAAY,EAAE,iBAAiB,kBAAkB;EACjD,WAAU;YAEV,oBAAC,MAAD;GAAM,MAAK;GAAO,WAAU;EAAmB,CAAA;CACjC,CAAA,GAChB,oBAAC,gBAAD;EACE,OAAM;EACN,WAAU;EACV,yBAAyB,EAAE,QAAQ,QAAQ;CAC5C,CAAA,CACM,EAAA,CAAA;AAEb"}

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

@@ -1,17 +1,6 @@
-import { Method } from '@inertiajs/core';
 import { Link } from '@inertiajs/react';
 import { ComponentProps } from 'react';
-import { RendererComponent } from '../../../../core/types';
-declare module '../../../../core/types' {
-    interface ComponentProps {
-        link: {
-            href?: string;
-            label?: string;
-            method?: Method;
-            tabIndex?: number;
-        };
-    }
-}
+import { RendererComponent } from '../types';
 declare function TextLink({ className, children, ...props }: ComponentProps<typeof Link>): import("react").JSX.Element;
 declare const LinkComponent: RendererComponent<"link">;
 export default LinkComponent;