@lattice-php/lattice 0.19.0 → 0.21.0

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
-export type { ComponentProps, DateFormat, Node, NodeProps, NumberFormat, PageContainer, PageBreadcrumb, PagePayload, PropsOf, RendererComponent, } from '../index.js';
+export type { ComponentProps, DateFormat, Node, NodeProps, NumberFormat, PageContainer, PageBreadcrumb, PagePayload, ComponentPropsOf, RendererComponent, } from '../index.js';
 export type { Method } from '@inertiajs/core';

package/dist/ui/affix-group.d.ts

@@ -10,8 +10,9 @@ import { Affix } from '../types/generated.js';
  * affix segments. The control itself stays the focus target; only its own ring
  * is suppressed.
  */
-export declare function AffixGroup({ prefix, suffix, children, }: {
+export declare function AffixGroup({ prefix, suffix, end, children, }: {
     prefix?: Affix | null;
     suffix?: Affix | null;
+    end?: ReactNode;
     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/ui/affix-group.js

@@ -2,10 +2,10 @@ import { cn } from "../lib/utils.js";
 import { IconRenderer } from "../icons/icon-renderer.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/ui/affix-group.tsx
-function AffixSegment({ affix, side }) {
+function AffixSegment({ affix, side, squared = false }) {
 	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"),
+		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", squared && "rounded-r-none border-r-0"),
 		children: affix.icon ? /* @__PURE__ */ jsx(IconRenderer, {
 			className: "size-lt-icon-md",
 			icon: affix.icon
@@ -22,8 +22,8 @@ function AffixSegment({ affix, side }) {
 * 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("");
+function AffixGroup({ prefix, suffix, end, children }) {
+	if (!prefix && !suffix && !end) 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",
@@ -34,12 +34,14 @@ function AffixGroup({ prefix, suffix, children }) {
 			}) : 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"))
+				children: children(cn("focus-visible:ring-0", prefix && "rounded-l-none", (suffix || end) && "rounded-r-none"))
 			}),
 			suffix ? /* @__PURE__ */ jsx(AffixSegment, {
 				affix: suffix,
-				side: "end"
-			}) : null
+				side: "end",
+				squared: Boolean(end)
+			}) : null,
+			end
 		]
 	});
 }

package/dist/ui/affix-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"affix-group.js","names":[],"sources":["../../resources/js/ui/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"}
+{"version":3,"file":"affix-group.js","names":[],"sources":["../../resources/js/ui/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({\n  affix,\n  side,\n  squared = false,\n}: {\n  affix: Affix;\n  side: \"start\" | \"end\";\n  squared?: boolean;\n}) {\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        squared && \"rounded-r-none border-r-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  end,\n  children,\n}: {\n  prefix?: Affix | null;\n  suffix?: Affix | null;\n  end?: ReactNode;\n  children: (controlClassName: string) => ReactNode;\n}) {\n  if (!prefix && !suffix && !end) {\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(\n            \"focus-visible:ring-0\",\n            prefix && \"rounded-l-none\",\n            (suffix || end) && \"rounded-r-none\",\n          ),\n        )}\n      </div>\n      {suffix ? <AffixSegment affix={suffix} side=\"end\" squared={Boolean(end)} /> : null}\n      {end}\n    </div>\n  );\n}\n"],"mappings":";;;;AAKA,SAAS,aAAa,EACpB,OACA,MACA,UAAU,SAKT;CACD,OACE,oBAAC,QAAD;EACE,aAAW,SAAS;EACpB,WAAW,GACT,0IACA,6CACA,SAAS,UAAU,+BAA+B,8BAClD,WAAW,2BACb;YAEC,MAAM,OAAO,oBAAC,cAAD;GAAc,WAAU;GAAkB,MAAM,MAAM;EAAO,CAAA,IAAI,MAAM;CACjF,CAAA;AAEV;;;;;;;;;;;AAYA,SAAgB,WAAW,EACzB,QACA,QACA,KACA,YAMC;CACD,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,KACzB,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,GACE,wBACA,UAAU,mBACT,UAAU,QAAQ,gBACrB,CACF;GACG,CAAA;GACJ,SAAS,oBAAC,cAAD;IAAc,OAAO;IAAQ,MAAK;IAAM,SAAS,QAAQ,GAAG;GAAI,CAAA,IAAI;GAC7E;EACE;;AAET"}

package/dist/ui/avatar.d.ts

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

package/dist/ui/avatar.js

@@ -0,0 +1,52 @@
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/ui/avatar.tsx
+var sizeClass = {
+	xs: "size-6 text-[0.5rem]",
+	sm: "size-8 text-xs",
+	md: "size-10 text-sm",
+	lg: "size-12 text-base",
+	xl: "size-16 text-lg",
+	"2xl": "size-20 text-xl",
+	"3xl": "size-24 text-2xl",
+	"4xl": "size-32 text-3xl"
+};
+function initials(name) {
+	return name.trim().split(/\s+/).slice(0, 2).map((word) => word.charAt(0).toUpperCase()).join("");
+}
+function UserGlyph() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className: "size-[60%]",
+		children: [/* @__PURE__ */ jsx("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }), /* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "7",
+			r: "4"
+		})]
+	});
+}
+var AvatarComponent = ({ node }) => {
+	const { src, name, size } = node.props;
+	const label = name ?? void 0;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "avatar",
+		role: src ? void 0 : "img",
+		"aria-label": src ? void 0 : label,
+		className: cn("inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-lt-muted font-medium text-lt-muted-fg select-none", sizeClass[size]),
+		children: src ? /* @__PURE__ */ jsx("img", {
+			src,
+			alt: label ?? "",
+			className: "size-full object-cover"
+		}) : name ? initials(name) : /* @__PURE__ */ jsx(UserGlyph, {})
+	});
+};
+//#endregion
+export { AvatarComponent as default };
+
+//# sourceMappingURL=avatar.js.map

