@lattice-php/lattice 0.19.0 → 0.21.0

package/dist/ui/heading.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/utils.js";
 import { InfoTooltip } from "./info-tooltip.js";
+import { CopyableText } from "./copyable-text.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/ui/heading.tsx
 var HeadingComponent = ({ node }) => {
@@ -7,32 +8,49 @@ var HeadingComponent = ({ node }) => {
 	const level = Math.min(Math.max(node.props.level, 1), 6);
 	const className = cn("max-w-3xl font-semibold tracking-normal text-balance text-lt-fg", level === 1 && "text-2xl font-bold leading-tight", level === 2 && "text-xl", level > 2 && "text-base");
 	const content = /* @__PURE__ */ jsxs(Fragment, { children: [text, /* @__PURE__ */ jsx(InfoTooltip, { content: tooltip })] });
+	let heading;
 	switch (level) {
-		case 1: return /* @__PURE__ */ jsx("h1", {
-			className,
-			children: content
-		});
-		case 2: return /* @__PURE__ */ jsx("h2", {
-			className,
-			children: content
-		});
-		case 3: return /* @__PURE__ */ jsx("h3", {
-			className,
-			children: content
-		});
-		case 4: return /* @__PURE__ */ jsx("h4", {
-			className,
-			children: content
-		});
-		case 5: return /* @__PURE__ */ jsx("h5", {
-			className,
-			children: content
-		});
-		default: return /* @__PURE__ */ jsx("h6", {
+		case 1:
+			heading = /* @__PURE__ */ jsx("h1", {
+				className,
+				children: content
+			});
+			break;
+		case 2:
+			heading = /* @__PURE__ */ jsx("h2", {
+				className,
+				children: content
+			});
+			break;
+		case 3:
+			heading = /* @__PURE__ */ jsx("h3", {
+				className,
+				children: content
+			});
+			break;
+		case 4:
+			heading = /* @__PURE__ */ jsx("h4", {
+				className,
+				children: content
+			});
+			break;
+		case 5:
+			heading = /* @__PURE__ */ jsx("h5", {
+				className,
+				children: content
+			});
+			break;
+		default: heading = /* @__PURE__ */ jsx("h6", {
 			className,
 			children: content
 		});
 	}
+	if (!node.props.copyable) return heading;
+	return /* @__PURE__ */ jsx(CopyableText, {
+		value: text,
+		label: text,
+		children: heading
+	});
 };
 //#endregion
 export { HeadingComponent as default };

package/dist/ui/heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"heading.js","names":[],"sources":["../../resources/js/ui/heading.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { InfoTooltip } from \"./info-tooltip\";\n\nconst HeadingComponent: RendererComponent<\"heading\"> = ({ node }) => {\n  const { text, tooltip } = 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-2xl font-bold leading-tight\",\n    level === 2 && \"text-xl\",\n    level > 2 && \"text-base\",\n  );\n\n  const content = (\n    <>\n      {text}\n      <InfoTooltip content={tooltip} />\n    </>\n  );\n\n  switch (level) {\n    case 1:\n      return <h1 className={className}>{content}</h1>;\n    case 2:\n      return <h2 className={className}>{content}</h2>;\n    case 3:\n      return <h3 className={className}>{content}</h3>;\n    case 4:\n      return <h4 className={className}>{content}</h4>;\n    case 5:\n      return <h5 className={className}>{content}</h5>;\n    default:\n      return <h6 className={className}>{content}</h6>;\n  }\n};\n\nexport default HeadingComponent;\n"],"mappings":";;;;AAIA,IAAM,oBAAkD,EAAE,WAAW;CACnE,MAAM,EAAE,MAAM,YAAY,KAAK;CAC/B,MAAM,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,OAAO,CAAC,GAAG,CAAC;CACvD,MAAM,YAAY,GAChB,mEACA,UAAU,KAAK,oCACf,UAAU,KAAK,WACf,QAAQ,KAAK,WACf;CAEA,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACG,MACD,oBAAC,aAAD,EAAa,SAAS,QAAU,CAAA,CAChC,EAAA,CAAA;CAGJ,QAAQ,OAAR;EACE,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAY,CAAA;EAChD,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAY,CAAA;EAChD,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAY,CAAA;EAChD,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAY,CAAA;EAChD,KAAK,GACH,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAY,CAAA;EAChD,SACE,OAAO,oBAAC,MAAD;GAAe;aAAY;EAAY,CAAA;CAClD;AACF"}
+{"version":3,"file":"heading.js","names":[],"sources":["../../resources/js/ui/heading.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { CopyableText } from \"./copyable-text\";\nimport { InfoTooltip } from \"./info-tooltip\";\n\nconst HeadingComponent: RendererComponent<\"heading\"> = ({ node }) => {\n  const { text, tooltip } = 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-2xl font-bold leading-tight\",\n    level === 2 && \"text-xl\",\n    level > 2 && \"text-base\",\n  );\n\n  const content = (\n    <>\n      {text}\n      <InfoTooltip content={tooltip} />\n    </>\n  );\n\n  let heading: ReactNode;\n\n  switch (level) {\n    case 1:\n      heading = <h1 className={className}>{content}</h1>;\n      break;\n    case 2:\n      heading = <h2 className={className}>{content}</h2>;\n      break;\n    case 3:\n      heading = <h3 className={className}>{content}</h3>;\n      break;\n    case 4:\n      heading = <h4 className={className}>{content}</h4>;\n      break;\n    case 5:\n      heading = <h5 className={className}>{content}</h5>;\n      break;\n    default:\n      heading = <h6 className={className}>{content}</h6>;\n  }\n\n  if (!node.props.copyable) {\n    return heading;\n  }\n\n  return (\n    <CopyableText value={text} label={text}>\n      {heading}\n    </CopyableText>\n  );\n};\n\nexport default HeadingComponent;\n"],"mappings":";;;;;AAMA,IAAM,oBAAkD,EAAE,WAAW;CACnE,MAAM,EAAE,MAAM,YAAY,KAAK;CAC/B,MAAM,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,OAAO,CAAC,GAAG,CAAC;CACvD,MAAM,YAAY,GAChB,mEACA,UAAU,KAAK,oCACf,UAAU,KAAK,WACf,QAAQ,KAAK,WACf;CAEA,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACG,MACD,oBAAC,aAAD,EAAa,SAAS,QAAU,CAAA,CAChC,EAAA,CAAA;CAGJ,IAAI;CAEJ,QAAQ,OAAR;EACE,KAAK;GACH,UAAU,oBAAC,MAAD;IAAe;cAAY;GAAY,CAAA;GACjD;EACF,KAAK;GACH,UAAU,oBAAC,MAAD;IAAe;cAAY;GAAY,CAAA;GACjD;EACF,KAAK;GACH,UAAU,oBAAC,MAAD;IAAe;cAAY;GAAY,CAAA;GACjD;EACF,KAAK;GACH,UAAU,oBAAC,MAAD;IAAe;cAAY;GAAY,CAAA;GACjD;EACF,KAAK;GACH,UAAU,oBAAC,MAAD;IAAe;cAAY;GAAY,CAAA;GACjD;EACF,SACE,UAAU,oBAAC,MAAD;GAAe;aAAY;EAAY,CAAA;CACrD;CAEA,IAAI,CAAC,KAAK,MAAM,UACd,OAAO;CAGT,OACE,oBAAC,cAAD;EAAc,OAAO;EAAM,OAAO;YAC/B;CACW,CAAA;AAElB"}

package/dist/ui/icon-button.d.ts

@@ -0,0 +1,22 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * A compact, resizable icon button — the shared affordance behind toolbar
+ * triggers, popover triggers, and inline clear/remove buttons. `ghost` matches
+ * `Button variant="ghost"` (accent hover) and reacts to `aria-pressed` (toggle)
+ * and `data-[state=open]` (a popover trigger). `segmented` joins onto the right
+ * of an adjacent input. Size defaults to `sm`; pass `size` to resize.
+ */
+declare const iconButtonVariants: (props?: ({
+    variant?: "ghost" | "segmented" | null | undefined;
+    size?: "sm" | "md" | "xs" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare function IconButton({ icon, label, active, size, variant, className, children, ref, ...props }: Omit<React.ComponentProps<"button">, "aria-pressed"> & VariantProps<typeof iconButtonVariants> & {
+    /** Icon glyph name; omit and pass `children` for custom content. */
+    icon?: string;
+    /** Accessible name (also used when the button shows only an icon). */
+    label: string;
+    /** Toggle state — sets `aria-pressed` and the pressed styling. */
+    active?: boolean;
+}): React.JSX.Element;
+export { iconButtonVariants };

package/dist/ui/icon-button.js

@@ -0,0 +1,51 @@
+import { cn } from "../lib/utils.js";
+import { Icon } from "../icons/sprite.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region resources/js/ui/icon-button.tsx
+/**
+* A compact, resizable icon button — the shared affordance behind toolbar
+* triggers, popover triggers, and inline clear/remove buttons. `ghost` matches
+* `Button variant="ghost"` (accent hover) and reacts to `aria-pressed` (toggle)
+* and `data-[state=open]` (a popover trigger). `segmented` joins onto the right
+* of an adjacent input. Size defaults to `sm`; pass `size` to resize.
+*/
+var iconButtonVariants = cva(cn("relative inline-flex shrink-0 items-center justify-center rounded-lt-sm transition-colors", "outline-none focus-visible:ring-2 focus-visible:ring-lt-ring/50", "disabled:pointer-events-none disabled:opacity-50"), {
+	variants: {
+		variant: {
+			ghost: cn("text-lt-muted-fg hover:bg-lt-accent hover:text-lt-accent-fg", "data-[state=open]:bg-lt-accent data-[state=open]:text-lt-accent-fg", "aria-pressed:bg-lt-accent aria-pressed:text-lt-accent-fg"),
+			segmented: cn("-ml-px rounded-l-none border border-lt-input text-lt-muted-fg hover:bg-lt-accent hover:text-lt-accent-fg", "data-[state=open]:z-10 data-[state=open]:border-lt-primary data-[state=open]:text-lt-fg")
+		},
+		size: {
+			xs: "size-5 [&_svg]:size-lt-icon-sm",
+			sm: "size-7 [&_svg]:size-lt-icon-md",
+			md: "size-lt-control-md [&_svg]:size-lt-icon-md"
+		}
+	},
+	defaultVariants: {
+		variant: "ghost",
+		size: "sm"
+	}
+});
+function IconButton({ icon, label, active, size, variant, className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type: "button",
+		"aria-label": label,
+		"aria-pressed": active,
+		className: cn(iconButtonVariants({
+			variant,
+			size
+		}), className),
+		...props,
+		children: [icon ? /* @__PURE__ */ jsx(Icon, {
+			name: icon,
+			"aria-hidden": "true"
+		}) : null, children]
+	});
+}
+//#endregion
+export { IconButton, iconButtonVariants };
+
+//# sourceMappingURL=icon-button.js.map

package/dist/ui/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.js","names":[],"sources":["../../resources/js/ui/icon-button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\n/**\n * A compact, resizable icon button — the shared affordance behind toolbar\n * triggers, popover triggers, and inline clear/remove buttons. `ghost` matches\n * `Button variant=\"ghost\"` (accent hover) and reacts to `aria-pressed` (toggle)\n * and `data-[state=open]` (a popover trigger). `segmented` joins onto the right\n * of an adjacent input. Size defaults to `sm`; pass `size` to resize.\n */\nconst iconButtonVariants = cva(\n  cn(\n    \"relative inline-flex shrink-0 items-center justify-center rounded-lt-sm transition-colors\",\n    \"outline-none focus-visible:ring-2 focus-visible:ring-lt-ring/50\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n  ),\n  {\n    variants: {\n      variant: {\n        ghost: cn(\n          \"text-lt-muted-fg hover:bg-lt-accent hover:text-lt-accent-fg\",\n          \"data-[state=open]:bg-lt-accent data-[state=open]:text-lt-accent-fg\",\n          \"aria-pressed:bg-lt-accent aria-pressed:text-lt-accent-fg\",\n        ),\n        segmented: cn(\n          \"-ml-px rounded-l-none border border-lt-input text-lt-muted-fg hover:bg-lt-accent hover:text-lt-accent-fg\",\n          \"data-[state=open]:z-10 data-[state=open]:border-lt-primary data-[state=open]:text-lt-fg\",\n        ),\n      },\n      size: {\n        xs: \"size-5 [&_svg]:size-lt-icon-sm\",\n        sm: \"size-7 [&_svg]:size-lt-icon-md\",\n        md: \"size-lt-control-md [&_svg]:size-lt-icon-md\",\n      },\n    },\n    defaultVariants: { variant: \"ghost\", size: \"sm\" },\n  },\n);\n\nexport function IconButton({\n  icon,\n  label,\n  active,\n  size,\n  variant,\n  className,\n  children,\n  ref,\n  ...props\n}: Omit<React.ComponentProps<\"button\">, \"aria-pressed\"> &\n  VariantProps<typeof iconButtonVariants> & {\n    /** Icon glyph name; omit and pass `children` for custom content. */\n    icon?: string;\n    /** Accessible name (also used when the button shows only an icon). */\n    label: string;\n    /** Toggle state — sets `aria-pressed` and the pressed styling. */\n    active?: boolean;\n  }) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-label={label}\n      aria-pressed={active}\n      className={cn(iconButtonVariants({ variant, size }), className)}\n      {...props}\n    >\n      {icon ? <Icon name={icon} aria-hidden=\"true\" /> : null}\n      {children}\n    </button>\n  );\n}\n\nexport { iconButtonVariants };\n"],"mappings":";;;;;;;;;;;;;AAYA,IAAM,qBAAqB,IACzB,GACE,6FACA,mEACA,kDACF,GACA;CACE,UAAU;EACR,SAAS;GACP,OAAO,GACL,+DACA,sEACA,0DACF;GACA,WAAW,GACT,4GACA,yFACF;EACF;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EAAE,SAAS;EAAS,MAAM;CAAK;AAClD,CACF;AAEA,SAAgB,WAAW,EACzB,MACA,OACA,QACA,MACA,SACA,WACA,UACA,KACA,GAAG,SASA;CACH,OACE,qBAAC,UAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,gBAAc;EACd,WAAW,GAAG,mBAAmB;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EAC9D,GAAI;YANN,CAQG,OAAO,oBAAC,MAAD;GAAM,MAAM;GAAM,eAAY;EAAQ,CAAA,IAAI,MACjD,QACK;;AAEZ"}

package/dist/ui/icon.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/utils.js";
 import { IconRenderer } from "../icons/icon-renderer.js";
+import { coerceColor, colorValue } from "../lib/color.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/ui/icon.tsx
 var sizeClass = {
@@ -12,20 +13,18 @@ var sizeClass = {
 	"3xl": "size-lt-icon-3xl",
 	"4xl": "size-lt-icon-4xl"
 };
-var colorClass = {
-	default: "text-lt-fg",
-	muted: "text-lt-muted-fg",
-	primary: "text-lt-primary",
-	success: "text-lt-success",
-	info: "text-lt-info",
-	warning: "text-lt-warning",
-	danger: "text-lt-danger"
-};
 var IconComponent = ({ node }) => {
 	const { name, size, color, class: className } = node.props;
-	return /* @__PURE__ */ jsx(IconRenderer, {
+	const icon = /* @__PURE__ */ jsx(IconRenderer, {
 		icon: name,
-		className: cn(sizeClass[size], color ? colorClass[color] : void 0, className)
+		className: cn(sizeClass[size], className)
+	});
+	const coerced = coerceColor(color);
+	if (!coerced) return icon;
+	return /* @__PURE__ */ jsx("span", {
+		className: "contents",
+		style: { color: colorValue(coerced) },
+		children: icon
 	});
 };
 //#endregion

package/dist/ui/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","names":[],"sources":["../../resources/js/ui/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  \"2xl\": \"size-lt-icon-2xl\",\n  \"3xl\": \"size-lt-icon-3xl\",\n  \"4xl\": \"size-lt-icon-4xl\",\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;CACJ,OAAO;CACP,OAAO;CACP,OAAO;AACT;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"}
+{"version":3,"file":"icon.js","names":[],"sources":["../../resources/js/ui/icon.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { coerceColor, colorValue } from \"@lattice-php/lattice/lib/color\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { 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  \"2xl\": \"size-lt-icon-2xl\",\n  \"3xl\": \"size-lt-icon-3xl\",\n  \"4xl\": \"size-lt-icon-4xl\",\n};\n\nconst IconComponent: RendererComponent<\"icon\"> = ({ node }) => {\n  const { name, size, color, class: className } = node.props;\n  const icon = <IconRenderer icon={name} className={cn(sizeClass[size], className)} />;\n  const coerced = coerceColor(color);\n\n  if (!coerced) {\n    return icon;\n  }\n\n  return (\n    <span className=\"contents\" style={{ color: colorValue(coerced) }}>\n      {icon}\n    </span>\n  );\n};\n\nexport default IconComponent;\n"],"mappings":";;;;;AAMA,IAAM,YAAkC;CACtC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;AACT;AAEA,IAAM,iBAA4C,EAAE,WAAW;CAC7D,MAAM,EAAE,MAAM,MAAM,OAAO,OAAO,cAAc,KAAK;CACrD,MAAM,OAAO,oBAAC,cAAD;EAAc,MAAM;EAAM,WAAW,GAAG,UAAU,OAAO,SAAS;CAAI,CAAA;CACnF,MAAM,UAAU,YAAY,KAAK;CAEjC,IAAI,CAAC,SACH,OAAO;CAGT,OACE,oBAAC,QAAD;EAAM,WAAU;EAAW,OAAO,EAAE,OAAO,WAAW,OAAO,EAAE;YAC5D;CACG,CAAA;AAEV"}

package/dist/ui/image-preview.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+interface PreviewableImageProps {
+    src: string;
+    alt: string;
+    previewable: boolean;
+    width?: number;
+    height?: number;
+    className?: string;
+    testId?: string;
+}
+export declare function PreviewableImage({ src, alt, previewable, width, height, className, testId, }: PreviewableImageProps): ReactNode;
+export {};

package/dist/ui/image-preview.js

@@ -0,0 +1,65 @@
+import { useT } from "../i18n/instance.js";
+import { Button } from "./button.js";
+import { Dialog, DialogClose, DialogContent, DialogTitle } from "./dialog.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/ui/image-preview.tsx
+function PreviewableImage({ src, alt, previewable, width, height, className, testId }) {
+	const { t } = useT("lattice");
+	const [open, setOpen] = useState(false);
+	const image = /* @__PURE__ */ jsx("img", {
+		alt,
+		src,
+		width,
+		height,
+		className,
+		style: width ? {
+			width,
+			height
+		} : void 0
+	});
+	if (!previewable) return image;
+	const openLabel = t("common.image.open-preview", "View image");
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-test": testId,
+		className: "cursor-zoom-in",
+		"aria-label": openLabel,
+		onClick: () => setOpen(true),
+		children: image
+	}), /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange: setOpen,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			"aria-describedby": void 0,
+			className: "max-h-[90vh] w-auto max-w-[90vw] border-none bg-transparent p-0 shadow-none",
+			children: [
+				/* @__PURE__ */ jsx(DialogTitle, {
+					className: "sr-only",
+					children: alt || openLabel
+				}),
+				/* @__PURE__ */ jsx("img", {
+					alt,
+					src,
+					"data-slot": "image-lightbox",
+					className: "max-h-[90vh] max-w-[90vw] rounded-lt object-contain"
+				}),
+				/* @__PURE__ */ jsx(DialogClose, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						icon: "x",
+						"aria-label": t("common.close", "Close"),
+						"data-test": "lightbox-close",
+						size: "icon",
+						variant: "ghost",
+						className: "absolute top-2 right-2 bg-lt-bg/80 hover:bg-lt-bg"
+					})
+				})
+			]
+		})
+	})] });
+}
+//#endregion
+export { PreviewableImage };
+
+//# sourceMappingURL=image-preview.js.map

