@lattice-php/lattice 0.38.0 → 0.40.0

package/dist/form/components/fields/time-input.js

@@ -1,69 +0,0 @@
-import { Icon } from "../../../icons/sprite.js";
-import { Popover, PopoverContent, PopoverTrigger } from "../../../ui/popover.js";
-import { Button } from "../../../ui/button.js";
-import { Input } from "../../../ui/input.js";
-import { SimpleField } from "./simple-field.js";
-import { formatTimeValue, parseTimeString, secondsEnabled } from "./time-picker-columns.js";
-import { TimePicker } from "./time-picker.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region resources/js/form/components/fields/time-input.tsx
-var TimeInputComponent = ({ node }) => {
-	const props = node.props;
-	const withSeconds = secondsEnabled(props.step);
-	const triggerLabel = props.label ?? props.name;
-	return /* @__PURE__ */ jsx(SimpleField, {
-		node,
-		label: props.label ?? "",
-		children: ({ name, testId, value, readOnly, disabled, commit, blur }, controlProps) => /* @__PURE__ */ jsxs("div", {
-			className: "flex gap-2",
-			children: [/* @__PURE__ */ jsx(Input, {
-				...controlProps,
-				"aria-label": triggerLabel,
-				autoFocus: props.autoFocus ?? false,
-				"data-test": testId,
-				disabled,
-				name,
-				onBlur: () => {
-					const parsed = parseTimeString(value);
-					if (parsed) commit(formatTimeValue(parsed, withSeconds));
-					blur();
-				},
-				onChange: (event) => commit(event.target.value),
-				readOnly,
-				tabIndex: props.tabIndex ?? void 0,
-				type: "text",
-				value
-			}), /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-				asChild: true,
-				children: /* @__PURE__ */ jsx(Button, {
-					"aria-label": `Open ${triggerLabel} time picker`,
-					disabled: disabled || readOnly,
-					size: "icon",
-					type: "button",
-					variant: "secondary",
-					children: /* @__PURE__ */ jsx(Icon, {
-						name: "clock",
-						className: "size-lt-icon-md",
-						"aria-hidden": "true"
-					})
-				})
-			}), /* @__PURE__ */ jsx(PopoverContent, {
-				className: "p-2",
-				children: /* @__PURE__ */ jsx(TimePicker, {
-					value: parseTimeString(value),
-					onChange: (next) => commit(formatTimeValue(next, withSeconds)),
-					step: props.step,
-					min: props.min,
-					max: props.max,
-					disabled,
-					readOnly,
-					testId: `${testId}-picker`
-				})
-			})] })]
-		})
-	});
-};
-//#endregion
-export { TimeInputComponent };
-
-//# sourceMappingURL=time-input.js.map

package/dist/form/components/fields/time-input.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"time-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/time-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@lattice-php/lattice/ui/popover\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { Input } from \"@lattice-php/lattice/ui/input\";\nimport { SimpleField } from \"./simple-field\";\nimport { TimePicker } from \"./time-picker\";\nimport { formatTimeValue, parseTimeString, secondsEnabled } from \"./time-picker-columns\";\n\nexport const TimeInputComponent: RendererComponent<\"field.time-input\"> = ({ node }) => {\n  const props = node.props;\n  const withSeconds = secondsEnabled(props.step);\n  const triggerLabel = props.label ?? props.name;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit, blur }, controlProps) => (\n        <div className=\"flex gap-2\">\n          <Input\n            {...controlProps}\n            aria-label={triggerLabel}\n            autoFocus={props.autoFocus ?? false}\n            data-test={testId}\n            disabled={disabled}\n            name={name}\n            onBlur={() => {\n              const parsed = parseTimeString(value);\n\n              if (parsed) {\n                commit(formatTimeValue(parsed, withSeconds));\n              }\n\n              blur();\n            }}\n            onChange={(event) => commit(event.target.value)}\n            readOnly={readOnly}\n            tabIndex={props.tabIndex ?? undefined}\n            type=\"text\"\n            value={value}\n          />\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                aria-label={`Open ${triggerLabel} time picker`}\n                disabled={disabled || readOnly}\n                size=\"icon\"\n                type=\"button\"\n                variant=\"secondary\"\n              >\n                <Icon name=\"clock\" className=\"size-lt-icon-md\" aria-hidden=\"true\" />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"p-2\">\n              <TimePicker\n                value={parseTimeString(value)}\n                onChange={(next) => commit(formatTimeValue(next, withSeconds))}\n                step={props.step}\n                min={props.min}\n                max={props.max}\n                disabled={disabled}\n                readOnly={readOnly}\n                testId={`${testId}-picker`}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;;;;;;AASA,IAAa,sBAA6D,EAAE,WAAW;CACrF,MAAM,QAAQ,KAAK;CACnB,MAAM,cAAc,eAAe,MAAM,IAAI;CAC7C,MAAM,eAAe,MAAM,SAAS,MAAM;CAE1C,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;EAC3C,WAAA,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,QAAQ,QAAQ,iBAC3D,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,OAAD;IACE,GAAI;IACJ,cAAY;IACZ,WAAW,MAAM,aAAa;IAC9B,aAAW;IACD;IACJ;IACN,cAAc;KACZ,MAAM,SAAS,gBAAgB,KAAK;KAEpC,IAAI,QACF,OAAO,gBAAgB,QAAQ,WAAW,CAAC;KAG7C,KAAK;IACP;IACA,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;IACpC;IACV,UAAU,MAAM,YAAY,KAAA;IAC5B,MAAK;IACE;GACR,CAAA,GACD,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;IAAgB,SAAA;IACd,UAAA,oBAAC,QAAD;KACE,cAAY,QAAQ,aAAa;KACjC,UAAU,YAAY;KACtB,MAAK;KACL,MAAK;KACL,SAAQ;KAER,UAAA,oBAAC,MAAD;MAAM,MAAK;MAAQ,WAAU;MAAkB,eAAY;KAAQ,CAAA;IAC7D,CAAA;GACM,CAAA,GAChB,oBAAC,gBAAD;IAAgB,WAAU;IACxB,UAAA,oBAAC,YAAD;KACE,OAAO,gBAAgB,KAAK;KAC5B,WAAW,SAAS,OAAO,gBAAgB,MAAM,WAAW,CAAC;KAC7D,MAAM,MAAM;KACZ,KAAK,MAAM;KACX,KAAK,MAAM;KACD;KACA;KACV,QAAQ,GAAG,OAAO;IACnB,CAAA;GACa,CAAA,CACT,EAAA,CAAA,CACN;;CAEI,CAAA;AAEjB"}

package/dist/form/components/fields/time-picker-columns.d.ts