package/dist/ui/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","names":[],"sources":["../../resources/js/ui/avatar.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { Size } from \"@lattice-php/lattice/types/generated\";\n\nconst sizeClass: Record<Size, string> = {\n  xs: \"size-6 text-[0.5rem]\",\n  sm: \"size-8 text-xs\",\n  md: \"size-10 text-sm\",\n  lg: \"size-12 text-base\",\n  xl: \"size-16 text-lg\",\n  \"2xl\": \"size-20 text-xl\",\n  \"3xl\": \"size-24 text-2xl\",\n  \"4xl\": \"size-32 text-3xl\",\n};\n\nfunction initials(name: string): string {\n  return name\n    .trim()\n    .split(/\\s+/)\n    .slice(0, 2)\n    .map((word) => word.charAt(0).toUpperCase())\n    .join(\"\");\n}\n\nfunction UserGlyph() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      className=\"size-[60%]\"\n    >\n      <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" />\n      <circle cx=\"12\" cy=\"7\" r=\"4\" />\n    </svg>\n  );\n}\n\nconst AvatarComponent: RendererComponent<\"avatar\"> = ({ node }) => {\n  const { src, name, size } = node.props;\n  const label = name ?? undefined;\n\n  return (\n    <span\n      data-slot=\"avatar\"\n      role={src ? undefined : \"img\"}\n      aria-label={src ? undefined : label}\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-lt-muted font-medium text-lt-muted-fg select-none\",\n        sizeClass[size],\n      )}\n    >\n      {src ? (\n        <img src={src} alt={label ?? \"\"} className=\"size-full object-cover\" />\n      ) : name ? (\n        initials(name)\n      ) : (\n        <UserGlyph />\n      )}\n    </span>\n  );\n};\n\nexport default AvatarComponent;\n"],"mappings":";;;AAIA,IAAM,YAAkC;CACtC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;AACT;AAEA,SAAS,SAAS,MAAsB;CACtC,OAAO,KACJ,KAAK,EACL,MAAM,KAAK,EACX,MAAM,GAAG,CAAC,EACV,KAAK,SAAS,KAAK,OAAO,CAAC,EAAE,YAAY,CAAC,EAC1C,KAAK,EAAE;AACZ;AAEA,SAAS,YAAY;CACnB,OACE,qBAAC,OAAD;EACE,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAa;EACb,eAAc;EACd,gBAAe;EACf,eAAY;EACZ,WAAU;YARZ,CAUE,oBAAC,QAAD,EAAM,GAAE,4CAA6C,CAAA,GACrD,oBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAI,GAAE;EAAK,CAAA,CAC3B;;AAET;AAEA,IAAM,mBAAgD,EAAE,WAAW;CACjE,MAAM,EAAE,KAAK,MAAM,SAAS,KAAK;CACjC,MAAM,QAAQ,QAAQ,KAAA;CAEtB,OACE,oBAAC,QAAD;EACE,aAAU;EACV,MAAM,MAAM,KAAA,IAAY;EACxB,cAAY,MAAM,KAAA,IAAY;EAC9B,WAAW,GACT,sIACA,UAAU,KACZ;YAEC,MACC,oBAAC,OAAD;GAAU;GAAK,KAAK,SAAS;GAAI,WAAU;EAA0B,CAAA,IACnE,OACF,SAAS,IAAI,IAEb,oBAAC,WAAD,CAAY,CAAA;CAEV,CAAA;AAEV"}

package/dist/ui/button.d.ts

@@ -4,11 +4,13 @@ import { ButtonVariant } from '../types/generated.js';
 import * as React from "react";
 export type { ButtonVariant };
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "ghost" | "info" | "link" | "outline" | "secondary" | "success" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "ghost" | "info" | "outline" | "secondary" | "success" | null | undefined;
+    size?: "sm" | "lg" | "default" | "icon" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+declare function Button({ className, variant, size, asChild, icon, children, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
+    /** Leading icon glyph. Ignored with `asChild` (Slot needs a single child). */
+    icon?: string;
 }): React.JSX.Element;
 declare const ButtonComponent: RendererComponent<"button">;
 export default ButtonComponent;

package/dist/ui/button.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/utils.js";
+import { Icon } from "../icons/sprite.js";
 import { IconRenderer } from "../icons/icon-renderer.js";
 import { nodeIdentity } from "../core/test-id.js";
 import { ActionTrigger, useClickBehavior } from "./click-behavior.js";
@@ -32,15 +33,21 @@ var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespa
 		size: "default"
 	}
 });
