@alfakit/react 0.0.0-stage → 0.1.1

package/dist/components/layout/fieldset.js

@@ -0,0 +1,29 @@
+import { cn } from "../../lib/utils.js";
+import { extraProps } from "../../lib/attributes.js";
+import { DeferredSchema } from "./deferred.js";
+import { SchemaRenderer } from "../schema/schema-renderer.js";
+import { schemaGapClass } from "@alfakit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/layout/fieldset.tsx
+function FieldsetComponent({ component }) {
+	const contained = component.contained !== false;
+	return /* @__PURE__ */ jsxs("fieldset", {
+		"data-contained": contained ? void 0 : "false",
+		...extraProps(component.extraAttributes, cn(contained ? "rounded-xl border p-4 pt-3" : "min-w-0")),
+		children: [component.label && /* @__PURE__ */ jsx("legend", {
+			className: cn("text-sm font-medium", contained ? "px-1" : "mb-3"),
+			children: component.label
+		}), /* @__PURE__ */ jsx(DeferredSchema, {
+			component,
+			children: (loaded) => /* @__PURE__ */ jsx(SchemaRenderer, {
+				components: loaded.schema ?? [],
+				columns: loaded.columns,
+				className: schemaGapClass(loaded) || void 0
+			})
+		})]
+	});
+}
+//#endregion
+export { FieldsetComponent };
+
+//# sourceMappingURL=fieldset.js.map

package/dist/components/layout/fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldset.js","names":[],"sources":["../../../src/components/layout/fieldset.tsx"],"sourcesContent":["import type { FieldsetSchema } from '@alfakit/core'\nimport { schemaGapClass } from '@alfakit/core'\nimport { extraProps } from '../../lib/attributes'\nimport { cn } from '../../lib/utils'\nimport { SchemaRenderer } from '../schema/schema-renderer'\nimport { DeferredSchema } from './deferred'\n\nexport function FieldsetComponent({ component }: { component: FieldsetSchema }) {\n  const contained = component.contained !== false\n\n  return (\n    <fieldset\n      data-contained={contained ? undefined : 'false'}\n      {...extraProps(\n        component.extraAttributes,\n        cn(contained ? 'rounded-xl border p-4 pt-3' : 'min-w-0'),\n      )}\n    >\n      {component.label && (\n        <legend className={cn('text-sm font-medium', contained ? 'px-1' : 'mb-3')}>\n          {component.label}\n        </legend>\n      )}\n      <DeferredSchema component={component}>\n        {(loaded) => (\n          <SchemaRenderer\n            components={loaded.schema ?? []}\n            columns={loaded.columns}\n            className={schemaGapClass(loaded) || undefined}\n          />\n        )}\n      </DeferredSchema>\n    </fieldset>\n  )\n}\n"],"mappings":";;;;;;;AAOA,SAAgB,kBAAkB,EAAE,aAA4C;CAC9E,MAAM,YAAY,UAAU,cAAc;CAE1C,OACE,qBAAC,YAAD;EACE,kBAAgB,YAAY,KAAA,IAAY;EACxC,GAAI,WACF,UAAU,iBACV,GAAG,YAAY,+BAA+B,SAAS,CACzD;EALF,UAAA,CAOG,UAAU,SACT,oBAAC,UAAD;GAAQ,WAAW,GAAG,uBAAuB,YAAY,SAAS,MAAM;GACrE,UAAA,UAAU;EACL,CAAA,GAEV,oBAAC,gBAAD;GAA2B;GACvB,WAAA,WACA,oBAAC,gBAAD;IACE,YAAY,OAAO,UAAU,CAAC;IAC9B,SAAS,OAAO;IAChB,WAAW,eAAe,MAAM,KAAK,KAAA;GACtC,CAAA;EAEW,CAAA,CACR;;AAEd"}

package/dist/components/layout/fused-group.d.ts

