@lattice-php/lattice 0.2.0 → 0.3.0

package/dist/core/api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.js","names":[],"sources":["../../resources/js/core/api.ts"],"sourcesContent":["/**\n * The single funnel for raw-fetch HTTP, so the cross-cutting header, credential,\n * and error policy has one home and call sites only declare intent. Returns a\n * Response (not parsed data) so one primitive serves JSON, the chat's streaming\n * getReader(), and multipart alike. Not for the Inertia world (router/useHttp),\n * which carries its own headers.\n */\n\nimport { withHeaders } from \"./headers\";\n\nexport class ApiError extends Error {\n  constructor(readonly response: Response) {\n    super(`HTTP ${response.status}`);\n  }\n}\n\nfunction xsrfToken(): string {\n  const match = document.cookie.match(/XSRF-TOKEN=([^;]+)/);\n\n  return match ? decodeURIComponent(match[1]) : \"\";\n}\n\nexport type ApiInit = Omit<RequestInit, \"headers\"> & {\n  ref?: string;\n  headers?: Record<string, string>;\n  throwOnError?: boolean;\n};\n\nfunction defaultHeaders(method: string | undefined): Record<string, string> {\n  const isWrite = method !== undefined && method !== \"GET\" && method !== \"HEAD\";\n\n  if (!isWrite) {\n    return { Accept: \"application/json\" };\n  }\n\n  return {\n    Accept: \"application/json\",\n    \"Content-Type\": \"application/json\",\n    \"X-Requested-With\": \"XMLHttpRequest\",\n    \"X-XSRF-TOKEN\": xsrfToken(),\n  };\n}\n\nexport async function apiFetch(url: string, init: ApiInit = {}): Promise<Response> {\n  const { ref, headers, throwOnError = true, method, ...rest } = init;\n  // Some servers reject a lower-case method line, and fetch only normalizes the\n  // standard verbs, so upper-case it here.\n  const normalizedMethod = method?.toUpperCase();\n  const response = await fetch(url, {\n    credentials: \"same-origin\",\n    ...rest,\n    method: normalizedMethod,\n    headers: withHeaders(ref ?? \"\", { ...defaultHeaders(normalizedMethod), ...headers }),\n  });\n\n  if (throwOnError && !response.ok) {\n    throw new ApiError(response);\n  }\n\n  return response;\n}\n\nexport async function apiJson<T>(url: string, init?: ApiInit): Promise<T> {\n  return (await apiFetch(url, init)).json() as Promise<T>;\n}\n"],"mappings":";;;;;;;;;AAUA,IAAa,WAAb,cAA8B,MAAM;CACb;CAArB,YAAY,UAA6B;EACvC,MAAM,QAAQ,SAAS,QAAQ;EADZ,KAAA,WAAA;CAErB;AACF;AAEA,SAAS,YAAoB;CAC3B,MAAM,QAAQ,SAAS,OAAO,MAAM,oBAAoB;CAExD,OAAO,QAAQ,mBAAmB,MAAM,EAAE,IAAI;AAChD;AAQA,SAAS,eAAe,QAAoD;CAG1E,IAAI,EAFY,WAAW,KAAA,KAAa,WAAW,SAAS,WAAW,SAGrE,OAAO,EAAE,QAAQ,mBAAmB;CAGtC,OAAO;EACL,QAAQ;EACR,gBAAgB;EAChB,oBAAoB;EACpB,gBAAgB,UAAU;CAC5B;AACF;AAEA,eAAsB,SAAS,KAAa,OAAgB,CAAC,GAAsB;CACjF,MAAM,EAAE,KAAK,SAAS,eAAe,MAAM,QAAQ,GAAG,SAAS;CAG/D,MAAM,mBAAmB,QAAQ,YAAY;CAC7C,MAAM,WAAW,MAAM,MAAM,KAAK;EAChC,aAAa;EACb,GAAG;EACH,QAAQ;EACR,SAAS,YAAY,OAAO,IAAI;GAAE,GAAG,eAAe,gBAAgB;GAAG,GAAG;EAAQ,CAAC;CACrF,CAAC;CAED,IAAI,gBAAgB,CAAC,SAAS,IAC5B,MAAM,IAAI,SAAS,QAAQ;CAG7B,OAAO;AACT;AAEA,eAAsB,QAAW,KAAa,MAA4B;CACxE,QAAQ,MAAM,SAAS,KAAK,IAAI,GAAG,KAAK;AAC1C"}

