@lattice-php/lattice 0.1.0

package/dist/lib/utils.js

@@ -0,0 +1,13 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+//#region resources/js/lib/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+function toUrl(url) {
+	return typeof url === "string" ? url : url.url;
+}
+//#endregion
+export { cn, toUrl };
+
+//# sourceMappingURL=utils.js.map

package/dist/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../resources/js/lib/utils.ts"],"sourcesContent":["import type { InertiaLinkProps } from \"@inertiajs/react\";\nimport { clsx } from \"clsx\";\nimport type { ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport function toUrl(url: NonNullable<InertiaLinkProps[\"href\"]>): string {\n  return typeof url === \"string\" ? url : url.url;\n}\n"],"mappings":";;;AAKA,SAAgB,GAAG,GAAG,QAAsB;CAC1C,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;AAEA,SAAgB,MAAM,KAAoD;CACxE,OAAO,OAAO,QAAQ,WAAW,MAAM,IAAI;AAC7C"}

package/dist/menu/index.d.ts

@@ -0,0 +1 @@
+export { useMenu } from './use-menu';

package/dist/menu/index.js

@@ -0,0 +1,2 @@
+import { useMenu } from "./use-menu.js";
+export { useMenu };

package/dist/menu/use-menu.d.ts

@@ -0,0 +1,2 @@
+import { MenuPayload } from '../../../core/types';
+export declare function useMenu(location: string): MenuPayload | null;

package/dist/menu/use-menu.js

@@ -0,0 +1,9 @@
+import { usePage } from "@inertiajs/react";
+//#region resources/js/menu/use-menu.ts
+function useMenu(location) {
+	return usePage().props.lattice?.menus[location] ?? null;
+}
+//#endregion
+export { useMenu };
+
+//# sourceMappingURL=use-menu.js.map

package/dist/menu/use-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-menu.js","names":[],"sources":["../../resources/js/menu/use-menu.ts"],"sourcesContent":["import { usePage } from \"@inertiajs/react\";\nimport type { MenuPayload, PagePayload } from \"@lattice/lattice/core/types\";\n\nexport function useMenu(location: string): MenuPayload | null {\n  const page = usePage();\n  const lattice = page.props.lattice as PagePayload | undefined;\n\n  return lattice?.menus[location] ?? null;\n}\n"],"mappings":";;AAGA,SAAgB,QAAQ,UAAsC;CAI5D,OAHa,QACG,EAAK,MAAM,SAEX,MAAM,aAAa;AACrC"}

package/dist/page.d.ts

@@ -0,0 +1,6 @@
+import { PagePayload } from '../..';
+type Props = {
+    lattice: PagePayload;
+};
+export default function Page({ lattice }: Props): import("react").JSX.Element;
+export {};

package/dist/page.js

@@ -0,0 +1,30 @@
+import { cn } from "./lib/utils.js";
+import { Renderer } from "./core/renderer.js";
+import { useRegistry } from "./provider.js";
+import { Head } from "@inertiajs/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/page.tsx
+function Page({ lattice }) {
+	const registry = useRegistry();
+	const content = /* @__PURE__ */ jsx(Renderer, {
+		fallback: null,
+		nodes: lattice.components,
+		registry
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Head, { title: lattice.title ?? void 0 }), lattice.container === "centered" ? /* @__PURE__ */ jsx("main", {
+		className: "min-h-svh bg-lt-bg text-lt-fg",
+		children: /* @__PURE__ */ jsx("div", {
+			"data-testid": "lattice-centered-container",
+			className: "mx-auto flex min-h-svh w-full max-w-6xl flex-col justify-center px-6 py-12 sm:px-8 lg:px-10",
+			children: content
+		})
+	}) : /* @__PURE__ */ jsx("div", {
+		"data-testid": "lattice-default-container",
+		className: cn("w-full", { "px-4 py-6": lattice.layout === "app" }),
+		children: content
+	})] });
+}
+//#endregion
+export { Page as default };
+
+//# sourceMappingURL=page.js.map

package/dist/page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","names":[],"sources":["../resources/js/page.tsx"],"sourcesContent":["import { Head } from \"@inertiajs/react\";\nimport { Renderer } from \"@lattice/lattice/core/renderer\";\nimport { useRegistry } from \"@lattice/lattice/provider\";\nimport type { PagePayload } from \"@lattice/lattice\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\n\ntype Props = {\n  lattice: PagePayload;\n};\n\nexport default function Page({ lattice }: Props) {\n  const registry = useRegistry();\n  const content = <Renderer fallback={null} nodes={lattice.components} registry={registry} />;\n\n  return (\n    <>\n      <Head title={lattice.title ?? undefined} />\n\n      {lattice.container === \"centered\" ? (\n        <main className=\"min-h-svh bg-lt-bg text-lt-fg\">\n          <div\n            data-testid=\"lattice-centered-container\"\n            className=\"mx-auto flex min-h-svh w-full max-w-6xl flex-col justify-center px-6 py-12 sm:px-8 lg:px-10\"\n          >\n            {content}\n          </div>\n        </main>\n      ) : (\n        <div\n          data-testid=\"lattice-default-container\"\n          className={cn(\"w-full\", {\n            \"px-4 py-6\": lattice.layout === \"app\",\n          })}\n        >\n          {content}\n        </div>\n      )}\n    </>\n  );\n}\n"],"mappings":";;;;;;AAUA,SAAwB,KAAK,EAAE,WAAkB;CAC/C,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,oBAAC,UAAD;EAAU,UAAU;EAAM,OAAO,QAAQ;EAAsB;CAAW,CAAA;CAE1F,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD,EAAM,OAAO,QAAQ,SAAS,KAAA,EAAY,CAAA,GAEzC,QAAQ,cAAc,aACrB,oBAAC,QAAD;EAAM,WAAU;YACd,oBAAC,OAAD;GACE,eAAY;GACZ,WAAU;aAET;EACE,CAAA;CACD,CAAA,IAEN,oBAAC,OAAD;EACE,eAAY;EACZ,WAAW,GAAG,UAAU,EACtB,aAAa,QAAQ,WAAW,MAClC,CAAC;YAEA;CACE,CAAA,CAEP,EAAA,CAAA;AAEN"}