@@ -1,24 +0,0 @@
-export type TimeValue = {
-    hour: number;
-    minute: number;
-    second: number;
-};
-export type TimeColumnOption = {
-    value: number;
-    label: string;
-    disabled: boolean;
-};
-type TimeColumns = {
-    hours: TimeColumnOption[];
-    minutes: TimeColumnOption[];
-    seconds: TimeColumnOption[] | null;
-};
-export declare function parseTimeString(value: string | null | undefined): TimeValue | null;
-export declare function formatTimeValue(value: TimeValue, withSeconds: boolean): string;
-export declare function secondsEnabled(step: number | null | undefined): boolean;
-export declare function buildTimeColumns(step: number | null | undefined, options?: {
-    min?: string | null;
-    max?: string | null;
-    current?: TimeValue | null;
-}): TimeColumns;
-export {};

package/dist/form/components/fields/time-picker-columns.js

@@ -1,76 +0,0 @@
-//#region resources/js/form/components/fields/time-picker-columns.ts
-var timePattern = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/;
-function parseTimeString(value) {
-	if (typeof value !== "string") return null;
-	const match = timePattern.exec(value.trim());
-	if (!match) return null;
-	const hour = Number(match[1]);
-	const minute = Number(match[2]);
-	const second = match[3] ? Number(match[3]) : 0;
-	if (hour > 23 || minute > 59 || second > 59) return null;
-	return {
-		hour,
-		minute,
-		second
-	};
-}
-function formatTimeValue(value, withSeconds) {
-	const parts = [pad(value.hour), pad(value.minute)];
-	if (withSeconds) parts.push(pad(value.second));
-	return parts.join(":");
-}
-function secondsEnabled(step) {
-	return step != null && step < 60;
-}
-function buildTimeColumns(step, options = {}) {
-	const { min, max, current } = options;
-	const minBound = toBound(min);
-	const maxBound = toBound(max);
-	const minuteStep = step == null || step < 60 ? 1 : step % 60 === 0 ? step / 60 : 1;
-	return {
-		hours: range(0, 23, 1).map((value) => ({
-			value,
-			label: pad(value),
-			disabled: minBound != null && value < minBound.hour || maxBound != null && value > maxBound.hour
-		})),
-		minutes: withValue(range(0, 59, minuteStep), current?.minute).map((value) => ({
-			value,
-			label: pad(value),
-			disabled: minuteDisabled(value, current, minBound, maxBound)
-		})),
-		seconds: secondsEnabled(step) ? range(0, 59, 1).map((value) => ({
-			value,
-			label: pad(value),
-			disabled: false
-		})) : null
-	};
-}
-function minuteDisabled(minute, current, minBound, maxBound) {
-	if (!current) return false;
-	if (minBound != null && current.hour === minBound.hour && minute < minBound.minute) return true;
-	if (maxBound != null && current.hour === maxBound.hour && minute > maxBound.minute) return true;
-	return false;
-}
-function toBound(value) {
-	const parsed = parseTimeString(value);
-	return parsed ? {
-		hour: parsed.hour,
-		minute: parsed.minute
-	} : null;
-}
-function withValue(values, extra) {
-	if (extra == null || values.includes(extra)) return values;
-	return [...values, extra].sort((left, right) => left - right);
-}
-function range(start, end, step) {
-	const values = [];
-	for (let value = start; value <= end; value += step) values.push(value);
-	return values;
-}
-function pad(value) {
-	return String(value).padStart(2, "0");
-}
-//#endregion
-export { buildTimeColumns, formatTimeValue, parseTimeString, secondsEnabled };
-
-//# sourceMappingURL=time-picker-columns.js.map

