@lattice-php/lattice 0.14.0 → 0.16.0

package/dist/action/components/action-group.js

@@ -23,7 +23,7 @@ var ActionGroupComponent = ({ children, node }) => {
 			asChild: true,
 			children: /* @__PURE__ */ jsx(Button, {
 				"aria-label": label,
-				className: "size-8 text-lt-muted-fg shadow-none hover:text-lt-fg",
+				className: "size-lt-control-sm text-lt-muted-fg shadow-none hover:text-lt-fg",
 				"data-test": nodeIdentity(node),
 				size: "icon",
 				type: "button",

package/dist/action/components/action-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-group.js","names":[],"sources":["../../../resources/js/action/components/action-group.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { Button } from \"@lattice-php/lattice/core/components/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from \"@lattice-php/lattice/core/components/dropdown-menu\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { ActionMenuProvider } from \"./action-menu-context\";\n\nconst ActionGroupComponent: RendererComponent<\"action.group\"> = ({ children, node }) => {\n  const label = node.props.label;\n  const orientation = node.props.orientation;\n\n  if (orientation) {\n    return (\n      <div\n        aria-label={label}\n        className={cn(\n          \"inline-flex max-w-full gap-1\",\n          orientation === \"vertical\" ? \"flex-col items-stretch\" : \"flex-row flex-wrap items-center\",\n        )}\n        data-lattice-component={node.id}\n        role=\"group\"\n      >\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"inline-flex\" data-lattice-component={node.id}>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            aria-label={label}\n            className=\"size-8 text-lt-muted-fg shadow-none hover:text-lt-fg\"\n            data-test={nodeIdentity(node)}\n            size=\"icon\"\n            type=\"button\"\n            variant=\"ghost\"\n          >\n            <Icon name=\"more-horizontal\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n          </Button>\n        </DropdownMenuTrigger>\n\n        <DropdownMenuContent\n          align=\"end\"\n          aria-label={label}\n          className=\"min-w-44 gap-0.5 p-1.5\"\n          sideOffset={8}\n        >\n          <ActionMenuProvider>{children}</ActionMenuProvider>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n};\n\nexport default ActionGroupComponent;\n"],"mappings":";;;;;;;;AAYA,IAAM,wBAA2D,EAAE,UAAU,WAAW;CACtF,MAAM,QAAQ,KAAK,MAAM;CACzB,MAAM,cAAc,KAAK,MAAM;CAE/B,IAAI,aACF,OACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAW,GACT,gCACA,gBAAgB,aAAa,2BAA2B,iCAC1D;EACA,0BAAwB,KAAK;EAC7B,MAAK;EAEJ;CACE,CAAA;CAIT,OACE,oBAAC,OAAD;EAAK,WAAU;EAAc,0BAAwB,KAAK;YACxD,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,qBAAD;GAAqB,SAAA;aACnB,oBAAC,QAAD;IACE,cAAY;IACZ,WAAU;IACV,aAAW,aAAa,IAAI;IAC5B,MAAK;IACL,MAAK;IACL,SAAQ;cAER,oBAAC,MAAD;KAAM,MAAK;KAAkB,eAAY;KAAO,WAAU;IAAmB,CAAA;GACvE,CAAA;EACW,CAAA,GAErB,oBAAC,qBAAD;GACE,OAAM;GACN,cAAY;GACZ,WAAU;GACV,YAAY;aAEZ,oBAAC,oBAAD,EAAqB,SAA6B,CAAA;EAC/B,CAAA,CACT,EAAA,CAAA;CACX,CAAA;AAET"}
+{"version":3,"file":"action-group.js","names":[],"sources":["../../../resources/js/action/components/action-group.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { Button } from \"@lattice-php/lattice/core/components/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from \"@lattice-php/lattice/core/components/dropdown-menu\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { ActionMenuProvider } from \"./action-menu-context\";\n\nconst ActionGroupComponent: RendererComponent<\"action.group\"> = ({ children, node }) => {\n  const label = node.props.label;\n  const orientation = node.props.orientation;\n\n  if (orientation) {\n    return (\n      <div\n        aria-label={label}\n        className={cn(\n          \"inline-flex max-w-full gap-1\",\n          orientation === \"vertical\" ? \"flex-col items-stretch\" : \"flex-row flex-wrap items-center\",\n        )}\n        data-lattice-component={node.id}\n        role=\"group\"\n      >\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"inline-flex\" data-lattice-component={node.id}>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            aria-label={label}\n            className=\"size-lt-control-sm text-lt-muted-fg shadow-none hover:text-lt-fg\"\n            data-test={nodeIdentity(node)}\n            size=\"icon\"\n            type=\"button\"\n            variant=\"ghost\"\n          >\n            <Icon name=\"more-horizontal\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n          </Button>\n        </DropdownMenuTrigger>\n\n        <DropdownMenuContent\n          align=\"end\"\n          aria-label={label}\n          className=\"min-w-44 gap-0.5 p-1.5\"\n          sideOffset={8}\n        >\n          <ActionMenuProvider>{children}</ActionMenuProvider>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n};\n\nexport default ActionGroupComponent;\n"],"mappings":";;;;;;;;AAYA,IAAM,wBAA2D,EAAE,UAAU,WAAW;CACtF,MAAM,QAAQ,KAAK,MAAM;CACzB,MAAM,cAAc,KAAK,MAAM;CAE/B,IAAI,aACF,OACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAW,GACT,gCACA,gBAAgB,aAAa,2BAA2B,iCAC1D;EACA,0BAAwB,KAAK;EAC7B,MAAK;EAEJ;CACE,CAAA;CAIT,OACE,oBAAC,OAAD;EAAK,WAAU;EAAc,0BAAwB,KAAK;YACxD,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,qBAAD;GAAqB,SAAA;aACnB,oBAAC,QAAD;IACE,cAAY;IACZ,WAAU;IACV,aAAW,aAAa,IAAI;IAC5B,MAAK;IACL,MAAK;IACL,SAAQ;cAER,oBAAC,MAAD;KAAM,MAAK;KAAkB,eAAY;KAAO,WAAU;IAAmB,CAAA;GACvE,CAAA;EACW,CAAA,GAErB,oBAAC,qBAAD;GACE,OAAM;GACN,cAAY;GACZ,WAAU;GACV,YAAY;aAEZ,oBAAC,oBAAD,EAAqB,SAA6B,CAAA;EAC/B,CAAA,CACT,EAAA,CAAA;CACX,CAAA;AAET"}

package/dist/action/components/action-menu-context.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export declare const actionMenuItemClassName = "flex h-8 w-full items-center justify-start gap-2 rounded-lt-sm px-2.5 text-left text-sm font-normal text-lt-popover-fg no-underline decoration-transparent shadow-none transition-colors hover:bg-lt-accent/70 hover:text-lt-popover-fg focus-visible:bg-lt-accent/70 focus-visible:text-lt-popover-fg focus-visible:ring-0 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-lt-icon-sm [&_svg]:text-lt-muted-fg";
+export declare const actionMenuItemClassName = "flex h-lt-control-sm w-full items-center justify-start gap-2 rounded-lt-sm px-2.5 text-left text-sm font-normal text-lt-popover-fg no-underline decoration-transparent shadow-none transition-colors hover:bg-lt-accent/70 hover:text-lt-popover-fg focus-visible:bg-lt-accent/70 focus-visible:text-lt-popover-fg focus-visible:ring-0 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-lt-icon-sm [&_svg]:text-lt-muted-fg";
 export declare function ActionMenuProvider({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/action/components/action-menu-context.js

@@ -2,7 +2,7 @@ import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/action/components/action-menu-context.tsx
 var ActionMenuContext = createContext(false);
-var actionMenuItemClassName = "flex h-8 w-full items-center justify-start gap-2 rounded-lt-sm px-2.5 text-left text-sm font-normal text-lt-popover-fg no-underline decoration-transparent shadow-none transition-colors hover:bg-lt-accent/70 hover:text-lt-popover-fg focus-visible:bg-lt-accent/70 focus-visible:text-lt-popover-fg focus-visible:ring-0 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-lt-icon-sm [&_svg]:text-lt-muted-fg";
+var actionMenuItemClassName = "flex h-lt-control-sm w-full items-center justify-start gap-2 rounded-lt-sm px-2.5 text-left text-sm font-normal text-lt-popover-fg no-underline decoration-transparent shadow-none transition-colors hover:bg-lt-accent/70 hover:text-lt-popover-fg focus-visible:bg-lt-accent/70 focus-visible:text-lt-popover-fg focus-visible:ring-0 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-lt-icon-sm [&_svg]:text-lt-muted-fg";
 function ActionMenuProvider({ children }) {
 	return /* @__PURE__ */ jsx(ActionMenuContext.Provider, {
 		value: true,

package/dist/action/components/action-menu-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-menu-context.js","names":[],"sources":["../../../resources/js/action/components/action-menu-context.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from \"react\";\n\nconst ActionMenuContext = createContext(false);\n\nexport const actionMenuItemClassName =\n  \"flex h-8 w-full items-center justify-start gap-2 rounded-lt-sm px-2.5 text-left text-sm font-normal text-lt-popover-fg no-underline decoration-transparent shadow-none transition-colors hover:bg-lt-accent/70 hover:text-lt-popover-fg focus-visible:bg-lt-accent/70 focus-visible:text-lt-popover-fg focus-visible:ring-0 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-lt-icon-sm [&_svg]:text-lt-muted-fg\";\n\nexport function ActionMenuProvider({ children }: { children: ReactNode }) {\n  return <ActionMenuContext.Provider value={true}>{children}</ActionMenuContext.Provider>;\n}\n\nexport function useActionMenu(): boolean {\n  return useContext(ActionMenuContext);\n}\n"],"mappings":";;;AAEA,IAAM,oBAAoB,cAAc,KAAK;AAE7C,IAAa,0BACX;AAEF,SAAgB,mBAAmB,EAAE,YAAqC;CACxE,OAAO,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;EAAO;CAAqC,CAAA;AACxF;AAEA,SAAgB,gBAAyB;CACvC,OAAO,WAAW,iBAAiB;AACrC"}
+{"version":3,"file":"action-menu-context.js","names":[],"sources":["../../../resources/js/action/components/action-menu-context.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from \"react\";\n\nconst ActionMenuContext = createContext(false);\n\nexport const actionMenuItemClassName =\n  \"flex h-lt-control-sm w-full items-center justify-start gap-2 rounded-lt-sm px-2.5 text-left text-sm font-normal text-lt-popover-fg no-underline decoration-transparent shadow-none transition-colors hover:bg-lt-accent/70 hover:text-lt-popover-fg focus-visible:bg-lt-accent/70 focus-visible:text-lt-popover-fg focus-visible:ring-0 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-lt-icon-sm [&_svg]:text-lt-muted-fg\";\n\nexport function ActionMenuProvider({ children }: { children: ReactNode }) {\n  return <ActionMenuContext.Provider value={true}>{children}</ActionMenuContext.Provider>;\n}\n\nexport function useActionMenu(): boolean {\n  return useContext(ActionMenuContext);\n}\n"],"mappings":";;;AAEA,IAAM,oBAAoB,cAAc,KAAK;AAE7C,IAAa,0BACX;AAEF,SAAgB,mBAAmB,EAAE,YAAqC;CACxE,OAAO,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;EAAO;CAAqC,CAAA;AACxF;AAEA,SAAgB,gBAAyB;CACvC,OAAO,WAAW,iBAAiB;AACrC"}

package/dist/core/components/card.js

@@ -7,14 +7,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function Card({ className, ...props }) {
 	return /* @__PURE__ */ jsx("article", {
 		"data-slot": "card",
-		className: cn("flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-6 text-lt-surface-fg shadow-lt-sm", className),
+		className: cn("flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-lt-gutter text-lt-surface-fg shadow-lt-sm", className),
 		...props
 	});
 }
 function CardHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-header",
-		className: cn("flex flex-col gap-1.5 px-6", className),
+		className: cn("flex flex-col gap-1.5 px-lt-gutter", className),
 		...props
 	});
 }
@@ -35,14 +35,14 @@ function CardDescription({ className, ...props }) {
 function CardContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-content",
-		className: cn("px-6", className),
+		className: cn("px-lt-gutter", className),
 		...props
 	});
 }
 function CardFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-footer",