package/dist/provider.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { ComponentRegistry } from './core/registry';
+export declare function Provider({ children, registry, }: {
+    children: ReactNode;
+    registry?: ComponentRegistry;
+}): import("react").JSX.Element;
+export declare function useRegistry(): ComponentRegistry;

package/dist/provider.js

@@ -0,0 +1,19 @@
+import { registry } from "./registry.js";
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/provider.tsx
+var RegistryContext = createContext({ registry });
+function Provider({ children, registry: registry$1 = registry }) {
+	const value = useMemo(() => ({ registry: registry$1 }), [registry$1]);
+	return /* @__PURE__ */ jsx(RegistryContext.Provider, {
+		value,
+		children
+	});
+}
+function useRegistry() {
+	return useContext(RegistryContext).registry;
+}
+//#endregion
+export { Provider, useRegistry };
+
+//# sourceMappingURL=provider.js.map

package/dist/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","names":[],"sources":["../resources/js/provider.tsx"],"sourcesContent":["import { createContext, useContext, useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport type { ComponentRegistry } from \"./core/registry\";\nimport { registry as defaultRegistry } from \"./registry\";\n\ntype ContextValue = {\n  registry: ComponentRegistry;\n};\n\nconst RegistryContext = createContext<ContextValue>({\n  registry: defaultRegistry,\n});\n\nexport function Provider({\n  children,\n  registry = defaultRegistry,\n}: {\n  children: ReactNode;\n  registry?: ComponentRegistry;\n}) {\n  const value = useMemo(() => ({ registry }), [registry]);\n\n  return <RegistryContext.Provider value={value}>{children}</RegistryContext.Provider>;\n}\n\nexport function useRegistry(): ComponentRegistry {\n  return useContext(RegistryContext).registry;\n}\n"],"mappings":";;;;AASA,IAAM,kBAAkB,cAA4B,EACxC,SACZ,CAAC;AAED,SAAgB,SAAS,EACvB,UACA,UAAA,aAAW,YAIV;CACD,MAAM,QAAQ,eAAe,EAAE,UAAA,WAAS,IAAI,CAAC,UAAQ,CAAC;CAEtD,OAAO,oBAAC,gBAAgB,UAAjB;EAAiC;EAAQ;CAAmC,CAAA;AACrF;AAEA,SAAgB,cAAiC;CAC/C,OAAO,WAAW,eAAe,EAAE;AACrC"}

package/dist/registry.d.ts

@@ -0,0 +1 @@
+export declare const registry: import('../../core/registry').ComponentRegistry;

package/dist/registry.js

@@ -0,0 +1,11 @@
+import { createRegistry } from "./core/registry.js";
+import { actionComponents } from "./action/index.js";
+import { coreComponents } from "./core/components/index.js";
+import { formComponents } from "./form/index.js";
+import { tableComponents } from "./table/index.js";
+//#region resources/js/registry.ts
+var registry = createRegistry(coreComponents, actionComponents, formComponents, tableComponents);
+//#endregion
+export { registry };
+
+//# sourceMappingURL=registry.js.map

package/dist/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.js","names":[],"sources":["../resources/js/registry.ts"],"sourcesContent":["import { createRegistry } from \"@lattice/lattice/core/registry\";\nimport { actionComponents } from \"./action\";\nimport { coreComponents } from \"./core/components\";\nimport { formComponents } from \"./form\";\nimport { tableComponents } from \"./table\";\n\nexport const registry = createRegistry(\n  coreComponents,\n  actionComponents,\n  formComponents,\n  tableComponents,\n);\n"],"mappings":";;;;;;AAMA,IAAa,WAAW,eACtB,gBACA,kBACA,gBACA,eACF"}

package/dist/table/bulk.d.ts

@@ -0,0 +1,18 @@
+import { Method } from '@inertiajs/core';
+export type BulkActionVariant = "default" | "destructive" | "ghost" | "link" | "outline" | "secondary";
+export type BulkActionConfirmation = {
+    cancelLabel?: string;
+    confirmLabel?: string;
+    description?: string;
+    title?: string;
+};
+export type BulkAction = {
+    id: string;
+    label: string;
+    method: Method;
+    endpoint: string;
+    ref: string;
+    variant: BulkActionVariant;
+    confirmation: BulkActionConfirmation | null;
+};
+export declare function getBulkActions(value: unknown): BulkAction[];

package/dist/table/bulk.js