package/dist/form/components/fields/time-picker-columns.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"time-picker-columns.js","names":[],"sources":["../../../../resources/js/form/components/fields/time-picker-columns.ts"],"sourcesContent":["export type TimeValue = { hour: number; minute: number; second: number };\n\nexport type TimeColumnOption = { value: number; label: string; disabled: boolean };\n\ntype TimeColumns = {\n  hours: TimeColumnOption[];\n  minutes: TimeColumnOption[];\n  seconds: TimeColumnOption[] | null;\n};\n\ntype Bound = { hour: number; minute: number };\n\nconst timePattern = /^(\\d{1,2}):(\\d{2})(?::(\\d{2}))?$/;\n\nexport function parseTimeString(value: string | null | undefined): TimeValue | null {\n  if (typeof value !== \"string\") {\n    return null;\n  }\n\n  const match = timePattern.exec(value.trim());\n\n  if (!match) {\n    return null;\n  }\n\n  const hour = Number(match[1]);\n  const minute = Number(match[2]);\n  const second = match[3] ? Number(match[3]) : 0;\n\n  if (hour > 23 || minute > 59 || second > 59) {\n    return null;\n  }\n\n  return { hour, minute, second };\n}\n\nexport function formatTimeValue(value: TimeValue, withSeconds: boolean): string {\n  const parts = [pad(value.hour), pad(value.minute)];\n\n  if (withSeconds) {\n    parts.push(pad(value.second));\n  }\n\n  return parts.join(\":\");\n}\n\nexport function secondsEnabled(step: number | null | undefined): boolean {\n  return step != null && step < 60;\n}\n\nexport function buildTimeColumns(\n  step: number | null | undefined,\n  options: { min?: string | null; max?: string | null; current?: TimeValue | null } = {},\n): TimeColumns {\n  const { min, max, current } = options;\n  const minBound = toBound(min);\n  const maxBound = toBound(max);\n  const minuteStep = step == null || step < 60 ? 1 : step % 60 === 0 ? step / 60 : 1;\n\n  const hours = range(0, 23, 1).map((value) => ({\n    value,\n    label: pad(value),\n    disabled:\n      (minBound != null && value < minBound.hour) || (maxBound != null && value > maxBound.hour),\n  }));\n\n  const minuteValues = withValue(range(0, 59, minuteStep), current?.minute);\n  const minutes = minuteValues.map((value) => ({\n    value,\n    label: pad(value),\n    disabled: minuteDisabled(value, current, minBound, maxBound),\n  }));\n\n  const seconds = secondsEnabled(step)\n    ? range(0, 59, 1).map((value) => ({ value, label: pad(value), disabled: false }))\n    : null;\n\n  return { hours, minutes, seconds };\n}\n\nfunction minuteDisabled(\n  minute: number,\n  current: TimeValue | null | undefined,\n  minBound: Bound | null,\n  maxBound: Bound | null,\n): boolean {\n  if (!current) {\n    return false;\n  }\n\n  if (minBound != null && current.hour === minBound.hour && minute < minBound.minute) {\n    return true;\n  }\n\n  if (maxBound != null && current.hour === maxBound.hour && minute > maxBound.minute) {\n    return true;\n  }\n\n  return false;\n}\n\nfunction toBound(value: string | null | undefined): Bound | null {\n  const parsed = parseTimeString(value);\n\n  return parsed ? { hour: parsed.hour, minute: parsed.minute } : null;\n}\n\nfunction withValue(values: number[], extra: number | undefined): number[] {\n  if (extra == null || values.includes(extra)) {\n    return values;\n  }\n\n  return [...values, extra].sort((left, right) => left - right);\n}\n\nfunction range(start: number, end: number, step: number): number[] {\n  const values: number[] = [];\n\n  for (let value = start; value <= end; value += step) {\n    values.push(value);\n  }\n\n  return values;\n}\n\nfunction pad(value: number): string {\n  return String(value).padStart(2, \"0\");\n}\n"],"mappings":";AAYA,IAAM,cAAc;AAEpB,SAAgB,gBAAgB,OAAoD;CAClF,IAAI,OAAO,UAAU,UACnB,OAAO;CAGT,MAAM,QAAQ,YAAY,KAAK,MAAM,KAAK,CAAC;CAE3C,IAAI,CAAC,OACH,OAAO;CAGT,MAAM,OAAO,OAAO,MAAM,EAAE;CAC5B,MAAM,SAAS,OAAO,MAAM,EAAE;CAC9B,MAAM,SAAS,MAAM,KAAK,OAAO,MAAM,EAAE,IAAI;CAE7C,IAAI,OAAO,MAAM,SAAS,MAAM,SAAS,IACvC,OAAO;CAGT,OAAO;EAAE;EAAM;EAAQ;CAAO;AAChC;AAEA,SAAgB,gBAAgB,OAAkB,aAA8B;CAC9E,MAAM,QAAQ,CAAC,IAAI,MAAM,IAAI,GAAG,IAAI,MAAM,MAAM,CAAC;CAEjD,IAAI,aACF,MAAM,KAAK,IAAI,MAAM,MAAM,CAAC;CAG9B,OAAO,MAAM,KAAK,GAAG;AACvB;AAEA,SAAgB,eAAe,MAA0C;CACvE,OAAO,QAAQ,QAAQ,OAAO;AAChC;AAEA,SAAgB,iBACd,MACA,UAAoF,CAAC,GACxE;CACb,MAAM,EAAE,KAAK,KAAK,YAAY;CAC9B,MAAM,WAAW,QAAQ,GAAG;CAC5B,MAAM,WAAW,QAAQ,GAAG;CAC5B,MAAM,aAAa,QAAQ,QAAQ,OAAO,KAAK,IAAI,OAAO,OAAO,IAAI,OAAO,KAAK;CAoBjF,OAAO;EAAE,OAlBK,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,WAAW;GAC5C;GACA,OAAO,IAAI,KAAK;GAChB,UACG,YAAY,QAAQ,QAAQ,SAAS,QAAU,YAAY,QAAQ,QAAQ,SAAS;EACzF,EAaS;EAAO,SAXK,UAAU,MAAM,GAAG,IAAI,UAAU,GAAG,SAAS,MAClD,CAAA,CAAa,KAAK,WAAW;GAC3C;GACA,OAAO,IAAI,KAAK;GAChB,UAAU,eAAe,OAAO,SAAS,UAAU,QAAQ;EAC7D,EAMgB;EAAS,SAJT,eAAe,IAAI,IAC/B,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,WAAW;GAAE;GAAO,OAAO,IAAI,KAAK;GAAG,UAAU;EAAM,EAAE,IAC9E;CAE6B;AACnC;AAEA,SAAS,eACP,QACA,SACA,UACA,UACS;CACT,IAAI,CAAC,SACH,OAAO;CAGT,IAAI,YAAY,QAAQ,QAAQ,SAAS,SAAS,QAAQ,SAAS,SAAS,QAC1E,OAAO;CAGT,IAAI,YAAY,QAAQ,QAAQ,SAAS,SAAS,QAAQ,SAAS,SAAS,QAC1E,OAAO;CAGT,OAAO;AACT;AAEA,SAAS,QAAQ,OAAgD;CAC/D,MAAM,SAAS,gBAAgB,KAAK;CAEpC,OAAO,SAAS;EAAE,MAAM,OAAO;EAAM,QAAQ,OAAO;CAAO,IAAI;AACjE;AAEA,SAAS,UAAU,QAAkB,OAAqC;CACxE,IAAI,SAAS,QAAQ,OAAO,SAAS,KAAK,GACxC,OAAO;CAGT,OAAO,CAAC,GAAG,QAAQ,KAAK,CAAC,CAAC,MAAM,MAAM,UAAU,OAAO,KAAK;AAC9D;AAEA,SAAS,MAAM,OAAe,KAAa,MAAwB;CACjE,MAAM,SAAmB,CAAC;CAE1B,KAAK,IAAI,QAAQ,OAAO,SAAS,KAAK,SAAS,MAC7C,OAAO,KAAK,KAAK;CAGnB,OAAO;AACT;AAEA,SAAS,IAAI,OAAuB;CAClC,OAAO,OAAO,KAAK,CAAC,CAAC,SAAS,GAAG,GAAG;AACtC"}

package/dist/form/components/fields/time-picker.d.ts

@@ -1,18 +0,0 @@
-import { TimeValue } from './time-picker-columns.js';
-type TimePickerProps = {
-    value: TimeValue | null;
-    onChange: (next: TimeValue) => void;
-    step?: number | null;
-    min?: string | null;
-    max?: string | null;
-    disabled?: boolean;
-    readOnly?: boolean;
-    labels?: {
-        hour?: string;
-        minute?: string;
-        second?: string;
-    };
-    testId?: string;
-};
-export declare function TimePicker({ value, onChange, step, min, max, disabled, readOnly, labels, testId, }: TimePickerProps): import("react").JSX.Element;
-export {};

package/dist/form/components/fields/time-picker.js

