@darkfrost-1107/scaff-z-react 0.1.7

package/dist/shared/custom/form/inputs/async-combobox.input.esm

@@ -0,0 +1,91 @@
+import { Field as e, FieldError as t, FieldLabel as n } from "../../../ui/field.esm";
+import { Hover as r } from "../../hover/hover.esm";
+import { Combobox as i, ComboboxChip as a, ComboboxChips as o, ComboboxChipsInput as s, ComboboxContent as c, ComboboxEmpty as l, ComboboxInput as u, ComboboxItem as d, ComboboxList as f, useComboboxAnchor as p } from "../../../ui/combobox.esm";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import * as g from "react";
+import { Loader2 as _ } from "lucide-react";
+import { Controller as v } from "react-hook-form";
+//#region src/shared/custom/form/inputs/async-combobox.input.tsx
+function y({ form: y, name: b, label: x, helper: S, placeholder: C, service: w, itemFactory: T, keyExtractor: E, multiple: D = !1 }) {
+	let [O, k] = g.useState([]), [A, j] = g.useState(!0);
+	return g.useEffect(() => {
+		let e = !0;
+		return (async () => {
+			j(!0);
+			try {
+				let t = await w();
+				e && k(t);
+			} finally {
+				e && j(!1);
+			}
+		})(), () => {
+			e = !1;
+		};
+	}, [w]), /* @__PURE__ */ m(v, {
+		control: y.control,
+		name: b,
+		render: ({ field: { value: g, onChange: v }, fieldState: y }) => {
+			let b = D ? Array.isArray(g) ? g : [] : g || "", w = p();
+			return /* @__PURE__ */ h(e, {
+				"data-invalid": y.invalid,
+				children: [
+					/* @__PURE__ */ h("div", {
+						className: "flex items-center gap-2 mb-2",
+						children: [
+							x && /* @__PURE__ */ m(n, {
+								className: "text-sm font-medium",
+								children: x
+							}),
+							S && /* @__PURE__ */ m(r, { children: S }),
+							A && /* @__PURE__ */ m(_, { className: "size-3 animate-spin opacity-50" })
+						]
+					}),
+					/* @__PURE__ */ h(i, {
+						multiple: D,
+						value: b,
+						onValueChange: v,
+						items: O,
+						disabled: A,
+						children: [D ? /* @__PURE__ */ m("div", {
+							ref: w,
+							className: "w-full",
+							children: /* @__PURE__ */ h(o, {
+								className: "bg-background border-border w-full min-h-10",
+								children: [b.map((e) => {
+									let t = O.find((t) => E(t) === e);
+									return /* @__PURE__ */ m(a, {
+										value: e,
+										children: t ? T(t) : e
+									}, e);
+								}), /* @__PURE__ */ m(s, { placeholder: b.length > 0 ? "" : A ? "Cargando..." : C || "Seleccionar..." })]
+							})
+						}) : /* @__PURE__ */ m("div", {
+							ref: w,
+							className: "relative group/combobox w-full",
+							children: /* @__PURE__ */ m(u, {
+								placeholder: A ? "Cargando..." : C || "Seleccionar...",
+								className: "w-full bg-background border-border flex flex-row items-center"
+							})
+						}), /* @__PURE__ */ h(c, {
+							anchor: w.current,
+							className: "bg-card border-border shadow-matte",
+							children: [/* @__PURE__ */ m(l, { children: "No se encontraron resultados" }), /* @__PURE__ */ m(f, {
+								className: "custom-scrollbar",
+								children: O.map((e) => /* @__PURE__ */ m(d, {
+									value: E(e),
+									children: T(e)
+								}, E(e)))
+							})]
+						})]
+					}),
+					y.invalid && y.error && /* @__PURE__ */ m(t, {
+						errors: [y.error],
+						className: "mt-2"
+					})
+				]
+			});
+		}
+	});
+}
+//#endregion
+export { y as default };

package/dist/shared/custom/form/inputs/async-multi-select.input.cjs

