@darkfrost-1107/scaff-z-react 0.1.7

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

@@ -0,0 +1,18 @@
+import { FieldValues, Path } from 'react-hook-form';
+import { FormInputProps } from '../form.component';
+import * as React from "react";
+interface ComboboxInputProps<T, TFieldValues extends FieldValues> extends FormInputProps<TFieldValues> {
+    name: Path<TFieldValues>;
+    label?: string;
+    helper?: string;
+    placeholder?: string;
+    items: T[];
+    itemFactory: (item: T) => React.ReactNode;
+    keyExtractor: (item: T) => string;
+    multiple?: boolean;
+}
+/**
+ * Input de Combobox (Dropdown con búsqueda) para selección simple o múltiple.
+ */
+export default function ComboboxInput<T, TFieldValues extends FieldValues>({ form, name, label, helper, placeholder, items, itemFactory, keyExtractor, multiple, }: ComboboxInputProps<T, TFieldValues>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,73 @@
+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 "react";
+import { Controller as g } from "react-hook-form";
+//#region src/shared/custom/form/inputs/combobox.input.tsx
+function _({ form: _, name: v, label: y, helper: b, placeholder: x, items: S, itemFactory: C, keyExtractor: w, multiple: T = !1 }) {
+	return /* @__PURE__ */ m(g, {
+		control: _.control,
+		name: v,
+		render: ({ field: { value: g, onChange: _ }, fieldState: v }) => {
+			let E = T ? Array.isArray(g) ? g : [] : g || "", D = p();
+			return /* @__PURE__ */ h(e, {
+				"data-invalid": v.invalid,
+				children: [
+					/* @__PURE__ */ h("div", {
+						className: "flex items-center gap-2 mb-2",
+						children: [y && /* @__PURE__ */ m(n, {
+							className: "text-sm font-medium",
+							children: y
+						}), b && /* @__PURE__ */ m(r, { children: b })]
+					}),
+					/* @__PURE__ */ h(i, {
+						multiple: T,
+						value: E,
+						onValueChange: (e) => {
+							_(e);
+						},
+						items: S,
+						children: [T ? /* @__PURE__ */ m("div", {
+							ref: D,
+							className: "w-full",
+							children: /* @__PURE__ */ h(o, {
+								className: "bg-background border-border w-full",
+								children: [E.map((e) => {
+									let t = S.find((t) => w(t) === e);
+									return /* @__PURE__ */ m(a, {
+										value: e,
+										children: t ? C(t) : e
+									}, e);
+								}), /* @__PURE__ */ m(s, { placeholder: E.length > 0 ? "" : x || "Seleccionar..." })]
+							})
+						}) : /* @__PURE__ */ m("div", {
+							ref: D,
+							className: "relative group/combobox w-full",
+							children: /* @__PURE__ */ m(u, {
+								placeholder: x || "Seleccionar...",
+								className: "w-full bg-background border-border flex flex-row items-center"
+							})
+						}), /* @__PURE__ */ h(c, {
+							anchor: D.current,
+							className: "bg-card border-border shadow-matte",
+							children: [/* @__PURE__ */ m(l, { children: "No se encontraron resultados" }), /* @__PURE__ */ m(f, {
+								className: "custom-scrollbar",
+								children: S.map((e) => /* @__PURE__ */ m(d, {
+									value: w(e),
+									children: C(e)
+								}, w(e)))
+							})]
+						})]
+					}),
+					v.invalid && v.error && /* @__PURE__ */ m(t, {
+						errors: [v.error],
+						className: "mt-2"
+					})
+				]
+			});
+		}
+	});
+}
+//#endregion
+export { _ as default };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../lib/utils.cjs`),t=require(`../../../ui/button.cjs`),n=require(`../../../ui/field.cjs`),r=require(`../../hover/hover.cjs`),i=require(`../../../ui/popover.cjs`),a=require(`../../../ui/calendar.cjs`);let o=require(`react/jsx-runtime`),s=require(`lucide-react`),c=require(`react-hook-form`),l=require(`date-fns`),u=require(`date-fns/locale`);function d({form:d,name:f,label:p,placeholder:m=`Seleccionar fecha`,helper:h,id:g}){let _=g||`date-input-${String(f)}`;return(0,o.jsx)(c.Controller,{control:d.control,name:f,render:({field:c,fieldState:d})=>(0,o.jsxs)(n.Field,{"data-invalid":d.invalid,children:[(0,o.jsxs)(`div`,{className:`flex items-center gap-2`,children:[p&&(0,o.jsx)(n.FieldLabel,{htmlFor:_,children:p}),h&&(0,o.jsx)(r.Hover,{children:h})]}),(0,o.jsxs)(i.Popover,{children:[(0,o.jsx)(i.PopoverTrigger,{asChild:!0,children:(0,o.jsxs)(t.Button,{id:_,variant:`outline`,className:e.cn(`w-full justify-start text-left font-normal bg-card`,!c.value&&`text-muted-foreground`,d.invalid&&`border-destructive focus-visible:ring-destructive`),children:[(0,o.jsx)(s.CalendarIcon,{className:`mr-2 h-4 w-4 opacity-50`}),c.value?(0,l.format)(c.value,`PPP`,{locale:u.es}):(0,o.jsx)(`span`,{children:m})]})}),(0,o.jsx)(i.PopoverContent,{className:`w-auto p-0`,align:`start`,children:(0,o.jsx)(a.Calendar,{mode:`single`,selected:c.value,onSelect:c.onChange,initialFocus:!0})})]}),d.invalid&&d.error&&(0,o.jsx)(n.FieldError,{errors:[d.error]})]})})}exports.DateInput=d;

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

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

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

@@ -0,0 +1,52 @@
+import { cn as e } from "../../../lib/utils.esm";
+import { Button as t } from "../../../ui/button.esm";
+import { Field as n, FieldError as r, FieldLabel as i } from "../../../ui/field.esm";
+import { Hover as a } from "../../hover/hover.esm";
+import { Popover as o, PopoverContent as s, PopoverTrigger as c } from "../../../ui/popover.esm";
+import { Calendar as l } from "../../../ui/calendar.esm";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { CalendarIcon as f } from "lucide-react";
+import { Controller as p } from "react-hook-form";
+import { format as m } from "date-fns";
+import { es as h } from "date-fns/locale";
+//#region src/shared/custom/form/inputs/date.input.tsx
+function g({ form: g, name: _, label: v, placeholder: y = "Seleccionar fecha", helper: b, id: x }) {
+	let S = x || `date-input-${String(_)}`;
+	return /* @__PURE__ */ u(p, {
+		control: g.control,
+		name: _,
+		render: ({ field: p, fieldState: g }) => /* @__PURE__ */ d(n, {
+			"data-invalid": g.invalid,
+			children: [
+				/* @__PURE__ */ d("div", {
+					className: "flex items-center gap-2",
+					children: [v && /* @__PURE__ */ u(i, {
+						htmlFor: S,
+						children: v
+					}), b && /* @__PURE__ */ u(a, { children: b })]
+				}),
+				/* @__PURE__ */ d(o, { children: [/* @__PURE__ */ u(c, {
+					asChild: !0,
+					children: /* @__PURE__ */ d(t, {
+						id: S,
+						variant: "outline",
+						className: e("w-full justify-start text-left font-normal bg-card", !p.value && "text-muted-foreground", g.invalid && "border-destructive focus-visible:ring-destructive"),
+						children: [/* @__PURE__ */ u(f, { className: "mr-2 h-4 w-4 opacity-50" }), p.value ? m(p.value, "PPP", { locale: h }) : /* @__PURE__ */ u("span", { children: y })]
+					})
+				}), /* @__PURE__ */ u(s, {
+					className: "w-auto p-0",
+					align: "start",
+					children: /* @__PURE__ */ u(l, {
+						mode: "single",
+						selected: p.value,
+						onSelect: p.onChange,
+						initialFocus: !0
+					})
+				})] }),
+				g.invalid && g.error && /* @__PURE__ */ u(r, { errors: [g.error] })
+			]
+		})
+	});
+}
+//#endregion
+export { g as DateInput };

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

@@ -0,0 +1 @@
+require(`../../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../ui/field.cjs`),t=require(`../../../ui/input.cjs`),n=require(`../../hover/hover.cjs`),r=require(`../../../ui/input-group.cjs`);let i=require(`react/jsx-runtime`),a=require(`react-hook-form`);function o({form:o,name:s,label:c,placeholder:l,helper:u,id:d,icon:f}){let p=d||`email-${String(s)}`;return(0,i.jsx)(a.Controller,{control:o.control,name:s,render:({field:a,fieldState:o})=>(0,i.jsxs)(e.Field,{"data-invalid":o.invalid,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[c&&(0,i.jsx)(e.FieldLabel,{htmlFor:p,children:c}),u&&(0,i.jsx)(n.Hover,{children:u})]}),f?(0,i.jsxs)(r.InputGroup,{children:[(0,i.jsx)(r.InputGroupAddon,{align:`inline-start`,children:f}),(0,i.jsx)(r.InputGroupInput,{...a,type:`email`,id:p,"aria-invalid":o.invalid,placeholder:l||`ejemplo@correo.com`,autoComplete:`email`})]}):(0,i.jsx)(t.Input,{...a,type:`email`,id:p,"aria-invalid":o.invalid,placeholder:l||`ejemplo@correo.com`,autoComplete:`email`}),o.invalid&&o.error&&(0,i.jsx)(e.FieldError,{errors:[o.error]})]})})}module.exports=o;

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

@@ -0,0 +1,12 @@
+import { FieldValues, Path } from 'react-hook-form';
+import { FormInputProps } from '../form.component';
+interface EmailInputProps<T extends FieldValues> extends FormInputProps<T> {
+    name: Path<T>;
+    label?: string;
+    placeholder?: string;
+    helper?: string;
+    id?: string;
+    icon?: React.ReactNode;
+}
+export default function EmailInput<T extends FieldValues>({ form, name, label, placeholder, helper, id, icon }: EmailInputProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,47 @@
+import { Field as e, FieldError as t, FieldLabel as n } from "../../../ui/field.esm";
+import { Input as r } from "../../../ui/input.esm";
+import { Hover as i } from "../../hover/hover.esm";
+import { InputGroup as a, InputGroupAddon as o, InputGroupInput as s } from "../../../ui/input-group.esm";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Controller as u } from "react-hook-form";
+//#region src/shared/custom/form/inputs/email.input.tsx
+function d({ form: d, name: f, label: p, placeholder: m, helper: h, id: g, icon: _ }) {
+	let v = g || `email-${String(f)}`;
+	return /* @__PURE__ */ c(u, {
+		control: d.control,
+		name: f,
+		render: ({ field: u, fieldState: d }) => /* @__PURE__ */ l(e, {
+			"data-invalid": d.invalid,
+			children: [
+				/* @__PURE__ */ l("div", {
+					className: "flex items-center gap-2",
+					children: [p && /* @__PURE__ */ c(n, {
+						htmlFor: v,
+						children: p
+					}), h && /* @__PURE__ */ c(i, { children: h })]
+				}),
+				_ ? /* @__PURE__ */ l(a, { children: [/* @__PURE__ */ c(o, {
+					align: "inline-start",
+					children: _
+				}), /* @__PURE__ */ c(s, {
+					...u,
+					type: "email",
+					id: v,
+					"aria-invalid": d.invalid,
+					placeholder: m || "ejemplo@correo.com",
+					autoComplete: "email"
+				})] }) : /* @__PURE__ */ c(r, {
+					...u,
+					type: "email",
+					id: v,
+					"aria-invalid": d.invalid,
+					placeholder: m || "ejemplo@correo.com",
+					autoComplete: "email"
+				}),
+				d.invalid && d.error && /* @__PURE__ */ c(t, { errors: [d.error] })
+			]
+		})
+	});
+}
+//#endregion
+export { d as default };

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

@@ -0,0 +1 @@
+require(`../../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../lib/utils.cjs`),t=require(`../../../ui/button.cjs`),n=require(`../../../ui/field.cjs`),r=require(`../../hover/hover.cjs`);let i=require(`react/jsx-runtime`),a=require(`react`),o=require(`lucide-react`),s=require(`react-hook-form`);function c({form:c,name:l,label:u,helper:d,id:f,accept:p=`*`}){let m=(0,a.useRef)(null),h=f||`file-input-${String(l)}`,g=(e,t)=>{let n=e.target.files?.[0];n&&t(n)},_=(e,t)=>{e.stopPropagation(),t(null),m.current&&(m.current.value=``)},v=e=>{if(e===0)return`0 Bytes`;let t=1024,n=[`Bytes`,`KB`,`MB`,`GB`],r=Math.floor(Math.log(e)/Math.log(t));return parseFloat((e/t**+r).toFixed(2))+` `+n[r]};return(0,i.jsx)(s.Controller,{control:c.control,name:l,render:({field:a,fieldState:s})=>{let c=a.value;return(0,i.jsxs)(n.Field,{"data-invalid":s.invalid,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[u&&(0,i.jsx)(n.FieldLabel,{htmlFor:h,children:u}),d&&(0,i.jsx)(r.Hover,{children:d})]}),(0,i.jsxs)(`div`,{className:e.cn(`relative w-full rounded-xl border-2 border-dashed transition-all duration-300`,`bg-muted/30 hover:bg-muted/50 p-4`,c?`border-primary/40 bg-primary/5`:`border-input`,s.invalid&&`border-destructive ring-3 ring-destructive/20`),children:[(0,i.jsx)(`input`,{ref:m,id:h,type:`file`,accept:p,className:`hidden`,onChange:e=>g(e,a.onChange)}),c?(0,i.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,i.jsx)(`div`,{className:`p-2 rounded-lg bg-primary/10 text-primary`,children:(0,i.jsx)(o.FileIcon,{className:`h-6 w-6`})}),(0,i.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,i.jsx)(`p`,{className:`text-sm font-medium truncate`,children:c.name}),(0,i.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:v(c.size)})]}),(0,i.jsx)(t.Button,{type:`button`,variant:`outline`,size:`icon`,className:`h-8 w-8 rounded-full border-muted-foreground/30 hover:border-destructive hover:text-destructive`,onClick:e=>_(e,a.onChange),children:(0,i.jsx)(o.X,{className:`h-4 w-4`})})]}):(0,i.jsxs)(`div`,{className:`flex flex-col items-center gap-2 cursor-pointer`,onClick:()=>m.current?.click(),children:[(0,i.jsx)(`div`,{className:`p-2 rounded-full bg-primary/10 text-primary`,children:(0,i.jsx)(o.Upload,{className:`h-5 w-5`})}),(0,i.jsx)(`p`,{className:`text-sm font-medium`,children:`Subir archivo`})]})]}),s.invalid&&s.error&&(0,i.jsx)(n.FieldError,{errors:[s.error]})]})}})}module.exports=c;

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

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

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

@@ -0,0 +1,95 @@
+import { cn as e } from "../../../lib/utils.esm";
+import { Button as t } from "../../../ui/button.esm";
+import { Field as n, FieldError as r, FieldLabel as i } from "../../../ui/field.esm";
+import { Hover as a } from "../../hover/hover.esm";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useRef as c } from "react";
+import { FileIcon as l, Upload as u, X as d } from "lucide-react";
+import { Controller as f } from "react-hook-form";
+//#region src/shared/custom/form/inputs/file.input.tsx
+function p({ form: p, name: m, label: h, helper: g, id: _, accept: v = "*" }) {
+	let y = c(null), b = _ || `file-input-${String(m)}`, x = (e, t) => {
+		let n = e.target.files?.[0];
+		n && t(n);
+	}, S = (e, t) => {
+		e.stopPropagation(), t(null), y.current && (y.current.value = "");
+	}, C = (e) => {
+		if (e === 0) return "0 Bytes";
+		let t = 1024, n = [
+			"Bytes",
+			"KB",
+			"MB",
+			"GB"
+		], r = Math.floor(Math.log(e) / Math.log(t));
+		return parseFloat((e / t ** +r).toFixed(2)) + " " + n[r];
+	};
+	return /* @__PURE__ */ o(f, {
+		control: p.control,
+		name: m,
+		render: ({ field: c, fieldState: f }) => {
+			let p = c.value;
+			return /* @__PURE__ */ s(n, {
+				"data-invalid": f.invalid,
+				children: [
+					/* @__PURE__ */ s("div", {
+						className: "flex items-center gap-2",
+						children: [h && /* @__PURE__ */ o(i, {
+							htmlFor: b,
+							children: h
+						}), g && /* @__PURE__ */ o(a, { children: g })]
+					}),
+					/* @__PURE__ */ s("div", {
+						className: e("relative w-full rounded-xl border-2 border-dashed transition-all duration-300", "bg-muted/30 hover:bg-muted/50 p-4", p ? "border-primary/40 bg-primary/5" : "border-input", f.invalid && "border-destructive ring-3 ring-destructive/20"),
+						children: [/* @__PURE__ */ o("input", {
+							ref: y,
+							id: b,
+							type: "file",
+							accept: v,
+							className: "hidden",
+							onChange: (e) => x(e, c.onChange)
+						}), p ? /* @__PURE__ */ s("div", {
+							className: "flex items-center gap-3",
+							children: [
+								/* @__PURE__ */ o("div", {
+									className: "p-2 rounded-lg bg-primary/10 text-primary",
+									children: /* @__PURE__ */ o(l, { className: "h-6 w-6" })
+								}),
+								/* @__PURE__ */ s("div", {
+									className: "flex-1 min-w-0",
+									children: [/* @__PURE__ */ o("p", {
+										className: "text-sm font-medium truncate",
+										children: p.name
+									}), /* @__PURE__ */ o("p", {
+										className: "text-xs text-muted-foreground",
+										children: C(p.size)
+									})]
+								}),
+								/* @__PURE__ */ o(t, {
+									type: "button",
+									variant: "outline",
+									size: "icon",
+									className: "h-8 w-8 rounded-full border-muted-foreground/30 hover:border-destructive hover:text-destructive",
+									onClick: (e) => S(e, c.onChange),
+									children: /* @__PURE__ */ o(d, { className: "h-4 w-4" })
+								})
+							]
+						}) : /* @__PURE__ */ s("div", {
+							className: "flex flex-col items-center gap-2 cursor-pointer",
+							onClick: () => y.current?.click(),
+							children: [/* @__PURE__ */ o("div", {
+								className: "p-2 rounded-full bg-primary/10 text-primary",
+								children: /* @__PURE__ */ o(u, { className: "h-5 w-5" })
+							}), /* @__PURE__ */ o("p", {
+								className: "text-sm font-medium",
+								children: "Subir archivo"
+							})]
+						})]
+					}),
+					f.invalid && f.error && /* @__PURE__ */ o(r, { errors: [f.error] })
+				]
+			});
+		}
+	});
+}
+//#endregion
+export { p as default };

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

@@ -0,0 +1 @@
+require(`../../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../lib/utils.cjs`),t=require(`../../../ui/button.cjs`),n=require(`../../../ui/field.cjs`),r=require(`../../hover/hover.cjs`);let i=require(`react/jsx-runtime`),a=require(`react`),o=require(`lucide-react`),s=require(`react-hook-form`);function c({form:e,name:t,label:o,helper:c,id:u,className:d}){let f=(0,a.useRef)(null),p=u||`image-input-${String(t)}`;return(0,i.jsx)(s.Controller,{control:e.control,name:t,render:({field:e,fieldState:t})=>(0,i.jsxs)(n.Field,{"data-invalid":t.invalid,className:d,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[o&&(0,i.jsx)(n.FieldLabel,{htmlFor:p,children:o}),c&&(0,i.jsx)(r.Hover,{children:c})]}),(0,i.jsx)(l,{value:e.value,inputId:p,invalid:t.invalid,onChange:e.onChange,fileInputRef:f}),t.invalid&&t.error&&(0,i.jsx)(n.FieldError,{errors:[t.error]})]})})}function l({value:n,inputId:r,invalid:s,onChange:c,fileInputRef:l}){let[u,d]=(0,a.useState)(null);return(0,a.useEffect)(()=>{if(n&&n instanceof File){let e=URL.createObjectURL(n);return d(e),()=>URL.revokeObjectURL(e)}else typeof n==`string`&&n.startsWith(`http`)?d(n):d(null)},[n]),(0,i.jsxs)(`div`,{className:e.cn(`relative group cursor-pointer overflow-hidden rounded-xl border-2 border-dashed transition-all duration-300`,`flex flex-col items-center justify-center bg-muted/30 hover:bg-muted/50`,`min-h-[160px] w-full`,u?`border-primary/50`:`border-input`,s&&`border-destructive ring-3 ring-destructive/20`),onClick:()=>l.current?.click(),children:[(0,i.jsx)(`input`,{ref:l,id:r,type:`file`,accept:`image/*`,className:`hidden`,onChange:e=>{let t=e.target.files?.[0];t&&c(t)}}),u?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`img`,{src:u,alt:`Preview`,className:`h-full w-full object-contain p-2 transition-transform duration-500 group-hover:scale-105`}),(0,i.jsx)(`div`,{className:`absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col items-center justify-center gap-2`,children:(0,i.jsxs)(t.Button,{type:`button`,variant:`destructive`,size:`sm`,className:`rounded-full flex items-center gap-2 px-4 shadow-lg hover:scale-105 transition-transform`,onClick:e=>{e.stopPropagation(),c(null),l.current&&(l.current.value=``),d(null)},children:[(0,i.jsx)(o.X,{className:`h-4 w-4`}),(0,i.jsx)(`span`,{children:`Borrar Imagen`})]})})]}):(0,i.jsxs)(`div`,{className:`flex flex-col items-center gap-3 p-6 text-center animate-in fade-in duration-300`,children:[(0,i.jsx)(`div`,{className:`p-3 rounded-full bg-primary/10 text-primary group-hover:bg-primary/20 transition-colors`,children:(0,i.jsx)(o.UploadCloud,{className:`h-8 w-8`})}),(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-sm font-medium`,children:`Haz clic para subir una imagen`}),(0,i.jsx)(`p`,{className:`text-xs text-muted-foreground mt-1`,children:`PNG, JPG o WEBP (Máx. 5MB)`})]})]})]})}module.exports=c;

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

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

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

@@ -0,0 +1,90 @@
+import { cn as e } from "../../../lib/utils.esm";
+import { Button as t } from "../../../ui/button.esm";
+import { Field as n, FieldError as r, FieldLabel as i } from "../../../ui/field.esm";
+import { Hover as a } from "../../hover/hover.esm";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useEffect as l, useRef as u, useState as d } from "react";
+import { UploadCloud as f, X as p } from "lucide-react";
+import { Controller as m } from "react-hook-form";
+//#region src/shared/custom/form/inputs/image.input.tsx
+function h({ form: e, name: t, label: o, helper: l, id: d, className: f }) {
+	let p = u(null), h = d || `image-input-${String(t)}`;
+	return /* @__PURE__ */ s(m, {
+		control: e.control,
+		name: t,
+		render: ({ field: e, fieldState: t }) => /* @__PURE__ */ c(n, {
+			"data-invalid": t.invalid,
+			className: f,
+			children: [
+				/* @__PURE__ */ c("div", {
+					className: "flex items-center gap-2",
+					children: [o && /* @__PURE__ */ s(i, {
+						htmlFor: h,
+						children: o
+					}), l && /* @__PURE__ */ s(a, { children: l })]
+				}),
+				/* @__PURE__ */ s(g, {
+					value: e.value,
+					inputId: h,
+					invalid: t.invalid,
+					onChange: e.onChange,
+					fileInputRef: p
+				}),
+				t.invalid && t.error && /* @__PURE__ */ s(r, { errors: [t.error] })
+			]
+		})
+	});
+}
+function g({ value: n, inputId: r, invalid: i, onChange: a, fileInputRef: u }) {
+	let [m, h] = d(null);
+	return l(() => {
+		if (n && n instanceof File) {
+			let e = URL.createObjectURL(n);
+			return h(e), () => URL.revokeObjectURL(e);
+		} else typeof n == "string" && n.startsWith("http") ? h(n) : h(null);
+	}, [n]), /* @__PURE__ */ c("div", {
+		className: e("relative group cursor-pointer overflow-hidden rounded-xl border-2 border-dashed transition-all duration-300", "flex flex-col items-center justify-center bg-muted/30 hover:bg-muted/50", "min-h-[160px] w-full", m ? "border-primary/50" : "border-input", i && "border-destructive ring-3 ring-destructive/20"),
+		onClick: () => u.current?.click(),
+		children: [/* @__PURE__ */ s("input", {
+			ref: u,
+			id: r,
+			type: "file",
+			accept: "image/*",
+			className: "hidden",
+			onChange: (e) => {
+				let t = e.target.files?.[0];
+				t && a(t);
+			}
+		}), m ? /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("img", {
+			src: m,
+			alt: "Preview",
+			className: "h-full w-full object-contain p-2 transition-transform duration-500 group-hover:scale-105"
+		}), /* @__PURE__ */ s("div", {
+			className: "absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col items-center justify-center gap-2",
+			children: /* @__PURE__ */ c(t, {
+				type: "button",
+				variant: "destructive",
+				size: "sm",
+				className: "rounded-full flex items-center gap-2 px-4 shadow-lg hover:scale-105 transition-transform",
+				onClick: (e) => {
+					e.stopPropagation(), a(null), u.current && (u.current.value = ""), h(null);
+				},
+				children: [/* @__PURE__ */ s(p, { className: "h-4 w-4" }), /* @__PURE__ */ s("span", { children: "Borrar Imagen" })]
+			})
+		})] }) : /* @__PURE__ */ c("div", {
+			className: "flex flex-col items-center gap-3 p-6 text-center animate-in fade-in duration-300",
+			children: [/* @__PURE__ */ s("div", {
+				className: "p-3 rounded-full bg-primary/10 text-primary group-hover:bg-primary/20 transition-colors",
+				children: /* @__PURE__ */ s(f, { className: "h-8 w-8" })
+			}), /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
+				className: "text-sm font-medium",
+				children: "Haz clic para subir una imagen"
+			}), /* @__PURE__ */ s("p", {
+				className: "text-xs text-muted-foreground mt-1",
+				children: "PNG, JPG o WEBP (Máx. 5MB)"
+			})] })]
+		})]
+	});
+}
+//#endregion
+export { h as default };

