zod-form-radix
Version:
Radix UI integration for zod-form-kit
1,350 lines (1,347 loc) • 46.9 kB
JavaScript
import * as Q from "react";
import Ye from "react";
import { clsx as Nr } from "clsx";
import { twMerge as Cr } from "tailwind-merge";
import * as Ue from "@radix-ui/react-label";
import { cva as Me } from "class-variance-authority";
import { Slot as Tr } from "@radix-ui/react-slot";
import * as Ae from "@radix-ui/react-checkbox";
import * as Ve from "@radix-ui/react-switch";
import * as T from "@radix-ui/react-select";
import { registerUIAdapter as Or, registerFieldRenderer as Pr, ZodForm as Sr } from "zod-form-kit";
import { z as U } from "zod";
var ce = { exports: {} }, J = {};
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var Le;
function Fr() {
if (Le) return J;
Le = 1;
var s = Ye, a = Symbol.for("react.element"), l = Symbol.for("react.fragment"), c = Object.prototype.hasOwnProperty, u = s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, v = { key: !0, ref: !0, __self: !0, __source: !0 };
function m(o, d, k) {
var w, E = {}, b = null, _ = null;
k !== void 0 && (b = "" + k), d.key !== void 0 && (b = "" + d.key), d.ref !== void 0 && (_ = d.ref);
for (w in d) c.call(d, w) && !v.hasOwnProperty(w) && (E[w] = d[w]);
if (o && o.defaultProps) for (w in d = o.defaultProps, d) E[w] === void 0 && (E[w] = d[w]);
return { $$typeof: a, type: o, key: b, ref: _, props: E, _owner: u.current };
}
return J.Fragment = l, J.jsx = m, J.jsxs = m, J;
}
var K = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var We;
function Ir() {
return We || (We = 1, process.env.NODE_ENV !== "production" && function() {
var s = Ye, a = Symbol.for("react.element"), l = Symbol.for("react.portal"), c = Symbol.for("react.fragment"), u = Symbol.for("react.strict_mode"), v = Symbol.for("react.profiler"), m = Symbol.for("react.provider"), o = Symbol.for("react.context"), d = Symbol.for("react.forward_ref"), k = Symbol.for("react.suspense"), w = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), b = Symbol.for("react.lazy"), _ = Symbol.for("react.offscreen"), R = Symbol.iterator, x = "@@iterator";
function S(e) {
if (e === null || typeof e != "object")
return null;
var t = R && e[R] || e[x];
return typeof t == "function" ? t : null;
}
var y = s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
function h(e) {
{
for (var t = arguments.length, n = new Array(t > 1 ? t - 1 : 0), i = 1; i < t; i++)
n[i - 1] = arguments[i];
I("error", e, n);
}
}
function I(e, t, n) {
{
var i = y.ReactDebugCurrentFrame, g = i.getStackAddendum();
g !== "" && (t += "%s", n = n.concat([g]));
var j = n.map(function(p) {
return String(p);
});
j.unshift("Warning: " + t), Function.prototype.apply.call(console[e], console, j);
}
}
var M = !1, qe = !1, Ge = !1, Ze = !1, Xe = !1, fe;
fe = Symbol.for("react.module.reference");
function He(e) {
return !!(typeof e == "string" || typeof e == "function" || e === c || e === v || Xe || e === u || e === k || e === w || Ze || e === _ || M || qe || Ge || typeof e == "object" && e !== null && (e.$$typeof === b || e.$$typeof === E || e.$$typeof === m || e.$$typeof === o || e.$$typeof === d || // This needs to include all possible module reference object
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
e.$$typeof === fe || e.getModuleId !== void 0));
}
function Qe(e, t, n) {
var i = e.displayName;
if (i)
return i;
var g = t.displayName || t.name || "";
return g !== "" ? n + "(" + g + ")" : n;
}
function me(e) {
return e.displayName || "Context";
}
function A(e) {
if (e == null)
return null;
if (typeof e.tag == "number" && h("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
return e.displayName || e.name || null;
if (typeof e == "string")
return e;
switch (e) {
case c:
return "Fragment";
case l:
return "Portal";
case v:
return "Profiler";
case u:
return "StrictMode";
case k:
return "Suspense";
case w:
return "SuspenseList";
}
if (typeof e == "object")
switch (e.$$typeof) {
case o:
var t = e;
return me(t) + ".Consumer";
case m:
var n = e;
return me(n._context) + ".Provider";
case d:
return Qe(e, e.render, "ForwardRef");
case E:
var i = e.displayName || null;
return i !== null ? i : A(e.type) || "Memo";
case b: {
var g = e, j = g._payload, p = g._init;
try {
return A(p(j));
} catch {
return null;
}
}
}
return null;
}
var V = Object.assign, B = 0, pe, xe, ve, he, be, ge, ye;
function je() {
}
je.__reactDisabledLog = !0;
function er() {
{
if (B === 0) {
pe = console.log, xe = console.info, ve = console.warn, he = console.error, be = console.group, ge = console.groupCollapsed, ye = console.groupEnd;
var e = {
configurable: !0,
enumerable: !0,
value: je,
writable: !0
};
Object.defineProperties(console, {
info: e,
log: e,
warn: e,
error: e,
group: e,
groupCollapsed: e,
groupEnd: e
});
}
B++;
}
}
function rr() {
{
if (B--, B === 0) {
var e = {
configurable: !0,
enumerable: !0,
writable: !0
};
Object.defineProperties(console, {
log: V({}, e, {
value: pe
}),
info: V({}, e, {
value: xe
}),
warn: V({}, e, {
value: ve
}),
error: V({}, e, {
value: he
}),
group: V({}, e, {
value: be
}),
groupCollapsed: V({}, e, {
value: ge
}),
groupEnd: V({}, e, {
value: ye
})
});
}
B < 0 && h("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
}
}
var re = y.ReactCurrentDispatcher, te;
function q(e, t, n) {
{
if (te === void 0)
try {
throw Error();
} catch (g) {
var i = g.stack.trim().match(/\n( *(at )?)/);
te = i && i[1] || "";
}
return `
` + te + e;
}
}
var ne = !1, G;
{
var tr = typeof WeakMap == "function" ? WeakMap : Map;
G = new tr();
}
function we(e, t) {
if (!e || ne)
return "";
{
var n = G.get(e);
if (n !== void 0)
return n;
}
var i;
ne = !0;
var g = Error.prepareStackTrace;
Error.prepareStackTrace = void 0;
var j;
j = re.current, re.current = null, er();
try {
if (t) {
var p = function() {
throw Error();
};
if (Object.defineProperty(p.prototype, "props", {
set: function() {
throw Error();
}
}), typeof Reflect == "object" && Reflect.construct) {
try {
Reflect.construct(p, []);
} catch (F) {
i = F;
}
Reflect.construct(e, [], p);
} else {
try {
p.call();
} catch (F) {
i = F;
}
e.call(p.prototype);
}
} else {
try {
throw Error();
} catch (F) {
i = F;
}
e();
}
} catch (F) {
if (F && i && typeof F.stack == "string") {
for (var f = F.stack.split(`
`), P = i.stack.split(`
`), N = f.length - 1, C = P.length - 1; N >= 1 && C >= 0 && f[N] !== P[C]; )
C--;
for (; N >= 1 && C >= 0; N--, C--)
if (f[N] !== P[C]) {
if (N !== 1 || C !== 1)
do
if (N--, C--, C < 0 || f[N] !== P[C]) {
var $ = `
` + f[N].replace(" at new ", " at ");
return e.displayName && $.includes("<anonymous>") && ($ = $.replace("<anonymous>", e.displayName)), typeof e == "function" && G.set(e, $), $;
}
while (N >= 1 && C >= 0);
break;
}
}
} finally {
ne = !1, re.current = j, rr(), Error.prepareStackTrace = g;
}
var Y = e ? e.displayName || e.name : "", L = Y ? q(Y) : "";
return typeof e == "function" && G.set(e, L), L;
}
function nr(e, t, n) {
return we(e, !1);
}
function sr(e) {
var t = e.prototype;
return !!(t && t.isReactComponent);
}
function Z(e, t, n) {
if (e == null)
return "";
if (typeof e == "function")
return we(e, sr(e));
if (typeof e == "string")
return q(e);
switch (e) {
case k:
return q("Suspense");
case w:
return q("SuspenseList");
}
if (typeof e == "object")
switch (e.$$typeof) {
case d:
return nr(e.render);
case E:
return Z(e.type, t, n);
case b: {
var i = e, g = i._payload, j = i._init;
try {
return Z(j(g), t, n);
} catch {
}
}
}
return "";
}
var z = Object.prototype.hasOwnProperty, Re = {}, Ee = y.ReactDebugCurrentFrame;
function X(e) {
if (e) {
var t = e._owner, n = Z(e.type, e._source, t ? t.type : null);
Ee.setExtraStackFrame(n);
} else
Ee.setExtraStackFrame(null);
}
function ar(e, t, n, i, g) {
{
var j = Function.call.bind(z);
for (var p in e)
if (j(e, p)) {
var f = void 0;
try {
if (typeof e[p] != "function") {
var P = Error((i || "React class") + ": " + n + " type `" + p + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[p] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
throw P.name = "Invariant Violation", P;
}
f = e[p](t, p, i, n, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
} catch (N) {
f = N;
}
f && !(f instanceof Error) && (X(g), h("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", i || "React class", n, p, typeof f), X(null)), f instanceof Error && !(f.message in Re) && (Re[f.message] = !0, X(g), h("Failed %s type: %s", n, f.message), X(null));
}
}
}
var ir = Array.isArray;
function se(e) {
return ir(e);
}
function or(e) {
{
var t = typeof Symbol == "function" && Symbol.toStringTag, n = t && e[Symbol.toStringTag] || e.constructor.name || "Object";
return n;
}
}
function lr(e) {
try {
return _e(e), !1;
} catch {
return !0;
}
}
function _e(e) {
return "" + e;
}
function ke(e) {
if (lr(e))
return h("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", or(e)), _e(e);
}
var Ne = y.ReactCurrentOwner, cr = {
key: !0,
ref: !0,
__self: !0,
__source: !0
}, Ce, Te;
function ur(e) {
if (z.call(e, "ref")) {
var t = Object.getOwnPropertyDescriptor(e, "ref").get;
if (t && t.isReactWarning)
return !1;
}
return e.ref !== void 0;
}
function dr(e) {
if (z.call(e, "key")) {
var t = Object.getOwnPropertyDescriptor(e, "key").get;
if (t && t.isReactWarning)
return !1;
}
return e.key !== void 0;
}
function fr(e, t) {
typeof e.ref == "string" && Ne.current;
}
function mr(e, t) {
{
var n = function() {
Ce || (Ce = !0, h("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", t));
};
n.isReactWarning = !0, Object.defineProperty(e, "key", {
get: n,
configurable: !0
});
}
}
function pr(e, t) {
{
var n = function() {
Te || (Te = !0, h("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", t));
};
n.isReactWarning = !0, Object.defineProperty(e, "ref", {
get: n,
configurable: !0
});
}
}
var xr = function(e, t, n, i, g, j, p) {
var f = {
// This tag allows us to uniquely identify this as a React Element
$$typeof: a,
// Built-in properties that belong on the element
type: e,
key: t,
ref: n,
props: p,
// Record the component responsible for creating this element.
_owner: j
};
return f._store = {}, Object.defineProperty(f._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: !1
}), Object.defineProperty(f, "_self", {
configurable: !1,
enumerable: !1,
writable: !1,
value: i
}), Object.defineProperty(f, "_source", {
configurable: !1,
enumerable: !1,
writable: !1,
value: g
}), Object.freeze && (Object.freeze(f.props), Object.freeze(f)), f;
};
function vr(e, t, n, i, g) {
{
var j, p = {}, f = null, P = null;
n !== void 0 && (ke(n), f = "" + n), dr(t) && (ke(t.key), f = "" + t.key), ur(t) && (P = t.ref, fr(t, g));
for (j in t)
z.call(t, j) && !cr.hasOwnProperty(j) && (p[j] = t[j]);
if (e && e.defaultProps) {
var N = e.defaultProps;
for (j in N)
p[j] === void 0 && (p[j] = N[j]);
}
if (f || P) {
var C = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
f && mr(p, C), P && pr(p, C);
}
return xr(e, f, P, g, i, Ne.current, p);
}
}
var ae = y.ReactCurrentOwner, Oe = y.ReactDebugCurrentFrame;
function W(e) {
if (e) {
var t = e._owner, n = Z(e.type, e._source, t ? t.type : null);
Oe.setExtraStackFrame(n);
} else
Oe.setExtraStackFrame(null);
}
var ie;
ie = !1;
function oe(e) {
return typeof e == "object" && e !== null && e.$$typeof === a;
}
function Pe() {
{
if (ae.current) {
var e = A(ae.current.type);
if (e)
return `
Check the render method of \`` + e + "`.";
}
return "";
}
}
function hr(e) {
return "";
}
var Se = {};
function br(e) {
{
var t = Pe();
if (!t) {
var n = typeof e == "string" ? e : e.displayName || e.name;
n && (t = `
Check the top-level render call using <` + n + ">.");
}
return t;
}
}
function Fe(e, t) {
{
if (!e._store || e._store.validated || e.key != null)
return;
e._store.validated = !0;
var n = br(t);
if (Se[n])
return;
Se[n] = !0;
var i = "";
e && e._owner && e._owner !== ae.current && (i = " It was passed a child from " + A(e._owner.type) + "."), W(e), h('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', n, i), W(null);
}
}
function Ie(e, t) {
{
if (typeof e != "object")
return;
if (se(e))
for (var n = 0; n < e.length; n++) {
var i = e[n];
oe(i) && Fe(i, t);
}
else if (oe(e))
e._store && (e._store.validated = !0);
else if (e) {
var g = S(e);
if (typeof g == "function" && g !== e.entries)
for (var j = g.call(e), p; !(p = j.next()).done; )
oe(p.value) && Fe(p.value, t);
}
}
}
function gr(e) {
{
var t = e.type;
if (t == null || typeof t == "string")
return;
var n;
if (typeof t == "function")
n = t.propTypes;
else if (typeof t == "object" && (t.$$typeof === d || // Note: Memo only checks outer props here.
// Inner props are checked in the reconciler.
t.$$typeof === E))
n = t.propTypes;
else
return;
if (n) {
var i = A(t);
ar(n, e.props, "prop", i, e);
} else if (t.PropTypes !== void 0 && !ie) {
ie = !0;
var g = A(t);
h("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", g || "Unknown");
}
typeof t.getDefaultProps == "function" && !t.getDefaultProps.isReactClassApproved && h("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
}
}
function yr(e) {
{
for (var t = Object.keys(e.props), n = 0; n < t.length; n++) {
var i = t[n];
if (i !== "children" && i !== "key") {
W(e), h("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", i), W(null);
break;
}
}
e.ref !== null && (W(e), h("Invalid attribute `ref` supplied to `React.Fragment`."), W(null));
}
}
var $e = {};
function De(e, t, n, i, g, j) {
{
var p = He(e);
if (!p) {
var f = "";
(e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (f += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
var P = hr();
P ? f += P : f += Pe();
var N;
e === null ? N = "null" : se(e) ? N = "array" : e !== void 0 && e.$$typeof === a ? (N = "<" + (A(e.type) || "Unknown") + " />", f = " Did you accidentally export a JSX literal instead of a component?") : N = typeof e, h("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", N, f);
}
var C = vr(e, t, n, g, j);
if (C == null)
return C;
if (p) {
var $ = t.children;
if ($ !== void 0)
if (i)
if (se($)) {
for (var Y = 0; Y < $.length; Y++)
Ie($[Y], e);
Object.freeze && Object.freeze($);
} else
h("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
else
Ie($, e);
}
if (z.call(t, "key")) {
var L = A(e), F = Object.keys(t).filter(function(kr) {
return kr !== "key";
}), le = F.length > 0 ? "{key: someKey, " + F.join(": ..., ") + ": ...}" : "{key: someKey}";
if (!$e[L + le]) {
var _r = F.length > 0 ? "{" + F.join(": ..., ") + ": ...}" : "{}";
h(`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`, le, L, _r, L), $e[L + le] = !0;
}
}
return e === c ? yr(C) : gr(C), C;
}
}
function jr(e, t, n) {
return De(e, t, n, !0);
}
function wr(e, t, n) {
return De(e, t, n, !1);
}
var Rr = wr, Er = jr;
K.Fragment = c, K.jsx = Rr, K.jsxs = Er;
}()), K;
}
process.env.NODE_ENV === "production" ? ce.exports = Fr() : ce.exports = Ir();
var r = ce.exports;
function O(...s) {
return Cr(Nr(s));
}
const ee = Q.forwardRef(
({ className: s, type: a, ...l }, c) => /* @__PURE__ */ r.jsx(
"input",
{
type: a,
className: O(
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
s
),
ref: c,
...l
}
)
);
ee.displayName = "Input";
const $r = Me(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
), D = Q.forwardRef(({ className: s, ...a }, l) => /* @__PURE__ */ r.jsx(
Ue.Root,
{
ref: l,
className: O($r(), s),
...a
}
));
D.displayName = Ue.Root.displayName;
const Dr = Me(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline"
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10"
}
},
defaultVariants: {
variant: "default",
size: "default"
}
}
), ue = Q.forwardRef(
({ className: s, variant: a, size: l, asChild: c = !1, ...u }, v) => {
const m = c ? Tr : "button";
return /* @__PURE__ */ r.jsx(
m,
{
className: O(Dr({ variant: a, size: l, className: s })),
ref: v,
...u
}
);
}
);
ue.displayName = "Button";
const Ar = Q.forwardRef(
({ className: s, ...a }, l) => /* @__PURE__ */ r.jsx(
"textarea",
{
className: O(
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
s
),
ref: l,
...a
}
)
);
Ar.displayName = "Textarea";
function de({
name: s,
label: a,
value: l = "",
onChange: c,
error: u,
required: v,
options: m = {},
className: o = ""
}) {
var k;
const d = Vr(m.format);
return /* @__PURE__ */ r.jsxs("div", { className: O("space-y-2", o), children: [
a && /* @__PURE__ */ r.jsxs(D, { htmlFor: s, children: [
a,
v && /* @__PURE__ */ r.jsx("span", { className: "text-red-500 ml-1", children: "*" })
] }),
/* @__PURE__ */ r.jsx(
ee,
{
id: s,
name: s,
type: d,
value: l,
onChange: (w) => c(w.target.value),
className: O(u && "border-red-500 focus-visible:ring-red-500"),
required: v,
readOnly: m.readonly,
minLength: m.minLength,
maxLength: m.maxLength,
pattern: (k = m.pattern) == null ? void 0 : k.source,
placeholder: m.format === "email" ? "Enter email address" : m.format === "url" ? "Enter URL" : a ? `Enter ${a.toLowerCase()}` : void 0
}
),
u && /* @__PURE__ */ r.jsx("p", { className: "text-sm text-red-500 mt-1", children: u })
] });
}
function Vr(s) {
switch (s) {
case "email":
return "email";
case "url":
return "url";
case "password":
return "password";
default:
return "text";
}
}
function Be({
name: s,
label: a,
value: l = 0,
onChange: c,
error: u,
required: v,
options: m = {},
className: o = ""
}) {
const { min: d, max: k, step: w = 1, readonly: E } = m, b = (_) => {
const R = _.target.value;
if (R === "")
c(0);
else {
const x = Number(R);
isNaN(x) || c(x);
}
};
return /* @__PURE__ */ r.jsxs("div", { className: O("space-y-2", o), children: [
a && /* @__PURE__ */ r.jsxs(D, { htmlFor: s, children: [
a,
v && /* @__PURE__ */ r.jsx("span", { className: "text-red-500 ml-1", children: "*" })
] }),
/* @__PURE__ */ r.jsx(
ee,
{
id: s,
name: s,
type: "number",
value: l,
onChange: b,
className: O(u && "border-red-500 focus-visible:ring-red-500"),
required: v,
readOnly: E,
min: d,
max: k,
step: w
}
),
u && /* @__PURE__ */ r.jsx("p", { className: "text-sm text-red-500 mt-1", children: u })
] });
}
function ze({
name: s,
label: a,
value: l = !1,
onChange: c,
error: u,
required: v,
options: m = {},
className: o = ""
}) {
const { variant: d = "checkbox" } = m;
return d === "switch" ? /* @__PURE__ */ r.jsxs("div", { className: O("flex items-center space-x-2", o), children: [
/* @__PURE__ */ r.jsx(
Ve.Root,
{
id: s,
name: s,
checked: l,
onCheckedChange: c,
className: "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
children: /* @__PURE__ */ r.jsx(Ve.Thumb, { className: "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0" })
}
),
a && /* @__PURE__ */ r.jsxs(D, { htmlFor: s, className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: [
a,
v && /* @__PURE__ */ r.jsx("span", { className: "text-red-500 ml-1", children: "*" })
] }),
u && /* @__PURE__ */ r.jsx("p", { className: "text-sm text-red-500 mt-1", children: u })
] }) : /* @__PURE__ */ r.jsxs("div", { className: O("flex items-center space-x-2", o), children: [
/* @__PURE__ */ r.jsx(
Ae.Root,
{
id: s,
name: s,
checked: l,
onCheckedChange: c,
className: "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
children: /* @__PURE__ */ r.jsx(Ae.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ r.jsx("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ r.jsx("polyline", { points: "20,6 9,17 4,12" }) }) })
}
),
a && /* @__PURE__ */ r.jsxs(D, { htmlFor: s, className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: [
a,
v && /* @__PURE__ */ r.jsx("span", { className: "text-red-500 ml-1", children: "*" })
] }),
u && /* @__PURE__ */ r.jsx("p", { className: "text-sm text-red-500 mt-1", children: u })
] });
}
function Je({
name: s,
label: a,
value: l = null,
onChange: c,
error: u,
required: v,
options: m = {},
className: o = ""
}) {
const { format: d = "date", min: k, max: w } = m, E = (R) => {
if (!R) return "";
switch (d) {
case "datetime-local":
return R.toISOString().slice(0, 16);
case "time":
return R.toTimeString().slice(0, 5);
case "date":
default:
return R.toISOString().split("T")[0];
}
}, b = (R) => {
if (!R) return null;
const x = new Date(R);
return isNaN(x.getTime()) ? null : x;
}, _ = (R) => {
const x = b(R.target.value);
c(x);
};
return /* @__PURE__ */ r.jsxs("div", { className: O("space-y-2", o), children: [
a && /* @__PURE__ */ r.jsxs(D, { htmlFor: s, children: [
a,
v && /* @__PURE__ */ r.jsx("span", { className: "text-red-500 ml-1", children: "*" })
] }),
/* @__PURE__ */ r.jsx(
ee,
{
id: s,
name: s,
type: d,
value: E(l),
onChange: _,
className: O(u && "border-red-500 focus-visible:ring-red-500"),
required: v,
min: k,
max: w
}
),
u && /* @__PURE__ */ r.jsx("p", { className: "text-sm text-red-500 mt-1", children: u })
] });
}
function Lr({
label: s,
value: a = [],
onChange: l,
error: c,
required: u,
itemSchema: v,
errors: m,
path: o,
options: d = {},
className: k = ""
}) {
const { minLength: w = 0, maxLength: E } = d, b = () => {
const y = [...a, Wr(v)];
l(o, y);
}, _ = (y) => {
const h = a.filter((I, M) => M !== y);
l(o, h);
}, R = (y, h) => {
const I = [...a];
I[y] = h, l(o, I);
}, x = !E || a.length < E, S = a.length > w;
return /* @__PURE__ */ r.jsxs("div", { className: O("space-y-4", k), children: [
/* @__PURE__ */ r.jsxs("div", { className: "flex items-center justify-between", children: [
s && /* @__PURE__ */ r.jsxs(D, { children: [
s,
u && /* @__PURE__ */ r.jsx("span", { className: "text-red-500 ml-1", children: "*" })
] }),
/* @__PURE__ */ r.jsx(
ue,
{
type: "button",
variant: "outline",
size: "sm",
onClick: b,
disabled: !x,
children: "Add Item"
}
)
] }),
a.length === 0 ? /* @__PURE__ */ r.jsx("div", { className: "text-sm text-muted-foreground p-4 border-2 border-dashed rounded-lg text-center", children: 'No items added yet. Click "Add Item" to get started.' }) : /* @__PURE__ */ r.jsx("div", { className: "space-y-3", children: a.map((y, h) => /* @__PURE__ */ r.jsx("div", { className: "flex items-start space-x-2 p-3 border rounded-lg bg-card", children: /* @__PURE__ */ r.jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ r.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
/* @__PURE__ */ r.jsxs("span", { className: "text-sm font-medium", children: [
"Item ",
h + 1
] }),
S && /* @__PURE__ */ r.jsx(
ue,
{
type: "button",
variant: "destructive",
size: "sm",
onClick: () => _(h),
children: "Remove"
}
)
] }),
/* @__PURE__ */ r.jsx("div", { className: "space-y-2", children: typeof y == "string" ? /* @__PURE__ */ r.jsx(
"input",
{
type: "text",
value: y,
onChange: (I) => R(h, I.target.value),
className: "w-full px-3 py-2 border border-input rounded-md bg-background",
placeholder: `Enter ${v.type || "value"}`
}
) : typeof y == "number" ? /* @__PURE__ */ r.jsx(
"input",
{
type: "number",
value: y,
onChange: (I) => R(h, Number(I.target.value)),
className: "w-full px-3 py-2 border border-input rounded-md bg-background",
placeholder: `Enter ${v.type || "number"}`
}
) : /* @__PURE__ */ r.jsxs("div", { className: "text-sm text-muted-foreground", children: [
"Complex item type - ",
JSON.stringify(y)
] }) }),
m[`${o}.${h}`] && /* @__PURE__ */ r.jsx("p", { className: "text-sm text-red-500 mt-1", children: m[`${o}.${h}`] })
] }) }, h)) }),
c && /* @__PURE__ */ r.jsx("p", { className: "text-sm text-red-500 mt-1", children: c })
] });
}
function Wr(s) {
if (s.defaultValue !== void 0) return s.defaultValue;
switch (s.type) {
case "string":
return "";
case "number":
return 0;
case "boolean":
return !1;
case "date":
return /* @__PURE__ */ new Date();
case "array":
return [];
case "object":
return {};
default:
return null;
}
}
function Ke({
name: s,
label: a,
value: l = {},
onChange: c,
error: u,
required: v,
properties: m = {},
errors: o = {},
path: d,
className: k = ""
}) {
const w = (b, _) => {
c(b, _);
}, E = (b, _, R, x) => {
const S = d ? `${d}.${b}` : b, y = {
name: `${s}-${b}`,
label: _.label || b,
value: R,
onChange: (h) => w(S, h),
error: x,
required: _.required,
path: S
};
switch (_.type) {
case "string":
return /* @__PURE__ */ r.jsx(de, { ...y });
case "number":
return /* @__PURE__ */ r.jsx(Be, { ...y });
case "boolean":
return /* @__PURE__ */ r.jsx(ze, { ...y });
case "date":
return /* @__PURE__ */ r.jsx(Je, { ...y });
case "object":
return /* @__PURE__ */ r.jsx(
Ke,
{
...y,
properties: _.properties || {},
errors: o
}
);
default:
return /* @__PURE__ */ r.jsxs("div", { className: "text-sm text-muted-foreground p-2 border border-dashed rounded", children: [
/* @__PURE__ */ r.jsxs("div", { className: "font-medium mb-1", children: [
"Unsupported field type: ",
_.type
] }),
/* @__PURE__ */ r.jsxs("div", { className: "text-xs", children: [
"Property: ",
b
] }),
/* @__PURE__ */ r.jsxs("div", { className: "text-xs", children: [
"Current value: ",
JSON.stringify(R)
] })
] });
}
};
return /* @__PURE__ */ r.jsxs("div", { className: O("space-y-4", k), children: [
a && /* @__PURE__ */ r.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ r.jsxs(D, { htmlFor: s, children: [
a,
v && /* @__PURE__ */ r.jsx("span", { className: "text-red-500 ml-1", children: "*" })
] }),
/* @__PURE__ */ r.jsx("hr", { className: "border-border" })
] }),
/* @__PURE__ */ r.jsx("div", { className: O(
"space-y-4",
"pl-4 border-l-2 border-border"
), children: Object.entries(m).map(([b, _]) => {
if (!_)
return console.warn(`ObjectField: Schema for property '${b}' is undefined`), null;
const R = l[b], x = (o == null ? void 0 : o[`${d}.${b}`]) || (o == null ? void 0 : o[b]);
return /* @__PURE__ */ r.jsx("div", { children: E(b, _, R, x) }, b);
}) }),
u && /* @__PURE__ */ r.jsx("p", { className: "text-sm text-red-500 mt-2", children: u })
] });
}
function Yr({
name: s,
label: a,
value: l = {},
onChange: c,
error: u,
required: v,
discriminator: m,
variants: o,
errors: d,
path: k,
className: w = ""
}) {
const E = l[m], b = Object.keys(o), _ = (x) => {
const S = { [m]: x };
c(k, S);
}, R = (x, S) => {
const y = { ...l, [x]: S };
c(k, y);
};
return /* @__PURE__ */ r.jsxs("div", { className: O("space-y-4", w), children: [
a && /* @__PURE__ */ r.jsxs(D, { children: [
a,
v && /* @__PURE__ */ r.jsx("span", { className: "text-red-500 ml-1", children: "*" })
] }),
/* @__PURE__ */ r.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ r.jsx(D, { htmlFor: `${s}-discriminator`, children: "Type" }),
/* @__PURE__ */ r.jsxs(T.Root, { value: E || "", onValueChange: _, children: [
/* @__PURE__ */ r.jsxs(
T.Trigger,
{
id: `${s}-discriminator`,
className: "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
children: [
/* @__PURE__ */ r.jsx(T.Value, { placeholder: "Select type..." }),
/* @__PURE__ */ r.jsx(T.Icon, { asChild: !0, children: /* @__PURE__ */ r.jsx("svg", { className: "h-4 w-4 opacity-50", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ r.jsx("polyline", { points: "6,9 12,15 18,9" }) }) })
]
}
),
/* @__PURE__ */ r.jsx(T.Portal, { children: /* @__PURE__ */ r.jsx(T.Content, { className: "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md", children: /* @__PURE__ */ r.jsx(T.Viewport, { className: "p-1", children: b.map((x) => /* @__PURE__ */ r.jsxs(
T.Item,
{
value: x,
className: "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
children: [
/* @__PURE__ */ r.jsx(T.ItemIndicator, { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ r.jsx("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ r.jsx("polyline", { points: "20,6 9,17 4,12" }) }) }),
/* @__PURE__ */ r.jsx(T.ItemText, { children: x })
]
},
x
)) }) }) })
] })
] }),
E && o[E] && /* @__PURE__ */ r.jsxs("div", { className: "space-y-4 p-4 border rounded-lg bg-card", children: [
/* @__PURE__ */ r.jsxs("h4", { className: "text-sm font-semibold text-card-foreground", children: [
E,
" Properties"
] }),
/* @__PURE__ */ r.jsx("div", { className: "space-y-3", children: Object.entries(o[E].properties || {}).map(([x, S]) => {
if (x === m) return null;
const y = `${k}.${x}`, h = l[x], I = d[y];
return /* @__PURE__ */ r.jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ r.jsxs(D, { htmlFor: `${s}-${x}`, children: [
S.label || x,
S.required && /* @__PURE__ */ r.jsx("span", { className: "text-red-500 ml-1", children: "*" })
] }),
Ur(
`${s}-${x}`,
x,
h,
S,
I,
(M) => R(x, M)
),
I && /* @__PURE__ */ r.jsx("p", { className: "text-sm text-red-500 mt-1", children: I })
] }, x);
}) })
] }),
u && /* @__PURE__ */ r.jsx("p", { className: "text-sm text-red-500 mt-1", children: u })
] });
}
function Ur(s, a, l, c, u, v) {
const m = O(
"w-full px-3 py-2 border border-input rounded-md bg-background",
u && "border-red-500 focus-visible:ring-red-500"
);
switch (c.type) {
case "string":
return /* @__PURE__ */ r.jsx(
"input",
{
id: s,
name: a,
type: "text",
value: l || "",
onChange: (o) => v(o.target.value),
className: m,
placeholder: `Enter ${c.label || a}`
}
);
case "number":
return /* @__PURE__ */ r.jsx(
"input",
{
id: s,
name: a,
type: "number",
value: l || 0,
onChange: (o) => v(Number(o.target.value)),
className: m,
min: c.min,
max: c.max,
step: c.step
}
);
case "boolean":
return /* @__PURE__ */ r.jsxs("div", { className: "flex items-center space-x-2", children: [
/* @__PURE__ */ r.jsx(
"input",
{
id: s,
name: a,
type: "checkbox",
checked: l || !1,
onChange: (o) => v(o.target.checked),
className: "h-4 w-4 rounded border-input"
}
),
/* @__PURE__ */ r.jsx("span", { className: "text-sm", children: "Yes" })
] });
default:
return /* @__PURE__ */ r.jsxs("div", { className: "text-sm text-muted-foreground p-2 border border-dashed rounded", children: [
"Unsupported property type: ",
c.type,
/* @__PURE__ */ r.jsx("br", {}),
"Current value: ",
JSON.stringify(l)
] });
}
}
function Mr({
name: s,
label: a,
value: l = "",
onChange: c,
error: u,
required: v,
values: m,
className: o = ""
}) {
return /* @__PURE__ */ r.jsxs("div", { className: O("space-y-2", o), children: [
a && /* @__PURE__ */ r.jsxs(D, { htmlFor: s, children: [
a,
v && /* @__PURE__ */ r.jsx("span", { className: "text-red-500 ml-1", children: "*" })
] }),
/* @__PURE__ */ r.jsxs(T.Root, { value: l, onValueChange: c, children: [
/* @__PURE__ */ r.jsxs(
T.Trigger,
{
id: s,
className: O(
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
u && "border-red-500 focus:ring-red-500"
),
children: [
/* @__PURE__ */ r.jsx(T.Value, { placeholder: "Select an option..." }),
/* @__PURE__ */ r.jsx(T.Icon, { asChild: !0, children: /* @__PURE__ */ r.jsx("svg", { className: "h-4 w-4 opacity-50", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ r.jsx("polyline", { points: "6,9 12,15 18,9" }) }) })
]
}
),
/* @__PURE__ */ r.jsx(T.Portal, { children: /* @__PURE__ */ r.jsx(T.Content, { className: "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md", children: /* @__PURE__ */ r.jsx(T.Viewport, { className: "p-1", children: m.map((d) => /* @__PURE__ */ r.jsxs(
T.Item,
{
value: d,
className: "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
children: [
/* @__PURE__ */ r.jsx(T.ItemIndicator, { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ r.jsx("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ r.jsx("polyline", { points: "20,6 9,17 4,12" }) }) }),
/* @__PURE__ */ r.jsx(T.ItemText, { children: d })
]
},
d
)) }) }) })
] }),
u && /* @__PURE__ */ r.jsx("p", { className: "text-sm text-red-500 mt-1", children: u })
] });
}
const H = {
name: "radix-themes",
components: {
string: de,
//@ts-ignore
string1: de,
number: Be,
boolean: ze,
date: Je,
array: Lr,
object: Ke,
discriminatedUnion: Yr
// Note: enum field is not included in UIAdapter interface yet,
// but will be registered separately in registerRadixThemesAdapter()
}
};
function Qr() {
return Or(H), Pr("enum", Mr), console.log("Radix Themes Adapter registered successfully:", H.name), H;
}
function Br(s) {
return /* @__PURE__ */ r.jsx(Sr, { registerUIAdapter: H, ...s });
}
const zr = U.object({
name: U.string().min(1, "Name is required"),
email: U.string().email("Invalid email"),
age: U.number().min(18, "Must be at least 18"),
subscribe: U.boolean(),
role: U.enum(["admin", "user", "moderator"])
});
function et() {
const s = (a) => {
console.log("Form submitted:", a);
};
return /* @__PURE__ */ r.jsxs("div", { className: "max-w-md mx-auto p-6", children: [
/* @__PURE__ */ r.jsx("h1", { className: "text-2xl font-bold mb-6", children: "ZodForm with Radix Adapter" }),
/* @__PURE__ */ r.jsx(
Br,
{
schema: zr,
onSubmit: s,
defaultValues: {
name: "",
email: "",
age: 18,
subscribe: !1,
role: "user"
},
className: "space-y-4"
}
)
] });
}
export {
Lr as ArrayField,
ze as BooleanField,
ue as Button,
Je as DateField,
Yr as DiscriminatedUnionField,
Mr as EnumField,
ee as Input,
D as Label,
Be as NumberField,
Ke as ObjectField,
de as StringField,
Ar as Textarea,
Br as ZodForm,
et as ZodFormExample,
Dr as buttonVariants,
O as cn,
H as radixThemesAdapter,
Qr as registerRadixThemesAdapter
};