@@ -0,0 +1 @@
+"use client";const e=require(`../../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../lib/utils.cjs`),n=require(`../../../ui/field.cjs`),r=require(`../../hover/hover.cjs`),i=require(`../../../ui/badge.cjs`),a=require(`../../../ui/command.cjs`),o=require(`../../../ui/popover.cjs`);let s=require(`react/jsx-runtime`),c=require(`react`);c=e.__toESM(c);let l=require(`lucide-react`),u=require(`react-hook-form`);function d({form:e,name:d,label:f,helper:p,placeholder:m=`Seleccionar opciones...`,service:h,itemFactory:g,keyExtractor:_}){let[v,y]=c.useState(!1),[b,x]=c.useState([]),[S,C]=c.useState(!1),[w,T]=c.useState(null);return c.useEffect(()=>{let e=!0;return(async()=>{C(!0),T(null);try{let t=await h();e&&x(t)}catch{e&&T(`Error al cargar datos.`)}finally{e&&C(!1)}})(),()=>{e=!1}},[h]),(0,s.jsx)(u.Controller,{control:e.control,name:d,render:({field:{value:e,onChange:c},fieldState:u})=>{let d=Array.isArray(e)?e:[],h=e=>{c(d.includes(e)?d.filter(t=>t!==e):[...d,e])},x=e=>{c(d.filter(t=>t!==e))};return(0,s.jsxs)(n.Field,{"data-invalid":u.invalid,children:[(0,s.jsxs)(`div`,{className:`flex items-center gap-2 mb-2`,children:[f&&(0,s.jsx)(n.FieldLabel,{className:`text-sm font-medium`,children:f}),p&&(0,s.jsx)(r.Hover,{children:p}),S&&(0,s.jsx)(l.Loader2,{className:`size-3 animate-spin opacity-50`})]}),(0,s.jsxs)(o.Popover,{open:v,onOpenChange:y,children:[(0,s.jsx)(o.PopoverTrigger,{asChild:!0,children:(0,s.jsxs)(`div`,{className:t.cn(`relative flex min-h-11 w-full flex-wrap gap-1.5 rounded-xl border p-2 cursor-pointer transition-all duration-300`,`t-card-base hover:border-(--t-border) focus-within:ring-2 focus-within:ring-(--t-accent)/10`,u.invalid?`border-destructive/50`:`border-border/50`,v&&`ring-2 ring-(--t-accent)/10 border-(--t-accent-border)`),children:[d.length>0?(0,s.jsx)(`div`,{className:`flex flex-wrap gap-1.5`,children:d.map(e=>{let t=b.find(t=>_(t)===e);return(0,s.jsxs)(i.Badge,{variant:`secondary`,className:`t-badge h-7 pl-2 pr-1 animate-in zoom-in-95 duration-200`,children:[(0,s.jsx)(`span`,{className:`text-xs truncate max-w-[150px]`,children:t?g(t):e}),(0,s.jsx)(`button`,{type:`button`,onClick:t=>{t.stopPropagation(),x(e)},className:`ml-1 rounded-full p-0.5 hover:bg-(--t-accent)/20 t-accent-text transition-colors`,children:(0,s.jsx)(l.X,{className:`size-3`})})]},e)})}):(0,s.jsx)(`span`,{className:`text-sm text-muted-foreground px-1 py-1.5`,children:S?`Cargando...`:m}),(0,s.jsx)(`div`,{className:`ml-auto flex items-center pr-1`,children:(0,s.jsx)(l.ChevronDown,{className:t.cn(`size-4 opacity-50 transition-transform duration-200`,v&&`rotate-180`)})})]})}),(0,s.jsx)(o.PopoverContent,{className:`w-[--radix-popover-trigger-width] p-0 shadow-matte border-border/50 overflow-hidden`,align:`start`,children:(0,s.jsxs)(a.Command,{className:`w-full`,children:[(0,s.jsx)(a.CommandInput,{placeholder:`Buscar...`,className:`h-9`}),(0,s.jsxs)(a.CommandList,{className:`max-h-64 custom-scrollbar`,children:[(0,s.jsx)(a.CommandEmpty,{children:`No se encontraron resultados.`}),(0,s.jsx)(a.CommandGroup,{children:b.map(e=>{let t=_(e),n=d.includes(t);return(0,s.jsxs)(a.CommandItem,{onSelect:()=>h(t),className:`flex items-center justify-between py-2 px-3 cursor-pointer`,children:[(0,s.jsx)(`div`,{className:`flex-1 truncate`,children:g(e)}),n&&(0,s.jsx)(l.Check,{className:`size-4 text-primary animate-in zoom-in-50`})]},t)})})]})]})})]}),u.invalid&&u.error&&(0,s.jsx)(n.FieldError,{errors:[u.error],className:`mt-2`}),w&&(0,s.jsx)(`p`,{className:`mt-1 text-xs text-destructive font-medium`,children:w})]})}})}module.exports=d;

package/dist/shared/custom/form/inputs/async-multi-select.input.d.ts

