@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/realtime/conflict-banner.js

@@ -0,0 +1,193 @@
+import { useFormatter, usePanel, useT } from "../../context.js";
+import { Button } from "../ui/button.js";
+import { useStore } from "../../hooks/use-store.js";
+import { ConflictMonitor, PresenceRoom, conflictMessage, findPageFormBlock } from "@alfakit/core";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RefreshCwIcon, TriangleAlertIcon, XIcon } from "lucide-react";
+//#region src/components/realtime/conflict-banner.tsx
+/**
+* Edit pages (`detectConflicts()`): a non-blocking banner when somebody else saved the
+* record ("Dana saved changes 10 seconds ago", over `Panel::realtime()`) or the server
+* refused a save, with review (the changed fields against your unsaved values), reload
+* and keep mine. Replace it with `components: { 'page:conflict-banner': … }`.
+*/
+function ConflictBanner({ page }) {
+	const panel = usePanel();
+	const t = useT();
+	const formatter = useFormatter();
+	const version = page.conflicts?.version ?? "";
+	const channel = page.presence?.channel ?? null;
+	const [reviewing, setReviewing] = useState(false);
+	const [, setTick] = useState(0);
+	const monitor = useMemo(() => new ConflictMonitor({
+		version,
+		token: page.token,
+		endpoint: panel.endpoints.conflicts,
+		channel,
+		original: findPageFormBlock(page)?.state ?? {},
+		self: panel.user?.id ?? null,
+		resolveName: (id) => channel ? PresenceRoom.find(channel)?.memberName(id) ?? null : null
+	}), [version, channel]);
+	useEffect(() => monitor.start(), [monitor]);
+	useEffect(() => monitor.setToken(page.token), [monitor, page.token]);
+	const state = useStore(monitor.store);
+	const conflict = state.conflict;
+	useEffect(() => {
+		if (!conflict) return;
+		const timer = setInterval(() => setTick((tick) => tick + 1), 15e3);
+		return () => clearInterval(timer);
+	}, [conflict]);
+	if (!conflict) return null;
+	const message = conflictMessage(conflict);
+	const text = t(message.key, {
+		name: conflict.name ?? "",
+		time: formatter.relative(conflict.at)
+	}, message.fallback);
+	const deleted = conflict.event === "deleted";
+	const empty = t("realtime.conflict.empty", {}, "Empty");
+	const close = (run) => {
+		setReviewing(false);
+		run();
+	};
+	const review = () => {
+		setReviewing((open) => !open);
+		if (!reviewing && state.fields === null) monitor.review();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "conflict-banner",
+		"data-source": conflict.source,
+		role: "status",
+		"aria-live": "polite",
+		className: "flex flex-col gap-3 rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 text-sm text-amber-950 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-100",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center gap-x-3 gap-y-2",
+			children: [
+				/* @__PURE__ */ jsx(TriangleAlertIcon, {
+					className: "size-4 shrink-0",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "min-w-0 flex-1 font-medium",
+					children: text
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: [
+						!deleted && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							size: "sm",
+							variant: "outline",
+							"aria-expanded": reviewing,
+							"aria-controls": "alfakit-conflict-review",
+							onClick: review,
+							children: t("realtime.conflict.review", {}, "Review changes")
+						}),
+						/* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							size: "sm",
+							variant: "outline",
+							onClick: () => close(() => monitor.reload()),
+							children: [/* @__PURE__ */ jsx(RefreshCwIcon, { "aria-hidden": "true" }), t("realtime.conflict.reload", {}, "Reload")]
+						}),
+						!deleted && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							size: "sm",
+							onClick: () => close(() => monitor.keepMine()),
+							children: t("realtime.conflict.keep_mine", {}, "Keep mine")
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							type: "button",
+							size: "icon-sm",
+							variant: "ghost",
+							"aria-label": t("realtime.conflict.dismiss", {}, "Dismiss"),
+							onClick: () => close(() => monitor.dismiss()),
+							children: /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
+						})
+					]
+				})
+			]
+		}), reviewing && /* @__PURE__ */ jsx("div", {
+			id: "alfakit-conflict-review",
+			"data-slot": "conflict-review",
+			className: "flex flex-col gap-2",
+			children: state.loading ? /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground",
+				children: t("realtime.conflict.loading", {}, "Loading changes…")
+			}) : state.failed ? /* @__PURE__ */ jsx("p", { children: t("realtime.conflict.failed", {}, "The changes could not be loaded.") }) : (state.fields ?? []).length === 0 ? /* @__PURE__ */ jsx("p", { children: t("realtime.conflict.no_changes", {}, "No field differs from what you loaded.") }) : /* @__PURE__ */ jsxs("table", {
+				className: "bg-background/60 text-foreground w-full overflow-hidden rounded-md text-start text-sm",
+				children: [
+					/* @__PURE__ */ jsx("caption", {
+						className: "sr-only",
+						children: t("realtime.conflict.caption", {}, "Fields changed since you opened the record")
+					}),
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+						className: "border-b",
+						children: [
+							/* @__PURE__ */ jsx("th", {
+								scope: "col",
+								className: "px-3 py-2 text-start font-medium",
+								children: t("realtime.conflict.field", {}, "Field")
+							}),
+							/* @__PURE__ */ jsx("th", {
+								scope: "col",
+								className: "px-3 py-2 text-start font-medium",
+								children: t("realtime.conflict.theirs", {}, "Saved")
+							}),
+							/* @__PURE__ */ jsx("th", {
+								scope: "col",
+								className: "px-3 py-2 text-start font-medium",
+								children: t("realtime.conflict.mine", {}, "Yours")
+							}),
+							/* @__PURE__ */ jsx("th", {
+								scope: "col",
+								className: "px-3 py-2",
+								children: /* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: t("realtime.conflict.actions", {}, "Actions")
+								})
+							})
+						]
+					}) }),
+					/* @__PURE__ */ jsx("tbody", { children: (state.fields ?? []).map((field) => /* @__PURE__ */ jsxs("tr", {
+						"data-conflicting": field.conflicting || void 0,
+						className: "border-b last:border-b-0",
+						children: [
+							/* @__PURE__ */ jsxs("th", {
+								scope: "row",
+								className: "px-3 py-2 text-start font-medium",
+								children: [field.label, field.conflicting && /* @__PURE__ */ jsx("span", {
+									className: "ms-2 rounded bg-amber-200 px-1.5 py-0.5 text-xs font-normal text-amber-950 dark:bg-amber-800 dark:text-amber-50",
+									children: t("realtime.conflict.both_changed", {}, "Changed by both")
+								})]
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "px-3 py-2 break-words",
+								children: field.theirs ?? empty
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "px-3 py-2 break-words",
+								children: field.mine ?? empty
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "px-3 py-2 text-end",
+								children: /* @__PURE__ */ jsx(Button, {
+									type: "button",
+									size: "xs",
+									variant: "outline",
+									"aria-label": t("realtime.conflict.use_theirs_label", { field: field.label }, "Use the saved value of :field"),
+									onClick: () => monitor.useTheirs(field.path),
+									children: t("realtime.conflict.use_theirs", {}, "Use saved value")
+								})
+							})
+						]
+					}, field.path)) })
+				]
+			})
+		})]
+	});
+}
+//#endregion
+export { ConflictBanner };
+
+//# sourceMappingURL=conflict-banner.js.map