package/dist/ui/image-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-preview.js","names":[],"sources":["../../resources/js/ui/image-preview.tsx"],"sourcesContent":["import { useT } from \"@lattice-php/lattice/i18n\";\nimport { type ReactNode, useState } from \"react\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { Dialog, DialogClose, DialogContent, DialogTitle } from \"./dialog\";\n\ninterface PreviewableImageProps {\n  src: string;\n  alt: string;\n  previewable: boolean;\n  width?: number;\n  height?: number;\n  className?: string;\n  testId?: string;\n}\n\nexport function PreviewableImage({\n  src,\n  alt,\n  previewable,\n  width,\n  height,\n  className,\n  testId,\n}: PreviewableImageProps): ReactNode {\n  const { t } = useT(\"lattice\");\n  const [open, setOpen] = useState(false);\n\n  const image = (\n    <img\n      alt={alt}\n      src={src}\n      width={width}\n      height={height}\n      className={className}\n      style={width ? { width, height } : undefined}\n    />\n  );\n\n  if (!previewable) {\n    return image;\n  }\n\n  const openLabel = t(\"common.image.open-preview\", \"View image\");\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        data-test={testId}\n        className=\"cursor-zoom-in\"\n        aria-label={openLabel}\n        onClick={() => setOpen(true)}\n      >\n        {image}\n      </button>\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogContent\n          aria-describedby={undefined}\n          className=\"max-h-[90vh] w-auto max-w-[90vw] border-none bg-transparent p-0 shadow-none\"\n        >\n          <DialogTitle className=\"sr-only\">{alt || openLabel}</DialogTitle>\n          <img\n            alt={alt}\n            src={src}\n            data-slot=\"image-lightbox\"\n            className=\"max-h-[90vh] max-w-[90vw] rounded-lt object-contain\"\n          />\n          <DialogClose asChild>\n            <Button\n              icon=\"x\"\n              aria-label={t(\"common.close\", \"Close\")}\n              data-test=\"lightbox-close\"\n              size=\"icon\"\n              variant=\"ghost\"\n              className=\"absolute top-2 right-2 bg-lt-bg/80 hover:bg-lt-bg\"\n            />\n          </DialogClose>\n        </DialogContent>\n      </Dialog>\n    </>\n  );\n}\n"],"mappings":";;;;;;AAeA,SAAgB,iBAAiB,EAC/B,KACA,KACA,aACA,OACA,QACA,WACA,UACmC;CACnC,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,QACJ,oBAAC,OAAD;EACO;EACA;EACE;EACC;EACG;EACX,OAAO,QAAQ;GAAE;GAAO;EAAO,IAAI,KAAA;CACpC,CAAA;CAGH,IAAI,CAAC,aACH,OAAO;CAGT,MAAM,YAAY,EAAE,6BAA6B,YAAY;CAE7D,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;EACE,MAAK;EACL,aAAW;EACX,WAAU;EACV,cAAY;EACZ,eAAe,QAAQ,IAAI;YAE1B;CACK,CAAA,GACR,oBAAC,QAAD;EAAc;EAAM,cAAc;YAChC,qBAAC,eAAD;GACE,oBAAkB,KAAA;GAClB,WAAU;aAFZ;IAIE,oBAAC,aAAD;KAAa,WAAU;eAAW,OAAO;IAAuB,CAAA;IAChE,oBAAC,OAAD;KACO;KACA;KACL,aAAU;KACV,WAAU;IACX,CAAA;IACD,oBAAC,aAAD;KAAa,SAAA;eACX,oBAAC,QAAD;MACE,MAAK;MACL,cAAY,EAAE,gBAAgB,OAAO;MACrC,aAAU;MACV,MAAK;MACL,SAAQ;MACR,WAAU;KACX,CAAA;IACU,CAAA;GACA;;CACT,CAAA,CACR,EAAA,CAAA;AAEN"}

