@verbb/plugin-kit-react 1.0.0

package/dist/css/style.css

@@ -0,0 +1,295 @@
+/**
+ * Public CSS entry for consumers of @verbb/plugin-kit-react.
+ * Paths are relative to this source directory.
+ */
+@import "./core.css";
+
+@source "../**/*.{js,jsx,ts,tsx}";
+@layer dnd-kit, base, components, utilities;
+
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@theme {
+    /* Use a custom colour pallette to match Craft's */
+    /* We're also hard-coding this to prevent any sudden changes to Craft's styles */
+    --color-*: initial;
+
+    --color-white: #fff;
+    --color-black: #000;
+
+    --color-link: #2563eb;
+    --color-error: #d81f23;
+    --color-success: var(--color-teal-700);
+    --color-warning: var(--color-amber-700);
+
+    --color-gray-50: hsl(212, 60%, 97%);
+    --color-gray-100: hsl(212, 50%, 93%);
+    --color-gray-150: hsl(212, 40%, 89%);
+    --color-gray-200: hsl(212, 30%, 85%);
+    --color-gray-250: hsl(211, 20%, 75%);
+    --color-gray-300: hsl(211, 13%, 65%);
+    --color-gray-350: hsl(211, 11%, 59%);
+    --color-gray-400: hsl(210, 10%, 53%);
+    --color-gray-500: hsl(211, 12%, 43%);
+    --color-gray-550: hsl(210, 13%, 40%);
+    --color-gray-600: hsl(209, 14%, 37%);
+    --color-gray-700: hsl(209, 18%, 30%);
+    --color-gray-800: hsl(209, 20%, 25%);
+    --color-gray-900: hsl(210, 24%, 16%);
+    --color-gray-1000: hsl(210, 24%, 10%);
+
+    --color-slate-50: rgba(96, 125, 159, 0.05);
+    --color-slate-100: rgba(96, 125, 159, 0.1);
+    --color-slate-150: rgba(96, 125, 159, 0.15);
+    --color-slate-200: rgba(96, 125, 159, 0.2);
+    --color-slate-250: rgba(96, 125, 159, 0.25);
+    --color-slate-300: rgba(96, 125, 159, 0.3);
+    --color-slate-350: rgba(96, 125, 159, 0.35);
+    --color-slate-400: rgba(96, 125, 159, 0.4);
+    --color-slate-500: rgba(96, 125, 159, 0.5);
+    --color-slate-550: rgba(96, 125, 159, 0.55);
+    --color-slate-600: rgba(96, 125, 159, 0.6);
+    --color-slate-700: rgba(96, 125, 159, 0.7);
+    --color-slate-800: rgba(96, 125, 159, 0.8);
+    --color-slate-900: rgba(96, 125, 159, 0.9);
+    --color-slate-1000: rgba(96, 125, 159, 1.0);
+
+    --color-red-50: #fef2f2;
+    --color-red-100: #fee2e2;
+    --color-red-200: #fecaca;
+    --color-red-300: #fca5a5;
+    --color-red-400: #f87171;
+    --color-red-500: #ef4444;
+    --color-red-600: #dc2626;
+    --color-red-700: #b91c1c;
+    --color-red-800: #991b1b;
+    --color-red-900: #7f1d1d;
+    --color-red-950: #450a0a;
+
+    --color-orange-50: #fff7ed;
+    --color-orange-100: #ffedd5;
+    --color-orange-200: #fed7aa;
+    --color-orange-300: #fdba74;
+    --color-orange-400: #fb923c;
+    --color-orange-500: #f97316;
+    --color-orange-600: #ea580c;
+    --color-orange-700: #c2410c;
+    --color-orange-800: #9a3412;
+    --color-orange-900: #7c2d12;
+    --color-orange-950: #431407;
+
+    --color-amber-50: #fffbeb;
+    --color-amber-100: #fef3c7;
+    --color-amber-200: #fde68a;
+    --color-amber-300: #fcd34d;
+    --color-amber-400: #fbbf24;
+    --color-amber-500: #f59e0b;
+    --color-amber-600: #d97706;
+    --color-amber-700: #b45309;
+    --color-amber-800: #92400e;
+    --color-amber-900: #78350f;
+    --color-amber-950: #451a03;
+
+    --color-yellow-50: #fefce8;
+    --color-yellow-100: #fef9c3;
+    --color-yellow-200: #fef08a;
+    --color-yellow-300: #fde047;
+    --color-yellow-400: #facc15;
+    --color-yellow-500: #eab308;
+    --color-yellow-600: #ca8a04;
+    --color-yellow-700: #a16207;
+    --color-yellow-750: #93580b;
+    --color-yellow-800: #854d0e;
+    --color-yellow-900: #713f12;
+    --color-yellow-950: #422006;
+
+    --color-lime-50: #f7fee7;
+    --color-lime-100: #ecfccb;
+    --color-lime-200: #d9f99d;
+    --color-lime-300: #bef264;
+    --color-lime-400: #a3e635;
+    --color-lime-500: #84cc16;
+    --color-lime-600: #65a30d;
+    --color-lime-700: #4d7c0f;
+    --color-lime-800: #3f6212;
+    --color-lime-900: #365314;
+    --color-lime-950: #1a2e05;
+
+    --color-green-050: #f0fdf4;
+    --color-green-100: #dcfce7;
+    --color-green-200: #bbf7d0;
+    --color-green-300: #86efac;
+    --color-green-400: #4ade80;
+    --color-green-500: #22c55e;
+    --color-green-600: #16a34a;
+    --color-green-700: #15803d;
+    --color-green-800: #166534;
+    --color-green-900: #14532d;
+    --color-green-950: #052e16;
+
+    --color-emerald-50: #ecfdf5;
+    --color-emerald-100: #d1fae5;
+    --color-emerald-200: #a7f3d0;
+    --color-emerald-300: #6ee7b7;
+    --color-emerald-400: #34d399;
+    --color-emerald-500: #10b981;
+    --color-emerald-600: #059669;
+    --color-emerald-700: #047857;
+    --color-emerald-800: #065f46;
+    --color-emerald-900: #064e3b;
+    --color-emerald-950: #022c22;
+
+    --color-teal-50: #f0fdfa;
+    --color-teal-100: #ccfbf1;
+    --color-teal-200: #99f6e4;
+    --color-teal-300: #5eead4;
+    --color-teal-400: #2dd4bf;
+    --color-teal-500: #14b8a6;
+    --color-teal-550: #11a697;
+    --color-teal-600: #0d9488;
+    --color-teal-700: #0f766e;
+    --color-teal-800: #115e59;
+    --color-teal-900: #134e4a;
+    --color-teal-950: #042f2e;
+
+    --color-cyan-50: #ecfeff;
+    --color-cyan-100: #cffafe;
+    --color-cyan-200: #a5f3fc;
+    --color-cyan-300: #67e8f9;
+    --color-cyan-400: #22d3ee;
+    --color-cyan-500: #06b6d4;
+    --color-cyan-600: #0891b2;
+    --color-cyan-700: #0e7490;
+    --color-cyan-800: #155e75;
+    --color-cyan-900: #164e63;
+    --color-cyan-950: #083344;
+
+    --color-sky-50: #f0f9ff;
+    --color-sky-100: #e0f2fe;
+    --color-sky-200: #bae6fd;
+    --color-sky-300: #7dd3fc;
+    --color-sky-400: #38bdf8;
+    --color-sky-500: #0ea5e9;
+    --color-sky-600: #0284c7;
+    --color-sky-700: #0369a1;
+    --color-sky-800: #075985;
+    --color-sky-900: #0c4a6e;
+    --color-sky-950: #082f49;
+
+    --color-blue-50: #eff6ff;
+    --color-blue-100: #dbeafe;
+    --color-blue-200: #bfdbfe;
+    --color-blue-300: #93c5fd;
+    --color-blue-400: #60a5fa;
+    --color-blue-500: #3b82f6;
+    --color-blue-600: #2563eb;
+    --color-blue-700: #1d4ed8;
+    --color-blue-800: #1e40af;
+    --color-blue-900: #1e3a8a;
+    --color-blue-950: #172554;
+
+    --color-indigo-50: #eef2ff;
+    --color-indigo-100: #e0e7ff;
+    --color-indigo-200: #c7d2fe;
+    --color-indigo-300: #a5b4fc;
+    --color-indigo-400: #818cf8;
+    --color-indigo-500: #6366f1;
+    --color-indigo-600: #4f46e5;
+    --color-indigo-700: #4338ca;
+    --color-indigo-800: #3730a3;
+    --color-indigo-900: #312e81;
+    --color-indigo-950: #1e1b4b;
+
+    --color-violet-50: #f5f3ff;
+    --color-violet-100: #ede9fe;
+    --color-violet-200: #ddd6fe;
+    --color-violet-300: #c4b5fd;
+    --color-violet-400: #a78bfa;
+    --color-violet-500: #8b5cf6;
+    --color-violet-600: #7c3aed;
+    --color-violet-700: #6d28d9;
+    --color-violet-800: #5b21b6;
+    --color-violet-900: #4c1d95;
+    --color-violet-950: #2e1065;
+
+    --color-purple-50: #faf5ff;
+    --color-purple-100: #f3e8ff;
+    --color-purple-200: #e9d5ff;
+    --color-purple-300: #d8b4fe;
+    --color-purple-400: #c084fc;
+    --color-purple-500: #a855f7;
+    --color-purple-600: #9333ea;
+    --color-purple-700: #7e22ce;
+    --color-purple-800: #6b21a8;
+    --color-purple-900: #581c87;
+    --color-purple-950: #3b0764;
+
+    --color-fuchsia-50: #fdf4ff;
+    --color-fuchsia-100: #fae8ff;
+    --color-fuchsia-200: #f5d0fe;
+    --color-fuchsia-300: #f0abfc;
+    --color-fuchsia-400: #e879f9;
+    --color-fuchsia-500: #d946ef;
+    --color-fuchsia-600: #c026d3;
+    --color-fuchsia-700: #a21caf;
+    --color-fuchsia-800: #86198f;
+    --color-fuchsia-900: #701a75;
+    --color-fuchsia-950: #4a044e;
+
+    --color-pink-50: #fdf2f8;
+    --color-pink-100: #fce7f3;
+    --color-pink-200: #fbcfe8;
+    --color-pink-300: #f9a8d4;
+    --color-pink-400: #f472b6;
+    --color-pink-500: #ec4899;
+    --color-pink-600: #db2777;
+    --color-pink-700: #be185d;
+    --color-pink-800: #9d174d;
+    --color-pink-900: #831843;
+    --color-pink-950: #500724;
+
+    --color-rose-50: #fff1f2;
+    --color-rose-100: #ffe4e6;
+    --color-rose-200: #fecdd3;
+    --color-rose-300: #fda4af;
+    --color-rose-400: #fb7185;
+    --color-rose-500: #f43f5e;
+    --color-rose-600: #e11d48;
+    --color-rose-700: #be123c;
+    --color-rose-800: #9f1239;
+    --color-rose-900: #881337;
+    --color-rose-950: #4c0519;
+
+    --radius-xs: 2px;
+    --radius-sm: 3px;
+    --radius-md: 4px;
+    --radius-lg: 5px;
+
+    --animate-spin: spin 0.5s linear infinite;
+
+    --shadow-modal: 0 0 0 1px color-mix(in oklab, var(--color-gray-400) 25%, transparent), 0 25px 100px color-mix(in oklab, var(--color-gray-900) 50%, transparent);
+}
+
+hr {
+    @apply border-gray-100 my-1;
+}
+
+.rdp-month_grid {
+
+    /* Reset Craft table styles */
+    &:not(.data) td:not(:last-child),
+    &:not(.data) th:not(:last-child) {
+        padding-inline-end: 0 !important;
+    }
+
+    &:not(.data) td:not(:first-child),
+    &:not(.data) th:not(:first-child) {
+        padding-inline-start: 0 !important;
+    }
+
+    &:not(.data) td,
+    &:not(.data) th {
+        padding-block: 0 !important;
+    }
+}