package/dist/components/realtime/conflict-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conflict-banner.js","names":[],"sources":["../../../src/components/realtime/conflict-banner.tsx"],"sourcesContent":["import {\n  ConflictMonitor,\n  PresenceRoom,\n  conflictMessage,\n  findPageFormBlock,\n  type PageSchema,\n} from '@alfakit/core'\nimport { RefreshCwIcon, TriangleAlertIcon, XIcon } from 'lucide-react'\nimport { useEffect, useMemo, useState } from 'react'\nimport { useFormatter, usePanel, useT } from '../../context'\nimport { useStore } from '../../hooks/use-store'\nimport { Button } from '../ui/button'\n\n/**\n * Edit pages (`detectConflicts()`): a non-blocking banner when somebody else saved the\n * record (\"Dana saved changes 10 seconds ago\", over `Panel::realtime()`) or the server\n * refused a save, with review (the changed fields against your unsaved values), reload\n * and keep mine. Replace it with `components: { 'page:conflict-banner': … }`.\n */\nexport function ConflictBanner({ page }: { page: PageSchema }) {\n  const panel = usePanel()\n  const t = useT()\n  const formatter = useFormatter()\n  const version = page.conflicts?.version ?? ''\n  const channel = page.presence?.channel ?? null\n  const [reviewing, setReviewing] = useState(false)\n  const [, setTick] = useState(0)\n\n  const monitor = useMemo(\n    () =>\n      new ConflictMonitor({\n        version,\n        token: page.token,\n        endpoint: panel.endpoints.conflicts,\n        channel,\n        original: (findPageFormBlock(page)?.state as Record<string, unknown> | undefined) ?? {},\n        self: panel.user?.id ?? null,\n        resolveName: (id) =>\n          channel ? (PresenceRoom.find(channel)?.memberName(id) ?? null) : null,\n      }),\n    // A new version (after saving or reloading) starts over.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [version, channel],\n  )\n\n  useEffect(() => monitor.start(), [monitor])\n  useEffect(() => monitor.setToken(page.token), [monitor, page.token])\n\n  const state = useStore(monitor.store)\n  const conflict = state.conflict\n\n  // \"10 seconds ago\" keeps counting.\n  useEffect(() => {\n    if (!conflict) return\n\n    const timer = setInterval(() => setTick((tick) => tick + 1), 15_000)\n\n    return () => clearInterval(timer)\n  }, [conflict])\n\n  if (!conflict) return null\n\n  const message = conflictMessage(conflict)\n  const text = t(\n    message.key,\n    { name: conflict.name ?? '', time: formatter.relative(conflict.at) },\n    message.fallback,\n  )\n  const deleted = conflict.event === 'deleted'\n  const empty = t('realtime.conflict.empty', {}, 'Empty')\n\n  const close = (run: () => unknown) => {\n    setReviewing(false)\n    void run()\n  }\n\n  const review = () => {\n    setReviewing((open) => !open)\n\n    if (!reviewing && state.fields === null) void monitor.review()\n  }\n\n  return (\n    <div\n      data-slot=\"conflict-banner\"\n      data-source={conflict.source}\n      role=\"status\"\n      aria-live=\"polite\"\n      className=\"flex flex-col gap-3 rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 text-sm text-amber-950 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-100\"\n    >\n      <div className=\"flex flex-wrap items-center gap-x-3 gap-y-2\">\n        <TriangleAlertIcon className=\"size-4 shrink-0\" aria-hidden=\"true\" />\n        <p className=\"min-w-0 flex-1 font-medium\">{text}</p>\n        <div className=\"flex flex-wrap items-center gap-2\">\n          {!deleted && (\n            <Button\n              type=\"button\"\n              size=\"sm\"\n              variant=\"outline\"\n              aria-expanded={reviewing}\n              aria-controls=\"alfakit-conflict-review\"\n              onClick={review}\n            >\n              {t('realtime.conflict.review', {}, 'Review changes')}\n            </Button>\n          )}\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            variant=\"outline\"\n            onClick={() => close(() => monitor.reload())}\n          >\n            <RefreshCwIcon aria-hidden=\"true\" />\n            {t('realtime.conflict.reload', {}, 'Reload')}\n          </Button>\n          {!deleted && (\n            <Button type=\"button\" size=\"sm\" onClick={() => close(() => monitor.keepMine())}>\n              {t('realtime.conflict.keep_mine', {}, 'Keep mine')}\n            </Button>\n          )}\n          <Button\n            type=\"button\"\n            size=\"icon-sm\"\n            variant=\"ghost\"\n            aria-label={t('realtime.conflict.dismiss', {}, 'Dismiss')}\n            onClick={() => close(() => monitor.dismiss())}\n          >\n            <XIcon aria-hidden=\"true\" />\n          </Button>\n        </div>\n      </div>\n      {reviewing && (\n        <div\n          id=\"alfakit-conflict-review\"\n          data-slot=\"conflict-review\"\n          className=\"flex flex-col gap-2\"\n        >\n          {state.loading ? (\n            <p className=\"text-muted-foreground\">\n              {t('realtime.conflict.loading', {}, 'Loading changes…')}\n            </p>\n          ) : state.failed ? (\n            <p>{t('realtime.conflict.failed', {}, 'The changes could not be loaded.')}</p>\n          ) : (state.fields ?? []).length === 0 ? (\n            <p>{t('realtime.conflict.no_changes', {}, 'No field differs from what you loaded.')}</p>\n          ) : (\n            <table className=\"bg-background/60 text-foreground w-full overflow-hidden rounded-md text-start text-sm\">\n              <caption className=\"sr-only\">\n                {t('realtime.conflict.caption', {}, 'Fields changed since you opened the record')}\n              </caption>\n              <thead>\n                <tr className=\"border-b\">\n                  <th scope=\"col\" className=\"px-3 py-2 text-start font-medium\">\n                    {t('realtime.conflict.field', {}, 'Field')}\n                  </th>\n                  <th scope=\"col\" className=\"px-3 py-2 text-start font-medium\">\n                    {t('realtime.conflict.theirs', {}, 'Saved')}\n                  </th>\n                  <th scope=\"col\" className=\"px-3 py-2 text-start font-medium\">\n                    {t('realtime.conflict.mine', {}, 'Yours')}\n                  </th>\n                  <th scope=\"col\" className=\"px-3 py-2\">\n                    <span className=\"sr-only\">{t('realtime.conflict.actions', {}, 'Actions')}</span>\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                {(state.fields ?? []).map((field) => (\n                  <tr\n                    key={field.path}\n                    data-conflicting={field.conflicting || undefined}\n                    className=\"border-b last:border-b-0\"\n                  >\n                    <th scope=\"row\" className=\"px-3 py-2 text-start font-medium\">\n                      {field.label}\n                      {field.conflicting && (\n                        <span className=\"ms-2 rounded bg-amber-200 px-1.5 py-0.5 text-xs font-normal text-amber-950 dark:bg-amber-800 dark:text-amber-50\">\n                          {t('realtime.conflict.both_changed', {}, 'Changed by both')}\n                        </span>\n                      )}\n                    </th>\n                    <td className=\"px-3 py-2 break-words\">{field.theirs ?? empty}</td>\n                    <td className=\"px-3 py-2 break-words\">{field.mine ?? empty}</td>\n                    <td className=\"px-3 py-2 text-end\">\n                      <Button\n                        type=\"button\"\n                        size=\"xs\"\n                        variant=\"outline\"\n                        aria-label={t(\n                          'realtime.conflict.use_theirs_label',\n                          { field: field.label },\n                          'Use the saved value of :field',\n                        )}\n                        onClick={() => monitor.useTheirs(field.path)}\n                      >\n                        {t('realtime.conflict.use_theirs', {}, 'Use saved value')}\n                      </Button>\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/realtime/index.d.ts

@@ -0,0 +1,4 @@
+import { ConflictBanner } from "./conflict-banner.js";
+import { LiveRecordsPill, useLiveUpdates } from "./live-records-pill.js";
+import { RecordPresence } from "./record-presence.js";
+export { ConflictBanner, LiveRecordsPill, RecordPresence, useLiveUpdates };

package/dist/components/realtime/index.js

@@ -0,0 +1,4 @@
+import { ConflictBanner } from "./conflict-banner.js";
+import { RecordPresence } from "./record-presence.js";
+import { LiveRecordsPill, useLiveUpdates } from "./live-records-pill.js";
+export { ConflictBanner, LiveRecordsPill, RecordPresence, useLiveUpdates };

package/dist/components/realtime/live-records-pill.d.ts

@@ -0,0 +1,19 @@
+import { LiveUpdates, LiveUpdatesSchema, RecordKey } from "@alfakit/core";
+//#region src/components/realtime/live-records-pill.d.ts
+/**
+ * Follow `live()` updates of a table or widget: refresh it in place when its records
+ * change, polling instead without Echo. Returns the controller (its store counts created
+ * records for `<LiveRecordsPill>`), or null without `live()`.
+ */
+export declare function useLiveUpdates(live: LiveUpdatesSchema | undefined, target: string, options?: {
+  polling?: boolean;
+  records?: ReadonlyArray<{
+    key?: RecordKey;
+  }> | null;
+}): LiveUpdates | null;
+/** "3 new records — show": created records the table doesn't show yet. */
+export declare function LiveRecordsPill({ live }: {
+  live: LiveUpdates;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=live-records-pill.d.ts.map

package/dist/components/realtime/live-records-pill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"live-records-pill.d.ts","names":[],"sources":["../../../src/components/realtime/live-records-pill.tsx"],"mappings":";;;;;;;wBAYgB,eACd,MAAM,+BACN,gBACA;EAAW;EAAmB,UAAU;IAAgB,MAAM;;IAC7D;;wBAwBa,kBAAkB;EAAU,MAAM;oBAAa,IAAA"}

package/dist/components/realtime/live-records-pill.js

@@ -0,0 +1,57 @@
+import { useChoice, usePollComponent } from "../../context.js";
+import { Button } from "../ui/button.js";
+import { useStore } from "../../hooks/use-store.js";
+import { LiveUpdates, shownRecordKeys } from "@alfakit/core";
+import { useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpIcon } from "lucide-react";
+//#region src/components/realtime/live-records-pill.tsx
+/**
+* Follow `live()` updates of a table or widget: refresh it in place when its records
+* change, polling instead without Echo. Returns the controller (its store counts created
+* records for `<LiveRecordsPill>`), or null without `live()`.
+*/
+function useLiveUpdates(live, target, options = {}) {
+	const poll = usePollComponent();
+	const key = live ? JSON.stringify(live) : "";
+	const polling = options.polling;
+	const records = options.records;
+	const controller = useMemo(() => live ? new LiveUpdates({
+		live,
+		target,
+		polling,
+		poll
+	}) : null, [
+		key,
+		target,
+		polling,
+		poll
+	]);
+	useEffect(() => {
+		controller?.setShownKeys(records === void 0 ? null : shownRecordKeys(records));
+	}, [controller, records]);
+	useEffect(() => controller?.start(), [controller]);
+	return controller;
+}
+/** "3 new records — show": created records the table doesn't show yet. */
+function LiveRecordsPill({ live }) {
+	const choice = useChoice();
+	const { pending } = useStore(live.store);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "live-records",
+		"aria-live": "polite",
+		className: "flex justify-center",
+		children: pending > 0 && /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			size: "sm",
+			variant: "secondary",
+			className: "rounded-full shadow-sm",
+			onClick: () => void live.showPending(),
+			children: [/* @__PURE__ */ jsx(ArrowUpIcon, { "aria-hidden": "true" }), choice("realtime.new_records", pending, {}, "{1} :count new record — show|[2,*] :count new records — show")]
+		})
+	});
+}
+//#endregion
+export { LiveRecordsPill, useLiveUpdates };
+
+//# sourceMappingURL=live-records-pill.js.map