-		className: cn("flex items-center px-6", className),
+		className: cn("flex items-center px-lt-gutter", className),
 		...props
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../../../resources/js/core/components/card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { InfoTooltip } from \"./info-tooltip\";\n\nfunction Card({ className, ...props }: React.ComponentProps<\"article\">) {\n  return (\n    <article\n      data-slot=\"card\"\n      className={cn(\n        \"flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-6 text-lt-surface-fg shadow-lt-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\"flex flex-col gap-1.5 px-6\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"font-semibold leading-none\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-lt-muted-fg\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"card-content\" className={cn(\"px-6\", className)} {...props} />;\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"card-footer\" className={cn(\"flex items-center px-6\", className)} {...props} />\n  );\n}\n\nconst CardComponent: RendererComponent<\"card\"> = ({ children, node }) => {\n  const { title, description, tooltip } = node.props;\n\n  return (\n    <Card data-lattice-component={nodeIdentity(node)}>\n      {(title || description) && (\n        <CardHeader>\n          {title && (\n            <div className=\"flex items-center\">\n              <CardTitle>{title}</CardTitle>\n              <InfoTooltip content={tooltip} />\n            </div>\n          )}\n          {description && (\n            <div className=\"flex items-center\">\n              <CardDescription>{description}</CardDescription>\n              {!title && <InfoTooltip content={tooltip} />}\n            </div>\n          )}\n        </CardHeader>\n      )}\n      {children && <CardContent className=\"flex flex-col gap-6\">{children}</CardContent>}\n    </Card>\n  );\n};\n\nexport default CardComponent;\nexport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };\n"],"mappings":";;;;;;AAMA,SAAS,KAAK,EAAE,WAAW,GAAG,SAA0C;CACtE,OACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GACT,6GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,SAAS;EACrD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,SAAS;EACrD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,4BAA4B,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,QAAQ,SAAS;EAAG,GAAI;CAAQ,CAAA;AACrF;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,0BAA0B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEjG;AAEA,IAAM,iBAA4C,EAAE,UAAU,WAAW;CACvE,MAAM,EAAE,OAAO,aAAa,YAAY,KAAK;CAE7C,OACE,qBAAC,MAAD;EAAM,0BAAwB,aAAa,IAAI;YAA/C,EACI,SAAS,gBACT,qBAAC,YAAD,EAAA,UAAA,CACG,SACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA,GAC7B,oBAAC,aAAD,EAAa,SAAS,QAAU,CAAA,CAC7B;MAEN,eACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,iBAAD,EAAA,UAAkB,YAA6B,CAAA,GAC9C,CAAC,SAAS,oBAAC,aAAD,EAAa,SAAS,QAAU,CAAA,CACxC;IAEG,EAAA,CAAA,GAEb,YAAY,oBAAC,aAAD;GAAa,WAAU;GAAuB;EAAsB,CAAA,CAC7E;;AAEV"}
+{"version":3,"file":"card.js","names":[],"sources":["../../../resources/js/core/components/card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { InfoTooltip } from \"./info-tooltip\";\n\nfunction Card({ className, ...props }: React.ComponentProps<\"article\">) {\n  return (\n    <article\n      data-slot=\"card\"\n      className={cn(\n        \"flex flex-col gap-6 rounded-lt border border-lt-border bg-lt-surface py-lt-gutter text-lt-surface-fg shadow-lt-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\"flex flex-col gap-1.5 px-lt-gutter\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"font-semibold leading-none\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-lt-muted-fg\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"card-content\" className={cn(\"px-lt-gutter\", className)} {...props} />;\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center px-lt-gutter\", className)}\n      {...props}\n    />\n  );\n}\n\nconst CardComponent: RendererComponent<\"card\"> = ({ children, node }) => {\n  const { title, description, tooltip } = node.props;\n\n  return (\n    <Card data-lattice-component={nodeIdentity(node)}>\n      {(title || description) && (\n        <CardHeader>\n          {title && (\n            <div className=\"flex items-center\">\n              <CardTitle>{title}</CardTitle>\n              <InfoTooltip content={tooltip} />\n            </div>\n          )}\n          {description && (\n            <div className=\"flex items-center\">\n              <CardDescription>{description}</CardDescription>\n              {!title && <InfoTooltip content={tooltip} />}\n            </div>\n          )}\n        </CardHeader>\n      )}\n      {children && <CardContent className=\"flex flex-col gap-6\">{children}</CardContent>}\n    </Card>\n  );\n};\n\nexport default CardComponent;\nexport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };\n"],"mappings":";;;;;;AAMA,SAAS,KAAK,EAAE,WAAW,GAAG,SAA0C;CACtE,OACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GACT,qHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,SAAS;EACrD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,4BAA4B,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,gBAAgB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7F;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kCAAkC,SAAS;EACzD,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,iBAA4C,EAAE,UAAU,WAAW;CACvE,MAAM,EAAE,OAAO,aAAa,YAAY,KAAK;CAE7C,OACE,qBAAC,MAAD;EAAM,0BAAwB,aAAa,IAAI;YAA/C,EACI,SAAS,gBACT,qBAAC,YAAD,EAAA,UAAA,CACG,SACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA,GAC7B,oBAAC,aAAD,EAAa,SAAS,QAAU,CAAA,CAC7B;MAEN,eACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,iBAAD,EAAA,UAAkB,YAA6B,CAAA,GAC9C,CAAC,SAAS,oBAAC,aAAD,EAAa,SAAS,QAAU,CAAA,CACxC;IAEG,EAAA,CAAA,GAEb,YAAY,oBAAC,aAAD;GAAa,WAAU;GAAuB;EAAsB,CAAA,CAC7E;;AAEV"}