@@ -0,0 +1,11 @@
+import { FusedGroupSchema } from "@alfakit/core";
+//#region src/components/layout/fused-group.d.ts
+/**
+ * Fields fused into one control: one border around them (styled by `themes.css`), the
+ * group label above, and the fields' validation errors below.
+ */
+export declare function FusedGroupComponent({ component }: {
+  component: FusedGroupSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=fused-group.d.ts.map

package/dist/components/layout/fused-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fused-group.d.ts","names":[],"sources":["../../../src/components/layout/fused-group.tsx"],"mappings":";;;;;;wBAcgB,sBAAsB;EAAe,WAAW;oBAAkB,IAAA"}

package/dist/components/layout/fused-group.js

@@ -0,0 +1,64 @@
+import { cn } from "../../lib/utils.js";
+import { useStoreSelector } from "../../hooks/use-store.js";
+import { extraProps } from "../../lib/attributes.js";
+import { useOptionalFormStore } from "../form/form-context.js";
+import { RenderComponent } from "../schema/schema-renderer.js";
+import { FusedGroupContext } from "../schema/fused-group-context.js";
+import { collectFieldStatePaths, gridColumnsClasses } from "@alfakit/core";
+import { useId, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/layout/fused-group.tsx
+/**
+* Fields fused into one control: one border around them (styled by `themes.css`), the
+* group label above, and the fields' validation errors below.
+*/
+function FusedGroupComponent({ component }) {
+	const labelId = `${useId()}-label`;
+	const store = useOptionalFormStore();
+	const paths = useMemo(() => collectFieldStatePaths(component.schema), [component.schema]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "fused-group",
+		role: "group",
+		"aria-labelledby": component.label ? labelId : void 0,
+		...extraProps(component.extraAttributes, "flex flex-col gap-1.5"),
+		children: [component.label && /* @__PURE__ */ jsx("span", {
+			id: labelId,
+			className: "text-sm leading-none font-medium select-none",
+			children: component.label
+		}), store ? /* @__PURE__ */ jsx(FusedGroupBody, {
+			component,
+			store,
+			paths
+		}) : /* @__PURE__ */ jsx(FusedGroupControls, { component })]
+	});
+}
+function FusedGroupBody({ component, store, paths }) {
+	const joined = useStoreSelector(store.store, (state) => paths.map((path) => state.errors[path]?.[0]).filter((message) => Boolean(message)).join("\n"));
+	const errors = joined === "" ? [] : joined.split("\n");
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FusedGroupControls, {
+		component,
+		invalid: errors.length > 0
+	}), errors.length > 0 && /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		className: "flex flex-col gap-0.5",
+		children: errors.map((message, index) => /* @__PURE__ */ jsx("p", {
+			className: "text-destructive text-xs",
+			children: message
+		}, index))
+	})] });
+}
+function FusedGroupControls({ component, invalid = false }) {
+	return /* @__PURE__ */ jsx(FusedGroupContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "fused-group-controls",
+			"data-invalid": invalid ? "" : void 0,
+			className: cn("grid", gridColumnsClasses(component.columns ?? { default: 1 })),
+			children: (component.schema ?? []).map((child) => /* @__PURE__ */ jsx(RenderComponent, { component: child }, child.key))
+		})
+	});
+}
+//#endregion
+export { FusedGroupComponent };
+
+//# sourceMappingURL=fused-group.js.map

package/dist/components/layout/fused-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fused-group.js","names":[],"sources":["../../../src/components/layout/fused-group.tsx"],"sourcesContent":["import type { FormStore, FusedGroupSchema } from '@alfakit/core'\nimport { collectFieldStatePaths, gridColumnsClasses } from '@alfakit/core'\nimport { useId, useMemo } from 'react'\nimport { useStoreSelector } from '../../hooks/use-store'\nimport { extraProps } from '../../lib/attributes'\nimport { cn } from '../../lib/utils'\nimport { useOptionalFormStore } from '../form/form-context'\nimport { FusedGroupContext } from '../schema/fused-group-context'\nimport { RenderComponent } from '../schema/schema-renderer'\n\n/**\n * Fields fused into one control: one border around them (styled by `themes.css`), the\n * group label above, and the fields' validation errors below.\n */\nexport function FusedGroupComponent({ component }: { component: FusedGroupSchema }) {\n  const labelId = `${useId()}-label`\n  const store = useOptionalFormStore()\n  const paths = useMemo(() => collectFieldStatePaths(component.schema), [component.schema])\n\n  return (\n    <div\n      data-slot=\"fused-group\"\n      role=\"group\"\n      aria-labelledby={component.label ? labelId : undefined}\n      {...extraProps(component.extraAttributes, 'flex flex-col gap-1.5')}\n    >\n      {component.label && (\n        <span id={labelId} className=\"text-sm leading-none font-medium select-none\">\n          {component.label}\n        </span>\n      )}\n      {store ? (\n        <FusedGroupBody component={component} store={store} paths={paths} />\n      ) : (\n        <FusedGroupControls component={component} />\n      )}\n    </div>\n  )\n}\n\nfunction FusedGroupBody({\n  component,\n  store,\n  paths,\n}: {\n  component: FusedGroupSchema\n  store: FormStore\n  paths: string[]\n}) {\n  // A joined string keeps the selected snapshot stable between renders.\n  const joined = useStoreSelector(store.store, (state) =>\n    paths\n      .map((path) => state.errors[path]?.[0])\n      .filter((message): message is string => Boolean(message))\n      .join('\\n'),\n  )\n  const errors = joined === '' ? [] : joined.split('\\n')\n\n  return (\n    <>\n      <FusedGroupControls component={component} invalid={errors.length > 0} />\n      {errors.length > 0 && (\n        // The fields announce their own errors; this list is the visible copy.\n        <div aria-hidden=\"true\" className=\"flex flex-col gap-0.5\">\n          {errors.map((message, index) => (\n            <p key={index} className=\"text-destructive text-xs\">\n              {message}\n            </p>\n          ))}\n        </div>\n      )}\n    </>\n  )\n}\n\nfunction FusedGroupControls({\n  component,\n  invalid = false,\n}: {\n  component: FusedGroupSchema\n  invalid?: boolean\n}) {\n  return (\n    <FusedGroupContext.Provider value={true}>\n      <div\n        data-slot=\"fused-group-controls\"\n        data-invalid={invalid ? '' : undefined}\n        className={cn('grid', gridColumnsClasses(component.columns ?? { default: 1 }))}\n      >\n        {(component.schema ?? []).map((child) => (\n          <RenderComponent key={child.key} component={child} />\n        ))}\n      </div>\n    </FusedGroupContext.Provider>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAcA,SAAgB,oBAAoB,EAAE,aAA8C;CAClF,MAAM,UAAU,GAAG,MAAM,EAAE;CAC3B,MAAM,QAAQ,qBAAqB;CACnC,MAAM,QAAQ,cAAc,uBAAuB,UAAU,MAAM,GAAG,CAAC,UAAU,MAAM,CAAC;CAExF,OACE,qBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,mBAAiB,UAAU,QAAQ,UAAU,KAAA;EAC7C,GAAI,WAAW,UAAU,iBAAiB,uBAAuB;EAJnE,UAAA,CAMG,UAAU,SACT,oBAAC,QAAD;GAAM,IAAI;GAAS,WAAU;GAC1B,UAAA,UAAU;EACP,CAAA,GAEP,QACC,oBAAC,gBAAD;GAA2B;GAAkB;GAAc;EAAQ,CAAA,IAEnE,oBAAC,oBAAD,EAA+B,UAAY,CAAA,CAE1C;;AAET;AAEA,SAAS,eAAe,EACtB,WACA,OACA,SAKC;CAED,MAAM,SAAS,iBAAiB,MAAM,QAAQ,UAC5C,MACG,KAAK,SAAS,MAAM,OAAO,KAAK,GAAG,EAAE,CAAC,CACtC,QAAQ,YAA+B,QAAQ,OAAO,CAAC,CAAC,CACxD,KAAK,IAAI,CACd;CACA,MAAM,SAAS,WAAW,KAAK,CAAC,IAAI,OAAO,MAAM,IAAI;CAErD,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,oBAAD;EAA+B;EAAW,SAAS,OAAO,SAAS;CAAI,CAAA,GACtE,OAAO,SAAS,KAEf,oBAAC,OAAD;EAAK,eAAY;EAAO,WAAU;EAC/B,UAAA,OAAO,KAAK,SAAS,UACpB,oBAAC,KAAD;GAAe,WAAU;GACtB,UAAA;EACA,GAFK,KAEL,CACJ;CACE,CAAA,CAEP,EAAA,CAAA;AAEN;AAEA,SAAS,mBAAmB,EAC1B,WACA,UAAU,SAIT;CACD,OACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;EACjC,UAAA,oBAAC,OAAD;GACE,aAAU;GACV,gBAAc,UAAU,KAAK,KAAA;GAC7B,WAAW,GAAG,QAAQ,mBAAmB,UAAU,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC;GAE3E,WAAA,UAAU,UAAU,CAAC,EAAA,CAAG,KAAK,UAC7B,oBAAC,iBAAD,EAAiC,WAAW,MAAQ,GAA9B,MAAM,GAAwB,CACrD;EACE,CAAA;CACqB,CAAA;AAEhC"}

package/dist/components/layout/grid.d.ts

@@ -0,0 +1,7 @@
+import { GridSchema, GroupSchema } from "@alfakit/core";
+//#region src/components/layout/grid.d.ts
+export declare function GridComponent({ component }: {
+  component: GridSchema | GroupSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=grid.d.ts.map

package/dist/components/layout/grid.d.ts.map

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

package/dist/components/layout/grid.js

@@ -0,0 +1,20 @@
+import { DeferredSchema } from "./deferred.js";
+import { SchemaRenderer } from "../schema/schema-renderer.js";
+import { schemaGapClass } from "@alfakit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/layout/grid.tsx
+function GridComponent({ component }) {
+	return /* @__PURE__ */ jsx(DeferredSchema, {
+		component,
+		children: (loaded) => /* @__PURE__ */ jsx(SchemaRenderer, {
+			components: loaded.schema ?? [],
+			columns: loaded.columns,
+			attributes: loaded.extraAttributes,
+			className: schemaGapClass(loaded) || void 0
+		})
+	});
+}
+//#endregion
+export { GridComponent };
+
+//# sourceMappingURL=grid.js.map

package/dist/components/layout/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","names":[],"sources":["../../../src/components/layout/grid.tsx"],"sourcesContent":["import type { GridSchema, GroupSchema } from '@alfakit/core'\nimport { schemaGapClass } from '@alfakit/core'\nimport { SchemaRenderer } from '../schema/schema-renderer'\nimport { DeferredSchema } from './deferred'\n\nexport function GridComponent({ component }: { component: GridSchema | GroupSchema }) {\n  return (\n    <DeferredSchema component={component}>\n      {(loaded) => (\n        <SchemaRenderer\n          components={loaded.schema ?? []}\n          columns={loaded.columns}\n          attributes={loaded.extraAttributes}\n          className={schemaGapClass(loaded) || undefined}\n        />\n      )}\n    </DeferredSchema>\n  )\n}\n"],"mappings":";;;;;AAKA,SAAgB,cAAc,EAAE,aAAsD;CACpF,OACE,oBAAC,gBAAD;EAA2B;EACvB,WAAA,WACA,oBAAC,gBAAD;GACE,YAAY,OAAO,UAAU,CAAC;GAC9B,SAAS,OAAO;GAChB,YAAY,OAAO;GACnB,WAAW,eAAe,MAAM,KAAK,KAAA;EACtC,CAAA;CAEW,CAAA;AAEpB"}

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

@@ -0,0 +1,12 @@
+import { useSchemaComponentContext } from "./component-context.js";
+import { CalloutComponent, EmptyStateComponent, FlexComponent, IconComponent, ImageComponent, UnorderedListComponent } from "./elements.js";
+import { FieldsetComponent } from "./fieldset.js";
+import { FusedGroupComponent } from "./fused-group.js";
+import { GridComponent } from "./grid.js";
+import { MixedContent } from "./mixed-content.js";
+import { HtmlComponent, PlaceholderComponent, TextComponent, ViewComponent } from "./prime.js";
+import { SchemaChildren } from "./schema-children.js";
+import { SectionComponent } from "./section.js";
+import { TabsComponent } from "./tabs.js";
+import { WizardComponent } from "./wizard.js";
+export { CalloutComponent, EmptyStateComponent, FieldsetComponent, FlexComponent, FusedGroupComponent, GridComponent, HtmlComponent, IconComponent, ImageComponent, MixedContent, PlaceholderComponent, SchemaChildren, SectionComponent, TabsComponent, TextComponent, UnorderedListComponent, ViewComponent, WizardComponent, useSchemaComponentContext };

package/dist/components/layout/mixed-content.d.ts

@@ -0,0 +1,14 @@
+import { ContentSlotItem } from "@alfakit/core";
+//#region src/components/layout/mixed-content.d.ts
+/**
+ * Actions and components placed in a layout component's fixed spot (a section's
+ * `afterHeader()`, a callout's `controls()`). Actions run in the page's action context,
+ * like section header actions.
+ */
+export declare function MixedContent({ items, name, className }: {
+  items: ContentSlotItem[] | undefined;
+  name: string;
+  className?: string;
+}): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=mixed-content.d.ts.map

package/dist/components/layout/mixed-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mixed-content.d.ts","names":[],"sources":["../../../src/components/layout/mixed-content.tsx"],"mappings":";;;;;;;wBAYgB,eACd,OACA,MACA;EAEA,OAAO;EACP;EACA;oBACD,IAAA"}

package/dist/components/layout/mixed-content.js

@@ -0,0 +1,44 @@
+import { usePageActionContext } from "../actions/action-context.js";
+import { cn } from "../../lib/utils.js";
+import { ActionList } from "../actions/action-list.js";
+import { RenderComponent } from "../schema/schema-renderer.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/layout/mixed-content.tsx
+/**
+* Actions and components placed in a layout component's fixed spot (a section's
+* `afterHeader()`, a callout's `controls()`). Actions run in the page's action context,
+* like section header actions.
+*/
+function MixedContent({ items, name, className }) {
+	const context = usePageActionContext();
+	if (!items?.length) return null;
+	const nodes = [];
+	let actions = [];
+	const flush = () => {
+		if (actions.length === 0) return;
+		nodes.push(/* @__PURE__ */ jsx(ActionList, {
+			actions,
+			context,
+			size: "sm"
+		}, `actions-${nodes.length}`));
+		actions = [];
+	};
+	for (const item of items) {
+		if (item.action) {
+			actions.push(item.action);
+			continue;
+		}
+		flush();
+		nodes.push(/* @__PURE__ */ jsx(RenderComponent, { component: item.component }, item.component.key));
+	}
+	flush();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": name,
+		className: cn("flex flex-wrap items-center gap-2", className),
+		children: nodes
+	});
+}
+//#endregion
+export { MixedContent };
+
+//# sourceMappingURL=mixed-content.js.map

package/dist/components/layout/mixed-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mixed-content.js","names":[],"sources":["../../../src/components/layout/mixed-content.tsx"],"sourcesContent":["import type { AnyActionSchema, ContentSlotItem } from '@alfakit/core'\nimport type { ReactNode } from 'react'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { ActionList } from '../actions/action-list'\nimport { RenderComponent } from '../schema/schema-renderer'\n\n/**\n * Actions and components placed in a layout component's fixed spot (a section's\n * `afterHeader()`, a callout's `controls()`). Actions run in the page's action context,\n * like section header actions.\n */\nexport function MixedContent({\n  items,\n  name,\n  className,\n}: {\n  items: ContentSlotItem[] | undefined\n  name: string\n  className?: string\n}) {\n  const context = usePageActionContext()\n\n  if (!items?.length) {\n    return null\n  }\n\n  // Consecutive actions share one action list so they sit together.\n  const nodes: ReactNode[] = []\n  let actions: AnyActionSchema[] = []\n\n  const flush = () => {\n    if (actions.length === 0) return\n\n    nodes.push(\n      <ActionList key={`actions-${nodes.length}`} actions={actions} context={context} size=\"sm\" />,\n    )\n    actions = []\n  }\n\n  for (const item of items) {\n    if (item.action) {\n      actions.push(item.action)\n\n      continue\n    }\n\n    flush()\n    nodes.push(<RenderComponent key={item.component.key} component={item.component} />)\n  }\n\n  flush()\n\n  return (\n    <div data-slot={name} className={cn('flex flex-wrap items-center gap-2', className)}>\n      {nodes}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAYA,SAAgB,aAAa,EAC3B,OACA,MACA,aAKC;CACD,MAAM,UAAU,qBAAqB;CAErC,IAAI,CAAC,OAAO,QACV,OAAO;CAIT,MAAM,QAAqB,CAAC;CAC5B,IAAI,UAA6B,CAAC;CAElC,MAAM,cAAc;EAClB,IAAI,QAAQ,WAAW,GAAG;EAE1B,MAAM,KACJ,oBAAC,YAAD;GAAqD;GAAkB;GAAS,MAAK;EAAM,GAA1E,WAAW,MAAM,QAAyD,CAC7F;EACA,UAAU,CAAC;CACb;CAEA,KAAK,MAAM,QAAQ,OAAO;EACxB,IAAI,KAAK,QAAQ;GACf,QAAQ,KAAK,KAAK,MAAM;GAExB;EACF;EAEA,MAAM;EACN,MAAM,KAAK,oBAAC,iBAAD,EAA0C,WAAW,KAAK,UAAY,GAAhD,KAAK,UAAU,GAAiC,CAAC;CACpF;CAEA,MAAM;CAEN,OACE,oBAAC,OAAD;EAAK,aAAW;EAAM,WAAW,GAAG,qCAAqC,SAAS;EAC/E,UAAA;CACE,CAAA;AAET"}

package/dist/components/layout/prime.d.ts

@@ -0,0 +1,17 @@
+import { HtmlSchema, PlaceholderSchema, TextSchema, ViewSchema } from "@alfakit/core";
+//#region src/components/layout/prime.d.ts
+export declare function PlaceholderComponent({ component }: {
+  component: PlaceholderSchema;
+}): import("react").JSX.Element;
+export declare function HtmlComponent({ component }: {
+  component: HtmlSchema;
+}): import("react").JSX.Element;
+export declare function TextComponent({ component }: {
+  component: TextSchema;
+}): import("react").JSX.Element;
+/** Custom component registered by the application through `createAlfakit({ components })`. */
+export declare function ViewComponent({ component }: {
+  component: ViewSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=prime.d.ts.map

package/dist/components/layout/prime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prime.d.ts","names":[],"sources":["../../../src/components/layout/prime.tsx"],"mappings":";;wBAYgB,uBAAuB;EAAe,WAAW;oBAAmB,IAAA;wBAepE,gBAAgB;EAAe,WAAW;oBAAY,IAAA;wBAuCtD,gBAAgB;EAAe,WAAW;oBAAY,IAAA;;wBAmFtD,gBAAgB;EAAe,WAAW;oBAAY,IAAA"}

package/dist/components/layout/prime.js

@@ -0,0 +1,126 @@
+import { useRegistry, 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 { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
+import { extraProps } from "../../lib/attributes.js";
+import { Label } from "../ui/label.js";
+import { createElement, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "lucide-react";
+//#region src/components/layout/prime.tsx
+function PlaceholderComponent({ component }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "field",
+		...extraProps(component.extraAttributes, "flex flex-col gap-1.5"),
+		children: [
+			component.label && /* @__PURE__ */ jsx(Label, { children: component.label }),
+			/* @__PURE__ */ jsx("div", {
+				className: "text-sm leading-6",
+				dangerouslySetInnerHTML: { __html: component.content ?? "" }
+			}),
+			component.helperText && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-xs",
+				children: component.helperText
+			})
+		]
+	});
+}
+function HtmlComponent({ component }) {
+	return /* @__PURE__ */ jsx("div", {
+		dangerouslySetInnerHTML: { __html: component.content },
+		...extraProps(component.extraAttributes, "alfakit-prose text-sm")
+	});
+}
+const SIZES = {
+	xs: "text-xs",
+	sm: "text-sm",
+	md: "text-base",
+	lg: "text-lg",
+	xl: "text-xl"
+};
+const WEIGHTS = {
+	thin: "font-thin",
+	light: "font-light",
+	normal: "font-normal",
+	medium: "font-medium",
+	semibold: "font-semibold",
+	bold: "font-bold",
+	black: "font-black"
+};
+const FONT_FAMILIES = {
+	sans: "font-sans",
+	serif: "font-serif",
+	mono: "font-mono"
+};
+/** `color('neutral')` is the regular text colour (and a gray badge). */
+function textColor(color) {
+	if (!color) return void 0;
+	return color === "neutral" ? "text-foreground" : textColorClasses[color];
+}
+function TextComponent({ component }) {
+	const t = useT();
+	const [copied, setCopied] = useState(false);
+	const copy = () => {
+		navigator.clipboard?.writeText(component.content).then(() => {
+			setCopied(true);
+			setTimeout(() => setCopied(false), component.copyMessageDuration ?? 1500);
+		});
+	};
+	const copyButton = component.copyable ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-slot": "text-copy",
+		className: "text-muted-foreground hover:text-foreground",
+		onClick: (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			copy();
+		},
+		"aria-label": t("copy", {}, "Copy"),
+		children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx(CopyIcon, { className: "size-3.5" })
+	}), copied && /* @__PURE__ */ jsx("span", {
+		role: "status",
+		className: cn("text-xs", !component.copyMessage && "sr-only"),
+		children: component.copyMessage ?? t("copied", {}, "Copied")
+	})] }) : null;
+	const element = component.badge ? /* @__PURE__ */ jsxs(Badge, {
+		variant: "outline",
+		...extraProps(component.extraAttributes, cn(colorClass(badgeColorClasses, component.color === "neutral" ? "gray" : component.color, "gray"), component.fontFamily && FONT_FAMILIES[component.fontFamily])),
+		children: [
+			component.icon && /* @__PURE__ */ jsx(Icon, { name: component.icon }),
+			component.content,
+			copyButton
+		]
+	}) : /* @__PURE__ */ jsxs("p", {
+		...extraProps(component.extraAttributes, cn("flex items-center gap-1.5 text-sm", component.size && SIZES[component.size], component.weight && WEIGHTS[component.weight], component.fontFamily && FONT_FAMILIES[component.fontFamily], textColor(component.color))),
+		children: [
+			component.icon && /* @__PURE__ */ jsx(Icon, { name: component.icon }),
+			component.content,
+			copyButton
+		]
+	});
+	if (!component.tooltip) return element;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: element
+	}), /* @__PURE__ */ jsx(TooltipContent, { children: component.tooltip })] });
+}
+/** Custom component registered by the application through `createAlfakit({ components })`. */
+function ViewComponent({ component }) {
+	const registry = useRegistry();
+	const t = useT();
+	const Custom = registry.resolve(component.component);
+	if (!Custom) return /* @__PURE__ */ jsx("div", {
+		className: "border-destructive/40 text-destructive rounded-md border border-dashed p-3 text-xs",
+		children: t("component_not_registered", { component: component.component }, `Component ${component.component} is not registered.`)
+	});
+	return createElement(Custom, {
+		...component.props ?? {},
+		component
+	});
+}
+//#endregion
+export { HtmlComponent, PlaceholderComponent, TextComponent, ViewComponent };
+
+//# sourceMappingURL=prime.js.map

