@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/fields/builder.js

@@ -0,0 +1,351 @@
+import { useActionRunner, useFormatter, useOptionalRegistry, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../lib/icons.js";
+import { Button } from "../ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { useField, useOptionalFormStore } from "../form/form-context.js";
+import { useScrollToErroredItem, useVirtualList } from "../../hooks/use-virtual-list.js";
+import { DeferredSchema } from "../layout/deferred.js";
+import { useFieldActionContext } from "../schema/field-actions.js";
+import { SchemaRenderer } from "../schema/schema-renderer.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { Collapsible, CollapsibleContent } from "../ui/collapsible.js";
+import { BuilderBlockPicker, BuilderBlockPickerPanel } from "./builder-picker.js";
+import { AddActionRow, CollapseAllActions, ItemHeaderActions, useItemActionFallbacks, useItemActions, useItemMoves, useRunItemAction } from "./item-actions.js";
+import { VIRTUAL_ESTIMATES, builderItemLabel, builderItemSchema, builderItems, canAddBuilderBlock, cloneIndexedState, cloneRepeaterItem, fieldIds, insertBuilderItem, isDeferredPlaceholder, itemActionContext, moveIndexedState, moveRepeaterItem, removeIndexedState, removeRepeaterItem, reorderedItemKeys, virtualizeOptions } from "@alfakit/core";
+import { createElement, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EllipsisIcon, PencilIcon } from "lucide-react";
+//#region src/components/fields/builder.tsx
+/**
+* A list of blocks, each with its own schema. Items use the server's per-item schema
+* when it describes the same block, else the block's template (fresh, moved or cloned
+* items the server has not seen yet).
+*/
+/**
+* `deferLoading()`: a skeleton until the field scrolls into view, then the field with its
+* items (loaded from the server).
+*/
+function BuilderField({ component }) {
+	if (!isDeferredPlaceholder(component)) return /* @__PURE__ */ jsx(BuilderFieldContent, { component });
+	return /* @__PURE__ */ jsx(DeferredSchema, {
+		component,
+		children: (loaded) => /* @__PURE__ */ jsx(BuilderFieldContent, { component: loaded })
+	});
+}
+function BuilderFieldContent({ component }) {
+	const t = useT();
+	const formatter = useFormatter();
+	const registry = useOptionalRegistry();
+	const form = useOptionalFormStore();
+	const { value, setValue, error, id, disabled, readOnly, aria } = useField(component);
+	const locked = disabled || readOnly;
+	const items = builderItems(value);
+	const [collapsed, setCollapsed] = useState({});
+	const [editing, setEditing] = useState({});
+	const [dragIndex, setDragIndex] = useState(null);
+	const context = useFieldActionContext(component);
+	const runner = useActionRunner();
+	const runItemAction = useRunItemAction(context);
+	const fallbacks = useItemActionFallbacks(component.addActionLabel);
+	const resolve = useItemActions(component, fallbacks);
+	const virtual = useVirtualList(items.length, virtualizeOptions(component.virtualize, VIRTUAL_ESTIMATES.item, 12));
+	const { range, indexes, style, attach, item: attachItem } = virtual;
+	useScrollToErroredItem(virtual.list, range.active, component.statePath);
+	const update = (next) => setValue(next);
+	const moveItem = (from, to) => {
+		update(moveRepeaterItem(items, from, to));
+		setCollapsed((state) => moveIndexedState(state, from, to));
+		setEditing((state) => moveIndexedState(state, from, to));
+	};
+	const removeItem = (index) => {
+		update(removeRepeaterItem(items, index));
+		setCollapsed((state) => removeIndexedState(state, index));
+		setEditing((state) => removeIndexedState(state, index));
+	};
+	const cloneItem = (index) => {
+		update(cloneRepeaterItem(items, index));
+		setCollapsed((state) => cloneIndexedState(state, index));
+		setEditing((state) => cloneIndexedState(state, index));
+	};
+	const addBlock = (block) => runItemAction(resolve("add"), { block: block.name }, () => update(insertBuilderItem(items, block)));
+	const { moveWithButton, region: moveRegion, containerRef: moveContainerRef } = useItemMoves(value, moveItem, (index) => builderItemLabel(component, items, index), items.length);
+	const dropItem = (from, to) => runItemAction(resolve("reorder"), { items: reorderedItemKeys(items.length, from, to) }, () => moveItem(from, to));
+	const toggleEditing = (index) => {
+		const open = !editing[index];
+		setEditing((state) => ({
+			...state,
+			[index]: open
+		}));
+		if (!open) form?.refresh(component.statePath);
+	};
+	const blockOf = (type) => component.blocks.find((block) => block.name === type);
+	const underMax = component.maxItems == null || items.length < component.maxItems;
+	const canAdd = component.addable && !locked && underMax;
+	const canDelete = component.deletable && !locked && (component.minItems == null || items.length > component.minItems);
+	const draggable = component.reorderable && component.reorderableWithDragAndDrop !== false && !locked && resolve("reorder") !== null;
+	const buttons = component.reorderable && component.reorderableWithButtons !== false && !locked;
+	const addAction = resolve("add");
+	const showEmptyPicker = canAdd && addAction !== null && !addAction.disabled && component.blocks.length > 0;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: moveContainerRef,
+			className: "flex flex-col gap-3",
+			"data-slot": "builder",
+			children: [
+				moveRegion,
+				items.length === 0 && (showEmptyPicker ? /* @__PURE__ */ jsxs("div", {
+					"data-slot": "builder-empty",
+					className: "bg-muted/30 flex flex-col gap-3 rounded-lg border border-dashed p-3 sm:p-4",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "px-1",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "text-sm font-medium",
+							children: t("builder.empty_heading", {}, "Add your first block")
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground text-sm",
+							children: t("builder.empty_description", {}, "Pick one to start. You can add more, reorder and remove them at any time.")
+						})]
+					}), /* @__PURE__ */ jsx(BuilderBlockPickerPanel, {
+						component,
+						items,
+						onPick: addBlock,
+						className: "bg-card max-h-[28rem] rounded-md border"
+					})]
+				}) : /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground rounded-lg border border-dashed p-4 text-center text-sm",
+					children: t("builder.empty", {}, "No blocks yet.")
+				})),
+				component.collapsible && items.length > 0 && /* @__PURE__ */ jsx(CollapseAllActions, {
+					context,
+					resolve: (name) => resolve(name),
+					onCollapseAll: () => setCollapsed(Object.fromEntries(items.map((_, index) => [index, true]))),
+					onExpandAll: () => setCollapsed(Object.fromEntries(items.map((_, index) => [index, false])))
+				}),
+				/* @__PURE__ */ jsx("ul", {
+					id,
+					"aria-labelledby": component.label ? fieldIds(id).label : void 0,
+					"aria-describedby": aria["aria-describedby"],
+					ref: attach,
+					style,
+					className: cn("grid gap-3", items.length === 0 && "hidden"),
+					children: indexes.map((index) => {
+						const item = items[index];
+						const block = blockOf(item.type);
+						const isCollapsed = collapsed[index] ?? component.collapsed ?? false;
+						const label = component.blockLabels ? builderItemLabel(component, items, index) : null;
+						const icon = block?.icon ?? component.items[index]?.icon;
+						const server = component.items[index];
+						const serverItem = server?.type === item.type ? server : void 0;
+						const previewName = serverItem?.previewComponent ?? block?.previewComponent;
+						const Preview = previewName ? registry?.resolve(`builder-preview:${previewName}`) : void 0;
+						const hasPreview = component.blockPreviews === true && (Preview !== void 0 || Boolean(serverItem?.preview));
+						const showPreview = hasPreview && !editing[index];
+						const summary = serverItem?.summary;
+						const menu = Boolean(component.blockActionsMenu) && !locked;
+						const canClone = Boolean(component.cloneable) && canAdd && block !== void 0 && canAddBuilderBlock(component, block, items);
+						const openEditor = () => {
+							if (!locked) toggleEditing(index);
+						};
+						return /* @__PURE__ */ jsx("li", {
+							ref: attachItem,
+							"data-index": index,
+							"aria-setsize": range.active ? items.length : void 0,
+							"aria-posinset": range.active ? index + 1 : void 0,
+							"data-block": item.type,
+							draggable,
+							onDragStart: () => setDragIndex(index),
+							onDragOver: (event) => draggable && event.preventDefault(),
+							onDrop: () => {
+								if (dragIndex !== null && dragIndex !== index) dropItem(dragIndex, index);
+								setDragIndex(null);
+							},
+							onDragEnd: () => setDragIndex(null),
+							className: cn("bg-card min-w-0 rounded-lg border shadow-xs", dragIndex === index && "opacity-50"),
+							children: /* @__PURE__ */ jsxs(Collapsible, {
+								open: !isCollapsed,
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "flex flex-wrap items-center gap-1 border-b px-2 py-1.5",
+									"data-slot": "item-header",
+									children: [
+										draggable && /* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground cursor-grab",
+											title: resolve("reorder")?.label ?? void 0,
+											"aria-hidden": "true",
+											children: /* @__PURE__ */ jsx(Icon, { name: resolve("reorder")?.icon ?? "grip-vertical" })
+										}),
+										component.blockIcons && icon && /* @__PURE__ */ jsx(Icon, {
+											name: icon,
+											className: "text-muted-foreground size-4"
+										}),
+										component.blockNumbers && /* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground text-xs tabular-nums",
+											children: formatter.number(index + 1)
+										}),
+										/* @__PURE__ */ jsxs("span", {
+											className: "flex min-w-0 flex-1 items-baseline gap-2",
+											children: [label && /* @__PURE__ */ jsx("span", {
+												dir: "auto",
+												className: "min-w-0 shrink-0 truncate text-sm font-medium sm:max-w-[60%]",
+												children: label
+											}), summary && /* @__PURE__ */ jsx("span", {
+												dir: "auto",
+												className: "text-muted-foreground min-w-0 truncate text-sm",
+												"data-slot": "builder-item-summary",
+												children: summary
+											})]
+										}),
+										/* @__PURE__ */ jsxs(ItemHeaderActions, {
+											context,
+											itemKey: String(index),
+											index,
+											count: items.length,
+											resolve: (name) => resolve(name, serverItem),
+											extraActions: menu || locked ? void 0 : serverItem?.actions,
+											buttons: buttons && !menu,
+											canClone: canClone && !menu,
+											canDelete: canDelete && !menu,
+											collapsible: Boolean(component.collapsible),
+											collapsed: isCollapsed,
+											onMove: moveWithButton,
+											onClone: () => cloneItem(index),
+											onDelete: () => removeItem(index),
+											onToggle: () => setCollapsed((state) => ({
+												...state,
+												[index]: !isCollapsed
+											})),
+											children: [hasPreview && !locked && /* @__PURE__ */ jsx(Button, {
+												type: "button",
+												variant: "ghost",
+												size: "icon-xs",
+												"aria-label": t("builder.edit_block", {}, "Edit block"),
+												"aria-pressed": Boolean(editing[index]),
+												onClick: () => toggleEditing(index),
+												children: /* @__PURE__ */ jsx(Icon, {
+													name: "alfakit::forms.components.builder.actions.edit",
+													fallback: PencilIcon
+												})
+											}), menu && /* @__PURE__ */ jsx(BlockActionsMenu, {
+												label: label ?? "",
+												resolve: (name) => resolve(name, serverItem),
+												canMoveUp: buttons && index > 0,
+												canMoveDown: buttons && index < items.length - 1,
+												canClone,
+												canDelete,
+												extraActions: locked ? void 0 : serverItem?.actions,
+												onAction: (name, onClient) => runItemAction(resolve(name, serverItem), { item: String(index) }, onClient),
+												onExtraAction: (action) => void runner.trigger(action, itemActionContext(context, { item: String(index) })),
+												onMove: (to) => moveWithButton(index, to),
+												index,
+												onClone: () => cloneItem(index),
+												onDelete: () => removeItem(index)
+											})]
+										})
+									]
+								}), /* @__PURE__ */ jsx(CollapsibleContent, { children: showPreview ? /* @__PURE__ */ jsx("div", {
+									"data-slot": "builder-preview",
+									className: cn("p-4", !component.interactivePreviews && !locked && "cursor-pointer"),
+									...component.interactivePreviews || locked ? {} : {
+										role: "button",
+										tabIndex: 0,
+										"aria-label": t("builder.edit_block", {}, "Edit block"),
+										onClick: openEditor,
+										onKeyDown: (event) => {
+											if (event.key === "Enter" || event.key === " ") {
+												event.preventDefault();
+												openEditor();
+											}
+										}
+									},
+									children: /* @__PURE__ */ jsx("div", {
+										className: cn(!component.interactivePreviews && "pointer-events-none"),
+										children: Preview ? createElement(Preview, {
+											data: item.data,
+											block: item.type,
+											index
+										}) : /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: serverItem?.preview ?? "" } })
+									})
+								}) : /* @__PURE__ */ jsx("div", {
+									className: "p-4",
+									children: /* @__PURE__ */ jsx(SchemaRenderer, {
+										components: builderItemSchema(component, items, index),
+										columns: block?.columns ?? component.items[index]?.columns ?? { default: 1 }
+									})
+								}) })]
+							})
+						}, index);
+					})
+				}),
+				canAdd && addAction && component.blocks.length > 0 && items.length > 0 && /* @__PURE__ */ jsx(AddActionRow, {
+					alignment: component.addActionAlignment,
+					children: /* @__PURE__ */ jsx(BuilderBlockPicker, {
+						component,
+						items,
+						onPick: addBlock,
+						trigger: /* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							variant: "outline",
+							size: "sm",
+							disabled: addAction.disabled,
+							"data-slot": "builder-add",
+							children: [addAction.icon && /* @__PURE__ */ jsx(Icon, { name: addAction.icon }), addAction.label]
+						})
+					})
+				})
+			]
+		})
+	});
+}
+/**
+* `blockActionsMenu()`: an item's actions in one compact menu (move up / down, duplicate,
+* extra item actions, delete). Built-in actions run in the browser unless customised.
+*/
+function BlockActionsMenu({ label, resolve, canMoveUp, canMoveDown, canClone, canDelete, extraActions, index, onAction, onExtraAction, onMove, onClone, onDelete }) {
+	const t = useT();
+	const entry = (name, enabled, onClient, destructive = false) => {
+		const action = resolve(name);
+		if (!action || !enabled) return null;
+		return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			variant: destructive ? "destructive" : "default",
+			disabled: action.disabled,
+			onSelect: () => onAction(name, onClient),
+			children: [action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon }), name === "clone" ? t("builder.duplicate_block", {}, "Duplicate") : action.label]
+		}, name);
+	};
+	const visibleExtras = extraActions ?? [];
+	const hasMain = canMoveUp || canMoveDown || canClone || visibleExtras.length > 0;
+	if (!hasMain && !canDelete) return null;
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "icon-xs",
+			"data-slot": "builder-item-menu",
+			"aria-label": t("builder.block_actions", { block: label }, "Actions for :block"),
+			children: /* @__PURE__ */ jsx(EllipsisIcon, { "aria-hidden": "true" })
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		align: "end",
+		className: "min-w-44",
+		children: [
+			entry("moveUp", canMoveUp, () => onMove(index - 1)),
+			entry("moveDown", canMoveDown, () => onMove(index + 1)),
+			entry("clone", canClone, onClone),
+			visibleExtras.map((action) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				disabled: action.disabled,
+				onSelect: () => onExtraAction(action),
+				children: [action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon }), action.label]
+			}, action.name)),
+			canDelete && hasMain && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			entry("delete", canDelete, onDelete, true)
+		]
+	})] });
+}
+//#endregion
+export { BuilderField };
+
+//# sourceMappingURL=builder.js.map