package/dist/core/components/chart.js

@@ -1,4 +1,7 @@
+import { useLocale } from "../../i18n/locale.js";
+import { useTimezone } from "../../i18n/timezone.js";
 import { nodeIdentity } from "../test-id.js";
+import { formatValue } from "../../format/value.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, ComposedChart, Legend, Line, LineChart, Pie, PieChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 //#region resources/js/core/components/chart.tsx
@@ -20,6 +23,18 @@ var compactLegendProps = {
 	}
 };
 var axisTick = { fontSize: 10 };
+var tooltipProps = {
+	contentStyle: {
+		background: "var(--lt-surface)",
+		border: "1px solid var(--lt-border)",
+		borderRadius: "var(--lt-radius-sm)",
+		boxShadow: "var(--lt-shadow-sm)",
+		color: "var(--lt-surface-fg)",
+		fontSize: 12
+	},
+	itemStyle: { color: "var(--lt-surface-fg)" },
+	labelStyle: { color: "var(--lt-muted-fg)" }
+};
 var palette = [
 	"var(--lt-primary)",
 	"var(--lt-success)",
@@ -70,6 +85,21 @@ function ChartFrame({ children, description, id, title }) {
 function CartesianChart({ props }) {
 	const series = props.series.filter(isCartesianSeries);
 	const RechartsChart = cartesianChartFor(series);
+	const { locale } = useLocale();
+	const { timezone } = useTimezone();
+	const ctx = {
+		locale,
+		timezone
+	};
+	const formatCategory = (value) => formatValue(value, props.categoryFormat, ctx);
+	const formatValueTick = (value) => formatValue(value, props.valueFormat, ctx);
+	const tooltipCursor = series.some((item) => item.type === "bar") ? {
+		fill: "var(--lt-muted-fg)",
+		fillOpacity: .15
+	} : {
+		stroke: "var(--lt-muted-fg)",
+		strokeOpacity: .4
+	};
 	return /* @__PURE__ */ jsx(ResponsiveContainer, {
 		width: "100%",
 		height: props.height,
@@ -86,15 +116,22 @@ function CartesianChart({ props }) {
 					dataKey: props.categoryKey,
 					stroke: "var(--lt-muted-fg)",
 					tick: axisTick,
+					tickFormatter: formatCategory,
 					tickLine: false
 				}),
 				props.yAxis && /* @__PURE__ */ jsx(YAxis, {
 					stroke: "var(--lt-muted-fg)",
 					tick: axisTick,
+					tickFormatter: formatValueTick,
 					tickLine: false,
 					width: 42
 				}),
-				props.tooltip && /* @__PURE__ */ jsx(Tooltip, {}),
+				props.tooltip && /* @__PURE__ */ jsx(Tooltip, {
+					...tooltipProps,
+					cursor: tooltipCursor,
+					formatter: formatValueTick,
+					labelFormatter: formatCategory
+				}),
 				props.legend && /* @__PURE__ */ jsx(Legend, { ...compactLegendProps }),
 				series.map((item, index) => {
 					const color = item.color ?? colorAt(index);
@@ -134,6 +171,12 @@ function CartesianChart({ props }) {
 	});
 }
 function PieChartView({ props, series }) {
+	const { locale } = useLocale();
+	const { timezone } = useTimezone();
+	const ctx = {
+		locale,
+		timezone
+	};
 	return /* @__PURE__ */ jsx(ResponsiveContainer, {
 		width: "100%",
 		height: props.height,
@@ -141,7 +184,11 @@ function PieChartView({ props, series }) {
 		children: /* @__PURE__ */ jsxs(PieChart, {
 			margin: chartMargin,
 			children: [
-				props.tooltip && /* @__PURE__ */ jsx(Tooltip, {}),
+				props.tooltip && /* @__PURE__ */ jsx(Tooltip, {
+					...tooltipProps,
+					formatter: (value) => formatValue(value, props.valueFormat, ctx),
+					labelFormatter: (value) => formatValue(value, props.categoryFormat, ctx)
+				}),
 				props.legend && /* @__PURE__ */ jsx(Legend, { ...compactLegendProps }),
 				/* @__PURE__ */ jsx(Pie, {
 					data: props.data,

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

@@ -1 +1 @@
-{"version":3,"file":"chart.js","names":[],"sources":["../../../resources/js/core/components/chart.tsx"],"sourcesContent":["import {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Cell,\n  ComposedChart,\n  Legend,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport type { ComponentType, ReactNode } from \"react\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { PropsOf, RendererComponent } from \"@lattice-php/lattice/core/types\";\n\ntype ChartProps = PropsOf<\"chart\">;\ntype ChartSeries = ChartProps[\"series\"][number];\ntype ChartDatum = ChartProps[\"data\"][number];\ntype CartesianSeries = ChartSeries & { type: \"area\" | \"bar\" | \"line\" };\ntype ChartMargin = { bottom: number; left: number; right: number; top: number };\ntype CartesianChartComponent = ComponentType<{\n  children: ReactNode;\n  data: ChartProps[\"data\"];\n  margin?: ChartMargin;\n}>;\n\nconst chartMargin: ChartMargin = { bottom: 0, left: 0, right: 16, top: 8 };\nconst compactLegendProps = {\n  align: \"center\" as const,\n  height: 24,\n  iconSize: 7,\n  verticalAlign: \"top\" as const,\n  wrapperStyle: { fontSize: 11, lineHeight: \"14px\", paddingBottom: 6 },\n};\nconst axisTick = { fontSize: 10 };\n\nconst palette = [\n  \"var(--lt-primary)\",\n  \"var(--lt-success)\",\n  \"var(--lt-info)\",\n  \"var(--lt-warning)\",\n  \"var(--lt-danger)\",\n  \"var(--lt-muted-fg)\",\n];\n\nfunction colorAt(index: number): string {\n  return palette[index % palette.length] ?? \"var(--lt-primary)\";\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === \"object\" && value !== null && !Array.isArray(value);\n}\n\nfunction datumColor(datum: ChartDatum, series: ChartSeries, index: number): string {\n  if (isRecord(datum) && typeof datum.color === \"string\") {\n    return datum.color;\n  }\n\n  return series.color ?? colorAt(index);\n}\n\nfunction isCartesianSeries(series: ChartSeries): series is CartesianSeries {\n  return series.type === \"area\" || series.type === \"bar\" || series.type === \"line\";\n}\n\nfunction cartesianChartFor(series: CartesianSeries[]): CartesianChartComponent {\n  const types = new Set(series.map((item) => item.type));\n  const firstSeries = series[0];\n\n  if (firstSeries === undefined || types.size !== 1) {\n    return ComposedChart;\n  }\n\n  switch (firstSeries.type) {\n    case \"area\":\n      return AreaChart;\n    case \"bar\":\n      return BarChart;\n    case \"line\":\n      return LineChart;\n  }\n}\n\nfunction ChartFrame({\n  children,\n  description,\n  id,\n  title,\n}: {\n  children: ReactNode;\n  description: string | null;\n  id?: string;\n  title: string | null;\n}) {\n  const hasHeader = title !== null || description !== null;\n\n  return (\n    <div\n      className=\"flex flex-col gap-3 rounded-lt border border-lt-border bg-lt-surface p-4 text-lt-surface-fg shadow-lt-sm\"\n      data-lattice-component={id}\n    >\n      {hasHeader && (\n        <div className=\"flex min-w-0 flex-col gap-1.5\">\n          {title !== null && <div className=\"text-sm font-semibold leading-tight\">{title}</div>}\n          {description !== null && (\n            <div className=\"text-xs leading-5 text-lt-muted-fg\">{description}</div>\n          )}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n\nfunction CartesianChart({ props }: { props: ChartProps }) {\n  const series = props.series.filter(isCartesianSeries);\n  const RechartsChart = cartesianChartFor(series);\n\n  return (\n    <ResponsiveContainer width=\"100%\" height={props.height} debounce={100}>\n      <RechartsChart data={props.data} margin={chartMargin}>\n        {props.grid && <CartesianGrid strokeDasharray=\"3 3\" stroke=\"var(--lt-border)\" />}\n        {props.xAxis && props.categoryKey !== null && (\n          <XAxis\n            dataKey={props.categoryKey}\n            stroke=\"var(--lt-muted-fg)\"\n            tick={axisTick}\n            tickLine={false}\n          />\n        )}\n        {props.yAxis && (\n          <YAxis stroke=\"var(--lt-muted-fg)\" tick={axisTick} tickLine={false} width={42} />\n        )}\n        {props.tooltip && <Tooltip />}\n        {props.legend && <Legend {...compactLegendProps} />}\n        {series.map((item, index) => {\n          const color = item.color ?? colorAt(index);\n          const key = `${item.type}:${item.dataKey}`;\n\n          if (item.type === \"area\") {\n            return (\n              <Area\n                key={key}\n                dataKey={item.dataKey}\n                fill={color}\n                fillOpacity={0.16}\n                name={item.name ?? undefined}\n                stackId={item.stackId ?? undefined}\n                stroke={color}\n                type=\"monotone\"\n              />\n            );\n          }\n\n          if (item.type === \"bar\") {\n            return (\n              <Bar\n                key={key}\n                dataKey={item.dataKey}\n                fill={color}\n                name={item.name ?? undefined}\n                radius={[4, 4, 0, 0]}\n                stackId={item.stackId ?? undefined}\n              />\n            );\n          }\n\n          return (\n            <Line\n              key={key}\n              dataKey={item.dataKey}\n              dot={false}\n              name={item.name ?? undefined}\n              stroke={color}\n              strokeWidth={2}\n              type=\"monotone\"\n            />\n          );\n        })}\n      </RechartsChart>\n    </ResponsiveContainer>\n  );\n}\n\nfunction PieChartView({ props, series }: { props: ChartProps; series: ChartSeries }) {\n  return (\n    <ResponsiveContainer width=\"100%\" height={props.height} debounce={100}>\n      <PieChart margin={chartMargin}>\n        {props.tooltip && <Tooltip />}\n        {props.legend && <Legend {...compactLegendProps} />}\n        <Pie\n          data={props.data}\n          dataKey={series.dataKey}\n          name={series.name ?? undefined}\n          nameKey={series.nameKey ?? undefined}\n          outerRadius=\"68%\"\n        >\n          {props.data.map((datum, index) => (\n            <Cell key={index} fill={datumColor(datum, series, index)} />\n          ))}\n        </Pie>\n      </PieChart>\n    </ResponsiveContainer>\n  );\n}\n\nconst ChartComponent: RendererComponent<\"chart\"> = ({ node }) => {\n  const props = node.props;\n  const pieSeries = props.series.find((series) => series.type === \"pie\");\n  const hasCartesianSeries = props.series.some(isCartesianSeries);\n\n  return (\n    <ChartFrame description={props.description} id={nodeIdentity(node)} title={props.title}>\n      <div className=\"min-h-0 w-full\">\n        {pieSeries && !hasCartesianSeries ? (\n          <PieChartView props={props} series={pieSeries} />\n        ) : (\n          <CartesianChart props={props} />\n        )}\n      </div>\n    </ChartFrame>\n  );\n};\n\nexport default ChartComponent;\n"],"mappings":"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"}
+{"version":3,"file":"chart.js","names":[],"sources":["../../../resources/js/core/components/chart.tsx"],"sourcesContent":["import {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Cell,\n  ComposedChart,\n  Legend,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport type { ComponentType, ReactNode } from \"react\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { PropsOf, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useLocale, useTimezone } from \"@lattice-php/lattice/i18n\";\nimport { formatValue } from \"../../format/value\";\n\ntype ChartProps = PropsOf<\"chart\">;\ntype ChartSeries = ChartProps[\"series\"][number];\ntype ChartDatum = ChartProps[\"data\"][number];\ntype CartesianSeries = ChartSeries & { type: \"area\" | \"bar\" | \"line\" };\ntype ChartMargin = { bottom: number; left: number; right: number; top: number };\ntype CartesianChartComponent = ComponentType<{\n  children: ReactNode;\n  data: ChartProps[\"data\"];\n  margin?: ChartMargin;\n}>;\n\nconst chartMargin: ChartMargin = { bottom: 0, left: 0, right: 16, top: 8 };\nconst compactLegendProps = {\n  align: \"center\" as const,\n  height: 24,\n  iconSize: 7,\n  verticalAlign: \"top\" as const,\n  wrapperStyle: { fontSize: 11, lineHeight: \"14px\", paddingBottom: 6 },\n};\nconst axisTick = { fontSize: 10 };\nconst tooltipProps = {\n  contentStyle: {\n    background: \"var(--lt-surface)\",\n    border: \"1px solid var(--lt-border)\",\n    borderRadius: \"var(--lt-radius-sm)\",\n    boxShadow: \"var(--lt-shadow-sm)\",\n    color: \"var(--lt-surface-fg)\",\n    fontSize: 12,\n  },\n  itemStyle: { color: \"var(--lt-surface-fg)\" },\n  labelStyle: { color: \"var(--lt-muted-fg)\" },\n} as const;\n\nconst palette = [\n  \"var(--lt-primary)\",\n  \"var(--lt-success)\",\n  \"var(--lt-info)\",\n  \"var(--lt-warning)\",\n  \"var(--lt-danger)\",\n  \"var(--lt-muted-fg)\",\n];\n\nfunction colorAt(index: number): string {\n  return palette[index % palette.length] ?? \"var(--lt-primary)\";\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === \"object\" && value !== null && !Array.isArray(value);\n}\n\nfunction datumColor(datum: ChartDatum, series: ChartSeries, index: number): string {\n  if (isRecord(datum) && typeof datum.color === \"string\") {\n    return datum.color;\n  }\n\n  return series.color ?? colorAt(index);\n}\n\nfunction isCartesianSeries(series: ChartSeries): series is CartesianSeries {\n  return series.type === \"area\" || series.type === \"bar\" || series.type === \"line\";\n}\n\nfunction cartesianChartFor(series: CartesianSeries[]): CartesianChartComponent {\n  const types = new Set(series.map((item) => item.type));\n  const firstSeries = series[0];\n\n  if (firstSeries === undefined || types.size !== 1) {\n    return ComposedChart;\n  }\n\n  switch (firstSeries.type) {\n    case \"area\":\n      return AreaChart;\n    case \"bar\":\n      return BarChart;\n    case \"line\":\n      return LineChart;\n  }\n}\n\nfunction ChartFrame({\n  children,\n  description,\n  id,\n  title,\n}: {\n  children: ReactNode;\n  description: string | null;\n  id?: string;\n  title: string | null;\n}) {\n  const hasHeader = title !== null || description !== null;\n\n  return (\n    <div\n      className=\"flex flex-col gap-3 rounded-lt border border-lt-border bg-lt-surface p-4 text-lt-surface-fg shadow-lt-sm\"\n      data-lattice-component={id}\n    >\n      {hasHeader && (\n        <div className=\"flex min-w-0 flex-col gap-1.5\">\n          {title !== null && <div className=\"text-sm font-semibold leading-tight\">{title}</div>}\n          {description !== null && (\n            <div className=\"text-xs leading-5 text-lt-muted-fg\">{description}</div>\n          )}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n\nfunction CartesianChart({ props }: { props: ChartProps }) {\n  const series = props.series.filter(isCartesianSeries);\n  const RechartsChart = cartesianChartFor(series);\n  const { locale } = useLocale();\n  const { timezone } = useTimezone();\n  const ctx = { locale, timezone };\n  const formatCategory = (value: unknown) => formatValue(value, props.categoryFormat, ctx);\n  const formatValueTick = (value: unknown) => formatValue(value, props.valueFormat, ctx);\n  const hasBarSeries = series.some((item) => item.type === \"bar\");\n  const tooltipCursor = hasBarSeries\n    ? { fill: \"var(--lt-muted-fg)\", fillOpacity: 0.15 }\n    : { stroke: \"var(--lt-muted-fg)\", strokeOpacity: 0.4 };\n\n  return (\n    <ResponsiveContainer width=\"100%\" height={props.height} debounce={100}>\n      <RechartsChart data={props.data} margin={chartMargin}>\n        {props.grid && <CartesianGrid strokeDasharray=\"3 3\" stroke=\"var(--lt-border)\" />}\n        {props.xAxis && props.categoryKey !== null && (\n          <XAxis\n            dataKey={props.categoryKey}\n            stroke=\"var(--lt-muted-fg)\"\n            tick={axisTick}\n            tickFormatter={formatCategory}\n            tickLine={false}\n          />\n        )}\n        {props.yAxis && (\n          <YAxis\n            stroke=\"var(--lt-muted-fg)\"\n            tick={axisTick}\n            tickFormatter={formatValueTick}\n            tickLine={false}\n            width={42}\n          />\n        )}\n        {props.tooltip && (\n          <Tooltip\n            {...tooltipProps}\n            cursor={tooltipCursor}\n            formatter={formatValueTick}\n            labelFormatter={formatCategory}\n          />\n        )}\n        {props.legend && <Legend {...compactLegendProps} />}\n        {series.map((item, index) => {\n          const color = item.color ?? colorAt(index);\n          const key = `${item.type}:${item.dataKey}`;\n\n          if (item.type === \"area\") {\n            return (\n              <Area\n                key={key}\n                dataKey={item.dataKey}\n                fill={color}\n                fillOpacity={0.16}\n                name={item.name ?? undefined}\n                stackId={item.stackId ?? undefined}\n                stroke={color}\n                type=\"monotone\"\n              />\n            );\n          }\n\n          if (item.type === \"bar\") {\n            return (\n              <Bar\n                key={key}\n                dataKey={item.dataKey}\n                fill={color}\n                name={item.name ?? undefined}\n                radius={[4, 4, 0, 0]}\n                stackId={item.stackId ?? undefined}\n              />\n            );\n          }\n\n          return (\n            <Line\n              key={key}\n              dataKey={item.dataKey}\n              dot={false}\n              name={item.name ?? undefined}\n              stroke={color}\n              strokeWidth={2}\n              type=\"monotone\"\n            />\n          );\n        })}\n      </RechartsChart>\n    </ResponsiveContainer>\n  );\n}\n\nfunction PieChartView({ props, series }: { props: ChartProps; series: ChartSeries }) {\n  const { locale } = useLocale();\n  const { timezone } = useTimezone();\n  const ctx = { locale, timezone };\n\n  return (\n    <ResponsiveContainer width=\"100%\" height={props.height} debounce={100}>\n      <PieChart margin={chartMargin}>\n        {props.tooltip && (\n          <Tooltip\n            {...tooltipProps}\n            formatter={(value) => formatValue(value, props.valueFormat, ctx)}\n            labelFormatter={(value) => formatValue(value, props.categoryFormat, ctx)}\n          />\n        )}\n        {props.legend && <Legend {...compactLegendProps} />}\n        <Pie\n          data={props.data}\n          dataKey={series.dataKey}\n          name={series.name ?? undefined}\n          nameKey={series.nameKey ?? undefined}\n          outerRadius=\"68%\"\n        >\n          {props.data.map((datum, index) => (\n            <Cell key={index} fill={datumColor(datum, series, index)} />\n          ))}\n        </Pie>\n      </PieChart>\n    </ResponsiveContainer>\n  );\n}\n\nconst ChartComponent: RendererComponent<\"chart\"> = ({ node }) => {\n  const props = node.props;\n  const pieSeries = props.series.find((series) => series.type === \"pie\");\n  const hasCartesianSeries = props.series.some(isCartesianSeries);\n\n  return (\n    <ChartFrame description={props.description} id={nodeIdentity(node)} title={props.title}>\n      <div className=\"min-h-0 w-full\">\n        {pieSeries && !hasCartesianSeries ? (\n          <PieChartView props={props} series={pieSeries} />\n        ) : (\n          <CartesianChart props={props} />\n        )}\n      </div>\n    </ChartFrame>\n  );\n};\n\nexport default ChartComponent;\n"],"mappings":"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"}

package/dist/core/components/collapsible.js

@@ -27,6 +27,7 @@ var CollapsibleComponent = ({ children, node }) => {
 		});
 	}
 	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "collapsible",
 		"data-lattice-component": identity,
 		children: [/* @__PURE__ */ jsxs("div", {
 			"aria-controls": contentId,

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

@@ -1 +1 @@
-{"version":3,"file":"collapsible.js","names":[],"sources":["../../../resources/js/core/components/collapsible.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { InfoTooltip } from \"./info-tooltip\";\nimport { nodeIdentity, prefixedTestId } from \"@lattice-php/lattice/core/test-id\";\nimport { toNodes } from \"@lattice-php/lattice/core/nodes\";\nimport type { 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\nconst CollapsibleComponent: RendererComponent<\"collapsible\"> = ({ children, node }) => {\n  const rememberState = node.props.rememberState === true;\n  const trigger = toNodes(node.props.trigger);\n  const identity = nodeIdentity(node);\n  const storageKey = `lattice:collapsible:${identity ?? \"default\"}`;\n  const contentId = `${identity ?? \"collapsible\"}-content`;\n\n  const [open, setOpen] = useState(() =>\n    readStored(storageKey, rememberState, node.props.collapsed === false),\n  );\n\n  function toggle(): void {\n    setOpen((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  return (\n    <div data-lattice-component={identity}>\n      <div\n        aria-controls={contentId}\n        aria-expanded={open}\n        data-test={prefixedTestId(\"collapsible-toggle\", identity) ?? \"collapsible-toggle-default\"}\n        className=\"flex w-full cursor-pointer items-center justify-between gap-4 rounded-lt-sm py-2 text-left text-lt-fg transition-colors hover:bg-lt-muted\"\n        onClick={toggle}\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\" || event.key === \" \") {\n            event.preventDefault();\n            toggle();\n          }\n        }}\n        role=\"button\"\n        tabIndex={0}\n      >\n        <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n          <Renderer nodes={trigger} />\n          {node.props.tooltip && (\n            <span\n              role=\"presentation\"\n              onClick={(event) => event.stopPropagation()}\n              onKeyDown={(event) => event.stopPropagation()}\n            >\n              <InfoTooltip content={node.props.tooltip} />\n            </span>\n          )}\n        </div>\n        <Icon\n          name=\"chevron-down\"\n          className={cn(\n            \"size-lt-icon-md shrink-0 text-lt-muted-fg transition-transform\",\n            !open && \"-rotate-90\",\n          )}\n        />\n      </div>\n\n      {open && children && (\n        <div id={contentId} className=\"flex flex-col gap-4 pt-2\">\n          {children}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default CollapsibleComponent;\n"],"mappings":";;;;;;;;;AASA,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,IAAM,wBAA0D,EAAE,UAAU,WAAW;CACrF,MAAM,gBAAgB,KAAK,MAAM,kBAAkB;CACnD,MAAM,UAAU,QAAQ,KAAK,MAAM,OAAO;CAC1C,MAAM,WAAW,aAAa,IAAI;CAClC,MAAM,aAAa,uBAAuB,YAAY;CACtD,MAAM,YAAY,GAAG,YAAY,cAAc;CAE/C,MAAM,CAAC,MAAM,WAAW,eACtB,WAAW,YAAY,eAAe,KAAK,MAAM,cAAc,KAAK,CACtE;CAEA,SAAS,SAAe;EACtB,SAAS,UAAU;GACjB,MAAM,OAAO,CAAC;GAEd,IAAI,iBAAiB,OAAO,WAAW,aACrC,OAAO,aAAa,QAAQ,YAAY,OAAO,IAAI,CAAC;GAGtD,OAAO;EACT,CAAC;CACH;CAEA,OACE,qBAAC,OAAD;EAAK,0BAAwB;YAA7B,CACE,qBAAC,OAAD;GACE,iBAAe;GACf,iBAAe;GACf,aAAW,eAAe,sBAAsB,QAAQ,KAAK;GAC7D,WAAU;GACV,SAAS;GACT,YAAY,UAAU;IACpB,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;KAC9C,MAAM,eAAe;KACrB,OAAO;IACT;GACF;GACA,MAAK;GACL,UAAU;aAbZ,CAeE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,UAAD,EAAU,OAAO,QAAU,CAAA,GAC1B,KAAK,MAAM,WACV,oBAAC,QAAD;KACE,MAAK;KACL,UAAU,UAAU,MAAM,gBAAgB;KAC1C,YAAY,UAAU,MAAM,gBAAgB;eAE5C,oBAAC,aAAD,EAAa,SAAS,KAAK,MAAM,QAAU,CAAA;IACvC,CAAA,CAEL;OACL,oBAAC,MAAD;IACE,MAAK;IACL,WAAW,GACT,kEACA,CAAC,QAAQ,YACX;GACD,CAAA,CACE;MAEJ,QAAQ,YACP,oBAAC,OAAD;GAAK,IAAI;GAAW,WAAU;GAC3B;EACE,CAAA,CAEJ;;AAET"}
+{"version":3,"file":"collapsible.js","names":[],"sources":["../../../resources/js/core/components/collapsible.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { InfoTooltip } from \"./info-tooltip\";\nimport { nodeIdentity, prefixedTestId } from \"@lattice-php/lattice/core/test-id\";\nimport { toNodes } from \"@lattice-php/lattice/core/nodes\";\nimport type { 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\nconst CollapsibleComponent: RendererComponent<\"collapsible\"> = ({ children, node }) => {\n  const rememberState = node.props.rememberState === true;\n  const trigger = toNodes(node.props.trigger);\n  const identity = nodeIdentity(node);\n  const storageKey = `lattice:collapsible:${identity ?? \"default\"}`;\n  const contentId = `${identity ?? \"collapsible\"}-content`;\n\n  const [open, setOpen] = useState(() =>\n    readStored(storageKey, rememberState, node.props.collapsed === false),\n  );\n\n  function toggle(): void {\n    setOpen((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  return (\n    <div data-slot=\"collapsible\" data-lattice-component={identity}>\n      <div\n        aria-controls={contentId}\n        aria-expanded={open}\n        data-test={prefixedTestId(\"collapsible-toggle\", identity) ?? \"collapsible-toggle-default\"}\n        className=\"flex w-full cursor-pointer items-center justify-between gap-4 rounded-lt-sm py-2 text-left text-lt-fg transition-colors hover:bg-lt-muted\"\n        onClick={toggle}\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\" || event.key === \" \") {\n            event.preventDefault();\n            toggle();\n          }\n        }}\n        role=\"button\"\n        tabIndex={0}\n      >\n        <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n          <Renderer nodes={trigger} />\n          {node.props.tooltip && (\n            <span\n              role=\"presentation\"\n              onClick={(event) => event.stopPropagation()}\n              onKeyDown={(event) => event.stopPropagation()}\n            >\n              <InfoTooltip content={node.props.tooltip} />\n            </span>\n          )}\n        </div>\n        <Icon\n          name=\"chevron-down\"\n          className={cn(\n            \"size-lt-icon-md shrink-0 text-lt-muted-fg transition-transform\",\n            !open && \"-rotate-90\",\n          )}\n        />\n      </div>\n\n      {open && children && (\n        <div id={contentId} className=\"flex flex-col gap-4 pt-2\">\n          {children}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default CollapsibleComponent;\n"],"mappings":";;;;;;;;;AASA,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,IAAM,wBAA0D,EAAE,UAAU,WAAW;CACrF,MAAM,gBAAgB,KAAK,MAAM,kBAAkB;CACnD,MAAM,UAAU,QAAQ,KAAK,MAAM,OAAO;CAC1C,MAAM,WAAW,aAAa,IAAI;CAClC,MAAM,aAAa,uBAAuB,YAAY;CACtD,MAAM,YAAY,GAAG,YAAY,cAAc;CAE/C,MAAM,CAAC,MAAM,WAAW,eACtB,WAAW,YAAY,eAAe,KAAK,MAAM,cAAc,KAAK,CACtE;CAEA,SAAS,SAAe;EACtB,SAAS,UAAU;GACjB,MAAM,OAAO,CAAC;GAEd,IAAI,iBAAiB,OAAO,WAAW,aACrC,OAAO,aAAa,QAAQ,YAAY,OAAO,IAAI,CAAC;GAGtD,OAAO;EACT,CAAC;CACH;CAEA,OACE,qBAAC,OAAD;EAAK,aAAU;EAAc,0BAAwB;YAArD,CACE,qBAAC,OAAD;GACE,iBAAe;GACf,iBAAe;GACf,aAAW,eAAe,sBAAsB,QAAQ,KAAK;GAC7D,WAAU;GACV,SAAS;GACT,YAAY,UAAU;IACpB,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;KAC9C,MAAM,eAAe;KACrB,OAAO;IACT;GACF;GACA,MAAK;GACL,UAAU;aAbZ,CAeE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,UAAD,EAAU,OAAO,QAAU,CAAA,GAC1B,KAAK,MAAM,WACV,oBAAC,QAAD;KACE,MAAK;KACL,UAAU,UAAU,MAAM,gBAAgB;KAC1C,YAAY,UAAU,MAAM,gBAAgB;eAE5C,oBAAC,aAAD,EAAa,SAAS,KAAK,MAAM,QAAU,CAAA;IACvC,CAAA,CAEL;OACL,oBAAC,MAAD;IACE,MAAK;IACL,WAAW,GACT,kEACA,CAAC,QAAQ,YACX;GACD,CAAA,CACE;MAEJ,QAAQ,YACP,oBAAC,OAAD;GAAK,IAAI;GAAW,WAAU;GAC3B;EACE,CAAA,CAEJ;;AAET"}

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

@@ -7,6 +7,6 @@ export declare const FOCUS_RING = "focus-visible:border-lt-ring focus-visible:ri
  * border, focus ring, invalid, and disabled treatment are unified.
  */
 export declare const controlSurface: (props?: ({
-    density?: "comfortable" | "compact" | null | undefined;
+    density?: "compact" | "comfortable" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type ControlSurfaceVariants = VariantProps<typeof controlSurface>;

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

@@ -1,6 +1,6 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as React from "react";
-export declare const DIALOG_SURFACE = "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lt-lg";
+export declare const DIALOG_SURFACE = "fixed left-1/2 top-1/2 z-lt-modal -translate-x-1/2 -translate-y-1/2 rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lt-lg";
 declare function Dialog(props: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
 declare function DialogClose(props: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
 declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;

package/dist/core/components/dialog.js

@@ -5,7 +5,7 @@ import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 //#region resources/js/core/components/dialog.tsx
-var DIALOG_SURFACE = "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lt-lg";
+var DIALOG_SURFACE = "fixed left-1/2 top-1/2 z-lt-modal -translate-x-1/2 -translate-y-1/2 rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lt-lg";
 function Dialog(props) {
 	return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
 		"data-slot": "dialog",
@@ -34,7 +34,7 @@ function DialogDescription({ className, ...props }) {
 }
 function DialogContent({ children, className, ...props }) {
 	return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [/* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
-		className: "fixed inset-0 z-50 bg-lt-overlay",
+		className: "fixed inset-0 z-lt-overlay bg-lt-overlay",
 		"data-slot": "dialog-overlay"
 	}), /* @__PURE__ */ jsx(DialogPrimitive.Content, {
 		className: cn(DIALOG_SURFACE, className),

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

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

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

@@ -30,7 +30,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-lt-md",
+		className: "fixed z-lt-popover 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": nodeIdentity(node),
 		role: label ? "group" : void 0,
 		style: placementStyle(placement, offset),
@@ -40,7 +40,7 @@ var FloatingPanelComponent = ({ children, node }) => {
 	const anchorsToStart = placement === "top-start" || placement === "bottom-start";
 	return /* @__PURE__ */ jsx("div", {
 		"aria-label": label,
-		className: "fixed z-50 max-w-[calc(100vw-2rem)]",
+		className: "fixed z-lt-popover max-w-[calc(100vw-2rem)]",
 		"data-lattice-component": nodeIdentity(node),
 		role: label ? "group" : void 0,
 		style: placementStyle(placement, offset),

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 { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\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={nodeIdentity(node)}\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={nodeIdentity(node)}\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":";;;;;;AAOA,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,aAAa,IAAI;EACzC,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,aAAa,IAAI;EACzC,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"}
+{"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 { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\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-lt-popover 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={nodeIdentity(node)}\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-lt-popover max-w-[calc(100vw-2rem)]\"\n      data-lattice-component={nodeIdentity(node)}\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":";;;;;;AAOA,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,aAAa,IAAI;EACzC,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,aAAa,IAAI;EACzC,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/grid.js

@@ -5,6 +5,7 @@ import { jsx } from "react/jsx-runtime";
 var GridComponent = ({ children, node }) => {
 	const columns = Math.min(Math.max(node.props.columns ?? 1, 1), 4);
 	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "grid",
 		"data-lattice-component": nodeIdentity(node),
 		className: cn("grid gap-x-4 gap-y-6", columns >= 2 && "md:grid-cols-2", columns >= 3 && "lg:grid-cols-3", columns >= 4 && "xl:grid-cols-4"),
 		children

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

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

package/dist/core/components/link.js

@@ -1,4 +1,5 @@
 import { cn } from "../../lib/utils.js";
+import { IconRenderer } from "../../icons/icon-renderer.js";
 import { nodeIdentity } from "../test-id.js";
 import { useAction } from "../../action/use-action.js";
 import { actionMenuItemClassName, useActionMenu } from "../../action/components/action-menu-context.js";
@@ -13,9 +14,10 @@ function TextLink({ className = "", children, ...props }) {
 		children
 	});
 }
-function ActionLink({ action, className, children, testId }) {
+function ActionLink({ action, ariaLabel, className, children, testId }) {
 	const { processing, requestSubmit, overlays } = useAction(action);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+		"aria-label": ariaLabel,
 		className: cn(textLinkClassName, className),
 		"data-test": testId,
 		disabled: processing,
@@ -24,22 +26,78 @@ function ActionLink({ action, className, children, testId }) {
 		children
 	}), overlays] });
 }
+function LinkAffix({ affix, className }) {
+	if (affix.icon) return /* @__PURE__ */ jsx(IconRenderer, {
+		className: cn("size-lt-icon-md shrink-0", className),
+		icon: affix.icon
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("shrink-0 text-sm text-lt-muted-fg", className),
+		children: affix.text
+	});
+}
+function LinkContent({ icon, isMenuItem, label, prefix, suffix }) {
+	if (icon) return /* @__PURE__ */ jsx(IconRenderer, {
+		className: "size-lt-icon-md shrink-0",
+		icon
+	});
+	if (isMenuItem) return /* @__PURE__ */ jsxs(Fragment, { children: [
+		prefix ? /* @__PURE__ */ jsx(LinkAffix, { affix: prefix }) : null,
+		/* @__PURE__ */ jsx("span", { children: label }),
+		suffix ? /* @__PURE__ */ jsx(LinkAffix, {
+			affix: suffix,
+			className: "ml-auto"
+		}) : null
+	] });
+	if (prefix || suffix) return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex items-center gap-1.5 align-baseline",
+		children: [
+			prefix ? /* @__PURE__ */ jsx(LinkAffix, { affix: prefix }) : null,
+			/* @__PURE__ */ jsx("span", { children: label }),
+			suffix ? /* @__PURE__ */ jsx(LinkAffix, { affix: suffix }) : null
+		]
+	});
+	return label;
+}
+function labelWithTextAffixes(label, prefix, suffix) {
+	if (!prefix?.text && !suffix?.text) return;
+	return [
+		prefix?.text,
+		label,
+		suffix?.text
+	].filter((part) => Boolean(part)).join(" ");
+}
 var LinkComponent = ({ node }) => {
 	const isMenuItem = useActionMenu();
 	const action = node.props.action;
+	const icon = node.props.icon;
+	const label = node.props.label;
+	const prefix = node.props.prefix;
+	const suffix = node.props.suffix;
+	const iconOnly = Boolean(icon);
+	const content = /* @__PURE__ */ jsx(LinkContent, {
+		icon,
+		isMenuItem,
+		label,
+		prefix,
+		suffix
+	});
+	const ariaLabel = iconOnly ? label : labelWithTextAffixes(label, prefix, suffix);
 	if (action) return /* @__PURE__ */ jsx(ActionLink, {
 		action,
+		ariaLabel,
 		className: isMenuItem ? actionMenuItemClassName : void 0,
 		testId: nodeIdentity(node),
-		children: node.props.label
+		children: content
 	});
 	return /* @__PURE__ */ jsx(TextLink, {
+		"aria-label": ariaLabel,
 		className: isMenuItem ? actionMenuItemClassName : void 0,
 		"data-test": nodeIdentity(node),
 		href: node.props.href ?? "#",
 		method: node.props.method ?? "get",
 		tabIndex: node.props.tabIndex ?? void 0,
-		children: node.props.label
+		children: content
 	});
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"link.js","names":[],"sources":["../../../resources/js/core/components/link.tsx"],"sourcesContent":["import { Link } from \"@inertiajs/react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { useAction } from \"@lattice-php/lattice/action/use-action\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport {\n  actionMenuItemClassName,\n  useActionMenu,\n} from \"@lattice-php/lattice/action/components/action-menu-context\";\n\nconst textLinkClassName =\n  \"text-lt-fg underline decoration-lt-border underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-lt-border\";\n\nfunction TextLink({ className = \"\", children, ...props }: ComponentProps<typeof Link>) {\n  return (\n    <Link className={cn(textLinkClassName, className)} {...props}>\n      {children}\n    </Link>\n  );\n}\n\nfunction ActionLink({\n  action,\n  className,\n  children,\n  testId,\n}: {\n  action: Node<\"action\">;\n  className?: string;\n  children: ReactNode;\n  testId?: string;\n}) {\n  const { processing, requestSubmit, overlays } = useAction(action);\n\n  return (\n    <>\n      <button\n        className={cn(textLinkClassName, className)}\n        data-test={testId}\n        disabled={processing}\n        onClick={requestSubmit}\n        type=\"button\"\n      >\n        {children}\n      </button>\n      {overlays}\n    </>\n  );\n}\n\nconst LinkComponent: RendererComponent<\"link\"> = ({ node }) => {\n  const isMenuItem = useActionMenu();\n  const action = node.props.action;\n\n  if (action) {\n    return (\n      <ActionLink\n        action={action as Node<\"action\">}\n        className={isMenuItem ? actionMenuItemClassName : undefined}\n        testId={nodeIdentity(node)}\n      >\n        {node.props.label}\n      </ActionLink>\n    );\n  }\n\n  return (\n    <TextLink\n      className={isMenuItem ? actionMenuItemClassName : undefined}\n      data-test={nodeIdentity(node)}\n      href={node.props.href ?? \"#\"}\n      method={node.props.method ?? \"get\"}\n      tabIndex={node.props.tabIndex ?? undefined}\n    >\n      {node.props.label}\n    </TextLink>\n  );\n};\n\nexport default LinkComponent;\nexport { TextLink };\n"],"mappings":";;;;;;;AAWA,IAAM,oBACJ;AAEF,SAAS,SAAS,EAAE,YAAY,IAAI,UAAU,GAAG,SAAsC;CACrF,OACE,oBAAC,MAAD;EAAM,WAAW,GAAG,mBAAmB,SAAS;EAAG,GAAI;EACpD;CACG,CAAA;AAEV;AAEA,SAAS,WAAW,EAClB,QACA,WACA,UACA,UAMC;CACD,MAAM,EAAE,YAAY,eAAe,aAAa,UAAU,MAAM;CAEhE,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,UAAD;EACE,WAAW,GAAG,mBAAmB,SAAS;EAC1C,aAAW;EACX,UAAU;EACV,SAAS;EACT,MAAK;EAEJ;CACK,CAAA,GACP,QACD,EAAA,CAAA;AAEN;AAEA,IAAM,iBAA4C,EAAE,WAAW;CAC7D,MAAM,aAAa,cAAc;CACjC,MAAM,SAAS,KAAK,MAAM;CAE1B,IAAI,QACF,OACE,oBAAC,YAAD;EACU;EACR,WAAW,aAAa,0BAA0B,KAAA;EAClD,QAAQ,aAAa,IAAI;YAExB,KAAK,MAAM;CACF,CAAA;CAIhB,OACE,oBAAC,UAAD;EACE,WAAW,aAAa,0BAA0B,KAAA;EAClD,aAAW,aAAa,IAAI;EAC5B,MAAM,KAAK,MAAM,QAAQ;EACzB,QAAQ,KAAK,MAAM,UAAU;EAC7B,UAAU,KAAK,MAAM,YAAY,KAAA;YAEhC,KAAK,MAAM;CACJ,CAAA;AAEd"}
+{"version":3,"file":"link.js","names":[],"sources":["../../../resources/js/core/components/link.tsx"],"sourcesContent":["import { Link } from \"@inertiajs/react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { useAction } from \"@lattice-php/lattice/action/use-action\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport type { Affix } from \"@lattice-php/lattice/types/generated\";\nimport {\n  actionMenuItemClassName,\n  useActionMenu,\n} from \"@lattice-php/lattice/action/components/action-menu-context\";\n\nconst textLinkClassName =\n  \"text-lt-fg underline decoration-lt-border underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-lt-border\";\n\nfunction TextLink({ className = \"\", children, ...props }: ComponentProps<typeof Link>) {\n  return (\n    <Link className={cn(textLinkClassName, className)} {...props}>\n      {children}\n    </Link>\n  );\n}\n\nfunction ActionLink({\n  action,\n  ariaLabel,\n  className,\n  children,\n  testId,\n}: {\n  action: Node<\"action\">;\n  ariaLabel?: string;\n  className?: string;\n  children: ReactNode;\n  testId?: string;\n}) {\n  const { processing, requestSubmit, overlays } = useAction(action);\n\n  return (\n    <>\n      <button\n        aria-label={ariaLabel}\n        className={cn(textLinkClassName, className)}\n        data-test={testId}\n        disabled={processing}\n        onClick={requestSubmit}\n        type=\"button\"\n      >\n        {children}\n      </button>\n      {overlays}\n    </>\n  );\n}\n\nfunction LinkAffix({ affix, className }: { affix: Affix; className?: string }) {\n  if (affix.icon) {\n    return <IconRenderer className={cn(\"size-lt-icon-md shrink-0\", className)} icon={affix.icon} />;\n  }\n\n  return <span className={cn(\"shrink-0 text-sm text-lt-muted-fg\", className)}>{affix.text}</span>;\n}\n\nfunction LinkContent({\n  icon,\n  isMenuItem,\n  label,\n  prefix,\n  suffix,\n}: {\n  icon?: string | null;\n  isMenuItem: boolean;\n  label: string;\n  prefix?: Affix | null;\n  suffix?: Affix | null;\n}) {\n  if (icon) {\n    return <IconRenderer className=\"size-lt-icon-md shrink-0\" icon={icon} />;\n  }\n\n  if (isMenuItem) {\n    return (\n      <>\n        {prefix ? <LinkAffix affix={prefix} /> : null}\n        <span>{label}</span>\n        {suffix ? <LinkAffix affix={suffix} className=\"ml-auto\" /> : null}\n      </>\n    );\n  }\n\n  if (prefix || suffix) {\n    return (\n      <span className=\"inline-flex items-center gap-1.5 align-baseline\">\n        {prefix ? <LinkAffix affix={prefix} /> : null}\n        <span>{label}</span>\n        {suffix ? <LinkAffix affix={suffix} /> : null}\n      </span>\n    );\n  }\n\n  return label;\n}\n\nfunction labelWithTextAffixes(label: string, prefix?: Affix | null, suffix?: Affix | null) {\n  if (!prefix?.text && !suffix?.text) {\n    return undefined;\n  }\n\n  return [prefix?.text, label, suffix?.text]\n    .filter((part): part is string => Boolean(part))\n    .join(\" \");\n}\n\nconst LinkComponent: RendererComponent<\"link\"> = ({ node }) => {\n  const isMenuItem = useActionMenu();\n  const action = node.props.action;\n  const icon = node.props.icon;\n  const label = node.props.label;\n  const prefix = node.props.prefix;\n  const suffix = node.props.suffix;\n  const iconOnly = Boolean(icon);\n  const content = (\n    <LinkContent\n      icon={icon}\n      isMenuItem={isMenuItem}\n      label={label}\n      prefix={prefix}\n      suffix={suffix}\n    />\n  );\n  const ariaLabel = iconOnly ? label : labelWithTextAffixes(label, prefix, suffix);\n\n  if (action) {\n    return (\n      <ActionLink\n        action={action as Node<\"action\">}\n        ariaLabel={ariaLabel}\n        className={isMenuItem ? actionMenuItemClassName : undefined}\n        testId={nodeIdentity(node)}\n      >\n        {content}\n      </ActionLink>\n    );\n  }\n\n  return (\n    <TextLink\n      aria-label={ariaLabel}\n      className={isMenuItem ? actionMenuItemClassName : undefined}\n      data-test={nodeIdentity(node)}\n      href={node.props.href ?? \"#\"}\n      method={node.props.method ?? \"get\"}\n      tabIndex={node.props.tabIndex ?? undefined}\n    >\n      {content}\n    </TextLink>\n  );\n};\n\nexport default LinkComponent;\nexport { TextLink };\n"],"mappings":";;;;;;;;AAaA,IAAM,oBACJ;AAEF,SAAS,SAAS,EAAE,YAAY,IAAI,UAAU,GAAG,SAAsC;CACrF,OACE,oBAAC,MAAD;EAAM,WAAW,GAAG,mBAAmB,SAAS;EAAG,GAAI;EACpD;CACG,CAAA;AAEV;AAEA,SAAS,WAAW,EAClB,QACA,WACA,WACA,UACA,UAOC;CACD,MAAM,EAAE,YAAY,eAAe,aAAa,UAAU,MAAM;CAEhE,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,UAAD;EACE,cAAY;EACZ,WAAW,GAAG,mBAAmB,SAAS;EAC1C,aAAW;EACX,UAAU;EACV,SAAS;EACT,MAAK;EAEJ;CACK,CAAA,GACP,QACD,EAAA,CAAA;AAEN;AAEA,SAAS,UAAU,EAAE,OAAO,aAAmD;CAC7E,IAAI,MAAM,MACR,OAAO,oBAAC,cAAD;EAAc,WAAW,GAAG,4BAA4B,SAAS;EAAG,MAAM,MAAM;CAAO,CAAA;CAGhG,OAAO,oBAAC,QAAD;EAAM,WAAW,GAAG,qCAAqC,SAAS;YAAI,MAAM;CAAW,CAAA;AAChG;AAEA,SAAS,YAAY,EACnB,MACA,YACA,OACA,QACA,UAOC;CACD,IAAI,MACF,OAAO,oBAAC,cAAD;EAAc,WAAU;EAAiC;CAAO,CAAA;CAGzE,IAAI,YACF,OACE,qBAAA,UAAA,EAAA,UAAA;EACG,SAAS,oBAAC,WAAD,EAAW,OAAO,OAAS,CAAA,IAAI;EACzC,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA;EAClB,SAAS,oBAAC,WAAD;GAAW,OAAO;GAAQ,WAAU;EAAW,CAAA,IAAI;CAC7D,EAAA,CAAA;CAIN,IAAI,UAAU,QACZ,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB;GACG,SAAS,oBAAC,WAAD,EAAW,OAAO,OAAS,CAAA,IAAI;GACzC,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA;GAClB,SAAS,oBAAC,WAAD,EAAW,OAAO,OAAS,CAAA,IAAI;EACrC;;CAIV,OAAO;AACT;AAEA,SAAS,qBAAqB,OAAe,QAAuB,QAAuB;CACzF,IAAI,CAAC,QAAQ,QAAQ,CAAC,QAAQ,MAC5B;CAGF,OAAO;EAAC,QAAQ;EAAM;EAAO,QAAQ;CAAI,EACtC,QAAQ,SAAyB,QAAQ,IAAI,CAAC,EAC9C,KAAK,GAAG;AACb;AAEA,IAAM,iBAA4C,EAAE,WAAW;CAC7D,MAAM,aAAa,cAAc;CACjC,MAAM,SAAS,KAAK,MAAM;CAC1B,MAAM,OAAO,KAAK,MAAM;CACxB,MAAM,QAAQ,KAAK,MAAM;CACzB,MAAM,SAAS,KAAK,MAAM;CAC1B,MAAM,SAAS,KAAK,MAAM;CAC1B,MAAM,WAAW,QAAQ,IAAI;CAC7B,MAAM,UACJ,oBAAC,aAAD;EACQ;EACM;EACL;EACC;EACA;CACT,CAAA;CAEH,MAAM,YAAY,WAAW,QAAQ,qBAAqB,OAAO,QAAQ,MAAM;CAE/E,IAAI,QACF,OACE,oBAAC,YAAD;EACU;EACG;EACX,WAAW,aAAa,0BAA0B,KAAA;EAClD,QAAQ,aAAa,IAAI;YAExB;CACS,CAAA;CAIhB,OACE,oBAAC,UAAD;EACE,cAAY;EACZ,WAAW,aAAa,0BAA0B,KAAA;EAClD,aAAW,aAAa,IAAI;EAC5B,MAAM,KAAK,MAAM,QAAQ;EACzB,QAAQ,KAAK,MAAM,UAAU;EAC7B,UAAU,KAAK,MAAM,YAAY,KAAA;YAEhC;CACO,CAAA;AAEd"}

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-lt-md";
+export declare const POPOVER_SURFACE = "z-lt-popover 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-lt-md";
+var POPOVER_SURFACE = "z-lt-popover 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-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"}
+{"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-lt-popover 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"}