@alfakit/react 0.0.0-stage → 0.1.1

package/dist/components/entries/repeatable-entry-table.js

@@ -0,0 +1,33 @@
+import { cn } from "../../lib/utils.js";
+import { RenderComponent } from "../schema/schema-renderer.js";
+import { TableColumnHeaders } from "../fields/repeater-table.js";
+import { tableColumnAlignmentClass, tableColumnCells } from "@alfakit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/entries/repeatable-entry-table.tsx
+/** RepeatableEntry items as table rows (`->table([...])`), entry labels for screen readers only. */
+function RepeatableEntryTable({ columns, items }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "repeatable-entry-table",
+		className: "bg-card relative overflow-x-auto rounded-lg border shadow-xs",
+		children: /* @__PURE__ */ jsxs("table", {
+			className: "w-full border-collapse text-sm",
+			children: [/* @__PURE__ */ jsx("thead", {
+				className: "bg-muted/40",
+				children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(TableColumnHeaders, { columns }) })
+			}), /* @__PURE__ */ jsx("tbody", { children: items.map((item, index) => /* @__PURE__ */ jsx("tr", {
+				className: "border-t align-top",
+				children: tableColumnCells(columns, item).map((cell, cellIndex) => /* @__PURE__ */ jsx("td", {
+					className: cn("px-3 py-2 [&_[data-slot=entry-label]]:sr-only", tableColumnAlignmentClass(columns[cellIndex] ?? {})),
+					children: cell && /* @__PURE__ */ jsx("div", {
+						className: "contents",
+						children: /* @__PURE__ */ jsx(RenderComponent, { component: cell })
+					})
+				}, cell?.key ?? `empty-${cellIndex}`))
+			}, index)) })]
+		})
+	});
+}
+//#endregion
+export { RepeatableEntryTable };
+
+//# sourceMappingURL=repeatable-entry-table.js.map

package/dist/components/entries/repeatable-entry-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"repeatable-entry-table.js","names":[],"sources":["../../../src/components/entries/repeatable-entry-table.tsx"],"sourcesContent":["import type { SchemaComponent, TableColumnSchema } from '@alfakit/core'\nimport { tableColumnAlignmentClass, tableColumnCells } from '@alfakit/core'\nimport { cn } from '../../lib/utils'\nimport { TableColumnHeaders } from '../fields/repeater-table'\nimport { RenderComponent } from '../schema/schema-renderer'\n\n/** RepeatableEntry items as table rows (`->table([...])`), entry labels for screen readers only. */\nexport function RepeatableEntryTable({\n  columns,\n  items,\n}: {\n  columns: TableColumnSchema[]\n  items: SchemaComponent[][]\n}) {\n  return (\n    <div\n      data-slot=\"repeatable-entry-table\"\n      className=\"bg-card relative overflow-x-auto rounded-lg border shadow-xs\"\n    >\n      <table className=\"w-full border-collapse text-sm\">\n        <thead className=\"bg-muted/40\">\n          <tr>\n            <TableColumnHeaders columns={columns} />\n          </tr>\n        </thead>\n        <tbody>\n          {items.map((item, index) => (\n            <tr key={index} className=\"border-t align-top\">\n              {tableColumnCells(columns, item).map((cell, cellIndex) => (\n                <td\n                  key={cell?.key ?? `empty-${cellIndex}`}\n                  className={cn(\n                    'px-3 py-2 [&_[data-slot=entry-label]]:sr-only',\n                    tableColumnAlignmentClass(columns[cellIndex] ?? {}),\n                  )}\n                >\n                  {cell && (\n                    <div className=\"contents\">\n                      <RenderComponent component={cell} />\n                    </div>\n                  )}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAOA,SAAgB,qBAAqB,EACnC,SACA,SAIC;CACD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAU;EAEV,UAAA,qBAAC,SAAD;GAAO,WAAU;GAAjB,UAAA,CACE,oBAAC,SAAD;IAAO,WAAU;IACf,UAAA,oBAAC,MAAD,EAAA,UACE,oBAAC,oBAAD,EAA6B,QAAU,CAAA,EACrC,CAAA;GACC,CAAA,GACP,oBAAC,SAAD,EAAA,UACG,MAAM,KAAK,MAAM,UAChB,oBAAC,MAAD;IAAgB,WAAU;IACvB,UAAA,iBAAiB,SAAS,IAAI,CAAC,CAAC,KAAK,MAAM,cAC1C,oBAAC,MAAD;KAEE,WAAW,GACT,iDACA,0BAA0B,QAAQ,cAAc,CAAC,CAAC,CACpD;KAEC,UAAA,QACC,oBAAC,OAAD;MAAK,WAAU;MACb,UAAA,oBAAC,iBAAD,EAAiB,WAAW,KAAO,CAAA;KAChC,CAAA;IAEL,GAXG,MAAM,OAAO,SAAS,WAWzB,CACL;GACC,GAhBK,KAgBL,CACL,EACI,CAAA,CACF;;CACJ,CAAA;AAET"}

package/dist/components/entries/text-entry.d.ts