-function Button({ className, variant, size, asChild = false, ...props }) {
-	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+function Button({ className, variant, size, asChild = false, icon, children, ...props }) {
+	const Comp = asChild ? Slot : "button";
+	const content = icon && !asChild ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Icon, {
+		name: icon,
+		"aria-hidden": "true"
+	}), children] }) : children;
+	return /* @__PURE__ */ jsx(Comp, {
 		"data-slot": "button",
 		className: cn(buttonVariants({
 			variant,
 			size,
 			className
 		})),
-		...props
+		...props,
+		children: content
 	});
 }
 var ButtonComponent = ({ node }) => {

package/dist/ui/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../resources/js/ui/button.tsx"],"sourcesContent":["import { Link } from \"@inertiajs/react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { ActionTrigger, type TriggerState, useClickBehavior } from \"./click-behavior\";\nimport type { ButtonVariant } from \"@lattice-php/lattice/types/generated\";\n\nexport type { ButtonVariant };\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lt-sm text-base font-medium transition-[color,box-shadow] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-lt-icon-md [&_svg]:shrink-0 outline-none focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[3px] aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-lt-primary text-lt-primary-fg shadow-lt-xs hover:bg-lt-primary-hover active:bg-lt-primary-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        destructive:\n          \"bg-lt-danger text-lt-danger-fg shadow-lt-xs hover:bg-lt-danger-hover active:bg-lt-danger-active focus-visible:ring-lt-danger/20 dark:focus-visible:ring-lt-danger/40 disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        success:\n          \"bg-lt-success text-lt-success-fg shadow-lt-xs hover:bg-lt-success-hover active:bg-lt-success-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        info: \"bg-lt-info text-lt-info-fg shadow-lt-xs hover:bg-lt-info-hover active:bg-lt-info-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        outline:\n          \"border border-lt-input bg-lt-bg shadow-lt-xs hover:bg-lt-accent hover:text-lt-accent-fg disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:border-transparent disabled:shadow-none\",\n        secondary:\n          \"bg-lt-secondary text-lt-secondary-fg shadow-lt-xs hover:bg-lt-secondary-hover active:bg-lt-secondary-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        ghost: \"hover:bg-lt-accent hover:text-lt-accent-fg disabled:text-lt-disabled-fg\",\n        link: \"text-lt-primary underline-offset-4 hover:underline disabled:text-lt-disabled-fg disabled:no-underline\",\n      },\n      size: {\n        default: \"h-lt-control-md px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-lt-control-sm rounded-lt-sm px-3 has-[>svg]:px-2.5\",\n        lg: \"h-lt-control-lg rounded-lt-sm px-6 has-[>svg]:px-4\",\n        icon: \"size-lt-control-md\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n  }) {\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nconst ButtonComponent: RendererComponent<\"button\"> = ({ node }) => {\n  const { label, icon } = node.props;\n  const variant = node.props.variant ?? \"default\";\n  const testId = nodeIdentity(node);\n  const behavior = useClickBehavior(node.props);\n  const size = icon ? \"icon\" : \"default\";\n  const content = icon ? (\n    <>\n      <IconRenderer className=\"size-lt-icon-md\" icon={icon} />\n      {label ? <span className=\"sr-only\">{label}</span> : null}\n    </>\n  ) : (\n    label\n  );\n\n  const triggerButton = ({ onClick, processing }: TriggerState) => (\n    <Button\n      data-test={testId}\n      disabled={processing}\n      onClick={onClick}\n      size={size}\n      variant={variant}\n    >\n      {content}\n    </Button>\n  );\n\n  if (behavior.kind === \"navigate\") {\n    return (\n      <Button asChild data-test={testId} variant={variant} size={size}>\n        <Link href={behavior.href} method={behavior.method}>\n          {content}\n        </Link>\n      </Button>\n    );\n  }\n\n  if (behavior.kind === \"action\") {\n    return <ActionTrigger action={behavior.action}>{triggerButton}</ActionTrigger>;\n  }\n\n  if (behavior.kind === \"effects\") {\n    return triggerButton({ onClick: behavior.onClick, processing: false });\n  }\n\n  return (\n    <Button data-test={testId} size={size} type={node.props.buttonType} variant={variant}>\n      {content}\n    </Button>\n  );\n};\n\nexport default ButtonComponent;\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;;;;;AAaA,IAAM,iBAAiB,IACrB,+bACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,aACE;GACF,SACE;GACF,MAAM;GACN,SACE;GACF,WACE;GACF,OAAO;GACP,MAAM;EACR;EACA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,MAAM;EACR;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAEA,SAAS,OAAO,EACd,WACA,SACA,MACA,UAAU,OACV,GAAG,SAIA;CAGH,OACE,oBAHW,UAAU,OAAO,UAG5B;EACE,aAAU;EACV,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,mBAAgD,EAAE,WAAW;CACjE,MAAM,EAAE,OAAO,SAAS,KAAK;CAC7B,MAAM,UAAU,KAAK,MAAM,WAAW;CACtC,MAAM,SAAS,aAAa,IAAI;CAChC,MAAM,WAAW,iBAAiB,KAAK,KAAK;CAC5C,MAAM,OAAO,OAAO,SAAS;CAC7B,MAAM,UAAU,OACd,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD;EAAc,WAAU;EAAwB;CAAO,CAAA,GACtD,QAAQ,oBAAC,QAAD;EAAM,WAAU;YAAW;CAAY,CAAA,IAAI,IACpD,EAAA,CAAA,IAEF;CAGF,MAAM,iBAAiB,EAAE,SAAS,iBAChC,oBAAC,QAAD;EACE,aAAW;EACX,UAAU;EACD;EACH;EACG;YAER;CACK,CAAA;CAGV,IAAI,SAAS,SAAS,YACpB,OACE,oBAAC,QAAD;EAAQ,SAAA;EAAQ,aAAW;EAAiB;EAAe;YACzD,oBAAC,MAAD;GAAM,MAAM,SAAS;GAAM,QAAQ,SAAS;aACzC;EACG,CAAA;CACA,CAAA;CAIZ,IAAI,SAAS,SAAS,UACpB,OAAO,oBAAC,eAAD;EAAe,QAAQ,SAAS;YAAS;CAA6B,CAAA;CAG/E,IAAI,SAAS,SAAS,WACpB,OAAO,cAAc;EAAE,SAAS,SAAS;EAAS,YAAY;CAAM,CAAC;CAGvE,OACE,oBAAC,QAAD;EAAQ,aAAW;EAAc;EAAM,MAAM,KAAK,MAAM;EAAqB;YAC1E;CACK,CAAA;AAEZ"}
+{"version":3,"file":"button.js","names":[],"sources":["../../resources/js/ui/button.tsx"],"sourcesContent":["import { Link } from \"@inertiajs/react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { Icon, IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { ActionTrigger, type TriggerState, useClickBehavior } from \"./click-behavior\";\nimport type { ButtonVariant } from \"@lattice-php/lattice/types/generated\";\n\nexport type { ButtonVariant };\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lt-sm text-base font-medium transition-[color,box-shadow] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-lt-icon-md [&_svg]:shrink-0 outline-none focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[3px] aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-lt-primary text-lt-primary-fg shadow-lt-xs hover:bg-lt-primary-hover active:bg-lt-primary-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        destructive:\n          \"bg-lt-danger text-lt-danger-fg shadow-lt-xs hover:bg-lt-danger-hover active:bg-lt-danger-active focus-visible:ring-lt-danger/20 dark:focus-visible:ring-lt-danger/40 disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        success:\n          \"bg-lt-success text-lt-success-fg shadow-lt-xs hover:bg-lt-success-hover active:bg-lt-success-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        info: \"bg-lt-info text-lt-info-fg shadow-lt-xs hover:bg-lt-info-hover active:bg-lt-info-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        outline:\n          \"border border-lt-input bg-lt-bg shadow-lt-xs hover:bg-lt-accent hover:text-lt-accent-fg disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:border-transparent disabled:shadow-none\",\n        secondary:\n          \"bg-lt-secondary text-lt-secondary-fg shadow-lt-xs hover:bg-lt-secondary-hover active:bg-lt-secondary-active disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:shadow-none\",\n        ghost: \"hover:bg-lt-accent hover:text-lt-accent-fg disabled:text-lt-disabled-fg\",\n        link: \"text-lt-primary underline-offset-4 hover:underline disabled:text-lt-disabled-fg disabled:no-underline\",\n      },\n      size: {\n        default: \"h-lt-control-md px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-lt-control-sm rounded-lt-sm px-3 has-[>svg]:px-2.5\",\n        lg: \"h-lt-control-lg rounded-lt-sm px-6 has-[>svg]:px-4\",\n        icon: \"size-lt-control-md\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  icon,\n  children,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n    /** Leading icon glyph. Ignored with `asChild` (Slot needs a single child). */\n    icon?: string;\n  }) {\n  const Comp = asChild ? Slot : \"button\";\n  const content =\n    icon && !asChild ? (\n      <>\n        <Icon name={icon} aria-hidden=\"true\" />\n        {children}\n      </>\n    ) : (\n      children\n    );\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    >\n      {content}\n    </Comp>\n  );\n}\n\nconst ButtonComponent: RendererComponent<\"button\"> = ({ node }) => {\n  const { label, icon } = node.props;\n  const variant = node.props.variant ?? \"default\";\n  const testId = nodeIdentity(node);\n  const behavior = useClickBehavior(node.props);\n  const size = icon ? \"icon\" : \"default\";\n  const content = icon ? (\n    <>\n      <IconRenderer className=\"size-lt-icon-md\" icon={icon} />\n      {label ? <span className=\"sr-only\">{label}</span> : null}\n    </>\n  ) : (\n    label\n  );\n\n  const triggerButton = ({ onClick, processing }: TriggerState) => (\n    <Button\n      data-test={testId}\n      disabled={processing}\n      onClick={onClick}\n      size={size}\n      variant={variant}\n    >\n      {content}\n    </Button>\n  );\n\n  if (behavior.kind === \"navigate\") {\n    return (\n      <Button asChild data-test={testId} variant={variant} size={size}>\n        <Link href={behavior.href} method={behavior.method}>\n          {content}\n        </Link>\n      </Button>\n    );\n  }\n\n  if (behavior.kind === \"action\") {\n    return <ActionTrigger action={behavior.action}>{triggerButton}</ActionTrigger>;\n  }\n\n  if (behavior.kind === \"effects\") {\n    return triggerButton({ onClick: behavior.onClick, processing: false });\n  }\n\n  return (\n    <Button data-test={testId} size={size} type={node.props.buttonType} variant={variant}>\n      {content}\n    </Button>\n  );\n};\n\nexport default ButtonComponent;\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;;;;;;AAaA,IAAM,iBAAiB,IACrB,+bACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,aACE;GACF,SACE;GACF,MAAM;GACN,SACE;GACF,WACE;GACF,OAAO;GACP,MAAM;EACR;EACA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,MAAM;EACR;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAEA,SAAS,OAAO,EACd,WACA,SACA,MACA,UAAU,OACV,MACA,UACA,GAAG,SAMA;CACH,MAAM,OAAO,UAAU,OAAO;CAC9B,MAAM,UACJ,QAAQ,CAAC,UACP,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,MAAD;EAAM,MAAM;EAAM,eAAY;CAAQ,CAAA,GACrC,QACD,EAAA,CAAA,IAEF;CAGJ,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC;EAC1D,GAAI;YAEH;CACG,CAAA;AAEV;AAEA,IAAM,mBAAgD,EAAE,WAAW;CACjE,MAAM,EAAE,OAAO,SAAS,KAAK;CAC7B,MAAM,UAAU,KAAK,MAAM,WAAW;CACtC,MAAM,SAAS,aAAa,IAAI;CAChC,MAAM,WAAW,iBAAiB,KAAK,KAAK;CAC5C,MAAM,OAAO,OAAO,SAAS;CAC7B,MAAM,UAAU,OACd,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD;EAAc,WAAU;EAAwB;CAAO,CAAA,GACtD,QAAQ,oBAAC,QAAD;EAAM,WAAU;YAAW;CAAY,CAAA,IAAI,IACpD,EAAA,CAAA,IAEF;CAGF,MAAM,iBAAiB,EAAE,SAAS,iBAChC,oBAAC,QAAD;EACE,aAAW;EACX,UAAU;EACD;EACH;EACG;YAER;CACK,CAAA;CAGV,IAAI,SAAS,SAAS,YACpB,OACE,oBAAC,QAAD;EAAQ,SAAA;EAAQ,aAAW;EAAiB;EAAe;YACzD,oBAAC,MAAD;GAAM,MAAM,SAAS;GAAM,QAAQ,SAAS;aACzC;EACG,CAAA;CACA,CAAA;CAIZ,IAAI,SAAS,SAAS,UACpB,OAAO,oBAAC,eAAD;EAAe,QAAQ,SAAS;YAAS;CAA6B,CAAA;CAG/E,IAAI,SAAS,SAAS,WACpB,OAAO,cAAc;EAAE,SAAS,SAAS;EAAS,YAAY;CAAM,CAAC;CAGvE,OACE,oBAAC,QAAD;EAAQ,aAAW;EAAc;EAAM,MAAM,KAAK,MAAM;EAAqB;YAC1E;CACK,CAAA;AAEZ"}

package/dist/ui/chart-view.js

@@ -1,9 +1,11 @@
-import { useLocale } from "../i18n/locale.js";
-import { useTimezone } from "../i18n/timezone.js";
+import { isRecord } from "../core/materialize.js";
 import { nodeIdentity } from "../core/test-id.js";
+import { coerceColor, colorValue } from "../lib/color.js";
+import { numericValue } from "../format/numeric.js";
+import { useFormatContext } from "../format/format-context.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";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, ComposedChart, Legend, Line, LineChart, Pie, PieChart, PolarAngleAxis, RadialBar, RadialBarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 //#region resources/js/ui/chart-view.tsx
 var chartMargin = {
 	bottom: 0,
@@ -46,16 +48,27 @@ var palette = [
 function colorAt(index) {
 	return palette[index % palette.length] ?? "var(--lt-primary)";
 }
-function isRecord(value) {
-	return typeof value === "object" && value !== null && !Array.isArray(value);
-}
 function datumColor(datum, series, index) {
-	if (isRecord(datum) && typeof datum.color === "string") return datum.color;
-	return series.color ?? colorAt(index);
+	if (isRecord(datum)) {
+		const color = coerceColor(datum.color);
+		if (color) return colorValue(color);
+	}
+	return series.color ? colorValue(series.color) : colorAt(index);
 }
 function isCartesianSeries(series) {
 	return series.type === "area" || series.type === "bar" || series.type === "line";
 }
+function isSpecialSeries(series) {
+	return !isCartesianSeries(series);
+}
+function datumValue(datum, key) {
+	return isRecord(datum) ? numericValue(datum[key]) ?? 0 : 0;
+}
+function datumName(datum, series) {
+	if (series.nameKey === null || !isRecord(datum)) return series.name;
+	const name = datum[series.nameKey];
+	return typeof name === "string" ? name : series.name;
+}
 function cartesianChartFor(series) {
 	const types = new Set(series.map((item) => item.type));
 	const firstSeries = series[0];
@@ -85,12 +98,7 @@ 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 ctx = useFormatContext();
 	const formatCategory = (value) => formatValue(value, props.categoryFormat, ctx);
 	const formatValueTick = (value) => formatValue(value, props.valueFormat, ctx);
 	const tooltipCursor = series.some((item) => item.type === "bar") ? {
@@ -134,13 +142,13 @@ function CartesianChart({ props }) {
 				}),
 				props.legend && /* @__PURE__ */ jsx(Legend, { ...compactLegendProps }),
 				series.map((item, index) => {
-					const color = item.color ?? colorAt(index);
+					const color = item.color ? colorValue(item.color) : colorAt(index);
 					const key = `${item.type}:${item.dataKey}`;
 					if (item.type === "area") return /* @__PURE__ */ jsx(Area, {
 						dataKey: item.dataKey,
 						fill: color,
 						fillOpacity: .16,
-						name: item.name ?? void 0,
+						name: item.name,
 						stackId: item.stackId ?? void 0,
 						stroke: color,
 						type: "monotone"
@@ -148,7 +156,7 @@ function CartesianChart({ props }) {
 					if (item.type === "bar") return /* @__PURE__ */ jsx(Bar, {
 						dataKey: item.dataKey,
 						fill: color,
-						name: item.name ?? void 0,
+						name: item.name,
 						radius: [
 							4,
 							4,
@@ -160,7 +168,7 @@ function CartesianChart({ props }) {
 					return /* @__PURE__ */ jsx(Line, {
 						dataKey: item.dataKey,
 						dot: false,
-						name: item.name ?? void 0,
+						name: item.name,
 						stroke: color,
 						strokeWidth: 2,
 						type: "monotone"
@@ -171,12 +179,7 @@ function CartesianChart({ props }) {
 	});
 }
 function PieChartView({ props, series }) {
-	const { locale } = useLocale();
-	const { timezone } = useTimezone();
-	const ctx = {
-		locale,
-		timezone
-	};
+	const ctx = useFormatContext();
 	return /* @__PURE__ */ jsx(ResponsiveContainer, {
 		width: "100%",
 		height: props.height,
@@ -193,8 +196,9 @@ function PieChartView({ props, series }) {
 				/* @__PURE__ */ jsx(Pie, {
 					data: props.data,
 					dataKey: series.dataKey,
-					name: series.name ?? void 0,
+					name: series.name,
 					nameKey: series.nameKey ?? void 0,
+					innerRadius: series.innerRadius,
 					outerRadius: "68%",
 					children: props.data.map((datum, index) => /* @__PURE__ */ jsx(Cell, { fill: datumColor(datum, series, index) }, index))
 				})
@@ -202,9 +206,132 @@ function PieChartView({ props, series }) {
 		})
 	});
 }
+function ChartLegend({ entries }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap items-center justify-center gap-x-3 gap-y-1",
+		children: entries.map((entry, index) => /* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-1 text-[11px] leading-[14px] text-lt-muted-fg",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "size-[7px] rounded-full",
+					style: { background: entry.color }
+				}),
+				entry.label,
+				entry.value !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: "font-medium text-lt-surface-fg",
+					children: entry.value
+				})
+			]
+		}, index))
+	});
+}
+function GaugeChartView({ props, series }) {
+	const ctx = useFormatContext();
+	const values = props.data.map((datum) => datumValue(datum, series.dataKey));
+	const max = series.maxValue ?? Math.max(0, ...values);
+	const legendEntries = props.data.map((datum, index) => ({
+		color: datumColor(datum, series, index),
+		label: datumName(datum, series)
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [props.legend && /* @__PURE__ */ jsx(ChartLegend, { entries: legendEntries }), /* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ jsx(ResponsiveContainer, {
+				width: "100%",
+				height: props.height,
+				debounce: 100,
+				children: /* @__PURE__ */ jsxs(RadialBarChart, {
+					data: props.data,
+					endAngle: -30,
+					innerRadius: series.innerRadius,
+					margin: chartMargin,
+					outerRadius: "100%",
+					startAngle: 210,
+					children: [
+						/* @__PURE__ */ jsx(PolarAngleAxis, {
+							type: "number",
+							domain: [0, max],
+							tick: false
+						}),
+						props.tooltip && /* @__PURE__ */ jsx(Tooltip, {
+							...tooltipProps,
+							formatter: (value) => formatValue(value, props.valueFormat, ctx)
+						}),
+						/* @__PURE__ */ jsx(RadialBar, {
+							background: { fill: "var(--lt-muted)" },
+							cornerRadius: 6,
+							dataKey: series.dataKey,
+							name: series.name,
+							children: props.data.map((datum, index) => /* @__PURE__ */ jsx(Cell, { fill: datumColor(datum, series, index) }, index))
+						})
+					]
+				})
+			}), values.length === 1 && /* @__PURE__ */ jsx("div", {
+				className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "text-2xl font-semibold text-lt-surface-fg",
+					children: formatValue(values[0], props.valueFormat, ctx)
+				})
+			})]
+		})]
+	});
+}
+function DistributionChartView({ props, series }) {
+	const ctx = useFormatContext();
+	const segments = props.data.map((datum, index) => ({
+		color: datumColor(datum, series, index),
+		label: datumName(datum, series),
+		value: datumValue(datum, series.dataKey)
+	})).filter((segment) => segment.value > 0);
+	const total = segments.reduce((sum, segment) => sum + segment.value, 0);
+	if (total <= 0) return /* @__PURE__ */ jsx("div", {
+		className: "h-2.5 w-full rounded-full bg-lt-muted",
+		"data-lattice-distribution": ""
+	});
+	const formatPercent = new Intl.NumberFormat(ctx.locale, {
+		maximumFractionDigits: 1,
+		style: "percent"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex h-2.5 w-full gap-0.5 overflow-hidden rounded-full",
+			"data-lattice-distribution": "",
+			children: segments.map((segment, index) => /* @__PURE__ */ jsx("div", {
+				style: {
+					background: segment.color,
+					width: `${segment.value / total * 100}%`
+				},
+				title: props.tooltip ? `${segment.label}: ${formatValue(segment.value, props.valueFormat, ctx)}` : void 0
+			}, index))
+		}), props.legend && /* @__PURE__ */ jsx(ChartLegend, { entries: segments.map((segment) => ({
+			color: segment.color,
+			label: segment.label,
+			value: formatPercent.format(segment.value / total)
+		})) })]
+	});
+}
+function SpecialChart({ props, series }) {
+	switch (series.type) {
+		case "distribution": return /* @__PURE__ */ jsx(DistributionChartView, {
+			props,
+			series
+		});
+		case "gauge": return /* @__PURE__ */ jsx(GaugeChartView, {
+			props,
+			series
+		});
+		case "pie": return /* @__PURE__ */ jsx(PieChartView, {
+			props,
+			series
+		});
+	}
+}
 var ChartView = ({ node }) => {
 	const props = node.props;
-	const pieSeries = props.series.find((series) => series.type === "pie");
+	const specialSeries = props.series.find(isSpecialSeries);
 	const hasCartesianSeries = props.series.some(isCartesianSeries);
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		description: props.description,
@@ -212,9 +339,9 @@ var ChartView = ({ node }) => {
 		title: props.title,
 		children: /* @__PURE__ */ jsx("div", {
 			className: "min-h-0 w-full",
-			children: pieSeries && !hasCartesianSeries ? /* @__PURE__ */ jsx(PieChartView, {
+			children: specialSeries !== void 0 && !hasCartesianSeries ? /* @__PURE__ */ jsx(SpecialChart, {
 				props,
-				series: pieSeries
+				series: specialSeries
 			}) : /* @__PURE__ */ jsx(CartesianChart, { props })
 		})
 	});

package/dist/ui/chart-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-view.js","names":[],"sources":["../../resources/js/ui/chart-view.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 \"@lattice-php/lattice/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 ChartView: 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 ChartView;\n"],"mappings":"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"}
+{"version":3,"file":"chart-view.js","names":[],"sources":["../../resources/js/ui/chart-view.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  PolarAngleAxis,\n  RadialBar,\n  RadialBarChart,\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 { isRecord } from \"@lattice-php/lattice/core/materialize\";\nimport type { ComponentPropsOf, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { coerceColor, colorValue } from \"@lattice-php/lattice/lib/color\";\nimport { useFormatContext } from \"@lattice-php/lattice/format/format-context\";\nimport { numericValue } from \"@lattice-php/lattice/format/numeric\";\nimport { formatValue } from \"@lattice-php/lattice/format/value\";\n\ntype ChartProps = ComponentPropsOf<\"chart\">;\ntype ChartSeries = ChartProps[\"series\"][number];\ntype ChartDatum = ChartProps[\"data\"][number];\ntype CartesianSeries = ChartSeries & { type: \"area\" | \"bar\" | \"line\" };\ntype SpecialSeries = ChartSeries & { type: \"distribution\" | \"gauge\" | \"pie\" };\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 datumColor(datum: ChartDatum, series: ChartSeries, index: number): string {\n  if (isRecord(datum)) {\n    const color = coerceColor(datum.color);\n\n    if (color) {\n      return colorValue(color);\n    }\n  }\n\n  return series.color ? colorValue(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 isSpecialSeries(series: ChartSeries): series is SpecialSeries {\n  return !isCartesianSeries(series);\n}\n\nfunction datumValue(datum: ChartDatum, key: string): number {\n  return isRecord(datum) ? (numericValue(datum[key]) ?? 0) : 0;\n}\n\nfunction datumName(datum: ChartDatum, series: ChartSeries): string {\n  if (series.nameKey === null || !isRecord(datum)) {\n    return series.name;\n  }\n\n  const name = datum[series.nameKey];\n\n  return typeof name === \"string\" ? name : series.name;\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 ctx = useFormatContext();\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 ? colorValue(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}\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}\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}\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 ctx = useFormatContext();\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}\n          nameKey={series.nameKey ?? undefined}\n          innerRadius={series.innerRadius}\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\nfunction ChartLegend({\n  entries,\n}: {\n  entries: Array<{ color: string; label: string; value?: string }>;\n}) {\n  return (\n    <div className=\"flex flex-wrap items-center justify-center gap-x-3 gap-y-1\">\n      {entries.map((entry, index) => (\n        <span\n          key={index}\n          className=\"flex items-center gap-1 text-[11px] leading-[14px] text-lt-muted-fg\"\n        >\n          <span\n            aria-hidden\n            className=\"size-[7px] rounded-full\"\n            style={{ background: entry.color }}\n          />\n          {entry.label}\n          {entry.value !== undefined && (\n            <span className=\"font-medium text-lt-surface-fg\">{entry.value}</span>\n          )}\n        </span>\n      ))}\n    </div>\n  );\n}\n\nfunction GaugeChartView({ props, series }: { props: ChartProps; series: ChartSeries }) {\n  const ctx = useFormatContext();\n  const values = props.data.map((datum) => datumValue(datum, series.dataKey));\n  const max = series.maxValue ?? Math.max(0, ...values);\n  const legendEntries = props.data.map((datum, index) => ({\n    color: datumColor(datum, series, index),\n    label: datumName(datum, series),\n  }));\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {props.legend && <ChartLegend entries={legendEntries} />}\n      <div className=\"relative\">\n        <ResponsiveContainer width=\"100%\" height={props.height} debounce={100}>\n          <RadialBarChart\n            data={props.data}\n            endAngle={-30}\n            innerRadius={series.innerRadius}\n            margin={chartMargin}\n            outerRadius=\"100%\"\n            startAngle={210}\n          >\n            <PolarAngleAxis type=\"number\" domain={[0, max]} tick={false} />\n            {props.tooltip && (\n              <Tooltip\n                {...tooltipProps}\n                formatter={(value) => formatValue(value, props.valueFormat, ctx)}\n              />\n            )}\n            <RadialBar\n              background={{ fill: \"var(--lt-muted)\" }}\n              cornerRadius={6}\n              dataKey={series.dataKey}\n              name={series.name}\n            >\n              {props.data.map((datum, index) => (\n                <Cell key={index} fill={datumColor(datum, series, index)} />\n              ))}\n            </RadialBar>\n          </RadialBarChart>\n        </ResponsiveContainer>\n        {values.length === 1 && (\n          <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n            <span className=\"text-2xl font-semibold text-lt-surface-fg\">\n              {formatValue(values[0], props.valueFormat, ctx)}\n            </span>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction DistributionChartView({ props, series }: { props: ChartProps; series: ChartSeries }) {\n  const ctx = useFormatContext();\n  const segments = props.data\n    .map((datum, index) => ({\n      color: datumColor(datum, series, index),\n      label: datumName(datum, series),\n      value: datumValue(datum, series.dataKey),\n    }))\n    .filter((segment) => segment.value > 0);\n  const total = segments.reduce((sum, segment) => sum + segment.value, 0);\n\n  if (total <= 0) {\n    return <div className=\"h-2.5 w-full rounded-full bg-lt-muted\" data-lattice-distribution=\"\" />;\n  }\n\n  const formatPercent = new Intl.NumberFormat(ctx.locale, {\n    maximumFractionDigits: 1,\n    style: \"percent\",\n  });\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <div\n        className=\"flex h-2.5 w-full gap-0.5 overflow-hidden rounded-full\"\n        data-lattice-distribution=\"\"\n      >\n        {segments.map((segment, index) => (\n          <div\n            key={index}\n            style={{ background: segment.color, width: `${(segment.value / total) * 100}%` }}\n            title={\n              props.tooltip\n                ? `${segment.label}: ${formatValue(segment.value, props.valueFormat, ctx)}`\n                : undefined\n            }\n          />\n        ))}\n      </div>\n      {props.legend && (\n        <ChartLegend\n          entries={segments.map((segment) => ({\n            color: segment.color,\n            label: segment.label,\n            value: formatPercent.format(segment.value / total),\n          }))}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction SpecialChart({ props, series }: { props: ChartProps; series: SpecialSeries }) {\n  switch (series.type) {\n    case \"distribution\":\n      return <DistributionChartView props={props} series={series} />;\n    case \"gauge\":\n      return <GaugeChartView props={props} series={series} />;\n    case \"pie\":\n      return <PieChartView props={props} series={series} />;\n  }\n}\n\nconst ChartView: RendererComponent<\"chart\"> = ({ node }) => {\n  const props = node.props;\n  const specialSeries = props.series.find(isSpecialSeries);\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        {specialSeries !== undefined && !hasCartesianSeries ? (\n          <SpecialChart props={props} series={specialSeries} />\n        ) : (\n          <CartesianChart props={props} />\n        )}\n      </div>\n    </ChartFrame>\n  );\n};\n\nexport default ChartView;\n"],"mappings":"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"}

package/dist/ui/click-behavior.d.ts

@@ -8,7 +8,7 @@ export type ClickBehavior = {
     method: Method;
 } | {
     kind: "action";
-    action: Node<"action">;
+    action: Node<"action" | "action.bulk">;
 } | {
     kind: "effects";
     onClick: () => void;
@@ -20,7 +20,7 @@ export type TriggerState = {
     processing: boolean;
 };
 export type ActionTriggerRenderer = (props: {
-    action: Node<"action">;
+    action: Node<"action" | "action.bulk">;
     children: (trigger: TriggerState) => ReactNode;
 }) => ReactNode;
 export declare function ActionTriggerProvider({ children, render, }: {
@@ -29,12 +29,12 @@ export declare function ActionTriggerProvider({ children, render, }: {
 }): import("react").JSX.Element;
 export declare function useActionTrigger(): ActionTriggerRenderer | null;
 export declare function ActionTrigger({ action, children, }: {
-    action: Node<"action">;
+    action: Node<"action" | "action.bulk">;
     children: (trigger: TriggerState) => ReactNode;
 }): import("react").JSX.Element;
 export declare function useClickBehavior(props: {
     href?: string | null;
     method?: Method | null;
-    action?: Node | null;
+    action?: Node<"action" | "action.bulk"> | null;
     effects?: Effect[] | null;
 }): ClickBehavior;

package/dist/ui/click-behavior.js.map

@@ -1 +1 @@
-{"version":3,"file":"click-behavior.js","names":[],"sources":["../../resources/js/ui/click-behavior.tsx"],"sourcesContent":["import type { Method } from \"@inertiajs/core\";\nimport { createContext, useContext, type ReactNode } from \"react\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport { getActionEffects } from \"@lattice-php/lattice/effects/dispatch\";\nimport { useEffectDispatcher } from \"@lattice-php/lattice/effects/use-effect-dispatcher\";\nimport type { Effect } from \"@lattice-php/lattice/types/generated\";\n\nexport type ClickBehavior =\n  | { kind: \"navigate\"; href: string; method: Method }\n  | { kind: \"action\"; action: Node<\"action\"> }\n  | { kind: \"effects\"; onClick: () => void }\n  | { kind: \"none\" };\n\nexport type TriggerState = { onClick: () => void; processing: boolean };\n\nexport type ActionTriggerRenderer = (props: {\n  action: Node<\"action\">;\n  children: (trigger: TriggerState) => ReactNode;\n}) => ReactNode;\n\nconst ActionTriggerContext = createContext<ActionTriggerRenderer | null>(null);\n\nexport function ActionTriggerProvider({\n  children,\n  render,\n}: {\n  children: ReactNode;\n  render: ActionTriggerRenderer;\n}) {\n  return <ActionTriggerContext.Provider value={render}>{children}</ActionTriggerContext.Provider>;\n}\n\nexport function useActionTrigger(): ActionTriggerRenderer | null {\n  return useContext(ActionTriggerContext);\n}\n\nexport function ActionTrigger({\n  action,\n  children,\n}: {\n  action: Node<\"action\">;\n  children: (trigger: TriggerState) => ReactNode;\n}) {\n  const render = useActionTrigger();\n\n  if (!render) {\n    throw new Error(\"Action triggers require an ActionTriggerProvider.\");\n  }\n\n  return <>{render({ action, children })}</>;\n}\n\nexport function useClickBehavior(props: {\n  href?: string | null;\n  method?: Method | null;\n  action?: Node | null;\n  effects?: Effect[] | null;\n}): ClickBehavior {\n  const dispatch = useEffectDispatcher();\n  const action = (props.action ?? null) as Node<\"action\"> | null;\n  const effects = props.effects ?? [];\n\n  if (action) {\n    return { kind: \"action\", action };\n  }\n\n  if (effects.length > 0) {\n    return { kind: \"effects\", onClick: () => dispatch(getActionEffects(effects)) };\n  }\n\n  if (props.href != null && props.href !== \"\") {\n    return { kind: \"navigate\", href: props.href, method: props.method ?? \"get\" };\n  }\n\n  return { kind: \"none\" };\n}\n"],"mappings":";;;;;AAoBA,IAAM,uBAAuB,cAA4C,IAAI;AAE7E,SAAgB,sBAAsB,EACpC,UACA,UAIC;CACD,OAAO,oBAAC,qBAAqB,UAAtB;EAA+B,OAAO;EAAS;CAAwC,CAAA;AAChG;AAEA,SAAgB,mBAAiD;CAC/D,OAAO,WAAW,oBAAoB;AACxC;AAEA,SAAgB,cAAc,EAC5B,QACA,YAIC;CACD,MAAM,SAAS,iBAAiB;CAEhC,IAAI,CAAC,QACH,MAAM,IAAI,MAAM,mDAAmD;CAGrE,OAAO,oBAAA,YAAA,EAAA,UAAG,OAAO;EAAE;EAAQ;CAAS,CAAC,EAAI,CAAA;AAC3C;AAEA,SAAgB,iBAAiB,OAKf;CAChB,MAAM,WAAW,oBAAoB;CACrC,MAAM,SAAU,MAAM,UAAU;CAChC,MAAM,UAAU,MAAM,WAAW,CAAC;CAElC,IAAI,QACF,OAAO;EAAE,MAAM;EAAU;CAAO;CAGlC,IAAI,QAAQ,SAAS,GACnB,OAAO;EAAE,MAAM;EAAW,eAAe,SAAS,iBAAiB,OAAO,CAAC;CAAE;CAG/E,IAAI,MAAM,QAAQ,QAAQ,MAAM,SAAS,IACvC,OAAO;EAAE,MAAM;EAAY,MAAM,MAAM;EAAM,QAAQ,MAAM,UAAU;CAAM;CAG7E,OAAO,EAAE,MAAM,OAAO;AACxB"}
+{"version":3,"file":"click-behavior.js","names":[],"sources":["../../resources/js/ui/click-behavior.tsx"],"sourcesContent":["import type { Method } from \"@inertiajs/core\";\nimport { createContext, useContext, type ReactNode } from \"react\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport { getActionEffects } from \"@lattice-php/lattice/effects/dispatch\";\nimport { useEffectDispatcher } from \"@lattice-php/lattice/effects/use-effect-dispatcher\";\nimport type { Effect } from \"@lattice-php/lattice/types/generated\";\n\nexport type ClickBehavior =\n  | { kind: \"navigate\"; href: string; method: Method }\n  | { kind: \"action\"; action: Node<\"action\" | \"action.bulk\"> }\n  | { kind: \"effects\"; onClick: () => void }\n  | { kind: \"none\" };\n\nexport type TriggerState = { onClick: () => void; processing: boolean };\n\nexport type ActionTriggerRenderer = (props: {\n  action: Node<\"action\" | \"action.bulk\">;\n  children: (trigger: TriggerState) => ReactNode;\n}) => ReactNode;\n\nconst ActionTriggerContext = createContext<ActionTriggerRenderer | null>(null);\n\nexport function ActionTriggerProvider({\n  children,\n  render,\n}: {\n  children: ReactNode;\n  render: ActionTriggerRenderer;\n}) {\n  return <ActionTriggerContext.Provider value={render}>{children}</ActionTriggerContext.Provider>;\n}\n\nexport function useActionTrigger(): ActionTriggerRenderer | null {\n  return useContext(ActionTriggerContext);\n}\n\nexport function ActionTrigger({\n  action,\n  children,\n}: {\n  action: Node<\"action\" | \"action.bulk\">;\n  children: (trigger: TriggerState) => ReactNode;\n}) {\n  const render = useActionTrigger();\n\n  if (!render) {\n    throw new Error(\"Action triggers require an ActionTriggerProvider.\");\n  }\n\n  return <>{render({ action, children })}</>;\n}\n\nexport function useClickBehavior(props: {\n  href?: string | null;\n  method?: Method | null;\n  action?: Node<\"action\" | \"action.bulk\"> | null;\n  effects?: Effect[] | null;\n}): ClickBehavior {\n  const dispatch = useEffectDispatcher();\n  const action = props.action ?? null;\n  const effects = props.effects ?? [];\n\n  if (action) {\n    return { kind: \"action\", action };\n  }\n\n  if (effects.length > 0) {\n    return { kind: \"effects\", onClick: () => dispatch(getActionEffects(effects)) };\n  }\n\n  if (props.href != null && props.href !== \"\") {\n    return { kind: \"navigate\", href: props.href, method: props.method ?? \"get\" };\n  }\n\n  return { kind: \"none\" };\n}\n"],"mappings":";;;;;AAoBA,IAAM,uBAAuB,cAA4C,IAAI;AAE7E,SAAgB,sBAAsB,EACpC,UACA,UAIC;CACD,OAAO,oBAAC,qBAAqB,UAAtB;EAA+B,OAAO;EAAS;CAAwC,CAAA;AAChG;AAEA,SAAgB,mBAAiD;CAC/D,OAAO,WAAW,oBAAoB;AACxC;AAEA,SAAgB,cAAc,EAC5B,QACA,YAIC;CACD,MAAM,SAAS,iBAAiB;CAEhC,IAAI,CAAC,QACH,MAAM,IAAI,MAAM,mDAAmD;CAGrE,OAAO,oBAAA,YAAA,EAAA,UAAG,OAAO;EAAE;EAAQ;CAAS,CAAC,EAAI,CAAA;AAC3C;AAEA,SAAgB,iBAAiB,OAKf;CAChB,MAAM,WAAW,oBAAoB;CACrC,MAAM,SAAS,MAAM,UAAU;CAC/B,MAAM,UAAU,MAAM,WAAW,CAAC;CAElC,IAAI,QACF,OAAO;EAAE,MAAM;EAAU;CAAO;CAGlC,IAAI,QAAQ,SAAS,GACnB,OAAO;EAAE,MAAM;EAAW,eAAe,SAAS,iBAAiB,OAAO,CAAC;CAAE;CAG/E,IAAI,MAAM,QAAQ,QAAQ,MAAM,SAAS,IACvC,OAAO;EAAE,MAAM;EAAY,MAAM,MAAM;EAAM,QAAQ,MAAM,UAAU;CAAM;CAG7E,OAAO,EAAE,MAAM,OAAO;AACxB"}