@dtkt/protoform 0.0.0-stage → 0.1.0

package/dist/gen/google/api/field_behavior_pb.js

@@ -0,0 +1,5 @@
+import { file_google_protobuf_descriptor as e } from "@bufbuild/protobuf/wkt";
+import { enumDesc as t, extDesc as n, fileDesc as r, tsEnum as i } from "@bufbuild/protobuf/codegenv2";
+// lib/gen/google/api/field_behavior_pb.js
+var a = /*@__PURE__*/ r("Ch9nb29nbGUvYXBpL2ZpZWxkX2JlaGF2aW9yLnByb3RvEgpnb29nbGUuYXBpKrYBCg1GaWVsZEJlaGF2aW9yEh4KGkZJRUxEX0JFSEFWSU9SX1VOU1BFQ0lGSUVEEAASDAoIT1BUSU9OQUwQARIMCghSRVFVSVJFRBACEg8KC09VVFBVVF9PTkxZEAMSDgoKSU5QVVRfT05MWRAEEg0KCUlNTVVUQUJMRRAFEhIKDlVOT1JERVJFRF9MSVNUEAYSFQoRTk9OX0VNUFRZX0RFRkFVTFQQBxIOCgpJREVOVElGSUVSEAg6YAoOZmllbGRfYmVoYXZpb3ISHS5nb29nbGUucHJvdG9idWYuRmllbGRPcHRpb25zGJwIIAMoDjIZLmdvb2dsZS5hcGkuRmllbGRCZWhhdmlvclINZmllbGRCZWhhdmlvckJwCg5jb20uZ29vZ2xlLmFwaUISRmllbGRCZWhhdmlvclByb3RvUAFaQWdvb2dsZS5nb2xhbmcub3JnL2dlbnByb3RvL2dvb2dsZWFwaXMvYXBpL2Fubm90YXRpb25zO2Fubm90YXRpb25zogIER0FQSWIGcHJvdG8z", [e]), o = /*@__PURE__*/ t(a, 0), s = /*@__PURE__*/ i(o), c = /*@__PURE__*/ n(a, 0);
+export { s as FieldBehavior, o as FieldBehaviorSchema, c as field_behavior, a as file_google_api_field_behavior };

package/dist/icons.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>

package/dist/kit/bare.d.ts

@@ -0,0 +1,3 @@
+import { UIKit } from './types';
+/** Unstyled, semantic HTML. Style it via the `data-pf` attributes. */
+export declare const bareKit: UIKit;

package/dist/kit/context.d.ts

@@ -0,0 +1,56 @@
+import { ComponentType } from 'react';
+import { FieldElementProps } from '../components/field';
+import { Field } from '../field';
+import { UIKit } from './types';
+export declare const defaultMessages: {
+    edit: string;
+    clear: string;
+    addItem: string;
+    addEntry: string;
+    key: string;
+    value: string;
+    noItems: string;
+    notSet: string;
+    select: string;
+    selectType: string;
+    selectCase: string;
+    now: string;
+    duplicateKey: string;
+    item: (n: number) => string;
+    entry: (key: string) => string;
+    entryKey: (key: string) => string;
+    entryValue: (key: string) => string;
+    removeItem: (n: number) => string;
+    moveItemUp: (n: number) => string;
+    moveItemDown: (n: number) => string;
+    removeEntry: (key: string) => string;
+};
+/** Strings used by the built-in components; override any of them for i18n. */
+export type UIMessages = typeof defaultMessages;
+/** Renders a field. Receives the same props as the built-in element. */
+export type FieldRenderer = ComponentType<FieldElementProps> & {
+    /**
+     * `"field"` (default) wraps the renderer in a labelled field frame;
+     * `"none"` lets it draw its own frame (see `FieldSection`).
+     */
+    frame?: "field" | "none";
+};
+/**
+ * Custom renderers keyed by field full name (`pkg.Message.field`) or by the
+ * type name of the field's message/enum (`google.protobuf.Timestamp`).
+ */
+export type Renderers = Record<string, FieldRenderer>;
+export type UIContextValue = {
+    kit: UIKit;
+    renderers: Renderers;
+    /** Called first; return a renderer to take over a field, or undefined to continue. */
+    resolve?: (field: Field) => FieldRenderer | undefined;
+    messages: UIMessages;
+};
+export declare const UIContext: import('react').Context<UIContextValue>;
+export declare function useUI(): UIContextValue;
+export declare function useKit(): UIKit;
+export declare function useMessages(): UIMessages;
+export declare function resolveRenderer(ui: UIContextValue, field: Field): FieldRenderer | undefined;
+/** Combines kits over the bare kit; later kits win. */
+export declare function defineKit(...kits: Partial<UIKit>[]): UIKit;