package/dist/core/collapsed-context.d.ts

@@ -0,0 +1,2 @@
+export declare const CollapsedContext: import('react').Context<boolean>;
+export declare function useCollapsed(): boolean;

package/dist/core/collapsed-context.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+//#region resources/js/core/collapsed-context.ts
+var CollapsedContext = createContext(false);
+function useCollapsed() {
+	return useContext(CollapsedContext);
+}
+//#endregion
+export { CollapsedContext, useCollapsed };
+
+//# sourceMappingURL=collapsed-context.js.map

package/dist/core/collapsed-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsed-context.js","names":[],"sources":["../../resources/js/core/collapsed-context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport const CollapsedContext = createContext(false);\n\nexport function useCollapsed(): boolean {\n  return useContext(CollapsedContext);\n}\n"],"mappings":";;AAEA,IAAa,mBAAmB,cAAc,KAAK;AAEnD,SAAgB,eAAwB;CACtC,OAAO,WAAW,gBAAgB;AACpC"}

package/dist/core/column-sizing.d.ts

@@ -0,0 +1,17 @@
+import { ColumnWidth } from '../types/generated';
+export type SizableColumn = {
+    key: string;
+    label?: string;
+    width: ColumnWidth;
+};
+export declare const DEFAULT_COLUMN_WIDTH: ColumnWidth;
+export declare function columnWidthTrack(width: ColumnWidth): string;
+export declare function minColumnWidthPx(column: SizableColumn): number;
+export declare function defaultColumnWidthPx(column: SizableColumn): number;
+export declare function maxColumnWidthPx(column: SizableColumn): number;
+export declare function buildColumnGridTemplate({ columns, leadingTracks, trailingTracks, overrides, }: {
+    columns: SizableColumn[];
+    leadingTracks?: string[];
+    trailingTracks?: string[];
+    overrides?: Record<string, number | undefined>;
+}): string;

package/dist/core/column-sizing.js

@@ -0,0 +1,61 @@
+//#region resources/js/core/column-sizing.ts
+var DEFAULT_COLUMN_WIDTH = "md";
+var tracks = {
+	xs: {
+		track: "minmax(4rem, 0.35fr)",
+		minPx: 64,
+		defaultPx: 96,
+		maxPx: 1024
+	},
+	sm: {
+		track: "minmax(6rem, 0.5fr)",
+		minPx: 96,
+		defaultPx: 128,
+		maxPx: 1024
+	},
+	md: {
+		track: "minmax(8rem, 1fr)",
+		minPx: 128,
+		defaultPx: 176,
+		maxPx: 1024
+	},
+	lg: {
+		track: "minmax(12rem, 1.5fr)",
+		minPx: 192,
+		defaultPx: 240,
+		maxPx: 1024
+	},
+	xl: {
+		track: "minmax(16rem, 2fr)",
+		minPx: 256,
+		defaultPx: 320,
+		maxPx: 1024
+	}
+};
+function columnWidthTrack(width) {
+	return tracks[width].track;
+}
+function minColumnWidthPx(column) {
+	return tracks[column.width].minPx;
+}
+function defaultColumnWidthPx(column) {
+	return tracks[column.width].defaultPx;
+}
+function maxColumnWidthPx(column) {
+	return tracks[column.width].maxPx;
+}
+function buildColumnGridTemplate({ columns, leadingTracks = [], trailingTracks = [], overrides = {} }) {
+	return [
+		...leadingTracks,
+		...columns.map((column) => {
+			const override = overrides[column.key];
+			if (override !== void 0) return `${Math.min(maxColumnWidthPx(column), Math.max(minColumnWidthPx(column), override))}px`;
+			return columnWidthTrack(column.width);
+		}),
+		...trailingTracks
+	].join(" ");
+}
+//#endregion
+export { DEFAULT_COLUMN_WIDTH, buildColumnGridTemplate, columnWidthTrack, defaultColumnWidthPx, maxColumnWidthPx, minColumnWidthPx };
+
+//# sourceMappingURL=column-sizing.js.map