package/dist/components/realtime/live-records-pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"live-records-pill.js","names":[],"sources":["../../../src/components/realtime/live-records-pill.tsx"],"sourcesContent":["import { LiveUpdates, shownRecordKeys, type LiveUpdatesSchema, type RecordKey } from '@alfakit/core'\nimport { ArrowUpIcon } from 'lucide-react'\nimport { useEffect, useMemo } from 'react'\nimport { useChoice, usePollComponent } from '../../context'\nimport { useStore } from '../../hooks/use-store'\nimport { Button } from '../ui/button'\n\n/**\n * Follow `live()` updates of a table or widget: refresh it in place when its records\n * change, polling instead without Echo. Returns the controller (its store counts created\n * records for `<LiveRecordsPill>`), or null without `live()`.\n */\nexport function useLiveUpdates(\n  live: LiveUpdatesSchema | undefined,\n  target: string,\n  options: { polling?: boolean; records?: ReadonlyArray<{ key?: RecordKey }> | null } = {},\n): LiveUpdates | null {\n  const poll = usePollComponent()\n  const key = live ? JSON.stringify(live) : ''\n  const polling = options.polling\n  const records = options.records\n\n  const controller = useMemo(\n    () => (live ? new LiveUpdates({ live, target, polling, poll }) : null),\n    // `live` is compared by value (`key`): a reload brings a new object with the same settings.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [key, target, polling, poll],\n  )\n\n  // Updates of records on other pages don't refresh the table.\n  useEffect(() => {\n    controller?.setShownKeys(records === undefined ? null : shownRecordKeys(records))\n  }, [controller, records])\n\n  useEffect(() => controller?.start(), [controller])\n\n  return controller\n}\n\n/** \"3 new records — show\": created records the table doesn't show yet. */\nexport function LiveRecordsPill({ live }: { live: LiveUpdates }) {\n  const choice = useChoice()\n  const { pending } = useStore(live.store)\n\n  return (\n    <div data-slot=\"live-records\" aria-live=\"polite\" className=\"flex justify-center\">\n      {pending > 0 && (\n        <Button\n          type=\"button\"\n          size=\"sm\"\n          variant=\"secondary\"\n          className=\"rounded-full shadow-sm\"\n          onClick={() => void live.showPending()}\n        >\n          <ArrowUpIcon aria-hidden=\"true\" />\n          {choice(\n            'realtime.new_records',\n            pending,\n            {},\n            '{1} :count new record — show|[2,*] :count new records — show',\n          )}\n        </Button>\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAYA,SAAgB,eACd,MACA,QACA,UAAsF,CAAC,GACnE;CACpB,MAAM,OAAO,iBAAiB;CAC9B,MAAM,MAAM,OAAO,KAAK,UAAU,IAAI,IAAI;CAC1C,MAAM,UAAU,QAAQ;CACxB,MAAM,UAAU,QAAQ;CAExB,MAAM,aAAa,cACV,OAAO,IAAI,YAAY;EAAE;EAAM;EAAQ;EAAS;CAAK,CAAC,IAAI,MAGjE;EAAC;EAAK;EAAQ;EAAS;CAAI,CAC7B;CAGA,gBAAgB;EACd,YAAY,aAAa,YAAY,KAAA,IAAY,OAAO,gBAAgB,OAAO,CAAC;CAClF,GAAG,CAAC,YAAY,OAAO,CAAC;CAExB,gBAAgB,YAAY,MAAM,GAAG,CAAC,UAAU,CAAC;CAEjD,OAAO;AACT;;AAGA,SAAgB,gBAAgB,EAAE,QAA+B;CAC/D,MAAM,SAAS,UAAU;CACzB,MAAM,EAAE,YAAY,SAAS,KAAK,KAAK;CAEvC,OACE,oBAAC,OAAD;EAAK,aAAU;EAAe,aAAU;EAAS,WAAU;EACxD,UAAA,UAAU,KACT,qBAAC,QAAD;GACE,MAAK;GACL,MAAK;GACL,SAAQ;GACR,WAAU;GACV,eAAe,KAAK,KAAK,YAAY;GALvC,UAAA,CAOE,oBAAC,aAAD,EAAa,eAAY,OAAQ,CAAA,GAChC,OACC,wBACA,SACA,CAAC,GACD,8DACF,CACM;;CAEP,CAAA;AAET"}