@@ -0,0 +1,44 @@
+//#region resources/js/table/bulk.ts
+var methods = [
+	"delete",
+	"get",
+	"patch",
+	"post",
+	"put"
+];
+function asString(value, fallback = "") {
+	return typeof value === "string" ? value : fallback;
+}
+function asMethod(value) {
+	return methods.includes(value) ? value : "post";
+}
+function asVariant(value) {
+	return typeof value === "string" ? value : "default";
+}
+function asConfirmation(value) {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return null;
+	return value;
+}
+function getBulkActions(value) {
+	if (!Array.isArray(value)) return [];
+	return value.flatMap((item) => {
+		if (typeof item !== "object" || item === null) return [];
+		const record = item;
+		const props = typeof record.props === "object" && record.props !== null ? record.props : {};
+		const endpoint = asString(props.endpoint);
+		if (endpoint === "") return [];
+		return [{
+			id: asString(record.id),
+			label: asString(props.label, "Run action"),
+			method: asMethod(props.method),
+			endpoint,
+			ref: asString(props.ref),
+			variant: asVariant(props.variant),
+			confirmation: asConfirmation(props.confirmation)
+		}];
+	});
+}
+//#endregion
+export { getBulkActions };
+
+//# sourceMappingURL=bulk.js.map

package/dist/table/bulk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bulk.js","names":[],"sources":["../../resources/js/table/bulk.ts"],"sourcesContent":["import type { Method } from \"@inertiajs/core\";\n\nexport type BulkActionVariant =\n  | \"default\"\n  | \"destructive\"\n  | \"ghost\"\n  | \"link\"\n  | \"outline\"\n  | \"secondary\";\n\nexport type BulkActionConfirmation = {\n  cancelLabel?: string;\n  confirmLabel?: string;\n  description?: string;\n  title?: string;\n};\n\nexport type BulkAction = {\n  id: string;\n  label: string;\n  method: Method;\n  endpoint: string;\n  ref: string;\n  variant: BulkActionVariant;\n  confirmation: BulkActionConfirmation | null;\n};\n\nconst methods = [\"delete\", \"get\", \"patch\", \"post\", \"put\"] satisfies Method[];\n\nfunction asString(value: unknown, fallback = \"\"): string {\n  return typeof value === \"string\" ? value : fallback;\n}\n\nfunction asMethod(value: unknown): Method {\n  return methods.includes(value as Method) ? (value as Method) : \"post\";\n}\n\nfunction asVariant(value: unknown): BulkActionVariant {\n  return typeof value === \"string\" ? (value as BulkActionVariant) : \"default\";\n}\n\nfunction asConfirmation(value: unknown): BulkActionConfirmation | null {\n  if (typeof value !== \"object\" || value === null || Array.isArray(value)) {\n    return null;\n  }\n\n  return value as BulkActionConfirmation;\n}\n\nexport function getBulkActions(value: unknown): BulkAction[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.flatMap((item): BulkAction[] => {\n    if (typeof item !== \"object\" || item === null) {\n      return [];\n    }\n\n    const record = item as Record<string, unknown>;\n    const props =\n      typeof record.props === \"object\" && record.props !== null\n        ? (record.props as Record<string, unknown>)\n        : {};\n    const endpoint = asString(props.endpoint);\n\n    if (endpoint === \"\") {\n      return [];\n    }\n\n    return [\n      {\n        id: asString(record.id),\n        label: asString(props.label, \"Run action\"),\n        method: asMethod(props.method),\n        endpoint,\n        ref: asString(props.ref),\n        variant: asVariant(props.variant),\n        confirmation: asConfirmation(props.confirmation),\n      },\n    ];\n  });\n}\n"],"mappings":";AA2BA,IAAM,UAAU;CAAC;CAAU;CAAO;CAAS;CAAQ;AAAK;AAExD,SAAS,SAAS,OAAgB,WAAW,IAAY;CACvD,OAAO,OAAO,UAAU,WAAW,QAAQ;AAC7C;AAEA,SAAS,SAAS,OAAwB;CACxC,OAAO,QAAQ,SAAS,KAAe,IAAK,QAAmB;AACjE;AAEA,SAAS,UAAU,OAAmC;CACpD,OAAO,OAAO,UAAU,WAAY,QAA8B;AACpE;AAEA,SAAS,eAAe,OAA+C;CACrE,IAAI,OAAO,UAAU,YAAY,UAAU,QAAQ,MAAM,QAAQ,KAAK,GACpE,OAAO;CAGT,OAAO;AACT;AAEA,SAAgB,eAAe,OAA8B;CAC3D,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,SAAS,SAAuB;EAC3C,IAAI,OAAO,SAAS,YAAY,SAAS,MACvC,OAAO,CAAC;EAGV,MAAM,SAAS;EACf,MAAM,QACJ,OAAO,OAAO,UAAU,YAAY,OAAO,UAAU,OAChD,OAAO,QACR,CAAC;EACP,MAAM,WAAW,SAAS,MAAM,QAAQ;EAExC,IAAI,aAAa,IACf,OAAO,CAAC;EAGV,OAAO,CACL;GACE,IAAI,SAAS,OAAO,EAAE;GACtB,OAAO,SAAS,MAAM,OAAO,YAAY;GACzC,QAAQ,SAAS,MAAM,MAAM;GAC7B;GACA,KAAK,SAAS,MAAM,GAAG;GACvB,SAAS,UAAU,MAAM,OAAO;GAChC,cAAc,eAAe,MAAM,YAAY;EACjD,CACF;CACF,CAAC;AACH"}

package/dist/table/components/bulk-bar.d.ts

@@ -0,0 +1,11 @@
+import { BulkAction } from '../bulk';
+export declare function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAllMatching, onSelectAllMatching, onCompleted, }: {
+    actions: BulkAction[];
+    selectedKeys: string[];
+    allMatching: boolean;
+    total?: number;
+    query: Record<string, unknown>;
+    canSelectAllMatching: boolean;
+    onSelectAllMatching: () => void;
+    onCompleted: () => void;
+}): import("react").JSX.Element;