@@ -0,0 +1,12 @@
+import { TextEntrySchema } from "@alfakit/core";
+//#region src/components/entries/text-entry.d.ts
+export declare function FormattedText({ value, schema, className }: {
+  value: unknown;
+  schema: Partial<TextEntrySchema>;
+  className?: string;
+}): import("react").JSX.Element;
+export declare function TextEntryComponent({ component }: {
+  component: TextEntrySchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=text-entry.d.ts.map

package/dist/components/entries/text-entry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-entry.d.ts","names":[],"sources":["../../../src/components/entries/text-entry.tsx"],"mappings":";;wBAqCgB,gBACd,OACA,QACA;EAEA;EACA,QAAQ,QAAQ;EAChB;oBACD,IAAA;wBA8Le,qBAAqB;EAAe,WAAW;oBAAiB,IAAA"}

package/dist/components/entries/text-entry.js

@@ -0,0 +1,181 @@
+import { useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { badgeColorClasses, colorClass, textColorClasses } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { Badge } from "../ui/badge.js";
+import { NewTabHint } from "../../lib/new-tab-hint.js";
+import { EntryPlaceholder, EntryWrapper } from "./entry-wrapper.js";
+import { limitedListItems } from "@alfakit/core";
+import { Link } from "@inertiajs/react";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "lucide-react";
+//#region src/components/entries/text-entry.tsx
+const SIZES = {
+	xs: "text-xs",
+	sm: "text-sm",
+	md: "text-base",
+	lg: "text-lg",
+	xl: "text-xl"
+};
+const WEIGHTS = {
+	thin: "font-thin",
+	extralight: "font-extralight",
+	light: "font-light",
+	normal: "font-normal",
+	medium: "font-medium",
+	semibold: "font-semibold",
+	bold: "font-bold",
+	extrabold: "font-extrabold",
+	black: "font-black"
+};
+const FAMILIES = {
+	sans: "font-sans",
+	serif: "font-serif",
+	mono: "font-mono"
+};
+function FormattedText({ value, schema, className }) {
+	const t = useT();
+	const [copied, setCopied] = useState(false);
+	const [expanded, setExpanded] = useState(false);
+	if (value === null || value === void 0 || value === "" || Array.isArray(value) && value.length === 0) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: schema.placeholder ?? "—"
+	});
+	if (schema.boolean) return /* @__PURE__ */ jsx(Icon, {
+		name: value ? "circle-check" : "circle-x",
+		className: cn("size-5", value ? "text-success" : "text-danger")
+	});
+	const items = Array.isArray(value) ? value : [value];
+	const copy = (text) => {
+		navigator.clipboard?.writeText(text).then(() => {
+			setCopied(true);
+			setTimeout(() => setCopied(false), schema.copyMessageDuration ?? 1500);
+		});
+	};
+	const renderItem = (item, index) => {
+		const url = schema.itemUrls?.[index];
+		const content = renderItemContent(item, index);
+		if (!url) return content;
+		return schema.openUrlInNewTab ? /* @__PURE__ */ jsxs("a", {
+			href: url,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			className: "inline-flex hover:underline",
+			children: [content, /* @__PURE__ */ jsx(NewTabHint, {})]
+		}, index) : /* @__PURE__ */ jsx(Link, {
+			href: url,
+			className: "inline-flex hover:underline",
+			children: content
+		}, index);
+	};
+	const renderItemContent = (item, index) => {
+		const text = String(item);
+		const color = schema.itemColors?.[index] ?? schema.color;
+		const icon = schema.itemIcons?.[index] ?? schema.icon;
+		const inner = schema.html ? /* @__PURE__ */ jsx("span", {
+			className: cn(schema.prose && "alfakit-prose"),
+			dangerouslySetInnerHTML: { __html: text }
+		}) : /* @__PURE__ */ jsx("bdi", {
+			className: cn(schema.lineClamp && `line-clamp-${schema.lineClamp}`, !schema.wrap && !schema.lineClamp && "whitespace-pre-line"),
+			children: text
+		});
+		if (schema.badge) return /* @__PURE__ */ jsxs(Badge, {
+			variant: "outline",
+			className: colorClass(badgeColorClasses, color, "gray"),
+			children: [
+				icon && schema.iconPosition !== "after" && /* @__PURE__ */ jsx(Icon, {
+					name: icon,
+					className: cn(schema.iconColor && textColorClasses[schema.iconColor])
+				}),
+				inner,
+				icon && schema.iconPosition === "after" && /* @__PURE__ */ jsx(Icon, { name: icon })
+			]
+		}, index);
+		return /* @__PURE__ */ jsxs("span", {
+			className: cn("inline-flex items-center gap-1.5", color && textColorClasses[color], schema.size && SIZES[schema.size], schema.weight && WEIGHTS[schema.weight], schema.fontFamily && FAMILIES[schema.fontFamily]),
+			children: [
+				icon && schema.iconPosition !== "after" && /* @__PURE__ */ jsx(Icon, {
+					name: icon,
+					className: cn(schema.iconColor && textColorClasses[schema.iconColor])
+				}),
+				inner,
+				icon && schema.iconPosition === "after" && /* @__PURE__ */ jsx(Icon, {
+					name: icon,
+					className: cn(schema.iconColor && textColorClasses[schema.iconColor])
+				}),
+				schema.copyable && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "text-muted-foreground hover:text-foreground",
+					onClick: (event) => {
+						event.preventDefault();
+						event.stopPropagation();
+						copy(text);
+					},
+					"aria-label": t("copy", {}, "Copy"),
+					children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx(CopyIcon, { className: "size-3.5" })
+				}),
+				schema.copyable && copied && /* @__PURE__ */ jsx("span", {
+					role: "status",
+					className: cn("text-xs", !schema.copyMessage && "sr-only"),
+					children: schema.copyMessage ?? t("copied", {}, "Copied")
+				})
+			]
+		}, index);
+	};
+	if (items.length > 1 || Array.isArray(value)) {
+		const limited = limitedListItems(items, schema, expanded);
+		const canCollapse = expanded && limitedListItems(items, schema, false).hidden > 0;
+		const toggle = limited.hidden > 0 || canCollapse ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-slot": "list-expand",
+			"aria-expanded": expanded,
+			className: "text-primary text-xs hover:underline",
+			onClick: (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+				setExpanded(!expanded);
+			},
+			children: expanded ? t("list.show_less", {}, "Show less") : t("list.show_more", { count: limited.hidden }, `+${limited.hidden} more`)
+		}) : null;
+		if (schema.listWithLineBreaks) return /* @__PURE__ */ jsxs("ul", {
+			className: cn("flex flex-col gap-0.5", schema.bulleted && "list-disc ps-4", className),
+			children: [limited.items.map((item, index) => /* @__PURE__ */ jsx("li", { children: renderItem(item, index) }, index)), toggle && /* @__PURE__ */ jsx("li", {
+				className: "list-none",
+				children: toggle
+			})]
+		});
+		return /* @__PURE__ */ jsxs("span", {
+			className: cn("flex flex-wrap items-center gap-1", className),
+			children: [limited.items.map(renderItem), toggle]
+		});
+	}
+	return /* @__PURE__ */ jsx("span", {
+		className,
+		children: renderItem(items[0], 0)
+	});
+}
+function TextEntryComponent({ component }) {
+	const content = /* @__PURE__ */ jsx(FormattedText, {
+		value: component.state,
+		schema: component
+	});
+	return /* @__PURE__ */ jsx(EntryWrapper, {
+		entry: component,
+		children: component.state === null || component.state === void 0 ? /* @__PURE__ */ jsx(EntryPlaceholder, { entry: component }) : component.url ? component.openUrlInNewTab ? /* @__PURE__ */ jsxs("a", {
+			href: component.url,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			className: "hover:underline",
+			children: [content, /* @__PURE__ */ jsx(NewTabHint, {})]
+		}) : /* @__PURE__ */ jsx(Link, {
+			href: component.url,
+			className: "hover:underline",
+			children: content
+		}) : content
+	});
+}
+//#endregion
+export { FormattedText, TextEntryComponent };
+
+//# sourceMappingURL=text-entry.js.map

package/dist/components/entries/text-entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-entry.js","names":[],"sources":["../../../src/components/entries/text-entry.tsx"],"sourcesContent":["import type { TextEntrySchema } from '@alfakit/core'\nimport { limitedListItems } from '@alfakit/core'\nimport { Link } from '@inertiajs/react'\nimport { CheckIcon, CopyIcon } from 'lucide-react'\nimport { useState } from 'react'\nimport { useT } from '../../context'\nimport { badgeColorClasses, colorClass, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { NewTabHint } from '../../lib/new-tab-hint'\nimport { cn } from '../../lib/utils'\nimport { Badge } from '../ui/badge'\nimport { EntryPlaceholder, EntryWrapper } from './entry-wrapper'\n\nconst SIZES: Record<string, string> = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-base',\n  lg: 'text-lg',\n  xl: 'text-xl',\n}\nconst WEIGHTS: Record<string, string> = {\n  thin: 'font-thin',\n  extralight: 'font-extralight',\n  light: 'font-light',\n  normal: 'font-normal',\n  medium: 'font-medium',\n  semibold: 'font-semibold',\n  bold: 'font-bold',\n  extrabold: 'font-extrabold',\n  black: 'font-black',\n}\nconst FAMILIES: Record<string, string> = {\n  sans: 'font-sans',\n  serif: 'font-serif',\n  mono: 'font-mono',\n}\n\nexport function FormattedText({\n  value,\n  schema,\n  className,\n}: {\n  value: unknown\n  schema: Partial<TextEntrySchema>\n  className?: string\n}) {\n  const t = useT()\n  const [copied, setCopied] = useState(false)\n  // `expandableLimitedList()`: the items past `listLimit` show behind a toggle.\n  const [expanded, setExpanded] = useState(false)\n\n  if (\n    value === null ||\n    value === undefined ||\n    value === '' ||\n    (Array.isArray(value) && value.length === 0)\n  ) {\n    return <span className=\"text-muted-foreground\">{schema.placeholder ?? '—'}</span>\n  }\n\n  if (schema.boolean) {\n    return (\n      <Icon\n        name={value ? 'circle-check' : 'circle-x'}\n        className={cn('size-5', value ? 'text-success' : 'text-danger')}\n      />\n    )\n  }\n\n  const items = Array.isArray(value) ? value : [value]\n  const copy = (text: string) => {\n    void navigator.clipboard?.writeText(text).then(() => {\n      setCopied(true)\n      setTimeout(() => setCopied(false), schema.copyMessageDuration ?? 1500)\n    })\n  }\n\n  // Relationship lists (`tags.name` with a `url()` closure) link each item on its own.\n  const renderItem = (item: unknown, index: number) => {\n    const url = schema.itemUrls?.[index]\n    const content = renderItemContent(item, index)\n\n    if (!url) return content\n\n    return schema.openUrlInNewTab ? (\n      <a\n        key={index}\n        href={url}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className=\"inline-flex hover:underline\"\n      >\n        {content}\n        <NewTabHint />\n      </a>\n    ) : (\n      <Link key={index} href={url} className=\"inline-flex hover:underline\">\n        {content}\n      </Link>\n    )\n  }\n\n  const renderItemContent = (item: unknown, index: number) => {\n    const text = String(item)\n    // Lists of enums whose items differ carry a colour and icon per item.\n    const color = schema.itemColors?.[index] ?? schema.color\n    const icon = schema.itemIcons?.[index] ?? schema.icon\n    const inner = schema.html ? (\n      <span\n        className={cn(schema.prose && 'alfakit-prose')}\n        dangerouslySetInnerHTML={{ __html: text }}\n      />\n    ) : (\n      // <bdi> isolates each value's direction (an English email inside an Arabic page).\n      <bdi\n        className={cn(\n          schema.lineClamp && `line-clamp-${schema.lineClamp}`,\n          !schema.wrap && !schema.lineClamp && 'whitespace-pre-line',\n        )}\n      >\n        {text}\n      </bdi>\n    )\n\n    if (schema.badge) {\n      return (\n        <Badge\n          key={index}\n          variant=\"outline\"\n          className={colorClass(badgeColorClasses, color, 'gray')}\n        >\n          {icon && schema.iconPosition !== 'after' && (\n            <Icon\n              name={icon}\n              className={cn(schema.iconColor && textColorClasses[schema.iconColor])}\n            />\n          )}\n          {inner}\n          {icon && schema.iconPosition === 'after' && <Icon name={icon} />}\n        </Badge>\n      )\n    }\n\n    return (\n      <span\n        key={index}\n        className={cn(\n          'inline-flex items-center gap-1.5',\n          color && textColorClasses[color],\n          schema.size && SIZES[schema.size],\n          schema.weight && WEIGHTS[schema.weight],\n          schema.fontFamily && FAMILIES[schema.fontFamily],\n        )}\n      >\n        {icon && schema.iconPosition !== 'after' && (\n          <Icon\n            name={icon}\n            className={cn(schema.iconColor && textColorClasses[schema.iconColor])}\n          />\n        )}\n        {inner}\n        {icon && schema.iconPosition === 'after' && (\n          <Icon\n            name={icon}\n            className={cn(schema.iconColor && textColorClasses[schema.iconColor])}\n          />\n        )}\n        {schema.copyable && (\n          <button\n            type=\"button\"\n            className=\"text-muted-foreground hover:text-foreground\"\n            onClick={(event) => {\n              // The entry may sit inside a link or a clickable table row.\n              event.preventDefault()\n              event.stopPropagation()\n              copy(text)\n            }}\n            aria-label={t('copy', {}, 'Copy')}\n          >\n            {copied ? <CheckIcon className=\"size-3.5\" /> : <CopyIcon className=\"size-3.5\" />}\n          </button>\n        )}\n        {schema.copyable && copied && (\n          <span role=\"status\" className={cn('text-xs', !schema.copyMessage && 'sr-only')}>\n            {schema.copyMessage ?? t('copied', {}, 'Copied')}\n          </span>\n        )}\n      </span>\n    )\n  }\n\n  if (items.length > 1 || Array.isArray(value)) {\n    const limited = limitedListItems(items, schema, expanded)\n    const canCollapse = expanded && limitedListItems(items, schema, false).hidden > 0\n    const toggle =\n      limited.hidden > 0 || canCollapse ? (\n        <button\n          type=\"button\"\n          data-slot=\"list-expand\"\n          aria-expanded={expanded}\n          className=\"text-primary text-xs hover:underline\"\n          onClick={(event) => {\n            event.preventDefault()\n            event.stopPropagation()\n            setExpanded(!expanded)\n          }}\n        >\n          {expanded\n            ? t('list.show_less', {}, 'Show less')\n            : t('list.show_more', { count: limited.hidden }, `+${limited.hidden} more`)}\n        </button>\n      ) : null\n\n    if (schema.listWithLineBreaks) {\n      return (\n        <ul className={cn('flex flex-col gap-0.5', schema.bulleted && 'list-disc ps-4', className)}>\n          {limited.items.map((item, index) => (\n            <li key={index}>{renderItem(item, index)}</li>\n          ))}\n          {toggle && <li className=\"list-none\">{toggle}</li>}\n        </ul>\n      )\n    }\n\n    return (\n      <span className={cn('flex flex-wrap items-center gap-1', className)}>\n        {limited.items.map(renderItem)}\n        {toggle}\n      </span>\n    )\n  }\n\n  return <span className={className}>{renderItem(items[0], 0)}</span>\n}\n\nexport function TextEntryComponent({ component }: { component: TextEntrySchema }) {\n  const content = <FormattedText value={component.state} schema={component} />\n\n  return (\n    <EntryWrapper entry={component}>\n      {component.state === null || component.state === undefined ? (\n        <EntryPlaceholder entry={component} />\n      ) : component.url ? (\n        component.openUrlInNewTab ? (\n          <a\n            href={component.url}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"hover:underline\"\n          >\n            {content}\n            <NewTabHint />\n          </a>\n        ) : (\n          <Link href={component.url} className=\"hover:underline\">\n            {content}\n          </Link>\n        )\n      ) : (\n        content\n      )}\n    </EntryWrapper>\n  )\n}\n"],"mappings":"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"}