package/dist/components/realtime/record-presence.d.ts

@@ -0,0 +1,12 @@
+import { PresenceSchema } from "@alfakit/core";
+//#region src/components/realtime/record-presence.d.ts
+/**
+ * Who else is on this record (`Panel::realtime()`): avatars of the other users on the
+ * record page, with a dot for those editing it. A labelled list with screen-reader text
+ * per user. Replace it with `components: { 'page:presence': … }`.
+ */
+export declare function RecordPresence({ presence }: {
+  presence: PresenceSchema;
+}): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=record-presence.d.ts.map

package/dist/components/realtime/record-presence.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-presence.d.ts","names":[],"sources":["../../../src/components/realtime/record-presence.tsx"],"mappings":";;;;;;;wBAiBgB,iBAAiB;EAAc,UAAU;oBAAgB,IAAA"}

package/dist/components/realtime/record-presence.js

@@ -0,0 +1,79 @@
+import { useChoice, usePanel, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { useStore } from "../../hooks/use-store.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
+import { PresenceRoom, presenceInitials, visiblePresenceMembers } from "@alfakit/core";
+import { useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/realtime/record-presence.tsx
+/**
+* Who else is on this record (`Panel::realtime()`): avatars of the other users on the
+* record page, with a dot for those editing it. A labelled list with screen-reader text
+* per user. Replace it with `components: { 'page:presence': … }`.
+*/
+function RecordPresence({ presence }) {
+	const panel = usePanel();
+	const t = useT();
+	const choice = useChoice();
+	const self = panel.user?.id ?? null;
+	const room = useMemo(() => new PresenceRoom({
+		channel: presence.channel,
+		state: presence.state,
+		self
+	}), [presence.channel, self]);
+	useEffect(() => room.start(), [room]);
+	useEffect(() => room.setState(presence.state), [room, presence.state]);
+	const { members } = useStore(room.store);
+	if (members.length === 0) return null;
+	const { shown, overflow } = visiblePresenceMembers(members);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "presence",
+		className: "flex items-center",
+		children: /* @__PURE__ */ jsxs("ul", {
+			"aria-label": t("realtime.presence.label", {}, "Also on this record"),
+			className: "flex items-center -space-x-2 rtl:space-x-reverse",
+			children: [shown.map((member) => {
+				const label = member.state === "editing" ? t("realtime.presence.editing", { name: member.name }, ":name is editing") : t("realtime.presence.viewing", { name: member.name }, ":name is viewing");
+				return /* @__PURE__ */ jsxs("li", {
+					"data-state": member.state,
+					title: label,
+					className: "relative inline-flex",
+					children: [
+						/* @__PURE__ */ jsxs(Avatar, {
+							className: cn("ring-background size-8 ring-2", member.state === "editing" && "ring-primary"),
+							children: [member.avatar && /* @__PURE__ */ jsx(AvatarImage, {
+								src: member.avatar,
+								alt: ""
+							}), /* @__PURE__ */ jsx(AvatarFallback, {
+								"aria-hidden": "true",
+								children: presenceInitials(member.name)
+							})]
+						}),
+						member.state === "editing" && /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "bg-primary ring-background absolute -end-0.5 -bottom-0.5 size-2.5 rounded-full ring-2"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: label
+						})
+					]
+				}, member.id);
+			}), overflow > 0 && /* @__PURE__ */ jsxs("li", {
+				className: "relative inline-flex",
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "bg-muted ring-background flex size-8 items-center justify-center rounded-full text-xs font-medium ring-2",
+					children: `+${overflow}`
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: choice("realtime.presence.more", overflow, {}, "{1} and :count other person|[2,*] and :count other people")
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { RecordPresence };
+
+//# sourceMappingURL=record-presence.js.map

package/dist/components/realtime/record-presence.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-presence.js","names":[],"sources":["../../../src/components/realtime/record-presence.tsx"],"sourcesContent":["import {\n  PresenceRoom,\n  presenceInitials,\n  visiblePresenceMembers,\n  type PresenceSchema,\n} from '@alfakit/core'\nimport { useEffect, useMemo } from 'react'\nimport { useChoice, usePanel, useT } from '../../context'\nimport { useStore } from '../../hooks/use-store'\nimport { cn } from '../../lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'\n\n/**\n * Who else is on this record (`Panel::realtime()`): avatars of the other users on the\n * record page, with a dot for those editing it. A labelled list with screen-reader text\n * per user. Replace it with `components: { 'page:presence': … }`.\n */\nexport function RecordPresence({ presence }: { presence: PresenceSchema }) {\n  const panel = usePanel()\n  const t = useT()\n  const choice = useChoice()\n  const self = panel.user?.id ?? null\n\n  const room = useMemo(\n    () => new PresenceRoom({ channel: presence.channel, state: presence.state, self }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [presence.channel, self],\n  )\n\n  useEffect(() => room.start(), [room])\n  useEffect(() => room.setState(presence.state), [room, presence.state])\n\n  const { members } = useStore(room.store)\n\n  if (members.length === 0) return null\n\n  const { shown, overflow } = visiblePresenceMembers(members)\n\n  return (\n    <div data-slot=\"presence\" className=\"flex items-center\">\n      <ul\n        aria-label={t('realtime.presence.label', {}, 'Also on this record')}\n        className=\"flex items-center -space-x-2 rtl:space-x-reverse\"\n      >\n        {shown.map((member) => {\n          const label =\n            member.state === 'editing'\n              ? t('realtime.presence.editing', { name: member.name }, ':name is editing')\n              : t('realtime.presence.viewing', { name: member.name }, ':name is viewing')\n\n          return (\n            <li\n              key={member.id}\n              data-state={member.state}\n              title={label}\n              className=\"relative inline-flex\"\n            >\n              <Avatar\n                className={cn(\n                  'ring-background size-8 ring-2',\n                  member.state === 'editing' && 'ring-primary',\n                )}\n              >\n                {member.avatar && <AvatarImage src={member.avatar} alt=\"\" />}\n                <AvatarFallback aria-hidden=\"true\">{presenceInitials(member.name)}</AvatarFallback>\n              </Avatar>\n              {member.state === 'editing' && (\n                <span\n                  aria-hidden=\"true\"\n                  className=\"bg-primary ring-background absolute -end-0.5 -bottom-0.5 size-2.5 rounded-full ring-2\"\n                />\n              )}\n              <span className=\"sr-only\">{label}</span>\n            </li>\n          )\n        })}\n        {overflow > 0 && (\n          <li className=\"relative inline-flex\">\n            <span\n              aria-hidden=\"true\"\n              className=\"bg-muted ring-background flex size-8 items-center justify-center rounded-full text-xs font-medium ring-2\"\n            >\n              {`+${overflow}`}\n            </span>\n            <span className=\"sr-only\">\n              {choice(\n                'realtime.presence.more',\n                overflow,\n                {},\n                '{1} and :count other person|[2,*] and :count other people',\n              )}\n            </span>\n          </li>\n        )}\n      </ul>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAiBA,SAAgB,eAAe,EAAE,YAA0C;CACzE,MAAM,QAAQ,SAAS;CACvB,MAAM,IAAI,KAAK;CACf,MAAM,SAAS,UAAU;CACzB,MAAM,OAAO,MAAM,MAAM,MAAM;CAE/B,MAAM,OAAO,cACL,IAAI,aAAa;EAAE,SAAS,SAAS;EAAS,OAAO,SAAS;EAAO;CAAK,CAAC,GAEjF,CAAC,SAAS,SAAS,IAAI,CACzB;CAEA,gBAAgB,KAAK,MAAM,GAAG,CAAC,IAAI,CAAC;CACpC,gBAAgB,KAAK,SAAS,SAAS,KAAK,GAAG,CAAC,MAAM,SAAS,KAAK,CAAC;CAErE,MAAM,EAAE,YAAY,SAAS,KAAK,KAAK;CAEvC,IAAI,QAAQ,WAAW,GAAG,OAAO;CAEjC,MAAM,EAAE,OAAO,aAAa,uBAAuB,OAAO;CAE1D,OACE,oBAAC,OAAD;EAAK,aAAU;EAAW,WAAU;EAClC,UAAA,qBAAC,MAAD;GACE,cAAY,EAAE,2BAA2B,CAAC,GAAG,qBAAqB;GAClE,WAAU;GAFZ,UAAA,CAIG,MAAM,KAAK,WAAW;IACrB,MAAM,QACJ,OAAO,UAAU,YACb,EAAE,6BAA6B,EAAE,MAAM,OAAO,KAAK,GAAG,kBAAkB,IACxE,EAAE,6BAA6B,EAAE,MAAM,OAAO,KAAK,GAAG,kBAAkB;IAE9E,OACE,qBAAC,MAAD;KAEE,cAAY,OAAO;KACnB,OAAO;KACP,WAAU;KAJZ,UAAA;MAME,qBAAC,QAAD;OACE,WAAW,GACT,iCACA,OAAO,UAAU,aAAa,cAChC;OAJF,UAAA,CAMG,OAAO,UAAU,oBAAC,aAAD;QAAa,KAAK,OAAO;QAAQ,KAAI;OAAI,CAAA,GAC3D,oBAAC,gBAAD;QAAgB,eAAY;QAAQ,UAAA,iBAAiB,OAAO,IAAI;OAAkB,CAAA,CAC5E;;MACP,OAAO,UAAU,aAChB,oBAAC,QAAD;OACE,eAAY;OACZ,WAAU;MACX,CAAA;MAEH,oBAAC,QAAD;OAAM,WAAU;OAAW,UAAA;MAAY,CAAA;KACrC;IArBG,GAAA,OAAO,EAqBV;GAER,CAAC,GACA,WAAW,KACV,qBAAC,MAAD;IAAI,WAAU;IAAd,UAAA,CACE,oBAAC,QAAD;KACE,eAAY;KACZ,WAAU;KAET,UAAA,IAAI;IACD,CAAA,GACN,oBAAC,QAAD;KAAM,WAAU;KACb,UAAA,OACC,0BACA,UACA,CAAC,GACD,2DACF;IACI,CAAA,CACJ;GAEJ,CAAA,CAAA;;CACD,CAAA;AAET"}

package/dist/components/schema/content-slot.js

@@ -0,0 +1,49 @@
+import { cn } from "../../lib/utils.js";
+import { ActionList } from "../actions/action-list.js";
+import { useFieldActionContext } from "./field-actions.js";
+import { RenderComponent } from "./schema-renderer.js";
+import { slotAlignmentClass } from "@alfakit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/schema/content-slot.tsx
+/**
+* One content slot of a field or entry (`aboveLabel()`, `belowContent()`…): a small row
+* of schema components and actions. Actions run as the owner's field actions.
+*/
+function ContentSlot(props) {
+	return props.component.slots?.[props.name]?.items.length ? /* @__PURE__ */ jsx(ContentSlotRow, { ...props }) : null;
+}
+function ContentSlotRow({ component, name, className }) {
+	const slot = component.slots[name];
+	const context = useFieldActionContext(component);
+	const nodes = [];
+	let actions = [];
+	const flush = () => {
+		if (actions.length === 0) return;
+		nodes.push(/* @__PURE__ */ jsx(ActionList, {
+			actions,
+			context,
+			size: "xs",
+			className: "gap-1"
+		}, `actions-${nodes.length}`));
+		actions = [];
+	};
+	for (const item of slot.items) {
+		if (item.action) {
+			actions.push(item.action);
+			continue;
+		}
+		flush();
+		nodes.push(/* @__PURE__ */ jsx(RenderComponent, { component: item.component }, item.component.key));
+	}
+	flush();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-content-slot",
+		"data-content-slot": name,
+		className: cn("flex min-w-0 flex-wrap items-center gap-2 text-sm", slotAlignmentClass(slot.alignment), className),
+		children: nodes
+	});
+}
+//#endregion
+export { ContentSlot };
+
+//# sourceMappingURL=content-slot.js.map

package/dist/components/schema/content-slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-slot.js","names":[],"sources":["../../../src/components/schema/content-slot.tsx"],"sourcesContent":["import type { AnyActionSchema, ContentSlotName, ContentSlots, FieldActions } from '@alfakit/core'\nimport { slotAlignmentClass } from '@alfakit/core'\nimport type { ReactNode } from 'react'\nimport { cn } from '../../lib/utils'\nimport { ActionList } from '../actions/action-list'\nimport { useFieldActionContext } from './field-actions'\nimport { RenderComponent } from './schema-renderer'\n\ntype SlotOwner = ContentSlots & FieldActions & { key: string }\n\n/**\n * One content slot of a field or entry (`aboveLabel()`, `belowContent()`…): a small row\n * of schema components and actions. Actions run as the owner's field actions.\n */\nexport function ContentSlot(props: {\n  component: SlotOwner\n  name: ContentSlotName\n  className?: string\n}) {\n  // Most fields have no slots: skip the hooks of the row entirely.\n  return props.component.slots?.[props.name]?.items.length ? <ContentSlotRow {...props} /> : null\n}\n\nfunction ContentSlotRow({\n  component,\n  name,\n  className,\n}: {\n  component: SlotOwner\n  name: ContentSlotName\n  className?: string\n}) {\n  const slot = component.slots![name]!\n  const context = useFieldActionContext(component)\n\n  // Consecutive actions share one action list, so they sit together like hint actions.\n  const nodes: ReactNode[] = []\n  let actions: AnyActionSchema[] = []\n\n  const flush = () => {\n    if (actions.length === 0) return\n\n    nodes.push(\n      <ActionList\n        key={`actions-${nodes.length}`}\n        actions={actions}\n        context={context}\n        size=\"xs\"\n        className=\"gap-1\"\n      />,\n    )\n    actions = []\n  }\n\n  for (const item of slot.items) {\n    if (item.action) {\n      actions.push(item.action)\n\n      continue\n    }\n\n    flush()\n    nodes.push(<RenderComponent key={item.component.key} component={item.component} />)\n  }\n\n  flush()\n\n  return (\n    <div\n      data-slot=\"field-content-slot\"\n      data-content-slot={name}\n      className={cn(\n        'flex min-w-0 flex-wrap items-center gap-2 text-sm',\n        slotAlignmentClass(slot.alignment),\n        className,\n      )}\n    >\n      {nodes}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAcA,SAAgB,YAAY,OAIzB;CAED,OAAO,MAAM,UAAU,QAAQ,MAAM,KAAK,EAAE,MAAM,SAAS,oBAAC,gBAAD,EAAgB,GAAI,MAAQ,CAAA,IAAI;AAC7F;AAEA,SAAS,eAAe,EACtB,WACA,MACA,aAKC;CACD,MAAM,OAAO,UAAU,MAAO;CAC9B,MAAM,UAAU,sBAAsB,SAAS;CAG/C,MAAM,QAAqB,CAAC;CAC5B,IAAI,UAA6B,CAAC;CAElC,MAAM,cAAc;EAClB,IAAI,QAAQ,WAAW,GAAG;EAE1B,MAAM,KACJ,oBAAC,YAAD;GAEW;GACA;GACT,MAAK;GACL,WAAU;EACX,GALM,WAAW,MAAM,QAKvB,CACH;EACA,UAAU,CAAC;CACb;CAEA,KAAK,MAAM,QAAQ,KAAK,OAAO;EAC7B,IAAI,KAAK,QAAQ;GACf,QAAQ,KAAK,KAAK,MAAM;GAExB;EACF;EAEA,MAAM;EACN,MAAM,KAAK,oBAAC,iBAAD,EAA0C,WAAW,KAAK,UAAY,GAAhD,KAAK,UAAU,GAAiC,CAAC;CACpF;CAEA,MAAM;CAEN,OACE,oBAAC,OAAD;EACE,aAAU;EACV,qBAAmB;EACnB,WAAW,GACT,qDACA,mBAAmB,KAAK,SAAS,GACjC,SACF;EAEC,UAAA;CACE,CAAA;AAET"}

package/dist/components/schema/field-actions.js

@@ -0,0 +1,72 @@
+import { usePageActionContext } from "../actions/action-context.js";
+import { ActionList } from "../actions/action-list.js";
+import { useOptionalFormStore } from "../form/form-context.js";
+import { fieldActionContext } from "@alfakit/core";
+import { useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/schema/field-actions.tsx
+/**
+* The action context of a field or entry's own actions (`field:{schema}::{key}`): they
+* run through the action endpoint with the form's state, and the response updates the
+* form in place.
+*/
+function useFieldActionContext(component) {
+	const form = useOptionalFormStore();
+	const page = usePageActionContext();
+	return useMemo(() => fieldActionContext({
+		token: page.token,
+		form,
+		key: component.key
+	}), [
+		page.token,
+		form,
+		component.key
+	]);
+}
+/** Hint actions, next to the label. */
+function FieldHintActions({ component }) {
+	const context = useFieldActionContext(component);
+	if (!component.hintActions?.length) return null;
+	return /* @__PURE__ */ jsx(ActionList, {
+		actions: component.hintActions,
+		context,
+		size: "xs",
+		className: "gap-1"
+	});
+}
+function AffixActionList({ actions, context }) {
+	return /* @__PURE__ */ jsx(ActionList, {
+		actions,
+		context,
+		className: "shrink-0 flex-nowrap gap-1"
+	});
+}
+/** Prefix and suffix actions on either side of the control. */
+function FieldAffixActions({ component, children }) {
+	const context = useFieldActionContext(component);
+	const prefix = component.prefixActions ?? [];
+	const suffix = component.suffixActions ?? [];
+	if (prefix.length === 0 && suffix.length === 0) return /* @__PURE__ */ jsx(Fragment$1, { children });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "field-affix-actions",
+		className: "flex items-start gap-2",
+		children: [
+			prefix.length > 0 && /* @__PURE__ */ jsx(AffixActionList, {
+				actions: prefix,
+				context
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1",
+				children
+			}),
+			suffix.length > 0 && /* @__PURE__ */ jsx(AffixActionList, {
+				actions: suffix,
+				context
+			})
+		]
+	});
+}
+//#endregion
+export { FieldAffixActions, FieldHintActions, useFieldActionContext };
+
+//# sourceMappingURL=field-actions.js.map

package/dist/components/schema/field-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-actions.js","names":[],"sources":["../../../src/components/schema/field-actions.tsx"],"sourcesContent":["import type { ActionContext, ActionSchema, FieldActions } from '@alfakit/core'\nimport { fieldActionContext } from '@alfakit/core'\nimport { useMemo, type ReactNode } from 'react'\nimport { usePageActionContext } from '../actions/action-context'\nimport { ActionList } from '../actions/action-list'\nimport { useOptionalFormStore } from '../form/form-context'\n\n/**\n * The action context of a field or entry's own actions (`field:{schema}::{key}`): they\n * run through the action endpoint with the form's state, and the response updates the\n * form in place.\n */\nexport function useFieldActionContext(component: { key: string }): ActionContext {\n  const form = useOptionalFormStore()\n  const page = usePageActionContext()\n\n  return useMemo(\n    () => fieldActionContext({ token: page.token, form, key: component.key }),\n    [page.token, form, component.key],\n  )\n}\n\n/** Hint actions, next to the label. */\nexport function FieldHintActions({ component }: { component: FieldActions & { key: string } }) {\n  const context = useFieldActionContext(component)\n\n  if (!component.hintActions?.length) return null\n\n  return (\n    <ActionList actions={component.hintActions} context={context} size=\"xs\" className=\"gap-1\" />\n  )\n}\n\nfunction AffixActionList({\n  actions,\n  context,\n}: {\n  actions: ActionSchema[]\n  context: ActionContext\n}) {\n  return <ActionList actions={actions} context={context} className=\"shrink-0 flex-nowrap gap-1\" />\n}\n\n/** Prefix and suffix actions on either side of the control. */\nexport function FieldAffixActions({\n  component,\n  children,\n}: {\n  component: FieldActions & { key: string }\n  children: ReactNode\n}) {\n  const context = useFieldActionContext(component)\n  const prefix = component.prefixActions ?? []\n  const suffix = component.suffixActions ?? []\n\n  if (prefix.length === 0 && suffix.length === 0) {\n    return <>{children}</>\n  }\n\n  return (\n    <div data-slot=\"field-affix-actions\" className=\"flex items-start gap-2\">\n      {prefix.length > 0 && <AffixActionList actions={prefix} context={context} />}\n      <div className=\"min-w-0 flex-1\">{children}</div>\n      {suffix.length > 0 && <AffixActionList actions={suffix} context={context} />}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAYA,SAAgB,sBAAsB,WAA2C;CAC/E,MAAM,OAAO,qBAAqB;CAClC,MAAM,OAAO,qBAAqB;CAElC,OAAO,cACC,mBAAmB;EAAE,OAAO,KAAK;EAAO;EAAM,KAAK,UAAU;CAAI,CAAC,GACxE;EAAC,KAAK;EAAO;EAAM,UAAU;CAAG,CAClC;AACF;;AAGA,SAAgB,iBAAiB,EAAE,aAA4D;CAC7F,MAAM,UAAU,sBAAsB,SAAS;CAE/C,IAAI,CAAC,UAAU,aAAa,QAAQ,OAAO;CAE3C,OACE,oBAAC,YAAD;EAAY,SAAS,UAAU;EAAsB;EAAS,MAAK;EAAK,WAAU;CAAS,CAAA;AAE/F;AAEA,SAAS,gBAAgB,EACvB,SACA,WAIC;CACD,OAAO,oBAAC,YAAD;EAAqB;EAAkB;EAAS,WAAU;CAA8B,CAAA;AACjG;;AAGA,SAAgB,kBAAkB,EAChC,WACA,YAIC;CACD,MAAM,UAAU,sBAAsB,SAAS;CAC/C,MAAM,SAAS,UAAU,iBAAiB,CAAC;CAC3C,MAAM,SAAS,UAAU,iBAAiB,CAAC;CAE3C,IAAI,OAAO,WAAW,KAAK,OAAO,WAAW,GAC3C,OAAO,oBAAA,YAAA,EAAG,SAAW,CAAA;CAGvB,OACE,qBAAC,OAAD;EAAK,aAAU;EAAsB,WAAU;EAA/C,UAAA;GACG,OAAO,SAAS,KAAK,oBAAC,iBAAD;IAAiB,SAAS;IAAiB;GAAU,CAAA;GAC3E,oBAAC,OAAD;IAAK,WAAU;IAAkB;GAAc,CAAA;GAC9C,OAAO,SAAS,KAAK,oBAAC,iBAAD;IAAiB,SAAS;IAAiB;GAAU,CAAA;EACxE;;AAET"}

package/dist/components/schema/field-wrapper.d.ts

@@ -0,0 +1,20 @@
+import { BaseField } from "@alfakit/core";
+import { ReactNode } from "react";
+//#region src/components/schema/field-wrapper.d.ts
+export interface FieldWrapperProps {
+  field: BaseField;
+  htmlFor: string;
+  error?: string;
+  children: ReactNode;
+  /** Render the label after the control (checkbox, toggle). */
+  inline?: boolean;
+  className?: string;
+  /** Suppress the label (the control renders its own). */
+  hideLabel?: boolean;
+}
+/**
+ * Label, hint, content slots, helper text and validation error around a form control.
+ */
+export declare function FieldWrapper({ field, htmlFor, error, children, inline, className, hideLabel }: FieldWrapperProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=field-wrapper.d.ts.map

package/dist/components/schema/field-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-wrapper.d.ts","names":[],"sources":["../../../src/components/schema/field-wrapper.tsx"],"mappings":";;;iBAYiB;EACf,OAAO;EACP;EACA;EACA,UAAU;;EAEV;EACA;;EAEA;;;;;wBAMc,eACd,OACA,SACA,OACA,UACA,QACA,WACA,aACC,oCAAiB,IAAA"}