@@ -1,131 +0,0 @@
-import { cn } from "../../../lib/utils.js";
-import { buildTimeColumns } from "./time-picker-columns.js";
-import { useEffect, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region resources/js/form/components/fields/time-picker.tsx
-function TimePicker({ value, onChange, step, min, max, disabled = false, readOnly = false, labels, testId }) {
-	const containerRef = useRef(null);
-	const columns = buildTimeColumns(step, {
-		min,
-		max,
-		current: value
-	});
-	const current = value ?? {
-		hour: 0,
-		minute: 0,
-		second: 0
-	};
-	const interactive = !disabled && !readOnly;
-	const columnList = [
-		{
-			key: "hour",
-			label: labels?.hour ?? "Hour",
-			options: columns.hours,
-			selected: current.hour
-		},
-		{
-			key: "minute",
-			label: labels?.minute ?? "Minute",
-			options: columns.minutes,
-			selected: current.minute
-		},
-		...columns.seconds ? [{
-			key: "second",
-			label: labels?.second ?? "Second",
-			options: columns.seconds,
-			selected: current.second
-		}] : []
-	];
-	function focusColumn(index) {
-		const target = (containerRef.current?.querySelectorAll("[role=\"listbox\"]"))?.[index];
-		if (!target) return;
-		(target.querySelector("[data-active=\"true\"]") ?? target.querySelector("[role=\"option\"]"))?.focus();
-	}
-	return /* @__PURE__ */ jsx("div", {
-		ref: containerRef,
-		className: "flex gap-1",
-		"data-test": testId,
-		children: columnList.map((column, index) => /* @__PURE__ */ jsx(TimeColumn, {
-			label: column.label,
-			options: column.options,
-			selected: value ? column.selected : null,
-			disabled: !interactive,
-			onSelect: (optionValue) => interactive && onChange({
-				...current,
-				[column.key]: optionValue
-			}),
-			onHorizontal: (direction) => focusColumn(index + direction)
-		}, column.key))
-	});
-}
-function TimeColumn({ label, options, selected, disabled, onSelect, onHorizontal }) {
-	const listRef = useRef(null);
-	const enabledValues = options.filter((option) => !option.disabled).map((option) => option.value);
-	const activeValue = selected ?? enabledValues[0] ?? options[0]?.value ?? 0;
-	useEffect(() => {
-		(listRef.current?.querySelector("[data-active=\"true\"]"))?.scrollIntoView?.({ block: "nearest" });
-	}, [selected]);
-	function moveTo(nextValue) {
-		if (nextValue == null) return;
-		listRef.current?.querySelector(`[data-value="${nextValue}"]`)?.focus();
-		onSelect(nextValue);
-	}
-	function handleKeyDown(event) {
-		if (disabled) return;
-		const index = enabledValues.indexOf(activeValue);
-		switch (event.key) {
-			case "ArrowDown":
-				event.preventDefault();
-				moveTo(enabledValues[Math.min(index + 1, enabledValues.length - 1)]);
-				break;
-			case "ArrowUp":
-				event.preventDefault();
-				moveTo(enabledValues[Math.max(index - 1, 0)]);
-				break;
-			case "Home":
-				event.preventDefault();
-				moveTo(enabledValues[0]);
-				break;
-			case "End":
-				event.preventDefault();
-				moveTo(enabledValues[enabledValues.length - 1]);
-				break;
-			case "ArrowRight":
-				event.preventDefault();
-				onHorizontal(1);
-				break;
-			case "ArrowLeft":
-				event.preventDefault();
-				onHorizontal(-1);
-		}
-	}
-	return /* @__PURE__ */ jsx("div", {
-		ref: listRef,
-		role: "listbox",
-		"aria-label": label,
-		"aria-orientation": "vertical",
-		tabIndex: -1,
-		className: "flex max-h-40 w-14 flex-col overflow-y-auto",
-		onKeyDown: handleKeyDown,
-		children: options.map((option) => {
-			const isSelected = selected === option.value;
-			return /* @__PURE__ */ jsx("button", {
-				type: "button",
-				role: "option",
-				"aria-selected": isSelected,
-				"aria-label": `${label} ${option.label}`,
-				"data-value": option.value,
-				"data-active": activeValue === option.value,
-				disabled: disabled || option.disabled,
-				tabIndex: activeValue === option.value ? 0 : -1,
-				onClick: () => onSelect(option.value),
-				className: cn("shrink-0 rounded-lt-sm px-2 py-1 text-sm text-lt-fg hover:bg-lt-muted", isSelected && "bg-lt-primary text-lt-primary-fg", (disabled || option.disabled) && "cursor-not-allowed opacity-40"),
-				children: option.label
-			}, option.value);
-		})
-	});
-}
-//#endregion
-export { TimePicker };
-
-//# sourceMappingURL=time-picker.js.map

package/dist/form/components/fields/time-picker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"time-picker.js","names":[],"sources":["../../../../resources/js/form/components/fields/time-picker.tsx"],"sourcesContent":["import { type KeyboardEvent, useEffect, useRef } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { buildTimeColumns, type TimeColumnOption, type TimeValue } from \"./time-picker-columns\";\n\ntype TimePickerProps = {\n  value: TimeValue | null;\n  onChange: (next: TimeValue) => void;\n  step?: number | null;\n  min?: string | null;\n  max?: string | null;\n  disabled?: boolean;\n  readOnly?: boolean;\n  labels?: { hour?: string; minute?: string; second?: string };\n  testId?: string;\n};\n\nexport function TimePicker({\n  value,\n  onChange,\n  step,\n  min,\n  max,\n  disabled = false,\n  readOnly = false,\n  labels,\n  testId,\n}: TimePickerProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const columns = buildTimeColumns(step, { min, max, current: value });\n  const current: TimeValue = value ?? { hour: 0, minute: 0, second: 0 };\n  const interactive = !disabled && !readOnly;\n\n  const columnList = [\n    {\n      key: \"hour\" as const,\n      label: labels?.hour ?? \"Hour\",\n      options: columns.hours,\n      selected: current.hour,\n    },\n    {\n      key: \"minute\" as const,\n      label: labels?.minute ?? \"Minute\",\n      options: columns.minutes,\n      selected: current.minute,\n    },\n    ...(columns.seconds\n      ? [\n          {\n            key: \"second\" as const,\n            label: labels?.second ?? \"Second\",\n            options: columns.seconds,\n            selected: current.second,\n          },\n        ]\n      : []),\n  ];\n\n  function focusColumn(index: number) {\n    const listboxes = containerRef.current?.querySelectorAll<HTMLElement>('[role=\"listbox\"]');\n    const target = listboxes?.[index];\n\n    if (!target) {\n      return;\n    }\n\n    const active =\n      target.querySelector<HTMLElement>('[data-active=\"true\"]') ??\n      target.querySelector<HTMLElement>('[role=\"option\"]');\n\n    active?.focus();\n  }\n\n  return (\n    <div ref={containerRef} className=\"flex gap-1\" data-test={testId}>\n      {columnList.map((column, index) => (\n        <TimeColumn\n          key={column.key}\n          label={column.label}\n          options={column.options}\n          selected={value ? column.selected : null}\n          disabled={!interactive}\n          onSelect={(optionValue) =>\n            interactive && onChange({ ...current, [column.key]: optionValue })\n          }\n          onHorizontal={(direction) => focusColumn(index + direction)}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction TimeColumn({\n  label,\n  options,\n  selected,\n  disabled,\n  onSelect,\n  onHorizontal,\n}: {\n  label: string;\n  options: TimeColumnOption[];\n  selected: number | null;\n  disabled: boolean;\n  onSelect: (value: number) => void;\n  onHorizontal: (direction: 1 | -1) => void;\n}) {\n  const listRef = useRef<HTMLDivElement>(null);\n  const enabledValues = options.filter((option) => !option.disabled).map((option) => option.value);\n  const activeValue = selected ?? enabledValues[0] ?? options[0]?.value ?? 0;\n\n  useEffect(() => {\n    const active = listRef.current?.querySelector<HTMLElement>('[data-active=\"true\"]');\n\n    active?.scrollIntoView?.({ block: \"nearest\" });\n  }, [selected]);\n\n  function moveTo(nextValue: number | undefined) {\n    if (nextValue == null) {\n      return;\n    }\n\n    listRef.current?.querySelector<HTMLElement>(`[data-value=\"${nextValue}\"]`)?.focus();\n    onSelect(nextValue);\n  }\n\n  function handleKeyDown(event: KeyboardEvent) {\n    if (disabled) {\n      return;\n    }\n\n    const index = enabledValues.indexOf(activeValue);\n\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        moveTo(enabledValues[Math.min(index + 1, enabledValues.length - 1)]);\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        moveTo(enabledValues[Math.max(index - 1, 0)]);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        moveTo(enabledValues[0]);\n        break;\n      case \"End\":\n        event.preventDefault();\n        moveTo(enabledValues[enabledValues.length - 1]);\n        break;\n      case \"ArrowRight\":\n        event.preventDefault();\n        onHorizontal(1);\n        break;\n      case \"ArrowLeft\":\n        event.preventDefault();\n        onHorizontal(-1);\n        break;\n    }\n  }\n\n  return (\n    <div\n      ref={listRef}\n      role=\"listbox\"\n      aria-label={label}\n      aria-orientation=\"vertical\"\n      tabIndex={-1}\n      className=\"flex max-h-40 w-14 flex-col overflow-y-auto\"\n      onKeyDown={handleKeyDown}\n    >\n      {options.map((option) => {\n        const isSelected = selected === option.value;\n\n        return (\n          <button\n            key={option.value}\n            type=\"button\"\n            role=\"option\"\n            aria-selected={isSelected}\n            aria-label={`${label} ${option.label}`}\n            data-value={option.value}\n            data-active={activeValue === option.value}\n            disabled={disabled || option.disabled}\n            tabIndex={activeValue === option.value ? 0 : -1}\n            onClick={() => onSelect(option.value)}\n            className={cn(\n              \"shrink-0 rounded-lt-sm px-2 py-1 text-sm text-lt-fg hover:bg-lt-muted\",\n              isSelected && \"bg-lt-primary text-lt-primary-fg\",\n              (disabled || option.disabled) && \"cursor-not-allowed opacity-40\",\n            )}\n          >\n            {option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/form/components/fields/toggle.d.ts

@@ -1,2 +0,0 @@
-import { RendererComponent } from '../../../core/types.js';
-export declare const ToggleComponent: RendererComponent<"field.toggle">;

package/dist/form/components/fields/toggle.js

@@ -1,66 +0,0 @@
-import { cn } from "../../../lib/utils.js";
-import { testIdentity } from "../../../core/test-id.js";
-import { useFormContext } from "../../hooks/context.js";
-import { useFieldScope } from "../../hooks/field-scope.js";
-import { useFormValue } from "../../hooks/values.js";
-import { useFieldCommit } from "../../hooks/use-field-commit.js";
-import { FormFieldFrame } from "../base/field.js";
-import { toBoolean } from "../../lib/conditions.js";
-import { useDependentField } from "../../hooks/use-dependent-field.js";
-import { fieldDomName } from "../../lib/field-dom-name.js";
-import { useSeedDefault } from "../../hooks/use-seed-default.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region resources/js/form/components/fields/toggle.tsx
-var ToggleComponent = ({ node }) => {
-	const { hidden, required, readOnly, disabled } = useDependentField(node);
-	const props = node.props;
-	const localName = props.name;
-	const scope = useFieldScope();
-	const { errors, fieldIdPrefix } = useFormContext();
-	const name = fieldDomName(scope ? scope.scopedName(localName) : localName, fieldIdPrefix);
-	const errorKey = scope ? scope.errorKey(localName) : localName;
-	const globalValue = useFormValue(localName);
-	const storedValue = scope ? scope.getValue(localName) : globalValue;
-	const defaultChecked = toBoolean(props.value);
-	const checked = storedValue !== void 0 ? toBoolean(storedValue) : defaultChecked;
-	const locked = readOnly || disabled;
-	const { commit } = useFieldCommit();
-	useSeedDefault(localName, defaultChecked);
-	if (hidden) return null;
-	return /* @__PURE__ */ jsx(FormFieldFrame, {
-		error: errors[errorKey],
-		helperText: props.helperText ?? void 0,
-		tooltip: props.tooltip ?? void 0,
-		label: props.label ?? "",
-		id: name,
-		required,
-		children: (controlProps) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
-			disabled: locked,
-			name,
-			type: "hidden",
-			value: checked ? "1" : "0"
-		}), /* @__PURE__ */ jsx("button", {
-			...controlProps,
-			"aria-checked": checked,
-			"aria-label": props.label ?? localName,
-			autoFocus: props.autoFocus ?? false,
-			className: cn("inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-lt-muted p-0.5 shadow-lt-xs transition-colors outline-none focus-visible:border-lt-ring focus-visible:ring-[length:var(--lt-ring-width)] focus-visible:ring-lt-ring/50 disabled:cursor-not-allowed disabled:bg-lt-disabled data-[state=checked]:bg-lt-primary disabled:data-[state=checked]:bg-lt-disabled"),
-			"data-state": checked ? "checked" : "unchecked",
-			"data-test": testIdentity(localName),
-			disabled: locked,
-			name,
-			onClick: () => commit(localName, !checked),
-			role: "switch",
-			tabIndex: props.tabIndex ?? void 0,
-			type: "button",
-			children: /* @__PURE__ */ jsx("span", {
-				className: "size-5 rounded-full bg-lt-bg shadow-lt-sm transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
-				"data-state": checked ? "checked" : "unchecked"
-			})
-		})] })
-	});
-};
-//#endregion
-export { ToggleComponent };
-
-//# sourceMappingURL=toggle.js.map

package/dist/form/components/fields/toggle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"toggle.js","names":[],"sources":["../../../../resources/js/form/components/fields/toggle.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport { toBoolean } from \"@lattice-php/lattice/form/lib/conditions\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\nimport { fieldDomName } from \"@lattice-php/lattice/form/lib/field-dom-name\";\nimport { useFieldScope } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { useDependentField } from \"@lattice-php/lattice/form/hooks/use-dependent-field\";\nimport { useFieldCommit } from \"@lattice-php/lattice/form/hooks/use-field-commit\";\nimport { useSeedDefault } from \"@lattice-php/lattice/form/hooks/use-seed-default\";\nimport { useFormValue } from \"@lattice-php/lattice/form/hooks/values\";\n\nexport const ToggleComponent: RendererComponent<\"field.toggle\"> = ({ node }) => {\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const props = node.props;\n  const localName = props.name;\n  const scope = useFieldScope();\n  const { errors, fieldIdPrefix } = useFormContext();\n  const name = fieldDomName(scope ? scope.scopedName(localName) : localName, fieldIdPrefix);\n  const errorKey = scope ? scope.errorKey(localName) : localName;\n  const globalValue = useFormValue(localName);\n  const storedValue = scope ? scope.getValue(localName) : globalValue;\n  const defaultChecked = toBoolean(props.value);\n  const checked = storedValue !== undefined ? toBoolean(storedValue) : defaultChecked;\n  const locked = readOnly || disabled;\n  const { commit } = useFieldCommit();\n\n  useSeedDefault(localName, defaultChecked);\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      id={name}\n      required={required}\n    >\n      {(controlProps) => (\n        <>\n          <input disabled={locked} name={name} type=\"hidden\" value={checked ? \"1\" : \"0\"} />\n          <button\n            {...controlProps}\n            aria-checked={checked}\n            aria-label={props.label ?? localName}\n            autoFocus={props.autoFocus ?? false}\n            className={cn(\n              \"inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-lt-muted p-0.5 shadow-lt-xs transition-colors outline-none focus-visible:border-lt-ring focus-visible:ring-[length:var(--lt-ring-width)] focus-visible:ring-lt-ring/50 disabled:cursor-not-allowed disabled:bg-lt-disabled data-[state=checked]:bg-lt-primary disabled:data-[state=checked]:bg-lt-disabled\",\n            )}\n            data-state={checked ? \"checked\" : \"unchecked\"}\n            data-test={testIdentity(localName)}\n            disabled={locked}\n            name={name}\n            onClick={() => commit(localName, !checked)}\n            role=\"switch\"\n            tabIndex={props.tabIndex ?? undefined}\n            type=\"button\"\n          >\n            <span\n              className=\"size-5 rounded-full bg-lt-bg shadow-lt-sm transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0\"\n              data-state={checked ? \"checked\" : \"unchecked\"}\n            />\n          </button>\n        </>\n      )}\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAaA,IAAa,mBAAsD,EAAE,WAAW;CAC9E,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,kBAAkB,IAAI;CACvE,MAAM,QAAQ,KAAK;CACnB,MAAM,YAAY,MAAM;CACxB,MAAM,QAAQ,cAAc;CAC5B,MAAM,EAAE,QAAQ,kBAAkB,eAAe;CACjD,MAAM,OAAO,aAAa,QAAQ,MAAM,WAAW,SAAS,IAAI,WAAW,aAAa;CACxF,MAAM,WAAW,QAAQ,MAAM,SAAS,SAAS,IAAI;CACrD,MAAM,cAAc,aAAa,SAAS;CAC1C,MAAM,cAAc,QAAQ,MAAM,SAAS,SAAS,IAAI;CACxD,MAAM,iBAAiB,UAAU,MAAM,KAAK;CAC5C,MAAM,UAAU,gBAAgB,KAAA,IAAY,UAAU,WAAW,IAAI;CACrE,MAAM,SAAS,YAAY;CAC3B,MAAM,EAAE,WAAW,eAAe;CAElC,eAAe,WAAW,cAAc;CAExC,IAAI,QACF,OAAO;CAGT,OACE,oBAAC,gBAAD;EACE,OAAO,OAAO;EACd,YAAY,MAAM,cAAc,KAAA;EAChC,SAAS,MAAM,WAAW,KAAA;EAC1B,OAAO,MAAM,SAAS;EACtB,IAAI;EACM;EAER,WAAA,iBACA,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;GAAO,UAAU;GAAc;GAAM,MAAK;GAAS,OAAO,UAAU,MAAM;EAAM,CAAA,GAChF,oBAAC,UAAD;GACE,GAAI;GACJ,gBAAc;GACd,cAAY,MAAM,SAAS;GAC3B,WAAW,MAAM,aAAa;GAC9B,WAAW,GACT,gZACF;GACA,cAAY,UAAU,YAAY;GAClC,aAAW,aAAa,SAAS;GACjC,UAAU;GACJ;GACN,eAAe,OAAO,WAAW,CAAC,OAAO;GACzC,MAAK;GACL,UAAU,MAAM,YAAY,KAAA;GAC5B,MAAK;GAEL,UAAA,oBAAC,QAAD;IACE,WAAU;IACV,cAAY,UAAU,YAAY;GACnC,CAAA;EACK,CAAA,CACR,EAAA,CAAA;CAEU,CAAA;AAEpB"}