package/dist/components/entries/view-entry.d.ts

@@ -0,0 +1,8 @@
+import { ViewEntrySchema } from "@alfakit/core";
+//#region src/components/entries/view-entry.d.ts
+/** `ViewEntry`: the application component registered under the entry's `view()` name. */
+export declare function ViewEntryComponent({ component }: {
+  component: ViewEntrySchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=view-entry.d.ts.map

package/dist/components/entries/view-entry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-entry.d.ts","names":[],"sources":["../../../src/components/entries/view-entry.tsx"],"mappings":";;;wBAMgB,qBAAqB;EAAe,WAAW;oBAAiB,IAAA"}

package/dist/components/entries/view-entry.js

@@ -0,0 +1,26 @@
+import { useRegistry, useT } from "../../context.js";
+import { EntryWrapper } from "./entry-wrapper.js";
+import { createElement } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/entries/view-entry.tsx
+/** `ViewEntry`: the application component registered under the entry's `view()` name. */
+function ViewEntryComponent({ component }) {
+	const t = useT();
+	const name = component.component ?? "";
+	const Custom = useRegistry().resolve(name);
+	return /* @__PURE__ */ jsx(EntryWrapper, {
+		entry: component,
+		children: name && Custom ? createElement(Custom, {
+			...component.props ?? {},
+			state: component.state,
+			component
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "text-destructive text-xs",
+			children: t("component_not_registered", { component: name }, `Component ${name} is not registered.`)
+		})
+	});
+}
+//#endregion
+export { ViewEntryComponent };
+
+//# sourceMappingURL=view-entry.js.map

package/dist/components/entries/view-entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-entry.js","names":[],"sources":["../../../src/components/entries/view-entry.tsx"],"sourcesContent":["import type { ViewEntrySchema } from '@alfakit/core'\nimport { createElement } from 'react'\nimport { useRegistry, useT } from '../../context'\nimport { EntryWrapper } from './entry-wrapper'\n\n/** `ViewEntry`: the application component registered under the entry's `view()` name. */\nexport function ViewEntryComponent({ component }: { component: ViewEntrySchema }) {\n  const t = useT()\n  const name = component.component ?? ''\n  const Custom = useRegistry().resolve(name)\n\n  return (\n    <EntryWrapper entry={component}>\n      {name && Custom ? (\n        createElement(Custom, { ...(component.props ?? {}), state: component.state, component })\n      ) : (\n        <span className=\"text-destructive text-xs\">\n          {t(\n            'component_not_registered',\n            { component: name },\n            `Component ${name} is not registered.`,\n          )}\n        </span>\n      )}\n    </EntryWrapper>\n  )\n}\n"],"mappings":";;;;;;AAMA,SAAgB,mBAAmB,EAAE,aAA6C;CAChF,MAAM,IAAI,KAAK;CACf,MAAM,OAAO,UAAU,aAAa;CACpC,MAAM,SAAS,YAAY,CAAC,CAAC,QAAQ,IAAI;CAEzC,OACE,oBAAC,cAAD;EAAc,OAAO;EAClB,UAAA,QAAQ,SACP,cAAc,QAAQ;GAAE,GAAI,UAAU,SAAS,CAAC;GAAI,OAAO,UAAU;GAAO;EAAU,CAAC,IAEvF,oBAAC,QAAD;GAAM,WAAU;GACb,UAAA,EACC,4BACA,EAAE,WAAW,KAAK,GAClB,aAAa,KAAK,oBACpB;EACI,CAAA;CAEI,CAAA;AAElB"}

package/dist/components/fields/builder-picker.js

@@ -0,0 +1,215 @@
+import { useDirection, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../lib/icons.js";
+import { Input } from "../ui/input.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
+import { builderPickerMove, canAddBuilderBlock, filterBuilderBlocks, gridColumnsClasses, groupBuilderBlocks, stickyCollisionPadding } from "@alfakit/core";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BlocksIcon, SearchIcon } from "lucide-react";
+//#region src/components/fields/builder-picker.tsx
+/** `blockPickerWidth()`: spelled out so Tailwind generates them. */
+const PICKER_WIDTHS = {
+	"3xs": "w-3xs",
+	"2xs": "w-2xs",
+	xs: "w-xs",
+	sm: "w-sm",
+	md: "w-md",
+	lg: "w-lg",
+	xl: "w-xl",
+	"2xl": "w-2xl",
+	"3xl": "w-3xl",
+	"4xl": "w-4xl",
+	"5xl": "w-5xl",
+	"6xl": "w-6xl",
+	"7xl": "w-7xl",
+	none: "w-auto",
+	min: "w-min",
+	max: "w-max",
+	fit: "w-fit",
+	prose: "w-[65ch]",
+	container: "container",
+	"screen-sm": "w-(--breakpoint-sm)",
+	"screen-md": "w-(--breakpoint-md)",
+	"screen-lg": "w-(--breakpoint-lg)",
+	"screen-xl": "w-(--breakpoint-xl)",
+	"screen-2xl": "w-(--breakpoint-2xl)",
+	full: "w-(--radix-popover-trigger-width)",
+	screen: "w-screen"
+};
+/** Several picker columns at some width: the popover gets room for them. */
+function hasColumns(component) {
+	return Object.values(component.blockPickerColumns ?? {}).some((value) => (value ?? 1) > 1);
+}
+/**
+* The block picker's content: an optional search field on top and the blocks as a grid
+* of cards (icon, label, description) under their group headings. Arrow keys move
+* between the cards, Enter in the search field adds the first match, typing on a card
+* goes back to the search field.
+*/
+function BuilderBlockPickerPanel({ component, items, onPick, autoFocus, className }) {
+	const t = useT();
+	const direction = useDirection();
+	const listId = useId();
+	const [search, setSearch] = useState("");
+	const [query, setQuery] = useState("");
+	const searchRef = useRef(null);
+	const listRef = useRef(null);
+	const prompt = component.blockSearchPrompt ?? t("builder.search_blocks", {}, "Search blocks…");
+	const blocks = filterBuilderBlocks(component.blocks, component.blockSearchDebounce ? query : search);
+	const groups = groupBuilderBlocks(blocks);
+	const columns = component.blockPickerColumns ? gridColumnsClasses(component.blockPickerColumns) : "grid-cols-1";
+	useEffect(() => {
+		if (!component.blockSearchDebounce) return;
+		const timer = setTimeout(() => setQuery(search), component.blockSearchDebounce);
+		return () => clearTimeout(timer);
+	}, [search, component.blockSearchDebounce]);
+	const options = () => [...listRef.current?.querySelectorAll("[data-slot=\"builder-block-option\"]:not(:disabled)") ?? []];
+	useEffect(() => {
+		if (!autoFocus) return;
+		const frame = requestAnimationFrame(() => {
+			if (searchRef.current) searchRef.current.focus();
+			else options()[0]?.focus();
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [autoFocus]);
+	const onListKeyDown = (event) => {
+		const all = options();
+		const current = all.indexOf(event.target);
+		if (current === -1) return;
+		if (searchRef.current && event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			searchRef.current.focus();
+			return;
+		}
+		if (event.key === "ArrowUp" && searchRef.current) {
+			const rects = all.map((option) => option.getBoundingClientRect());
+			if (builderPickerMove("ArrowUp", current, rects, direction === "rtl") === null) {
+				event.preventDefault();
+				searchRef.current.focus();
+				return;
+			}
+		}
+		const next = builderPickerMove(event.key, current, all.map((option) => option.getBoundingClientRect()), direction === "rtl");
+		if (next !== null) {
+			event.preventDefault();
+			all[next]?.focus();
+		}
+	};
+	const onSearchKeyDown = (event) => {
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			options()[0]?.focus();
+		} else if (event.key === "Enter") {
+			event.preventDefault();
+			const first = blocks.find((block) => canAddBuilderBlock(component, block, items));
+			if (first) onPick(first);
+		}
+	};
+	const renderOption = (block) => /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"data-slot": "builder-block-option",
+		"data-block": block.name,
+		disabled: !canAddBuilderBlock(component, block, items),
+		onClick: () => onPick(block),
+		className: "hover:bg-accent focus-visible:bg-accent focus-visible:ring-ring/50 flex w-full min-w-0 items-start gap-3 rounded-md p-2 text-start outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "bg-muted text-foreground flex size-9 shrink-0 items-center justify-center rounded-md border [&_svg]:size-4",
+			"aria-hidden": "true",
+			children: block.icon ? /* @__PURE__ */ jsx(Icon, { name: block.icon }) : /* @__PURE__ */ jsx(BlocksIcon, {})
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm leading-tight font-medium",
+				children: block.label
+			}), block.description && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs leading-snug",
+				"data-slot": "builder-block-description",
+				children: block.description
+			})]
+		})]
+	}, block.name);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "builder-picker",
+		className: cn("flex min-h-0 flex-col", className),
+		children: [component.blockSearch && /* @__PURE__ */ jsx("div", {
+			className: "border-b p-2",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ jsx(SearchIcon, {
+					className: "text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ jsx(Input, {
+					ref: searchRef,
+					value: search,
+					onChange: (event) => setSearch(event.target.value),
+					onKeyDown: onSearchKeyDown,
+					placeholder: prompt,
+					"aria-label": prompt,
+					"aria-controls": listId,
+					"data-slot": "builder-block-search",
+					className: "h-9 ps-8"
+				})]
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			id: listId,
+			ref: listRef,
+			onKeyDown: onListKeyDown,
+			className: "min-h-0 flex-1 overflow-y-auto p-2",
+			children: blocks.length === 0 ? /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "text-muted-foreground px-2 py-6 text-center text-sm",
+				children: component.blockNoSearchResultsMessage ?? t("no_results", {}, "No results.")
+			}) : groups.map((entry) => /* @__PURE__ */ jsxs("div", {
+				role: "group",
+				"aria-label": entry.group ?? void 0,
+				"data-slot": "builder-block-group",
+				className: "not-first:mt-2",
+				children: [entry.group !== null && /* @__PURE__ */ jsx("p", {
+					"aria-hidden": "true",
+					className: "text-muted-foreground px-2 pt-1 pb-1.5 text-xs font-medium tracking-wide uppercase",
+					children: entry.group
+				}), /* @__PURE__ */ jsx("div", {
+					className: cn("grid gap-1", columns),
+					children: entry.blocks.map(renderOption)
+				})]
+			}, entry.group ?? ""))
+		})]
+	});
+}
+/**
+* The "Add block" button and its picker, anchored below the button (above it when there
+* is no room) and never wider or taller than the screen.
+*/
+function BuilderBlockPicker({ component, items, onPick, trigger }) {
+	const t = useT();
+	const [open, setOpen] = useState(false);
+	const collisionPadding = useMemo(() => open ? stickyCollisionPadding() : 16, [open]);
+	const width = component.blockPickerWidth ? cn(PICKER_WIDTHS[component.blockPickerWidth], "max-w-[calc(100vw-2rem)]") : hasColumns(component) ? "w-[min(42rem,calc(100vw-2rem))]" : "w-[min(22rem,calc(100vw-2rem))]";
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: trigger
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			align: "start",
+			side: "bottom",
+			collisionPadding,
+			"aria-label": t("builder.pick_block", {}, "Choose a block"),
+			className: cn("flex max-h-[min(34rem,var(--radix-popover-content-available-height))] flex-col overflow-hidden p-0", width),
+			children: open && /* @__PURE__ */ jsx(BuilderBlockPickerPanel, {
+				component,
+				items,
+				autoFocus: true,
+				onPick: (block) => {
+					setOpen(false);
+					onPick(block);
+				}
+			})
+		})]
+	});
+}
+//#endregion
+export { BuilderBlockPicker, BuilderBlockPickerPanel };
+
+//# sourceMappingURL=builder-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"builder-picker.js","names":[],"sources":["../../../src/components/fields/builder-picker.tsx"],"sourcesContent":["import type { BuilderBlockSchema, BuilderItemState, BuilderSchema } from '@alfakit/core'\nimport {\n  builderPickerMove,\n  canAddBuilderBlock,\n  filterBuilderBlocks,\n  gridColumnsClasses,\n  groupBuilderBlocks,\n  stickyCollisionPadding,\n} from '@alfakit/core'\nimport { BlocksIcon, SearchIcon } from 'lucide-react'\nimport {\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { useDirection, useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { Input } from '../ui/input'\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'\n\n/** `blockPickerWidth()`: spelled out so Tailwind generates them. */\nconst PICKER_WIDTHS: Record<string, string> = {\n  '3xs': 'w-3xs',\n  '2xs': 'w-2xs',\n  xs: 'w-xs',\n  sm: 'w-sm',\n  md: 'w-md',\n  lg: 'w-lg',\n  xl: 'w-xl',\n  '2xl': 'w-2xl',\n  '3xl': 'w-3xl',\n  '4xl': 'w-4xl',\n  '5xl': 'w-5xl',\n  '6xl': 'w-6xl',\n  '7xl': 'w-7xl',\n  none: 'w-auto',\n  min: 'w-min',\n  max: 'w-max',\n  fit: 'w-fit',\n  prose: 'w-[65ch]',\n  container: 'container',\n  'screen-sm': 'w-(--breakpoint-sm)',\n  'screen-md': 'w-(--breakpoint-md)',\n  'screen-lg': 'w-(--breakpoint-lg)',\n  'screen-xl': 'w-(--breakpoint-xl)',\n  'screen-2xl': 'w-(--breakpoint-2xl)',\n  full: 'w-(--radix-popover-trigger-width)',\n  screen: 'w-screen',\n}\n\n/** Several picker columns at some width: the popover gets room for them. */\nfunction hasColumns(component: BuilderSchema): boolean {\n  return Object.values(component.blockPickerColumns ?? {}).some((value) => (value ?? 1) > 1)\n}\n\ninterface PanelProps {\n  component: BuilderSchema\n  items: BuilderItemState[]\n  onPick: (block: BuilderBlockSchema) => void\n  /** Focus the search field (or the first block) when shown. */\n  autoFocus?: boolean\n  className?: string\n}\n\n/**\n * The block picker's content: an optional search field on top and the blocks as a grid\n * of cards (icon, label, description) under their group headings. Arrow keys move\n * between the cards, Enter in the search field adds the first match, typing on a card\n * goes back to the search field.\n */\nexport function BuilderBlockPickerPanel({\n  component,\n  items,\n  onPick,\n  autoFocus,\n  className,\n}: PanelProps) {\n  const t = useT()\n  const direction = useDirection()\n  const listId = useId()\n  const [search, setSearch] = useState('')\n  const [query, setQuery] = useState('')\n  const searchRef = useRef<HTMLInputElement>(null)\n  const listRef = useRef<HTMLDivElement>(null)\n  const prompt = component.blockSearchPrompt ?? t('builder.search_blocks', {}, 'Search blocks…')\n  const blocks = filterBuilderBlocks(\n    component.blocks,\n    component.blockSearchDebounce ? query : search,\n  )\n  const groups = groupBuilderBlocks(blocks)\n  const columns = component.blockPickerColumns\n    ? gridColumnsClasses(component.blockPickerColumns)\n    : 'grid-cols-1'\n\n  useEffect(() => {\n    if (!component.blockSearchDebounce) return\n\n    const timer = setTimeout(() => setQuery(search), component.blockSearchDebounce)\n\n    return () => clearTimeout(timer)\n  }, [search, component.blockSearchDebounce])\n\n  const options = () =>\n    [\n      ...(listRef.current?.querySelectorAll<HTMLButtonElement>(\n        '[data-slot=\"builder-block-option\"]:not(:disabled)',\n      ) ?? []),\n    ] as HTMLButtonElement[]\n\n  useEffect(() => {\n    if (!autoFocus) return\n\n    const frame = requestAnimationFrame(() => {\n      if (searchRef.current) searchRef.current.focus()\n      else options()[0]?.focus()\n    })\n\n    return () => cancelAnimationFrame(frame)\n  }, [autoFocus])\n\n  const onListKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const all = options()\n    const current = all.indexOf(event.target as HTMLButtonElement)\n\n    if (current === -1) return\n\n    // Typing on a card goes on in the search field.\n    if (\n      searchRef.current &&\n      event.key.length === 1 &&\n      event.key !== ' ' &&\n      !event.ctrlKey &&\n      !event.metaKey &&\n      !event.altKey\n    ) {\n      searchRef.current.focus()\n\n      return\n    }\n\n    if (event.key === 'ArrowUp' && searchRef.current) {\n      const rects = all.map((option) => option.getBoundingClientRect())\n\n      if (builderPickerMove('ArrowUp', current, rects, direction === 'rtl') === null) {\n        event.preventDefault()\n        searchRef.current.focus()\n\n        return\n      }\n    }\n\n    const next = builderPickerMove(\n      event.key,\n      current,\n      all.map((option) => option.getBoundingClientRect()),\n      direction === 'rtl',\n    )\n\n    if (next !== null) {\n      event.preventDefault()\n      all[next]?.focus()\n    }\n  }\n\n  const onSearchKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      options()[0]?.focus()\n    } else if (event.key === 'Enter') {\n      event.preventDefault()\n      const first = blocks.find((block) => canAddBuilderBlock(component, block, items))\n\n      if (first) onPick(first)\n    }\n  }\n\n  const renderOption = (block: BuilderBlockSchema): ReactNode => (\n    <button\n      key={block.name}\n      type=\"button\"\n      data-slot=\"builder-block-option\"\n      data-block={block.name}\n      disabled={!canAddBuilderBlock(component, block, items)}\n      onClick={() => onPick(block)}\n      className=\"hover:bg-accent focus-visible:bg-accent focus-visible:ring-ring/50 flex w-full min-w-0 items-start gap-3 rounded-md p-2 text-start outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50\"\n    >\n      <span\n        className=\"bg-muted text-foreground flex size-9 shrink-0 items-center justify-center rounded-md border [&_svg]:size-4\"\n        aria-hidden=\"true\"\n      >\n        {block.icon ? <Icon name={block.icon} /> : <BlocksIcon />}\n      </span>\n      <span className=\"flex min-w-0 flex-col gap-0.5\">\n        <span className=\"text-sm leading-tight font-medium\">{block.label}</span>\n        {block.description && (\n          <span\n            className=\"text-muted-foreground text-xs leading-snug\"\n            data-slot=\"builder-block-description\"\n          >\n            {block.description}\n          </span>\n        )}\n      </span>\n    </button>\n  )\n\n  return (\n    <div data-slot=\"builder-picker\" className={cn('flex min-h-0 flex-col', className)}>\n      {component.blockSearch && (\n        <div className=\"border-b p-2\">\n          <div className=\"relative\">\n            <SearchIcon\n              className=\"text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2\"\n              aria-hidden=\"true\"\n            />\n            <Input\n              ref={searchRef}\n              value={search}\n              onChange={(event) => setSearch(event.target.value)}\n              onKeyDown={onSearchKeyDown}\n              placeholder={prompt}\n              aria-label={prompt}\n              aria-controls={listId}\n              data-slot=\"builder-block-search\"\n              className=\"h-9 ps-8\"\n            />\n          </div>\n        </div>\n      )}\n      <div\n        id={listId}\n        ref={listRef}\n        onKeyDown={onListKeyDown}\n        className=\"min-h-0 flex-1 overflow-y-auto p-2\"\n      >\n        {blocks.length === 0 ? (\n          <p role=\"status\" className=\"text-muted-foreground px-2 py-6 text-center text-sm\">\n            {component.blockNoSearchResultsMessage ?? t('no_results', {}, 'No results.')}\n          </p>\n        ) : (\n          groups.map((entry) => (\n            <div\n              key={entry.group ?? ''}\n              role=\"group\"\n              aria-label={entry.group ?? undefined}\n              data-slot=\"builder-block-group\"\n              className=\"not-first:mt-2\"\n            >\n              {entry.group !== null && (\n                <p\n                  aria-hidden=\"true\"\n                  className=\"text-muted-foreground px-2 pt-1 pb-1.5 text-xs font-medium tracking-wide uppercase\"\n                >\n                  {entry.group}\n                </p>\n              )}\n              <div className={cn('grid gap-1', columns)}>{entry.blocks.map(renderOption)}</div>\n            </div>\n          ))\n        )}\n      </div>\n    </div>\n  )\n}\n\n/**\n * The \"Add block\" button and its picker, anchored below the button (above it when there\n * is no room) and never wider or taller than the screen.\n */\nexport function BuilderBlockPicker({\n  component,\n  items,\n  onPick,\n  trigger,\n}: {\n  component: BuilderSchema\n  items: BuilderItemState[]\n  onPick: (block: BuilderBlockSchema) => void\n  trigger: ReactNode\n}) {\n  const t = useT()\n  const [open, setOpen] = useState(false)\n  // Opening upwards near the top of the page, stay below the sticky topbar.\n  const collisionPadding = useMemo(() => (open ? stickyCollisionPadding() : 16), [open])\n  const width = component.blockPickerWidth\n    ? cn(PICKER_WIDTHS[component.blockPickerWidth], 'max-w-[calc(100vw-2rem)]')\n    : hasColumns(component)\n      ? 'w-[min(42rem,calc(100vw-2rem))]'\n      : 'w-[min(22rem,calc(100vw-2rem))]'\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>{trigger}</PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        side=\"bottom\"\n        collisionPadding={collisionPadding}\n        aria-label={t('builder.pick_block', {}, 'Choose a block')}\n        className={cn(\n          'flex max-h-[min(34rem,var(--radix-popover-content-available-height))] flex-col overflow-hidden p-0',\n          width,\n        )}\n      >\n        {open && (\n          <BuilderBlockPickerPanel\n            component={component}\n            items={items}\n            autoFocus\n            onPick={(block) => {\n              setOpen(false)\n              onPick(block)\n            }}\n          />\n        )}\n      </PopoverContent>\n    </Popover>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,16 @@
+import { BuilderSchema } from "@alfakit/core";
+//#region src/components/fields/builder.d.ts
+/**
+ * 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).
+ */
+export declare function BuilderField({ component }: {
+  component: BuilderSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=builder.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"builder.d.ts","names":[],"sources":["../../../src/components/fields/builder.tsx"],"mappings":";;;;;;;;;;;wBAmEgB,eAAe;EAAe,WAAW;oBAAe,IAAA"}