@lattice-php/lattice 0.1.0 → 0.3.0

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 { getStringProp } from \"@lattice/lattice/core/props\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    card: {\n      description?: string;\n      title?: string;\n    };\n  }\n}\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 = getStringProp(node.props, \"title\");\n  const description = getStringProp(node.props, \"description\");\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":";;;;;AAcA,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,QAAQ,cAAc,KAAK,OAAO,OAAO;CAC/C,MAAM,cAAc,cAAc,KAAK,OAAO,aAAa;CAE3D,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 { cn } from "../../lib/utils.js";
+import { Icon } from "../../icons/sprite.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
-import { CheckIcon } from "lucide-react";
 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",
@@ -12,7 +12,10 @@ function Checkbox({ className, ...props }) {
 		children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
 			"data-slot": "checkbox-indicator",
 			className: "flex items-center justify-center text-current transition-none",
-			children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: "check",
+				className: "size-lt-icon-sm"
+			})
 		})
 	});
 }

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

@@ -0,0 +1 @@
+{"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"}

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

@@ -1,11 +1,10 @@
-import { ComponentProps } from 'react';
-import { Button } from './button';
+import { ButtonVariant } from '../../types/generated';
 export declare function ConfirmDialog({ title, description, confirmLabel, cancelLabel, confirmVariant, processing, confirmDisabled, onConfirm, onCancel, }: {
     title: string;
     description?: string;
     confirmLabel: string;
     cancelLabel?: string;
-    confirmVariant?: ComponentProps<typeof Button>["variant"];
+    confirmVariant?: ButtonVariant;
     processing?: boolean;
     confirmDisabled?: boolean;
     onConfirm: () => void;

package/dist/core/components/confirm-dialog.js

@@ -1,38 +1,38 @@
 import { Button } from "./button.js";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./dialog.js";
 import { Spinner } from "./spinner.js";
-import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/core/components/confirm-dialog.tsx
 function ConfirmDialog({ title, description, confirmLabel, cancelLabel = "Cancel", confirmVariant = "default", processing = false, confirmDisabled = false, onConfirm, onCancel }) {
-	const titleId = useId();
-	return /* @__PURE__ */ jsx("div", {
-		className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
-		children: /* @__PURE__ */ jsxs("div", {
-			"aria-labelledby": titleId,
-			"aria-modal": "true",
-			className: "w-full max-w-md rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lg",
-			role: "dialog",
+	const blockWhileProcessing = (event) => {
+		if (processing) event.preventDefault();
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: true,
+		onOpenChange: (open) => {
+			if (!open) onCancel();
+		},
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			...description ? {} : { "aria-describedby": void 0 },
+			className: "w-full max-w-md",
+			onEscapeKeyDown: blockWhileProcessing,
+			onInteractOutside: blockWhileProcessing,
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "grid gap-2",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-lg font-semibold leading-none tracking-tight",
-					id: titleId,
-					children: title
-				}), description && /* @__PURE__ */ jsx("p", {
-					className: "text-sm text-lt-muted-fg",
-					children: description
-				})]
+				children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), description && /* @__PURE__ */ jsx(DialogDescription, { children: description })]
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "mt-6 flex justify-end gap-2",
 				children: [/* @__PURE__ */ jsx(Button, {
 					type: "button",
 					variant: "outline",
+					"data-test": "confirm-cancel",
 					disabled: processing,
 					onClick: onCancel,
 					children: cancelLabel
 				}), /* @__PURE__ */ jsxs(Button, {
 					type: "button",
 					variant: confirmVariant,
+					"data-test": "confirm-accept",
 					disabled: processing || confirmDisabled,
 					onClick: onConfirm,
 					children: [processing && /* @__PURE__ */ jsx(Spinner, {}), confirmLabel]

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

@@ -1 +1 @@
-{"version":3,"file":"confirm-dialog.js","names":[],"sources":["../../../resources/js/core/components/confirm-dialog.tsx"],"sourcesContent":["import { type ComponentProps, useId } from \"react\";\nimport { Button } from \"./button\";\nimport { Spinner } from \"./spinner\";\n\nexport function ConfirmDialog({\n  title,\n  description,\n  confirmLabel,\n  cancelLabel = \"Cancel\",\n  confirmVariant = \"default\",\n  processing = false,\n  confirmDisabled = false,\n  onConfirm,\n  onCancel,\n}: {\n  title: string;\n  description?: string;\n  confirmLabel: string;\n  cancelLabel?: string;\n  confirmVariant?: ComponentProps<typeof Button>[\"variant\"];\n  processing?: boolean;\n  confirmDisabled?: boolean;\n  onConfirm: () => void;\n  onCancel: () => void;\n}) {\n  const titleId = useId();\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4\">\n      <div\n        aria-labelledby={titleId}\n        aria-modal=\"true\"\n        className=\"w-full max-w-md rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lg\"\n        role=\"dialog\"\n      >\n        <div className=\"grid gap-2\">\n          <h2 className=\"text-lg font-semibold leading-none tracking-tight\" id={titleId}>\n            {title}\n          </h2>\n          {description && <p className=\"text-sm text-lt-muted-fg\">{description}</p>}\n        </div>\n        <div className=\"mt-6 flex justify-end gap-2\">\n          <Button type=\"button\" variant=\"outline\" disabled={processing} onClick={onCancel}>\n            {cancelLabel}\n          </Button>\n          <Button\n            type=\"button\"\n            variant={confirmVariant}\n            disabled={processing || confirmDisabled}\n            onClick={onConfirm}\n          >\n            {processing && <Spinner />}\n            {confirmLabel}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAIA,SAAgB,cAAc,EAC5B,OACA,aACA,cACA,cAAc,UACd,iBAAiB,WACjB,aAAa,OACb,kBAAkB,OAClB,WACA,YAWC;CACD,MAAM,UAAU,MAAM;CAEtB,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,OAAD;GACE,mBAAiB;GACjB,cAAW;GACX,WAAU;GACV,MAAK;aAJP,CAME,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,MAAD;KAAI,WAAU;KAAoD,IAAI;eACnE;IACC,CAAA,GACH,eAAe,oBAAC,KAAD;KAAG,WAAU;eAA4B;IAAe,CAAA,CACrE;OACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KAAQ,MAAK;KAAS,SAAQ;KAAU,UAAU;KAAY,SAAS;eACpE;IACK,CAAA,GACR,qBAAC,QAAD;KACE,MAAK;KACL,SAAS;KACT,UAAU,cAAc;KACxB,SAAS;eAJX,CAMG,cAAc,oBAAC,SAAD,CAAU,CAAA,GACxB,YACK;MACL;KACF;;CACF,CAAA;AAET"}
+{"version":3,"file":"confirm-dialog.js","names":[],"sources":["../../../resources/js/core/components/confirm-dialog.tsx"],"sourcesContent":["import type { ButtonVariant } from \"@lattice-php/lattice/types/generated\";\nimport { Button } from \"./button\";\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from \"./dialog\";\nimport { Spinner } from \"./spinner\";\n\nexport function ConfirmDialog({\n  title,\n  description,\n  confirmLabel,\n  cancelLabel = \"Cancel\",\n  confirmVariant = \"default\",\n  processing = false,\n  confirmDisabled = false,\n  onConfirm,\n  onCancel,\n}: {\n  title: string;\n  description?: string;\n  confirmLabel: string;\n  cancelLabel?: string;\n  confirmVariant?: ButtonVariant;\n  processing?: boolean;\n  confirmDisabled?: boolean;\n  onConfirm: () => void;\n  onCancel: () => void;\n}) {\n  const blockWhileProcessing = (event: Event): void => {\n    if (processing) {\n      event.preventDefault();\n    }\n  };\n\n  return (\n    <Dialog\n      open\n      onOpenChange={(open) => {\n        if (!open) {\n          onCancel();\n        }\n      }}\n    >\n      <DialogContent\n        {...(description ? {} : { \"aria-describedby\": undefined })}\n        className=\"w-full max-w-md\"\n        onEscapeKeyDown={blockWhileProcessing}\n        onInteractOutside={blockWhileProcessing}\n      >\n        <div className=\"grid gap-2\">\n          <DialogTitle>{title}</DialogTitle>\n          {description && <DialogDescription>{description}</DialogDescription>}\n        </div>\n        <div className=\"mt-6 flex justify-end gap-2\">\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            data-test=\"confirm-cancel\"\n            disabled={processing}\n            onClick={onCancel}\n          >\n            {cancelLabel}\n          </Button>\n          <Button\n            type=\"button\"\n            variant={confirmVariant}\n            data-test=\"confirm-accept\"\n            disabled={processing || confirmDisabled}\n            onClick={onConfirm}\n          >\n            {processing && <Spinner />}\n            {confirmLabel}\n          </Button>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,cAAc,EAC5B,OACA,aACA,cACA,cAAc,UACd,iBAAiB,WACjB,aAAa,OACb,kBAAkB,OAClB,WACA,YAWC;CACD,MAAM,wBAAwB,UAAuB;EACnD,IAAI,YACF,MAAM,eAAe;CAEzB;CAEA,OACE,oBAAC,QAAD;EACE,MAAA;EACA,eAAe,SAAS;GACtB,IAAI,CAAC,MACH,SAAS;EAEb;YAEA,qBAAC,eAAD;GACE,GAAK,cAAc,CAAC,IAAI,EAAE,oBAAoB,KAAA,EAAU;GACxD,WAAU;GACV,iBAAiB;GACjB,mBAAmB;aAJrB,CAME,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GAChC,eAAe,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,CAChE;OACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,MAAK;KACL,SAAQ;KACR,aAAU;KACV,UAAU;KACV,SAAS;eAER;IACK,CAAA,GACR,qBAAC,QAAD;KACE,MAAK;KACL,SAAS;KACT,aAAU;KACV,UAAU,cAAc;KACxB,SAAS;eALX,CAOG,cAAc,oBAAC,SAAD,CAAU,CAAA,GACxB,YACK;MACL;KACQ;;CACT,CAAA;AAEZ"}

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

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+/** The focus-visible ring shared by every interactive control surface. */
+export declare const FOCUS_RING = "focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]";
+/**
+ * The shared chrome for single-line form/table controls (text inputs, native
+ * selects, and the Select/filter trigger buttons). `density` is the only axis
+ * that differs between forms (comfortable) and table filters (compact); the
+ * border, focus ring, invalid, and disabled treatment are unified.
+ */
+export declare const controlSurface: (props?: ({
+    density?: "comfortable" | "compact" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ControlSurfaceVariants = VariantProps<typeof controlSurface>;

package/dist/core/components/control.js

@@ -0,0 +1,27 @@
+import { cva } from "class-variance-authority";
+//#region resources/js/core/components/control.ts
+/** The focus-visible ring shared by every interactive control surface. */
+var FOCUS_RING = "focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]";
+/**
+* The shared chrome for single-line form/table controls (text inputs, native
+* selects, and the Select/filter trigger buttons). `density` is the only axis
+* that differs between forms (comfortable) and table filters (compact); the
+* border, focus ring, invalid, and disabled treatment are unified.
+*/
+var controlSurface = cva([
+	"w-full min-w-0 rounded-lt-sm border border-lt-input shadow-xs outline-none transition-[color,box-shadow]",
+	"placeholder:text-lt-muted-fg",
+	FOCUS_RING,
+	"aria-invalid:border-lt-danger aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40",
+	"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+], {
+	variants: { density: {
+		comfortable: "h-9 bg-transparent px-3 py-1 text-base md:text-sm",
+		compact: "h-9 bg-lt-bg px-2 text-sm font-normal"
+	} },
+	defaultVariants: { density: "comfortable" }
+});
+//#endregion
+export { FOCUS_RING, controlSurface };
+
+//# sourceMappingURL=control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"control.js","names":[],"sources":["../../../resources/js/core/components/control.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n/** The focus-visible ring shared by every interactive control surface. */\nexport const FOCUS_RING =\n  \"focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]\";\n\n/**\n * The shared chrome for single-line form/table controls (text inputs, native\n * selects, and the Select/filter trigger buttons). `density` is the only axis\n * that differs between forms (comfortable) and table filters (compact); the\n * border, focus ring, invalid, and disabled treatment are unified.\n */\nexport const controlSurface = cva(\n  [\n    \"w-full min-w-0 rounded-lt-sm border border-lt-input shadow-xs outline-none transition-[color,box-shadow]\",\n    \"placeholder:text-lt-muted-fg\",\n    FOCUS_RING,\n    \"aria-invalid:border-lt-danger aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n  ],\n  {\n    variants: {\n      density: {\n        comfortable: \"h-9 bg-transparent px-3 py-1 text-base md:text-sm\",\n        compact: \"h-9 bg-lt-bg px-2 text-sm font-normal\",\n      },\n    },\n    defaultVariants: { density: \"comfortable\" },\n  },\n);\n\nexport type ControlSurfaceVariants = VariantProps<typeof controlSurface>;\n"],"mappings":";;;AAGA,IAAa,aACX;;;;;;;AAQF,IAAa,iBAAiB,IAC5B;CACE;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,SAAS;EACP,aAAa;EACb,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,SAAS,cAAc;AAC5C,CACF"}

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

@@ -0,0 +1,19 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as React from "react";
+export declare const DIALOG_SURFACE = "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lg";
+declare function Dialog(props: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
+declare function DialogClose(props: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
+declare function DialogContent({ children, className, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>): React.JSX.Element;
+/**
+ * The shared dialog header: a title with an optional description and a ghost
+ * close button. Pass `description` as `undefined` to suppress the description
+ * and the matching `aria-describedby` wiring on the content.
+ */
+declare function DialogHeader({ closeLabel, description, title, }: {
+    closeLabel?: string;
+    description?: React.ReactNode;
+    title: React.ReactNode;
+}): React.JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle };