@alfakit/react 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,210 @@
+import { cn } from "../../lib/utils.js";
+import { textColorClasses } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { extraProps } from "../../lib/attributes.js";
+import { FieldAffixActions, FieldHintActions } from "./field-actions.js";
+import { Label } from "../ui/label.js";
+import { ContentSlot } from "./content-slot.js";
+import { useInFusedGroup } from "./fused-group-context.js";
+import { fieldIds, hasSlots, mergeAttributes } from "@alfakit/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/schema/field-wrapper.tsx
+/**
+* Label, hint, content slots, helper text and validation error around a form control.
+*/
+function FieldWrapper({ field, htmlFor, error, children, inline = false, className, hideLabel = false }) {
+	const fused = useInFusedGroup();
+	const label = hideLabel ? null : field.label;
+	const hintUrl = typeof field.meta?.hintUrl === "string" ? field.meta.hintUrl : void 0;
+	const ids = fieldIds(htmlFor);
+	const wrapperAttributes = mergeAttributes(field.extraAttributes, field.extraFieldWrapperAttributes);
+	const labelNode = label ? /* @__PURE__ */ jsx(Label, {
+		id: ids.label,
+		htmlFor,
+		className: cn(inline && "cursor-pointer font-normal", fused && "sr-only"),
+		children: /* @__PURE__ */ jsxs("span", { children: [label, field.required && /* @__PURE__ */ jsx("span", {
+			className: "text-destructive ms-0.5",
+			"aria-hidden": "true",
+			children: "*"
+		})] })
+	}) : null;
+	const errorNode = error ? field.allowHtmlValidationMessages ? /* @__PURE__ */ jsx("p", {
+		id: ids.error,
+		className: cn("text-destructive text-xs", fused && "sr-only"),
+		role: "alert",
+		dangerouslySetInnerHTML: { __html: error }
+	}) : /* @__PURE__ */ jsx("p", {
+		id: ids.error,
+		className: cn("text-destructive text-xs", fused && "sr-only"),
+		role: "alert",
+		children: error
+	}) : null;
+	const control = /* @__PURE__ */ jsx(ContentControl, {
+		field,
+		children: /* @__PURE__ */ jsx(FieldAffixActions, {
+			component: field,
+			children
+		})
+	});
+	if (fused) return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "field",
+		"data-field": field.statePath,
+		"data-fused": "",
+		...extraProps(wrapperAttributes, cn("flex h-full flex-col", className)),
+		children: [
+			labelNode,
+			control,
+			errorNode
+		]
+	});
+	const hintActions = field.hintActions?.length ? /* @__PURE__ */ jsx(FieldHintActions, { component: field }) : null;
+	const hintText = field.hint ? /* @__PURE__ */ jsxs("span", {
+		id: ids.hint,
+		className: cn("inline-flex items-center gap-1 text-xs", field.hintColor ? textColorClasses[field.hintColor] : "text-muted-foreground"),
+		children: [field.hintIcon && /* @__PURE__ */ jsx(Icon, {
+			name: field.hintIcon,
+			className: "size-3.5"
+		}), hintUrl ? /* @__PURE__ */ jsx("a", {
+			href: hintUrl,
+			className: "hover:underline",
+			dangerouslySetInnerHTML: { __html: field.hint }
+		}) : /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: field.hint } })]
+	}) : null;
+	const afterLabelAtStart = field.slots?.afterLabel?.alignment === "start";
+	const afterLabelNode = /* @__PURE__ */ jsx(ContentSlot, {
+		component: field,
+		name: "afterLabel"
+	});
+	const hintNode = hintText || hintActions || field.slots?.afterLabel && !afterLabelAtStart ? /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex items-center gap-2",
+		children: [
+			hintText,
+			hintActions,
+			!afterLabelAtStart && afterLabelNode
+		]
+	}) : null;
+	const labelLine = labelNode || field.slots?.beforeLabel || field.slots?.afterLabel && afterLabelAtStart ? /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex min-w-0 items-center gap-2",
+		children: [
+			/* @__PURE__ */ jsx(ContentSlot, {
+				component: field,
+				name: "beforeLabel"
+			}),
+			labelNode,
+			afterLabelAtStart && afterLabelNode
+		]
+	}) : null;
+	const helperNode = field.helperText ? /* @__PURE__ */ jsx("p", {
+		id: ids.helper,
+		className: "text-muted-foreground text-xs",
+		dangerouslySetInnerHTML: { __html: field.helperText }
+	}) : null;
+	const below = /* @__PURE__ */ jsxs(Fragment, { children: [
+		helperNode,
+		/* @__PURE__ */ jsx(ContentSlot, {
+			component: field,
+			name: "belowContent"
+		}),
+		error ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(ContentSlot, {
+				component: field,
+				name: "aboveErrorMessage"
+			}),
+			errorNode,
+			/* @__PURE__ */ jsx(ContentSlot, {
+				component: field,
+				name: "belowErrorMessage"
+			})
+		] }) : null
+	] });
+	if (field.inlineLabel) return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "field",
+		"data-field": field.statePath,
+		"data-inline-label": "",
+		...extraProps(wrapperAttributes, cn("flex flex-col gap-1.5 sm:grid sm:grid-cols-3 sm:items-start sm:gap-x-4", className)),
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-slot": "field-label",
+			className: "flex flex-col gap-1 sm:pt-2",
+			children: [
+				/* @__PURE__ */ jsx(ContentSlot, {
+					component: field,
+					name: "aboveLabel"
+				}),
+				labelLine,
+				hintNode,
+				/* @__PURE__ */ jsx(ContentSlot, {
+					component: field,
+					name: "belowLabel"
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-1.5 sm:col-span-2",
+			children: [
+				/* @__PURE__ */ jsx(ContentSlot, {
+					component: field,
+					name: "aboveContent"
+				}),
+				control,
+				below
+			]
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "field",
+		"data-field": field.statePath,
+		...extraProps(wrapperAttributes, cn("flex flex-col gap-1.5", className)),
+		children: [
+			/* @__PURE__ */ jsx(ContentSlot, {
+				component: field,
+				name: "aboveLabel"
+			}),
+			inline ? /* @__PURE__ */ jsxs("div", {
+				className: "flex items-start gap-2",
+				children: [control, /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1",
+					children: [labelLine, hintNode]
+				})]
+			}) : (labelLine || hintNode) && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [labelLine ?? /* @__PURE__ */ jsx("span", {}), hintNode]
+			}),
+			/* @__PURE__ */ jsx(ContentSlot, {
+				component: field,
+				name: "belowLabel"
+			}),
+			!inline && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ContentSlot, {
+				component: field,
+				name: "aboveContent"
+			}), control] }),
+			below
+		]
+	});
+}
+/** `beforeContent()` / `afterContent()` on either side of the control. */
+function ContentControl({ field, children }) {
+	if (!hasSlots(field, ["beforeContent", "afterContent"])) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "field-content",
+		className: "flex items-center gap-2",
+		children: [
+			/* @__PURE__ */ jsx(ContentSlot, {
+				component: field,
+				name: "beforeContent",
+				className: "shrink-0 flex-nowrap"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1",
+				children
+			}),
+			/* @__PURE__ */ jsx(ContentSlot, {
+				component: field,
+				name: "afterContent",
+				className: "shrink-0 flex-nowrap"
+			})
+		]
+	});
+}
+//#endregion
+export { FieldWrapper };
+
+//# sourceMappingURL=field-wrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field-wrapper.js","names":[],"sources":["../../../src/components/schema/field-wrapper.tsx"],"sourcesContent":["import type { BaseField } from '@alfakit/core'\nimport { fieldIds, hasSlots, mergeAttributes } from '@alfakit/core'\nimport type { ReactNode } from 'react'\nimport { extraProps } from '../../lib/attributes'\nimport { textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { Label } from '../ui/label'\nimport { ContentSlot } from './content-slot'\nimport { FieldAffixActions, FieldHintActions } from './field-actions'\nimport { useInFusedGroup } from './fused-group-context'\n\nexport interface FieldWrapperProps {\n  field: BaseField\n  htmlFor: string\n  error?: string\n  children: ReactNode\n  /** Render the label after the control (checkbox, toggle). */\n  inline?: boolean\n  className?: string\n  /** Suppress the label (the control renders its own). */\n  hideLabel?: boolean\n}\n\n/**\n * Label, hint, content slots, helper text and validation error around a form control.\n */\nexport function FieldWrapper({\n  field,\n  htmlFor,\n  error,\n  children,\n  inline = false,\n  className,\n  hideLabel = false,\n}: FieldWrapperProps) {\n  const fused = useInFusedGroup()\n  const label = hideLabel ? null : field.label\n  const hintUrl = typeof field.meta?.hintUrl === 'string' ? field.meta.hintUrl : undefined\n  // Stable ids the control references through `aria-describedby` / `aria-labelledby`.\n  const ids = fieldIds(htmlFor)\n  const wrapperAttributes = mergeAttributes(\n    field.extraAttributes,\n    field.extraFieldWrapperAttributes,\n  )\n\n  const labelNode = label ? (\n    <Label\n      id={ids.label}\n      htmlFor={htmlFor}\n      className={cn(inline && 'cursor-pointer font-normal', fused && 'sr-only')}\n    >\n      <span>\n        {label}\n        {field.required && (\n          <span className=\"text-destructive ms-0.5\" aria-hidden=\"true\">\n            *\n          </span>\n        )}\n      </span>\n    </Label>\n  ) : null\n\n  // Inside a `FusedGroup` the group shows the error; the field keeps it for screen readers.\n  const errorNode = error ? (\n    field.allowHtmlValidationMessages ? (\n      <p\n        id={ids.error}\n        className={cn('text-destructive text-xs', fused && 'sr-only')}\n        role=\"alert\"\n        dangerouslySetInnerHTML={{ __html: error }}\n      />\n    ) : (\n      <p id={ids.error} className={cn('text-destructive text-xs', fused && 'sr-only')} role=\"alert\">\n        {error}\n      </p>\n    )\n  ) : null\n\n  const control = (\n    <ContentControl field={field}>\n      <FieldAffixActions component={field}>{children}</FieldAffixActions>\n    </ContentControl>\n  )\n\n  if (fused) {\n    return (\n      <div\n        data-slot=\"field\"\n        data-field={field.statePath}\n        data-fused=\"\"\n        {...extraProps(wrapperAttributes, cn('flex h-full flex-col', className))}\n      >\n        {labelNode}\n        {control}\n        {errorNode}\n      </div>\n    )\n  }\n\n  const hintActions = field.hintActions?.length ? <FieldHintActions component={field} /> : null\n\n  const hintText = field.hint ? (\n    <span\n      id={ids.hint}\n      className={cn(\n        'inline-flex items-center gap-1 text-xs',\n        field.hintColor ? textColorClasses[field.hintColor] : 'text-muted-foreground',\n      )}\n    >\n      {field.hintIcon && <Icon name={field.hintIcon} className=\"size-3.5\" />}\n      {hintUrl ? (\n        <a\n          href={hintUrl}\n          className=\"hover:underline\"\n          dangerouslySetInnerHTML={{ __html: field.hint }}\n        />\n      ) : (\n        <span dangerouslySetInnerHTML={{ __html: field.hint }} />\n      )}\n    </span>\n  ) : null\n\n  // `afterLabel()` sits with the hint at the end of the label row unless aligned to the start.\n  const afterLabelAtStart = field.slots?.afterLabel?.alignment === 'start'\n  const afterLabelNode = <ContentSlot component={field} name=\"afterLabel\" />\n\n  const hintNode =\n    hintText || hintActions || (field.slots?.afterLabel && !afterLabelAtStart) ? (\n      <span className=\"inline-flex items-center gap-2\">\n        {hintText}\n        {hintActions}\n        {!afterLabelAtStart && afterLabelNode}\n      </span>\n    ) : null\n\n  const labelLine =\n    labelNode || field.slots?.beforeLabel || (field.slots?.afterLabel && afterLabelAtStart) ? (\n      <span className=\"inline-flex min-w-0 items-center gap-2\">\n        <ContentSlot component={field} name=\"beforeLabel\" />\n        {labelNode}\n        {afterLabelAtStart && afterLabelNode}\n      </span>\n    ) : null\n\n  const helperNode = field.helperText ? (\n    <p\n      id={ids.helper}\n      className=\"text-muted-foreground text-xs\"\n      dangerouslySetInnerHTML={{ __html: field.helperText }}\n    />\n  ) : null\n\n  const errorArea = error ? (\n    <>\n      <ContentSlot component={field} name=\"aboveErrorMessage\" />\n      {errorNode}\n      <ContentSlot component={field} name=\"belowErrorMessage\" />\n    </>\n  ) : null\n\n  const below = (\n    <>\n      {helperNode}\n      <ContentSlot component={field} name=\"belowContent\" />\n      {errorArea}\n    </>\n  )\n\n  // `inlineLabel()`: label (and hint) in the first column, the control in the other two\n  // from `sm` up; stacked on phones. Grid columns follow the text direction, so RTL works.\n  if (field.inlineLabel) {\n    return (\n      <div\n        data-slot=\"field\"\n        data-field={field.statePath}\n        data-inline-label=\"\"\n        {...extraProps(\n          wrapperAttributes,\n          cn('flex flex-col gap-1.5 sm:grid sm:grid-cols-3 sm:items-start sm:gap-x-4', className),\n        )}\n      >\n        <div data-slot=\"field-label\" className=\"flex flex-col gap-1 sm:pt-2\">\n          <ContentSlot component={field} name=\"aboveLabel\" />\n          {labelLine}\n          {hintNode}\n          <ContentSlot component={field} name=\"belowLabel\" />\n        </div>\n        <div className=\"flex min-w-0 flex-col gap-1.5 sm:col-span-2\">\n          <ContentSlot component={field} name=\"aboveContent\" />\n          {control}\n          {below}\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div\n      data-slot=\"field\"\n      data-field={field.statePath}\n      {...extraProps(wrapperAttributes, cn('flex flex-col gap-1.5', className))}\n    >\n      <ContentSlot component={field} name=\"aboveLabel\" />\n      {inline ? (\n        <div className=\"flex items-start gap-2\">\n          {control}\n          <div className=\"flex flex-col gap-1\">\n            {labelLine}\n            {hintNode}\n          </div>\n        </div>\n      ) : (\n        (labelLine || hintNode) && (\n          <div className=\"flex items-center justify-between gap-2\">\n            {labelLine ?? <span />}\n            {hintNode}\n          </div>\n        )\n      )}\n      <ContentSlot component={field} name=\"belowLabel\" />\n      {!inline && (\n        <>\n          <ContentSlot component={field} name=\"aboveContent\" />\n          {control}\n        </>\n      )}\n      {below}\n    </div>\n  )\n}\n\n/** `beforeContent()` / `afterContent()` on either side of the control. */\nfunction ContentControl({ field, children }: { field: BaseField; children: ReactNode }) {\n  if (!hasSlots(field, ['beforeContent', 'afterContent'])) {\n    return <>{children}</>\n  }\n\n  return (\n    <div data-slot=\"field-content\" className=\"flex items-center gap-2\">\n      <ContentSlot component={field} name=\"beforeContent\" className=\"shrink-0 flex-nowrap\" />\n      <div className=\"min-w-0 flex-1\">{children}</div>\n      <ContentSlot component={field} name=\"afterContent\" className=\"shrink-0 flex-nowrap\" />\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/schema/fused-group-context.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+//#region src/components/schema/fused-group-context.ts
+/**
+* Set by `FusedGroup`: fields inside render only their control (labels become
+* screen-reader text, helper text and errors are shown by the group).
+*/
+const FusedGroupContext = createContext(false);
+function useInFusedGroup() {
+	return useContext(FusedGroupContext);
+}
+//#endregion
+export { FusedGroupContext, useInFusedGroup };
+
+//# sourceMappingURL=fused-group-context.js.map

package/dist/components/schema/fused-group-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fused-group-context.js","names":[],"sources":["../../../src/components/schema/fused-group-context.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\n/**\n * Set by `FusedGroup`: fields inside render only their control (labels become\n * screen-reader text, helper text and errors are shown by the group).\n */\nexport const FusedGroupContext = createContext(false)\n\nexport function useInFusedGroup(): boolean {\n  return useContext(FusedGroupContext)\n}\n"],"mappings":";;;;;;AAMA,MAAa,oBAAoB,cAAc,KAAK;AAEpD,SAAgB,kBAA2B;CACzC,OAAO,WAAW,iBAAiB;AACrC"}

package/dist/components/schema/schema-renderer.d.ts

@@ -0,0 +1,23 @@
+import { Attributes, Breakpoints, SchemaComponent } from "@alfakit/core";
+//#region src/components/schema/schema-renderer.d.ts
+export interface SchemaRendererProps {
+  components: SchemaComponent[];
+  columns?: Breakpoints;
+  className?: string;
+  /** `extraAttributes` of the layout component that owns this grid (Grid, Group, Tab, Step). */
+  attributes?: Attributes;
+}
+/**
+ * Renders a list of schema components in a responsive grid, resolving each component's
+ * `type` through the registry.
+ */
+export declare function SchemaRenderer({ components, columns, className, attributes }: SchemaRendererProps): import("react").JSX.Element;
+/**
+ * Memoised on the component object: a partial live refresh replaces only the components
+ * that changed, so every other one keeps its identity and is not re-rendered.
+ */
+export declare const RenderComponent: import("react").NamedExoticComponent<{
+  component: SchemaComponent;
+}>;
+//#endregion
+//# sourceMappingURL=schema-renderer.d.ts.map

package/dist/components/schema/schema-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema-renderer.d.ts","names":[],"sources":["../../../src/components/schema/schema-renderer.tsx"],"mappings":";;iBAgBiB;EACf,YAAY;EACZ,UAAU;EACV;;EAEA,aAAa;;;;;;wBAOC,iBACd,YACA,SACA,WACA,cACC,sCAAmB,IAAA;;;;;qBAkCT,iCAAe;EAGf,WAAA"}

package/dist/components/schema/schema-renderer.js

@@ -0,0 +1,77 @@
+import { useRegistry } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { extraProps } from "../../lib/attributes.js";
+import { TranslatableField } from "./translatable-field.js";
+import { columnOrderClasses, columnSpanClasses, columnStartClasses, containerColumnSpanClasses, containerGridColumnsClasses, gridColumnsClasses, hasContainerBreakpoints } from "@alfakit/core";
+import { createElement, memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/schema/schema-renderer.tsx
+/**
+* Renders a list of schema components in a responsive grid, resolving each component's
+* `type` through the registry.
+*/
+function SchemaRenderer({ components, columns, className, attributes }) {
+	const grid = /* @__PURE__ */ jsx("div", {
+		...extraProps(attributes, cn("grid gap-6", gridColumnsClasses(columns ?? { default: 1 }), containerGridColumnsClasses(columns), className)),
+		"data-slot": "schema",
+		children: components.map((component) => /* @__PURE__ */ jsx(RenderComponent, { component }, component.key))
+	});
+	return hasContainerBreakpoints(columns) ? /* @__PURE__ */ jsx("div", {
+		"data-slot": "schema-container",
+		className: "@container",
+		children: grid
+	}) : grid;
+}
+/**
+* Memoised on the component object: a partial live refresh replaces only the components
+* that changed, so every other one keeps its identity and is not re-rendered.
+*/
+const RenderComponent = memo(function RenderComponent({ component }) {
+	const registry = useRegistry();
+	const type = component.type === "View" ? component.component ?? "View" : component.type;
+	const Component = registry.resolve(type) ?? (component.type === "View" ? registry.resolve("View") : void 0);
+	const span = cn(columnSpanClasses(component.columnSpan), containerColumnSpanClasses(component.columnSpan), columnStartClasses(component.columnStart), columnOrderClasses(component.columnOrder));
+	const viewProps = component.type === "View" ? component.props ?? {} : {};
+	if (!Component) return /* @__PURE__ */ jsxs("div", {
+		className: cn("border-destructive/40 text-destructive rounded-md border border-dashed p-3 text-xs", span),
+		children: [
+			"Unknown component type ",
+			/* @__PURE__ */ jsx("code", {
+				className: "font-mono",
+				children: type
+			}),
+			". Register it with",
+			" ",
+			/* @__PURE__ */ jsxs("code", {
+				className: "font-mono",
+				children: [
+					"createAlfakit(",
+					"{",
+					" components ",
+					"}",
+					")"
+				]
+			}),
+			"."
+		]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "schema-item",
+		"data-type": component.type,
+		className: cn("min-w-0", span || void 0),
+		children: isTranslatable(component) ? /* @__PURE__ */ jsx(TranslatableField, {
+			component,
+			render: Component
+		}) : createElement(Component, {
+			...viewProps,
+			component
+		})
+	});
+});
+function isTranslatable(component) {
+	return Boolean(component.translatable?.locales?.length);
+}
+//#endregion
+export { RenderComponent, SchemaRenderer };
+
+//# sourceMappingURL=schema-renderer.js.map

package/dist/components/schema/schema-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema-renderer.js","names":[],"sources":["../../../src/components/schema/schema-renderer.tsx"],"sourcesContent":["import type { Attributes, BaseField, Breakpoints, SchemaComponent } from '@alfakit/core'\nimport {\n  columnOrderClasses,\n  columnSpanClasses,\n  columnStartClasses,\n  containerColumnSpanClasses,\n  containerGridColumnsClasses,\n  gridColumnsClasses,\n  hasContainerBreakpoints,\n} from '@alfakit/core'\nimport { createElement, memo } from 'react'\nimport { useRegistry } from '../../context'\nimport { extraProps } from '../../lib/attributes'\nimport { cn } from '../../lib/utils'\nimport { TranslatableField } from './translatable-field'\n\nexport interface SchemaRendererProps {\n  components: SchemaComponent[]\n  columns?: Breakpoints\n  className?: string\n  /** `extraAttributes` of the layout component that owns this grid (Grid, Group, Tab, Step). */\n  attributes?: Attributes\n}\n\n/**\n * Renders a list of schema components in a responsive grid, resolving each component's\n * `type` through the registry.\n */\nexport function SchemaRenderer({\n  components,\n  columns,\n  className,\n  attributes,\n}: SchemaRendererProps) {\n  const grid = (\n    <div\n      {...extraProps(\n        attributes,\n        cn(\n          'grid gap-6',\n          gridColumnsClasses(columns ?? { default: 1 }),\n          containerGridColumnsClasses(columns),\n          className,\n        ),\n      )}\n      data-slot=\"schema\"\n    >\n      {components.map((component) => (\n        <RenderComponent key={component.key} component={component} />\n      ))}\n    </div>\n  )\n\n  // `@md`-style columns follow the width of this wrapper instead of the viewport.\n  return hasContainerBreakpoints(columns) ? (\n    <div data-slot=\"schema-container\" className=\"@container\">\n      {grid}\n    </div>\n  ) : (\n    grid\n  )\n}\n\n/**\n * Memoised on the component object: a partial live refresh replaces only the components\n * that changed, so every other one keeps its identity and is not re-rendered.\n */\nexport const RenderComponent = memo(function RenderComponent({\n  component,\n}: {\n  component: SchemaComponent\n}) {\n  const registry = useRegistry()\n  const type =\n    component.type === 'View'\n      ? ((component as { component?: string }).component ?? 'View')\n      : component.type\n  const Component =\n    registry.resolve(type) ?? (component.type === 'View' ? registry.resolve('View') : undefined)\n\n  const span = cn(\n    columnSpanClasses(component.columnSpan),\n    containerColumnSpanClasses(component.columnSpan),\n    columnStartClasses(component.columnStart),\n    columnOrderClasses(component.columnOrder),\n  )\n  // Registered `View` components get the PHP `props` spread, as the docs describe.\n  const viewProps =\n    component.type === 'View'\n      ? ((component as { props?: Record<string, unknown> }).props ?? {})\n      : {}\n\n  if (!Component) {\n    return (\n      <div\n        className={cn(\n          'border-destructive/40 text-destructive rounded-md border border-dashed p-3 text-xs',\n          span,\n        )}\n      >\n        Unknown component type <code className=\"font-mono\">{type}</code>. Register it with{' '}\n        <code className=\"font-mono\">\n          createAlfakit({'{'} components {'}'})\n        </code>\n        .\n      </div>\n    )\n  }\n\n  return (\n    <div\n      data-slot=\"schema-item\"\n      data-type={component.type}\n      className={cn('min-w-0', span || undefined)}\n    >\n      {isTranslatable(component) ? (\n        <TranslatableField component={component} render={Component} />\n      ) : (\n        createElement(Component, { ...viewProps, component })\n      )}\n    </div>\n  )\n})\n\nfunction isTranslatable(component: SchemaComponent): component is SchemaComponent & BaseField {\n  return Boolean((component as Partial<BaseField>).translatable?.locales?.length)\n}\n"],"mappings":";;;;;;;;;;;;AA4BA,SAAgB,eAAe,EAC7B,YACA,SACA,WACA,cACsB;CACtB,MAAM,OACJ,oBAAC,OAAD;EACE,GAAI,WACF,YACA,GACE,cACA,mBAAmB,WAAW,EAAE,SAAS,EAAE,CAAC,GAC5C,4BAA4B,OAAO,GACnC,SACF,CACF;EACA,aAAU;EAET,UAAA,WAAW,KAAK,cACf,oBAAC,iBAAD,EAAgD,UAAY,GAAtC,UAAU,GAA4B,CAC7D;CACE,CAAA;CAIP,OAAO,wBAAwB,OAAO,IACpC,oBAAC,OAAD;EAAK,aAAU;EAAmB,WAAU;EACzC,UAAA;CACE,CAAA,IAEL;AAEJ;;;;;AAMA,MAAa,kBAAkB,KAAK,SAAS,gBAAgB,EAC3D,aAGC;CACD,MAAM,WAAW,YAAY;CAC7B,MAAM,OACJ,UAAU,SAAS,SACb,UAAqC,aAAa,SACpD,UAAU;CAChB,MAAM,YACJ,SAAS,QAAQ,IAAI,MAAM,UAAU,SAAS,SAAS,SAAS,QAAQ,MAAM,IAAI,KAAA;CAEpF,MAAM,OAAO,GACX,kBAAkB,UAAU,UAAU,GACtC,2BAA2B,UAAU,UAAU,GAC/C,mBAAmB,UAAU,WAAW,GACxC,mBAAmB,UAAU,WAAW,CAC1C;CAEA,MAAM,YACJ,UAAU,SAAS,SACb,UAAkD,SAAS,CAAC,IAC9D,CAAC;CAEP,IAAI,CAAC,WACH,OACE,qBAAC,OAAD;EACE,WAAW,GACT,sFACA,IACF;EAJF,UAAA;GAKC;GACwB,oBAAC,QAAD;IAAM,WAAU;IAAa,UAAA;GAAW,CAAA;GAAC;GAAmB;GACnF,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA;KAA4B;KACX;KAAI;KAAa;KAAI;IAChC;;GAAC;EAEJ;;CAIT,OACE,oBAAC,OAAD;EACE,aAAU;EACV,aAAW,UAAU;EACrB,WAAW,GAAG,WAAW,QAAQ,KAAA,CAAS;EAEzC,UAAA,eAAe,SAAS,IACvB,oBAAC,mBAAD;GAA8B;GAAW,QAAQ;EAAY,CAAA,IAE7D,cAAc,WAAW;GAAE,GAAG;GAAW;EAAU,CAAC;CAEnD,CAAA;AAET,CAAC;AAED,SAAS,eAAe,WAAsE;CAC5F,OAAO,QAAS,UAAiC,cAAc,SAAS,MAAM;AAChF"}

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

@@ -0,0 +1,76 @@
+import { useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { useStoreSelector } from "../../hooks/use-store.js";
+import { useFormStore } from "../form/form-context.js";
+import { initialTranslatableLocale, translatableLocaleField, translatableLocalesWithErrors } from "@alfakit/core";
+import { createElement, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/schema/translatable-field.tsx
+/**
+* A `->translatable()` field: a language switcher above the field's own renderer, bound
+* to `{statePath}.{locale}` for the selected language. Languages with a validation error
+* are marked, and the first of them opens after a failed submit.
+*/
+function TranslatableField({ component, render }) {
+	const t = useT();
+	const store = useFormStore();
+	const locales = useMemo(() => component.translatable?.locales ?? [], [component.translatable]);
+	const invalidKey = useStoreSelector(store.store, (state) => translatableLocalesWithErrors(component, state.errors).join(","));
+	const invalid = useMemo(() => invalidKey === "" ? [] : invalidKey.split(","), [invalidKey]);
+	const [current, setCurrent] = useState(() => initialTranslatableLocale(component, store.store.get().errors));
+	const [seenInvalidKey, setSeenInvalidKey] = useState(invalidKey);
+	if (invalidKey !== seenInvalidKey) {
+		setSeenInvalidKey(invalidKey);
+		if (invalid.length > 0 && !invalid.includes(current)) setCurrent(invalid[0]);
+	}
+	const editing = component.translatable?.defaultLocale ?? "";
+	const [seenEditing, setSeenEditing] = useState(editing);
+	if (editing !== seenEditing) {
+		setSeenEditing(editing);
+		if (editing !== "" && locales.some((option) => option.code === editing)) setCurrent(editing);
+	}
+	const locale = locales.find((candidate) => candidate.code === current) ?? locales[0];
+	const field = useMemo(() => locale ? translatableLocaleField(component, locale) : component, [component, locale]);
+	if (!locale) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "translatable-field",
+		className: "flex flex-col gap-1.5",
+		children: [/* @__PURE__ */ jsx("div", {
+			role: "group",
+			"aria-label": t("translatable.languages", { field: component.label ?? component.name }),
+			"data-slot": "translatable-locales",
+			className: "flex flex-wrap justify-end gap-1",
+			children: locales.map((option) => {
+				const active = option.code === locale.code;
+				const hasError = invalid.includes(option.code);
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					lang: option.tag,
+					"aria-pressed": active,
+					"data-active": active || void 0,
+					"data-invalid": hasError || void 0,
+					onClick: () => setCurrent(option.code),
+					className: cn("focus-visible:ring-ring/50 inline-flex h-6 items-center gap-1 rounded-md border px-2 text-xs font-medium transition-colors outline-none focus-visible:ring-[3px]", active ? "border-primary bg-primary text-primary-foreground" : "bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground", hasError && !active && "border-destructive text-destructive"),
+					children: [option.label, hasError && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "bg-destructive size-1.5 rounded-full"
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "sr-only",
+						children: [
+							"(",
+							t("translatable.has_errors"),
+							")"
+						]
+					})] })]
+				}, option.code);
+			})
+		}), createElement(render, {
+			key: locale.code,
+			component: field
+		})]
+	});
+}
+//#endregion
+export { TranslatableField };
+
+//# sourceMappingURL=translatable-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"translatable-field.js","names":[],"sources":["../../../src/components/schema/translatable-field.tsx"],"sourcesContent":["import type { BaseField } from '@alfakit/core'\nimport {\n  initialTranslatableLocale,\n  translatableLocaleField,\n  translatableLocalesWithErrors,\n} from '@alfakit/core'\nimport { createElement, useMemo, useState } from 'react'\nimport { useT, type AnyComponent } from '../../context'\nimport { useStoreSelector } from '../../hooks/use-store'\nimport { cn } from '../../lib/utils'\nimport { useFormStore } from '../form/form-context'\n\n/**\n * A `->translatable()` field: a language switcher above the field's own renderer, bound\n * to `{statePath}.{locale}` for the selected language. Languages with a validation error\n * are marked, and the first of them opens after a failed submit.\n */\nexport function TranslatableField({\n  component,\n  render,\n}: {\n  component: BaseField\n  render: AnyComponent\n}) {\n  const t = useT()\n  const store = useFormStore()\n  const locales = useMemo(() => component.translatable?.locales ?? [], [component.translatable])\n  const invalidKey = useStoreSelector(store.store, (state) =>\n    translatableLocalesWithErrors(component, state.errors).join(','),\n  )\n  const invalid = useMemo(() => (invalidKey === '' ? [] : invalidKey.split(',')), [invalidKey])\n  const [current, setCurrent] = useState(() =>\n    initialTranslatableLocale(component, store.store.get().errors),\n  )\n\n  // When the set of invalid languages changes (a failed submit), show one that needs\n  // attention. Adjusted during render, as React recommends for state derived from props.\n  const [seenInvalidKey, setSeenInvalidKey] = useState(invalidKey)\n\n  if (invalidKey !== seenInvalidKey) {\n    setSeenInvalidKey(invalidKey)\n\n    if (invalid.length > 0 && !invalid.includes(current)) {\n      setCurrent(invalid[0]!)\n    }\n  }\n\n  // A `LocaleSwitcher` changes the language the fields open on; follow it when it changes.\n  const editing = component.translatable?.defaultLocale ?? ''\n  const [seenEditing, setSeenEditing] = useState(editing)\n\n  if (editing !== seenEditing) {\n    setSeenEditing(editing)\n\n    if (editing !== '' && locales.some((option) => option.code === editing)) {\n      setCurrent(editing)\n    }\n  }\n\n  const locale = locales.find((candidate) => candidate.code === current) ?? locales[0]\n  const field = useMemo(\n    () => (locale ? translatableLocaleField(component, locale) : component),\n    [component, locale],\n  )\n\n  if (!locale) {\n    return null\n  }\n\n  return (\n    <div data-slot=\"translatable-field\" className=\"flex flex-col gap-1.5\">\n      <div\n        role=\"group\"\n        aria-label={t('translatable.languages', { field: component.label ?? component.name })}\n        data-slot=\"translatable-locales\"\n        className=\"flex flex-wrap justify-end gap-1\"\n      >\n        {locales.map((option) => {\n          const active = option.code === locale.code\n          const hasError = invalid.includes(option.code)\n\n          return (\n            <button\n              key={option.code}\n              type=\"button\"\n              lang={option.tag}\n              aria-pressed={active}\n              data-active={active || undefined}\n              data-invalid={hasError || undefined}\n              onClick={() => setCurrent(option.code)}\n              className={cn(\n                'focus-visible:ring-ring/50 inline-flex h-6 items-center gap-1 rounded-md border px-2 text-xs font-medium transition-colors outline-none focus-visible:ring-[3px]',\n                active\n                  ? 'border-primary bg-primary text-primary-foreground'\n                  : 'bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground',\n                hasError && !active && 'border-destructive text-destructive',\n              )}\n            >\n              {option.label}\n              {hasError && (\n                <>\n                  <span aria-hidden=\"true\" className=\"bg-destructive size-1.5 rounded-full\" />\n                  <span className=\"sr-only\">({t('translatable.has_errors')})</span>\n                </>\n              )}\n            </button>\n          )\n        })}\n      </div>\n      {createElement(render, { key: locale.code, component: field })}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAiBA,SAAgB,kBAAkB,EAChC,WACA,UAIC;CACD,MAAM,IAAI,KAAK;CACf,MAAM,QAAQ,aAAa;CAC3B,MAAM,UAAU,cAAc,UAAU,cAAc,WAAW,CAAC,GAAG,CAAC,UAAU,YAAY,CAAC;CAC7F,MAAM,aAAa,iBAAiB,MAAM,QAAQ,UAChD,8BAA8B,WAAW,MAAM,MAAM,CAAC,CAAC,KAAK,GAAG,CACjE;CACA,MAAM,UAAU,cAAe,eAAe,KAAK,CAAC,IAAI,WAAW,MAAM,GAAG,GAAI,CAAC,UAAU,CAAC;CAC5F,MAAM,CAAC,SAAS,cAAc,eAC5B,0BAA0B,WAAW,MAAM,MAAM,IAAI,CAAC,CAAC,MAAM,CAC/D;CAIA,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,UAAU;CAE/D,IAAI,eAAe,gBAAgB;EACjC,kBAAkB,UAAU;EAE5B,IAAI,QAAQ,SAAS,KAAK,CAAC,QAAQ,SAAS,OAAO,GACjD,WAAW,QAAQ,EAAG;CAE1B;CAGA,MAAM,UAAU,UAAU,cAAc,iBAAiB;CACzD,MAAM,CAAC,aAAa,kBAAkB,SAAS,OAAO;CAEtD,IAAI,YAAY,aAAa;EAC3B,eAAe,OAAO;EAEtB,IAAI,YAAY,MAAM,QAAQ,MAAM,WAAW,OAAO,SAAS,OAAO,GACpE,WAAW,OAAO;CAEtB;CAEA,MAAM,SAAS,QAAQ,MAAM,cAAc,UAAU,SAAS,OAAO,KAAK,QAAQ;CAClF,MAAM,QAAQ,cACL,SAAS,wBAAwB,WAAW,MAAM,IAAI,WAC7D,CAAC,WAAW,MAAM,CACpB;CAEA,IAAI,CAAC,QACH,OAAO;CAGT,OACE,qBAAC,OAAD;EAAK,aAAU;EAAqB,WAAU;EAA9C,UAAA,CACE,oBAAC,OAAD;GACE,MAAK;GACL,cAAY,EAAE,0BAA0B,EAAE,OAAO,UAAU,SAAS,UAAU,KAAK,CAAC;GACpF,aAAU;GACV,WAAU;GAET,UAAA,QAAQ,KAAK,WAAW;IACvB,MAAM,SAAS,OAAO,SAAS,OAAO;IACtC,MAAM,WAAW,QAAQ,SAAS,OAAO,IAAI;IAE7C,OACE,qBAAC,UAAD;KAEE,MAAK;KACL,MAAM,OAAO;KACb,gBAAc;KACd,eAAa,UAAU,KAAA;KACvB,gBAAc,YAAY,KAAA;KAC1B,eAAe,WAAW,OAAO,IAAI;KACrC,WAAW,GACT,oKACA,SACI,sDACA,oFACJ,YAAY,CAAC,UAAU,qCACzB;KAdF,UAAA,CAgBG,OAAO,OACP,YACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;MAAM,eAAY;MAAO,WAAU;KAAwC,CAAA,GAC3E,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OAA0B;OAAE,EAAE,yBAAyB;OAAE;MAAO;KAChE,CAAA,CAAA,EAAA,CAAA,CAEE;IAtBD,GAAA,OAAO,IAsBN;GAEZ,CAAC;EACE,CAAA,GACJ,cAAc,QAAQ;GAAE,KAAK,OAAO;GAAM,WAAW;EAAM,CAAC,CAC1D;;AAET"}

package/dist/components/schema/virtual-spacer.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/schema/virtual-spacer.tsx
+/**
+* Reserves the height of table rows outside the rendered window, so the scrollbar and the
+* positions of the rendered rows stay right. Hidden from assistive technology: the
+* `aria-rowcount` on the table tells the real count.
+*/
+function VirtualSpacerRow({ height, colSpan }) {
+	if (height <= 0) return null;
+	return /* @__PURE__ */ jsx("tr", {
+		"aria-hidden": "true",
+		"data-slot": "virtual-spacer",
+		style: { height },
+		children: /* @__PURE__ */ jsx("td", {
+			colSpan,
+			className: "border-0 p-0"
+		})
+	});
+}
+//#endregion
+export { VirtualSpacerRow };
+
+//# sourceMappingURL=virtual-spacer.js.map

package/dist/components/schema/virtual-spacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-spacer.js","names":[],"sources":["../../../src/components/schema/virtual-spacer.tsx"],"sourcesContent":["/**\n * Reserves the height of table rows outside the rendered window, so the scrollbar and the\n * positions of the rendered rows stay right. Hidden from assistive technology: the\n * `aria-rowcount` on the table tells the real count.\n */\nexport function VirtualSpacerRow({ height, colSpan }: { height: number; colSpan: number }) {\n  if (height <= 0) return null\n\n  return (\n    <tr aria-hidden=\"true\" data-slot=\"virtual-spacer\" style={{ height }}>\n      <td colSpan={colSpan} className=\"border-0 p-0\" />\n    </tr>\n  )\n}\n"],"mappings":";;;;;;;AAKA,SAAgB,iBAAiB,EAAE,QAAQ,WAAgD;CACzF,IAAI,UAAU,GAAG,OAAO;CAExB,OACE,oBAAC,MAAD;EAAI,eAAY;EAAO,aAAU;EAAiB,OAAO,EAAE,OAAO;EAChE,UAAA,oBAAC,MAAD;GAAa;GAAS,WAAU;EAAgB,CAAA;CAC9C,CAAA;AAER"}

package/dist/components/table/cells.d.ts

@@ -0,0 +1,12 @@
+import { CellSchema, ColumnSchema, RecordKey } from "@alfakit/core";
+//#region src/components/table/cells.d.ts
+export interface CellProps {
+  column: ColumnSchema;
+  cell: CellSchema;
+  recordKey: RecordKey;
+  token: string;
+  component: string;
+}
+export declare function TableCellContent(props: CellProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=cells.d.ts.map

package/dist/components/table/cells.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cells.d.ts","names":[],"sources":["../../../src/components/table/cells.tsx"],"mappings":";;iBAwDiB;EACf,QAAQ;EACR,MAAM;EACN,WAAW;EACX;EACA;;wBAGc,iBAAiB,OAAO,4BAAS,IAAA"}