@@ -0,0 +1,20 @@
+import { FieldValues, Path } from 'react-hook-form';
+import { FormInputProps } from '../form.component';
+import * as React from "react";
+interface AsyncMultiSelectInputProps<T, TFieldValues extends FieldValues> extends FormInputProps<TFieldValues> {
+    name: Path<TFieldValues>;
+    label?: string;
+    helper?: string;
+    placeholder?: string;
+    service: () => Promise<T[]>;
+    itemFactory: (item: T) => React.ReactNode;
+    keyExtractor: (item: T) => string;
+}
+/**
+ * AsyncMultiSelectInput
+ *
+ * Un componente de selección múltiple asíncrono utilizando Radix UI y cmdk.
+ * Diseñado para ser visualmente premium y altamente funcional.
+ */
+export default function AsyncMultiSelectInput<T, TFieldValues extends FieldValues>({ form, name, label, helper, placeholder, service, itemFactory, keyExtractor, }: AsyncMultiSelectInputProps<T, TFieldValues>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/custom/form/inputs/async-multi-select.input.esm

@@ -0,0 +1,127 @@
+"use client";
+import { cn as e } from "../../../lib/utils.esm";
+import { Field as t, FieldError as n, FieldLabel as r } from "../../../ui/field.esm";
+import { Hover as i } from "../../hover/hover.esm";
+import { Badge as a } from "../../../ui/badge.esm";
+import { Command as o, CommandEmpty as s, CommandGroup as c, CommandInput as l, CommandItem as u, CommandList as d } from "../../../ui/command.esm";
+import { Popover as f, PopoverContent as p, PopoverTrigger as m } from "../../../ui/popover.esm";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import * as _ from "react";
+import { Check as v, ChevronDown as y, Loader2 as b, X as x } from "lucide-react";
+import { Controller as S } from "react-hook-form";
+//#region src/shared/custom/form/inputs/async-multi-select.input.tsx
+function C({ form: C, name: w, label: T, helper: E, placeholder: D = "Seleccionar opciones...", service: O, itemFactory: k, keyExtractor: A }) {
+	let [j, M] = _.useState(!1), [N, P] = _.useState([]), [F, I] = _.useState(!1), [L, R] = _.useState(null);
+	return _.useEffect(() => {
+		let e = !0;
+		return (async () => {
+			I(!0), R(null);
+			try {
+				let t = await O();
+				e && P(t);
+			} catch {
+				e && R("Error al cargar datos.");
+			} finally {
+				e && I(!1);
+			}
+		})(), () => {
+			e = !1;
+		};
+	}, [O]), /* @__PURE__ */ h(S, {
+		control: C.control,
+		name: w,
+		render: ({ field: { value: _, onChange: S }, fieldState: C }) => {
+			let w = Array.isArray(_) ? _ : [], O = (e) => {
+				S(w.includes(e) ? w.filter((t) => t !== e) : [...w, e]);
+			}, P = (e) => {
+				S(w.filter((t) => t !== e));
+			};
+			return /* @__PURE__ */ g(t, {
+				"data-invalid": C.invalid,
+				children: [
+					/* @__PURE__ */ g("div", {
+						className: "flex items-center gap-2 mb-2",
+						children: [
+							T && /* @__PURE__ */ h(r, {
+								className: "text-sm font-medium",
+								children: T
+							}),
+							E && /* @__PURE__ */ h(i, { children: E }),
+							F && /* @__PURE__ */ h(b, { className: "size-3 animate-spin opacity-50" })
+						]
+					}),
+					/* @__PURE__ */ g(f, {
+						open: j,
+						onOpenChange: M,
+						children: [/* @__PURE__ */ h(m, {
+							asChild: !0,
+							children: /* @__PURE__ */ g("div", {
+								className: e("relative flex min-h-11 w-full flex-wrap gap-1.5 rounded-xl border p-2 cursor-pointer transition-all duration-300", "t-card-base hover:border-(--t-border) focus-within:ring-2 focus-within:ring-(--t-accent)/10", C.invalid ? "border-destructive/50" : "border-border/50", j && "ring-2 ring-(--t-accent)/10 border-(--t-accent-border)"),
+								children: [w.length > 0 ? /* @__PURE__ */ h("div", {
+									className: "flex flex-wrap gap-1.5",
+									children: w.map((e) => {
+										let t = N.find((t) => A(t) === e);
+										return /* @__PURE__ */ g(a, {
+											variant: "secondary",
+											className: "t-badge h-7 pl-2 pr-1 animate-in zoom-in-95 duration-200",
+											children: [/* @__PURE__ */ h("span", {
+												className: "text-xs truncate max-w-[150px]",
+												children: t ? k(t) : e
+											}), /* @__PURE__ */ h("button", {
+												type: "button",
+												onClick: (t) => {
+													t.stopPropagation(), P(e);
+												},
+												className: "ml-1 rounded-full p-0.5 hover:bg-(--t-accent)/20 t-accent-text transition-colors",
+												children: /* @__PURE__ */ h(x, { className: "size-3" })
+											})]
+										}, e);
+									})
+								}) : /* @__PURE__ */ h("span", {
+									className: "text-sm text-muted-foreground px-1 py-1.5",
+									children: F ? "Cargando..." : D
+								}), /* @__PURE__ */ h("div", {
+									className: "ml-auto flex items-center pr-1",
+									children: /* @__PURE__ */ h(y, { className: e("size-4 opacity-50 transition-transform duration-200", j && "rotate-180") })
+								})]
+							})
+						}), /* @__PURE__ */ h(p, {
+							className: "w-[--radix-popover-trigger-width] p-0 shadow-matte border-border/50 overflow-hidden",
+							align: "start",
+							children: /* @__PURE__ */ g(o, {
+								className: "w-full",
+								children: [/* @__PURE__ */ h(l, {
+									placeholder: "Buscar...",
+									className: "h-9"
+								}), /* @__PURE__ */ g(d, {
+									className: "max-h-64 custom-scrollbar",
+									children: [/* @__PURE__ */ h(s, { children: "No se encontraron resultados." }), /* @__PURE__ */ h(c, { children: N.map((e) => {
+										let t = A(e), n = w.includes(t);
+										return /* @__PURE__ */ g(u, {
+											onSelect: () => O(t),
+											className: "flex items-center justify-between py-2 px-3 cursor-pointer",
+											children: [/* @__PURE__ */ h("div", {
+												className: "flex-1 truncate",
+												children: k(e)
+											}), n && /* @__PURE__ */ h(v, { className: "size-4 text-primary animate-in zoom-in-50" })]
+										}, t);
+									}) })]
+								})]
+							})
+						})]
+					}),
+					C.invalid && C.error && /* @__PURE__ */ h(n, {
+						errors: [C.error],
+						className: "mt-2"
+					}),
+					L && /* @__PURE__ */ h("p", {
+						className: "mt-1 text-xs text-destructive font-medium",
+						children: L
+					})
+				]
+			});
+		}
+	});
+}
+//#endregion
+export { C as default };

package/dist/shared/custom/form/inputs/async-select.input.cjs

@@ -0,0 +1 @@
+const e=require(`../../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../ui/select.cjs`),n=require(`../../../ui/field.cjs`),r=require(`../../hover/hover.cjs`);let i=require(`react/jsx-runtime`),a=require(`react`);a=e.__toESM(a);let o=require(`lucide-react`),s=require(`react-hook-form`);function c({form:e,name:c,label:l,helper:u,id:d,placeholder:f,service:p,itemFactory:m,keyExtractor:h}){let[g,_]=a.useState([]),[v,y]=a.useState(!0),[b,x]=a.useState(null),S=d||`async-select-${String(c)}`;return a.useEffect(()=>{let e=!0;return(async()=>{y(!0),x(null);try{let t=await p();e&&_(t)}catch{e&&x(`Error al cargar los datos.`)}finally{e&&y(!1)}})(),()=>{e=!1}},[p]),(0,i.jsx)(s.Controller,{control:e.control,name:c,render:({field:{value:e,onChange:a},fieldState:s})=>(0,i.jsxs)(n.Field,{"data-invalid":s.invalid,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[l&&(0,i.jsx)(n.FieldLabel,{htmlFor:S,children:l}),u&&(0,i.jsx)(r.Hover,{children:u})]}),(0,i.jsxs)(t.Select,{value:e,onValueChange:a,disabled:v,children:[(0,i.jsx)(t.SelectTrigger,{id:S,className:`w-full`,children:(0,i.jsxs)(t.SelectValue,{placeholder:v?`Cargando...`:f||`Seleccionar...`,children:[v&&(0,i.jsx)(o.Loader2,{className:`mr-2 h-4 w-4 animate-spin inline`}),!v&&g.find(t=>h(t)===e)?m(g.find(t=>h(t)===e)):void 0]})}),(0,i.jsxs)(t.SelectContent,{children:[g.map(e=>(0,i.jsx)(t.SelectItem,{value:h(e),children:m(e)},h(e))),g.length===0&&!v&&(0,i.jsx)(`div`,{className:`px-2 py-4 text-center text-sm text-gray-500`,children:`No se encontraron resultados`}),b&&(0,i.jsx)(`div`,{className:`px-2 py-4 text-center text-sm text-red-400`,children:b})]})]}),s.invalid&&s.error&&(0,i.jsx)(n.FieldError,{errors:[s.error]})]})})}module.exports=c;