package/dist/shared/custom/form/inputs/list-select.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(`lucide-react`),s=require(`react-hook-form`);function c({form:e,name:a,label:c,helper:l,items:u,itemFactory:d,keyExtractor:f,multiple:p=!0}){return(0,i.jsx)(s.Controller,{control:e.control,name:a,render:({field:{value:e,onChange:a},fieldState:s})=>{let m=Array.isArray(e)?e:e?[e]:[],h=e=>{a(p?m.includes(e)?m.filter(t=>t!==e):[...m,e]:e)};return(0,i.jsxs)(n.Field,{"data-invalid":s.invalid,className:`flex flex-col gap-3`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[c&&(0,i.jsx)(n.FieldLabel,{className:`text-sm font-medium`,children:c}),l&&(0,i.jsx)(r.Hover,{children:l})]}),(0,i.jsx)(`div`,{className:`flex flex-col gap-2`,children:u.map(e=>{let n=f(e),r=m.includes(n);return(0,i.jsxs)(`button`,{type:`button`,onClick:()=>h(n),className:t.cn(`group flex items-center justify-between p-4 rounded-2xl border transition-all duration-300 text-left`,r?`bg-primary/10 border-primary text-primary shadow-matte`:`bg-muted/30 border-border text-muted-foreground hover:border-primary/40 hover:bg-muted/50`),children:[(0,i.jsx)(`div`,{className:t.cn(`flex-1 transition-colors`,r?`text-foreground`:``),children:d(e)}),(0,i.jsx)(`div`,{className:t.cn(`p-1 rounded-full transition-all duration-500 transform`,r?`bg-primary text-primary-foreground scale-110 opacity-100`:`bg-border/30 text-transparent scale-75 opacity-0`),children:(0,i.jsx)(o.CheckCircle2,{className:`w-4 h-4`})})]},n)})}),s.invalid&&s.error&&(0,i.jsx)(n.FieldError,{errors:[s.error]})]})}})}module.exports=c;

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

@@ -0,0 +1,17 @@
+import { FieldValues, Path } from 'react-hook-form';
+import { FormInputProps } from '../form.component';
+import * as React from "react";
+interface ListSelectInputProps<T, TFieldValues extends FieldValues> extends FormInputProps<TFieldValues> {
+    name: Path<TFieldValues>;
+    label?: string;
+    helper?: string;
+    items: T[];
+    itemFactory: (item: T) => React.ReactNode;
+    keyExtractor: (item: T) => string;
+    multiple?: boolean;
+}
+/**
+ * Input de Lista Interactiva para selección simple o múltiple.
+ */
+export default function ListSelectInput<T, TFieldValues extends FieldValues>({ form, name, label, helper, items, itemFactory, keyExtractor, multiple }: ListSelectInputProps<T, TFieldValues>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,53 @@
+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 { CheckCircle2 as s } from "lucide-react";
+import { Controller as c } from "react-hook-form";
+//#region src/shared/custom/form/inputs/list-select.input.tsx
+function l({ form: l, name: u, label: d, helper: f, items: p, itemFactory: m, keyExtractor: h, multiple: g = !0 }) {
+	return /* @__PURE__ */ a(c, {
+		control: l.control,
+		name: u,
+		render: ({ field: { value: c, onChange: l }, fieldState: u }) => {
+			let _ = Array.isArray(c) ? c : c ? [c] : [], v = (e) => {
+				l(g ? _.includes(e) ? _.filter((t) => t !== e) : [..._, e] : e);
+			};
+			return /* @__PURE__ */ o(t, {
+				"data-invalid": u.invalid,
+				className: "flex flex-col gap-3",
+				children: [
+					/* @__PURE__ */ o("div", {
+						className: "flex items-center gap-2",
+						children: [d && /* @__PURE__ */ a(r, {
+							className: "text-sm font-medium",
+							children: d
+						}), f && /* @__PURE__ */ a(i, { children: f })]
+					}),
+					/* @__PURE__ */ a("div", {
+						className: "flex flex-col gap-2",
+						children: p.map((t) => {
+							let n = h(t), r = _.includes(n);
+							return /* @__PURE__ */ o("button", {
+								type: "button",
+								onClick: () => v(n),
+								className: e("group flex items-center justify-between p-4 rounded-2xl border transition-all duration-300 text-left", r ? "bg-primary/10 border-primary text-primary shadow-matte" : "bg-muted/30 border-border text-muted-foreground hover:border-primary/40 hover:bg-muted/50"),
+								children: [/* @__PURE__ */ a("div", {
+									className: e("flex-1 transition-colors", r ? "text-foreground" : ""),
+									children: m(t)
+								}), /* @__PURE__ */ a("div", {
+									className: e("p-1 rounded-full transition-all duration-500 transform", r ? "bg-primary text-primary-foreground scale-110 opacity-100" : "bg-border/30 text-transparent scale-75 opacity-0"),
+									children: /* @__PURE__ */ a(s, { className: "w-4 h-4" })
+								})]
+							}, n);
+						})
+					}),
+					u.invalid && u.error && /* @__PURE__ */ a(n, { errors: [u.error] })
+				]
+			});
+		}
+	});
+}
+//#endregion
+export { l as default };

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

@@ -0,0 +1 @@
+require(`../../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../ui/button.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`),o=require(`lucide-react`),s=require(`react-hook-form`);function c({form:c,name:l,label:u,placeholder:d,helper:f,id:p}){let[m,h]=(0,a.useState)(!1),g=p||`secret-input-${String(l)}`,_=()=>h(!m);return(0,i.jsx)(s.Controller,{control:c.control,name:l,render:({field:a,fieldState:s})=>(0,i.jsxs)(t.Field,{"data-invalid":s.invalid,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[u&&(0,i.jsx)(t.FieldLabel,{htmlFor:g,children:u}),f&&(0,i.jsx)(r.Hover,{children:f})]}),(0,i.jsxs)(`div`,{className:`relative flex items-center`,children:[(0,i.jsx)(n.Input,{...a,id:g,type:m?`text`:`password`,"aria-invalid":s.invalid,placeholder:d,autoComplete:`current-password`,className:`pr-10`}),(0,i.jsxs)(e.Button,{type:`button`,variant:`ghost`,size:`icon`,className:`absolute right-0 h-full w-10 text-muted-foreground hover:bg-transparent`,onClick:_,children:[m?(0,i.jsx)(o.EyeOff,{className:`h-4 w-4`}):(0,i.jsx)(o.Eye,{className:`h-4 w-4`}),(0,i.jsx)(`span`,{className:`sr-only`,children:m?`Ocultar contraseña`:`Mostrar contraseña`})]})]}),s.invalid&&s.error&&(0,i.jsx)(t.FieldError,{errors:[s.error]})]})})}module.exports=c;

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

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

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

@@ -0,0 +1,53 @@
+import { Button as e } from "../../../ui/button.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 { useState as c } from "react";
+import { Eye as l, EyeOff as u } from "lucide-react";
+import { Controller as d } from "react-hook-form";
+//#region src/shared/custom/form/inputs/secret.input.tsx
+function f({ form: f, name: p, label: m, placeholder: h, helper: g, id: _ }) {
+	let [v, y] = c(!1), b = _ || `secret-input-${String(p)}`, x = () => y(!v);
+	return /* @__PURE__ */ o(d, {
+		control: f.control,
+		name: p,
+		render: ({ field: c, fieldState: d }) => /* @__PURE__ */ s(t, {
+			"data-invalid": d.invalid,
+			children: [
+				/* @__PURE__ */ s("div", {
+					className: "flex items-center gap-2",
+					children: [m && /* @__PURE__ */ o(r, {
+						htmlFor: b,
+						children: m
+					}), g && /* @__PURE__ */ o(a, { children: g })]
+				}),
+				/* @__PURE__ */ s("div", {
+					className: "relative flex items-center",
+					children: [/* @__PURE__ */ o(i, {
+						...c,
+						id: b,
+						type: v ? "text" : "password",
+						"aria-invalid": d.invalid,
+						placeholder: h,
+						autoComplete: "current-password",
+						className: "pr-10"
+					}), /* @__PURE__ */ s(e, {
+						type: "button",
+						variant: "ghost",
+						size: "icon",
+						className: "absolute right-0 h-full w-10 text-muted-foreground hover:bg-transparent",
+						onClick: x,
+						children: [o(v ? u : l, { className: "h-4 w-4" }), /* @__PURE__ */ o("span", {
+							className: "sr-only",
+							children: v ? "Ocultar contraseña" : "Mostrar contraseña"
+						})]
+					})]
+				}),
+				d.invalid && d.error && /* @__PURE__ */ o(n, { errors: [d.error] })
+			]
+		})
+	});
+}
+//#endregion
+export { f as default };

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