package/dist/components/fields/builder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"builder.js","names":[],"sources":["../../../src/components/fields/builder.tsx"],"sourcesContent":["import type {\n  ActionSchema,\n  BuilderBlockSchema,\n  BuilderItemState,\n  BuilderSchema,\n  ItemActionName,\n  ItemActionSchema,\n} from '@alfakit/core'\nimport {\n  builderItemLabel,\n  builderItems,\n  builderItemSchema,\n  canAddBuilderBlock,\n  cloneIndexedState,\n  cloneRepeaterItem,\n  fieldIds,\n  insertBuilderItem,\n  isDeferredPlaceholder,\n  itemActionContext,\n  moveIndexedState,\n  moveRepeaterItem,\n  removeIndexedState,\n  removeRepeaterItem,\n  reorderedItemKeys,\n  VIRTUAL_ESTIMATES,\n  virtualizeOptions,\n} from '@alfakit/core'\nimport { EllipsisIcon, PencilIcon } from 'lucide-react'\nimport { createElement, useState, type KeyboardEvent } from 'react'\nimport { useActionRunner, useFormatter, useOptionalRegistry, useT } from '../../context'\nimport { useScrollToErroredItem, useVirtualList } from '../../hooks/use-virtual-list'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useField, useOptionalFormStore } from '../form/form-context'\nimport { DeferredSchema } from '../layout/deferred'\nimport { useFieldActionContext } from '../schema/field-actions'\nimport { FieldWrapper } from '../schema/field-wrapper'\nimport { SchemaRenderer } from '../schema/schema-renderer'\nimport { Button } from '../ui/button'\nimport { Collapsible, CollapsibleContent } from '../ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu'\nimport { BuilderBlockPicker, BuilderBlockPickerPanel } from './builder-picker'\nimport {\n  AddActionRow,\n  CollapseAllActions,\n  ItemHeaderActions,\n  useItemActionFallbacks,\n  useItemActions,\n  useItemMoves,\n  useRunItemAction,\n} from './item-actions'\n\n/**\n * A list of blocks, each with its own schema. Items use the server's per-item schema\n * when it describes the same block, else the block's template (fresh, moved or cloned\n * items the server has not seen yet).\n */\n/**\n * `deferLoading()`: a skeleton until the field scrolls into view, then the field with its\n * items (loaded from the server).\n */\nexport function BuilderField({ component }: { component: BuilderSchema }) {\n  if (!isDeferredPlaceholder(component)) return <BuilderFieldContent component={component} />\n\n  return (\n    <DeferredSchema component={component}>\n      {(loaded) => <BuilderFieldContent component={loaded} />}\n    </DeferredSchema>\n  )\n}\n\nfunction BuilderFieldContent({ component }: { component: BuilderSchema }) {\n  const t = useT()\n  const formatter = useFormatter()\n  const registry = useOptionalRegistry()\n  const form = useOptionalFormStore()\n  const { value, setValue, error, id, disabled, readOnly, aria } = useField<unknown>(component)\n  const locked = disabled || readOnly\n  const items = builderItems(value)\n  const [collapsed, setCollapsed] = useState<Record<number, boolean>>({})\n  const [editing, setEditing] = useState<Record<number, boolean>>({})\n  const [dragIndex, setDragIndex] = useState<number | null>(null)\n  const context = useFieldActionContext(component)\n  const runner = useActionRunner()\n  const runItemAction = useRunItemAction(context)\n  const fallbacks = useItemActionFallbacks(component.addActionLabel)\n  const resolve = useItemActions(component, fallbacks)\n  // Long lists render only the visible blocks (plus a few around them).\n  const virtual = useVirtualList(\n    items.length,\n    virtualizeOptions(component.virtualize, VIRTUAL_ESTIMATES.item, 12),\n  )\n  const { range, indexes, style, attach, item: attachItem } = virtual\n  useScrollToErroredItem(virtual.list, range.active, component.statePath)\n\n  const update = (next: unknown[]) => setValue(next as BuilderItemState[])\n  const moveItem = (from: number, to: number) => {\n    update(moveRepeaterItem(items, from, to))\n    setCollapsed((state) => moveIndexedState(state, from, to))\n    setEditing((state) => moveIndexedState(state, from, to))\n  }\n  const removeItem = (index: number) => {\n    update(removeRepeaterItem(items, index))\n    setCollapsed((state) => removeIndexedState(state, index))\n    setEditing((state) => removeIndexedState(state, index))\n  }\n  const cloneItem = (index: number) => {\n    update(cloneRepeaterItem(items, index))\n    setCollapsed((state) => cloneIndexedState(state, index))\n    setEditing((state) => cloneIndexedState(state, index))\n  }\n  const addBlock = (block: BuilderBlockSchema) =>\n    runItemAction(resolve('add'), { block: block.name }, () =>\n      update(insertBuilderItem(items, block)),\n    )\n  // Move buttons: announced, one at a time, focus kept on the moved item.\n  const {\n    moveWithButton,\n    region: moveRegion,\n    containerRef: moveContainerRef,\n  } = useItemMoves(\n    value,\n    moveItem,\n    (index) => builderItemLabel(component, items, index),\n    items.length,\n  )\n  const dropItem = (from: number, to: number) =>\n    runItemAction(resolve('reorder'), { items: reorderedItemKeys(items.length, from, to) }, () =>\n      moveItem(from, to),\n    )\n  // Closing the editor re-renders the previews from the server.\n  const toggleEditing = (index: number) => {\n    const open = !editing[index]\n    setEditing((state) => ({ ...state, [index]: open }))\n    if (!open) void form?.refresh(component.statePath)\n  }\n\n  const blockOf = (type: string) => component.blocks.find((block) => block.name === type)\n  const underMax = component.maxItems == null || items.length < component.maxItems\n  const canAdd = component.addable && !locked && underMax\n  const canDelete =\n    component.deletable &&\n    !locked &&\n    (component.minItems == null || items.length > component.minItems)\n  const draggable =\n    component.reorderable &&\n    component.reorderableWithDragAndDrop !== false &&\n    !locked &&\n    resolve('reorder') !== null\n  const buttons = component.reorderable && component.reorderableWithButtons !== false && !locked\n  const addAction = resolve('add')\n  const showEmptyPicker =\n    canAdd && addAction !== null && !addAction.disabled && component.blocks.length > 0\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error}>\n      <div ref={moveContainerRef} className=\"flex flex-col gap-3\" data-slot=\"builder\">\n        {moveRegion}\n        {items.length === 0 &&\n          (showEmptyPicker ? (\n            // No blocks yet: the picker is right there instead of behind a button.\n            <div\n              data-slot=\"builder-empty\"\n              className=\"bg-muted/30 flex flex-col gap-3 rounded-lg border border-dashed p-3 sm:p-4\"\n            >\n              <div className=\"px-1\">\n                <p className=\"text-sm font-medium\">\n                  {t('builder.empty_heading', {}, 'Add your first block')}\n                </p>\n                <p className=\"text-muted-foreground text-sm\">\n                  {t(\n                    'builder.empty_description',\n                    {},\n                    'Pick one to start. You can add more, reorder and remove them at any time.',\n                  )}\n                </p>\n              </div>\n              <BuilderBlockPickerPanel\n                component={component}\n                items={items}\n                onPick={addBlock}\n                className=\"bg-card max-h-[28rem] rounded-md border\"\n              />\n            </div>\n          ) : (\n            <p className=\"text-muted-foreground rounded-lg border border-dashed p-4 text-center text-sm\">\n              {t('builder.empty', {}, 'No blocks yet.')}\n            </p>\n          ))}\n        {component.collapsible && items.length > 0 && (\n          <CollapseAllActions\n            context={context}\n            resolve={(name) => resolve(name)}\n            onCollapseAll={() =>\n              setCollapsed(Object.fromEntries(items.map((_, index) => [index, true])))\n            }\n            onExpandAll={() =>\n              setCollapsed(Object.fromEntries(items.map((_, index) => [index, false])))\n            }\n          />\n        )}\n        <ul\n          id={id}\n          aria-labelledby={component.label ? fieldIds(id).label : undefined}\n          aria-describedby={aria['aria-describedby']}\n          ref={attach}\n          style={style}\n          className={cn('grid gap-3', items.length === 0 && 'hidden')}\n        >\n          {indexes.map((index) => {\n            const item = items[index] as BuilderItemState\n            const block = blockOf(item.type)\n            const isCollapsed = collapsed[index] ?? component.collapsed ?? false\n            const label = component.blockLabels ? builderItemLabel(component, items, index) : null\n            const icon = block?.icon ?? component.items[index]?.icon\n            const server = component.items[index]\n            const serverItem = server?.type === item.type ? server : undefined\n            const previewName = serverItem?.previewComponent ?? block?.previewComponent\n            const Preview = previewName\n              ? registry?.resolve(`builder-preview:${previewName}`)\n              : undefined\n            const hasPreview =\n              component.blockPreviews === true &&\n              (Preview !== undefined || Boolean(serverItem?.preview))\n            const showPreview = hasPreview && !editing[index]\n            const summary = serverItem?.summary\n            const menu = Boolean(component.blockActionsMenu) && !locked\n            const canClone =\n              Boolean(component.cloneable) &&\n              canAdd &&\n              block !== undefined &&\n              canAddBuilderBlock(component, block, items)\n            const openEditor = () => {\n              if (!locked) toggleEditing(index)\n            }\n\n            return (\n              <li\n                key={index}\n                ref={attachItem}\n                data-index={index}\n                aria-setsize={range.active ? items.length : undefined}\n                aria-posinset={range.active ? index + 1 : undefined}\n                data-block={item.type}\n                draggable={draggable}\n                onDragStart={() => setDragIndex(index)}\n                onDragOver={(event) => draggable && event.preventDefault()}\n                onDrop={() => {\n                  if (dragIndex !== null && dragIndex !== index) dropItem(dragIndex, index)\n                  setDragIndex(null)\n                }}\n                onDragEnd={() => setDragIndex(null)}\n                className={cn(\n                  'bg-card min-w-0 rounded-lg border shadow-xs',\n                  dragIndex === index && 'opacity-50',\n                )}\n              >\n                <Collapsible open={!isCollapsed}>\n                  <div\n                    className=\"flex flex-wrap items-center gap-1 border-b px-2 py-1.5\"\n                    data-slot=\"item-header\"\n                  >\n                    {draggable && (\n                      <span\n                        className=\"text-muted-foreground cursor-grab\"\n                        title={resolve('reorder')?.label ?? undefined}\n                        aria-hidden=\"true\"\n                      >\n                        <Icon name={resolve('reorder')?.icon ?? 'grip-vertical'} />\n                      </span>\n                    )}\n                    {component.blockIcons && icon && (\n                      <Icon name={icon} className=\"text-muted-foreground size-4\" />\n                    )}\n                    {component.blockNumbers && (\n                      <span className=\"text-muted-foreground text-xs tabular-nums\">\n                        {formatter.number(index + 1)}\n                      </span>\n                    )}\n                    <span className=\"flex min-w-0 flex-1 items-baseline gap-2\">\n                      {label && (\n                        <span\n                          dir=\"auto\"\n                          className=\"min-w-0 shrink-0 truncate text-sm font-medium sm:max-w-[60%]\"\n                        >\n                          {label}\n                        </span>\n                      )}\n                      {summary && (\n                        <span\n                          dir=\"auto\"\n                          className=\"text-muted-foreground min-w-0 truncate text-sm\"\n                          data-slot=\"builder-item-summary\"\n                        >\n                          {summary}\n                        </span>\n                      )}\n                    </span>\n                    <ItemHeaderActions\n                      context={context}\n                      itemKey={String(index)}\n                      index={index}\n                      count={items.length}\n                      resolve={(name) => resolve(name, serverItem)}\n                      extraActions={menu || locked ? undefined : serverItem?.actions}\n                      buttons={buttons && !menu}\n                      canClone={canClone && !menu}\n                      canDelete={canDelete && !menu}\n                      collapsible={Boolean(component.collapsible)}\n                      collapsed={isCollapsed}\n                      onMove={moveWithButton}\n                      onClone={() => cloneItem(index)}\n                      onDelete={() => removeItem(index)}\n                      onToggle={() =>\n                        setCollapsed((state) => ({ ...state, [index]: !isCollapsed }))\n                      }\n                    >\n                      {hasPreview && !locked && (\n                        <Button\n                          type=\"button\"\n                          variant=\"ghost\"\n                          size=\"icon-xs\"\n                          aria-label={t('builder.edit_block', {}, 'Edit block')}\n                          aria-pressed={Boolean(editing[index])}\n                          onClick={() => toggleEditing(index)}\n                        >\n                          <Icon\n                            name=\"alfakit::forms.components.builder.actions.edit\"\n                            fallback={PencilIcon}\n                          />\n                        </Button>\n                      )}\n                      {menu && (\n                        <BlockActionsMenu\n                          label={label ?? ''}\n                          resolve={(name) => resolve(name, serverItem)}\n                          canMoveUp={buttons && index > 0}\n                          canMoveDown={buttons && index < items.length - 1}\n                          canClone={canClone}\n                          canDelete={canDelete}\n                          extraActions={locked ? undefined : serverItem?.actions}\n                          onAction={(name, onClient) =>\n                            runItemAction(\n                              resolve(name, serverItem),\n                              { item: String(index) },\n                              onClient,\n                            )\n                          }\n                          onExtraAction={(action) =>\n                            void runner.trigger(\n                              action,\n                              itemActionContext(context, { item: String(index) }),\n                            )\n                          }\n                          onMove={(to) => moveWithButton(index, to)}\n                          index={index}\n                          onClone={() => cloneItem(index)}\n                          onDelete={() => removeItem(index)}\n                        />\n                      )}\n                    </ItemHeaderActions>\n                  </div>\n                  <CollapsibleContent>\n                    {showPreview ? (\n                      <div\n                        data-slot=\"builder-preview\"\n                        className={cn(\n                          'p-4',\n                          !component.interactivePreviews && !locked && 'cursor-pointer',\n                        )}\n                        {...(component.interactivePreviews || locked\n                          ? {}\n                          : {\n                              role: 'button',\n                              tabIndex: 0,\n                              'aria-label': t('builder.edit_block', {}, 'Edit block'),\n                              onClick: openEditor,\n                              onKeyDown: (event: KeyboardEvent) => {\n                                if (event.key === 'Enter' || event.key === ' ') {\n                                  event.preventDefault()\n                                  openEditor()\n                                }\n                              },\n                            })}\n                      >\n                        <div\n                          className={cn(!component.interactivePreviews && 'pointer-events-none')}\n                        >\n                          {Preview ? (\n                            createElement(Preview, { data: item.data, block: item.type, index })\n                          ) : (\n                            <div dangerouslySetInnerHTML={{ __html: serverItem?.preview ?? '' }} />\n                          )}\n                        </div>\n                      </div>\n                    ) : (\n                      <div className=\"p-4\">\n                        <SchemaRenderer\n                          components={builderItemSchema(component, items, index)}\n                          columns={\n                            block?.columns ?? component.items[index]?.columns ?? { default: 1 }\n                          }\n                        />\n                      </div>\n                    )}\n                  </CollapsibleContent>\n                </Collapsible>\n              </li>\n            )\n          })}\n        </ul>\n        {canAdd && addAction && component.blocks.length > 0 && items.length > 0 && (\n          <AddActionRow alignment={component.addActionAlignment}>\n            <BuilderBlockPicker\n              component={component}\n              items={items}\n              onPick={addBlock}\n              trigger={\n                <Button\n                  type=\"button\"\n                  variant=\"outline\"\n                  size=\"sm\"\n                  disabled={addAction.disabled}\n                  data-slot=\"builder-add\"\n                >\n                  {addAction.icon && <Icon name={addAction.icon} />}\n                  {addAction.label}\n                </Button>\n              }\n            />\n          </AddActionRow>\n        )}\n      </div>\n    </FieldWrapper>\n  )\n}\n\n/**\n * `blockActionsMenu()`: an item's actions in one compact menu (move up / down, duplicate,\n * extra item actions, delete). Built-in actions run in the browser unless customised.\n */\nfunction BlockActionsMenu({\n  label,\n  resolve,\n  canMoveUp,\n  canMoveDown,\n  canClone,\n  canDelete,\n  extraActions,\n  index,\n  onAction,\n  onExtraAction,\n  onMove,\n  onClone,\n  onDelete,\n}: {\n  label: string\n  resolve: (name: ItemActionName) => ItemActionSchema | null\n  canMoveUp: boolean\n  canMoveDown: boolean\n  canClone: boolean\n  canDelete: boolean\n  extraActions?: ActionSchema[]\n  index: number\n  onAction: (name: ItemActionName, onClient: () => void) => void\n  onExtraAction: (action: ActionSchema) => void\n  onMove: (to: number) => void\n  onClone: () => void\n  onDelete: () => void\n}) {\n  const t = useT()\n  const entry = (\n    name: ItemActionName,\n    enabled: boolean,\n    onClient: () => void,\n    destructive = false,\n  ) => {\n    const action = resolve(name)\n\n    if (!action || !enabled) return null\n\n    return (\n      <DropdownMenuItem\n        key={name}\n        variant={destructive ? 'destructive' : 'default'}\n        disabled={action.disabled}\n        onSelect={() => onAction(name, onClient)}\n      >\n        {action.icon && <Icon name={action.icon} />}\n        {name === 'clone' ? t('builder.duplicate_block', {}, 'Duplicate') : action.label}\n      </DropdownMenuItem>\n    )\n  }\n  const visibleExtras = extraActions ?? []\n  const hasMain = canMoveUp || canMoveDown || canClone || visibleExtras.length > 0\n\n  if (!hasMain && !canDelete) return null\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-xs\"\n          data-slot=\"builder-item-menu\"\n          aria-label={t('builder.block_actions', { block: label }, 'Actions for :block')}\n        >\n          <EllipsisIcon aria-hidden=\"true\" />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"min-w-44\">\n        {entry('moveUp', canMoveUp, () => onMove(index - 1))}\n        {entry('moveDown', canMoveDown, () => onMove(index + 1))}\n        {entry('clone', canClone, onClone)}\n        {visibleExtras.map((action) => (\n          <DropdownMenuItem\n            key={action.name}\n            disabled={action.disabled}\n            onSelect={() => onExtraAction(action)}\n          >\n            {action.icon && <Icon name={action.icon} />}\n            {action.label}\n          </DropdownMenuItem>\n        ))}\n        {canDelete && hasMain && <DropdownMenuSeparator />}\n        {entry('delete', canDelete, onDelete, true)}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n"],"mappings":"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"}