package/dist/kit/index.d.ts

@@ -0,0 +1,4 @@
+export { bareKit } from './bare';
+export { defaultMessages, defineKit, resolveRenderer, useKit, useMessages, useUI } from './context';
+export type { FieldRenderer, Renderers, UIContextValue, UIMessages } from './context';
+export type * from './types';

package/dist/kit/index.js

@@ -0,0 +1 @@
+export { c as bareKit, n as defaultMessages, r as defineKit, i as resolveRenderer, a as useKit, o as useMessages, s as useUI } from "../context-DSrebuNf.js";

package/dist/kit/tailwind/index.d.ts

@@ -0,0 +1,7 @@
+import { UIKit } from '../types';
+/**
+ * Tailwind-styled primitives built on Headless UI. Import
+ * `@dtkt/protoform/styles.css` for the styles; dark mode follows the OS
+ * (override with `.dark`/`.light` or `data-theme` on an ancestor).
+ */
+export declare const tailwindKit: UIKit;

package/dist/kit/tailwind/index.js

@@ -0,0 +1,327 @@
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Button as r, Checkbox as i, Description as a, Disclosure as o, DisclosureButton as s, DisclosurePanel as c, Field as l, Input as u, Label as d, Radio as f, RadioGroup as p, Select as m, Switch as h, Textarea as g } from "@headlessui/react";
+// lib/kit/tailwind/index.tsx
+function _({ onSubmit: e, children: n }) {
+	return /* @__PURE__ */ t("form", {
+		className: "pf-form",
+		noValidate: !0,
+		onSubmit: e,
+		children: n
+	});
+}
+function v({ children: e }) {
+	return /* @__PURE__ */ t("div", {
+		className: "pf-stack",
+		children: e
+	});
+}
+function y({ id: r, children: i, actions: a, errors: o = [] }) {
+	return /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ n("div", {
+		className: "pf-row",
+		children: [/* @__PURE__ */ t("div", {
+			className: "pf-row-content",
+			children: i
+		}), a && /* @__PURE__ */ t("div", {
+			className: "pf-row-actions",
+			children: a
+		})]
+	}), /* @__PURE__ */ t(b, {
+		id: `${r}-errors`,
+		errors: o
+	})] });
+}
+function b({ id: e, errors: n }) {
+	return n.length === 0 ? null : /* @__PURE__ */ t("ul", {
+		className: "pf-errors",
+		id: e,
+		"aria-live": "polite",
+		children: n.map((e) => /* @__PURE__ */ t("li", { children: e }, e))
+	});
+}
+function x({ id: e, label: r, description: i, errors: o, required: s, children: c }) {
+	return /* @__PURE__ */ n(l, {
+		className: "pf-field",
+		"data-invalid": o.length > 0 || void 0,
+		children: [/* @__PURE__ */ n(d, {
+			className: "pf-label",
+			id: `${e}-label`,
+			children: [r, s && /* @__PURE__ */ t("span", {
+				className: "pf-required",
+				"aria-hidden": "true",
+				children: " *"
+			})]
+		}), /* @__PURE__ */ n("div", {
+			className: "pf-field-body",
+			children: [
+				i && /* @__PURE__ */ t(a, {
+					className: "pf-description",
+					id: `${e}-description`,
+					children: i
+				}),
+				c,
+				o.length > 0 && /* @__PURE__ */ t(a, {
+					as: "ul",
+					className: "pf-errors",
+					id: `${e}-errors`,
+					"aria-live": "polite",
+					children: o.map((e) => /* @__PURE__ */ t("li", { children: e }, e))
+				})
+			]
+		})]
+	});
+}
+function S() {
+	return /* @__PURE__ */ t("svg", {
+		className: "pf-chevron",
+		viewBox: "0 0 20 20",
+		fill: "none",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ t("path", {
+			d: "m6 8 4 4 4-4",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function C({ id: e, title: r, description: i, errors: a, depth: l, actions: u, collapsible: d, children: f }) {
+	let p = i && /* @__PURE__ */ t("p", {
+		className: "pf-description",
+		id: `${e}-description`,
+		children: i
+	}), m = /* @__PURE__ */ t(b, {
+		id: `${e}-errors`,
+		errors: a
+	});
+	return d ? /* @__PURE__ */ n(o, {
+		as: "div",
+		className: "pf-section",
+		role: "group",
+		"aria-labelledby": `${e}-title`,
+		"data-depth": l,
+		defaultOpen: !0,
+		children: [
+			/* @__PURE__ */ n("div", {
+				className: "pf-section-header",
+				children: [/* @__PURE__ */ n(s, {
+					className: "pf-section-toggle",
+					children: [/* @__PURE__ */ t(S, {}), /* @__PURE__ */ t("span", {
+						className: "pf-section-title",
+						id: `${e}-title`,
+						children: r
+					})]
+				}), u && /* @__PURE__ */ t("div", {
+					className: "pf-section-actions",
+					children: u
+				})]
+			}),
+			m,
+			/* @__PURE__ */ n(c, {
+				className: "pf-section-body",
+				unmount: !1,
+				children: [p, f]
+			})
+		]
+	}) : /* @__PURE__ */ n("div", {
+		className: "pf-section",
+		role: "group",
+		"data-depth": l,
+		"aria-labelledby": `${e}-title`,
+		"aria-describedby": i ? `${e}-description` : void 0,
+		children: [
+			/* @__PURE__ */ n("div", {
+				className: "pf-section-header",
+				children: [/* @__PURE__ */ t("span", {
+					className: "pf-section-title",
+					id: `${e}-title`,
+					children: r
+				}), u && /* @__PURE__ */ t("div", {
+					className: "pf-section-actions",
+					children: u
+				})]
+			}),
+			p,
+			m,
+			/* @__PURE__ */ t("div", {
+				className: "pf-section-body",
+				children: f
+			})
+		]
+	});
+}
+function w({ value: e, onChange: n, onBlur: r, onEnter: i, type: a = "text", inputMode: o, placeholder: s, mono: c, invalid: l, ...d }) {
+	return /* @__PURE__ */ t(u, {
+		className: "pf-input",
+		"data-mono": c || void 0,
+		type: a,
+		inputMode: o,
+		name: d.name,
+		value: e,
+		placeholder: s,
+		disabled: d.disabled,
+		readOnly: d.readOnly,
+		required: d.required,
+		invalid: l,
+		"aria-label": d["aria-label"],
+		onChange: (e) => n(e.target.value),
+		onBlur: r,
+		onKeyDown: i && ((e) => {
+			e.key === "Enter" && (e.preventDefault(), i());
+		})
+	});
+}
+function T({ value: e, onChange: n, onBlur: r, rows: i = 4, placeholder: a, mono: o, invalid: s, ...c }) {
+	return /* @__PURE__ */ t(g, {
+		className: "pf-textarea",
+		"data-mono": o || void 0,
+		name: c.name,
+		rows: i,
+		value: e,
+		placeholder: a,
+		disabled: c.disabled,
+		readOnly: c.readOnly,
+		required: c.required,
+		invalid: s,
+		"aria-label": c["aria-label"],
+		onChange: (e) => n(e.target.value),
+		onBlur: r
+	});
+}
+function E({ checked: e, onChange: r, label: a, variant: o = "checkbox", invalid: s, ...c }) {
+	let u = {
+		name: c.name,
+		checked: e,
+		onChange: r,
+		disabled: c.disabled || c.readOnly,
+		"aria-label": c["aria-label"],
+		"aria-invalid": s || void 0,
+		"data-invalid": s || void 0
+	}, f = o === "switch" ? /* @__PURE__ */ t(h, {
+		...u,
+		className: "pf-switch",
+		children: /* @__PURE__ */ t("span", {
+			className: "pf-switch-thumb",
+			"aria-hidden": "true"
+		})
+	}) : /* @__PURE__ */ t(i, {
+		...u,
+		className: "pf-checkbox",
+		children: /* @__PURE__ */ t("svg", {
+			className: "pf-checkbox-mark",
+			viewBox: "0 0 14 14",
+			fill: "none",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ t("path", {
+				d: "M3 8l3 3 5-6",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})
+	});
+	return a === void 0 ? f : /* @__PURE__ */ n(l, {
+		className: "pf-check-label",
+		children: [f, /* @__PURE__ */ t(d, { children: a })]
+	});
+}
+function D({ value: e, onChange: r, options: i, placeholder: a, invalid: o, ...s }) {
+	return /* @__PURE__ */ n("div", {
+		className: "pf-select-wrap",
+		children: [/* @__PURE__ */ n(m, {
+			className: "pf-select",
+			name: s.name,
+			value: e,
+			disabled: s.disabled || s.readOnly,
+			required: s.required,
+			invalid: o,
+			"aria-label": s["aria-label"],
+			onChange: (e) => r(e.target.value),
+			children: [a !== void 0 && /* @__PURE__ */ t("option", {
+				value: "",
+				disabled: !0,
+				children: a
+			}), i.map((e) => /* @__PURE__ */ t("option", {
+				value: e.value,
+				disabled: e.disabled,
+				children: e.label
+			}, e.value))]
+		}), /* @__PURE__ */ t(S, {})]
+	});
+}
+function O({ value: e, onChange: r, options: i, invalid: a, describedBy: o, ...s }) {
+	return /* @__PURE__ */ t("div", {
+		role: "group",
+		id: s.id,
+		"aria-label": s["aria-label"],
+		"aria-labelledby": s.id && !s["aria-label"] ? `${s.id}-label` : void 0,
+		"aria-describedby": o,
+		"aria-invalid": a || void 0,
+		children: /* @__PURE__ */ t(p, {
+			className: "pf-radiogroup",
+			name: s.name ?? s.id,
+			value: e,
+			onChange: r,
+			disabled: s.disabled || s.readOnly,
+			children: i.map((e) => /* @__PURE__ */ n(l, {
+				className: "pf-radio-option",
+				disabled: e.disabled,
+				children: [/* @__PURE__ */ t(f, {
+					value: e.value,
+					className: "pf-radio",
+					children: /* @__PURE__ */ t("span", {
+						className: "pf-radio-dot",
+						"aria-hidden": "true"
+					})
+				}), /* @__PURE__ */ t(d, {
+					className: "pf-radio-label",
+					children: e.label
+				})]
+			}, e.value))
+		})
+	});
+}
+function k({ accept: e, onFile: n, invalid: r, describedBy: i, ...a }) {
+	return /* @__PURE__ */ t("input", {
+		className: "pf-file-input",
+		type: "file",
+		id: a.id,
+		name: a.name,
+		accept: e?.length ? e.join(",") : void 0,
+		disabled: a.disabled || a.readOnly,
+		"aria-label": a["aria-label"],
+		"aria-labelledby": a.id && !a["aria-label"] ? `${a.id}-label` : void 0,
+		"aria-invalid": r || void 0,
+		"aria-describedby": i,
+		"data-invalid": r || void 0,
+		onChange: (e) => n(e.target.files?.[0])
+	});
+}
+function A({ variant: e = "secondary", size: n = "md", type: i = "button", disabled: a, onClick: o, children: s, ...c }) {
+	return /* @__PURE__ */ t(r, {
+		className: "pf-button",
+		"data-variant": e,
+		"data-size": n,
+		type: i,
+		disabled: a,
+		"aria-label": c["aria-label"],
+		onClick: o,
+		children: s
+	});
+}
+var j = {
+	Form: _,
+	Stack: v,
+	Row: y,
+	Field: x,
+	Section: C,
+	TextInput: w,
+	TextArea: T,
+	Checkbox: E,
+	Select: D,
+	RadioGroup: O,
+	FileInput: k,
+	Button: A
+};
+export { j as tailwindKit };

package/dist/kit/types.d.ts

@@ -0,0 +1,126 @@
+import { ReactNode, SubmitEvent } from 'react';
+export type Option = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+type ControlProps = {
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    /** Id(s) of the elements describing this control (description and errors). */
+    describedBy?: string;
+    "aria-label"?: string;
+};
+export type TextInputProps = ControlProps & {
+    value: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    /** Called when Enter is pressed; suppresses the form's implicit submit. */
+    onEnter?: () => void;
+    type?: "text" | "password" | "url" | "email";
+    inputMode?: "text" | "numeric" | "decimal" | "url" | "email";
+    placeholder?: string;
+    /** Render in a monospace font (identifiers, base64, timestamps, JSON). */
+    mono?: boolean;
+};
+export type TextAreaProps = ControlProps & {
+    value: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    rows?: number;
+    placeholder?: string;
+    mono?: boolean;
+};
+export type CheckboxProps = ControlProps & {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    /** Inline label. Omit when an outer `Field` already labels the control. */
+    label?: ReactNode;
+    variant?: "checkbox" | "switch";
+};
+export type SelectProps = ControlProps & {
+    value: string;
+    onChange: (value: string) => void;
+    options: Option[];
+    /** Shown while `value` is empty. */
+    placeholder?: string;
+};
+export type RadioGroupProps = ControlProps & {
+    value: string;
+    onChange: (value: string) => void;
+    options: Option[];
+};
+export type FileInputProps = ControlProps & {
+    accept?: string[];
+    fileName?: string;
+    onFile: (file: File | undefined) => void;
+};
+export type ButtonProps = {
+    variant?: "primary" | "secondary" | "danger" | "ghost";
+    size?: "sm" | "md";
+    type?: "button" | "submit";
+    disabled?: boolean;
+    onClick?: () => void;
+    "aria-label"?: string;
+    children: ReactNode;
+};
+export type FormProps = {
+    onSubmit: (event: SubmitEvent<HTMLFormElement>) => void;
+    children?: ReactNode;
+};
+export type StackProps = {
+    children?: ReactNode;
+};
+/** A horizontal row: growing content with optional trailing actions and errors underneath. */
+export type RowProps = {
+    /** Used to build the id (`${id}-errors`) controls can reference in `describedBy`. */
+    id?: string;
+    children?: ReactNode;
+    actions?: ReactNode;
+    errors?: string[];
+};
+/** Frames a single control with its label, description and errors. */
+export type FieldFrameProps = {
+    id: string;
+    label: ReactNode;
+    description?: string;
+    errors: string[];
+    required?: boolean;
+    children?: ReactNode;
+};
+/** Frames a group of controls (nested messages, lists, maps, oneofs). */
+export type SectionProps = {
+    id: string;
+    title: ReactNode;
+    description?: string;
+    errors: string[];
+    depth: number;
+    /** Trailing controls, e.g. a remove button. */
+    actions?: ReactNode;
+    collapsible?: boolean;
+    children?: ReactNode;
+};
+/**
+ * The set of primitives protoform renders with. Provide your own to use
+ * another component library; any primitive you leave out falls back to the
+ * unstyled default.
+ */
+export type UIKit = {
+    Form: (props: FormProps) => ReactNode;
+    Stack: (props: StackProps) => ReactNode;
+    Row: (props: RowProps) => ReactNode;
+    Field: (props: FieldFrameProps) => ReactNode;
+    Section: (props: SectionProps) => ReactNode;
+    TextInput: (props: TextInputProps) => ReactNode;
+    TextArea: (props: TextAreaProps) => ReactNode;
+    Checkbox: (props: CheckboxProps) => ReactNode;
+    Select: (props: SelectProps) => ReactNode;
+    RadioGroup: (props: RadioGroupProps) => ReactNode;
+    FileInput: (props: FileInputProps) => ReactNode;
+    Button: (props: ButtonProps) => ReactNode;
+};
+export {};

package/dist/list.d.ts

@@ -0,0 +1,29 @@
+import { DescField } from '@bufbuild/protobuf';
+import { ReflectList } from '@bufbuild/protobuf/reflect';
+import { BaseField } from './base';
+import { Message } from './message';
+export type ListFieldDesc = Extract<DescField, {
+    fieldKind: "list";
+}>;
+export declare class ListField extends BaseField<ListFieldDesc> {
+    get(): ReflectList;
+    set(value: ReflectList): void;
+    get size(): number;
+    /** The raw items: scalars, enum numbers, or `ReflectMessage`s. */
+    items(): unknown[];
+    /** Items of a message list, wrapped so they can be edited and validated. */
+    messages(): Message[];
+    /** Appends a new zero-valued item (or `value`, if given). */
+    add(value?: unknown): void;
+    removeAt(index: number): void;
+    /** Moves the item at `from` so it ends up at `to`. */
+    move(from: number, to: number): void;
+    setAt(index: number, value: unknown): void;
+    clear(): void;
+    toString(): string;
+    parse(value: string): void;
+    private replace;
+    private zeroItem;
+    private itemToJson;
+    private itemFromJson;
+}

package/dist/main.d.ts

@@ -0,0 +1,13 @@
+export { Protoform } from './components/protoform';
+export * from './element';
+export * from './enum';
+export * from './env';
+export * from './field';
+export * from './list';
+export * from './map';
+export * from './message';
+export * from './oneof';
+export * from './path';
+export * from './scalar';
+export * from './store';
+export * from './wellknown';

package/dist/main.js

@@ -0,0 +1,3 @@
+import { A as e, B as t, C as n, D as r, E as i, F as a, H as o, I as s, L as c, M as l, N as u, O as d, P as f, R as p, S as m, T as h, U as g, V as _, W as v, _ as y, b, d as x, f as S, g as C, h as w, j as T, k as E, l as D, m as O, p as k, u as A, v as j, w as M, x as N, y as P, z as F } from "./context-DSrebuNf.js";
+import { S as I, b as L, t as R, x as z, y as B } from "./protoform-DmMJ7LSw.js";
+export { B as ANY_TYPE_NAME, T as Element, P as EnumField, p as Env, F as EnvContext, i as FormStore, S as ListField, x as MapField, M as Message, h as MessageField, D as OneOfField, R as Protoform, k as ScalarField, b as allEnumValues, t as createDefaultTransport, _ as createDefaultValidator, A as createField, o as defaultRegistry, g as defaultValidator, l as elementFor, N as enumLabel, r as fieldPath, m as formatEnum, O as formatScalar, u as getFieldDescription, f as getProtoDescription, a as getScalarTypeName, d as indexPath, s as isIdentifier, L as isInlineWellKnown, w as isIntegerScalar, z as isJsonWellKnown, C as isNumericScalar, c as isOutputOnly, I as isTextWellKnown, E as keyPath, n as parseEnum, y as parseScalar, e as pathToString, j as tryParseScalar, v as useEnv };

package/dist/map.d.ts

@@ -0,0 +1,36 @@
+import { DescField } from '@bufbuild/protobuf';
+import { ReflectMap } from '@bufbuild/protobuf/reflect';
+import { BaseField } from './base';
+import { Message } from './message';
+export type MapFieldDesc = Extract<DescField, {
+    fieldKind: "map";
+}>;
+export type MapKey = string | number | bigint | boolean;
+export declare class MapField extends BaseField<MapFieldDesc> {
+    get(): ReflectMap;
+    set(value: ReflectMap): void;
+    get size(): number;
+    /** Entries in insertion order. Values are scalars, enum numbers, or `ReflectMessage`s. */
+    entries(): [MapKey, unknown][];
+    /** The map key as shown to (and typed by) the user. */
+    formatKey(key: MapKey): string;
+    /** Parses user input into a key; throws with a user-facing message if invalid. */
+    parseKey(input: string): MapKey;
+    has(key: MapKey): boolean;
+    /** Message values of a message map, wrapped so they can be edited and validated. */
+    messages(): [MapKey, Message][];
+    /** Adds `key` with a zero value (or `value`); returns false if the key exists. */
+    add(key: MapKey, value?: unknown): boolean;
+    setValue(key: MapKey, value: unknown): void;
+    delete(key: MapKey): void;
+    /** Changes a key, keeping the entry's position; returns false if `to` is taken. */
+    rename(from: MapKey, to: MapKey): boolean;
+    clear(): void;
+    toString(): string;
+    parse(value: string): void;
+    private replace;
+    /** A zero value for new entries: "" / 0 / false, or the enum's first value. */
+    zeroValue(): unknown;
+    private valueToJson;
+    private valueFromJson;
+}