@@ -0,0 +1 @@
+require(`../../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../ui/select.cjs`),t=require(`../../../ui/field.cjs`),n=require(`../../hover/hover.cjs`);let r=require(`react/jsx-runtime`),i=require(`react-hook-form`);function a({form:a,name:o,label:s,helper:c,placeholder:l,options:u}){return(0,r.jsx)(i.Controller,{control:a.control,name:o,render:({field:{value:i,onChange:a},fieldState:o})=>(0,r.jsxs)(t.Field,{"data-invalid":o.invalid,children:[(0,r.jsxs)(`div`,{className:`flex items-center gap-2 mb-2`,children:[s&&(0,r.jsx)(t.FieldLabel,{className:`text-sm font-medium`,children:s}),c&&(0,r.jsx)(n.Hover,{children:c})]}),(0,r.jsxs)(e.Select,{value:i,onValueChange:a,children:[(0,r.jsx)(e.SelectTrigger,{className:`w-full bg-background border-border`,children:(0,r.jsx)(e.SelectValue,{placeholder:l||`Seleccionar...`})}),(0,r.jsx)(e.SelectContent,{className:`bg-card border-border shadow-matte`,children:(0,r.jsx)(e.SelectGroup,{children:u.map(t=>(0,r.jsx)(e.SelectItem,{value:t.value,children:t.label},t.value))})})]}),o.invalid&&o.error&&(0,r.jsx)(t.FieldError,{errors:[o.error],className:`mt-2`})]})})}module.exports=a;

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

@@ -0,0 +1,17 @@
+import { FieldValues, Path } from 'react-hook-form';
+import { FormInputProps } from '../form.component';
+interface SelectInputProps<TFieldValues extends FieldValues> extends FormInputProps<TFieldValues> {
+    name: Path<TFieldValues>;
+    label?: string;
+    helper?: string;
+    placeholder?: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+}
+/**
+ * Input de Selección Estándar para formularios.
+ */
+export default function SelectInput<TFieldValues extends FieldValues>({ form, name, label, helper, placeholder, options, }: SelectInputProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
+export {};