rharuow-ds
Version:
Modern React Design System with 8 components: Button, Input (with password support), Textarea, Select, AsyncSelect, MultiSelect, MultiAsyncSelect, and RadioGroup. Full React Hook Form integration, Tailwind CSS styling, and CSS Variables for theme customiz
1,265 lines (1,264 loc) • 48.1 kB
JavaScript
import * as s from "react";
import fe from "react";
import { useFormContext as ee, useWatch as te } from "react-hook-form";
var se = { exports: {} }, re = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and 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 xe() {
if (le) return re;
le = 1;
var t = Symbol.for("react.transitional.element"), o = Symbol.for("react.fragment");
function l(f, h, j) {
var C = null;
if (j !== void 0 && (C = "" + j), h.key !== void 0 && (C = "" + h.key), "key" in h) {
j = {};
for (var I in h)
I !== "key" && (j[I] = h[I]);
} else j = h;
return h = j.ref, {
$$typeof: t,
type: f,
key: C,
ref: h !== void 0 ? h : null,
props: j
};
}
return re.Fragment = o, re.jsx = l, re.jsxs = l, re;
}
var ae = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ie;
function me() {
return ie || (ie = 1, process.env.NODE_ENV !== "production" && function() {
function t(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === M ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case i:
return "Fragment";
case k:
return "Profiler";
case E:
return "StrictMode";
case y:
return "Suspense";
case L:
return "SuspenseList";
case V:
return "Activity";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), e.$$typeof) {
case d:
return "Portal";
case O:
return (e.displayName || "Context") + ".Provider";
case c:
return (e._context.displayName || "Context") + ".Consumer";
case A:
var n = e.render;
return e = e.displayName, e || (e = n.displayName || n.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case Y:
return n = e.displayName || null, n !== null ? n : t(e.type) || "Memo";
case S:
n = e._payload, e = e._init;
try {
return t(e(n));
} catch {
}
}
return null;
}
function o(e) {
return "" + e;
}
function l(e) {
try {
o(e);
var n = !1;
} catch {
n = !0;
}
if (n) {
n = console;
var R = n.error, z = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return R.call(
n,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
z
), o(e);
}
}
function f(e) {
if (e === i) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === S)
return "<...>";
try {
var n = t(e);
return n ? "<" + n + ">" : "<...>";
} catch {
return "<...>";
}
}
function h() {
var e = D.A;
return e === null ? null : e.getOwner();
}
function j() {
return Error("react-stack-top-frame");
}
function C(e) {
if (v.call(e, "key")) {
var n = Object.getOwnPropertyDescriptor(e, "key").get;
if (n && n.isReactWarning) return !1;
}
return e.key !== void 0;
}
function I(e, n) {
function R() {
B || (B = !0, console.error(
"%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://react.dev/link/special-props)",
n
));
}
R.isReactWarning = !0, Object.defineProperty(e, "key", {
get: R,
configurable: !0
});
}
function p() {
var e = t(this.type);
return P[e] || (P[e] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), e = this.props.ref, e !== void 0 ? e : null;
}
function T(e, n, R, z, G, $, J, K) {
return R = $.ref, e = {
$$typeof: g,
type: e,
key: n,
props: $,
_owner: G
}, (R !== void 0 ? R : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: p
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(e, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: J
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: K
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function _(e, n, R, z, G, $, J, K) {
var F = n.children;
if (F !== void 0)
if (z)
if (a(F)) {
for (z = 0; z < F.length; z++)
b(F[z]);
Object.freeze && Object.freeze(F);
} else
console.error(
"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 b(F);
if (v.call(n, "key")) {
F = t(e);
var H = Object.keys(n).filter(function(w) {
return w !== "key";
});
z = 0 < H.length ? "{key: someKey, " + H.join(": ..., ") + ": ...}" : "{key: someKey}", Q[F + z] || (H = 0 < H.length ? "{" + H.join(": ..., ") + ": ...}" : "{}", console.error(
`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} />`,
z,
F,
H,
F
), Q[F + z] = !0);
}
if (F = null, R !== void 0 && (l(R), F = "" + R), C(n) && (l(n.key), F = "" + n.key), "key" in n) {
R = {};
for (var X in n)
X !== "key" && (R[X] = n[X]);
} else R = n;
return F && I(
R,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), T(
e,
F,
$,
G,
h(),
R,
J,
K
);
}
function b(e) {
typeof e == "object" && e !== null && e.$$typeof === g && e._store && (e._store.validated = 1);
}
var N = fe, g = Symbol.for("react.transitional.element"), d = Symbol.for("react.portal"), i = Symbol.for("react.fragment"), E = Symbol.for("react.strict_mode"), k = Symbol.for("react.profiler"), c = Symbol.for("react.consumer"), O = Symbol.for("react.context"), A = Symbol.for("react.forward_ref"), y = Symbol.for("react.suspense"), L = Symbol.for("react.suspense_list"), Y = Symbol.for("react.memo"), S = Symbol.for("react.lazy"), V = Symbol.for("react.activity"), M = Symbol.for("react.client.reference"), D = N.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, v = Object.prototype.hasOwnProperty, a = Array.isArray, u = console.createTask ? console.createTask : function() {
return null;
};
N = {
"react-stack-bottom-frame": function(e) {
return e();
}
};
var B, P = {}, W = N["react-stack-bottom-frame"].bind(
N,
j
)(), Z = u(f(j)), Q = {};
ae.Fragment = i, ae.jsx = function(e, n, R, z, G) {
var $ = 1e4 > D.recentlyCreatedOwnerStacks++;
return _(
e,
n,
R,
!1,
z,
G,
$ ? Error("react-stack-top-frame") : W,
$ ? u(f(e)) : Z
);
}, ae.jsxs = function(e, n, R, z, G) {
var $ = 1e4 > D.recentlyCreatedOwnerStacks++;
return _(
e,
n,
R,
!0,
z,
G,
$ ? Error("react-stack-top-frame") : W,
$ ? u(f(e)) : Z
);
};
}()), ae;
}
var ce;
function he() {
return ce || (ce = 1, process.env.NODE_ENV === "production" ? se.exports = xe() : se.exports = me()), se.exports;
}
var r = he();
function ue(t) {
var o, l, f = "";
if (typeof t == "string" || typeof t == "number") f += t;
else if (typeof t == "object") if (Array.isArray(t)) {
var h = t.length;
for (o = 0; o < h; o++) t[o] && (l = ue(t[o])) && (f && (f += " "), f += l);
} else for (l in t) t[l] && (f && (f += " "), f += l);
return f;
}
function ve() {
for (var t, o, l = 0, f = "", h = arguments.length; l < h; l++) (t = arguments[l]) && (o = ue(t)) && (f && (f += " "), f += o);
return f;
}
function m(...t) {
return ve(...t);
}
const ke = ({
children: t,
variant: o = "default",
className: l = "",
...f
}) => {
const h = "px-4 py-2 rounded font-medium transition", j = {
default: "bg-[var(--primary,#2563eb)] text-[var(--primary-text,#fff)] hover:bg-[var(--primary-hover,#1d4ed8)]",
outline: "border border-[var(--primary,#2563eb)] text-[var(--primary,#2563eb)] bg-white hover:bg-[var(--primary-hover,#e0e7ff)]",
secondary: "bg-[var(--secondary,#fbbf24)] text-[var(--secondary-text,#222)] hover:bg-[var(--secondary-hover,#f59e42)]"
};
return /* @__PURE__ */ r.jsx("button", { className: m(h, j[o], l), ...f, children: t });
}, be = s.forwardRef(
({
name: t,
className: o,
type: l = "text",
label: f,
onFocus: h,
onBlur: j,
Icon: C,
iconClassName: I,
iconAction: p,
containerClassName: T,
..._
}, b) => {
var D, v, a;
const [N, g] = s.useState(!1), [d, i] = s.useState(!1), E = ee(), k = E == null ? void 0 : E.control, c = E == null ? void 0 : E.register, O = k && t ? te({ control: k, name: t }) : void 0, A = _.value ?? O ?? "", y = (a = (v = (D = E == null ? void 0 : E.formState) == null ? void 0 : D.errors) == null ? void 0 : v[t]) == null ? void 0 : a.message, L = N || !!A, Y = l === "password" ? d ? "text" : "password" : l, S = () => /* @__PURE__ */ r.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ r.jsx(
"path",
{
d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z",
fill: "currentColor"
}
) }), V = () => /* @__PURE__ */ r.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ r.jsx(
"path",
{
d: "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z",
fill: "currentColor"
}
) }), M = () => {
i(!d);
};
return /* @__PURE__ */ r.jsxs("div", { className: m("relative", T), children: [
/* @__PURE__ */ r.jsx(
"input",
{
id: _.id || t,
type: Y,
className: m(
"peer flex h-12 w-full border border-[var(--primary,#2563eb)] rounded-md bg-[var(--input-bg,#fff)] text-[var(--input-text,#222)] px-3 pt-6 pb-2 text-sm placeholder-transparent transition focus:outline-none focus:border-[var(--primary,#2563eb)] disabled:cursor-not-allowed disabled:opacity-50",
l === "password" || C ? "pr-12" : "",
// espaço extra para qualquer ícone (password ou customizado)
o
),
onFocus: (u) => {
g(!0), h && h(u);
},
...E && t ? (() => {
const u = c(t), B = u.onBlur;
return {
...u,
ref: (P) => {
typeof b == "function" ? b(P) : b && (b.current = P), u.ref && u.ref(P);
},
onBlur: (P) => {
g(!1), j && j(P), B && B(P);
}
};
})() : {
ref: b,
onBlur: (u) => {
g(!1), j && j(u);
}
},
..._
}
),
f && /* @__PURE__ */ r.jsx(
"label",
{
htmlFor: _.id || t,
className: m(
"absolute left-3 z-10 origin-[0] cursor-text select-none text-sm text-gray-400 transition-all duration-200",
L ? "top-0 scale-90 -translate-y-1 text-xs text-[var(--primary,#2563eb)] p-1 rounded-full bg-white" : "top-3 scale-100 translate-y-0.5"
),
children: f
}
),
l === "password" && /* @__PURE__ */ r.jsx(
"button",
{
type: "button",
className: "absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 hover:text-[var(--primary,#2563eb)] transition-colors duration-200 focus:outline-none focus:text-[var(--primary,#2563eb)]",
onClick: M,
"aria-label": d ? "Esconder senha" : "Mostrar senha",
tabIndex: -1,
children: d ? /* @__PURE__ */ r.jsx(V, {}) : /* @__PURE__ */ r.jsx(S, {})
}
),
C && l !== "password" && /* @__PURE__ */ r.jsx(
"div",
{
className: m(
"absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 cursor-pointer hover:text-[var(--primary,#2563eb)] transition-colors duration-200",
I
),
onClick: p,
children: /* @__PURE__ */ r.jsx(C, {})
}
),
y && /* @__PURE__ */ r.jsx("span", { className: "text-red-500 text-xs mt-1 block", children: y })
] });
}
);
be.displayName = "Input";
const pe = s.forwardRef(
({
name: t,
label: o,
options: l,
className: f,
containerClassName: h,
isClearable: j,
onFocus: C,
onBlur: I,
...p
}, T) => {
var S, V, M, D;
const [_, b] = s.useState(!1), [N, g] = s.useState(!1), d = s.useRef(null), i = ee(), E = i == null ? void 0 : i.control, k = E && t ? te({ control: E, name: t }) : void 0, c = p.value ?? k ?? "", O = (M = (V = (S = i == null ? void 0 : i.formState) == null ? void 0 : S.errors) == null ? void 0 : V[t]) == null ? void 0 : M.message, A = _ || !!c;
s.useEffect(() => {
const v = (a) => {
d.current && !d.current.contains(a.target) && (g(!1), b(!1));
};
return document.addEventListener("mousedown", v), () => {
document.removeEventListener("mousedown", v);
};
}, []);
const y = () => {
g((v) => !v), b(!0);
}, L = (v) => {
b(!0), C && C(v);
}, Y = (v) => {
I && I(v);
};
return /* @__PURE__ */ r.jsxs("div", { className: m("relative", h), ref: d, children: [
/* @__PURE__ */ r.jsxs(
"div",
{
id: p.id || t,
tabIndex: 0,
role: "button",
"aria-haspopup": "listbox",
"aria-expanded": N,
className: m(
"peer flex items-center h-12 w-full border border-[var(--primary,#2563eb)] rounded-md bg-[var(--input-bg,#fff)] text-[var(--input-text,#222)] px-3 py-3 text-sm transition focus:outline-none focus:border-[var(--primary,#2563eb)] disabled:cursor-not-allowed disabled:opacity-50 appearance-none cursor-pointer relative",
f
),
onClick: y,
onFocus: L,
onBlur: Y,
ref: T,
children: [
/* @__PURE__ */ r.jsx("span", { className: m("block truncate", !c && "text-gray-400"), children: ((D = l.find((v) => v.value === c)) == null ? void 0 : D.label) || !o && "Selecione..." }),
j && c && /* @__PURE__ */ r.jsx(
"button",
{
type: "button",
tabIndex: -1,
"aria-label": "Limpar seleção",
className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-red-500 bg-transparent p-1 rounded-full focus:outline-none",
onClick: (v) => {
if (v.stopPropagation(), i && t && i.setValue(t, ""), p.onChange) {
const a = {
target: { value: "" }
};
p.onChange(a);
}
g(!1), b(!1);
},
children: "✕"
}
)
]
}
),
o && /* @__PURE__ */ r.jsx(
"label",
{
htmlFor: p.id || t,
className: m(
"absolute left-3 z-10 origin-[0] cursor-text select-none text-sm text-gray-400 transition-all duration-200",
A ? "top-0 scale-90 -translate-y-1 text-xs text-[var(--primary,#2563eb)] p-1 rounded-full bg-white" : "top-3 scale-100 translate-y-0.5"
),
children: o
}
),
/* @__PURE__ */ r.jsx(
"div",
{
className: m(
"absolute left-0 w-full mt-1 rounded-md shadow-lg bg-white z-20 transition-all duration-200 overflow-hidden",
N ? "border border-[var(--primary,#2563eb)] max-h-36 opacity-100 scale-100" : "max-h-0 opacity-0 scale-95 pointer-events-none"
),
style: {
maxHeight: N ? "9.5rem" : "0",
// 3 options * 2.5rem + padding
overflowY: l.length > 3 ? "auto" : "hidden"
},
children: l.map((v) => /* @__PURE__ */ r.jsx(
"div",
{
className: m(
"px-3 py-2 cursor-pointer hover:bg-blue-50 text-sm",
c === v.value && "bg-blue-100"
),
onMouseDown: () => {
if (i && t && i.setValue(t, v.value), p.onChange) {
const a = {
target: { value: v.value }
};
p.onChange(a);
}
b(!0);
},
children: v.label
},
v.value
))
}
),
O && /* @__PURE__ */ r.jsx("span", { className: "text-red-500 text-xs mt-1 block", children: O })
] });
}
);
pe.displayName = "Select";
const ge = s.forwardRef(
({
name: t,
className: o,
label: l,
onFocus: f,
onBlur: h,
Icon: j,
iconClassName: C,
iconAction: I,
containerClassName: p,
rows: T = 4,
..._
}, b) => {
var y, L, Y;
const [N, g] = s.useState(!1), d = ee(), i = d == null ? void 0 : d.control, E = d == null ? void 0 : d.register, k = i && t ? te({ control: i, name: t }) : void 0, c = _.value ?? k ?? "", O = (Y = (L = (y = d == null ? void 0 : d.formState) == null ? void 0 : y.errors) == null ? void 0 : L[t]) == null ? void 0 : Y.message, A = N || !!c;
return /* @__PURE__ */ r.jsxs("div", { className: m("relative", p), children: [
/* @__PURE__ */ r.jsx(
"textarea",
{
id: _.id || t,
rows: T,
className: m(
"peer flex min-h-[80px] w-full border border-[var(--primary,#2563eb)] rounded-md bg-[var(--input-bg,#fff)] text-[var(--input-text,#222)] px-3 pt-6 pb-2 text-sm placeholder-transparent transition focus:outline-none focus:border-[var(--primary,#2563eb)] disabled:cursor-not-allowed disabled:opacity-50 resize-vertical",
j ? "pr-12" : "",
// espaço extra para ícone customizado
o
),
onFocus: (S) => {
g(!0), f && f(S);
},
...d && t ? (() => {
const S = E(t), V = S.onBlur;
return {
...S,
ref: (M) => {
typeof b == "function" ? b(M) : b && (b.current = M), S.ref && S.ref(M);
},
onBlur: (M) => {
g(!1), h && h(M), V && V(M);
}
};
})() : {
ref: b,
onBlur: (S) => {
g(!1), h && h(S);
}
},
..._
}
),
l && /* @__PURE__ */ r.jsx(
"label",
{
htmlFor: _.id || t,
className: m(
"absolute left-3 z-10 origin-[0] cursor-text select-none text-sm text-gray-400 transition-all duration-200",
A ? "top-0 scale-90 -translate-y-1 text-xs text-[var(--primary,#2563eb)] p-1 rounded-full bg-white" : "top-3 scale-100 translate-y-0.5"
),
children: l
}
),
j && /* @__PURE__ */ r.jsx(
"div",
{
className: m(
"absolute top-3 right-3 text-gray-400 cursor-pointer hover:text-[var(--primary,#2563eb)] transition-colors duration-200",
C
),
onClick: I,
children: /* @__PURE__ */ r.jsx(j, {})
}
),
O && /* @__PURE__ */ r.jsx("span", { className: "text-red-500 text-xs mt-1 block", children: O })
] });
}
);
ge.displayName = "Textarea";
const ye = s.forwardRef(
({
name: t,
label: o,
loadOptions: l,
className: f,
containerClassName: h,
isClearable: j,
defaultOptions: C = !1,
loadingMessage: I = "Carregando...",
noOptionsMessage: p = "Nenhuma opção encontrada",
searchable: T = !1,
debounceMs: _ = 300,
onFocus: b,
onBlur: N,
...g
}, d) => {
var F, H, X;
const [i, E] = s.useState(!1), [k, c] = s.useState(!1), [O, A] = s.useState([]), [y, L] = s.useState(!1), [Y, S] = s.useState(""), [V, M] = s.useState(""), D = s.useRef(null), v = s.useRef(null), a = ee(), u = a == null ? void 0 : a.control, B = u && t ? te({ control: u, name: t }) : void 0, P = g.value ?? B ?? "", W = (X = (H = (F = a == null ? void 0 : a.formState) == null ? void 0 : F.errors) == null ? void 0 : H[t]) == null ? void 0 : X.message, Z = i || !!P;
s.useEffect(() => {
const w = setTimeout(() => {
M(Y);
}, _);
return () => clearTimeout(w);
}, [Y, _]), s.useEffect(() => {
(k || C && O.length === 0) && Q(T ? V : void 0);
}, [V, k]), s.useEffect(() => {
C === !0 ? Q() : Array.isArray(C) && A(C);
}, []);
const Q = async (w) => {
try {
L(!0);
const q = await l(w);
A(q);
} catch (q) {
console.error("Error loading options:", q), A([]);
} finally {
L(!1);
}
};
s.useEffect(() => {
const w = (q) => {
D.current && !D.current.contains(q.target) && (c(!1), E(!1), S(""));
};
return document.addEventListener("mousedown", w), () => {
document.removeEventListener("mousedown", w);
};
}, []);
const e = () => {
k || (c(!0), E(!0), T && v.current && setTimeout(() => {
var w;
return (w = v.current) == null ? void 0 : w.focus();
}, 0));
}, n = (w) => {
E(!0), b && b(w);
}, R = (w) => {
N && N(w);
}, z = (w) => {
S(w.target.value);
}, G = (w) => {
if (a && t && a.setValue(t, w), g.onChange) {
const q = {
target: { value: w }
};
g.onChange(q);
}
c(!1), E(!1), S("");
}, $ = (w) => {
if (w.stopPropagation(), a && t && a.setValue(t, ""), g.onChange) {
const q = {
target: { value: "" }
};
g.onChange(q);
}
c(!1), E(!1), S("");
}, J = O.find((w) => w.value === P), K = T && k ? Y : (J == null ? void 0 : J.label) || "";
return /* @__PURE__ */ r.jsxs("div", { className: m("relative", h), ref: D, children: [
/* @__PURE__ */ r.jsxs(
"div",
{
id: g.id || t,
tabIndex: T ? -1 : 0,
role: "button",
"aria-haspopup": "listbox",
"aria-expanded": k,
className: m(
"peer flex items-center h-12 w-full border border-[var(--primary,#2563eb)] rounded-md bg-[var(--input-bg,#fff)] text-[var(--input-text,#222)] px-3 py-3 text-sm transition focus:outline-none focus:border-[var(--primary,#2563eb)] disabled:cursor-not-allowed disabled:opacity-50 appearance-none cursor-pointer relative",
f
),
onClick: e,
onFocus: T ? void 0 : n,
onBlur: T ? void 0 : R,
ref: d,
children: [
T ? /* @__PURE__ */ r.jsx(
"input",
{
ref: v,
type: "text",
value: K,
onChange: z,
onFocus: n,
onBlur: R,
placeholder: o ? "" : "Selecione...",
className: m(
"w-full bg-transparent border-none outline-none text-sm",
!P && !Y && "text-gray-400"
)
}
) : /* @__PURE__ */ r.jsx("span", { className: m("block truncate", !P && "text-gray-400"), children: (J == null ? void 0 : J.label) || !o && "Selecione..." }),
y && /* @__PURE__ */ r.jsx("div", { className: "absolute right-8 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ r.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-[var(--primary,#2563eb)]" }) }),
j && P && !y && /* @__PURE__ */ r.jsx(
"button",
{
type: "button",
tabIndex: -1,
"aria-label": "Limpar seleção",
className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-red-500 bg-transparent p-1 rounded-full focus:outline-none",
onClick: $,
children: "✕"
}
)
]
}
),
o && /* @__PURE__ */ r.jsx(
"label",
{
htmlFor: g.id || t,
className: m(
"absolute left-3 z-10 origin-[0] cursor-text select-none text-sm text-gray-400 transition-all duration-200",
Z ? "top-0 scale-90 -translate-y-1 text-xs text-[var(--primary,#2563eb)] p-1 rounded-full bg-white" : "top-3 scale-100 translate-y-0.5"
),
children: o
}
),
/* @__PURE__ */ r.jsx(
"div",
{
className: m(
"absolute left-0 w-full mt-1 rounded-md shadow-lg bg-white z-20 transition-all duration-200 overflow-hidden",
k ? "border border-[var(--primary,#2563eb)] max-h-36 opacity-100 scale-100" : "max-h-0 opacity-0 scale-95 pointer-events-none"
),
style: {
maxHeight: k ? "9.5rem" : "0",
overflowY: O.length > 3 ? "auto" : "hidden"
},
children: y ? /* @__PURE__ */ r.jsx("div", { className: "px-3 py-2 text-sm text-gray-500 text-center", children: I }) : O.length === 0 ? /* @__PURE__ */ r.jsx("div", { className: "px-3 py-2 text-sm text-gray-500 text-center", children: p }) : O.map((w) => /* @__PURE__ */ r.jsx(
"div",
{
className: m(
"px-3 py-2 cursor-pointer hover:bg-blue-50 text-sm",
P === w.value && "bg-blue-100"
),
onMouseDown: () => G(w.value),
children: w.label
},
w.value
))
}
),
W && /* @__PURE__ */ r.jsx("span", { className: "text-red-500 text-xs mt-1 block", children: W })
] });
}
);
ye.displayName = "AsyncSelect";
const we = s.forwardRef(
({
name: t,
label: o,
options: l,
className: f,
containerClassName: h,
isClearable: j,
onFocus: C,
onBlur: I,
...p
}, T) => {
var M, D, v;
const [_, b] = s.useState(!1), [N, g] = s.useState(!1), d = s.useRef(null), i = ee(), E = i == null ? void 0 : i.control, k = E && t ? te({ control: E, name: t }) : void 0, c = p.value ?? k ?? [], O = (v = (D = (M = i == null ? void 0 : i.formState) == null ? void 0 : M.errors) == null ? void 0 : D[t]) == null ? void 0 : v.message, A = _ || c && c.length > 0;
s.useEffect(() => {
const a = (u) => {
d.current && !d.current.contains(u.target) && (g(!1), b(!1));
};
return document.addEventListener("mousedown", a), () => {
document.removeEventListener("mousedown", a);
};
}, []);
const y = () => {
g((a) => !a), b(!0);
}, L = (a) => {
b(!0), C && C(a);
}, Y = (a) => {
I && I(a);
}, S = (a) => {
var B;
let u;
c.includes(a) ? u = c.filter((P) => P !== a) : u = [...c, a], i && t && i.setValue(t, u), p.onChange && ((B = p.onChange) == null || B.call(p, {
target: { value: u }
})), b(!0);
}, V = (a) => {
var u;
a.stopPropagation(), i && t && i.setValue(t, []), p.onChange && ((u = p.onChange) == null || u.call(p, {
target: { value: [] }
})), g(!1), b(!1);
};
return /* @__PURE__ */ r.jsxs("div", { className: m("relative", h), ref: d, children: [
/* @__PURE__ */ r.jsxs(
"div",
{
id: p.id || t,
tabIndex: 0,
role: "button",
"aria-haspopup": "listbox",
"aria-expanded": N,
className: m(
"peer flex items-center h-12 w-full border border-[var(--primary,#2563eb)] rounded-md bg-[var(--input-bg,#fff)] text-[var(--input-text,#222)] px-3 py-3 text-sm transition focus:outline-none focus:border-[var(--primary,#2563eb)] disabled:cursor-not-allowed disabled:opacity-50 appearance-none cursor-pointer relative",
f
),
onClick: y,
onFocus: L,
onBlur: Y,
ref: T,
children: [
/* @__PURE__ */ r.jsx(
"div",
{
className: "flex flex-nowrap gap-1 items-center min-h-[1.5rem] w-full overflow-x-auto",
style: { scrollbarWidth: "none" },
children: c && c.length > 0 ? l.filter((a) => c.includes(a.value)).map((a) => /* @__PURE__ */ r.jsxs(
"span",
{
className: "flex items-center border border-blue-200 bg-blue-50 text-blue-700 rounded-2xl px-3 py-1 text-xs shadow-sm mr-1 gap-2",
style: { maxWidth: "140px" },
children: [
/* @__PURE__ */ r.jsx("span", { className: "truncate", title: a.label, children: a.label }),
/* @__PURE__ */ r.jsx(
"button",
{
type: "button",
className: "ml-1 text-[var(--primary,#2563eb)] hover:text-red-500 focus:outline-none w-4 h-4 flex items-center justify-center rounded-full transition-colors duration-150",
"aria-label": `Remover ${a.label}`,
tabIndex: -1,
onClick: (u) => {
u.stopPropagation();
const B = c.filter((P) => P !== a.value);
i && t && i.setValue(t, B), p.onChange && p.onChange({
target: { value: B }
});
},
children: /* @__PURE__ */ r.jsx(
"svg",
{
width: "12",
height: "12",
viewBox: "0 0 12 12",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ r.jsx(
"path",
{
d: "M3 3L9 9M9 3L3 9",
stroke: "currentColor",
strokeWidth: "1.5",
strokeLinecap: "round"
}
)
}
)
}
)
]
},
a.value
)) : !o && /* @__PURE__ */ r.jsx("span", { className: "text-gray-400 text-sm", children: "Selecione..." })
}
),
j && c && c.length > 0 && /* @__PURE__ */ r.jsx(
"button",
{
type: "button",
tabIndex: -1,
"aria-label": "Limpar seleção",
className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-red-500 bg-transparent p-1 rounded-full focus:outline-none",
onClick: V,
children: "✕"
}
)
]
}
),
o && /* @__PURE__ */ r.jsx(
"label",
{
htmlFor: p.id || t,
className: m(
"absolute left-3 z-10 origin-[0] cursor-text select-none text-sm text-gray-400 transition-all duration-200",
A ? "top-0 scale-90 -translate-y-1 text-xs text-[var(--primary,#2563eb)] p-1 rounded-full bg-white" : "top-3 scale-100 translate-y-0.5"
),
children: o
}
),
/* @__PURE__ */ r.jsx(
"div",
{
className: m(
"absolute left-0 w-full mt-1 rounded-md shadow-lg bg-white z-20 transition-all duration-200 overflow-hidden",
N ? "border border-[var(--primary,#2563eb)] max-h-36 opacity-100 scale-100" : "max-h-0 opacity-0 scale-95 pointer-events-none"
),
style: {
maxHeight: N ? "9.5rem" : "0",
overflowY: l.length > 3 ? "auto" : "hidden"
},
children: l.map((a) => /* @__PURE__ */ r.jsxs(
"div",
{
className: m(
"px-3 py-2 cursor-pointer hover:bg-blue-50 text-sm flex items-center gap-2",
c.includes(a.value) && "bg-blue-100 font-semibold"
),
onMouseDown: () => S(a.value),
children: [
/* @__PURE__ */ r.jsx(
"input",
{
type: "checkbox",
checked: c.includes(a.value),
readOnly: !0,
className: "accent-blue-500"
}
),
a.label
]
},
a.value
))
}
),
O && /* @__PURE__ */ r.jsx("span", { className: "text-red-500 text-xs mt-1 block", children: O })
] });
}
);
we.displayName = "MultiSelect";
const je = s.forwardRef(
({
name: t,
label: o,
loadOptions: l,
className: f,
containerClassName: h,
isClearable: j,
defaultOptions: C = !1,
loadingMessage: I = "Carregando...",
noOptionsMessage: p = "Nenhuma opção encontrada",
searchable: T = !1,
debounceMs: _ = 300,
maxSelectedDisplay: b = 3,
onFocus: N,
onBlur: g,
...d
}, i) => {
var w, q, oe;
const [E, k] = s.useState(!1), [c, O] = s.useState(!1), [A, y] = s.useState([]), [L, Y] = s.useState(!1), [S, V] = s.useState(""), [M, D] = s.useState(""), v = s.useRef(null), a = s.useRef(null), u = ee(), B = u == null ? void 0 : u.control, P = B && t ? te({ control: B, name: t }) : void 0, W = d.value ?? P ?? [], Z = (oe = (q = (w = u == null ? void 0 : u.formState) == null ? void 0 : w.errors) == null ? void 0 : q[t]) == null ? void 0 : oe.message, Q = E || W && W.length > 0;
s.useEffect(() => {
const x = setTimeout(() => {
D(S);
}, _);
return () => clearTimeout(x);
}, [S, _]), s.useEffect(() => {
(c || C && A.length === 0) && e(T ? M : void 0);
}, [M, c]), s.useEffect(() => {
C === !0 ? e() : Array.isArray(C) && y(C);
}, []);
const e = async (x) => {
try {
Y(!0);
const U = await l(x);
y(U);
} catch (U) {
console.error("Error loading options:", U), y([]);
} finally {
Y(!1);
}
};
s.useEffect(() => {
const x = (U) => {
v.current && !v.current.contains(U.target) && (O(!1), k(!1), V(""));
};
return document.addEventListener("mousedown", x), () => {
document.removeEventListener("mousedown", x);
};
}, []);
const n = () => {
c || (O(!0), k(!0), T && a.current && setTimeout(() => {
var x;
return (x = a.current) == null ? void 0 : x.focus();
}, 0));
}, R = (x) => {
k(!0), N && N(x);
}, z = (x) => {
g && g(x);
}, G = (x) => {
V(x.target.value);
}, $ = (x) => {
let U;
W.includes(x) ? U = W.filter((ne) => ne !== x) : U = [...W, x], u && t && u.setValue(t, U), d.onChange && d.onChange({
target: { value: U }
}), k(!0);
}, J = (x, U) => {
U.stopPropagation();
const ne = W.filter((de) => de !== x);
u && t && u.setValue(t, ne), d.onChange && d.onChange({
target: { value: ne }
});
}, K = (x) => {
x.stopPropagation(), u && t && u.setValue(t, []), d.onChange && d.onChange({
target: { value: [] }
}), O(!1), k(!1), V("");
}, F = A.filter((x) => W.includes(x.value)), H = F.slice(0, b), X = F.length - b;
return /* @__PURE__ */ r.jsxs("div", { className: m("relative", h), ref: v, children: [
/* @__PURE__ */ r.jsxs(
"div",
{
id: d.id || t,
tabIndex: T ? -1 : 0,
role: "button",
"aria-haspopup": "listbox",
"aria-expanded": c,
className: m(
"peer flex items-center min-h-12 w-full border border-[var(--primary,#2563eb)] rounded-md bg-[var(--input-bg,#fff)] text-[var(--input-text,#222)] px-3 py-2 text-sm transition focus:outline-none focus:border-[var(--primary,#2563eb)] disabled:cursor-not-allowed disabled:opacity-50 appearance-none cursor-pointer relative",
f
),
onClick: n,
onFocus: T ? void 0 : R,
onBlur: T ? void 0 : z,
ref: i,
children: [
/* @__PURE__ */ r.jsxs("div", { className: "flex flex-wrap gap-1 items-center min-h-[1.5rem] w-full", children: [
H.map((x) => /* @__PURE__ */ r.jsxs(
"span",
{
className: "flex items-center border border-blue-200 bg-blue-50 text-blue-700 rounded-2xl px-3 py-1 text-xs shadow-sm gap-2",
style: { maxWidth: "140px" },
children: [
/* @__PURE__ */ r.jsx("span", { className: "truncate", title: x.label, children: x.label }),
/* @__PURE__ */ r.jsx(
"button",
{
type: "button",
className: "ml-1 text-[var(--primary,#2563eb)] hover:text-red-500 focus:outline-none w-4 h-4 flex items-center justify-center rounded-full transition-colors duration-150",
"aria-label": `Remover ${x.label}`,
tabIndex: -1,
onClick: (U) => J(x.value, U),
children: /* @__PURE__ */ r.jsx(
"svg",
{
width: "12",
height: "12",
viewBox: "0 0 12 12",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ r.jsx(
"path",
{
d: "M3 3L9 9M9 3L3 9",
stroke: "currentColor",
strokeWidth: "1.5",
strokeLinecap: "round"
}
)
}
)
}
)
]
},
x.value
)),
X > 0 && /* @__PURE__ */ r.jsxs("span", { className: "flex items-center border border-gray-200 bg-gray-100 text-gray-600 rounded-2xl px-3 py-1 text-xs", children: [
"+",
X,
" mais"
] }),
T ? /* @__PURE__ */ r.jsx(
"input",
{
ref: a,
type: "text",
value: S,
onChange: G,
onFocus: R,
onBlur: z,
placeholder: W.length === 0 && !o ? "Selecione..." : "",
className: "flex-1 min-w-[120px] bg-transparent border-none outline-none text-sm"
}
) : W.length === 0 && !o && /* @__PURE__ */ r.jsx("span", { className: "text-gray-400 text-sm", children: "Selecione..." })
] }),
L && /* @__PURE__ */ r.jsx("div", { className: "absolute right-8 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ r.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-[var(--primary,#2563eb)]" }) }),
j && W && W.length > 0 && !L && /* @__PURE__ */ r.jsx(
"button",
{
type: "button",
tabIndex: -1,
"aria-label": "Limpar seleção",
className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-red-500 bg-transparent p-1 rounded-full focus:outline-none",
onClick: K,
children: "✕"
}
)
]
}
),
o && /* @__PURE__ */ r.jsx(
"label",
{
htmlFor: d.id || t,
className: m(
"absolute left-3 z-10 origin-[0] cursor-text select-none text-sm text-gray-400 transition-all duration-200",
Q ? "top-0 scale-90 -translate-y-1 text-xs text-[var(--primary,#2563eb)] p-1 rounded-full bg-white" : "top-3 scale-100 translate-y-0.5"
),
children: o
}
),
/* @__PURE__ */ r.jsx(
"div",
{
className: m(
"absolute left-0 w-full mt-1 rounded-md shadow-lg bg-white z-20 transition-all duration-200 overflow-hidden",
c ? "border border-[var(--primary,#2563eb)] max-h-36 opacity-100 scale-100" : "max-h-0 opacity-0 scale-95 pointer-events-none"
),
style: {
maxHeight: c ? "9.5rem" : "0",
overflowY: A.length > 3 ? "auto" : "hidden"
},
children: L ? /* @__PURE__ */ r.jsx("div", { className: "px-3 py-2 text-sm text-gray-500 text-center", children: I }) : A.length === 0 ? /* @__PURE__ */ r.jsx("div", { className: "px-3 py-2 text-sm text-gray-500 text-center", children: p }) : A.map((x) => /* @__PURE__ */ r.jsxs(
"div",
{
className: m(
"px-3 py-2 cursor-pointer hover:bg-blue-50 text-sm flex items-center gap-2",
W.includes(x.value) && "bg-blue-100 font-semibold"
),
onMouseDown: () => $(x.value),
children: [
/* @__PURE__ */ r.jsx(
"input",
{
type: "checkbox",
checked: W.includes(x.value),
readOnly: !0,
className: "accent-blue-500"
}
),
x.label
]
},
x.value
))
}
),
Z && /* @__PURE__ */ r.jsx("span", { className: "text-red-500 text-xs mt-1 block", children: Z })
] });
}
);
je.displayName = "MultiAsyncSelect";
const Ne = {
sm: "h-10 text-sm px-3",
md: "h-12 text-base px-4",
lg: "h-16 text-lg px-6"
}, Ee = s.forwardRef(
({
name: t,
label: o,
options: l,
className: f,
containerClassName: h,
optionClassName: j,
direction: C = "row",
size: I = "md",
onFocus: p,
onBlur: T,
..._
}, b) => {
var c, O, A;
const N = ee(), g = N == null ? void 0 : N.control, d = g && t ? te({ control: g, name: t }) : void 0, i = _.value ?? d ?? "", E = (A = (O = (c = N == null ? void 0 : N.formState) == null ? void 0 : c.errors) == null ? void 0 : O[t]) == null ? void 0 : A.message, k = (y) => {
N && t && N.setValue(t, y), _.onChange && _.onChange({ target: { value: y } });
};
return /* @__PURE__ */ r.jsxs("div", { className: m("relative", h), ref: b, children: [
o && /* @__PURE__ */ r.jsx(
"label",
{
htmlFor: t,
className: m(
"absolute left-3 z-10 origin-[0] cursor-text select-none text-sm transition-all duration-200",
"top-0 scale-90 -translate-y-1 text-xs text-[var(--primary,#2563eb)] p-1 rounded-full bg-white"
),
children: o
}
),
/* @__PURE__ */ r.jsx(
"div",
{
className: m(
"flex gap-2 w-full pt-6",
// espaço para label flutuante
C === "row" ? "flex-row" : "flex-col",
f
),
"aria-label": o,
tabIndex: -1,
onFocus: p,
onBlur: T,
children: l.map((y) => /* @__PURE__ */ r.jsxs(
"button",
{
type: "button",
className: m(
"relative flex items-center justify-center border rounded-lg transition-all duration-200 shadow-sm px-4 focus:outline-none focus:ring-2 focus:ring-[var(--primary-hover,#dbeafe)]",
Ne[I],
i === y.value ? "border-[var(--primary,#2563eb)] bg-[var(--primary-hover,#dbeafe)] text-[var(--primary,#2563eb)] ring-2 ring-[var(--primary-hover,#dbeafe)] shadow-md transform scale-[1.02]" : "border-gray-200 bg-white text-gray-600 hover:border-[var(--primary,#2563eb)] hover:bg-[var(--primary-hover,#dbeafe)] hover:text-[var(--primary,#2563eb)] hover:shadow-md",
j
),
"aria-pressed": i === y.value,
"data-selected": i === y.value,
tabIndex: 0,
onClick: () => k(y.value),
onKeyDown: (L) => {
(L.key === "Enter" || L.key === " ") && (L.preventDefault(), k(y.value));
},
children: [
y.icon && /* @__PURE__ */ r.jsx("span", { className: "mr-2 text-lg flex items-center", children: y.icon }),
/* @__PURE__ */ r.jsx("span", { className: "truncate font-medium", children: y.label })
]
},
y.value
))
}
),
E && /* @__PURE__ */ r.jsx("span", { className: "text-red-500 text-xs mt-1 block", children: E })
] });
}
);
Ee.displayName = "RadioGroup";
export {
ye as AsyncSelect,
ke as Button,
be as Input,
je as MultiAsyncSelect,
we as MultiSelect,
Ee as RadioGroup,
pe as Select,
ge as Textarea
};