package/dist/table/components/bulk-bar.js

@@ -0,0 +1,76 @@
+import { withRefHeader } from "../../core/component-ref.js";
+import { Button } from "../../core/components/button.js";
+import { Spinner } from "../../core/components/spinner.js";
+import { ConfirmDialog } from "../../core/components/confirm-dialog.js";
+import { dispatchActionEffects, dispatchActionError, getActionEffects } from "../../action/effects.js";
+import { useState } from "react";
+import { useHttp } from "@inertiajs/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/table/components/bulk-bar.tsx
+function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAllMatching, onSelectAllMatching, onCompleted }) {
+	const http = useHttp({});
+	const [confirming, setConfirming] = useState(null);
+	async function submit(action) {
+		try {
+			http.transform((data) => ({
+				...data,
+				...allMatching ? {
+					allMatching: true,
+					...query
+				} : { selected: selectedKeys }
+			}));
+			dispatchActionEffects(getActionEffects((await http[action.method](action.endpoint, { headers: withRefHeader(action.ref ?? "") })).effects));
+			setConfirming(null);
+			onCompleted();
+		} catch (error) {
+			dispatchActionError(error);
+		}
+	}
+	function run(action) {
+		if (action.confirmation) {
+			setConfirming(action);
+			return;
+		}
+		submit(action);
+	}
+	const count = allMatching ? total ?? selectedKeys.length : selectedKeys.length;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-wrap items-center gap-3 border-b border-lt-border bg-lt-muted/50 p-4 text-sm",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "font-medium",
+				children: allMatching ? `All ${count} selected` : `${count} selected`
+			}),
+			canSelectAllMatching && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "font-medium text-lt-primary underline underline-offset-2",
+				onClick: onSelectAllMatching,
+				children: `Select all ${total} matching`
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: actions.map((action) => /* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					variant: action.variant,
+					disabled: http.processing,
+					onClick: () => run(action),
+					children: [http.processing && /* @__PURE__ */ jsx(Spinner, {}), action.label]
+				}, action.id))
+			}),
+			confirming?.confirmation && /* @__PURE__ */ jsx(ConfirmDialog, {
+				title: confirming.confirmation.title ?? confirming.label,
+				description: confirming.confirmation.description,
+				confirmLabel: confirming.confirmation.confirmLabel ?? confirming.label,
+				cancelLabel: confirming.confirmation.cancelLabel ?? "Cancel",
+				confirmVariant: confirming.variant,
+				processing: http.processing,
+				onConfirm: () => void submit(confirming),
+				onCancel: () => setConfirming(null)
+			})
+		]
+	});
+}
+//#endregion
+export { BulkBar };
+
+//# sourceMappingURL=bulk-bar.js.map

