@lattice-php/lattice 0.2.0 → 0.3.0

package/dist/core/components/confirm-dialog.js

@@ -1,31 +1,25 @@
 import { Button } from "./button.js";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./dialog.js";
 import { Spinner } from "./spinner.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as Dialog from "@radix-ui/react-dialog";
 //#region resources/js/core/components/confirm-dialog.tsx
 function ConfirmDialog({ title, description, confirmLabel, cancelLabel = "Cancel", confirmVariant = "default", processing = false, confirmDisabled = false, onConfirm, onCancel }) {
 	const blockWhileProcessing = (event) => {
 		if (processing) event.preventDefault();
 	};
-	return /* @__PURE__ */ jsx(Dialog.Root, {
+	return /* @__PURE__ */ jsx(Dialog, {
 		open: true,
 		onOpenChange: (open) => {
 			if (!open) onCancel();
 		},
-		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: "fixed inset-0 z-50 bg-black/50" }), /* @__PURE__ */ jsxs(Dialog.Content, {
+		children: /* @__PURE__ */ jsxs(DialogContent, {
 			...description ? {} : { "aria-describedby": void 0 },
-			className: "fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lg",
+			className: "w-full max-w-md",
 			onEscapeKeyDown: blockWhileProcessing,
 			onInteractOutside: blockWhileProcessing,
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "grid gap-2",
-				children: [/* @__PURE__ */ jsx(Dialog.Title, {
-					className: "text-lg font-semibold leading-none tracking-tight",
-					children: title
-				}), description && /* @__PURE__ */ jsx(Dialog.Description, {
-					className: "text-sm text-lt-muted-fg",
-					children: description
-				})]
+				children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), description && /* @__PURE__ */ jsx(DialogDescription, { children: description })]
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "mt-6 flex justify-end gap-2",
 				children: [/* @__PURE__ */ jsx(Button, {
@@ -44,7 +38,7 @@ function ConfirmDialog({ title, description, confirmLabel, cancelLabel = "Cancel
 					children: [processing && /* @__PURE__ */ jsx(Spinner, {}), confirmLabel]
 				})]
 			})]
-		})] })
+		})
 	});
 }
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"confirm-dialog.js","names":[],"sources":["../../../resources/js/core/components/confirm-dialog.tsx"],"sourcesContent":["import * as Dialog from \"@radix-ui/react-dialog\";\nimport type { ButtonVariant } from \"@lattice/lattice/types/generated\";\nimport { Button } from \"./button\";\nimport { Spinner } from \"./spinner\";\n\nexport function ConfirmDialog({\n  title,\n  description,\n  confirmLabel,\n  cancelLabel = \"Cancel\",\n  confirmVariant = \"default\",\n  processing = false,\n  confirmDisabled = false,\n  onConfirm,\n  onCancel,\n}: {\n  title: string;\n  description?: string;\n  confirmLabel: string;\n  cancelLabel?: string;\n  confirmVariant?: ButtonVariant;\n  processing?: boolean;\n  confirmDisabled?: boolean;\n  onConfirm: () => void;\n  onCancel: () => void;\n}) {\n  const blockWhileProcessing = (event: Event): void => {\n    if (processing) {\n      event.preventDefault();\n    }\n  };\n\n  return (\n    <Dialog.Root\n      open\n      onOpenChange={(open) => {\n        if (!open) {\n          onCancel();\n        }\n      }}\n    >\n      <Dialog.Portal>\n        <Dialog.Overlay className=\"fixed inset-0 z-50 bg-black/50\" />\n        <Dialog.Content\n          {...(description ? {} : { \"aria-describedby\": undefined })}\n          className=\"fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lg\"\n          onEscapeKeyDown={blockWhileProcessing}\n          onInteractOutside={blockWhileProcessing}\n        >\n          <div className=\"grid gap-2\">\n            <Dialog.Title className=\"text-lg font-semibold leading-none tracking-tight\">\n              {title}\n            </Dialog.Title>\n            {description && (\n              <Dialog.Description className=\"text-sm text-lt-muted-fg\">\n                {description}\n              </Dialog.Description>\n            )}\n          </div>\n          <div className=\"mt-6 flex justify-end gap-2\">\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              data-test=\"confirm-cancel\"\n              disabled={processing}\n              onClick={onCancel}\n            >\n              {cancelLabel}\n            </Button>\n            <Button\n              type=\"button\"\n              variant={confirmVariant}\n              data-test=\"confirm-accept\"\n              disabled={processing || confirmDisabled}\n              onClick={onConfirm}\n            >\n              {processing && <Spinner />}\n              {confirmLabel}\n            </Button>\n          </div>\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,cAAc,EAC5B,OACA,aACA,cACA,cAAc,UACd,iBAAiB,WACjB,aAAa,OACb,kBAAkB,OAClB,WACA,YAWC;CACD,MAAM,wBAAwB,UAAuB;EACnD,IAAI,YACF,MAAM,eAAe;CAEzB;CAEA,OACE,oBAAC,OAAO,MAAR;EACE,MAAA;EACA,eAAe,SAAS;GACtB,IAAI,CAAC,MACH,SAAS;EAEb;YAEA,qBAAC,OAAO,QAAR,EAAA,UAAA,CACE,oBAAC,OAAO,SAAR,EAAgB,WAAU,iCAAkC,CAAA,GAC5D,qBAAC,OAAO,SAAR;GACE,GAAK,cAAc,CAAC,IAAI,EAAE,oBAAoB,KAAA,EAAU;GACxD,WAAU;GACV,iBAAiB;GACjB,mBAAmB;aAJrB,CAME,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAO,OAAR;KAAc,WAAU;eACrB;IACW,CAAA,GACb,eACC,oBAAC,OAAO,aAAR;KAAoB,WAAU;eAC3B;IACiB,CAAA,CAEnB;OACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,MAAK;KACL,SAAQ;KACR,aAAU;KACV,UAAU;KACV,SAAS;eAER;IACK,CAAA,GACR,qBAAC,QAAD;KACE,MAAK;KACL,SAAS;KACT,aAAU;KACV,UAAU,cAAc;KACxB,SAAS;eALX,CAOG,cAAc,oBAAC,SAAD,CAAU,CAAA,GACxB,YACK;MACL;KACS;IACH,EAAA,CAAA;CACJ,CAAA;AAEjB"}
+{"version":3,"file":"confirm-dialog.js","names":[],"sources":["../../../resources/js/core/components/confirm-dialog.tsx"],"sourcesContent":["import type { ButtonVariant } from \"@lattice-php/lattice/types/generated\";\nimport { Button } from \"./button\";\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from \"./dialog\";\nimport { Spinner } from \"./spinner\";\n\nexport function ConfirmDialog({\n  title,\n  description,\n  confirmLabel,\n  cancelLabel = \"Cancel\",\n  confirmVariant = \"default\",\n  processing = false,\n  confirmDisabled = false,\n  onConfirm,\n  onCancel,\n}: {\n  title: string;\n  description?: string;\n  confirmLabel: string;\n  cancelLabel?: string;\n  confirmVariant?: ButtonVariant;\n  processing?: boolean;\n  confirmDisabled?: boolean;\n  onConfirm: () => void;\n  onCancel: () => void;\n}) {\n  const blockWhileProcessing = (event: Event): void => {\n    if (processing) {\n      event.preventDefault();\n    }\n  };\n\n  return (\n    <Dialog\n      open\n      onOpenChange={(open) => {\n        if (!open) {\n          onCancel();\n        }\n      }}\n    >\n      <DialogContent\n        {...(description ? {} : { \"aria-describedby\": undefined })}\n        className=\"w-full max-w-md\"\n        onEscapeKeyDown={blockWhileProcessing}\n        onInteractOutside={blockWhileProcessing}\n      >\n        <div className=\"grid gap-2\">\n          <DialogTitle>{title}</DialogTitle>\n          {description && <DialogDescription>{description}</DialogDescription>}\n        </div>\n        <div className=\"mt-6 flex justify-end gap-2\">\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            data-test=\"confirm-cancel\"\n            disabled={processing}\n            onClick={onCancel}\n          >\n            {cancelLabel}\n          </Button>\n          <Button\n            type=\"button\"\n            variant={confirmVariant}\n            data-test=\"confirm-accept\"\n            disabled={processing || confirmDisabled}\n            onClick={onConfirm}\n          >\n            {processing && <Spinner />}\n            {confirmLabel}\n          </Button>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,cAAc,EAC5B,OACA,aACA,cACA,cAAc,UACd,iBAAiB,WACjB,aAAa,OACb,kBAAkB,OAClB,WACA,YAWC;CACD,MAAM,wBAAwB,UAAuB;EACnD,IAAI,YACF,MAAM,eAAe;CAEzB;CAEA,OACE,oBAAC,QAAD;EACE,MAAA;EACA,eAAe,SAAS;GACtB,IAAI,CAAC,MACH,SAAS;EAEb;YAEA,qBAAC,eAAD;GACE,GAAK,cAAc,CAAC,IAAI,EAAE,oBAAoB,KAAA,EAAU;GACxD,WAAU;GACV,iBAAiB;GACjB,mBAAmB;aAJrB,CAME,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GAChC,eAAe,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,CAChE;OACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,MAAK;KACL,SAAQ;KACR,aAAU;KACV,UAAU;KACV,SAAS;eAER;IACK,CAAA,GACR,qBAAC,QAAD;KACE,MAAK;KACL,SAAS;KACT,aAAU;KACV,UAAU,cAAc;KACxB,SAAS;eALX,CAOG,cAAc,oBAAC,SAAD,CAAU,CAAA,GACxB,YACK;MACL;KACQ;;CACT,CAAA;AAEZ"}

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

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+/** The focus-visible ring shared by every interactive control surface. */
+export declare const FOCUS_RING = "focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]";
+/**
+ * The shared chrome for single-line form/table controls (text inputs, native
+ * selects, and the Select/filter trigger buttons). `density` is the only axis
+ * that differs between forms (comfortable) and table filters (compact); the
+ * border, focus ring, invalid, and disabled treatment are unified.
+ */
+export declare const controlSurface: (props?: ({
+    density?: "comfortable" | "compact" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ControlSurfaceVariants = VariantProps<typeof controlSurface>;

package/dist/core/components/control.js

@@ -0,0 +1,27 @@
+import { cva } from "class-variance-authority";
+//#region resources/js/core/components/control.ts
+/** The focus-visible ring shared by every interactive control surface. */
+var FOCUS_RING = "focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]";
+/**
+* The shared chrome for single-line form/table controls (text inputs, native
+* selects, and the Select/filter trigger buttons). `density` is the only axis
+* that differs between forms (comfortable) and table filters (compact); the
+* border, focus ring, invalid, and disabled treatment are unified.
+*/
+var controlSurface = cva([
+	"w-full min-w-0 rounded-lt-sm border border-lt-input shadow-xs outline-none transition-[color,box-shadow]",
+	"placeholder:text-lt-muted-fg",
+	FOCUS_RING,
+	"aria-invalid:border-lt-danger aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40",
+	"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+], {
+	variants: { density: {
+		comfortable: "h-9 bg-transparent px-3 py-1 text-base md:text-sm",
+		compact: "h-9 bg-lt-bg px-2 text-sm font-normal"
+	} },
+	defaultVariants: { density: "comfortable" }
+});
+//#endregion
+export { FOCUS_RING, controlSurface };
+
+//# sourceMappingURL=control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"control.js","names":[],"sources":["../../../resources/js/core/components/control.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n/** The focus-visible ring shared by every interactive control surface. */\nexport const FOCUS_RING =\n  \"focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]\";\n\n/**\n * The shared chrome for single-line form/table controls (text inputs, native\n * selects, and the Select/filter trigger buttons). `density` is the only axis\n * that differs between forms (comfortable) and table filters (compact); the\n * border, focus ring, invalid, and disabled treatment are unified.\n */\nexport const controlSurface = cva(\n  [\n    \"w-full min-w-0 rounded-lt-sm border border-lt-input shadow-xs outline-none transition-[color,box-shadow]\",\n    \"placeholder:text-lt-muted-fg\",\n    FOCUS_RING,\n    \"aria-invalid:border-lt-danger aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n  ],\n  {\n    variants: {\n      density: {\n        comfortable: \"h-9 bg-transparent px-3 py-1 text-base md:text-sm\",\n        compact: \"h-9 bg-lt-bg px-2 text-sm font-normal\",\n      },\n    },\n    defaultVariants: { density: \"comfortable\" },\n  },\n);\n\nexport type ControlSurfaceVariants = VariantProps<typeof controlSurface>;\n"],"mappings":";;;AAGA,IAAa,aACX;;;;;;;AAQF,IAAa,iBAAiB,IAC5B;CACE;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,SAAS;EACP,aAAa;EACb,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,SAAS,cAAc;AAC5C,CACF"}

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

@@ -0,0 +1,19 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as React from "react";
+export declare const 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";
+declare function Dialog(props: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
+declare function DialogClose(props: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
+declare function DialogContent({ children, className, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>): React.JSX.Element;
+/**
+ * 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.
+ */
+declare function DialogHeader({ closeLabel, description, title, }: {
+    closeLabel?: string;
+    description?: React.ReactNode;
+    title: React.ReactNode;
+}): React.JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle };

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.js

@@ -1,9 +1,17 @@
-import { withRefHeader } from "../component-ref.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");
@@ -12,18 +20,15 @@ var FragmentComponent = ({ node }) => {
 	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()).schema));
+			setComponents(getComponents((await apiJson(endpoint, { ref: componentRef })).schema));
 			setHasLoaded(true);
 		} finally {
 			setProcessing(false);
@@ -45,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 { Renderer, useRendererContext } from \"@lattice/lattice/core/renderer\";\nimport type { Node, RendererComponent, Schema } from \"@lattice/lattice/core/types\";\nimport { LATTICE_EVENT, type ReloadComponentEvent } from \"@lattice/lattice/events/event-names\";\n\ntype FragmentResponse = {\n  schema?: Schema;\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 = node.props.endpoint ?? \"\";\n  const isLazy = node.props.lazy === true;\n  const componentRef = node.props.ref ?? \"\";\n  const [components, setComponents] = useState(() => node.schema ?? []);\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.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  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":";;;;;;AAUA,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,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;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,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,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.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.js","names":[],"sources":["../../../resources/js/core/components/grid.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { cn } from \"@lattice/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"}
+{"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.js.map

@@ -1 +1 @@
-{"version":3,"file":"heading.js","names":[],"sources":["../../../resources/js/core/components/heading.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { cn } from \"@lattice/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"}
+{"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.js

@@ -10,6 +10,7 @@ var sizeClass = {
 	xl: "size-lt-icon-xl"
 };
 var colorClass = {
+	default: "text-lt-fg",
 	muted: "text-lt-muted-fg",
 	primary: "text-lt-primary",
 	success: "text-lt-success",

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

@@ -1 +1 @@
-{"version":3,"file":"icon.js","names":[],"sources":["../../../resources/js/core/components/icon.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { IconRenderer } from \"@lattice/lattice/icons\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\nimport type { Color, Size } from \"@lattice/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  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,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"}
+{"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.js

@@ -1,13 +1,16 @@
-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";
@@ -19,12 +22,16 @@ 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),

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 IconComponent from \"./icon\";\nimport LinkComponent from \"./link\";\nimport ModalComponent from \"./modal\";\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    fragment: eagerComponent(FragmentComponent),\n    grid: eagerComponent(GridComponent),\n    heading: eagerComponent(HeadingComponent),\n    icon: eagerComponent(IconComponent),\n    link: eagerComponent(LinkComponent),\n    modal: eagerComponent(ModalComponent),\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":";;;;;;;;;;;;;;;;AAgBA,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,MAAM,eAAe,aAAa;EAClC,OAAO,eAAe,cAAc;EACpC,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"}
+{"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"}