package/dist/core/column-sizing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-sizing.js","names":[],"sources":["../../resources/js/core/column-sizing.ts"],"sourcesContent":["import type { ColumnWidth } from \"@lattice-php/lattice/types/generated\";\n\nexport type SizableColumn = {\n  key: string;\n  label?: string;\n  width: ColumnWidth;\n};\n\nexport const DEFAULT_COLUMN_WIDTH: ColumnWidth = \"md\";\n\nconst tracks: Record<\n  ColumnWidth,\n  { track: string; minPx: number; defaultPx: number; maxPx: number }\n> = {\n  xs: { track: \"minmax(4rem, 0.35fr)\", minPx: 64, defaultPx: 96, maxPx: 1024 },\n  sm: { track: \"minmax(6rem, 0.5fr)\", minPx: 96, defaultPx: 128, maxPx: 1024 },\n  md: { track: \"minmax(8rem, 1fr)\", minPx: 128, defaultPx: 176, maxPx: 1024 },\n  lg: { track: \"minmax(12rem, 1.5fr)\", minPx: 192, defaultPx: 240, maxPx: 1024 },\n  xl: { track: \"minmax(16rem, 2fr)\", minPx: 256, defaultPx: 320, maxPx: 1024 },\n};\n\nexport function columnWidthTrack(width: ColumnWidth): string {\n  return tracks[width].track;\n}\n\nexport function minColumnWidthPx(column: SizableColumn): number {\n  return tracks[column.width].minPx;\n}\n\nexport function defaultColumnWidthPx(column: SizableColumn): number {\n  return tracks[column.width].defaultPx;\n}\n\nexport function maxColumnWidthPx(column: SizableColumn): number {\n  return tracks[column.width].maxPx;\n}\n\nexport function buildColumnGridTemplate({\n  columns,\n  leadingTracks = [],\n  trailingTracks = [],\n  overrides = {},\n}: {\n  columns: SizableColumn[];\n  leadingTracks?: string[];\n  trailingTracks?: string[];\n  overrides?: Record<string, number | undefined>;\n}): string {\n  return [\n    ...leadingTracks,\n    ...columns.map((column) => {\n      const override = overrides[column.key];\n\n      if (override !== undefined) {\n        return `${Math.min(maxColumnWidthPx(column), Math.max(minColumnWidthPx(column), override))}px`;\n      }\n\n      return columnWidthTrack(column.width);\n    }),\n    ...trailingTracks,\n  ].join(\" \");\n}\n"],"mappings":";AAQA,IAAa,uBAAoC;AAEjD,IAAM,SAGF;CACF,IAAI;EAAE,OAAO;EAAwB,OAAO;EAAI,WAAW;EAAI,OAAO;CAAK;CAC3E,IAAI;EAAE,OAAO;EAAuB,OAAO;EAAI,WAAW;EAAK,OAAO;CAAK;CAC3E,IAAI;EAAE,OAAO;EAAqB,OAAO;EAAK,WAAW;EAAK,OAAO;CAAK;CAC1E,IAAI;EAAE,OAAO;EAAwB,OAAO;EAAK,WAAW;EAAK,OAAO;CAAK;CAC7E,IAAI;EAAE,OAAO;EAAsB,OAAO;EAAK,WAAW;EAAK,OAAO;CAAK;AAC7E;AAEA,SAAgB,iBAAiB,OAA4B;CAC3D,OAAO,OAAO,OAAO;AACvB;AAEA,SAAgB,iBAAiB,QAA+B;CAC9D,OAAO,OAAO,OAAO,OAAO;AAC9B;AAEA,SAAgB,qBAAqB,QAA+B;CAClE,OAAO,OAAO,OAAO,OAAO;AAC9B;AAEA,SAAgB,iBAAiB,QAA+B;CAC9D,OAAO,OAAO,OAAO,OAAO;AAC9B;AAEA,SAAgB,wBAAwB,EACtC,SACA,gBAAgB,CAAC,GACjB,iBAAiB,CAAC,GAClB,YAAY,CAAC,KAMJ;CACT,OAAO;EACL,GAAG;EACH,GAAG,QAAQ,KAAK,WAAW;GACzB,MAAM,WAAW,UAAU,OAAO;GAElC,IAAI,aAAa,KAAA,GACf,OAAO,GAAG,KAAK,IAAI,iBAAiB,MAAM,GAAG,KAAK,IAAI,iBAAiB,MAAM,GAAG,QAAQ,CAAC,EAAE;GAG7F,OAAO,iBAAiB,OAAO,KAAK;EACtC,CAAC;EACD,GAAG;CACL,EAAE,KAAK,GAAG;AACZ"}

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

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":[],"sources":["../../../resources/js/core/components/badge.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\n\nconst badgeVariants = cva(\n  \"inline-flex items-center justify-center rounded-lt-sm border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-lt-icon-xs gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent bg-lt-primary text-lt-primary-fg [a&]:hover:bg-lt-primary/90\",\n        secondary:\n          \"border-transparent bg-lt-secondary text-lt-secondary-fg [a&]:hover:bg-lt-secondary/90\",\n        destructive:\n          \"border-transparent bg-lt-danger text-lt-danger-fg [a&]:hover:bg-lt-danger/90 focus-visible:ring-lt-danger/20 dark:focus-visible:ring-lt-danger/40 dark:bg-lt-danger/60\",\n        outline: \"border-lt-border text-lt-fg [a&]:hover:bg-lt-accent [a&]:hover:text-lt-accent-fg\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction Badge({\n  className,\n  variant,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"span\";\n\n  return (\n    <Comp data-slot=\"badge\" className={cn(badgeVariants({ variant }), className)} {...props} />\n  );\n}\n\nconst BadgeComponent: RendererComponent<\"badge\"> = ({ node }) => (\n  <Badge variant=\"secondary\" className=\"w-fit px-3 py-1\">\n    {node.props.label}\n  </Badge>\n);\n\nexport default BadgeComponent;\nexport { Badge, badgeVariants };\n"],"mappings":";;;;;;AAMA,IAAM,gBAAgB,IACpB,8ZACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,WACE;EACF,aACE;EACF,SAAS;CACX,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAEA,SAAS,MAAM,EACb,WACA,SACA,UAAU,OACV,GAAG,SACyF;CAG5F,OACE,oBAHW,UAAU,OAAO,QAG5B;EAAM,aAAU;EAAQ,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAE9F;AAEA,IAAM,kBAA8C,EAAE,WACpD,oBAAC,OAAD;CAAO,SAAQ;CAAY,WAAU;WAClC,KAAK,MAAM;AACP,CAAA"}
+{"version":3,"file":"badge.js","names":[],"sources":["../../../resources/js/core/components/badge.tsx"],"sourcesContent":["import { 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 type { RendererComponent } from \"@lattice-php/lattice/core/types\";\n\nconst badgeVariants = cva(\n  \"inline-flex items-center justify-center rounded-lt-sm border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-lt-icon-xs gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent bg-lt-primary text-lt-primary-fg [a&]:hover:bg-lt-primary/90\",\n        secondary:\n          \"border-transparent bg-lt-secondary text-lt-secondary-fg [a&]:hover:bg-lt-secondary/90\",\n        destructive:\n          \"border-transparent bg-lt-danger text-lt-danger-fg [a&]:hover:bg-lt-danger/90 focus-visible:ring-lt-danger/20 dark:focus-visible:ring-lt-danger/40 dark:bg-lt-danger/60\",\n        outline: \"border-lt-border text-lt-fg [a&]:hover:bg-lt-accent [a&]:hover:text-lt-accent-fg\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction Badge({\n  className,\n  variant,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"span\";\n\n  return (\n    <Comp data-slot=\"badge\" className={cn(badgeVariants({ variant }), className)} {...props} />\n  );\n}\n\nconst BadgeComponent: RendererComponent<\"badge\"> = ({ node }) => (\n  <Badge variant=\"secondary\" className=\"w-fit px-3 py-1\">\n    {node.props.label}\n  </Badge>\n);\n\nexport default BadgeComponent;\nexport { Badge, badgeVariants };\n"],"mappings":";;;;;;AAMA,IAAM,gBAAgB,IACpB,8ZACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,WACE;EACF,aACE;EACF,SAAS;CACX,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAEA,SAAS,MAAM,EACb,WACA,SACA,UAAU,OACV,GAAG,SACyF;CAG5F,OACE,oBAHW,UAAU,OAAO,QAG5B;EAAM,aAAU;EAAQ,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAE9F;AAEA,IAAM,kBAA8C,EAAE,WACpD,oBAAC,OAAD;CAAO,SAAQ;CAAY,WAAU;WAClC,KAAK,MAAM;AACP,CAAA"}

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