package/dist/table/components/bulk-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bulk-bar.js","names":[],"sources":["../../../resources/js/table/components/bulk-bar.tsx"],"sourcesContent":["import { useHttp } from \"@inertiajs/react\";\nimport { useState } from \"react\";\nimport {\n  dispatchActionEffects,\n  dispatchActionError,\n  getActionEffects,\n} from \"@lattice/lattice/action/effects\";\nimport type { ActionEffect } from \"@lattice/lattice/action/effects\";\nimport { withRefHeader } from \"@lattice/lattice/core/component-ref\";\nimport { Button } from \"@lattice/lattice/core/components/button\";\nimport { ConfirmDialog } from \"@lattice/lattice/core/components/confirm-dialog\";\nimport { Spinner } from \"@lattice/lattice/core/components/spinner\";\nimport type { BulkAction } from \"../bulk\";\n\ntype BulkResponse = {\n  data?: Record<string, unknown>;\n  effects?: ActionEffect[];\n  ok?: boolean;\n};\n\ntype BulkData = {\n  allMatching?: boolean;\n  selected?: string[];\n};\n\nexport function BulkBar({\n  actions,\n  selectedKeys,\n  allMatching,\n  total,\n  query,\n  canSelectAllMatching,\n  onSelectAllMatching,\n  onCompleted,\n}: {\n  actions: BulkAction[];\n  selectedKeys: string[];\n  allMatching: boolean;\n  total?: number;\n  query: Record<string, unknown>;\n  canSelectAllMatching: boolean;\n  onSelectAllMatching: () => void;\n  onCompleted: () => void;\n}) {\n  const http = useHttp<BulkData, BulkResponse>({});\n  const [confirming, setConfirming] = useState<BulkAction | null>(null);\n\n  async function submit(action: BulkAction): Promise<void> {\n    try {\n      http.transform((data) => ({\n        ...data,\n        ...(allMatching ? { allMatching: true, ...query } : { selected: selectedKeys }),\n      }));\n\n      const response = await http[action.method](action.endpoint, {\n        headers: withRefHeader(action.ref ?? \"\"),\n      });\n\n      dispatchActionEffects(getActionEffects(response.effects));\n      setConfirming(null);\n      onCompleted();\n    } catch (error) {\n      dispatchActionError(error);\n    }\n  }\n\n  function run(action: BulkAction): void {\n    if (action.confirmation) {\n      setConfirming(action);\n\n      return;\n    }\n\n    void submit(action);\n  }\n\n  const count = allMatching ? (total ?? selectedKeys.length) : selectedKeys.length;\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-3 border-b border-lt-border bg-lt-muted/50 p-4 text-sm\">\n      <span className=\"font-medium\">\n        {allMatching ? `All ${count} selected` : `${count} selected`}\n      </span>\n      {canSelectAllMatching && (\n        <button\n          type=\"button\"\n          className=\"font-medium text-lt-primary underline underline-offset-2\"\n          onClick={onSelectAllMatching}\n        >\n          {`Select all ${total} matching`}\n        </button>\n      )}\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {actions.map((action) => (\n          <Button\n            key={action.id}\n            type=\"button\"\n            variant={action.variant}\n            disabled={http.processing}\n            onClick={() => run(action)}\n          >\n            {http.processing && <Spinner />}\n            {action.label}\n          </Button>\n        ))}\n      </div>\n\n      {confirming?.confirmation && (\n        <ConfirmDialog\n          title={confirming.confirmation.title ?? confirming.label}\n          description={confirming.confirmation.description}\n          confirmLabel={confirming.confirmation.confirmLabel ?? confirming.label}\n          cancelLabel={confirming.confirmation.cancelLabel ?? \"Cancel\"}\n          confirmVariant={confirming.variant}\n          processing={http.processing}\n          onConfirm={() => void submit(confirming)}\n          onCancel={() => setConfirming(null)}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAyBA,SAAgB,QAAQ,EACtB,SACA,cACA,aACA,OACA,OACA,sBACA,qBACA,eAUC;CACD,MAAM,OAAO,QAAgC,CAAC,CAAC;CAC/C,MAAM,CAAC,YAAY,iBAAiB,SAA4B,IAAI;CAEpE,eAAe,OAAO,QAAmC;EACvD,IAAI;GACF,KAAK,WAAW,UAAU;IACxB,GAAG;IACH,GAAI,cAAc;KAAE,aAAa;KAAM,GAAG;IAAM,IAAI,EAAE,UAAU,aAAa;GAC/E,EAAE;GAMF,sBAAsB,kBAAiB,MAJhB,KAAK,OAAO,QAAQ,OAAO,UAAU,EAC1D,SAAS,cAAc,OAAO,OAAO,EAAE,EACzC,CAAC,GAE+C,OAAO,CAAC;GACxD,cAAc,IAAI;GAClB,YAAY;EACd,SAAS,OAAO;GACd,oBAAoB,KAAK;EAC3B;CACF;CAEA,SAAS,IAAI,QAA0B;EACrC,IAAI,OAAO,cAAc;GACvB,cAAc,MAAM;GAEpB;EACF;EAEA,OAAY,MAAM;CACpB;CAEA,MAAM,QAAQ,cAAe,SAAS,aAAa,SAAU,aAAa;CAE1E,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,QAAD;IAAM,WAAU;cACb,cAAc,OAAO,MAAM,aAAa,GAAG,MAAM;GAC9C,CAAA;GACL,wBACC,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,SAAS;cAER,cAAc,MAAM;GACf,CAAA;GAEV,oBAAC,OAAD;IAAK,WAAU;cACZ,QAAQ,KAAK,WACZ,qBAAC,QAAD;KAEE,MAAK;KACL,SAAS,OAAO;KAChB,UAAU,KAAK;KACf,eAAe,IAAI,MAAM;eAL3B,CAOG,KAAK,cAAc,oBAAC,SAAD,CAAU,CAAA,GAC7B,OAAO,KACF;OARD,OAAO,EAQN,CACT;GACE,CAAA;GAEJ,YAAY,gBACX,oBAAC,eAAD;IACE,OAAO,WAAW,aAAa,SAAS,WAAW;IACnD,aAAa,WAAW,aAAa;IACrC,cAAc,WAAW,aAAa,gBAAgB,WAAW;IACjE,aAAa,WAAW,aAAa,eAAe;IACpD,gBAAgB,WAAW;IAC3B,YAAY,KAAK;IACjB,iBAAiB,KAAK,OAAO,UAAU;IACvC,gBAAgB,cAAc,IAAI;GACnC,CAAA;EAEA;;AAET"}

package/dist/table/components/column-filter-control.d.ts

@@ -0,0 +1,14 @@
+import { FilterClause, TableColumn } from '../types';
+type ColumnClause = {
+    clause: FilterClause;
+    index: number;
+};
+export declare function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onRemove, }: {
+    column: TableColumn;
+    clauses: ColumnClause[];
+    processing: boolean;
+    onAdd: (clause: FilterClause) => void;
+    onUpdate: (index: number, clause: FilterClause) => void;
+    onRemove: (index: number) => void;
+}): import("react").JSX.Element | null;
+export {};

package/dist/table/components/column-filter-control.js