package/dist/ui/image.d.ts

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

package/dist/ui/image.js

@@ -0,0 +1,21 @@
+import { cn } from "../lib/utils.js";
+import { nodeIdentity } from "../core/test-id.js";
+import { PreviewableImage } from "./image-preview.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/ui/image.tsx
+var ImageComponent = ({ node }) => {
+	const { src, alt, size, circular, previewable } = node.props;
+	return /* @__PURE__ */ jsx(PreviewableImage, {
+		alt: alt ?? "",
+		className: cn("object-cover", circular ? "rounded-full" : "rounded-lt-sm"),
+		height: size ?? void 0,
+		previewable,
+		src,
+		testId: nodeIdentity(node),
+		width: size ?? void 0
+	});
+};
+//#endregion
+export { ImageComponent as default };
+
+//# sourceMappingURL=image.js.map

package/dist/ui/image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","names":[],"sources":["../../resources/js/ui/image.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { PreviewableImage } from \"./image-preview\";\n\nconst ImageComponent: RendererComponent<\"image\"> = ({ node }) => {\n  const { src, alt, size, circular, previewable } = node.props;\n\n  return (\n    <PreviewableImage\n      alt={alt ?? \"\"}\n      className={cn(\"object-cover\", circular ? \"rounded-full\" : \"rounded-lt-sm\")}\n      height={size ?? undefined}\n      previewable={previewable}\n      src={src}\n      testId={nodeIdentity(node)}\n      width={size ?? undefined}\n    />\n  );\n};\n\nexport default ImageComponent;\n"],"mappings":";;;;;AAKA,IAAM,kBAA8C,EAAE,WAAW;CAC/D,MAAM,EAAE,KAAK,KAAK,MAAM,UAAU,gBAAgB,KAAK;CAEvD,OACE,oBAAC,kBAAD;EACE,KAAK,OAAO;EACZ,WAAW,GAAG,gBAAgB,WAAW,iBAAiB,eAAe;EACzE,QAAQ,QAAQ,KAAA;EACH;EACR;EACL,QAAQ,aAAa,IAAI;EACzB,OAAO,QAAQ,KAAA;CAChB,CAAA;AAEL"}