@@ -5,7 +5,7 @@ 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" | "icon" | "sm" | "lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | "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> & {
     asChild?: boolean;

package/dist/core/components/button.js

@@ -1,4 +1,5 @@
 import { cn } from "../../lib/utils.js";
+import { nodeIdentity } from "../test-id.js";
 import "react";
 import { Link } from "@inertiajs/react";
 import { Slot } from "@radix-ui/react-slot";
@@ -43,8 +44,10 @@ function Button({ className, variant, size, asChild = false, ...props }) {
 var ButtonComponent = ({ node }) => {
 	const { href, label } = node.props;
 	const variant = node.props.variant ?? "default";
+	const testId = nodeIdentity(node);
 	if (href) return /* @__PURE__ */ jsx(Button, {
 		asChild: true,
+		"data-test": testId,
 		variant,
 		size: "lg",
 		children: /* @__PURE__ */ jsx(Link, {
@@ -53,6 +56,7 @@ var ButtonComponent = ({ node }) => {
 		})
 	});
 	return /* @__PURE__ */ jsx(Button, {
+		"data-test": testId,
 		type: node.props.buttonType,
 		variant,
 		size: "lg",

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../../resources/js/core/components/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/lattice/lib/utils\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport type { ButtonVariant } from \"@lattice/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-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_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: \"bg-lt-primary text-lt-primary-fg shadow-xs hover:bg-lt-primary/90\",\n        destructive:\n          \"bg-lt-danger text-lt-danger-fg shadow-xs hover:bg-lt-danger/90 focus-visible:ring-lt-danger/20 dark:focus-visible:ring-lt-danger/40\",\n        success: \"bg-lt-success text-lt-success-fg shadow-xs hover:bg-lt-success/90\",\n        info: \"bg-lt-info text-lt-info-fg shadow-xs hover:bg-lt-info/90\",\n        outline:\n          \"border border-lt-input bg-lt-bg shadow-xs hover:bg-lt-accent hover:text-lt-accent-fg\",\n        secondary: \"bg-lt-secondary text-lt-secondary-fg shadow-xs hover:bg-lt-secondary/80\",\n        ghost: \"hover:bg-lt-accent hover:text-lt-accent-fg\",\n        link: \"text-lt-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-8 rounded-lt-sm px-3 has-[>svg]:px-2.5\",\n        lg: \"h-10 rounded-lt-sm px-6 has-[>svg]:px-4\",\n        icon: \"size-9\",\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 { href, label } = node.props;\n  const variant = node.props.variant ?? \"default\";\n\n  if (href) {\n    return (\n      <Button asChild variant={variant} size=\"lg\">\n        <Link href={href}>{label}</Link>\n      </Button>\n    );\n  }\n\n  return (\n    <Button type={node.props.buttonType} variant={variant} size=\"lg\">\n      {label}\n    </Button>\n  );\n};\n\nexport default ButtonComponent;\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;;AAUA,IAAM,iBAAiB,IACrB,idACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,aACE;GACF,SAAS;GACT,MAAM;GACN,SACE;GACF,WAAW;GACX,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,MAAM,UAAU,KAAK;CAC7B,MAAM,UAAU,KAAK,MAAM,WAAW;CAEtC,IAAI,MACF,OACE,oBAAC,QAAD;EAAQ,SAAA;EAAiB;EAAS,MAAK;YACrC,oBAAC,MAAD;GAAY;aAAO;EAAY,CAAA;CACzB,CAAA;CAIZ,OACE,oBAAC,QAAD;EAAQ,MAAM,KAAK,MAAM;EAAqB;EAAS,MAAK;YACzD;CACK,CAAA;AAEZ"}
+{"version":3,"file":"button.js","names":[],"sources":["../../../resources/js/core/components/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 { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\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-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_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: \"bg-lt-primary text-lt-primary-fg shadow-xs hover:bg-lt-primary/90\",\n        destructive:\n          \"bg-lt-danger text-lt-danger-fg shadow-xs hover:bg-lt-danger/90 focus-visible:ring-lt-danger/20 dark:focus-visible:ring-lt-danger/40\",\n        success: \"bg-lt-success text-lt-success-fg shadow-xs hover:bg-lt-success/90\",\n        info: \"bg-lt-info text-lt-info-fg shadow-xs hover:bg-lt-info/90\",\n        outline:\n          \"border border-lt-input bg-lt-bg shadow-xs hover:bg-lt-accent hover:text-lt-accent-fg\",\n        secondary: \"bg-lt-secondary text-lt-secondary-fg shadow-xs hover:bg-lt-secondary/80\",\n        ghost: \"hover:bg-lt-accent hover:text-lt-accent-fg\",\n        link: \"text-lt-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-8 rounded-lt-sm px-3 has-[>svg]:px-2.5\",\n        lg: \"h-10 rounded-lt-sm px-6 has-[>svg]:px-4\",\n        icon: \"size-9\",\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 { href, label } = node.props;\n  const variant = node.props.variant ?? \"default\";\n  const testId = nodeIdentity(node);\n\n  if (href) {\n    return (\n      <Button asChild data-test={testId} variant={variant} size=\"lg\">\n        <Link href={href}>{label}</Link>\n      </Button>\n    );\n  }\n\n  return (\n    <Button data-test={testId} type={node.props.buttonType} variant={variant} size=\"lg\">\n      {label}\n    </Button>\n  );\n};\n\nexport default ButtonComponent;\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;;;AAWA,IAAM,iBAAiB,IACrB,idACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,aACE;GACF,SAAS;GACT,MAAM;GACN,SACE;GACF,WAAW;GACX,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,MAAM,UAAU,KAAK;CAC7B,MAAM,UAAU,KAAK,MAAM,WAAW;CACtC,MAAM,SAAS,aAAa,IAAI;CAEhC,IAAI,MACF,OACE,oBAAC,QAAD;EAAQ,SAAA;EAAQ,aAAW;EAAiB;EAAS,MAAK;YACxD,oBAAC,MAAD;GAAY;aAAO;EAAY,CAAA;CACzB,CAAA;CAIZ,OACE,oBAAC,QAAD;EAAQ,aAAW;EAAQ,MAAM,KAAK,MAAM;EAAqB;EAAS,MAAK;YAC5E;CACK,CAAA;AAEZ"}

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/lattice/lib/utils\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\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-xs\",\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 } = node.props;\n\n  return (\n    <Card data-lattice-component={node.id}>\n      {(title || description) && (\n        <CardHeader>\n          {title && <CardTitle>{title}</CardTitle>}\n          {description && <CardDescription>{description}</CardDescription>}\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":";;;;AAIA,SAAS,KAAK,EAAE,WAAW,GAAG,SAA0C;CACtE,OACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GACT,0GACA,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,gBAAgB,KAAK;CAEpC,OACE,qBAAC,MAAD;EAAM,0BAAwB,KAAK;YAAnC,EACI,SAAS,gBACT,qBAAC,YAAD,EAAA,UAAA,CACG,SAAS,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA,GACtC,eAAe,oBAAC,iBAAD,EAAA,UAAkB,YAA6B,CAAA,CACrD,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 type { RendererComponent } from \"@lattice-php/lattice/core/types\";\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-xs\",\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 } = node.props;\n\n  return (\n    <Card data-lattice-component={node.id}>\n      {(title || description) && (\n        <CardHeader>\n          {title && <CardTitle>{title}</CardTitle>}\n          {description && <CardDescription>{description}</CardDescription>}\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":";;;;AAIA,SAAS,KAAK,EAAE,WAAW,GAAG,SAA0C;CACtE,OACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GACT,0GACA,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,gBAAgB,KAAK;CAEpC,OACE,qBAAC,MAAD;EAAM,0BAAwB,KAAK;YAAnC,EACI,SAAS,gBACT,qBAAC,YAAD,EAAA,UAAA,CACG,SAAS,oBAAC,WAAD,EAAA,UAAY,MAAiB,CAAA,GACtC,eAAe,oBAAC,iBAAD,EAAA,UAAkB,YAA6B,CAAA,CACrD,EAAA,CAAA,GAEb,YAAY,oBAAC,aAAD;GAAa,WAAU;GAAuB;EAAsB,CAAA,CAC7E;;AAEV"}

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

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

package/dist/core/components/chart.js

@@ -0,0 +1,175 @@
+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
+var chartMargin = {
+	bottom: 0,
+	left: 0,
+	right: 16,
+	top: 8
+};
+var compactLegendProps = {
+	align: "center",
+	height: 24,
+	iconSize: 7,
+	verticalAlign: "top",
+	wrapperStyle: {
+		fontSize: 11,
+		lineHeight: "14px",
+		paddingBottom: 6
+	}
+};
+var axisTick = { fontSize: 10 };
+var palette = [
+	"var(--lt-primary)",
+	"var(--lt-success)",
+	"var(--lt-info)",
+	"var(--lt-warning)",
+	"var(--lt-danger)",
+	"var(--lt-muted-fg)"
+];
+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);
+}
+function isCartesianSeries(series) {
+	return series.type === "area" || series.type === "bar" || series.type === "line";
+}
+function cartesianChartFor(series) {
+	const types = new Set(series.map((item) => item.type));
+	const firstSeries = series[0];
+	if (firstSeries === void 0 || types.size !== 1) return ComposedChart;
+	switch (firstSeries.type) {
+		case "area": return AreaChart;
+		case "bar": return BarChart;
+		case "line": return LineChart;
+	}
+}
+function ChartFrame({ children, description, id, title }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3 rounded-lt border border-lt-border bg-lt-surface p-4 text-lt-surface-fg shadow-xs",
+		"data-lattice-component": id,
+		children: [(title !== null || description !== null) && /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-1.5",
+			children: [title !== null && /* @__PURE__ */ jsx("div", {
+				className: "text-sm font-semibold leading-tight",
+				children: title
+			}), description !== null && /* @__PURE__ */ jsx("div", {
+				className: "text-xs leading-5 text-lt-muted-fg",
+				children: description
+			})]
+		}), children]
+	});
+}
+function CartesianChart({ props }) {
+	const series = props.series.filter(isCartesianSeries);
+	const RechartsChart = cartesianChartFor(series);
+	return /* @__PURE__ */ jsx(ResponsiveContainer, {
+		width: "100%",
+		height: props.height,
+		children: /* @__PURE__ */ jsxs(RechartsChart, {
+			data: props.data,
+			margin: chartMargin,
+			children: [
+				props.grid && /* @__PURE__ */ jsx(CartesianGrid, {
+					strokeDasharray: "3 3",
+					stroke: "var(--lt-border)"
+				}),
+				props.xAxis && props.categoryKey !== null && /* @__PURE__ */ jsx(XAxis, {
+					dataKey: props.categoryKey,
+					stroke: "var(--lt-muted-fg)",
+					tick: axisTick,
+					tickLine: false
+				}),
+				props.yAxis && /* @__PURE__ */ jsx(YAxis, {
+					stroke: "var(--lt-muted-fg)",
+					tick: axisTick,
+					tickLine: false,
+					width: 42
+				}),
+				props.tooltip && /* @__PURE__ */ jsx(Tooltip, {}),
+				props.legend && /* @__PURE__ */ jsx(Legend, { ...compactLegendProps }),
+				series.map((item, index) => {
+					const color = 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,
+						stackId: item.stackId ?? void 0,
+						stroke: color,
+						type: "monotone"
+					}, key);
+					if (item.type === "bar") return /* @__PURE__ */ jsx(Bar, {
+						dataKey: item.dataKey,
+						fill: color,
+						name: item.name ?? void 0,
+						radius: [
+							4,
+							4,
+							0,
+							0
+						],
+						stackId: item.stackId ?? void 0
+					}, key);
+					return /* @__PURE__ */ jsx(Line, {
+						dataKey: item.dataKey,
+						dot: false,
+						name: item.name ?? void 0,
+						stroke: color,
+						strokeWidth: 2,
+						type: "monotone"
+					}, key);
+				})
+			]
+		})
+	});
+}
+function PieChartView({ props, series }) {
+	return /* @__PURE__ */ jsx(ResponsiveContainer, {
+		width: "100%",
+		height: props.height,
+		children: /* @__PURE__ */ jsxs(PieChart, {
+			margin: chartMargin,
+			children: [
+				props.tooltip && /* @__PURE__ */ jsx(Tooltip, {}),
+				props.legend && /* @__PURE__ */ jsx(Legend, { ...compactLegendProps }),
+				/* @__PURE__ */ jsx(Pie, {
+					data: props.data,
+					dataKey: series.dataKey,
+					name: series.name ?? void 0,
+					nameKey: series.nameKey ?? void 0,
+					outerRadius: "68%",
+					children: props.data.map((datum, index) => /* @__PURE__ */ jsx(Cell, { fill: datumColor(datum, series, index) }, index))
+				})
+			]
+		})
+	});
+}
+var ChartComponent = ({ node }) => {
+	const props = node.props;
+	const pieSeries = props.series.find((series) => series.type === "pie");
+	const hasCartesianSeries = props.series.some(isCartesianSeries);
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		description: props.description,
+		id: node.id,
+		title: props.title,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "min-h-0 w-full",
+			children: pieSeries && !hasCartesianSeries ? /* @__PURE__ */ jsx(PieChartView, {
+				props,
+				series: pieSeries
+			}) : /* @__PURE__ */ jsx(CartesianChart, { props })
+		})
+	});
+};
+//#endregion
+export { ChartComponent as default };
+
+//# sourceMappingURL=chart.js.map

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

@@ -0,0 +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 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-xs\"\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}>\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}>\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={node.id} 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/{form/components/base → core/components}/checkbox.js

@@ -1,9 +1,9 @@
-import { cn } from "../../../lib/utils.js";
-import { Icon } from "../../../icons/sprite.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../icons/sprite.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-//#region resources/js/form/components/base/checkbox.tsx
+//#region resources/js/core/components/checkbox.tsx
 function Checkbox({ className, ...props }) {
 	return /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
 		"data-slot": "checkbox",

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

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

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

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

package/dist/core/components/combobox.js

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

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

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