@@ -0,0 +1,244 @@
+import { VALUELESS_FILTER_OPERATORS, operatorLabel } from "../query.js";
+import { FilterValueInput } from "./filter-value-input.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Filter, Plus, Trash2 } from "lucide-react";
+import { createPortal } from "react-dom";
+//#region resources/js/table/components/column-filter-control.tsx
+function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onRemove }) {
+	const filter = column.filter;
+	const buttonRef = useRef(null);
+	const panelRef = useRef(null);
+	const [open, setOpen] = useState(false);
+	const [position, setPosition] = useState({
+		top: 0,
+		left: 0
+	});
+	useEffect(() => {
+		if (!open) return;
+		function close(event) {
+			const target = event.target;
+			if (buttonRef.current?.contains(target) || panelRef.current?.contains(target)) return;
+			setOpen(false);
+		}
+		function handleKey(event) {
+			if (event.key === "Escape") setOpen(false);
+		}
+		function dismiss() {
+			setOpen(false);
+		}
+		document.addEventListener("mousedown", close);
+		document.addEventListener("keydown", handleKey);
+		window.addEventListener("scroll", dismiss, true);
+		window.addEventListener("resize", dismiss);
+		return () => {
+			document.removeEventListener("mousedown", close);
+			document.removeEventListener("keydown", handleKey);
+			window.removeEventListener("scroll", dismiss, true);
+			window.removeEventListener("resize", dismiss);
+		};
+	}, [open]);
+	if (!filter) return null;
+	const type = filter.type ?? "text";
+	const operators = filter.operators ?? [];
+	const defaultOperator = filter.defaultOperator ?? operators[0] ?? "eq";
+	const primary = clauses.find((entry) => entry.clause.operator === defaultOperator) ?? clauses[0];
+	function commitPrimary(value) {
+		if (value === "") {
+			if (primary) onRemove(primary.index);
+			return;
+		}
+		if (primary) onUpdate(primary.index, {
+			...primary.clause,
+			value
+		});
+		else onAdd({
+			field: column.key,
+			operator: defaultOperator,
+			value
+		});
+	}
+	function toggle() {
+		if (open) {
+			setOpen(false);
+			return;
+		}
+		const rect = buttonRef.current?.getBoundingClientRect();
+		if (rect) setPosition({
+			top: rect.bottom + 4,
+			left: rect.left
+		});
+		setOpen(true);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1",
+				children: /* @__PURE__ */ jsx(FilterValueInput, {
+					type,
+					label: column.label,
+					value: primary?.clause.value ?? "",
+					processing,
+					withSearchIcon: type === "text" || type === "number",
+					onCommit: commitPrimary,
+					onClear: primary ? () => onRemove(primary.index) : void 0
+				})
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				ref: buttonRef,
+				type: "button",
+				"aria-label": `${column.label} filters`,
+				className: "relative inline-flex size-9 items-center justify-center rounded-lt-sm border border-lt-border disabled:opacity-50 data-[open=true]:border-lt-primary",
+				"data-open": open,
+				disabled: processing,
+				onClick: toggle,
+				children: [/* @__PURE__ */ jsx(Filter, {
+					"aria-hidden": "true",
+					className: "size-4"
+				}), clauses.length > 0 && /* @__PURE__ */ jsx("span", {
+					className: "absolute -right-1.5 -top-1.5 inline-flex size-4 items-center justify-center rounded-full bg-lt-primary text-[10px] font-medium text-lt-primary-fg",
+					children: clauses.length
+				})]
+			}),
+			open && createPortal(/* @__PURE__ */ jsx("div", {
+				ref: panelRef,
+				className: "fixed z-50 w-80 rounded-lt border border-lt-border bg-lt-bg p-4 shadow-lg",
+				style: {
+					top: position.top,
+					left: position.left
+				},
+				children: /* @__PURE__ */ jsx(FilterClauseList, {
+					column,
+					clauses,
+					operators,
+					defaultOperator,
+					processing,
+					onAdd,
+					onUpdate,
+					onRemove
+				})
+			}), document.body)
+		]
+	});
+}
+function FilterClauseList({ column, clauses, operators, defaultOperator, processing, onAdd, onUpdate, onRemove }) {
+	const type = column.filter?.type ?? "text";
+	const [draftOperator, setDraftOperator] = useState(defaultOperator);
+	const [adding, setAdding] = useState(clauses.length === 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid gap-3",
+		children: [
+			clauses.map((entry) => /* @__PURE__ */ jsx(FilterClauseRow, {
+				column,
+				type,
+				operators,
+				clause: entry.clause,
+				processing,
+				onOperator: (operator) => onUpdate(entry.index, {
+					...entry.clause,
+					operator
+				}),
+				onValue: (value) => value === "" ? onRemove(entry.index) : onUpdate(entry.index, {
+					...entry.clause,
+					value
+				}),
+				onRemove: () => onRemove(entry.index)
+			}, entry.index)),
+			adding && /* @__PURE__ */ jsx(FilterClauseRow, {
+				column,
+				type,
+				operators,
+				clause: {
+					field: column.key,
+					operator: draftOperator,
+					value: ""
+				},
+				processing,
+				onOperator: (operator) => {
+					if (VALUELESS_FILTER_OPERATORS.has(operator)) {
+						onAdd({
+							field: column.key,
+							operator,
+							value: ""
+						});
+						setDraftOperator(defaultOperator);
+						setAdding(false);
+						return;
+					}
+					setDraftOperator(operator);
+				},
+				onValue: (value) => {
+					if (value !== "") {
+						onAdd({
+							field: column.key,
+							operator: draftOperator,
+							value
+						});
+						setDraftOperator(defaultOperator);
+						setAdding(false);
+					}
+				},
+				onRemove: () => setAdding(false)
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "border-t border-lt-border pt-3",
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "inline-flex w-full items-center justify-center gap-2 rounded-lt-sm bg-lt-muted px-3 py-2 text-sm font-medium hover:bg-lt-muted/70 disabled:opacity-50",
+					disabled: processing,
+					onClick: () => setAdding(true),
+					children: [/* @__PURE__ */ jsx(Plus, {
+						"aria-hidden": "true",
+						className: "size-4"
+					}), "Add filter"]
+				})
+			})
+		]
+	});
+}
+function FilterClauseRow({ column, type, operators, clause, processing, onOperator, onValue, onRemove }) {
+	const valueless = VALUELESS_FILTER_OPERATORS.has(clause.operator);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid gap-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [operators.length > 1 ? /* @__PURE__ */ jsx("select", {
+				"aria-label": `${column.label} operator`,
+				className: "h-9 flex-1 rounded-lt-sm border border-lt-input bg-lt-bg px-2 text-sm font-normal",
+				disabled: processing,
+				value: clause.operator,
+				onChange: (event) => onOperator(event.target.value),
+				children: operators.map((operator) => /* @__PURE__ */ jsx("option", {
+					value: operator,
+					children: operatorLabel(operator)
+				}, operator))
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "flex-1 text-sm font-medium",
+				children: operatorLabel(clause.operator)
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `Remove ${column.label} filter`,
+				className: "inline-flex size-9 items-center justify-center rounded-lt-sm border border-lt-border hover:bg-lt-muted disabled:opacity-50",
+				disabled: processing,
+				onClick: onRemove,
+				children: /* @__PURE__ */ jsx(Trash2, {
+					"aria-hidden": "true",
+					className: "size-4"
+				})
+			})]
+		}), !valueless && /* @__PURE__ */ jsx(FilterValueInput, {
+			type,
+			label: column.label,
+			ariaLabel: `${column.label} filter value`,
+			value: clause.value,
+			processing,
+			onCommit: onValue,
+			onClear: () => onValue("")
+		})]
+	});
+}
+//#endregion
+export { ColumnFilterControl };
+
+//# sourceMappingURL=column-filter-control.js.map