package/dist/ui/index.d.ts

@@ -10,8 +10,9 @@ export { ConfirmDialog } from './confirm-dialog.js';
 export { ActionTrigger, ActionTriggerProvider, useActionTrigger, useClickBehavior, } from './click-behavior.js';
 export type { ActionTriggerRenderer, ClickBehavior, TriggerState } from './click-behavior.js';
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from './dialog.js';
-export { CopyableText, copyToClipboard } from './copyable-text.js';
+export { CopyButton, CopyableText, copyToClipboard } from './copyable-text.js';
 export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from './dropdown-menu.js';
+export { PreviewableImage } from './image-preview.js';
 export { InfoTooltip } from './info-tooltip.js';
 export { Input } from './input.js';
 export { default as InputError } from './input-error.js';

package/dist/ui/index.js

@@ -10,17 +10,18 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
 import { Badge, badgeVariants } from "./badge.js";
 import { InfoTooltip } from "./info-tooltip.js";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card.js";
+import { CopyButton, CopyableText, copyToClipboard } from "./copyable-text.js";
+import { PreviewableImage } from "./image-preview.js";
 import { TextLink } from "./link.js";
 import { SegmentedPills } from "./segmented-pills.js";
-import { CopyableText, copyToClipboard } from "./copyable-text.js";
 import { uiComponents } from "./plugin.js";
 import InputError from "./input-error.js";
 import { Label } from "./label.js";
 import { Checkbox } from "./checkbox.js";
