@lattice-php/lattice 0.2.0 → 0.4.0

package/dist/{form/components/base → core/components}/checkbox.js

@@ -1,13 +1,13 @@
-import { cn } from "../../../lib/utils.js";
-import { Icon } from "../../../icons/sprite.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../icons/sprite.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-//#region resources/js/form/components/base/checkbox.tsx
+//#region resources/js/core/components/checkbox.tsx
 function Checkbox({ className, ...props }) {
 	return /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
 		"data-slot": "checkbox",
-		className: cn("peer border-lt-input data-[state=checked]:bg-lt-primary data-[state=checked]:text-lt-primary-fg data-[state=checked]:border-lt-primary focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger size-4 shrink-0 rounded-lt-xs border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className),
+		className: cn("peer border-lt-input data-[state=checked]:bg-lt-primary data-[state=checked]:text-lt-primary-fg data-[state=checked]:border-lt-primary focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger size-4 shrink-0 rounded-lt-xs border shadow-lt-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className),
 		...props,
 		children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
 			"data-slot": "checkbox-indicator",

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../../resources/js/core/components/checkbox.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport * as React from \"react\";\n\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer border-lt-input data-[state=checked]:bg-lt-primary data-[state=checked]:text-lt-primary-fg data-[state=checked]:border-lt-primary focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger size-4 shrink-0 rounded-lt-xs border shadow-lt-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"flex items-center justify-center text-current transition-none\"\n      >\n        <Icon name=\"check\" className=\"size-lt-icon-sm\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n"],"mappings":";;;;;;AAMA,SAAS,SAAS,EAAE,WAAW,GAAG,SAA8D;CAC9F,OACE,oBAAC,kBAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,gcACA,SACF;EACA,GAAI;YAEJ,oBAAC,kBAAkB,WAAnB;GACE,aAAU;GACV,WAAU;aAEV,oBAAC,MAAD;IAAM,MAAK;IAAQ,WAAU;GAAmB,CAAA;EACrB,CAAA;CACP,CAAA;AAE5B"}

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

@@ -0,0 +1,33 @@
+import { Option } from '../types';
+import * as React from "react";
+/**
+ * A popover select list with an optional search box and single/multi selection.
+ *
+ * Selection state is controlled by the consumer (`selected` + `onSelect`); the
+ * consumer also owns option fetching. Pass `onSearch` for remote search (the
+ * combobox debounces the query and renders `options` as given); omit it to
+ * filter the provided `options` locally by label. The combobox closes itself
+ * after a single-select.
+ */
+declare function Combobox({ contentClassName, emptyLabel, loading, multiple, onSearch, onSelect, open, onOpenChange, options, searchLabel, searchPlaceholder, selected, showSearch, testId, trigger, triggerClassName, triggerProps, }: {
+    contentClassName?: string;
+    emptyLabel?: string;
+    loading?: boolean;
+    multiple?: boolean;
+    onSearch?: (query: string) => void;
+    onSelect: (value: string) => void;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    options: Option[];
+    searchLabel?: string;
+    searchPlaceholder?: string;
+    selected: string[];
+    showSearch?: boolean;
+    testId?: string;
+    trigger: React.ReactNode;
+    triggerClassName?: string;
+    triggerProps?: React.ComponentProps<"button"> & {
+        "data-test"?: string;
+    };
+}): React.JSX.Element;
+export { Combobox };

package/dist/core/components/combobox.js

@@ -0,0 +1,99 @@
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../icons/sprite.js";
+import { useT } from "../../i18n/instance.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/core/components/combobox.tsx
+var SEARCH_DEBOUNCE_MS = 250;
+/**
+* A popover select list with an optional search box and single/multi selection.
+*
+* Selection state is controlled by the consumer (`selected` + `onSelect`); the
+* consumer also owns option fetching. Pass `onSearch` for remote search (the
+* combobox debounces the query and renders `options` as given); omit it to
+* filter the provided `options` locally by label. The combobox closes itself
+* after a single-select.
+*/
+function Combobox({ contentClassName, emptyLabel, loading = false, multiple = false, onSearch, onSelect, open, onOpenChange, options, searchLabel, searchPlaceholder, selected, showSearch = true, testId, trigger, triggerClassName, triggerProps }) {
+	const { t } = useT("lattice");
+	const [query, setQuery] = useState("");
+	useEffect(() => {
+		if (!onSearch || !open) return;
+		const timer = window.setTimeout(() => onSearch(query), SEARCH_DEBOUNCE_MS);
+		return () => window.clearTimeout(timer);
+	}, [
+		query,
+		onSearch,
+		open
+	]);
+	const visibleOptions = onSearch ? options : options.filter((option) => option.label.toLowerCase().includes(query.toLowerCase()));
+	function close() {
+		setQuery("");
+		onOpenChange(false);
+	}
+	function choose(value) {
+		onSelect(value);
+		if (!multiple) close();
+	}
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: (next) => next ? onOpenChange(true) : close(),
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: triggerClassName,
+				...triggerProps,
+				children: trigger
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			align: "start",
+			className: cn("w-[var(--radix-popover-trigger-width)] overflow-hidden p-0", contentClassName),
+			children: [showSearch && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 border-b border-lt-border px-3 py-2",
+				children: [/* @__PURE__ */ jsx("input", {
+					"aria-label": searchLabel ?? t("a11y.searchOptions", "Search options"),
+					"data-slot": "combobox-search",
+					"data-test": testId ? `${testId}-search` : void 0,
+					className: "w-full bg-transparent text-sm outline-none placeholder:text-lt-muted-fg",
+					onChange: (event) => setQuery(event.target.value),
+					placeholder: searchPlaceholder,
+					value: query
+				}), loading && /* @__PURE__ */ jsx(Icon, {
+					name: "loader-2",
+					"aria-hidden": "true",
+					className: "size-lt-icon-md shrink-0 animate-spin text-lt-muted-fg"
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "max-h-60 overflow-y-auto p-1",
+				role: "listbox",
+				children: visibleOptions.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: "px-3 py-2 text-sm text-lt-muted-fg",
+					children: emptyLabel
+				}) : visibleOptions.map((option) => {
+					const isSelected = selected.includes(option.value);
+					return /* @__PURE__ */ jsxs("button", {
+						"aria-selected": isSelected,
+						className: cn("flex w-full items-center justify-between gap-2 rounded-lt-sm px-3 py-1.5 text-left text-sm transition-colors hover:bg-lt-accent hover:text-lt-accent-fg", isSelected && "bg-lt-accent/60"),
+						"data-slot": "combobox-option",
+						"data-test": testId ? `${testId}-option-${option.value}` : void 0,
+						"data-value": option.value,
+						onClick: () => choose(option.value),
+						role: "option",
+						type: "button",
+						children: [option.label, isSelected && /* @__PURE__ */ jsx(Icon, {
+							name: "check",
+							"aria-hidden": "true",
+							className: "size-lt-icon-md shrink-0"
+						})]
+					}, option.value);
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { Combobox };
+
+//# sourceMappingURL=combobox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","names":[],"sources":["../../../resources/js/core/components/combobox.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport * as React from \"react\";\nimport { useEffect, useState } from \"react\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { Option } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\nconst SEARCH_DEBOUNCE_MS = 250;\n\n/**\n * A popover select list with an optional search box and single/multi selection.\n *\n * Selection state is controlled by the consumer (`selected` + `onSelect`); the\n * consumer also owns option fetching. Pass `onSearch` for remote search (the\n * combobox debounces the query and renders `options` as given); omit it to\n * filter the provided `options` locally by label. The combobox closes itself\n * after a single-select.\n */\nfunction Combobox({\n  contentClassName,\n  emptyLabel,\n  loading = false,\n  multiple = false,\n  onSearch,\n  onSelect,\n  open,\n  onOpenChange,\n  options,\n  searchLabel,\n  searchPlaceholder,\n  selected,\n  showSearch = true,\n  testId,\n  trigger,\n  triggerClassName,\n  triggerProps,\n}: {\n  contentClassName?: string;\n  emptyLabel?: string;\n  loading?: boolean;\n  multiple?: boolean;\n  onSearch?: (query: string) => void;\n  onSelect: (value: string) => void;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  options: Option[];\n  searchLabel?: string;\n  searchPlaceholder?: string;\n  selected: string[];\n  showSearch?: boolean;\n  testId?: string;\n  trigger: React.ReactNode;\n  triggerClassName?: string;\n  triggerProps?: React.ComponentProps<\"button\"> & { \"data-test\"?: string };\n}) {\n  const { t } = useT(\"lattice\");\n  const [query, setQuery] = useState(\"\");\n\n  useEffect(() => {\n    if (!onSearch || !open) {\n      return;\n    }\n\n    const timer = window.setTimeout(() => onSearch(query), SEARCH_DEBOUNCE_MS);\n\n    return () => window.clearTimeout(timer);\n  }, [query, onSearch, open]);\n\n  const visibleOptions = onSearch\n    ? options\n    : options.filter((option) => option.label.toLowerCase().includes(query.toLowerCase()));\n\n  function close(): void {\n    setQuery(\"\");\n    onOpenChange(false);\n  }\n\n  function choose(value: string): void {\n    onSelect(value);\n\n    if (!multiple) {\n      close();\n    }\n  }\n\n  return (\n    <Popover open={open} onOpenChange={(next) => (next ? onOpenChange(true) : close())}>\n      <PopoverTrigger asChild>\n        <button type=\"button\" className={triggerClassName} {...triggerProps}>\n          {trigger}\n        </button>\n      </PopoverTrigger>\n\n      <PopoverContent\n        align=\"start\"\n        className={cn(\n          \"w-[var(--radix-popover-trigger-width)] overflow-hidden p-0\",\n          contentClassName,\n        )}\n      >\n        {showSearch && (\n          <div className=\"flex items-center gap-2 border-b border-lt-border px-3 py-2\">\n            <input\n              aria-label={searchLabel ?? t(\"a11y.searchOptions\", \"Search options\")}\n              data-slot=\"combobox-search\"\n              data-test={testId ? `${testId}-search` : undefined}\n              className=\"w-full bg-transparent text-sm outline-none placeholder:text-lt-muted-fg\"\n              onChange={(event) => setQuery(event.target.value)}\n              placeholder={searchPlaceholder}\n              value={query}\n            />\n            {loading && (\n              <Icon\n                name=\"loader-2\"\n                aria-hidden=\"true\"\n                className=\"size-lt-icon-md shrink-0 animate-spin text-lt-muted-fg\"\n              />\n            )}\n          </div>\n        )}\n\n        <div className=\"max-h-60 overflow-y-auto p-1\" role=\"listbox\">\n          {visibleOptions.length === 0 ? (\n            <p className=\"px-3 py-2 text-sm text-lt-muted-fg\">{emptyLabel}</p>\n          ) : (\n            visibleOptions.map((option) => {\n              const isSelected = selected.includes(option.value);\n\n              return (\n                <button\n                  aria-selected={isSelected}\n                  className={cn(\n                    \"flex w-full items-center justify-between gap-2 rounded-lt-sm px-3 py-1.5 text-left text-sm transition-colors hover:bg-lt-accent hover:text-lt-accent-fg\",\n                    isSelected && \"bg-lt-accent/60\",\n                  )}\n                  data-slot=\"combobox-option\"\n                  data-test={testId ? `${testId}-option-${option.value}` : undefined}\n                  data-value={option.value}\n                  key={option.value}\n                  onClick={() => choose(option.value)}\n                  role=\"option\"\n                  type=\"button\"\n                >\n                  {option.label}\n                  {isSelected && (\n                    <Icon name=\"check\" aria-hidden=\"true\" className=\"size-lt-icon-md shrink-0\" />\n                  )}\n                </button>\n              );\n            })\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport { Combobox };\n"],"mappings":";;;;;;;AAQA,IAAM,qBAAqB;;;;;;;;;;AAW3B,SAAS,SAAS,EAChB,kBACA,YACA,UAAU,OACV,WAAW,OACX,UACA,UACA,MACA,cACA,SACA,aACA,mBACA,UACA,aAAa,MACb,QACA,SACA,kBACA,gBAmBC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CAErC,gBAAgB;EACd,IAAI,CAAC,YAAY,CAAC,MAChB;EAGF,MAAM,QAAQ,OAAO,iBAAiB,SAAS,KAAK,GAAG,kBAAkB;EAEzE,aAAa,OAAO,aAAa,KAAK;CACxC,GAAG;EAAC;EAAO;EAAU;CAAI,CAAC;CAE1B,MAAM,iBAAiB,WACnB,UACA,QAAQ,QAAQ,WAAW,OAAO,MAAM,YAAY,EAAE,SAAS,MAAM,YAAY,CAAC,CAAC;CAEvF,SAAS,QAAc;EACrB,SAAS,EAAE;EACX,aAAa,KAAK;CACpB;CAEA,SAAS,OAAO,OAAqB;EACnC,SAAS,KAAK;EAEd,IAAI,CAAC,UACH,MAAM;CAEV;CAEA,OACE,qBAAC,SAAD;EAAe;EAAM,eAAe,SAAU,OAAO,aAAa,IAAI,IAAI,MAAM;YAAhF,CACE,oBAAC,gBAAD;GAAgB,SAAA;aACd,oBAAC,UAAD;IAAQ,MAAK;IAAS,WAAW;IAAkB,GAAI;cACpD;GACK,CAAA;EACM,CAAA,GAEhB,qBAAC,gBAAD;GACE,OAAM;GACN,WAAW,GACT,8DACA,gBACF;aALF,CAOG,cACC,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,SAAD;KACE,cAAY,eAAe,EAAE,sBAAsB,gBAAgB;KACnE,aAAU;KACV,aAAW,SAAS,GAAG,OAAO,WAAW,KAAA;KACzC,WAAU;KACV,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;KAChD,aAAa;KACb,OAAO;IACR,CAAA,GACA,WACC,oBAAC,MAAD;KACE,MAAK;KACL,eAAY;KACZ,WAAU;IACX,CAAA,CAEA;OAGP,oBAAC,OAAD;IAAK,WAAU;IAA+B,MAAK;cAChD,eAAe,WAAW,IACzB,oBAAC,KAAD;KAAG,WAAU;eAAsC;IAAc,CAAA,IAEjE,eAAe,KAAK,WAAW;KAC7B,MAAM,aAAa,SAAS,SAAS,OAAO,KAAK;KAEjD,OACE,qBAAC,UAAD;MACE,iBAAe;MACf,WAAW,GACT,2JACA,cAAc,iBAChB;MACA,aAAU;MACV,aAAW,SAAS,GAAG,OAAO,UAAU,OAAO,UAAU,KAAA;MACzD,cAAY,OAAO;MAEnB,eAAe,OAAO,OAAO,KAAK;MAClC,MAAK;MACL,MAAK;gBAZP,CAcG,OAAO,OACP,cACC,oBAAC,MAAD;OAAM,MAAK;OAAQ,eAAY;OAAO,WAAU;MAA4B,CAAA,CAExE;QATD,OAAO,KASN;IAEZ,CAAC;GAEA,CAAA,CACS;IACT;;AAEb"}

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-lt-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:bg-lt-disabled disabled:text-lt-disabled-fg"
+], {
+	variants: { density: {
+		comfortable: "h-lt-control-md bg-transparent px-3 py-1 text-base",
+		compact: "h-lt-control-md 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-lt-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:bg-lt-disabled disabled:text-lt-disabled-fg\",\n  ],\n  {\n    variants: {\n      density: {\n        comfortable: \"h-lt-control-md bg-transparent px-3 py-1 text-base\",\n        compact: \"h-lt-control-md 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-lt-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,76 @@
+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-lt-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,
+				"data-test": "dialog-close",
+				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-lt-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} data-test=\"dialog-close\" 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,aAAU;IAAe,MAAK;IAAO,SAAQ;cAC3E,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-lt-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-lt-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-lt-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-lt-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,qKACA,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