package/dist/forms/Field.d.ts

@@ -0,0 +1,37 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Label } from '../components';
+import { Slot } from '../components/Slot';
+type FieldContextValue = {
+    id: string;
+    name: string;
+    errors: string[];
+};
+declare const InlineFieldErrorVisibilityContext: import('react').Context<boolean>;
+declare const useFieldContext: () => FieldContextValue;
+type FieldRootProps = ComponentProps<'div'> & {
+    name: string;
+    errors?: string[];
+};
+declare const FieldRoot: ({ name, errors, className, ...props }: FieldRootProps) => import("react/jsx-runtime").JSX.Element;
+declare const FieldHeader: ({ className, ...props }: ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const FieldLabel: ({ className, ...props }: ComponentProps<typeof Label>) => import("react/jsx-runtime").JSX.Element;
+declare const FieldInstructions: ({ className, children, ...props }: ComponentProps<"p">) => import("react/jsx-runtime").JSX.Element;
+type FieldControlProps = Omit<ComponentProps<typeof Slot>, 'className'> & {
+    className?: string;
+};
+declare const FieldControl: ({ className, ...props }: FieldControlProps) => import("react/jsx-runtime").JSX.Element;
+declare const FieldErrors: ({ className, ...props }: ComponentProps<"ul">) => import("react/jsx-runtime").JSX.Element | null;
+type FieldLayoutProps = ComponentProps<'div'> & {
+    name: string;
+    label?: string;
+    instructions?: string;
+    headerEnd?: ReactNode;
+    required?: boolean;
+    warning?: string;
+    errors?: string[];
+    withControl?: boolean;
+    showInlineErrors?: boolean;
+};
+declare const FieldLayout: ({ name, label, instructions, headerEnd, required, warning, errors, withControl, showInlineErrors, className, children, ...props }: FieldLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export { FieldRoot, FieldHeader, FieldLabel, FieldInstructions, FieldControl, FieldErrors, FieldLayout, InlineFieldErrorVisibilityContext, useFieldContext, };
+//# sourceMappingURL=Field.d.ts.map

package/dist/forms/Field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/forms/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAC+B,KAAK,cAAc,EAAE,KAAK,SAAS,EACxE,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,EAAY,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,yCAAyC,CAAC;AAM/D,KAAK,iBAAiB,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;CACpB,CAAC;AAGF,QAAA,MAAM,iCAAiC,kCAA+B,CAAC;AAEvE,QAAA,MAAM,eAAe,yBAMpB,CAAC;AAEF,KAAK,cAAc,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,SAAS,GAAI,uCAEhB,cAAc,4CAWhB,CAAC;AAEF,QAAA,MAAM,WAAW,GAAI,yBAAyB,cAAc,CAAC,KAAK,CAAC,4CAIlE,CAAC;AAEF,QAAA,MAAM,UAAU,GAAI,yBAAyB,cAAc,CAAC,OAAO,KAAK,CAAC,4CAWxE,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAI,mCAAmC,cAAc,CAAC,GAAG,CAAC,4CA0BhF,CAAC;AAEF,KAAK,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,WAAW,CAAC,GAAG;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,YAAY,GAAI,yBAAyB,iBAAiB,4CAe/D,CAAC;AAEF,QAAA,MAAM,WAAW,GAAI,yBAAyB,cAAc,CAAC,IAAI,CAAC,mDAsBjE,CAAC;AAEF,KAAK,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,QAAA,MAAM,WAAW,GAAI,mIAalB,gBAAgB,4CA4DlB,CAAC;AAEF,OAAO,EACH,SAAS,EACT,WAAW,EACX,UAAU,EACV,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,WAAW,EACX,iCAAiC,EACjC,eAAe,GAClB,CAAC"}

package/dist/forms/Field.js

@@ -0,0 +1,159 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { useTranslation } from "../hooks/useTranslation.js";
+import "../hooks/index.js";
+import { Label } from "../components/Label.js";
+import { Markdown } from "../components/Markdown.js";
+import "../components/index.js";
+import { Slot } from "../components/Slot.js";
+import { createContext, useContext, useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAsterisk, faTriangleExclamation } from "@fortawesome/pro-solid-svg-icons";
+//#region src/forms/Field.tsx
+var FieldContext = createContext(null);
+var InlineFieldErrorVisibilityContext = createContext(true);
+var useFieldContext = () => {
+	const context = useContext(FieldContext);
+	if (!context) throw new Error("Field components must be used within <FieldRoot>.");
+	return context;
+};
+var FieldRoot = ({ name, errors = [], className, ...props }) => {
+	const id = useId();
+	return /* @__PURE__ */ jsx(FieldContext.Provider, {
+		value: {
+			id,
+			name,
+			errors
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "field",
+			className: cn("space-y-1.5", className),
+			...props
+		})
+	});
+};
+var FieldHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-header",
+		className: cn(className),
+		...props
+	});
+};
+var FieldLabel = ({ className, ...props }) => {
+	const { id, errors } = useFieldContext();
+	return /* @__PURE__ */ jsx(Label, {
+		"data-slot": "field-label",
+		htmlFor: `${id}-control`,
+		"data-error": errors.length > 0,
+		className: cn("text-sm font-bold", className),
+		...props
+	});
+};
+var FieldInstructions = ({ className, children, ...props }) => {
+	const { id } = useFieldContext();
+	const content = typeof children === "string" ? children : null;
+	const baseProps = {
+		"data-slot": "field-instructions",
+		id: `${id}-description`,
+		className: cn("text-sm text-gray-500", className)
+	};
+	if (content !== null) return /* @__PURE__ */ jsx(Markdown, {
+		content,
+		inline: true,
+		as: "p",
+		...baseProps
+	});
+	return /* @__PURE__ */ jsx("p", {
+		...baseProps,
+		...props,
+		children
+	});
+};
+var FieldControl = ({ className, ...props }) => {
+	const { id, errors } = useFieldContext();
+	const isInvalid = errors.length > 0;
+	return /* @__PURE__ */ jsx(Slot, {
+		"data-slot": "field-control",
+		id: `${id}-control`,
+		"aria-invalid": isInvalid,
+		"aria-describedby": `${id}-description ${id}-errors`,
+		"aria-errormessage": isInvalid ? `${id}-errors` : void 0,
+		className: cn(className),
+		...props
+	});
+};
+var FieldErrors = ({ className, ...props }) => {
+	const { id, errors } = useFieldContext();
+	if (!errors.length) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "field-errors",
+		id: `${id}-errors`,
+		className: cn("list-[square] text-error", className),
+		style: {
+			marginBlockStart: "5px",
+			paddingInlineStart: "20px"
+		},
+		...props,
+		children: errors.map((message, index) => {
+			return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Markdown, {
+				content: message,
+				inline: true
+			}) }, index);
+		})
+	});
+};
+var FieldLayout = ({ name, label, instructions, headerEnd, required, warning, errors = [], withControl = true, showInlineErrors, className, children, ...props }) => {
+	const t = useTranslation();
+	const contextShowInlineErrors = useContext(InlineFieldErrorVisibilityContext);
+	const shouldShowInlineErrors = showInlineErrors ?? contextShowInlineErrors;
+	return /* @__PURE__ */ jsxs(FieldRoot, {
+		name,
+		errors,
+		className,
+		...props,
+		children: [
+			label || instructions || headerEnd ? /* @__PURE__ */ jsxs(FieldHeader, {
+				className: cn(headerEnd ? "flex items-start justify-between gap-3" : "space-y-0.5"),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 space-y-0.5",
+					children: [label && /* @__PURE__ */ jsxs(FieldLabel, {
+						className: "flex items-center gap-1",
+						children: [label, required && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: t("Required")
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-rose-600",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
+								icon: faAsterisk,
+								className: "size-[10px]"
+							})
+						})] })]
+					}), instructions && /* @__PURE__ */ jsx(FieldInstructions, { children: instructions })]
+				}), headerEnd && /* @__PURE__ */ jsx("div", {
+					className: "shrink-0",
+					children: headerEnd
+				})]
+			}) : null,
+			withControl ? /* @__PURE__ */ jsx(FieldControl, { children }) : children,
+			shouldShowInlineErrors && /* @__PURE__ */ jsx(FieldErrors, {}),
+			warning && /* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-start gap-1 text-sm text-warning",
+				children: [/* @__PURE__ */ jsx(FontAwesomeIcon, {
+					icon: faTriangleExclamation,
+					className: "mt-[0.3em] size-3 shrink-0"
+				}), /* @__PURE__ */ jsx(Markdown, {
+					className: "min-w-0",
+					content: warning,
+					inline: true,
+					as: "p"
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { FieldControl, FieldErrors, FieldHeader, FieldInstructions, FieldLabel, FieldLayout, FieldRoot, InlineFieldErrorVisibilityContext, useFieldContext };
+
+//# sourceMappingURL=Field.js.map

package/dist/forms/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","names":[],"sources":["../../src/forms/Field.tsx"],"sourcesContent":["import {\n    createContext, useContext, useId, type ComponentProps, type ReactNode,\n} from 'react';\nimport { Label, Markdown } from '@verbb/plugin-kit-react/components';\nimport { Slot } from '@verbb/plugin-kit-react/components/Slot';\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faAsterisk, faTriangleExclamation } from '@fortawesome/pro-solid-svg-icons';\nimport { useTranslation } from '@verbb/plugin-kit-react/hooks';\n\ntype FieldContextValue = {\n    id: string;\n    name: string;\n    errors: string[];\n};\n\nconst FieldContext = createContext<FieldContextValue | null>(null);\nconst InlineFieldErrorVisibilityContext = createContext<boolean>(true);\n\nconst useFieldContext = () => {\n    const context = useContext(FieldContext);\n    if (!context) {\n        throw new Error('Field components must be used within <FieldRoot>.');\n    }\n    return context;\n};\n\ntype FieldRootProps = ComponentProps<'div'> & {\n    name: string;\n    errors?: string[];\n};\n\nconst FieldRoot = ({\n    name, errors = [], className, ...props\n}: FieldRootProps) => {\n    const id = useId();\n    return (\n        <FieldContext.Provider value={{ id, name, errors }}>\n            <div\n                data-slot=\"field\"\n                className={cn('space-y-1.5', className)}\n                {...props}\n            />\n        </FieldContext.Provider>\n    );\n};\n\nconst FieldHeader = ({ className, ...props }: ComponentProps<'div'>) => {\n    return (\n        <div data-slot=\"field-header\" className={cn(className)} {...props} />\n    );\n};\n\nconst FieldLabel = ({ className, ...props }: ComponentProps<typeof Label>) => {\n    const { id, errors } = useFieldContext();\n    return (\n        <Label\n            data-slot=\"field-label\"\n            htmlFor={`${id}-control`}\n            data-error={errors.length > 0}\n            className={cn('text-sm font-bold', className)}\n            {...props}\n        />\n    );\n};\n\nconst FieldInstructions = ({ className, children, ...props }: ComponentProps<'p'>) => {\n    const { id } = useFieldContext();\n    const content = typeof children === 'string' ? children : null;\n\n    const baseProps = {\n        'data-slot': 'field-instructions',\n        id: `${id}-description`,\n        className: cn('text-sm text-gray-500', className),\n    };\n\n    if (content !== null) {\n        return (\n            <Markdown\n                content={content}\n                inline\n                as=\"p\"\n                {...baseProps}\n            />\n        );\n    }\n\n    return (\n        <p {...baseProps} {...props}>\n            {children}\n        </p>\n    );\n};\n\ntype FieldControlProps = Omit<ComponentProps<typeof Slot>, 'className'> & {\n    className?: string;\n};\n\nconst FieldControl = ({ className, ...props }: FieldControlProps) => {\n    const { id, errors } = useFieldContext();\n    const isInvalid = errors.length > 0;\n\n    return (\n        <Slot\n            data-slot=\"field-control\"\n            id={`${id}-control`}\n            aria-invalid={isInvalid}\n            aria-describedby={`${id}-description ${id}-errors`}\n            aria-errormessage={isInvalid ? `${id}-errors` : undefined}\n            className={cn(className)}\n            {...props}\n        />\n    );\n};\n\nconst FieldErrors = ({ className, ...props }: ComponentProps<'ul'>) => {\n    const { id, errors } = useFieldContext();\n    if (!errors.length) {\n        return null;\n    }\n    return (\n        <ul\n            data-slot=\"field-errors\"\n            id={`${id}-errors`}\n            className={cn('list-[square] text-error', className)}\n            style={{ marginBlockStart: '5px', paddingInlineStart: '20px' }}\n            {...props}\n        >\n            {errors.map((message, index) => {\n                return (\n                    <li key={index}>\n                        <Markdown content={message} inline />\n                    </li>\n                );\n            })}\n        </ul>\n    );\n};\n\ntype FieldLayoutProps = ComponentProps<'div'> & {\n    name: string;\n    label?: string;\n    instructions?: string;\n    headerEnd?: ReactNode;\n    required?: boolean;\n    warning?: string;\n    errors?: string[];\n    withControl?: boolean;\n    showInlineErrors?: boolean;\n};\n\nconst FieldLayout = ({\n    name,\n    label,\n    instructions,\n    headerEnd,\n    required,\n    warning,\n    errors = [],\n    withControl = true,\n    showInlineErrors,\n    className,\n    children,\n    ...props\n}: FieldLayoutProps) => {\n    const t = useTranslation();\n    const contextShowInlineErrors = useContext(InlineFieldErrorVisibilityContext);\n    const shouldShowInlineErrors = showInlineErrors ?? contextShowInlineErrors;\n\n    return (\n        <FieldRoot name={name} errors={errors} className={className} {...props}>\n            {(label || instructions || headerEnd) ? (\n                <FieldHeader className={cn(\n                    headerEnd ? 'flex items-start justify-between gap-3' : 'space-y-0.5',\n                )}>\n                    <div className=\"min-w-0 space-y-0.5\">\n                        {label && (\n                            <FieldLabel className=\"flex items-center gap-1\">\n                                {label}\n                                {required && (\n                                    <>\n                                        <span className=\"sr-only\">{t('Required')}</span>\n                                        <span className=\"text-rose-600\" aria-hidden=\"true\">\n                                            <FontAwesomeIcon icon={faAsterisk} className=\"size-[10px]\" />\n                                        </span>\n                                    </>\n                                )}\n                            </FieldLabel>\n                        )}\n                        {instructions && (\n                            <FieldInstructions>{instructions}</FieldInstructions>\n                        )}\n                    </div>\n\n                    {headerEnd && (\n                        <div className=\"shrink-0\">\n                            {headerEnd}\n                        </div>\n                    )}\n                </FieldHeader>\n            ) : null}\n\n            {withControl ? (\n                <FieldControl>{children}</FieldControl>\n            ) : (\n                children\n            )}\n\n            {shouldShowInlineErrors && <FieldErrors />}\n\n            {warning && (\n                <div className=\"flex min-w-0 items-start gap-1 text-sm text-warning\">\n                    <FontAwesomeIcon icon={faTriangleExclamation} className=\"mt-[0.3em] size-3 shrink-0\" />\n\n                    <Markdown\n                        className=\"min-w-0\"\n                        content={warning}\n                        inline\n                        as=\"p\"\n                    />\n                </div>\n            )}\n        </FieldRoot>\n    );\n};\n\nexport {\n    FieldRoot,\n    FieldHeader,\n    FieldLabel,\n    FieldInstructions,\n    FieldControl,\n    FieldErrors,\n    FieldLayout,\n    InlineFieldErrorVisibilityContext,\n    useFieldContext,\n};\n"],"mappings":"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"}

package/dist/forms/SchemaFormEngine.d.ts

@@ -0,0 +1,23 @@
+import { SchemaIndex, SchemaNode, SchemaRenderable } from './engine/SchemaIndex';
+import { FormValues, SchemaFormEngineApi } from './engine/context';
+type SchemaFormEngineErrors = Record<string, unknown> | {
+    errors?: unknown;
+} | unknown[];
+type SchemaFormEngineOptions = {
+    schema?: SchemaRenderable;
+    schemaIndex: SchemaIndex | null;
+    defaultValues?: FormValues;
+    errors?: SchemaFormEngineErrors;
+    onChange?: (values: Record<string, unknown>, form: SchemaFormEngineApi) => void;
+    getConditionContext?: (values: FormValues, field?: SchemaNode) => Record<string, unknown>;
+    parentForm?: SchemaFormEngineApi | null;
+    parentPath?: string;
+};
+export declare const useSchemaFormEngine: ({ schemaIndex, defaultValues, errors, onChange, getConditionContext, parentForm, parentPath, }: SchemaFormEngineOptions) => SchemaFormEngineApi;
+export declare const SchemaFormEngine: import('react').ForwardRefExoticComponent<{
+    form: SchemaFormEngineApi;
+    className?: string;
+    withoutForm?: boolean;
+} & import('react').RefAttributes<SchemaFormEngineApi>>;
+export {};
+//# sourceMappingURL=SchemaFormEngine.d.ts.map

package/dist/forms/SchemaFormEngine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SchemaFormEngine.d.ts","sourceRoot":"","sources":["../../src/forms/SchemaFormEngine.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGtF,OAAO,KAAK,EACR,UAAU,EAGV,mBAAmB,EACtB,MAAM,kBAAkB,CAAC;AAG1B,KAAK,sBAAsB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,OAAO,EAAE,CAAC;AAEzF,KAAK,uBAAuB,GAAG;IAC3B,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAChF,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,UAAU,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC1F,UAAU,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAmXF,eAAO,MAAM,mBAAmB,GAAI,gGAQjC,uBAAuB,KAAG,mBAiN5B,CAAC;AAEF,eAAO,MAAM,gBAAgB;UAKnB,mBAAmB;gBACb,MAAM;kBACJ,OAAO;uDAmCvB,CAAC"}