-import { AffixGroup } from "./affix-group.js";
 import { Input } from "./input.js";
+import { AffixGroup } from "./affix-group.js";
 import { InputOTP } from "./input-otp.js";
 import PasswordInput from "./password-input.js";
 import { Combobox } from "./combobox.js";
 import { Textarea } from "./textarea.js";
-export { ActionMenuProvider, ActionTrigger, ActionTriggerProvider, AffixGroup, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Combobox, ConfirmDialog, CopyableText, Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, InfoTooltip, Input, InputError, InputOTP, Label, PasswordInput, Popover, PopoverClose, PopoverContent, PopoverTrigger, SegmentedPills, Skeleton, Spinner, TextLink, Textarea, actionMenuItemClassName, badgeVariants, buttonVariants, copyToClipboard, uiComponents, useActionMenu, useActionTrigger, useClickBehavior };
+export { ActionMenuProvider, ActionTrigger, ActionTriggerProvider, AffixGroup, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Combobox, ConfirmDialog, CopyButton, CopyableText, Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, InfoTooltip, Input, InputError, InputOTP, Label, PasswordInput, Popover, PopoverClose, PopoverContent, PopoverTrigger, PreviewableImage, SegmentedPills, Skeleton, Spinner, TextLink, Textarea, actionMenuItemClassName, badgeVariants, buttonVariants, copyToClipboard, uiComponents, useActionMenu, useActionTrigger, useClickBehavior };

package/dist/ui/info-tooltip.js

