@lattice-php/lattice 0.3.0 → 0.4.0

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

@@ -29,7 +29,7 @@ var FloatingPanelComponent = ({ children, node }) => {
 	const [open, setOpen] = useState(false);
 	if (trigger.length === 0) return /* @__PURE__ */ jsx("div", {
 		"aria-label": label,
-		className: "fixed z-50 max-w-[calc(100vw-2rem)] rounded-lt border border-lt-border bg-lt-popover p-1 text-lt-popover-fg shadow-md",
+		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),
@@ -47,7 +47,7 @@ var FloatingPanelComponent = ({ children, node }) => {
 			className: cn("flex w-fit gap-2", expandsUpward ? "flex-col-reverse" : "flex-col"),
 			children: [/* @__PURE__ */ jsx("button", {
 				"aria-expanded": open,
-				className: cn("inline-flex items-center gap-2 rounded-lt border border-lt-border bg-lt-popover px-3 py-1.5 text-sm font-medium text-lt-popover-fg shadow-md hover:bg-lt-muted", anchorsToStart ? "self-start" : "self-end"),
+				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",

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

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

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 var HeadingComponent = ({ node }) => {
 	const { text } = node.props;
 	const level = Math.min(Math.max(node.props.level, 1), 6);
-	const className = cn("max-w-3xl font-semibold tracking-normal text-balance text-lt-fg", level === 1 && "text-4xl leading-tight sm:text-5xl", level === 2 && "text-2xl", level > 2 && "text-lg");
+	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");
 	switch (level) {
 		case 1: return /* @__PURE__ */ jsx("h1", {
 			className,

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

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

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

@@ -1,6 +1,6 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as React from "react";
-export declare const POPOVER_SURFACE = "z-50 rounded-lt-sm border border-lt-border bg-lt-popover text-lt-popover-fg shadow-md";
+export declare const POPOVER_SURFACE = "z-50 rounded-lt-sm border border-lt-border bg-lt-popover text-lt-popover-fg shadow-lt-md";
 declare function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
 declare function PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
 declare function PopoverClose(props: React.ComponentProps<typeof PopoverPrimitive.Close>): React.JSX.Element;

package/dist/core/components/popover.js

@@ -3,7 +3,7 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 //#region resources/js/core/components/popover.tsx
-var POPOVER_SURFACE = "z-50 rounded-lt-sm border border-lt-border bg-lt-popover text-lt-popover-fg shadow-md";
+var POPOVER_SURFACE = "z-50 rounded-lt-sm border border-lt-border bg-lt-popover text-lt-popover-fg shadow-lt-md";
 function Popover(props) {
 	return /* @__PURE__ */ jsx(PopoverPrimitive.Root, {
 		"data-slot": "popover",

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

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":[],"sources":["../../../resources/js/core/components/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport * as React from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nexport const POPOVER_SURFACE =\n  \"z-50 rounded-lt-sm border border-lt-border bg-lt-popover text-lt-popover-fg shadow-md\";\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\n\nfunction PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nfunction PopoverClose(props: React.ComponentProps<typeof PopoverPrimitive.Close>) {\n  return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />;\n}\n\nfunction PopoverContent({\n  align = \"start\",\n  className,\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        align={align}\n        className={cn(POPOVER_SURFACE, className)}\n        data-slot=\"popover-content\"\n        sideOffset={sideOffset}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n}\n\nexport { Popover, PopoverClose, PopoverContent, PopoverTrigger };\n"],"mappings":";;;;;AAIA,IAAa,kBACX;AAEF,SAAS,QAAQ,OAA2D;CAC1E,OAAO,oBAAC,iBAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;CAAQ,CAAA;AAChE;AAEA,SAAS,eAAe,OAA8D;CACpF,OAAO,oBAAC,iBAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,SAAS,aAAa,OAA4D;CAChF,OAAO,oBAAC,iBAAiB,OAAlB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,eAAe,EACtB,QAAQ,SACR,WACA,aAAa,GACb,GAAG,SACqD;CACxD,OACE,oBAAC,iBAAiB,QAAlB,EAAA,UACE,oBAAC,iBAAiB,SAAlB;EACS;EACP,WAAW,GAAG,iBAAiB,SAAS;EACxC,aAAU;EACE;EACZ,GAAI;CACL,CAAA,EACsB,CAAA;AAE7B"}
+{"version":3,"file":"popover.js","names":[],"sources":["../../../resources/js/core/components/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport * as React from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nexport const POPOVER_SURFACE =\n  \"z-50 rounded-lt-sm border border-lt-border bg-lt-popover text-lt-popover-fg shadow-lt-md\";\n\nfunction Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\n\nfunction PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nfunction PopoverClose(props: React.ComponentProps<typeof PopoverPrimitive.Close>) {\n  return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />;\n}\n\nfunction PopoverContent({\n  align = \"start\",\n  className,\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        align={align}\n        className={cn(POPOVER_SURFACE, className)}\n        data-slot=\"popover-content\"\n        sideOffset={sideOffset}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n}\n\nexport { Popover, PopoverClose, PopoverContent, PopoverTrigger };\n"],"mappings":";;;;;AAIA,IAAa,kBACX;AAEF,SAAS,QAAQ,OAA2D;CAC1E,OAAO,oBAAC,iBAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;CAAQ,CAAA;AAChE;AAEA,SAAS,eAAe,OAA8D;CACpF,OAAO,oBAAC,iBAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,SAAS,aAAa,OAA4D;CAChF,OAAO,oBAAC,iBAAiB,OAAlB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,eAAe,EACtB,QAAQ,SACR,WACA,aAAa,GACb,GAAG,SACqD;CACxD,OACE,oBAAC,iBAAiB,QAAlB,EAAA,UACE,oBAAC,iBAAiB,SAAlB;EACS;EACP,WAAW,GAAG,iBAAiB,SAAS;EACxC,aAAU;EACE;EACZ,GAAI;CACL,CAAA,EACsB,CAAA;AAE7B"}

package/dist/core/components/section.js

@@ -32,7 +32,7 @@ var SectionComponent = ({ children, node }) => {
 	const isCollapsed = collapsible && collapsed;
 	const hasHeader = Boolean(title || description || headerActions.length > 0 || collapsible);
 	return /* @__PURE__ */ jsxs("section", {
-		className: "flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-6 text-lt-surface-fg shadow-xs",
+		className: "flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-6 text-lt-surface-fg shadow-lt-sm",
 		"data-lattice-component": node.id,
 		children: [hasHeader && /* @__PURE__ */ jsxs("div", {
 			className: "flex items-start justify-between gap-4 px-6",
@@ -42,7 +42,7 @@ var SectionComponent = ({ children, node }) => {
 					"aria-expanded": !isCollapsed,
 					"aria-label": isCollapsed ? "Expand section" : "Collapse section",
 					"data-test": prefixedTestId("section-toggle", identity) ?? "section-toggle-default",
-					className: "mt-0.5 inline-flex shrink-0 items-center rounded-md p-0.5 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg",
+					className: "mt-0.5 inline-flex shrink-0 items-center rounded-lt-sm p-0.5 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg",
 					onClick: toggle,
 					type: "button",
 					children: /* @__PURE__ */ jsx(Icon, {

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

@@ -1 +1 @@
-{"version":3,"file":"section.js","names":[],"sources":["../../../resources/js/core/components/section.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { nodeIdentity, prefixedTestId } from \"@lattice-php/lattice/core/test-id\";\nimport type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction readStored(key: string, remember: boolean, fallback: boolean): boolean {\n  if (!remember || typeof window === \"undefined\") {\n    return fallback;\n  }\n\n  const stored = window.localStorage.getItem(key);\n\n  return stored === null ? fallback : stored === \"true\";\n}\n\nfunction getNodes(value: unknown): Node[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.filter(\n    (node): node is Node =>\n      typeof node === \"object\" && node !== null && \"type\" in node && typeof node.type === \"string\",\n  );\n}\n\nconst SectionComponent: RendererComponent<\"section\"> = ({ children, node }) => {\n  const { title, description } = node.props;\n  const collapsible = node.props.collapsible === true;\n  const rememberState = node.props.rememberState !== false;\n  const headerActions = getNodes(node.props.headerActions);\n  const identity = nodeIdentity(node);\n  const storageKey = `lattice:section:${identity ?? \"default\"}`;\n\n  const [collapsed, setCollapsed] = useState(() =>\n    readStored(storageKey, collapsible && rememberState, node.props.collapsed === true),\n  );\n\n  function toggle(): void {\n    setCollapsed((value) => {\n      const next = !value;\n\n      if (rememberState && typeof window !== \"undefined\") {\n        window.localStorage.setItem(storageKey, String(next));\n      }\n\n      return next;\n    });\n  }\n\n  const isCollapsed = collapsible && collapsed;\n  const hasHeader = Boolean(title || description || headerActions.length > 0 || collapsible);\n\n  return (\n    <section\n      className=\"flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-6 text-lt-surface-fg shadow-xs\"\n      data-lattice-component={node.id}\n    >\n      {hasHeader && (\n        <div className=\"flex items-start justify-between gap-4 px-6\">\n          <div className=\"flex min-w-0 items-start gap-2\">\n            {collapsible && (\n              <button\n                aria-expanded={!isCollapsed}\n                aria-label={isCollapsed ? \"Expand section\" : \"Collapse section\"}\n                data-test={prefixedTestId(\"section-toggle\", identity) ?? \"section-toggle-default\"}\n                className=\"mt-0.5 inline-flex shrink-0 items-center rounded-md p-0.5 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg\"\n                onClick={toggle}\n                type=\"button\"\n              >\n                <Icon\n                  name=\"chevron-down\"\n                  className={cn(\n                    \"size-lt-icon-md transition-transform\",\n                    isCollapsed && \"-rotate-90\",\n                  )}\n                />\n              </button>\n            )}\n            <div className=\"flex min-w-0 flex-col gap-1.5\">\n              {title && <div className=\"font-semibold leading-none\">{title}</div>}\n              {description && <div className=\"text-sm text-lt-muted-fg\">{description}</div>}\n            </div>\n          </div>\n\n          {headerActions.length > 0 && (\n            <div className=\"flex shrink-0 items-center gap-2\">\n              <Renderer nodes={headerActions} />\n            </div>\n          )}\n        </div>\n      )}\n\n      {!isCollapsed && children && <div className=\"flex flex-col gap-6 px-6\">{children}</div>}\n    </section>\n  );\n};\n\nexport default SectionComponent;\n"],"mappings":";;;;;;;AAOA,SAAS,WAAW,KAAa,UAAmB,UAA4B;CAC9E,IAAI,CAAC,YAAY,OAAO,WAAW,aACjC,OAAO;CAGT,MAAM,SAAS,OAAO,aAAa,QAAQ,GAAG;CAE9C,OAAO,WAAW,OAAO,WAAW,WAAW;AACjD;AAEA,SAAS,SAAS,OAAwB;CACxC,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,QACV,SACC,OAAO,SAAS,YAAY,SAAS,QAAQ,UAAU,QAAQ,OAAO,KAAK,SAAS,QACxF;AACF;AAEA,IAAM,oBAAkD,EAAE,UAAU,WAAW;CAC7E,MAAM,EAAE,OAAO,gBAAgB,KAAK;CACpC,MAAM,cAAc,KAAK,MAAM,gBAAgB;CAC/C,MAAM,gBAAgB,KAAK,MAAM,kBAAkB;CACnD,MAAM,gBAAgB,SAAS,KAAK,MAAM,aAAa;CACvD,MAAM,WAAW,aAAa,IAAI;CAClC,MAAM,aAAa,mBAAmB,YAAY;CAElD,MAAM,CAAC,WAAW,gBAAgB,eAChC,WAAW,YAAY,eAAe,eAAe,KAAK,MAAM,cAAc,IAAI,CACpF;CAEA,SAAS,SAAe;EACtB,cAAc,UAAU;GACtB,MAAM,OAAO,CAAC;GAEd,IAAI,iBAAiB,OAAO,WAAW,aACrC,OAAO,aAAa,QAAQ,YAAY,OAAO,IAAI,CAAC;GAGtD,OAAO;EACT,CAAC;CACH;CAEA,MAAM,cAAc,eAAe;CACnC,MAAM,YAAY,QAAQ,SAAS,eAAe,cAAc,SAAS,KAAK,WAAW;CAEzF,OACE,qBAAC,WAAD;EACE,WAAU;EACV,0BAAwB,KAAK;YAF/B,CAIG,aACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,eACC,oBAAC,UAAD;KACE,iBAAe,CAAC;KAChB,cAAY,cAAc,mBAAmB;KAC7C,aAAW,eAAe,kBAAkB,QAAQ,KAAK;KACzD,WAAU;KACV,SAAS;KACT,MAAK;eAEL,oBAAC,MAAD;MACE,MAAK;MACL,WAAW,GACT,wCACA,eAAe,YACjB;KACD,CAAA;IACK,CAAA,GAEV,qBAAC,OAAD;KAAK,WAAU;eAAf,CACG,SAAS,oBAAC,OAAD;MAAK,WAAU;gBAA8B;KAAW,CAAA,GACjE,eAAe,oBAAC,OAAD;MAAK,WAAU;gBAA4B;KAAiB,CAAA,CACzE;MACF;OAEJ,cAAc,SAAS,KACtB,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,UAAD,EAAU,OAAO,cAAgB,CAAA;GAC9B,CAAA,CAEJ;MAGN,CAAC,eAAe,YAAY,oBAAC,OAAD;GAAK,WAAU;GAA4B;EAAc,CAAA,CAC/E;;AAEb"}
+{"version":3,"file":"section.js","names":[],"sources":["../../../resources/js/core/components/section.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { nodeIdentity, prefixedTestId } from \"@lattice-php/lattice/core/test-id\";\nimport type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction readStored(key: string, remember: boolean, fallback: boolean): boolean {\n  if (!remember || typeof window === \"undefined\") {\n    return fallback;\n  }\n\n  const stored = window.localStorage.getItem(key);\n\n  return stored === null ? fallback : stored === \"true\";\n}\n\nfunction getNodes(value: unknown): Node[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.filter(\n    (node): node is Node =>\n      typeof node === \"object\" && node !== null && \"type\" in node && typeof node.type === \"string\",\n  );\n}\n\nconst SectionComponent: RendererComponent<\"section\"> = ({ children, node }) => {\n  const { title, description } = node.props;\n  const collapsible = node.props.collapsible === true;\n  const rememberState = node.props.rememberState !== false;\n  const headerActions = getNodes(node.props.headerActions);\n  const identity = nodeIdentity(node);\n  const storageKey = `lattice:section:${identity ?? \"default\"}`;\n\n  const [collapsed, setCollapsed] = useState(() =>\n    readStored(storageKey, collapsible && rememberState, node.props.collapsed === true),\n  );\n\n  function toggle(): void {\n    setCollapsed((value) => {\n      const next = !value;\n\n      if (rememberState && typeof window !== \"undefined\") {\n        window.localStorage.setItem(storageKey, String(next));\n      }\n\n      return next;\n    });\n  }\n\n  const isCollapsed = collapsible && collapsed;\n  const hasHeader = Boolean(title || description || headerActions.length > 0 || collapsible);\n\n  return (\n    <section\n      className=\"flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-6 text-lt-surface-fg shadow-lt-sm\"\n      data-lattice-component={node.id}\n    >\n      {hasHeader && (\n        <div className=\"flex items-start justify-between gap-4 px-6\">\n          <div className=\"flex min-w-0 items-start gap-2\">\n            {collapsible && (\n              <button\n                aria-expanded={!isCollapsed}\n                aria-label={isCollapsed ? \"Expand section\" : \"Collapse section\"}\n                data-test={prefixedTestId(\"section-toggle\", identity) ?? \"section-toggle-default\"}\n                className=\"mt-0.5 inline-flex shrink-0 items-center rounded-lt-sm p-0.5 text-lt-muted-fg transition-colors hover:bg-lt-muted hover:text-lt-fg\"\n                onClick={toggle}\n                type=\"button\"\n              >\n                <Icon\n                  name=\"chevron-down\"\n                  className={cn(\n                    \"size-lt-icon-md transition-transform\",\n                    isCollapsed && \"-rotate-90\",\n                  )}\n                />\n              </button>\n            )}\n            <div className=\"flex min-w-0 flex-col gap-1.5\">\n              {title && <div className=\"font-semibold leading-none\">{title}</div>}\n              {description && <div className=\"text-sm text-lt-muted-fg\">{description}</div>}\n            </div>\n          </div>\n\n          {headerActions.length > 0 && (\n            <div className=\"flex shrink-0 items-center gap-2\">\n              <Renderer nodes={headerActions} />\n            </div>\n          )}\n        </div>\n      )}\n\n      {!isCollapsed && children && <div className=\"flex flex-col gap-6 px-6\">{children}</div>}\n    </section>\n  );\n};\n\nexport default SectionComponent;\n"],"mappings":";;;;;;;AAOA,SAAS,WAAW,KAAa,UAAmB,UAA4B;CAC9E,IAAI,CAAC,YAAY,OAAO,WAAW,aACjC,OAAO;CAGT,MAAM,SAAS,OAAO,aAAa,QAAQ,GAAG;CAE9C,OAAO,WAAW,OAAO,WAAW,WAAW;AACjD;AAEA,SAAS,SAAS,OAAwB;CACxC,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,QACV,SACC,OAAO,SAAS,YAAY,SAAS,QAAQ,UAAU,QAAQ,OAAO,KAAK,SAAS,QACxF;AACF;AAEA,IAAM,oBAAkD,EAAE,UAAU,WAAW;CAC7E,MAAM,EAAE,OAAO,gBAAgB,KAAK;CACpC,MAAM,cAAc,KAAK,MAAM,gBAAgB;CAC/C,MAAM,gBAAgB,KAAK,MAAM,kBAAkB;CACnD,MAAM,gBAAgB,SAAS,KAAK,MAAM,aAAa;CACvD,MAAM,WAAW,aAAa,IAAI;CAClC,MAAM,aAAa,mBAAmB,YAAY;CAElD,MAAM,CAAC,WAAW,gBAAgB,eAChC,WAAW,YAAY,eAAe,eAAe,KAAK,MAAM,cAAc,IAAI,CACpF;CAEA,SAAS,SAAe;EACtB,cAAc,UAAU;GACtB,MAAM,OAAO,CAAC;GAEd,IAAI,iBAAiB,OAAO,WAAW,aACrC,OAAO,aAAa,QAAQ,YAAY,OAAO,IAAI,CAAC;GAGtD,OAAO;EACT,CAAC;CACH;CAEA,MAAM,cAAc,eAAe;CACnC,MAAM,YAAY,QAAQ,SAAS,eAAe,cAAc,SAAS,KAAK,WAAW;CAEzF,OACE,qBAAC,WAAD;EACE,WAAU;EACV,0BAAwB,KAAK;YAF/B,CAIG,aACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,eACC,oBAAC,UAAD;KACE,iBAAe,CAAC;KAChB,cAAY,cAAc,mBAAmB;KAC7C,aAAW,eAAe,kBAAkB,QAAQ,KAAK;KACzD,WAAU;KACV,SAAS;KACT,MAAK;eAEL,oBAAC,MAAD;MACE,MAAK;MACL,WAAW,GACT,wCACA,eAAe,YACjB;KACD,CAAA;IACK,CAAA,GAEV,qBAAC,OAAD;KAAK,WAAU;eAAf,CACG,SAAS,oBAAC,OAAD;MAAK,WAAU;gBAA8B;KAAW,CAAA,GACjE,eAAe,oBAAC,OAAD;MAAK,WAAU;gBAA4B;KAAiB,CAAA,CACzE;MACF;OAEJ,cAAc,SAAS,KACtB,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,UAAD,EAAU,OAAO,cAAgB,CAAA;GAC9B,CAAA,CAEJ;MAGN,CAAC,eAAe,YAAY,oBAAC,OAAD;GAAK,WAAU;GAA4B;EAAc,CAAA,CAC/E;;AAEb"}

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

@@ -23,7 +23,7 @@ function SegmentedPills({ ariaLabel, autoFocus = false, disabled = false, name,
 			return /* @__PURE__ */ jsx("button", {
 				"aria-checked": isSelected,
 				"data-test": `${name ?? "segment"}-${option.value}`,
-				className: cn("whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors", isSelected ? "bg-lt-bg text-lt-fg shadow-xs" : "text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg", disabled && "cursor-not-allowed opacity-60"),
+				className: cn("whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors", isSelected ? "bg-lt-bg text-lt-fg shadow-lt-xs" : "text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg", disabled && "cursor-not-allowed opacity-60"),
 				disabled,
 				onClick: () => onSelect(option.value),
 				role: "radio",

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

@@ -1 +1 @@
-{"version":3,"file":"segmented-pills.js","names":[],"sources":["../../../resources/js/core/components/segmented-pills.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport type { Option } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\n/**\n * Presentational segmented pill group. Used by the form choice field (bound to a\n * form value) and the core segmented control (standalone, emits an event).\n */\nexport function SegmentedPills({\n  ariaLabel,\n  autoFocus = false,\n  disabled = false,\n  name,\n  onSelect,\n  options,\n  tabIndex,\n  value,\n}: {\n  ariaLabel?: string;\n  autoFocus?: boolean;\n  disabled?: boolean;\n  name?: string;\n  onSelect: (value: string) => void;\n  options: Option[];\n  tabIndex?: number;\n  value: string;\n}) {\n  const groupRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!autoFocus) {\n      return;\n    }\n\n    const group = groupRef.current;\n    const target =\n      group?.querySelector<HTMLButtonElement>('button[aria-checked=\"true\"]') ??\n      group?.querySelector<HTMLButtonElement>(\"button\");\n\n    target?.focus();\n  }, [autoFocus]);\n\n  return (\n    <div\n      aria-label={ariaLabel}\n      className=\"inline-flex w-fit max-w-full gap-1 overflow-x-auto rounded-lt bg-lt-muted p-1\"\n      ref={groupRef}\n      role=\"radiogroup\"\n    >\n      {options.map((option) => {\n        const isSelected = value === option.value;\n\n        return (\n          <button\n            aria-checked={isSelected}\n            data-test={`${name ?? \"segment\"}-${option.value}`}\n            className={cn(\n              \"whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors\",\n              isSelected\n                ? \"bg-lt-bg text-lt-fg shadow-xs\"\n                : \"text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg\",\n              disabled && \"cursor-not-allowed opacity-60\",\n            )}\n            disabled={disabled}\n            key={option.value}\n            onClick={() => onSelect(option.value)}\n            role=\"radio\"\n            tabIndex={tabIndex}\n            type=\"button\"\n          >\n            {option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,eAAe,EAC7B,WACA,YAAY,OACZ,WAAW,OACX,MACA,UACA,SACA,UACA,SAUC;CACD,MAAM,WAAW,OAAuB,IAAI;CAE5C,gBAAgB;EACd,IAAI,CAAC,WACH;EAGF,MAAM,QAAQ,SAAS;EAKvB,CAHE,OAAO,cAAiC,+BAA6B,KACrE,OAAO,cAAiC,QAAQ,IAE1C,MAAM;CAChB,GAAG,CAAC,SAAS,CAAC;CAEd,OACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAU;EACV,KAAK;EACL,MAAK;YAEJ,QAAQ,KAAK,WAAW;GACvB,MAAM,aAAa,UAAU,OAAO;GAEpC,OACE,oBAAC,UAAD;IACE,gBAAc;IACd,aAAW,GAAG,QAAQ,UAAU,GAAG,OAAO;IAC1C,WAAW,GACT,qFACA,aACI,kCACA,uDACJ,YAAY,+BACd;IACU;IAEV,eAAe,SAAS,OAAO,KAAK;IACpC,MAAK;IACK;IACV,MAAK;cAEJ,OAAO;GACF,GAPD,OAAO,KAON;EAEZ,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"segmented-pills.js","names":[],"sources":["../../../resources/js/core/components/segmented-pills.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport type { Option } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\n/**\n * Presentational segmented pill group. Used by the form choice field (bound to a\n * form value) and the core segmented control (standalone, emits an event).\n */\nexport function SegmentedPills({\n  ariaLabel,\n  autoFocus = false,\n  disabled = false,\n  name,\n  onSelect,\n  options,\n  tabIndex,\n  value,\n}: {\n  ariaLabel?: string;\n  autoFocus?: boolean;\n  disabled?: boolean;\n  name?: string;\n  onSelect: (value: string) => void;\n  options: Option[];\n  tabIndex?: number;\n  value: string;\n}) {\n  const groupRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!autoFocus) {\n      return;\n    }\n\n    const group = groupRef.current;\n    const target =\n      group?.querySelector<HTMLButtonElement>('button[aria-checked=\"true\"]') ??\n      group?.querySelector<HTMLButtonElement>(\"button\");\n\n    target?.focus();\n  }, [autoFocus]);\n\n  return (\n    <div\n      aria-label={ariaLabel}\n      className=\"inline-flex w-fit max-w-full gap-1 overflow-x-auto rounded-lt bg-lt-muted p-1\"\n      ref={groupRef}\n      role=\"radiogroup\"\n    >\n      {options.map((option) => {\n        const isSelected = value === option.value;\n\n        return (\n          <button\n            aria-checked={isSelected}\n            data-test={`${name ?? \"segment\"}-${option.value}`}\n            className={cn(\n              \"whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors\",\n              isSelected\n                ? \"bg-lt-bg text-lt-fg shadow-lt-xs\"\n                : \"text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg\",\n              disabled && \"cursor-not-allowed opacity-60\",\n            )}\n            disabled={disabled}\n            key={option.value}\n            onClick={() => onSelect(option.value)}\n            role=\"radio\"\n            tabIndex={tabIndex}\n            type=\"button\"\n          >\n            {option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,eAAe,EAC7B,WACA,YAAY,OACZ,WAAW,OACX,MACA,UACA,SACA,UACA,SAUC;CACD,MAAM,WAAW,OAAuB,IAAI;CAE5C,gBAAgB;EACd,IAAI,CAAC,WACH;EAGF,MAAM,QAAQ,SAAS;EAKvB,CAHE,OAAO,cAAiC,+BAA6B,KACrE,OAAO,cAAiC,QAAQ,IAE1C,MAAM;CAChB,GAAG,CAAC,SAAS,CAAC;CAEd,OACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAU;EACV,KAAK;EACL,MAAK;YAEJ,QAAQ,KAAK,WAAW;GACvB,MAAM,aAAa,UAAU,OAAO;GAEpC,OACE,oBAAC,UAAD;IACE,gBAAc;IACd,aAAW,GAAG,QAAQ,UAAU,GAAG,OAAO;IAC1C,WAAW,GACT,qFACA,aACI,qCACA,uDACJ,YAAY,+BACd;IACU;IAEV,eAAe,SAAS,OAAO,KAAK;IACpC,MAAK;IACK;IACV,MAAK;cAEJ,OAAO;GACF,GAPD,OAAO,KAON;EAEZ,CAAC;CACE,CAAA;AAET"}

package/dist/core/components/stack.js

@@ -20,6 +20,7 @@ var stackGaps = {
 	xl: "gap-8"
 };
 var stackWidths = {
+	auto: "w-auto",
 	fill: "min-w-0 flex-1",
 	full: "w-full",
 	lg: "mx-auto w-full max-w-4xl",
@@ -38,6 +39,10 @@ var stackHeights = {
 	full: "h-full",
 	screen: "min-h-screen"
 };
+var floatClasses = {
+	end: "ml-auto",
+	start: "mr-auto"
+};
 var StackComponent = ({ children, node }) => {
 	const align = node.props.align ?? "stretch";
 	const direction = node.props.direction ?? "column";
@@ -45,10 +50,11 @@ var StackComponent = ({ children, node }) => {
 	const width = node.props.width ?? "full";
 	const justify = node.props.justify;
 	const height = node.props.height;
+	const float = node.props.float;
 	const isFlex = direction === "row" || justify != null;
 	return /* @__PURE__ */ jsx("div", {
 		"data-lattice-component": node.id,
-		className: cn(isFlex ? cn("flex", direction === "row" ? "flex-wrap" : "flex-col") : "grid content-start", isFlex ? flexAlignments[align] ?? flexAlignments.stretch : gridAlignments[align] ?? gridAlignments.stretch, stackGaps[gap] ?? stackGaps.md, stackWidths[width] ?? stackWidths.full, justify ? justifyClasses[justify] : null, height ? stackHeights[height] : null),
+		className: cn(isFlex ? cn("flex", direction === "row" ? "flex-wrap" : "flex-col") : "grid content-start", isFlex ? flexAlignments[align] ?? flexAlignments.stretch : gridAlignments[align] ?? gridAlignments.stretch, stackGaps[gap] ?? stackGaps.md, stackWidths[width] ?? stackWidths.full, justify ? justifyClasses[justify] : null, height ? stackHeights[height] : null, float ? floatClasses[float] : null),
 		children
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"stack.js","names":[],"sources":["../../../resources/js/core/components/stack.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst gridAlignments: Record<string, string> = {\n  center: \"justify-items-center text-center\",\n  start: \"justify-items-start text-left\",\n  stretch: \"justify-items-stretch\",\n};\n\nconst flexAlignments: Record<string, string> = {\n  center: \"items-center text-center\",\n  start: \"items-center text-left\",\n  stretch: \"items-stretch justify-stretch\",\n};\n\nconst stackGaps: Record<string, string> = {\n  none: \"gap-0\",\n  xs: \"gap-1\",\n  lg: \"gap-6\",\n  md: \"gap-4\",\n  sm: \"gap-2\",\n  xl: \"gap-8\",\n};\n\nconst stackWidths: Record<string, string> = {\n  fill: \"min-w-0 flex-1\",\n  full: \"w-full\",\n  lg: \"mx-auto w-full max-w-4xl\",\n  md: \"mx-auto w-full max-w-2xl\",\n  sm: \"mx-auto w-full max-w-md\",\n};\n\nconst justifyClasses: Record<string, string> = {\n  around: \"justify-around\",\n  between: \"justify-between\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  evenly: \"justify-evenly\",\n  start: \"justify-start\",\n};\n\nconst stackHeights: Record<string, string> = {\n  full: \"h-full\",\n  screen: \"min-h-screen\",\n};\n\nconst StackComponent: RendererComponent<\"stack\"> = ({ children, node }) => {\n  const align = node.props.align ?? \"stretch\";\n  const direction = node.props.direction ?? \"column\";\n  const gap = node.props.gap ?? \"md\";\n  const width = node.props.width ?? \"full\";\n  const justify = node.props.justify;\n  const height = node.props.height;\n  const isFlex = direction === \"row\" || justify != null;\n\n  return (\n    <div\n      data-lattice-component={node.id}\n      className={cn(\n        isFlex ? cn(\"flex\", direction === \"row\" ? \"flex-wrap\" : \"flex-col\") : \"grid content-start\",\n        isFlex\n          ? (flexAlignments[align] ?? flexAlignments.stretch)\n          : (gridAlignments[align] ?? gridAlignments.stretch),\n        stackGaps[gap] ?? stackGaps.md,\n        stackWidths[width] ?? stackWidths.full,\n        justify ? justifyClasses[justify] : null,\n        height ? stackHeights[height] : null,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default StackComponent;\n"],"mappings":";;;AAGA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,OAAO;CACP,SAAS;AACX;AAEA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,OAAO;CACP,SAAS;AACX;AAEA,IAAM,YAAoC;CACxC,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,cAAsC;CAC1C,MAAM;CACN,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,KAAK;CACL,QAAQ;CACR,OAAO;AACT;AAEA,IAAM,eAAuC;CAC3C,MAAM;CACN,QAAQ;AACV;AAEA,IAAM,kBAA8C,EAAE,UAAU,WAAW;CACzE,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,YAAY,KAAK,MAAM,aAAa;CAC1C,MAAM,MAAM,KAAK,MAAM,OAAO;CAC9B,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,UAAU,KAAK,MAAM;CAC3B,MAAM,SAAS,KAAK,MAAM;CAC1B,MAAM,SAAS,cAAc,SAAS,WAAW;CAEjD,OACE,oBAAC,OAAD;EACE,0BAAwB,KAAK;EAC7B,WAAW,GACT,SAAS,GAAG,QAAQ,cAAc,QAAQ,cAAc,UAAU,IAAI,sBACtE,SACK,eAAe,UAAU,eAAe,UACxC,eAAe,UAAU,eAAe,SAC7C,UAAU,QAAQ,UAAU,IAC5B,YAAY,UAAU,YAAY,MAClC,UAAU,eAAe,WAAW,MACpC,SAAS,aAAa,UAAU,IAClC;EAEC;CACE,CAAA;AAET"}
+{"version":3,"file":"stack.js","names":[],"sources":["../../../resources/js/core/components/stack.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst gridAlignments: Record<string, string> = {\n  center: \"justify-items-center text-center\",\n  start: \"justify-items-start text-left\",\n  stretch: \"justify-items-stretch\",\n};\n\nconst flexAlignments: Record<string, string> = {\n  center: \"items-center text-center\",\n  start: \"items-center text-left\",\n  stretch: \"items-stretch justify-stretch\",\n};\n\nconst stackGaps: Record<string, string> = {\n  none: \"gap-0\",\n  xs: \"gap-1\",\n  lg: \"gap-6\",\n  md: \"gap-4\",\n  sm: \"gap-2\",\n  xl: \"gap-8\",\n};\n\nconst stackWidths: Record<string, string> = {\n  auto: \"w-auto\",\n  fill: \"min-w-0 flex-1\",\n  full: \"w-full\",\n  lg: \"mx-auto w-full max-w-4xl\",\n  md: \"mx-auto w-full max-w-2xl\",\n  sm: \"mx-auto w-full max-w-md\",\n};\n\nconst justifyClasses: Record<string, string> = {\n  around: \"justify-around\",\n  between: \"justify-between\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  evenly: \"justify-evenly\",\n  start: \"justify-start\",\n};\n\nconst stackHeights: Record<string, string> = {\n  full: \"h-full\",\n  screen: \"min-h-screen\",\n};\n\nconst floatClasses: Record<string, string> = {\n  end: \"ml-auto\",\n  start: \"mr-auto\",\n};\n\nconst StackComponent: RendererComponent<\"stack\"> = ({ children, node }) => {\n  const align = node.props.align ?? \"stretch\";\n  const direction = node.props.direction ?? \"column\";\n  const gap = node.props.gap ?? \"md\";\n  const width = node.props.width ?? \"full\";\n  const justify = node.props.justify;\n  const height = node.props.height;\n  const float = node.props.float;\n  const isFlex = direction === \"row\" || justify != null;\n\n  return (\n    <div\n      data-lattice-component={node.id}\n      className={cn(\n        isFlex ? cn(\"flex\", direction === \"row\" ? \"flex-wrap\" : \"flex-col\") : \"grid content-start\",\n        isFlex\n          ? (flexAlignments[align] ?? flexAlignments.stretch)\n          : (gridAlignments[align] ?? gridAlignments.stretch),\n        stackGaps[gap] ?? stackGaps.md,\n        stackWidths[width] ?? stackWidths.full,\n        justify ? justifyClasses[justify] : null,\n        height ? stackHeights[height] : null,\n        float ? floatClasses[float] : null,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default StackComponent;\n"],"mappings":";;;AAGA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,OAAO;CACP,SAAS;AACX;AAEA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,OAAO;CACP,SAAS;AACX;AAEA,IAAM,YAAoC;CACxC,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,cAAsC;CAC1C,MAAM;CACN,MAAM;CACN,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,iBAAyC;CAC7C,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,KAAK;CACL,QAAQ;CACR,OAAO;AACT;AAEA,IAAM,eAAuC;CAC3C,MAAM;CACN,QAAQ;AACV;AAEA,IAAM,eAAuC;CAC3C,KAAK;CACL,OAAO;AACT;AAEA,IAAM,kBAA8C,EAAE,UAAU,WAAW;CACzE,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,YAAY,KAAK,MAAM,aAAa;CAC1C,MAAM,MAAM,KAAK,MAAM,OAAO;CAC9B,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,UAAU,KAAK,MAAM;CAC3B,MAAM,SAAS,KAAK,MAAM;CAC1B,MAAM,QAAQ,KAAK,MAAM;CACzB,MAAM,SAAS,cAAc,SAAS,WAAW;CAEjD,OACE,oBAAC,OAAD;EACE,0BAAwB,KAAK;EAC7B,WAAW,GACT,SAAS,GAAG,QAAQ,cAAc,QAAQ,cAAc,UAAU,IAAI,sBACtE,SACK,eAAe,UAAU,eAAe,UACxC,eAAe,UAAU,eAAe,SAC7C,UAAU,QAAQ,UAAU,IAC5B,YAAY,UAAU,YAAY,MAClC,UAAU,eAAe,WAAW,MACpC,SAAS,aAAa,UAAU,MAChC,QAAQ,aAAa,SAAS,IAChC;EAEC;CACE,CAAA;AAET"}

package/dist/core/components/tabs.js

@@ -101,7 +101,7 @@ var TabsComponent = ({ children, node }) => {
 						"aria-controls": `${tab.value}-panel`,
 						"aria-selected": isActive,
 						"data-test": `tab-${tab.value}`,
-						className: cn("whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors", isActive ? "bg-lt-bg text-lt-fg shadow-xs" : "text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg", isVertical && "text-left"),
+						className: cn("whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors", isActive ? "bg-lt-bg text-lt-fg shadow-lt-xs" : "text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg", isVertical && "text-left"),
 						id: `${tab.value}-tab`,
 						onClick: () => selectTab(tab),
 						onKeyDown: onTablistKeyDown,

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":[],"sources":["../../../resources/js/core/components/tabs.tsx"],"sourcesContent":["import { router } from \"@inertiajs/react\";\nimport { createContext, useContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport type { Tab } from \"@lattice-php/lattice/types/generated\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\n\ntype TabsContextValue = {\n  activeValue: string;\n  setActiveValue: (value: string) => void;\n};\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nfunction useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    return {\n      activeValue: \"\",\n      setActiveValue: () => {},\n    };\n  }\n\n  return context;\n}\n\ntype TabItem = {\n  confirm?: {\n    required?: boolean;\n  };\n  label: string;\n  value: string;\n};\n\nfunction getTabs(node: Node): TabItem[] {\n  return (node.schema ?? [])\n    .filter((child) => child.type === \"tab\")\n    .map((child) => {\n      const props = child.props as unknown as Tab;\n\n      return {\n        confirm: props.confirm ? { required: props.confirm.required } : undefined,\n        label: props.label,\n        value: props.value,\n      };\n    })\n    .filter((tab) => tab.value !== \"\");\n}\n\nfunction queryValue(queryKey: string, tabs: Array<{ value: string }>): string | null {\n  if (typeof window === \"undefined\") {\n    return null;\n  }\n\n  const value = new URLSearchParams(window.location.search).get(queryKey);\n\n  if (!value || !tabs.some((tab) => tab.value === value)) {\n    return null;\n  }\n\n  return value;\n}\n\nfunction replaceQueryValue(queryKey: string, value: string): void {\n  if (typeof window === \"undefined\") {\n    return;\n  }\n\n  const url = new URL(window.location.href);\n  url.searchParams.set(queryKey, value);\n  window.history.replaceState(window.history.state, \"\", `${url.pathname}${url.search}${url.hash}`);\n}\n\nfunction queryUrl(queryKey: string, value: string): string {\n  if (typeof window === \"undefined\") {\n    return \"\";\n  }\n\n  const url = new URL(window.location.href);\n  url.searchParams.set(queryKey, value);\n\n  return `${url.pathname}${url.search}${url.hash}`;\n}\n\nexport const TabsComponent: RendererComponent<\"tabs\"> = ({ children, node }) => {\n  const { t } = useT(\"lattice\");\n  const tabs = useMemo(() => getTabs(node), [node]);\n  const firstValue = tabs[0]?.value ?? \"\";\n  const queryKey = node.props.queryKey;\n  const orientation = node.props.orientation;\n  const isVertical = orientation === \"vertical\";\n  const serverActiveValue = node.props.activeValue;\n  const defaultValue = node.props.defaultValue ?? firstValue;\n  const tablistRef = useRef<HTMLDivElement>(null);\n  const [activeValue, setActiveTabValue] = useState(\n    () => serverActiveValue || (queryValue(queryKey, tabs) ?? defaultValue) || firstValue,\n  );\n\n  function selectTab(tab: TabItem): void {\n    if (tab.confirm?.required) {\n      router.visit(queryUrl(queryKey, tab.value), {\n        preserveScroll: true,\n      });\n\n      return;\n    }\n\n    setActiveTabValue(tab.value);\n    replaceQueryValue(queryKey, tab.value);\n  }\n\n  function selectTabValue(value: string): void {\n    const tab = tabs.find((item) => item.value === value);\n\n    if (tab) {\n      selectTab(tab);\n    }\n  }\n\n  function onTablistKeyDown(event: KeyboardEvent<HTMLButtonElement>): void {\n    const nextKey = isVertical ? \"ArrowDown\" : \"ArrowRight\";\n    const prevKey = isVertical ? \"ArrowUp\" : \"ArrowLeft\";\n\n    if (\n      event.key !== nextKey &&\n      event.key !== prevKey &&\n      event.key !== \"Home\" &&\n      event.key !== \"End\"\n    ) {\n      return;\n    }\n\n    const buttons = Array.from(\n      tablistRef.current?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]') ?? [],\n    );\n\n    if (buttons.length === 0) {\n      return;\n    }\n\n    event.preventDefault();\n    const current = buttons.indexOf(document.activeElement as HTMLButtonElement);\n\n    let index: number;\n    if (event.key === \"Home\") {\n      index = 0;\n    } else if (event.key === \"End\") {\n      index = buttons.length - 1;\n    } else {\n      const delta = event.key === nextKey ? 1 : -1;\n      const base = current < 0 ? 0 : current;\n      index = (base + delta + buttons.length) % buttons.length;\n    }\n\n    buttons[index]?.focus();\n  }\n\n  return (\n    <TabsContext.Provider value={{ activeValue, setActiveValue: selectTabValue }}>\n      <div\n        className={cn(\"gap-6\", isVertical ? \"flex\" : \"grid\")}\n        data-lattice-tabs={node.key ?? node.id}\n      >\n        <div\n          aria-label={t(\"a11y.tabs\", \"Tabs\")}\n          aria-orientation={orientation}\n          className={cn(\n            \"gap-1 rounded-lt bg-lt-muted p-1\",\n            isVertical ? \"flex flex-col\" : \"inline-flex w-fit max-w-full overflow-x-auto\",\n          )}\n          ref={tablistRef}\n          role=\"tablist\"\n        >\n          {tabs.map((tab) => {\n            const isActive = activeValue === tab.value;\n\n            return (\n              <button\n                aria-controls={`${tab.value}-panel`}\n                aria-selected={isActive}\n                data-test={`tab-${tab.value}`}\n                className={cn(\n                  \"whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors\",\n                  isActive\n                    ? \"bg-lt-bg text-lt-fg shadow-xs\"\n                    : \"text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg\",\n                  isVertical && \"text-left\",\n                )}\n                id={`${tab.value}-tab`}\n                key={tab.value}\n                onClick={() => selectTab(tab)}\n                onKeyDown={onTablistKeyDown}\n                role=\"tab\"\n                tabIndex={isActive ? 0 : -1}\n                type=\"button\"\n              >\n                {tab.label}\n              </button>\n            );\n          })}\n        </div>\n\n        <div className={cn(\"min-w-0\", isVertical && \"flex-1\")}>{children}</div>\n      </div>\n    </TabsContext.Provider>\n  );\n};\n\nconst TabComponent: RendererComponent<\"tab\"> = ({ children, node }) => {\n  const { activeValue } = useTabsContext();\n  const value = node.props.value;\n  const isActive = activeValue === value;\n  const [hasOpened, setHasOpened] = useState(isActive);\n\n  useEffect(() => {\n    if (isActive) {\n      setHasOpened(true);\n    }\n  }, [isActive]);\n\n  return (\n    <section\n      aria-labelledby={`${value}-tab`}\n      className={cn(\"space-y-8\", !isActive && \"hidden\")}\n      hidden={!isActive}\n      id={`${value}-panel`}\n      role=\"tabpanel\"\n      tabIndex={0}\n    >\n      {hasOpened ? (children as ReactNode) : null}\n    </section>\n  );\n};\n\nexport default TabComponent;\n"],"mappings":"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"}
+{"version":3,"file":"tabs.js","names":[],"sources":["../../../resources/js/core/components/tabs.tsx"],"sourcesContent":["import { router } from \"@inertiajs/react\";\nimport { createContext, useContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport type { Tab } from \"@lattice-php/lattice/types/generated\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\n\ntype TabsContextValue = {\n  activeValue: string;\n  setActiveValue: (value: string) => void;\n};\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nfunction useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    return {\n      activeValue: \"\",\n      setActiveValue: () => {},\n    };\n  }\n\n  return context;\n}\n\ntype TabItem = {\n  confirm?: {\n    required?: boolean;\n  };\n  label: string;\n  value: string;\n};\n\nfunction getTabs(node: Node): TabItem[] {\n  return (node.schema ?? [])\n    .filter((child) => child.type === \"tab\")\n    .map((child) => {\n      const props = child.props as unknown as Tab;\n\n      return {\n        confirm: props.confirm ? { required: props.confirm.required } : undefined,\n        label: props.label,\n        value: props.value,\n      };\n    })\n    .filter((tab) => tab.value !== \"\");\n}\n\nfunction queryValue(queryKey: string, tabs: Array<{ value: string }>): string | null {\n  if (typeof window === \"undefined\") {\n    return null;\n  }\n\n  const value = new URLSearchParams(window.location.search).get(queryKey);\n\n  if (!value || !tabs.some((tab) => tab.value === value)) {\n    return null;\n  }\n\n  return value;\n}\n\nfunction replaceQueryValue(queryKey: string, value: string): void {\n  if (typeof window === \"undefined\") {\n    return;\n  }\n\n  const url = new URL(window.location.href);\n  url.searchParams.set(queryKey, value);\n  window.history.replaceState(window.history.state, \"\", `${url.pathname}${url.search}${url.hash}`);\n}\n\nfunction queryUrl(queryKey: string, value: string): string {\n  if (typeof window === \"undefined\") {\n    return \"\";\n  }\n\n  const url = new URL(window.location.href);\n  url.searchParams.set(queryKey, value);\n\n  return `${url.pathname}${url.search}${url.hash}`;\n}\n\nexport const TabsComponent: RendererComponent<\"tabs\"> = ({ children, node }) => {\n  const { t } = useT(\"lattice\");\n  const tabs = useMemo(() => getTabs(node), [node]);\n  const firstValue = tabs[0]?.value ?? \"\";\n  const queryKey = node.props.queryKey;\n  const orientation = node.props.orientation;\n  const isVertical = orientation === \"vertical\";\n  const serverActiveValue = node.props.activeValue;\n  const defaultValue = node.props.defaultValue ?? firstValue;\n  const tablistRef = useRef<HTMLDivElement>(null);\n  const [activeValue, setActiveTabValue] = useState(\n    () => serverActiveValue || (queryValue(queryKey, tabs) ?? defaultValue) || firstValue,\n  );\n\n  function selectTab(tab: TabItem): void {\n    if (tab.confirm?.required) {\n      router.visit(queryUrl(queryKey, tab.value), {\n        preserveScroll: true,\n      });\n\n      return;\n    }\n\n    setActiveTabValue(tab.value);\n    replaceQueryValue(queryKey, tab.value);\n  }\n\n  function selectTabValue(value: string): void {\n    const tab = tabs.find((item) => item.value === value);\n\n    if (tab) {\n      selectTab(tab);\n    }\n  }\n\n  function onTablistKeyDown(event: KeyboardEvent<HTMLButtonElement>): void {\n    const nextKey = isVertical ? \"ArrowDown\" : \"ArrowRight\";\n    const prevKey = isVertical ? \"ArrowUp\" : \"ArrowLeft\";\n\n    if (\n      event.key !== nextKey &&\n      event.key !== prevKey &&\n      event.key !== \"Home\" &&\n      event.key !== \"End\"\n    ) {\n      return;\n    }\n\n    const buttons = Array.from(\n      tablistRef.current?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]') ?? [],\n    );\n\n    if (buttons.length === 0) {\n      return;\n    }\n\n    event.preventDefault();\n    const current = buttons.indexOf(document.activeElement as HTMLButtonElement);\n\n    let index: number;\n    if (event.key === \"Home\") {\n      index = 0;\n    } else if (event.key === \"End\") {\n      index = buttons.length - 1;\n    } else {\n      const delta = event.key === nextKey ? 1 : -1;\n      const base = current < 0 ? 0 : current;\n      index = (base + delta + buttons.length) % buttons.length;\n    }\n\n    buttons[index]?.focus();\n  }\n\n  return (\n    <TabsContext.Provider value={{ activeValue, setActiveValue: selectTabValue }}>\n      <div\n        className={cn(\"gap-6\", isVertical ? \"flex\" : \"grid\")}\n        data-lattice-tabs={node.key ?? node.id}\n      >\n        <div\n          aria-label={t(\"a11y.tabs\", \"Tabs\")}\n          aria-orientation={orientation}\n          className={cn(\n            \"gap-1 rounded-lt bg-lt-muted p-1\",\n            isVertical ? \"flex flex-col\" : \"inline-flex w-fit max-w-full overflow-x-auto\",\n          )}\n          ref={tablistRef}\n          role=\"tablist\"\n        >\n          {tabs.map((tab) => {\n            const isActive = activeValue === tab.value;\n\n            return (\n              <button\n                aria-controls={`${tab.value}-panel`}\n                aria-selected={isActive}\n                data-test={`tab-${tab.value}`}\n                className={cn(\n                  \"whitespace-nowrap rounded-lt-sm px-3 py-1.5 text-sm font-medium transition-colors\",\n                  isActive\n                    ? \"bg-lt-bg text-lt-fg shadow-lt-xs\"\n                    : \"text-lt-muted-fg hover:bg-lt-bg/60 hover:text-lt-fg\",\n                  isVertical && \"text-left\",\n                )}\n                id={`${tab.value}-tab`}\n                key={tab.value}\n                onClick={() => selectTab(tab)}\n                onKeyDown={onTablistKeyDown}\n                role=\"tab\"\n                tabIndex={isActive ? 0 : -1}\n                type=\"button\"\n              >\n                {tab.label}\n              </button>\n            );\n          })}\n        </div>\n\n        <div className={cn(\"min-w-0\", isVertical && \"flex-1\")}>{children}</div>\n      </div>\n    </TabsContext.Provider>\n  );\n};\n\nconst TabComponent: RendererComponent<\"tab\"> = ({ children, node }) => {\n  const { activeValue } = useTabsContext();\n  const value = node.props.value;\n  const isActive = activeValue === value;\n  const [hasOpened, setHasOpened] = useState(isActive);\n\n  useEffect(() => {\n    if (isActive) {\n      setHasOpened(true);\n    }\n  }, [isActive]);\n\n  return (\n    <section\n      aria-labelledby={`${value}-tab`}\n      className={cn(\"space-y-8\", !isActive && \"hidden\")}\n      hidden={!isActive}\n      id={`${value}-panel`}\n      role=\"tabpanel\"\n      tabIndex={0}\n    >\n      {hasOpened ? (children as ReactNode) : null}\n    </section>\n  );\n};\n\nexport default TabComponent;\n"],"mappings":"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"}

package/dist/core/types.d.ts

@@ -1,9 +1,10 @@
 import { ComponentType as ReactComponentType, ReactNode } from 'react';
-import { Node as WireNode, NodeType, Option, PageContainer as KnownPageContainer } from '../types/generated';
+import { Node as WireNode, NodeType, Option, PageContainer as KnownPageContainer, ListenerPayload } from '../types/generated';
 export type { KnownPageContainer, NodeType, WireNode };
 /** Loose props bag for nodes whose `type` is not a generated built-in. */
 export type NodeProps = Record<string, unknown>;
 export type CommonNodeProps = {
+    dataBindings?: Record<string, string> | null;
     hideWhenCollapsed?: boolean | null;
 };
 /** A `{ label, value }` pair used by the choice, select and segmented controls. */
@@ -76,6 +77,7 @@ export type PagePayload = {
     breadcrumbs: PageBreadcrumb[];
     container: PageContainer;
     layout: LayoutPayload | null;
+    listeners?: ListenerPayload[];
     schema: Schema;
     title: string | null;
 };

package/dist/form/components/base/affix-group.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { Affix } from '../../../types/generated';
+/**
+ * Wraps a single-line control in a prefix/suffix input group. The control is a
+ * render prop receiving the class names that square the corners adjacent to an
+ * affix; with no affixes the control renders untouched.
+ *
+ * The focus ring lives on the group, not the bare input, so it surrounds the
+ * whole control — affixes included — instead of being clipped by the opaque
+ * affix segments. The control itself stays the focus target; only its own ring
+ * is suppressed.
+ */
+export declare function AffixGroup({ prefix, suffix, children, }: {
+    prefix?: Affix | null;
+    suffix?: Affix | null;
+    children: (controlClassName: string) => ReactNode;
+}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;

package/dist/form/components/base/affix-group.js

@@ -0,0 +1,49 @@
+import { cn } from "../../../lib/utils.js";
+import { IconRenderer } from "../../../icons/icon-renderer.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/form/components/base/affix-group.tsx
+function AffixSegment({ affix, side }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": `affix-${side}`,
+		className: cn("inline-flex h-lt-control-md shrink-0 items-center border border-lt-input bg-lt-muted px-3 text-base whitespace-nowrap text-lt-muted-fg", "group-has-[:focus-visible]:border-lt-ring", side === "start" ? "rounded-l-lt-sm border-r-0" : "rounded-r-lt-sm border-l-0"),
+		children: affix.icon ? /* @__PURE__ */ jsx(IconRenderer, {
+			className: "size-lt-icon-md",
+			icon: affix.icon
+		}) : affix.text
+	});
+}
+/**
+* Wraps a single-line control in a prefix/suffix input group. The control is a
+* render prop receiving the class names that square the corners adjacent to an
+* affix; with no affixes the control renders untouched.
+*
+* The focus ring lives on the group, not the bare input, so it surrounds the
+* whole control — affixes included — instead of being clipped by the opaque
+* affix segments. The control itself stays the focus target; only its own ring
+* is suppressed.
+*/
+function AffixGroup({ prefix, suffix, children }) {
+	if (!prefix && !suffix) return children("");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "group flex w-full rounded-lt-sm transition-[color,box-shadow] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-lt-ring/50",
+		"data-slot": "affix-group",
+		children: [
+			prefix ? /* @__PURE__ */ jsx(AffixSegment, {
+				affix: prefix,
+				side: "start"
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1",
+				children: children(cn("focus-visible:ring-0", prefix && "rounded-l-none", suffix && "rounded-r-none"))
+			}),
+			suffix ? /* @__PURE__ */ jsx(AffixSegment, {
+				affix: suffix,
+				side: "end"
+			}) : null
+		]
+	});
+}
+//#endregion
+export { AffixGroup };
+
+//# sourceMappingURL=affix-group.js.map

package/dist/form/components/base/affix-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"affix-group.js","names":[],"sources":["../../../../resources/js/form/components/base/affix-group.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { Affix } from \"@lattice-php/lattice/types/generated\";\nimport { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction AffixSegment({ affix, side }: { affix: Affix; side: \"start\" | \"end\" }) {\n  return (\n    <span\n      data-slot={`affix-${side}`}\n      className={cn(\n        \"inline-flex h-lt-control-md shrink-0 items-center border border-lt-input bg-lt-muted px-3 text-base whitespace-nowrap text-lt-muted-fg\",\n        \"group-has-[:focus-visible]:border-lt-ring\",\n        side === \"start\" ? \"rounded-l-lt-sm border-r-0\" : \"rounded-r-lt-sm border-l-0\",\n      )}\n    >\n      {affix.icon ? <IconRenderer className=\"size-lt-icon-md\" icon={affix.icon} /> : affix.text}\n    </span>\n  );\n}\n\n/**\n * Wraps a single-line control in a prefix/suffix input group. The control is a\n * render prop receiving the class names that square the corners adjacent to an\n * affix; with no affixes the control renders untouched.\n *\n * The focus ring lives on the group, not the bare input, so it surrounds the\n * whole control — affixes included — instead of being clipped by the opaque\n * affix segments. The control itself stays the focus target; only its own ring\n * is suppressed.\n */\nexport function AffixGroup({\n  prefix,\n  suffix,\n  children,\n}: {\n  prefix?: Affix | null;\n  suffix?: Affix | null;\n  children: (controlClassName: string) => ReactNode;\n}) {\n  if (!prefix && !suffix) {\n    return children(\"\");\n  }\n\n  return (\n    <div\n      className=\"group flex w-full rounded-lt-sm transition-[color,box-shadow] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-lt-ring/50\"\n      data-slot=\"affix-group\"\n    >\n      {prefix ? <AffixSegment affix={prefix} side=\"start\" /> : null}\n      <div className=\"min-w-0 flex-1\">\n        {children(\n          cn(\"focus-visible:ring-0\", prefix && \"rounded-l-none\", suffix && \"rounded-r-none\"),\n        )}\n      </div>\n      {suffix ? <AffixSegment affix={suffix} side=\"end\" /> : null}\n    </div>\n  );\n}\n"],"mappings":";;;;AAKA,SAAS,aAAa,EAAE,OAAO,QAAiD;CAC9E,OACE,oBAAC,QAAD;EACE,aAAW,SAAS;EACpB,WAAW,GACT,0IACA,6CACA,SAAS,UAAU,+BAA+B,4BACpD;YAEC,MAAM,OAAO,oBAAC,cAAD;GAAc,WAAU;GAAkB,MAAM,MAAM;EAAO,CAAA,IAAI,MAAM;CACjF,CAAA;AAEV;;;;;;;;;;;AAYA,SAAgB,WAAW,EACzB,QACA,QACA,YAKC;CACD,IAAI,CAAC,UAAU,CAAC,QACd,OAAO,SAAS,EAAE;CAGpB,OACE,qBAAC,OAAD;EACE,WAAU;EACV,aAAU;YAFZ;GAIG,SAAS,oBAAC,cAAD;IAAc,OAAO;IAAQ,MAAK;GAAS,CAAA,IAAI;GACzD,oBAAC,OAAD;IAAK,WAAU;cACZ,SACC,GAAG,wBAAwB,UAAU,kBAAkB,UAAU,gBAAgB,CACnF;GACG,CAAA;GACJ,SAAS,oBAAC,cAAD;IAAc,OAAO;IAAQ,MAAK;GAAO,CAAA,IAAI;EACpD;;AAET"}

package/dist/form/components/base/label.js

@@ -6,7 +6,7 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 function Label({ className, ...props }) {
 	return /* @__PURE__ */ jsx(LabelPrimitive.Root, {
 		"data-slot": "label",
-		className: cn("text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+		className: cn("text-base leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
 		...props
 	});
 }

package/dist/form/components/base/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","names":[],"sources":["../../../../resources/js/form/components/base/label.tsx"],"sourcesContent":["import * as LabelPrimitive from \"@radix-ui/react-label\";\nimport * as React from \"react\";\n\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n"],"mappings":";;;;;AAKA,SAAS,MAAM,EAAE,WAAW,GAAG,SAA2D;CACxF,OACE,oBAAC,eAAe,MAAhB;EACE,aAAU;EACV,WAAW,GACT,+LACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"label.js","names":[],"sources":["../../../../resources/js/form/components/base/label.tsx"],"sourcesContent":["import * as LabelPrimitive from \"@radix-ui/react-label\";\nimport * as React from \"react\";\n\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"text-base leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n"],"mappings":";;;;;AAKA,SAAS,MAAM,EAAE,WAAW,GAAG,SAA2D;CACxF,OACE,oBAAC,eAAe,MAAhB;EACE,aAAU;EACV,WAAW,GACT,iMACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/form/components/base/submit-button.js

@@ -20,7 +20,7 @@ function FormSubmitButton({ label, summaryLabel, variant = "default" }) {
 			variant,
 			children: [processing && /* @__PURE__ */ jsx(Spinner, {}), label]
 		}), hasErrors && /* @__PURE__ */ jsxs("div", {
-			className: "pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 w-max max-w-xs -translate-x-1/2 rounded-lt border border-lt-border bg-lt-surface p-3 text-left text-sm opacity-0 shadow-md transition-opacity group-hover:opacity-100",
+			className: "pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 w-max max-w-xs -translate-x-1/2 rounded-lt border border-lt-border bg-lt-surface p-3 text-left text-sm opacity-0 shadow-lt-md transition-opacity group-hover:opacity-100",
 			role: "tooltip",
 			children: [/* @__PURE__ */ jsx("p", {
 				className: "mb-1 font-medium text-lt-fg",

package/dist/form/components/base/submit-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"submit-button.js","names":[],"sources":["../../../../resources/js/form/components/base/submit-button.tsx"],"sourcesContent":["import { Button } from \"@lattice-php/lattice/core/components/button\";\nimport { Spinner } from \"@lattice-php/lattice/core/components/spinner\";\nimport type { ButtonVariant } from \"@lattice-php/lattice/types/generated\";\nimport { useFormContext } from \"../context\";\n\nexport function FormSubmitButton({\n  label,\n  summaryLabel,\n  variant = \"default\",\n}: {\n  label: string;\n  summaryLabel: string;\n  variant?: ButtonVariant;\n}) {\n  const { componentId, errors, fieldLabels, processing } = useFormContext();\n\n  const invalidFields = Object.entries(errors)\n    .filter(([, message]) => Boolean(message))\n    .map(([name, message]) => ({ label: fieldLabels[name] ?? name, message: message as string }));\n  const hasErrors = invalidFields.length > 0;\n\n  return (\n    <span className=\"group relative inline-flex flex-col\">\n      <Button\n        data-lattice-form={componentId}\n        data-test=\"form-submit\"\n        disabled={processing || hasErrors}\n        type=\"submit\"\n        variant={variant}\n      >\n        {processing && <Spinner />}\n        {label}\n      </Button>\n\n      {hasErrors && (\n        <div\n          className=\"pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 w-max max-w-xs -translate-x-1/2 rounded-lt border border-lt-border bg-lt-surface p-3 text-left text-sm opacity-0 shadow-md transition-opacity group-hover:opacity-100\"\n          role=\"tooltip\"\n        >\n          <p className=\"mb-1 font-medium text-lt-fg\">{summaryLabel}</p>\n          <ul className=\"space-y-1\">\n            {invalidFields.map((field) => (\n              <li className=\"text-lt-muted-fg\" key={field.label}>\n                <span className=\"font-medium text-lt-fg\">{field.label}</span> — {field.message}\n              </li>\n            ))}\n          </ul>\n        </div>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,iBAAiB,EAC/B,OACA,cACA,UAAU,aAKT;CACD,MAAM,EAAE,aAAa,QAAQ,aAAa,eAAe,eAAe;CAExE,MAAM,gBAAgB,OAAO,QAAQ,MAAM,EACxC,QAAQ,GAAG,aAAa,QAAQ,OAAO,CAAC,EACxC,KAAK,CAAC,MAAM,cAAc;EAAE,OAAO,YAAY,SAAS;EAAe;CAAkB,EAAE;CAC9F,MAAM,YAAY,cAAc,SAAS;CAEzC,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,qBAAC,QAAD;GACE,qBAAmB;GACnB,aAAU;GACV,UAAU,cAAc;GACxB,MAAK;GACI;aALX,CAOG,cAAc,oBAAC,SAAD,CAAU,CAAA,GACxB,KACK;MAEP,aACC,qBAAC,OAAD;GACE,WAAU;GACV,MAAK;aAFP,CAIE,oBAAC,KAAD;IAAG,WAAU;cAA+B;GAAgB,CAAA,GAC5D,oBAAC,MAAD;IAAI,WAAU;cACX,cAAc,KAAK,UAClB,qBAAC,MAAD;KAAI,WAAU;eAAd;MACE,oBAAC,QAAD;OAAM,WAAU;iBAA0B,MAAM;MAAY,CAAA;MAAC;MAAI,MAAM;KACrE;OAFkC,MAAM,KAExC,CACL;GACC,CAAA,CACD;IAEH;;AAEV"}
+{"version":3,"file":"submit-button.js","names":[],"sources":["../../../../resources/js/form/components/base/submit-button.tsx"],"sourcesContent":["import { Button } from \"@lattice-php/lattice/core/components/button\";\nimport { Spinner } from \"@lattice-php/lattice/core/components/spinner\";\nimport type { ButtonVariant } from \"@lattice-php/lattice/types/generated\";\nimport { useFormContext } from \"../context\";\n\nexport function FormSubmitButton({\n  label,\n  summaryLabel,\n  variant = \"default\",\n}: {\n  label: string;\n  summaryLabel: string;\n  variant?: ButtonVariant;\n}) {\n  const { componentId, errors, fieldLabels, processing } = useFormContext();\n\n  const invalidFields = Object.entries(errors)\n    .filter(([, message]) => Boolean(message))\n    .map(([name, message]) => ({ label: fieldLabels[name] ?? name, message: message as string }));\n  const hasErrors = invalidFields.length > 0;\n\n  return (\n    <span className=\"group relative inline-flex flex-col\">\n      <Button\n        data-lattice-form={componentId}\n        data-test=\"form-submit\"\n        disabled={processing || hasErrors}\n        type=\"submit\"\n        variant={variant}\n      >\n        {processing && <Spinner />}\n        {label}\n      </Button>\n\n      {hasErrors && (\n        <div\n          className=\"pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 w-max max-w-xs -translate-x-1/2 rounded-lt border border-lt-border bg-lt-surface p-3 text-left text-sm opacity-0 shadow-lt-md transition-opacity group-hover:opacity-100\"\n          role=\"tooltip\"\n        >\n          <p className=\"mb-1 font-medium text-lt-fg\">{summaryLabel}</p>\n          <ul className=\"space-y-1\">\n            {invalidFields.map((field) => (\n              <li className=\"text-lt-muted-fg\" key={field.label}>\n                <span className=\"font-medium text-lt-fg\">{field.label}</span> — {field.message}\n              </li>\n            ))}\n          </ul>\n        </div>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,iBAAiB,EAC/B,OACA,cACA,UAAU,aAKT;CACD,MAAM,EAAE,aAAa,QAAQ,aAAa,eAAe,eAAe;CAExE,MAAM,gBAAgB,OAAO,QAAQ,MAAM,EACxC,QAAQ,GAAG,aAAa,QAAQ,OAAO,CAAC,EACxC,KAAK,CAAC,MAAM,cAAc;EAAE,OAAO,YAAY,SAAS;EAAe;CAAkB,EAAE;CAC9F,MAAM,YAAY,cAAc,SAAS;CAEzC,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,qBAAC,QAAD;GACE,qBAAmB;GACnB,aAAU;GACV,UAAU,cAAc;GACxB,MAAK;GACI;aALX,CAOG,cAAc,oBAAC,SAAD,CAAU,CAAA,GACxB,KACK;MAEP,aACC,qBAAC,OAAD;GACE,WAAU;GACV,MAAK;aAFP,CAIE,oBAAC,KAAD;IAAG,WAAU;cAA+B;GAAgB,CAAA,GAC5D,oBAAC,MAAD;IAAI,WAAU;cACX,cAAc,KAAK,UAClB,qBAAC,MAAD;KAAI,WAAU;eAAd;MACE,oBAAC,QAAD;OAAM,WAAU;iBAA0B,MAAM;MAAY,CAAA;MAAC;MAAI,MAAM;KACrE;OAFkC,MAAM,KAExC,CACL;GACC,CAAA,CACD;IAEH;;AAEV"}

package/dist/form/components/base/textarea.js

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 function Textarea({ className, ...props }) {
 	return /* @__PURE__ */ jsx("textarea", {
 		"data-slot": "textarea",
-		className: cn("border-lt-input placeholder:text-lt-muted-fg flex field-sizing-content min-h-16 w-full rounded-lt-sm border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", FOCUS_RING, "aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger", className),
+		className: cn("border-lt-input placeholder:text-lt-muted-fg flex field-sizing-content min-h-16 w-full rounded-lt-sm border bg-transparent px-3 py-2 text-base shadow-lt-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-lt-disabled disabled:text-lt-disabled-fg", FOCUS_RING, "aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger", className),
 		...props
 	});
 }

package/dist/form/components/base/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":[],"sources":["../../../../resources/js/form/components/base/textarea.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { FOCUS_RING } from \"@lattice-php/lattice/core/components/control\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-lt-input placeholder:text-lt-muted-fg flex field-sizing-content min-h-16 w-full rounded-lt-sm border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n        FOCUS_RING,\n        \"aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Textarea };\n"],"mappings":";;;;;AAKA,SAAS,SAAS,EAAE,WAAW,GAAG,SAA2C;CAC3E,OACE,oBAAC,YAAD;EACE,aAAU;EACV,WAAW,GACT,+RACA,YACA,oGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"textarea.js","names":[],"sources":["../../../../resources/js/form/components/base/textarea.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { FOCUS_RING } from \"@lattice-php/lattice/core/components/control\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-lt-input placeholder:text-lt-muted-fg flex field-sizing-content min-h-16 w-full rounded-lt-sm border bg-transparent px-3 py-2 text-base shadow-lt-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-lt-disabled disabled:text-lt-disabled-fg\",\n        FOCUS_RING,\n        \"aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Textarea };\n"],"mappings":";;;;;AAKA,SAAS,SAAS,EAAE,WAAW,GAAG,SAA2C;CAC3E,OACE,oBAAC,YAAD;EACE,aAAU;EACV,WAAW,GACT,wTACA,YACA,oGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/form/components/fields/file-upload.js

@@ -4,12 +4,16 @@ import { useT } from "../../../i18n/instance.js";
 import { apiFetch } from "../../../core/api.js";
 import { useFormContext } from "../context.js";
 import { useFieldScope } from "../field-scope.js";
-import { useFormValues } from "../values.js";
+import { useFormValues, useSetFormValue } from "../values.js";
 import { FormFieldFrame } from "../base/field.js";
 import { useDependentField } from "../use-dependent-field.js";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/file-upload.tsx
+function uploadValueEquals(current, next) {
+	if (Array.isArray(next)) return Array.isArray(current) && current.length === next.length && current.every((value, index) => value === next[index]);
+	return current === next;
+}
 var FileUploadComponent = ({ node }) => {
 	const { t } = useT("lattice");
 	const props = node.props;
@@ -21,6 +25,7 @@ var FileUploadComponent = ({ node }) => {
 	const errorKey = scope ? scope.errorKey(name) : name;
 	const uploadKey = errorKey;
 	const values = useFormValues();
+	const setValue = useSetFormValue();
 	const inputId = useId();
 	const fileInputRef = useRef(null);
 	const previewUrlsRef = useRef(/* @__PURE__ */ new Set());
@@ -40,6 +45,33 @@ var FileUploadComponent = ({ node }) => {
 		existing: true
 	})), [props.files]));
 	const [removedTokens, setRemovedTokens] = useState([]);
+	useEffect(() => {
+		if (!signed) return;
+		const keys = items.filter((item) => !item.existing && item.key && item.status === "ready").map((item) => item.key);
+		const next = multiple ? keys : keys[0] ?? "";
+		if (scope) {
+			if (!uploadValueEquals(scope.getValue(name), next)) scope.setValue(name, next);
+			return;
+		}
+		setValue(name, next);
+	}, [
+		items,
+		multiple,
+		name,
+		scope,
+		setValue,
+		signed
+	]);
+	useEffect(() => {
+		if (!signed || scope) return;
+		setValue(`${name}__removed`, removedTokens);
+	}, [
+		name,
+		removedTokens,
+		scope,
+		setValue,
+		signed
+	]);
 	useEffect(() => () => {
 		previewUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
 		previewUrlsRef.current.clear();
@@ -201,7 +233,7 @@ var FileUploadComponent = ({ node }) => {
 							(!item.existing || !scope) && /* @__PURE__ */ jsx("button", {
 								"aria-label": t("file-upload.remove", "Remove {{name}}", { name: item.name }),
 								className: "inline-flex size-7 shrink-0 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-50",
-								"data-test": item.existing ? testIdentity(`${name}-remove-existing`) : void 0,
+								"data-test": testIdentity(item.existing ? `${name}-remove-existing` : `${name}-remove`),
 								disabled: locked,
 								onClick: () => removeItem(item.id),
 								type: "button",