package/dist/components/fields/checkbox-list.d.ts

@@ -0,0 +1,7 @@
+import { CheckboxListSchema } from "@alfakit/core";
+//#region src/components/fields/checkbox-list.d.ts
+export declare function CheckboxListField({ component }: {
+  component: CheckboxListSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=checkbox-list.d.ts.map

package/dist/components/fields/checkbox-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-list.d.ts","names":[],"sources":["../../../src/components/fields/checkbox-list.tsx"],"mappings":";;wBA0BgB,oBAAoB;EAAe,WAAW;oBAAoB,IAAA"}

package/dist/components/fields/checkbox-list.js

@@ -0,0 +1,133 @@
+import { useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { textColorClasses } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { Button } from "../ui/button.js";
+import { useField } from "../form/form-context.js";
+import { Label } from "../ui/label.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { Input } from "../ui/input.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { fieldIds, gridColumnsClasses, htmlLabelToText, isOptionGroup } from "@alfakit/core";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/fields/checkbox-list.tsx
+/**
+* `gridDirection('column')`: options flow down each column (CSS columns). Classes are
+* spelled out so Tailwind generates them.
+*/
+const COLUMN_FLOW_CLASSES = {
+	2: "md:columns-2",
+	3: "md:columns-3",
+	4: "md:columns-4",
+	5: "md:columns-5",
+	6: "md:columns-6"
+};
+function CheckboxListField({ component }) {
+	const t = useT();
+	const { value, setValue, error, id, disabled, readOnly, aria } = useField(component);
+	const [search, setSearch] = useState("");
+	const [debounced, setDebounced] = useState("");
+	const query = component.searchDebounce ? debounced : search;
+	const locked = disabled || readOnly;
+	const selected = useMemo(() => (value ?? []).map(String), [value]);
+	const options = useMemo(() => component.options.flatMap((option) => isOptionGroup(option) ? option.options : [option]), [component.options]);
+	const visible = options.filter((option) => (component.allowHtml ? htmlLabelToText(option.label) : option.label).toLowerCase().includes(query.toLowerCase()));
+	useEffect(() => {
+		if (!component.searchDebounce) return;
+		const timer = setTimeout(() => setDebounced(search), component.searchDebounce);
+		return () => clearTimeout(timer);
+	}, [search, component.searchDebounce]);
+	const columnFlow = component.gridDirection === "column" && (component.gridColumns ?? 1) > 1;
+	const selectAll = component.selectAllAction;
+	const deselectAll = component.deselectAllAction;
+	const toggle = (key, checked) => {
+		setValue(checked ? [...selected, key] : selected.filter((item) => item !== key));
+	};
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [
+				(component.searchable || component.bulkToggleable && !readOnly) && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [component.searchable && /* @__PURE__ */ jsx(Input, {
+						value: search,
+						onChange: (event) => setSearch(event.target.value),
+						placeholder: component.searchPrompt ?? t("search", {}, "Search"),
+						"aria-label": component.searchPrompt ?? t("search", {}, "Search"),
+						className: "h-8"
+					}), component.bulkToggleable && !readOnly && /* @__PURE__ */ jsxs("div", {
+						className: "flex gap-1",
+						children: [!selectAll?.hidden && /* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							variant: "link",
+							size: "sm",
+							"data-slot": "select-all",
+							disabled,
+							onClick: () => setValue(options.filter((option) => !option.disabled).map((option) => option.value)),
+							children: [selectAll?.icon && /* @__PURE__ */ jsx(Icon, { name: selectAll.icon }), selectAll?.label ?? t("table.select_all", {}, "Select all")]
+						}), !deselectAll?.hidden && /* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							variant: "link",
+							size: "sm",
+							"data-slot": "deselect-all",
+							disabled,
+							onClick: () => setValue([]),
+							children: [deselectAll?.icon && /* @__PURE__ */ jsx(Icon, { name: deselectAll.icon }), deselectAll?.label ?? t("table.deselect_all", {}, "Deselect all")]
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"data-grid-direction": component.gridDirection,
+					className: cn(component.inline ? "flex flex-wrap gap-4" : columnFlow ? cn("gap-x-3 *:mb-3 *:break-inside-avoid", COLUMN_FLOW_CLASSES[component.gridColumns ?? 1]) : "grid gap-3", !component.inline && !columnFlow && gridColumnsClasses(component.gridColumns ? {
+						default: 1,
+						md: component.gridColumns
+					} : { default: 1 })),
+					role: "group",
+					"aria-labelledby": component.label ? fieldIds(id).label : void 0,
+					"aria-describedby": aria["aria-describedby"],
+					children: visible.map((option) => {
+						const optionId = `${id}-${option.value}`;
+						return /* @__PURE__ */ jsxs("div", {
+							className: "flex items-start gap-2",
+							children: [/* @__PURE__ */ jsx(Checkbox, {
+								id: optionId,
+								checked: selected.includes(option.value),
+								disabled: locked || option.disabled,
+								onCheckedChange: (checked) => toggle(option.value, checked === true),
+								"aria-invalid": aria["aria-invalid"],
+								className: "mt-0.5"
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "grid gap-0.5",
+								children: [/* @__PURE__ */ jsxs(Label, {
+									htmlFor: optionId,
+									className: cn("font-normal", option.color && textColorClasses[option.color]),
+									children: [option.icon && /* @__PURE__ */ jsx(Icon, {
+										name: option.icon,
+										className: "size-4"
+									}), component.allowHtml ? /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: option.label } }) : option.label]
+								}), option.description && /* @__PURE__ */ jsx("p", {
+									className: "text-muted-foreground text-xs",
+									children: option.description
+								})]
+							})]
+						}, option.value);
+					})
+				}),
+				component.searchable && query !== "" && visible.length === 0 && /* @__PURE__ */ jsx("p", {
+					"data-slot": "checkbox-list-empty",
+					role: "status",
+					className: "text-muted-foreground text-sm",
+					children: component.noSearchResultsMessage ?? t("no_results", {}, "No results.")
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { CheckboxListField };
+
+//# sourceMappingURL=checkbox-list.js.map

package/dist/components/fields/checkbox-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-list.js","names":[],"sources":["../../../src/components/fields/checkbox-list.tsx"],"sourcesContent":["import type { CheckboxListSchema } from '@alfakit/core'\nimport { fieldIds, gridColumnsClasses, htmlLabelToText, isOptionGroup } from '@alfakit/core'\nimport { useEffect, useMemo, useState } from 'react'\nimport { useT } from '../../context'\nimport { textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport { FieldWrapper } from '../schema/field-wrapper'\nimport { Button } from '../ui/button'\nimport { Checkbox } from '../ui/checkbox'\nimport { Input } from '../ui/input'\nimport { Label } from '../ui/label'\n\n/**\n * `gridDirection('column')`: options flow down each column (CSS columns). Classes are\n * spelled out so Tailwind generates them.\n */\nconst COLUMN_FLOW_CLASSES: Record<number, string> = {\n  2: 'md:columns-2',\n  3: 'md:columns-3',\n  4: 'md:columns-4',\n  5: 'md:columns-5',\n  6: 'md:columns-6',\n}\n\nexport function CheckboxListField({ component }: { component: CheckboxListSchema }) {\n  const t = useT()\n  const { value, setValue, error, id, disabled, readOnly, aria } = useField<Array<\n    string | number\n  > | null>(component)\n  const [search, setSearch] = useState('')\n  // `searchDebounce()`: the list is filtered by `query`, which trails the input.\n  const [debounced, setDebounced] = useState('')\n  const query = component.searchDebounce ? debounced : search\n  const locked = disabled || readOnly\n\n  const selected = useMemo(() => (value ?? []).map(String), [value])\n  const options = useMemo(\n    () =>\n      component.options.flatMap((option) => (isOptionGroup(option) ? option.options : [option])),\n    [component.options],\n  )\n  const visible = options.filter((option) =>\n    (component.allowHtml ? htmlLabelToText(option.label) : option.label)\n      .toLowerCase()\n      .includes(query.toLowerCase()),\n  )\n\n  useEffect(() => {\n    if (!component.searchDebounce) return\n\n    const timer = setTimeout(() => setDebounced(search), component.searchDebounce)\n\n    return () => clearTimeout(timer)\n  }, [search, component.searchDebounce])\n  const columnFlow = component.gridDirection === 'column' && (component.gridColumns ?? 1) > 1\n  const selectAll = component.selectAllAction\n  const deselectAll = component.deselectAllAction\n\n  const toggle = (key: string, checked: boolean) => {\n    setValue(checked ? [...selected, key] : selected.filter((item) => item !== key))\n  }\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error}>\n      <div className=\"flex flex-col gap-2\">\n        {(component.searchable || (component.bulkToggleable && !readOnly)) && (\n          <div className=\"flex items-center gap-2\">\n            {component.searchable && (\n              <Input\n                value={search}\n                onChange={(event) => setSearch(event.target.value)}\n                placeholder={component.searchPrompt ?? t('search', {}, 'Search')}\n                aria-label={component.searchPrompt ?? t('search', {}, 'Search')}\n                className=\"h-8\"\n              />\n            )}\n            {component.bulkToggleable && !readOnly && (\n              <div className=\"flex gap-1\">\n                {!selectAll?.hidden && (\n                  <Button\n                    type=\"button\"\n                    variant=\"link\"\n                    size=\"sm\"\n                    data-slot=\"select-all\"\n                    disabled={disabled}\n                    onClick={() =>\n                      setValue(\n                        options.filter((option) => !option.disabled).map((option) => option.value),\n                      )\n                    }\n                  >\n                    {selectAll?.icon && <Icon name={selectAll.icon} />}\n                    {selectAll?.label ?? t('table.select_all', {}, 'Select all')}\n                  </Button>\n                )}\n                {!deselectAll?.hidden && (\n                  <Button\n                    type=\"button\"\n                    variant=\"link\"\n                    size=\"sm\"\n                    data-slot=\"deselect-all\"\n                    disabled={disabled}\n                    onClick={() => setValue([])}\n                  >\n                    {deselectAll?.icon && <Icon name={deselectAll.icon} />}\n                    {deselectAll?.label ?? t('table.deselect_all', {}, 'Deselect all')}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        )}\n        <div\n          data-grid-direction={component.gridDirection}\n          className={cn(\n            component.inline\n              ? 'flex flex-wrap gap-4'\n              : columnFlow\n                ? cn(\n                    'gap-x-3 *:mb-3 *:break-inside-avoid',\n                    COLUMN_FLOW_CLASSES[component.gridColumns ?? 1],\n                  )\n                : 'grid gap-3',\n            !component.inline &&\n              !columnFlow &&\n              gridColumnsClasses(\n                component.gridColumns ? { default: 1, md: component.gridColumns } : { default: 1 },\n              ),\n          )}\n          role=\"group\"\n          aria-labelledby={component.label ? fieldIds(id).label : undefined}\n          aria-describedby={aria['aria-describedby']}\n        >\n          {visible.map((option) => {\n            const optionId = `${id}-${option.value}`\n\n            return (\n              <div key={option.value} className=\"flex items-start gap-2\">\n                <Checkbox\n                  id={optionId}\n                  checked={selected.includes(option.value)}\n                  disabled={locked || option.disabled}\n                  onCheckedChange={(checked) => toggle(option.value, checked === true)}\n                  aria-invalid={aria['aria-invalid']}\n                  className=\"mt-0.5\"\n                />\n                <div className=\"grid gap-0.5\">\n                  <Label\n                    htmlFor={optionId}\n                    className={cn('font-normal', option.color && textColorClasses[option.color])}\n                  >\n                    {option.icon && <Icon name={option.icon} className=\"size-4\" />}\n                    {component.allowHtml ? (\n                      <span dangerouslySetInnerHTML={{ __html: option.label }} />\n                    ) : (\n                      option.label\n                    )}\n                  </Label>\n                  {option.description && (\n                    <p className=\"text-muted-foreground text-xs\">{option.description}</p>\n                  )}\n                </div>\n              </div>\n            )\n          })}\n        </div>\n        {component.searchable && query !== '' && visible.length === 0 && (\n          <p\n            data-slot=\"checkbox-list-empty\"\n            role=\"status\"\n            className=\"text-muted-foreground text-sm\"\n          >\n            {component.noSearchResultsMessage ?? t('no_results', {}, 'No results.')}\n          </p>\n        )}\n      </div>\n    </FieldWrapper>\n  )\n}\n"],"mappings":"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"}

package/dist/components/fields/checkbox.d.ts

@@ -0,0 +1,7 @@
+import { CheckboxSchema } from "@alfakit/core";
+//#region src/components/fields/checkbox.d.ts
+export declare function CheckboxField({ component }: {
+  component: CheckboxSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/fields/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","names":[],"sources":["../../../src/components/fields/checkbox.tsx"],"mappings":";;wBAKgB,gBAAgB;EAAe,WAAW;oBAAgB,IAAA"}

package/dist/components/fields/checkbox.js

@@ -0,0 +1,29 @@
+import { useField } from "../form/form-context.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/fields/checkbox.tsx
+function CheckboxField({ component }) {
+	const { value, setValue, error, id, disabled, readOnly, aria } = useField(component);
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		inline: component.inline,
+		children: /* @__PURE__ */ jsx(Checkbox, {
+			id,
+			name: component.name,
+			checked: Boolean(value),
+			onCheckedChange: (checked) => setValue(checked === true),
+			disabled: disabled || readOnly,
+			"aria-readonly": readOnly || void 0,
+			required: component.required,
+			...aria,
+			className: "mt-0.5"
+		})
+	});
+}
+//#endregion
+export { CheckboxField };
+
+//# sourceMappingURL=checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../../src/components/fields/checkbox.tsx"],"sourcesContent":["import type { CheckboxSchema } from '@alfakit/core'\nimport { useField } from '../form/form-context'\nimport { FieldWrapper } from '../schema/field-wrapper'\nimport { Checkbox } from '../ui/checkbox'\n\nexport function CheckboxField({ component }: { component: CheckboxSchema }) {\n  const { value, setValue, error, id, disabled, readOnly, aria } = useField<boolean | null>(\n    component,\n  )\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error} inline={component.inline}>\n      <Checkbox\n        id={id}\n        name={component.name}\n        checked={Boolean(value)}\n        onCheckedChange={(checked) => setValue(checked === true)}\n        disabled={disabled || readOnly}\n        aria-readonly={readOnly || undefined}\n        required={component.required}\n        {...aria}\n        className=\"mt-0.5\"\n      />\n    </FieldWrapper>\n  )\n}\n"],"mappings":";;;;;AAKA,SAAgB,cAAc,EAAE,aAA4C;CAC1E,MAAM,EAAE,OAAO,UAAU,OAAO,IAAI,UAAU,UAAU,SAAS,SAC/D,SACF;CAEA,OACE,oBAAC,cAAD;EAAc,OAAO;EAAW,SAAS;EAAW;EAAO,QAAQ,UAAU;EAC3E,UAAA,oBAAC,UAAD;GACM;GACJ,MAAM,UAAU;GAChB,SAAS,QAAQ,KAAK;GACtB,kBAAkB,YAAY,SAAS,YAAY,IAAI;GACvD,UAAU,YAAY;GACtB,iBAAe,YAAY,KAAA;GAC3B,UAAU,UAAU;GACpB,GAAI;GACJ,WAAU;EACX,CAAA;CACW,CAAA;AAElB"}