@@ -8,7 +8,7 @@ function InfoTooltip({ content }) {
 	if (!content) return null;
 	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 		type: "button",
-		"aria-label": t("common.moreInfo", "More information"),
+		"aria-label": t("common.more-info", "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",

package/dist/ui/info-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"info-tooltip.js","names":[],"sources":["../../resources/js/ui/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(\"common.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,mBAAmB,kBAAkB;EACnD,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"}
+{"version":3,"file":"info-tooltip.js","names":[],"sources":["../../resources/js/ui/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(\"common.more-info\", \"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,oBAAoB,kBAAkB;EACpD,WAAU;YAEV,oBAAC,MAAD;GAAM,MAAK;GAAO,WAAU;EAAmB,CAAA;CACjC,CAAA,GAChB,oBAAC,gBAAD;EACE,OAAM;EACN,WAAU;EACV,yBAAyB,EAAE,QAAQ,QAAQ;CAC5C,CAAA,CACM,EAAA,CAAA;AAEb"}

package/dist/ui/input.d.ts

@@ -1,3 +1,5 @@
+import { VariantProps } from 'class-variance-authority';
+import { controlSurface } from './control.js';
 import * as React from "react";
-declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+declare function Input({ className, type, density, ...props }: React.ComponentProps<"input"> & VariantProps<typeof controlSurface>): React.JSX.Element;
 export { Input };

package/dist/ui/input.js

@@ -3,11 +3,11 @@ import { controlSurface } from "./control.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/ui/input.tsx
-function Input({ className, type, ...props }) {
+function Input({ className, type, density, ...props }) {
 	return /* @__PURE__ */ jsx("input", {
 		type,
 		"data-slot": "input",
-		className: cn(controlSurface(), "file:text-lt-fg selection:bg-lt-primary selection:text-lt-primary-fg file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium", className),
+		className: cn(controlSurface({ density }), "file:text-lt-fg selection:bg-lt-primary selection:text-lt-primary-fg file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium", className),
 		...props
 	});
 }

package/dist/ui/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":[],"sources":["../../resources/js/ui/input.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { controlSurface } from \"@lattice-php/lattice/ui/control\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        controlSurface(),\n        \"file:text-lt-fg selection:bg-lt-primary selection:text-lt-primary-fg file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Input };\n"],"mappings":";;;;;AAKA,SAAS,MAAM,EAAE,WAAW,MAAM,GAAG,SAAwC;CAC3E,OACE,oBAAC,SAAD;EACQ;EACN,aAAU;EACV,WAAW,GACT,eAAe,GACf,kKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"input.js","names":[],"sources":["../../resources/js/ui/input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { VariantProps } from \"class-variance-authority\";\n\nimport { controlSurface } from \"@lattice-php/lattice/ui/control\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction Input({\n  className,\n  type,\n  density,\n  ...props\n}: React.ComponentProps<\"input\"> & VariantProps<typeof controlSurface>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        controlSurface({ density }),\n        \"file:text-lt-fg selection:bg-lt-primary selection:text-lt-primary-fg file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Input };\n"],"mappings":";;;;;AAMA,SAAS,MAAM,EACb,WACA,MACA,SACA,GAAG,SACmE;CACtE,OACE,oBAAC,SAAD;EACQ;EACN,aAAU;EACV,WAAW,GACT,eAAe,EAAE,QAAQ,CAAC,GAC1B,kKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/modal.js

@@ -1,6 +1,6 @@
-import { LATTICE_EVENT } from "../events/event-names.js";
+import { LATTICE_EVENT } from "../core/event-names.js";
 import { Dialog, DialogContent, DialogHeader } from "./dialog.js";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/ui/modal.tsx
 function matchesModal(event, modal) {
@@ -12,12 +12,17 @@ var ModalComponent = ({ children, node }) => {
 	const description = node.props.description;
 	const closeLabel = node.props.closeLabel;
 	const [isOpen, setIsOpen] = useState(node.props.open === true);
+	const openerRef = useRef(null);
+	const wasOpenRef = useRef(isOpen);
 	useEffect(() => {
 		if (node.props.open === true) setIsOpen(true);
 	}, [node.props.open]);
 	useEffect(() => {
 		function open(event) {
-			if (node.id && matchesModal(event, node.id)) setIsOpen(true);
+			if (node.id && matchesModal(event, node.id)) {
+				openerRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+				setIsOpen(true);
+			}
 		}
 		function close(event) {
 			if (!node.id || matchesModal(event, node.id)) setIsOpen(false);
@@ -29,12 +34,20 @@ var ModalComponent = ({ children, node }) => {
 			window.removeEventListener(LATTICE_EVENT.closeModal, close);
 		};
 	}, [node.id]);
+	useEffect(() => {
+		if (wasOpenRef.current && !isOpen) {
+			const opener = openerRef.current;
+			if (opener) requestAnimationFrame(() => opener.focus());
+		}
+		wasOpenRef.current = isOpen;
+	}, [isOpen]);
 	return /* @__PURE__ */ jsx(Dialog, {
 		open: isOpen,
 		onOpenChange: setIsOpen,
 		children: /* @__PURE__ */ jsxs(DialogContent, {
 			...description ? {} : { "aria-describedby": void 0 },
-			className: "max-h-[min(680px,calc(100vh-2rem))] w-full max-w-lg overflow-y-auto",
+			placement: node.props.side ?? "center",
+			width: node.props.width,
 			children: [/* @__PURE__ */ jsx(DialogHeader, {
 				closeLabel,
 				description,

package/dist/ui/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","names":[],"sources":["../../resources/js/ui/modal.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { Dialog, DialogContent, DialogHeader } from \"@lattice-php/lattice/ui/dialog\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\n\ntype ModalEvent = CustomEvent<{\n  modal: string | null;\n}>;\n\nfunction matchesModal(event: Event, modal: string): boolean {\n  const target = (event as ModalEvent).detail?.modal;\n\n  return target == null || target === modal;\n}\n\nconst ModalComponent: RendererComponent<\"modal\"> = ({ children, node }) => {\n  const title = node.props.title ?? \"Dialog\";\n  const description = node.props.description;\n  const closeLabel = node.props.closeLabel;\n  const [isOpen, setIsOpen] = useState(node.props.open === true);\n\n  // Honour server-driven open changes across re-renders, not just on mount. One\n  // way on purpose: closing stays user/closeModal-driven so it never fights a\n  // manual close, and the dep keeps it from re-firing while open stays true.\n  useEffect(() => {\n    if (node.props.open === true) {\n      setIsOpen(true);\n    }\n  }, [node.props.open]);\n\n  useEffect(() => {\n    function open(event: Event): void {\n      if (node.id && matchesModal(event, node.id)) {\n        setIsOpen(true);\n      }\n    }\n\n    function close(event: Event): void {\n      if (!node.id || matchesModal(event, node.id)) {\n        setIsOpen(false);\n      }\n    }\n\n    window.addEventListener(LATTICE_EVENT.openModal, open);\n    window.addEventListener(LATTICE_EVENT.closeModal, close);\n\n    return () => {\n      window.removeEventListener(LATTICE_EVENT.openModal, open);\n      window.removeEventListener(LATTICE_EVENT.closeModal, close);\n    };\n  }, [node.id]);\n\n  return (\n    <Dialog open={isOpen} onOpenChange={setIsOpen}>\n      <DialogContent\n        {...(description ? {} : { \"aria-describedby\": undefined })}\n        className=\"max-h-[min(680px,calc(100vh-2rem))] w-full max-w-lg overflow-y-auto\"\n      >\n        <DialogHeader closeLabel={closeLabel} description={description} title={title} />\n        <div className=\"mt-6 space-y-6\">{children}</div>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport default ModalComponent;\n"],"mappings":";;;;;AASA,SAAS,aAAa,OAAc,OAAwB;CAC1D,MAAM,SAAU,MAAqB,QAAQ;CAE7C,OAAO,UAAU,QAAQ,WAAW;AACtC;AAEA,IAAM,kBAA8C,EAAE,UAAU,WAAW;CACzE,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,cAAc,KAAK,MAAM;CAC/B,MAAM,aAAa,KAAK,MAAM;CAC9B,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK,MAAM,SAAS,IAAI;CAK7D,gBAAgB;EACd,IAAI,KAAK,MAAM,SAAS,MACtB,UAAU,IAAI;CAElB,GAAG,CAAC,KAAK,MAAM,IAAI,CAAC;CAEpB,gBAAgB;EACd,SAAS,KAAK,OAAoB;GAChC,IAAI,KAAK,MAAM,aAAa,OAAO,KAAK,EAAE,GACxC,UAAU,IAAI;EAElB;EAEA,SAAS,MAAM,OAAoB;GACjC,IAAI,CAAC,KAAK,MAAM,aAAa,OAAO,KAAK,EAAE,GACzC,UAAU,KAAK;EAEnB;EAEA,OAAO,iBAAiB,cAAc,WAAW,IAAI;EACrD,OAAO,iBAAiB,cAAc,YAAY,KAAK;EAEvD,aAAa;GACX,OAAO,oBAAoB,cAAc,WAAW,IAAI;GACxD,OAAO,oBAAoB,cAAc,YAAY,KAAK;EAC5D;CACF,GAAG,CAAC,KAAK,EAAE,CAAC;CAEZ,OACE,oBAAC,QAAD;EAAQ,MAAM;EAAQ,cAAc;YAClC,qBAAC,eAAD;GACE,GAAK,cAAc,CAAC,IAAI,EAAE,oBAAoB,KAAA,EAAU;GACxD,WAAU;aAFZ,CAIE,oBAAC,cAAD;IAA0B;IAAyB;IAAoB;GAAQ,CAAA,GAC/E,oBAAC,OAAD;IAAK,WAAU;IAAkB;GAAc,CAAA,CAClC;;CACT,CAAA;AAEZ"}
+{"version":3,"file":"modal.js","names":[],"sources":["../../resources/js/ui/modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { Dialog, DialogContent, DialogHeader } from \"@lattice-php/lattice/ui/dialog\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/core/event-names\";\n\ntype ModalEvent = CustomEvent<{\n  modal: string | null;\n}>;\n\nfunction matchesModal(event: Event, modal: string): boolean {\n  const target = (event as ModalEvent).detail?.modal;\n\n  return target == null || target === modal;\n}\n\nconst ModalComponent: RendererComponent<\"modal\"> = ({ children, node }) => {\n  const title = node.props.title ?? \"Dialog\";\n  const description = node.props.description;\n  const closeLabel = node.props.closeLabel;\n  const [isOpen, setIsOpen] = useState(node.props.open === true);\n  const openerRef = useRef<HTMLElement | null>(null);\n  const wasOpenRef = useRef(isOpen);\n\n  // Honour server-driven open changes across re-renders, not just on mount. One\n  // way on purpose: closing stays user/closeModal-driven so it never fights a\n  // manual close, and the dep keeps it from re-firing while open stays true.\n  useEffect(() => {\n    if (node.props.open === true) {\n      setIsOpen(true);\n    }\n  }, [node.props.open]);\n\n  useEffect(() => {\n    function open(event: Event): void {\n      if (node.id && matchesModal(event, node.id)) {\n        openerRef.current =\n          document.activeElement instanceof HTMLElement ? document.activeElement : null;\n        setIsOpen(true);\n      }\n    }\n\n    function close(event: Event): void {\n      if (!node.id || matchesModal(event, node.id)) {\n        setIsOpen(false);\n      }\n    }\n\n    window.addEventListener(LATTICE_EVENT.openModal, open);\n    window.addEventListener(LATTICE_EVENT.closeModal, close);\n\n    return () => {\n      window.removeEventListener(LATTICE_EVENT.openModal, open);\n      window.removeEventListener(LATTICE_EVENT.closeModal, close);\n    };\n  }, [node.id]);\n\n  // Radix only restores focus to a `DialogTrigger`-registered element, and this\n  // modal is opened imperatively rather than through one. Own the restore\n  // ourselves instead: whatever had focus when the modal opened gets it back\n  // once the closing dialog has finished unmounting.\n  useEffect(() => {\n    if (wasOpenRef.current && !isOpen) {\n      const opener = openerRef.current;\n\n      if (opener) {\n        requestAnimationFrame(() => opener.focus());\n      }\n    }\n\n    wasOpenRef.current = isOpen;\n  }, [isOpen]);\n\n  return (\n    <Dialog open={isOpen} onOpenChange={setIsOpen}>\n      <DialogContent\n        {...(description ? {} : { \"aria-describedby\": undefined })}\n        placement={node.props.side ?? \"center\"}\n        width={node.props.width}\n      >\n        <DialogHeader closeLabel={closeLabel} description={description} title={title} />\n        <div className=\"mt-6 space-y-6\">{children}</div>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport default ModalComponent;\n"],"mappings":";;;;;AASA,SAAS,aAAa,OAAc,OAAwB;CAC1D,MAAM,SAAU,MAAqB,QAAQ;CAE7C,OAAO,UAAU,QAAQ,WAAW;AACtC;AAEA,IAAM,kBAA8C,EAAE,UAAU,WAAW;CACzE,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,cAAc,KAAK,MAAM;CAC/B,MAAM,aAAa,KAAK,MAAM;CAC9B,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK,MAAM,SAAS,IAAI;CAC7D,MAAM,YAAY,OAA2B,IAAI;CACjD,MAAM,aAAa,OAAO,MAAM;CAKhC,gBAAgB;EACd,IAAI,KAAK,MAAM,SAAS,MACtB,UAAU,IAAI;CAElB,GAAG,CAAC,KAAK,MAAM,IAAI,CAAC;CAEpB,gBAAgB;EACd,SAAS,KAAK,OAAoB;GAChC,IAAI,KAAK,MAAM,aAAa,OAAO,KAAK,EAAE,GAAG;IAC3C,UAAU,UACR,SAAS,yBAAyB,cAAc,SAAS,gBAAgB;IAC3E,UAAU,IAAI;GAChB;EACF;EAEA,SAAS,MAAM,OAAoB;GACjC,IAAI,CAAC,KAAK,MAAM,aAAa,OAAO,KAAK,EAAE,GACzC,UAAU,KAAK;EAEnB;EAEA,OAAO,iBAAiB,cAAc,WAAW,IAAI;EACrD,OAAO,iBAAiB,cAAc,YAAY,KAAK;EAEvD,aAAa;GACX,OAAO,oBAAoB,cAAc,WAAW,IAAI;GACxD,OAAO,oBAAoB,cAAc,YAAY,KAAK;EAC5D;CACF,GAAG,CAAC,KAAK,EAAE,CAAC;CAMZ,gBAAgB;EACd,IAAI,WAAW,WAAW,CAAC,QAAQ;GACjC,MAAM,SAAS,UAAU;GAEzB,IAAI,QACF,4BAA4B,OAAO,MAAM,CAAC;EAE9C;EAEA,WAAW,UAAU;CACvB,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,oBAAC,QAAD;EAAQ,MAAM;EAAQ,cAAc;YAClC,qBAAC,eAAD;GACE,GAAK,cAAc,CAAC,IAAI,EAAE,oBAAoB,KAAA,EAAU;GACxD,WAAW,KAAK,MAAM,QAAQ;GAC9B,OAAO,KAAK,MAAM;aAHpB,CAKE,oBAAC,cAAD;IAA0B;IAAyB;IAAoB;GAAQ,CAAA,GAC/E,oBAAC,OAAD;IAAK,WAAU;IAAkB;GAAc,CAAA,CAClC;;CACT,CAAA;AAEZ"}

package/dist/ui/native-select.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import { controlSurface } from './control.js';
+import * as React from "react";
+/**
+ * A native `<select>` wearing the shared control chrome — for short, fixed
+ * option lists (filter operators, boolean/ternary states) where the full
+ * Combobox is overkill. `density` matches {@link Input}; defaults to comfortable.
+ */
+declare function NativeSelect({ className, density, children, ref, ...props }: React.ComponentProps<"select"> & VariantProps<typeof controlSurface>): React.JSX.Element;
+export { NativeSelect };

package/dist/ui/native-select.js

@@ -0,0 +1,23 @@
+import { cn } from "../lib/utils.js";
+import { controlSurface } from "./control.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/ui/native-select.tsx
+/**
+* A native `<select>` wearing the shared control chrome — for short, fixed
+* option lists (filter operators, boolean/ternary states) where the full
+* Combobox is overkill. `density` matches {@link Input}; defaults to comfortable.
+*/
+function NativeSelect({ className, density, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("select", {
+		ref,
+		"data-slot": "native-select",
+		className: cn(controlSurface({ density }), "cursor-pointer", className),
+		...props,
+		children
+	});
+}
+//#endregion
+export { NativeSelect };
+
+//# sourceMappingURL=native-select.js.map

package/dist/ui/native-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-select.js","names":[],"sources":["../../resources/js/ui/native-select.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { VariantProps } from \"class-variance-authority\";\n\nimport { controlSurface } from \"@lattice-php/lattice/ui/control\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\n/**\n * A native `<select>` wearing the shared control chrome — for short, fixed\n * option lists (filter operators, boolean/ternary states) where the full\n * Combobox is overkill. `density` matches {@link Input}; defaults to comfortable.\n */\nfunction NativeSelect({\n  className,\n  density,\n  children,\n  ref,\n  ...props\n}: React.ComponentProps<\"select\"> & VariantProps<typeof controlSurface>) {\n  return (\n    <select\n      ref={ref}\n      data-slot=\"native-select\"\n      className={cn(controlSurface({ density }), \"cursor-pointer\", className)}\n      {...props}\n    >\n      {children}\n    </select>\n  );\n}\n\nexport { NativeSelect };\n"],"mappings":";;;;;;;;;;AAWA,SAAS,aAAa,EACpB,WACA,SACA,UACA,KACA,GAAG,SACoE;CACvE,OACE,oBAAC,UAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,eAAe,EAAE,QAAQ,CAAC,GAAG,kBAAkB,SAAS;EACtE,GAAI;EAEH;CACK,CAAA;AAEZ"}

package/dist/ui/pill.d.ts

@@ -0,0 +1,2 @@
+/** Shared pill styling for the tabs strip and the segmented control. */
+export declare function pillClassName(active: boolean): string;

package/dist/ui/pill.js

@@ -0,0 +1,10 @@
+import { cn } from "../lib/utils.js";
+//#region resources/js/ui/pill.ts
+/** Shared pill styling for the tabs strip and the segmented control. */
+function pillClassName(active) {
+	return cn("whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors", active ? "bg-lt-bg text-lt-fg shadow-lt-xs" : "text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg");
+}
+//#endregion
+export { pillClassName };
+
+//# sourceMappingURL=pill.js.map

package/dist/ui/pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pill.js","names":[],"sources":["../../resources/js/ui/pill.ts"],"sourcesContent":["import { cn } from \"@lattice-php/lattice/lib/utils\";\n\n/** Shared pill styling for the tabs strip and the segmented control. */\nexport function pillClassName(active: boolean): string {\n  return cn(\n    \"whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors\",\n    active\n      ? \"bg-lt-bg text-lt-fg shadow-lt-xs\"\n      : \"text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg\",\n  );\n}\n"],"mappings":";;;AAGA,SAAgB,cAAc,QAAyB;CACrD,OAAO,GACL,qFACA,SACI,qCACA,qDACN;AACF"}