package/dist/shared/custom/form/inputs/async-select.input.d.ts

@@ -0,0 +1,15 @@
+import { FieldValues, Path } from 'react-hook-form';
+import { FormInputProps } from '../form.component';
+import * as React from "react";
+interface AsyncSelectInputProps<T, TFieldValues extends FieldValues> extends FormInputProps<TFieldValues> {
+    name: Path<TFieldValues>;
+    label?: string;
+    helper?: string;
+    id?: string;
+    placeholder?: string;
+    service: () => Promise<T[]>;
+    itemFactory: (item: T) => React.ReactNode;
+    keyExtractor: (item: T) => string;
+}
+export default function AsyncSelectInput<T, TFieldValues extends FieldValues>({ form, name, label, helper, id, placeholder, service, itemFactory, keyExtractor, }: AsyncSelectInputProps<T, TFieldValues>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/custom/form/inputs/async-select.input.esm

@@ -0,0 +1,71 @@
+import { Select as e, SelectContent as t, SelectItem as n, SelectTrigger as r, SelectValue as i } from "../../../ui/select.esm";
+import { Field as a, FieldError as o, FieldLabel as s } from "../../../ui/field.esm";
+import { Hover as c } from "../../hover/hover.esm";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import * as d from "react";
+import { Loader2 as f } from "lucide-react";
+import { Controller as p } from "react-hook-form";
+//#region src/shared/custom/form/inputs/async-select.input.tsx
+function m({ form: m, name: h, label: g, helper: _, id: v, placeholder: y, service: b, itemFactory: x, keyExtractor: S }) {
+	let [C, w] = d.useState([]), [T, E] = d.useState(!0), [D, O] = d.useState(null), k = v || `async-select-${String(h)}`;
+	return d.useEffect(() => {
+		let e = !0;
+		return (async () => {
+			E(!0), O(null);
+			try {
+				let t = await b();
+				e && w(t);
+			} catch {
+				e && O("Error al cargar los datos.");
+			} finally {
+				e && E(!1);
+			}
+		})(), () => {
+			e = !1;
+		};
+	}, [b]), /* @__PURE__ */ l(p, {
+		control: m.control,
+		name: h,
+		render: ({ field: { value: d, onChange: p }, fieldState: m }) => /* @__PURE__ */ u(a, {
+			"data-invalid": m.invalid,
+			children: [
+				/* @__PURE__ */ u("div", {
+					className: "flex items-center gap-2",
+					children: [g && /* @__PURE__ */ l(s, {
+						htmlFor: k,
+						children: g
+					}), _ && /* @__PURE__ */ l(c, { children: _ })]
+				}),
+				/* @__PURE__ */ u(e, {
+					value: d,
+					onValueChange: p,
+					disabled: T,
+					children: [/* @__PURE__ */ l(r, {
+						id: k,
+						className: "w-full",
+						children: /* @__PURE__ */ u(i, {
+							placeholder: T ? "Cargando..." : y || "Seleccionar...",
+							children: [T && /* @__PURE__ */ l(f, { className: "mr-2 h-4 w-4 animate-spin inline" }), !T && C.find((e) => S(e) === d) ? x(C.find((e) => S(e) === d)) : void 0]
+						})
+					}), /* @__PURE__ */ u(t, { children: [
+						C.map((e) => /* @__PURE__ */ l(n, {
+							value: S(e),
+							children: x(e)
+						}, S(e))),
+						C.length === 0 && !T && /* @__PURE__ */ l("div", {
+							className: "px-2 py-4 text-center text-sm text-gray-500",
+							children: "No se encontraron resultados"
+						}),
+						D && /* @__PURE__ */ l("div", {
+							className: "px-2 py-4 text-center text-sm text-red-400",
+							children: D
+						})
+					] })]
+				}),
+				m.invalid && m.error && /* @__PURE__ */ l(o, { errors: [m.error] })
+			]
+		})
+	});
+}
+//#endregion
+export { m as default };

package/dist/shared/custom/form/inputs/checkbox-inline.input.cjs

@@ -0,0 +1 @@
+require(`../../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../lib/utils.cjs`),t=require(`../../../ui/field.cjs`),n=require(`../../hover/hover.cjs`),r=require(`../../../ui/checkbox.cjs`);let i=require(`react/jsx-runtime`),a=require(`react-hook-form`);function o({form:o,name:s,label:c,helper:l,id:u,className:d}){let f=u||`checkbox-inline-${String(s)}`;return(0,i.jsx)(a.Controller,{control:o.control,name:s,render:({field:{value:a,onChange:o,...s},fieldState:u})=>(0,i.jsxs)(t.Field,{"data-invalid":u.invalid,orientation:`horizontal`,className:e.cn(`items-center py-2 gap-3`,d),children:[(0,i.jsx)(`div`,{className:`shrink-0`,children:(0,i.jsx)(r.Checkbox,{...s,id:f,checked:!!a,onCheckedChange:o,"aria-invalid":u.invalid})}),(0,i.jsxs)(`div`,{className:`flex flex-col gap-1 min-w-0 flex-1`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2 flex-wrap`,children:[c&&(0,i.jsx)(t.FieldLabel,{htmlFor:f,className:`cursor-pointer text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70`,children:c}),l&&(0,i.jsx)(n.Hover,{children:l})]}),u.invalid&&u.error&&(0,i.jsx)(t.FieldError,{errors:[u.error]})]})]})})}module.exports=o;

package/dist/shared/custom/form/inputs/checkbox-inline.input.d.ts

@@ -0,0 +1,15 @@
+import { FieldValues, Path } from 'react-hook-form';
+import { FormInputProps } from '../form.component';
+interface CheckboxInlineInputProps<T extends FieldValues> extends FormInputProps<T> {
+    name: Path<T>;
+    label?: string;
+    helper?: string;
+    id?: string;
+    className?: string;
+}
+/**
+ * Input de Checkbox Tradicional (Inline).
+ * Muestra el cuadro del checkbox al lado de su etiqueta.
+ */
+export default function CheckboxInlineInput<T extends FieldValues>({ form, name, label, helper, id, className }: CheckboxInlineInputProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/custom/form/inputs/checkbox-inline.input.esm

@@ -0,0 +1,41 @@
+import { cn as e } from "../../../lib/utils.esm";
+import { Field as t, FieldError as n, FieldLabel as r } from "../../../ui/field.esm";
+import { Hover as i } from "../../hover/hover.esm";
+import { Checkbox as a } from "../../../ui/checkbox.esm";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Controller as c } from "react-hook-form";
+//#region src/shared/custom/form/inputs/checkbox-inline.input.tsx
+function l({ form: l, name: u, label: d, helper: f, id: p, className: m }) {
+	let h = p || `checkbox-inline-${String(u)}`;
+	return /* @__PURE__ */ o(c, {
+		control: l.control,
+		name: u,
+		render: ({ field: { value: c, onChange: l, ...u }, fieldState: p }) => /* @__PURE__ */ s(t, {
+			"data-invalid": p.invalid,
+			orientation: "horizontal",
+			className: e("items-center py-2 gap-3", m),
+			children: [/* @__PURE__ */ o("div", {
+				className: "shrink-0",
+				children: /* @__PURE__ */ o(a, {
+					...u,
+					id: h,
+					checked: !!c,
+					onCheckedChange: l,
+					"aria-invalid": p.invalid
+				})
+			}), /* @__PURE__ */ s("div", {
+				className: "flex flex-col gap-1 min-w-0 flex-1",
+				children: [/* @__PURE__ */ s("div", {
+					className: "flex items-center gap-2 flex-wrap",
+					children: [d && /* @__PURE__ */ o(r, {
+						htmlFor: h,
+						className: "cursor-pointer text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+						children: d
+					}), f && /* @__PURE__ */ o(i, { children: f })]
+				}), p.invalid && p.error && /* @__PURE__ */ o(n, { errors: [p.error] })]
+			})]
+		})
+	});
+}
+//#endregion
+export { l as default };

package/dist/shared/custom/form/inputs/checkbox.input.cjs

@@ -0,0 +1 @@
+const e=require(`../../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../lib/utils.cjs`),n=require(`../../../ui/field.cjs`),r=require(`../../hover/hover.cjs`);let i=require(`react/jsx-runtime`),a=require(`react`);a=e.__toESM(a);let o=require(`react-hook-form`);function s({form:e,name:a,label:s,helper:c,id:l,children:u,className:d}){let f=l||`checkbox-custom-${String(a)}`;return(0,i.jsx)(o.Controller,{control:e.control,name:a,render:({field:{value:e,onChange:a},fieldState:o})=>{let l=!!e,p=(0,i.jsx)(`button`,{type:`button`,onClick:()=>a(!l),className:t.cn(`w-full text-left rounded-2xl border transition-all duration-300 overflow-hidden outline-none bg-muted/20 border-border hover:border-primary/30 hover:bg-muted/40`,l&&`bg-primary/5 border-primary shadow-matte`),children:typeof u==`function`?u(l):u});return(0,i.jsxs)(n.Field,{"data-invalid":o.invalid,orientation:`vertical`,className:t.cn(`gap-2 flex-col`,d),children:[s&&(0,i.jsxs)(`div`,{className:`flex items-center gap-2 mb-1`,children:[(0,i.jsx)(n.FieldLabel,{htmlFor:f,className:`cursor-pointer text-sm font-semibold tracking-tight text-foreground/90`,children:s}),c&&(0,i.jsx)(r.Hover,{children:c})]}),(0,i.jsx)(`div`,{className:`relative w-full group`,children:!s&&c?(0,i.jsx)(r.Hover,{Trigger:p,children:c}):p}),o.invalid&&o.error&&(0,i.jsx)(n.FieldError,{errors:[o.error],className:`mt-1`})]})}})}module.exports=s;

package/dist/shared/custom/form/inputs/checkbox.input.d.ts

@@ -0,0 +1,21 @@
+import { FieldValues, Path } from 'react-hook-form';
+import { FormInputProps } from '../form.component';
+import * as React from "react";
+interface CheckboxInputProps<T extends FieldValues> extends FormInputProps<T> {
+    name: Path<T>;
+    label?: string;
+    helper?: string;
+    id?: string;
+    /**
+     * Contenido personalizado para renderizar el checkbox como una "Card interactiva".
+     * Si es una función, recibe el estado `checked`.
+     */
+    children: React.ReactNode | ((checked: boolean) => React.ReactNode);
+    className?: string;
+}
+/**
+ * Input de Checkbox Customizado (Card).
+ * Utiliza un componente completo como activador interactivo.
+ */
+export default function CheckboxInput<T extends FieldValues>({ form, name, label, helper, id, children, className }: CheckboxInputProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/custom/form/inputs/checkbox.input.esm

@@ -0,0 +1,50 @@
+import { cn as e } from "../../../lib/utils.esm";
+import { Field as t, FieldError as n, FieldLabel as r } from "../../../ui/field.esm";
+import { Hover as i } from "../../hover/hover.esm";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import "react";
+import { Controller as s } from "react-hook-form";
+//#region src/shared/custom/form/inputs/checkbox.input.tsx
+function c({ form: c, name: l, label: u, helper: d, id: f, children: p, className: m }) {
+	let h = f || `checkbox-custom-${String(l)}`;
+	return /* @__PURE__ */ a(s, {
+		control: c.control,
+		name: l,
+		render: ({ field: { value: s, onChange: c }, fieldState: l }) => {
+			let f = !!s, g = /* @__PURE__ */ a("button", {
+				type: "button",
+				onClick: () => c(!f),
+				className: e("w-full text-left rounded-2xl border transition-all duration-300 overflow-hidden outline-none bg-muted/20 border-border hover:border-primary/30 hover:bg-muted/40", f && "bg-primary/5 border-primary shadow-matte"),
+				children: typeof p == "function" ? p(f) : p
+			});
+			return /* @__PURE__ */ o(t, {
+				"data-invalid": l.invalid,
+				orientation: "vertical",
+				className: e("gap-2 flex-col", m),
+				children: [
+					u && /* @__PURE__ */ o("div", {
+						className: "flex items-center gap-2 mb-1",
+						children: [/* @__PURE__ */ a(r, {
+							htmlFor: h,
+							className: "cursor-pointer text-sm font-semibold tracking-tight text-foreground/90",
+							children: u
+						}), d && /* @__PURE__ */ a(i, { children: d })]
+					}),
+					/* @__PURE__ */ a("div", {
+						className: "relative w-full group",
+						children: !u && d ? /* @__PURE__ */ a(i, {
+							Trigger: g,
+							children: d
+						}) : g
+					}),
+					l.invalid && l.error && /* @__PURE__ */ a(n, {
+						errors: [l.error],
+						className: "mt-1"
+					})
+				]
+			});
+		}
+	});
+}
+//#endregion
+export { c as default };

package/dist/shared/custom/form/inputs/code.input.cjs

@@ -0,0 +1 @@
+require(`../../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../lib/utils.cjs`),t=require(`../../../ui/field.cjs`),n=require(`../../hover/hover.cjs`);let r=require(`react/jsx-runtime`),i=require(`react`),a=require(`react-hook-form`);function o({form:o,name:s,label:c,helper:l,id:u,length:d=6}){let f=(0,i.useRef)(null),p=u||`code-input-${String(s)}`,m=()=>{f.current?.focus()};return(0,r.jsx)(a.Controller,{control:o.control,name:s,render:({field:i,fieldState:a})=>{let o=i.value||``,s=o.split(``).slice(0,d),u=Array.from({length:d},(e,t)=>s[t]||``);return(0,r.jsxs)(t.Field,{"data-invalid":a.invalid,children:[(0,r.jsxs)(`div`,{className:`flex items-center gap-2`,children:[c&&(0,r.jsx)(t.FieldLabel,{htmlFor:p,children:c}),l&&(0,r.jsx)(n.Hover,{children:l})]}),(0,r.jsxs)(`div`,{className:`relative`,children:[(0,r.jsx)(`input`,{...i,ref:f,id:p,type:`text`,maxLength:d,className:`absolute inset-0 opacity-0 cursor-default`,autoComplete:`one-time-code`,value:o,onChange:e=>{let t=e.target.value.replace(/[^a-zA-Z0-9]/g,``).toUpperCase();i.onChange(t)}}),(0,r.jsx)(`div`,{className:`flex gap-2`,onClick:m,children:u.map((t,n)=>(0,r.jsx)(`div`,{className:e.cn(`flex h-12 w-10 items-center justify-center rounded-lg border-2 bg-background text-lg font-bold transition-all`,`border-input shadow-xs sm:h-14 sm:w-12 sm:text-xl`,i.value?.length===n&&!a.invalid&&`border-ring ring-3 ring-ring/20`,a.invalid&&`border-destructive ring-3 ring-destructive/20`,t&&`border-primary/50 bg-primary/5`),children:t},n))})]}),a.invalid&&a.error&&(0,r.jsx)(t.FieldError,{errors:[a.error]})]})}})}module.exports=o;

package/dist/shared/custom/form/inputs/code.input.d.ts

@@ -0,0 +1,11 @@
+import { FieldValues, Path } from 'react-hook-form';
+import { FormInputProps } from '../form.component';
+interface CodeInputProps<T extends FieldValues> extends FormInputProps<T> {
+    name: Path<T>;
+    label?: string;
+    helper?: string;
+    id?: string;
+    length?: number;
+}
+export default function CodeInput<T extends FieldValues>({ form, name, label, helper, id, length }: CodeInputProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/custom/form/inputs/code.input.esm

@@ -0,0 +1,58 @@
+import { cn as e } from "../../../lib/utils.esm";
+import { Field as t, FieldError as n, FieldLabel as r } from "../../../ui/field.esm";
+import { Hover as i } from "../../hover/hover.esm";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useRef as s } from "react";
+import { Controller as c } from "react-hook-form";
+//#region src/shared/custom/form/inputs/code.input.tsx
+function l({ form: l, name: u, label: d, helper: f, id: p, length: m = 6 }) {
+	let h = s(null), g = p || `code-input-${String(u)}`, _ = () => {
+		h.current?.focus();
+	};
+	return /* @__PURE__ */ a(c, {
+		control: l.control,
+		name: u,
+		render: ({ field: s, fieldState: c }) => {
+			let l = s.value || "", u = l.split("").slice(0, m), p = Array.from({ length: m }, (e, t) => u[t] || "");
+			return /* @__PURE__ */ o(t, {
+				"data-invalid": c.invalid,
+				children: [
+					/* @__PURE__ */ o("div", {
+						className: "flex items-center gap-2",
+						children: [d && /* @__PURE__ */ a(r, {
+							htmlFor: g,
+							children: d
+						}), f && /* @__PURE__ */ a(i, { children: f })]
+					}),
+					/* @__PURE__ */ o("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ a("input", {
+							...s,
+							ref: h,
+							id: g,
+							type: "text",
+							maxLength: m,
+							className: "absolute inset-0 opacity-0 cursor-default",
+							autoComplete: "one-time-code",
+							value: l,
+							onChange: (e) => {
+								let t = e.target.value.replace(/[^a-zA-Z0-9]/g, "").toUpperCase();
+								s.onChange(t);
+							}
+						}), /* @__PURE__ */ a("div", {
+							className: "flex gap-2",
+							onClick: _,
+							children: p.map((t, n) => /* @__PURE__ */ a("div", {
+								className: e("flex h-12 w-10 items-center justify-center rounded-lg border-2 bg-background text-lg font-bold transition-all", "border-input shadow-xs sm:h-14 sm:w-12 sm:text-xl", s.value?.length === n && !c.invalid && "border-ring ring-3 ring-ring/20", c.invalid && "border-destructive ring-3 ring-destructive/20", t && "border-primary/50 bg-primary/5"),
+								children: t
+							}, n))
+						})]
+					}),
+					c.invalid && c.error && /* @__PURE__ */ a(n, { errors: [c.error] })
+				]
+			});
+		}
+	});
+}
+//#endregion
+export { l as default };

package/dist/shared/custom/form/inputs/color.input.cjs

@@ -0,0 +1 @@
+require(`../../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../lib/utils.cjs`),t=require(`../../../ui/field.cjs`),n=require(`../../../ui/input.cjs`),r=require(`../../hover/hover.cjs`);let i=require(`react/jsx-runtime`),a=require(`react-hook-form`);function o({form:o,name:s,label:c,helper:l,id:u,hideText:d}){let f=u||`input-${String(s)}`;return(0,i.jsx)(a.Controller,{control:o.control,name:s,render:({field:a,fieldState:o})=>(0,i.jsxs)(t.Field,{"data-invalid":o.invalid,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[c&&(0,i.jsx)(t.FieldLabel,{htmlFor:f,children:c}),l&&(0,i.jsx)(r.Hover,{children:l})]}),(0,i.jsxs)(`div`,{className:`flex gap-2 items-center`,children:[(0,i.jsx)(n.Input,{...a,type:`color`,id:`${f}-color`,"aria-invalid":o.invalid,className:e.cn(`w-10 h-10 p-0 cursor-pointer overflow-hidden border-none shrink-0`,`[&::-webkit-color-swatch-wrapper]:p-0`,`[&::-webkit-color-swatch]:border-none`,`[&::-moz-color-swatch]:border-none`)}),!d&&(0,i.jsx)(n.Input,{...a,id:f,type:`text`,placeholder:`#000000`,"aria-invalid":o.invalid,className:`flex-1`,autoComplete:`off`})]}),o.invalid&&o.error&&(0,i.jsx)(t.FieldError,{errors:[o.error]})]})})}module.exports=o;

package/dist/shared/custom/form/inputs/color.input.d.ts

@@ -0,0 +1,11 @@
+import { FieldValues, Path } from 'react-hook-form';
+import { FormInputProps } from '../form.component';
+interface InputProps<T extends FieldValues> extends FormInputProps<T> {
+    name: Path<T>;
+    label?: string;
+    helper?: string;
+    id?: string;
+    hideText?: boolean;
+}
+export default function ColorInput<T extends FieldValues>({ form, name, label, helper, id, hideText }: InputProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/custom/form/inputs/color.input.esm

@@ -0,0 +1,47 @@
+import { cn as e } from "../../../lib/utils.esm";
+import { Field as t, FieldError as n, FieldLabel as r } from "../../../ui/field.esm";
+import { Input as i } from "../../../ui/input.esm";
+import { Hover as a } from "../../hover/hover.esm";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Controller as c } from "react-hook-form";
+//#region src/shared/custom/form/inputs/color.input.tsx
+function l({ form: l, name: u, label: d, helper: f, id: p, hideText: m }) {
+	let h = p || `input-${String(u)}`;
+	return /* @__PURE__ */ o(c, {
+		control: l.control,
+		name: u,
+		render: ({ field: c, fieldState: l }) => /* @__PURE__ */ s(t, {
+			"data-invalid": l.invalid,
+			children: [
+				/* @__PURE__ */ s("div", {
+					className: "flex items-center gap-2",
+					children: [d && /* @__PURE__ */ o(r, {
+						htmlFor: h,
+						children: d
+					}), f && /* @__PURE__ */ o(a, { children: f })]
+				}),
+				/* @__PURE__ */ s("div", {
+					className: "flex gap-2 items-center",
+					children: [/* @__PURE__ */ o(i, {
+						...c,
+						type: "color",
+						id: `${h}-color`,
+						"aria-invalid": l.invalid,
+						className: e("w-10 h-10 p-0 cursor-pointer overflow-hidden border-none shrink-0", "[&::-webkit-color-swatch-wrapper]:p-0", "[&::-webkit-color-swatch]:border-none", "[&::-moz-color-swatch]:border-none")
+					}), !m && /* @__PURE__ */ o(i, {
+						...c,
+						id: h,
+						type: "text",
+						placeholder: "#000000",
+						"aria-invalid": l.invalid,
+						className: "flex-1",
+						autoComplete: "off"
+					})]
+				}),
+				l.invalid && l.error && /* @__PURE__ */ o(n, { errors: [l.error] })
+			]
+		})
+	});
+}
+//#endregion
+export { l as default };

package/dist/shared/custom/form/inputs/combobox.input.cjs

@@ -0,0 +1 @@
+const e=require(`../../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../ui/field.cjs`),n=require(`../../hover/hover.cjs`),r=require(`../../../ui/combobox.cjs`);let i=require(`react/jsx-runtime`),a=require(`react`);a=e.__toESM(a);let o=require(`react-hook-form`);function s({form:e,name:a,label:s,helper:c,placeholder:l,items:u,itemFactory:d,keyExtractor:f,multiple:p=!1}){return(0,i.jsx)(o.Controller,{control:e.control,name:a,render:({field:{value:e,onChange:a},fieldState:o})=>{let m=p?Array.isArray(e)?e:[]:e||``,h=r.useComboboxAnchor();return(0,i.jsxs)(t.Field,{"data-invalid":o.invalid,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2 mb-2`,children:[s&&(0,i.jsx)(t.FieldLabel,{className:`text-sm font-medium`,children:s}),c&&(0,i.jsx)(n.Hover,{children:c})]}),(0,i.jsxs)(r.Combobox,{multiple:p,value:m,onValueChange:e=>{a(e)},items:u,children:[p?(0,i.jsx)(`div`,{ref:h,className:`w-full`,children:(0,i.jsxs)(r.ComboboxChips,{className:`bg-background border-border w-full`,children:[m.map(e=>{let t=u.find(t=>f(t)===e);return(0,i.jsx)(r.ComboboxChip,{value:e,children:t?d(t):e},e)}),(0,i.jsx)(r.ComboboxChipsInput,{placeholder:m.length>0?``:l||`Seleccionar...`})]})}):(0,i.jsx)(`div`,{ref:h,className:`relative group/combobox w-full`,children:(0,i.jsx)(r.ComboboxInput,{placeholder:l||`Seleccionar...`,className:`w-full bg-background border-border flex flex-row items-center`})}),(0,i.jsxs)(r.ComboboxContent,{anchor:h.current,className:`bg-card border-border shadow-matte`,children:[(0,i.jsx)(r.ComboboxEmpty,{children:`No se encontraron resultados`}),(0,i.jsx)(r.ComboboxList,{className:`custom-scrollbar`,children:u.map(e=>(0,i.jsx)(r.ComboboxItem,{value:f(e),children:d(e)},f(e)))})]})]}),o.invalid&&o.error&&(0,i.jsx)(t.FieldError,{errors:[o.error],className:`mt-2`})]})}})}module.exports=s;