package/dist/form/components/fields/use-flip-reorder.d.ts

@@ -1,6 +0,0 @@
-/**
- * FLIP reorder: animates registered elements from their previous to current
- * position whenever `orderSignature` changes. Imperative style writes only, so
- * it does not affect React render or the memoised rows.
- */
-export declare function useFlipReorder(orderSignature: string): (key: string, el: HTMLElement | null) => void;

package/dist/form/components/fields/use-flip-reorder.js

@@ -1,52 +0,0 @@
-import { useLayoutEffect as useLayoutEffect$1 } from "../../../lib/use-layout-effect.js";
-import { useCallback, useRef } from "react";
-//#region resources/js/form/components/fields/use-flip-reorder.ts
-var DURATION_MS = 180;
-function prefersReducedMotion() {
-	return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-/**
-* FLIP reorder: animates registered elements from their previous to current
-* position whenever `orderSignature` changes. Imperative style writes only, so
-* it does not affect React render or the memoised rows.
-*/
-function useFlipReorder(orderSignature) {
-	const elements = useRef(/* @__PURE__ */ new Map());
-	const previous = useRef(/* @__PURE__ */ new Map());
-	const register = useCallback((key, el) => {
-		if (el) elements.current.set(key, el);
-		else elements.current.delete(key);
-	}, []);
-	useLayoutEffect$1(() => {
-		const handles = [];
-		const next = /* @__PURE__ */ new Map();
-		elements.current.forEach((el, key) => {
-			el.style.transition = "";
-			el.style.transform = "";
-			next.set(key, el.getBoundingClientRect());
-		});
-		if (!prefersReducedMotion()) elements.current.forEach((el, key) => {
-			const before = previous.current.get(key);
-			const after = next.get(key);
-			if (before && after) {
-				const dy = before.top - after.top;
-				if (dy) {
-					el.style.transform = `translateY(${dy}px)`;
-					handles.push(requestAnimationFrame(() => {
-						el.style.transition = `transform ${DURATION_MS}ms ease-out`;
-						el.style.transform = "";
-					}));
-				}
-			}
-		});
-		previous.current = next;
-		return () => {
-			for (const handle of handles) cancelAnimationFrame(handle);
-		};
-	}, [orderSignature]);
-	return register;
-}
-//#endregion
-export { useFlipReorder };
-
-//# sourceMappingURL=use-flip-reorder.js.map

package/dist/form/components/fields/use-flip-reorder.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-flip-reorder.js","names":[],"sources":["../../../../resources/js/form/components/fields/use-flip-reorder.ts"],"sourcesContent":["import { useCallback, useRef } from \"react\";\nimport { useLayoutEffect } from \"@lattice-php/lattice/lib/use-layout-effect\";\n\nconst DURATION_MS = 180;\n\nfunction prefersReducedMotion(): boolean {\n  return typeof matchMedia === \"function\" && matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\n/**\n * FLIP reorder: animates registered elements from their previous to current\n * position whenever `orderSignature` changes. Imperative style writes only, so\n * it does not affect React render or the memoised rows.\n */\nexport function useFlipReorder(\n  orderSignature: string,\n): (key: string, el: HTMLElement | null) => void {\n  const elements = useRef(new Map<string, HTMLElement>());\n  const previous = useRef(new Map<string, DOMRect>());\n\n  // register is the FLIP measurement target; the element must be a zero-overhead positioning wrapper (no padding/margin) for the delta to match the visible row.\n  const register = useCallback((key: string, el: HTMLElement | null): void => {\n    if (el) {\n      elements.current.set(key, el);\n    } else {\n      elements.current.delete(key);\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    const handles: number[] = [];\n    const next = new Map<string, DOMRect>();\n    elements.current.forEach((el, key) => {\n      el.style.transition = \"\";\n      el.style.transform = \"\";\n      next.set(key, el.getBoundingClientRect());\n    });\n\n    if (!prefersReducedMotion()) {\n      elements.current.forEach((el, key) => {\n        const before = previous.current.get(key);\n        const after = next.get(key);\n        if (before && after) {\n          const dy = before.top - after.top;\n          if (dy) {\n            el.style.transform = `translateY(${dy}px)`;\n            handles.push(\n              requestAnimationFrame(() => {\n                el.style.transition = `transform ${DURATION_MS}ms ease-out`;\n                el.style.transform = \"\";\n              }),\n            );\n          }\n        }\n      });\n    }\n\n    previous.current = next;\n\n    return () => {\n      for (const handle of handles) {\n        cancelAnimationFrame(handle);\n      }\n    };\n  }, [orderSignature]);\n\n  return register;\n}\n"],"mappings":";;;AAGA,IAAM,cAAc;AAEpB,SAAS,uBAAgC;CACvC,OAAO,OAAO,eAAe,cAAc,WAAW,kCAAkC,CAAC,CAAC;AAC5F;;;;;;AAOA,SAAgB,eACd,gBAC+C;CAC/C,MAAM,WAAW,uBAAO,IAAI,IAAyB,CAAC;CACtD,MAAM,WAAW,uBAAO,IAAI,IAAqB,CAAC;CAGlD,MAAM,WAAW,aAAa,KAAa,OAAiC;EAC1E,IAAI,IACF,SAAS,QAAQ,IAAI,KAAK,EAAE;OAE5B,SAAS,QAAQ,OAAO,GAAG;CAE/B,GAAG,CAAC,CAAC;CAEL,wBAAsB;EACpB,MAAM,UAAoB,CAAC;EAC3B,MAAM,uBAAO,IAAI,IAAqB;EACtC,SAAS,QAAQ,SAAS,IAAI,QAAQ;GACpC,GAAG,MAAM,aAAa;GACtB,GAAG,MAAM,YAAY;GACrB,KAAK,IAAI,KAAK,GAAG,sBAAsB,CAAC;EAC1C,CAAC;EAED,IAAI,CAAC,qBAAqB,GACxB,SAAS,QAAQ,SAAS,IAAI,QAAQ;GACpC,MAAM,SAAS,SAAS,QAAQ,IAAI,GAAG;GACvC,MAAM,QAAQ,KAAK,IAAI,GAAG;GAC1B,IAAI,UAAU,OAAO;IACnB,MAAM,KAAK,OAAO,MAAM,MAAM;IAC9B,IAAI,IAAI;KACN,GAAG,MAAM,YAAY,cAAc,GAAG;KACtC,QAAQ,KACN,4BAA4B;MAC1B,GAAG,MAAM,aAAa,aAAa,YAAY;MAC/C,GAAG,MAAM,YAAY;KACvB,CAAC,CACH;IACF;GACF;EACF,CAAC;EAGH,SAAS,UAAU;EAEnB,aAAa;GACX,KAAK,MAAM,UAAU,SACnB,qBAAqB,MAAM;EAE/B;CACF,GAAG,CAAC,cAAc,CAAC;CAEnB,OAAO;AACT"}

package/dist/form/components/fields/use-row-collection.d.ts

@@ -1,12 +0,0 @@
-import { RepeaterRow } from './repeater-rows.js';
-type RowCollection = {
-    path: string;
-    rows: RepeaterRow[];
-    onField: (index: number, field: string, value: unknown) => void;
-    onRemove: (index: number) => void;
-    onMove: (index: number, delta: number) => void;
-    onDuplicate: (index: number) => void;
-    append: (row: RepeaterRow) => void;
-};
-export declare function useRowCollection(name: string, defaultItems: number): RowCollection;
-export {};

package/dist/form/components/fields/use-row-collection.js

@@ -1,45 +0,0 @@
-import { duplicateRow, ensureRowIds, moveRow, removeRow, seedRows, withRowId } from "./repeater-rows.js";
-import { useFieldScope } from "../../hooks/field-scope.js";
-import { useFormValue, useSetFormValue } from "../../hooks/values.js";
-import { useLayoutEffect as useLayoutEffect$1 } from "../../../lib/use-layout-effect.js";
-import { useCallback } from "react";
-//#region resources/js/form/components/fields/use-row-collection.ts
-function useRowCollection(name, defaultItems) {
-	const scope = useFieldScope();
-	const path = scope ? scope.errorKey(name) : name;
-	const setValue = useSetFormValue();
-	const stored = useFormValue(path);
-	const raw = Array.isArray(stored) ? stored : seedRows(stored, defaultItems);
-	const rows = ensureRowIds(raw);
-	useLayoutEffect$1(() => {
-		if (rows !== raw) setValue(path, rows);
-	}, [
-		raw,
-		rows,
-		setValue,
-		path
-	]);
-	const mutate = useCallback((fn) => {
-		setValue(path, (prev) => fn(Array.isArray(prev) ? prev : seedRows(prev, defaultItems)));
-	}, [
-		setValue,
-		path,
-		defaultItems
-	]);
-	return {
-		path,
-		rows,
-		onField: useCallback((index, field, value) => mutate((current) => current.map((r, i) => i === index ? {
-			...r,
-			[field]: value
-		} : r)), [mutate]),
-		onRemove: useCallback((index) => mutate((current) => removeRow(current, index)), [mutate]),
-		onMove: useCallback((index, delta) => mutate((current) => moveRow(current, index, index + delta)), [mutate]),
-		onDuplicate: useCallback((index) => mutate((current) => duplicateRow(current, index)), [mutate]),
-		append: useCallback((row) => mutate((current) => [...current, withRowId(row)]), [mutate])
-	};
-}
-//#endregion
-export { useRowCollection };
-
-//# sourceMappingURL=use-row-collection.js.map