package/dist/table/components/column-filter-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-filter-control.js","names":[],"sources":["../../../resources/js/table/components/column-filter-control.tsx"],"sourcesContent":["import { Filter, Plus, Trash2 } from \"lucide-react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { ControlType, FilterOperator } from \"@lattice/lattice/generated/types\";\nimport { operatorLabel, VALUELESS_FILTER_OPERATORS } from \"../query\";\nimport type { FilterClause, TableColumn } from \"../types\";\nimport { FilterValueInput } from \"./filter-value-input\";\n\ntype ColumnClause = { clause: FilterClause; index: number };\n\nexport function ColumnFilterControl({\n  column,\n  clauses,\n  processing,\n  onAdd,\n  onUpdate,\n  onRemove,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  processing: boolean;\n  onAdd: (clause: FilterClause) => void;\n  onUpdate: (index: number, clause: FilterClause) => void;\n  onRemove: (index: number) => void;\n}) {\n  const filter = column.filter;\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  const [open, setOpen] = useState(false);\n  const [position, setPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    function close(event: MouseEvent): void {\n      const target = event.target as Node;\n\n      if (buttonRef.current?.contains(target) || panelRef.current?.contains(target)) {\n        return;\n      }\n\n      setOpen(false);\n    }\n\n    function handleKey(event: KeyboardEvent): void {\n      if (event.key === \"Escape\") {\n        setOpen(false);\n      }\n    }\n\n    function dismiss(): void {\n      setOpen(false);\n    }\n\n    document.addEventListener(\"mousedown\", close);\n    document.addEventListener(\"keydown\", handleKey);\n    window.addEventListener(\"scroll\", dismiss, true);\n    window.addEventListener(\"resize\", dismiss);\n\n    return () => {\n      document.removeEventListener(\"mousedown\", close);\n      document.removeEventListener(\"keydown\", handleKey);\n      window.removeEventListener(\"scroll\", dismiss, true);\n      window.removeEventListener(\"resize\", dismiss);\n    };\n  }, [open]);\n\n  if (!filter) {\n    return null;\n  }\n\n  const type = filter.type ?? \"text\";\n  const operators = filter.operators ?? [];\n  const defaultOperator = filter.defaultOperator ?? operators[0] ?? \"eq\";\n  const primary = clauses.find((entry) => entry.clause.operator === defaultOperator) ?? clauses[0];\n\n  function commitPrimary(value: string): void {\n    if (value === \"\") {\n      if (primary) {\n        onRemove(primary.index);\n      }\n\n      return;\n    }\n\n    if (primary) {\n      onUpdate(primary.index, { ...primary.clause, value });\n    } else {\n      onAdd({ field: column.key, operator: defaultOperator, value });\n    }\n  }\n\n  function toggle(): void {\n    if (open) {\n      setOpen(false);\n\n      return;\n    }\n\n    const rect = buttonRef.current?.getBoundingClientRect();\n\n    if (rect) {\n      setPosition({ top: rect.bottom + 4, left: rect.left });\n    }\n\n    setOpen(true);\n  }\n\n  return (\n    <div className=\"flex items-center gap-1\">\n      <div className=\"flex-1\">\n        <FilterValueInput\n          type={type}\n          label={column.label}\n          value={primary?.clause.value ?? \"\"}\n          processing={processing}\n          withSearchIcon={type === \"text\" || type === \"number\"}\n          onCommit={commitPrimary}\n          onClear={primary ? () => onRemove(primary.index) : undefined}\n        />\n      </div>\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        aria-label={`${column.label} filters`}\n        className=\"relative inline-flex size-9 items-center justify-center rounded-lt-sm border border-lt-border disabled:opacity-50 data-[open=true]:border-lt-primary\"\n        data-open={open}\n        disabled={processing}\n        onClick={toggle}\n      >\n        <Filter aria-hidden=\"true\" className=\"size-4\" />\n        {clauses.length > 0 && (\n          <span className=\"absolute -right-1.5 -top-1.5 inline-flex size-4 items-center justify-center rounded-full bg-lt-primary text-[10px] font-medium text-lt-primary-fg\">\n            {clauses.length}\n          </span>\n        )}\n      </button>\n\n      {open &&\n        createPortal(\n          <div\n            ref={panelRef}\n            className=\"fixed z-50 w-80 rounded-lt border border-lt-border bg-lt-bg p-4 shadow-lg\"\n            style={{ top: position.top, left: position.left }}\n          >\n            <FilterClauseList\n              column={column}\n              clauses={clauses}\n              operators={operators}\n              defaultOperator={defaultOperator}\n              processing={processing}\n              onAdd={onAdd}\n              onUpdate={onUpdate}\n              onRemove={onRemove}\n            />\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n\nfunction FilterClauseList({\n  column,\n  clauses,\n  operators,\n  defaultOperator,\n  processing,\n  onAdd,\n  onUpdate,\n  onRemove,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  operators: FilterOperator[];\n  defaultOperator: FilterOperator;\n  processing: boolean;\n  onAdd: (clause: FilterClause) => void;\n  onUpdate: (index: number, clause: FilterClause) => void;\n  onRemove: (index: number) => void;\n}) {\n  const type = column.filter?.type ?? \"text\";\n  const [draftOperator, setDraftOperator] = useState(defaultOperator);\n  const [adding, setAdding] = useState(clauses.length === 0);\n\n  return (\n    <div className=\"grid gap-3\">\n      {clauses.map((entry) => (\n        <FilterClauseRow\n          key={entry.index}\n          column={column}\n          type={type}\n          operators={operators}\n          clause={entry.clause}\n          processing={processing}\n          onOperator={(operator) => onUpdate(entry.index, { ...entry.clause, operator })}\n          onValue={(value) =>\n            value === \"\" ? onRemove(entry.index) : onUpdate(entry.index, { ...entry.clause, value })\n          }\n          onRemove={() => onRemove(entry.index)}\n        />\n      ))}\n\n      {adding && (\n        <FilterClauseRow\n          column={column}\n          type={type}\n          operators={operators}\n          clause={{ field: column.key, operator: draftOperator, value: \"\" }}\n          processing={processing}\n          onOperator={(operator) => {\n            if (VALUELESS_FILTER_OPERATORS.has(operator)) {\n              onAdd({ field: column.key, operator, value: \"\" });\n              setDraftOperator(defaultOperator);\n              setAdding(false);\n              return;\n            }\n            setDraftOperator(operator);\n          }}\n          onValue={(value) => {\n            if (value !== \"\") {\n              onAdd({ field: column.key, operator: draftOperator, value });\n              setDraftOperator(defaultOperator);\n              setAdding(false);\n            }\n          }}\n          onRemove={() => setAdding(false)}\n        />\n      )}\n\n      <div className=\"border-t border-lt-border pt-3\">\n        <button\n          type=\"button\"\n          className=\"inline-flex w-full items-center justify-center gap-2 rounded-lt-sm bg-lt-muted px-3 py-2 text-sm font-medium hover:bg-lt-muted/70 disabled:opacity-50\"\n          disabled={processing}\n          onClick={() => setAdding(true)}\n        >\n          <Plus aria-hidden=\"true\" className=\"size-4\" />\n          Add filter\n        </button>\n      </div>\n    </div>\n  );\n}\n\nfunction FilterClauseRow({\n  column,\n  type,\n  operators,\n  clause,\n  processing,\n  onOperator,\n  onValue,\n  onRemove,\n}: {\n  column: TableColumn;\n  type: ControlType;\n  operators: FilterOperator[];\n  clause: FilterClause;\n  processing: boolean;\n  onOperator: (operator: FilterOperator) => void;\n  onValue: (value: string) => void;\n  onRemove: () => void;\n}) {\n  const valueless = VALUELESS_FILTER_OPERATORS.has(clause.operator);\n\n  return (\n    <div className=\"grid gap-2\">\n      <div className=\"flex items-center gap-2\">\n        {operators.length > 1 ? (\n          <select\n            aria-label={`${column.label} operator`}\n            className=\"h-9 flex-1 rounded-lt-sm border border-lt-input bg-lt-bg px-2 text-sm font-normal\"\n            disabled={processing}\n            value={clause.operator}\n            onChange={(event) => onOperator(event.target.value as FilterOperator)}\n          >\n            {operators.map((operator) => (\n              <option key={operator} value={operator}>\n                {operatorLabel(operator)}\n              </option>\n            ))}\n          </select>\n        ) : (\n          <span className=\"flex-1 text-sm font-medium\">{operatorLabel(clause.operator)}</span>\n        )}\n        <button\n          type=\"button\"\n          aria-label={`Remove ${column.label} filter`}\n          className=\"inline-flex size-9 items-center justify-center rounded-lt-sm border border-lt-border hover:bg-lt-muted disabled:opacity-50\"\n          disabled={processing}\n          onClick={onRemove}\n        >\n          <Trash2 aria-hidden=\"true\" className=\"size-4\" />\n        </button>\n      </div>\n      {!valueless && (\n        <FilterValueInput\n          type={type}\n          label={column.label}\n          ariaLabel={`${column.label} filter value`}\n          value={clause.value}\n          processing={processing}\n          onCommit={onValue}\n          onClear={() => onValue(\"\")}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/table/components/column-header.d.ts

@@ -0,0 +1,7 @@
+import { TableColumn, TableState } from '../types';
+export declare function ColumnHeader({ column, processing, sort, state, }: {
+    column: TableColumn;
+    processing: boolean;
+    sort: (column: TableColumn) => void;
+    state: TableState;
+}): import("react").JSX.Element;