package/dist/components/layout/prime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prime.js","names":[],"sources":["../../../src/components/layout/prime.tsx"],"sourcesContent":["import type { HtmlSchema, PlaceholderSchema, TextSchema, ViewSchema } from '@alfakit/core'\nimport { CheckIcon, CopyIcon } from 'lucide-react'\nimport { createElement, useState } from 'react'\nimport { useRegistry, useT } from '../../context'\nimport { extraProps } from '../../lib/attributes'\nimport { badgeColorClasses, colorClass, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { Badge } from '../ui/badge'\nimport { Label } from '../ui/label'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'\n\nexport function PlaceholderComponent({ component }: { component: PlaceholderSchema }) {\n  return (\n    <div data-slot=\"field\" {...extraProps(component.extraAttributes, 'flex flex-col gap-1.5')}>\n      {component.label && <Label>{component.label}</Label>}\n      <div\n        className=\"text-sm leading-6\"\n        dangerouslySetInnerHTML={{ __html: component.content ?? '' }}\n      />\n      {component.helperText && (\n        <p className=\"text-muted-foreground text-xs\">{component.helperText}</p>\n      )}\n    </div>\n  )\n}\n\nexport function HtmlComponent({ component }: { component: HtmlSchema }) {\n  return (\n    <div\n      dangerouslySetInnerHTML={{ __html: component.content }}\n      {...extraProps(component.extraAttributes, 'alfakit-prose text-sm')}\n    />\n  )\n}\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  light: 'font-light',\n  normal: 'font-normal',\n  medium: 'font-medium',\n  semibold: 'font-semibold',\n  bold: 'font-bold',\n  black: 'font-black',\n}\n\nconst FONT_FAMILIES: Record<string, string> = {\n  sans: 'font-sans',\n  serif: 'font-serif',\n  mono: 'font-mono',\n}\n\n/** `color('neutral')` is the regular text colour (and a gray badge). */\nfunction textColor(color: string | undefined): string | undefined {\n  if (!color) return undefined\n\n  return color === 'neutral' ? 'text-foreground' : textColorClasses[color]\n}\n\nexport function TextComponent({ component }: { component: TextSchema }) {\n  const t = useT()\n  const [copied, setCopied] = useState(false)\n\n  const copy = () => {\n    void navigator.clipboard?.writeText(component.content).then(() => {\n      setCopied(true)\n      setTimeout(() => setCopied(false), component.copyMessageDuration ?? 1500)\n    })\n  }\n\n  const copyButton = component.copyable ? (\n    <>\n      <button\n        type=\"button\"\n        data-slot=\"text-copy\"\n        className=\"text-muted-foreground hover:text-foreground\"\n        onClick={(event) => {\n          event.preventDefault()\n          event.stopPropagation()\n          copy()\n        }}\n        aria-label={t('copy', {}, 'Copy')}\n      >\n        {copied ? <CheckIcon className=\"size-3.5\" /> : <CopyIcon className=\"size-3.5\" />}\n      </button>\n      {copied && (\n        <span role=\"status\" className={cn('text-xs', !component.copyMessage && 'sr-only')}>\n          {component.copyMessage ?? t('copied', {}, 'Copied')}\n        </span>\n      )}\n    </>\n  ) : null\n\n  const element = component.badge ? (\n    <Badge\n      variant=\"outline\"\n      {...extraProps(\n        component.extraAttributes,\n        cn(\n          colorClass(\n            badgeColorClasses,\n            component.color === 'neutral' ? 'gray' : component.color,\n            'gray',\n          ),\n          component.fontFamily && FONT_FAMILIES[component.fontFamily],\n        ),\n      )}\n    >\n      {component.icon && <Icon name={component.icon} />}\n      {component.content}\n      {copyButton}\n    </Badge>\n  ) : (\n    <p\n      {...extraProps(\n        component.extraAttributes,\n        cn(\n          'flex items-center gap-1.5 text-sm',\n          component.size && SIZES[component.size],\n          component.weight && WEIGHTS[component.weight],\n          component.fontFamily && FONT_FAMILIES[component.fontFamily],\n          textColor(component.color),\n        ),\n      )}\n    >\n      {component.icon && <Icon name={component.icon} />}\n      {component.content}\n      {copyButton}\n    </p>\n  )\n\n  if (!component.tooltip) return element\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{element}</TooltipTrigger>\n      <TooltipContent>{component.tooltip}</TooltipContent>\n    </Tooltip>\n  )\n}\n\n/** Custom component registered by the application through `createAlfakit({ components })`. */\nexport function ViewComponent({ component }: { component: ViewSchema }) {\n  const registry = useRegistry()\n  const t = useT()\n  const Custom = registry.resolve(component.component)\n\n  if (!Custom) {\n    return (\n      <div className=\"border-destructive/40 text-destructive rounded-md border border-dashed p-3 text-xs\">\n        {t(\n          'component_not_registered',\n          { component: component.component },\n          `Component ${component.component} is not registered.`,\n        )}\n      </div>\n    )\n  }\n\n  return createElement(Custom, { ...(component.props ?? {}), component })\n}\n"],"mappings":"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"}

package/dist/components/layout/schema-children.d.ts

@@ -0,0 +1,18 @@
+import { BaseComponent } from "@alfakit/core";
+//#region src/components/layout/schema-children.d.ts
+/**
+ * Renders a layout component's child schema (`component.schema`) in its grid
+ * (`columns`, `dense()`, `gap(false)`), for custom schema components:
+ *
+ * ```tsx
+ * export default function Panel({ component }: { component: BaseComponent }) {
+ *   return <div className="rounded border p-4"><SchemaChildren component={component} /></div>
+ * }
+ * ```
+ */
+export declare function SchemaChildren({ component, className }: {
+  component: Pick<BaseComponent, 'schema' | 'columns' | 'dense' | 'gap'>;
+  className?: string;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=schema-children.d.ts.map

package/dist/components/layout/schema-children.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema-children.d.ts","names":[],"sources":["../../../src/components/layout/schema-children.tsx"],"mappings":";;;;;;;;;;;;wBAegB,iBACd,WACA;EAEA,WAAW,KAAK;EAChB;oBACD,IAAA"}

package/dist/components/layout/schema-children.js

@@ -0,0 +1,26 @@
+import { cn } from "../../lib/utils.js";
+import { SchemaRenderer } from "../schema/schema-renderer.js";
+import { schemaGapClass } from "@alfakit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/layout/schema-children.tsx
+/**
+* Renders a layout component's child schema (`component.schema`) in its grid
+* (`columns`, `dense()`, `gap(false)`), for custom schema components:
+*
+* ```tsx
+* export default function Panel({ component }: { component: BaseComponent }) {
+*   return <div className="rounded border p-4"><SchemaChildren component={component} /></div>
+* }
+* ```
+*/
+function SchemaChildren({ component, className }) {
+	return /* @__PURE__ */ jsx(SchemaRenderer, {
+		components: component.schema ?? [],
+		columns: component.columns,
+		className: cn(schemaGapClass(component), className)
+	});
+}
+//#endregion
+export { SchemaChildren };
+
+//# sourceMappingURL=schema-children.js.map

package/dist/components/layout/schema-children.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema-children.js","names":[],"sources":["../../../src/components/layout/schema-children.tsx"],"sourcesContent":["import type { BaseComponent } from '@alfakit/core'\nimport { schemaGapClass } from '@alfakit/core'\nimport { cn } from '../../lib/utils'\nimport { SchemaRenderer } from '../schema/schema-renderer'\n\n/**\n * Renders a layout component's child schema (`component.schema`) in its grid\n * (`columns`, `dense()`, `gap(false)`), for custom schema components:\n *\n * ```tsx\n * export default function Panel({ component }: { component: BaseComponent }) {\n *   return <div className=\"rounded border p-4\"><SchemaChildren component={component} /></div>\n * }\n * ```\n */\nexport function SchemaChildren({\n  component,\n  className,\n}: {\n  component: Pick<BaseComponent, 'schema' | 'columns' | 'dense' | 'gap'>\n  className?: string\n}) {\n  return (\n    <SchemaRenderer\n      components={component.schema ?? []}\n      columns={component.columns}\n      className={cn(schemaGapClass(component), className)}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,SAAgB,eAAe,EAC7B,WACA,aAIC;CACD,OACE,oBAAC,gBAAD;EACE,YAAY,UAAU,UAAU,CAAC;EACjC,SAAS,UAAU;EACnB,WAAW,GAAG,eAAe,SAAS,GAAG,SAAS;CACnD,CAAA;AAEL"}

package/dist/components/layout/section.d.ts

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

package/dist/components/layout/section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section.d.ts","names":[],"sources":["../../../src/components/layout/section.tsx"],"mappings":";;wBAyBgB,mBAAmB;EAAe,WAAW;oBAAe,IAAA"}

package/dist/components/layout/section.js

@@ -0,0 +1,133 @@
+import { useT } from "../../context.js";
+import { usePageActionContext } from "../actions/action-context.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../lib/icons.js";
+import { Button } from "../ui/button.js";
+import { extraProps } from "../../lib/attributes.js";
+import { ActionList } from "../actions/action-list.js";
+import { useOptionalFormStore } from "../form/form-context.js";
+import { DeferredSchema } from "./deferred.js";
+import { useFieldActionContext } from "../schema/field-actions.js";
+import { SchemaRenderer } from "../schema/schema-renderer.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+import { useHydrated } from "../../hooks/use-hydrated.js";
+import { MixedContent } from "./mixed-content.js";
+import { actionsAlignmentClass, headingTag, readPersisted, schemaGapClass, writePersisted } from "@alfakit/core";
+import { createElement, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
+//#region src/components/layout/section.tsx
+function SectionComponent({ component }) {
+	const t = useT();
+	const [choice, setChoice] = useState(null);
+	const form = useOptionalFormStore();
+	const pageContext = usePageActionContext();
+	const fieldContext = useFieldActionContext(component);
+	const context = form ? fieldContext : pageContext;
+	const persistKey = component.persistCollapsed;
+	const stored = useHydrated() && persistKey ? readPersisted(persistKey) : null;
+	const open = choice ?? (stored !== null ? stored !== "collapsed" : !component.collapsed);
+	const hasHeader = component.heading || component.description || component.icon || component.headerActions?.length || component.afterHeader?.length;
+	const setOpen = (next) => {
+		setChoice(next);
+		if (persistKey) writePersisted(persistKey, next ? "expanded" : "collapsed");
+	};
+	const content = /* @__PURE__ */ jsx(DeferredSchema, {
+		component,
+		children: (loaded) => /* @__PURE__ */ jsx(SchemaRenderer, {
+			components: loaded.schema ?? [],
+			columns: loaded.columns,
+			className: schemaGapClass(loaded)
+		})
+	});
+	const header = hasHeader ? /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-wrap items-start gap-3", component.aside ? "lg:col-span-1" : "border-b px-6 py-4", component.compact && !component.aside && "px-4 py-3"),
+		children: [
+			component.icon && /* @__PURE__ */ jsx(Icon, {
+				name: component.icon,
+				className: "text-muted-foreground mt-0.5 size-5"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1 basis-48",
+				children: [component.heading && createElement(headingTag(component.headingLevel), { className: "text-base leading-6 font-semibold" }, component.heading), component.description && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground mt-1 text-sm",
+					children: component.description
+				})]
+			}),
+			component.headerActions && component.headerActions.length > 0 && /* @__PURE__ */ jsx(ActionList, {
+				actions: component.headerActions,
+				context,
+				size: "sm"
+			}),
+			/* @__PURE__ */ jsx(MixedContent, {
+				items: component.afterHeader,
+				name: "section-after-header"
+			}),
+			component.collapsible && /* @__PURE__ */ jsx(CollapsibleTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "icon-sm",
+					"aria-label": t("toggle_section", {}, "Toggle section"),
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "alfakit::schemas.section.collapse-button",
+						fallback: ChevronDownIcon,
+						className: cn("transition-transform", open && "rotate-180")
+					})
+				})
+			})
+		]
+	}) : null;
+	const hasFooterActions = Boolean(component.footerActions?.length);
+	const footer = hasFooterActions || component.footer?.length ? /* @__PURE__ */ jsxs("div", {
+		"data-slot": "section-footer",
+		className: cn("flex flex-wrap items-center gap-3 border-t px-6 py-4", component.compact && "px-4 py-3"),
+		children: [hasFooterActions && /* @__PURE__ */ jsx(ActionList, {
+			actions: component.footerActions ?? [],
+			context,
+			className: actionsAlignmentClass(component.footerActionsAlignment) || void 0
+		}), /* @__PURE__ */ jsx(MixedContent, {
+			items: component.footer,
+			name: "section-footer-content"
+		})]
+	}) : null;
+	if (component.aside) return /* @__PURE__ */ jsx(Collapsible, {
+		open: !component.collapsible || open,
+		onOpenChange: setOpen,
+		asChild: true,
+		children: /* @__PURE__ */ jsxs("section", {
+			"data-slot": "section",
+			...extraProps(component.extraAttributes, "grid gap-6 lg:grid-cols-3"),
+			children: [header, /* @__PURE__ */ jsx(CollapsibleContent, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("div", {
+					"data-surface": "section",
+					className: cn("bg-card rounded-xl border shadow-xs lg:col-span-2", component.secondary && "bg-muted/40"),
+					children: [/* @__PURE__ */ jsx("div", {
+						className: cn("p-6", component.compact && "p-4"),
+						children: content
+					}), footer]
+				})
+			})]
+		})
+	});
+	return /* @__PURE__ */ jsx(Collapsible, {
+		open: !component.collapsible || open,
+		onOpenChange: setOpen,
+		asChild: true,
+		children: /* @__PURE__ */ jsxs("section", {
+			"data-slot": "section",
+			"data-surface": "section",
+			...extraProps(component.extraAttributes, cn("bg-card rounded-xl border shadow-xs", component.secondary && "bg-muted/40")),
+			children: [header, /* @__PURE__ */ jsxs(CollapsibleContent, { children: [/* @__PURE__ */ jsx("div", {
+				className: cn("p-6", component.compact && "p-4"),
+				children: content
+			}), footer] })]
+		})
+	});
+}
+//#endregion
+export { SectionComponent };
+
+//# sourceMappingURL=section.js.map