package/dist/form/components/fields/use-row-collection.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-row-collection.js","names":[],"sources":["../../../../resources/js/form/components/fields/use-row-collection.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useLayoutEffect } from \"@lattice-php/lattice/lib/use-layout-effect\";\nimport { useFieldScope } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { useFormValue, useSetFormValue } from \"@lattice-php/lattice/form/hooks/values\";\nimport {\n  duplicateRow,\n  ensureRowIds,\n  moveRow,\n  removeRow,\n  seedRows,\n  withRowId,\n  type RepeaterRow,\n} from \"./repeater-rows\";\n\ntype RowCollection = {\n  path: string;\n  rows: RepeaterRow[];\n  onField: (index: number, field: string, value: unknown) => void;\n  onRemove: (index: number) => void;\n  onMove: (index: number, delta: number) => void;\n  onDuplicate: (index: number) => void;\n  append: (row: RepeaterRow) => void;\n};\n\nexport function useRowCollection(name: string, defaultItems: number): RowCollection {\n  const scope = useFieldScope();\n  const path = scope ? scope.errorKey(name) : name;\n  const setValue = useSetFormValue();\n  const stored = useFormValue(path);\n  const raw: RepeaterRow[] = Array.isArray(stored) ? stored : seedRows(stored, defaultItems);\n  const rows = ensureRowIds(raw);\n\n  useLayoutEffect(() => {\n    if (rows !== raw) {\n      setValue(path, rows);\n    }\n  }, [raw, rows, setValue, path]);\n\n  // Functional store updates preserve the identity of untouched rows, which lets\n  // the memoised RowItem skip re-rendering siblings on a single-row edit.\n  const mutate = useCallback(\n    (fn: (rows: RepeaterRow[]) => RepeaterRow[]): void => {\n      setValue(path, (prev: unknown) =>\n        fn(Array.isArray(prev) ? (prev as RepeaterRow[]) : seedRows(prev, defaultItems)),\n      );\n    },\n    [setValue, path, defaultItems],\n  );\n\n  const onField = useCallback(\n    (index: number, field: string, value: unknown): void =>\n      mutate((current) => current.map((r, i) => (i === index ? { ...r, [field]: value } : r))),\n    [mutate],\n  );\n  const onRemove = useCallback(\n    (index: number): void => mutate((current) => removeRow(current, index)),\n    [mutate],\n  );\n  const onMove = useCallback(\n    (index: number, delta: number): void =>\n      mutate((current) => moveRow(current, index, index + delta)),\n    [mutate],\n  );\n  const onDuplicate = useCallback(\n    (index: number): void => mutate((current) => duplicateRow(current, index)),\n    [mutate],\n  );\n  const append = useCallback(\n    (row: RepeaterRow): void => mutate((current) => [...current, withRowId(row)]),\n    [mutate],\n  );\n\n  return { path, rows, onField, onRemove, onMove, onDuplicate, append };\n}\n"],"mappings":";;;;;;AAwBA,SAAgB,iBAAiB,MAAc,cAAqC;CAClF,MAAM,QAAQ,cAAc;CAC5B,MAAM,OAAO,QAAQ,MAAM,SAAS,IAAI,IAAI;CAC5C,MAAM,WAAW,gBAAgB;CACjC,MAAM,SAAS,aAAa,IAAI;CAChC,MAAM,MAAqB,MAAM,QAAQ,MAAM,IAAI,SAAS,SAAS,QAAQ,YAAY;CACzF,MAAM,OAAO,aAAa,GAAG;CAE7B,wBAAsB;EACpB,IAAI,SAAS,KACX,SAAS,MAAM,IAAI;CAEvB,GAAG;EAAC;EAAK;EAAM;EAAU;CAAI,CAAC;CAI9B,MAAM,SAAS,aACZ,OAAqD;EACpD,SAAS,OAAO,SACd,GAAG,MAAM,QAAQ,IAAI,IAAK,OAAyB,SAAS,MAAM,YAAY,CAAC,CACjF;CACF,GACA;EAAC;EAAU;EAAM;CAAY,CAC/B;CAyBA,OAAO;EAAE;EAAM;EAAM,SAvBL,aACb,OAAe,OAAe,UAC7B,QAAQ,YAAY,QAAQ,KAAK,GAAG,MAAO,MAAM,QAAQ;GAAE,GAAG;IAAI,QAAQ;EAAM,IAAI,CAAE,CAAC,GACzF,CAAC,MAAM,CAoBY;EAAS,UAlBb,aACd,UAAwB,QAAQ,YAAY,UAAU,SAAS,KAAK,CAAC,GACtE,CAAC,MAAM,CAgBqB;EAAU,QAdzB,aACZ,OAAe,UACd,QAAQ,YAAY,QAAQ,SAAS,OAAO,QAAQ,KAAK,CAAC,GAC5D,CAAC,MAAM,CAW+B;EAAQ,aAT5B,aACjB,UAAwB,QAAQ,YAAY,aAAa,SAAS,KAAK,CAAC,GACzE,CAAC,MAAM,CAOuC;EAAa,QAL9C,aACZ,QAA2B,QAAQ,YAAY,CAAC,GAAG,SAAS,UAAU,GAAG,CAAC,CAAC,GAC5E,CAAC,MAAM,CAGoD;CAAO;AACtE"}

package/dist/form/components/form.d.ts

@@ -1,2 +0,0 @@
-import { RendererComponent } from '../../core/types.js';
-export declare const FormComponent: RendererComponent<"form">;