next-recomponents 2.0.39 → 2.0.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/index.d.mts +35 -5
  2. package/dist/index.d.ts +35 -5
  3. package/dist/index.js +472 -420
  4. package/dist/index.mjs +497 -445
  5. package/package.json +1 -1
  6. package/src/input/index.tsx +75 -73
  7. package/src/pop/overlay.tsx +6 -6
  8. package/src/select/index.tsx +9 -12
  9. package/src/text-area/index.tsx +26 -31
  10. package/src/use-resources/index.ts +424 -397
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-recomponents",
3
- "version": "2.0.39",
3
+ "version": "2.0.41",
4
4
  "description": "description nueva",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/input/index.tsx CHANGED
@@ -1,10 +1,10 @@
1
- import { React } from "next/dist/server/route-modules/app-page/vendored/rsc/entrypoints";
2
1
  import { InputHTMLAttributes, useState } from "react";
3
2
 
4
3
  interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
5
4
  label: React.ReactNode;
6
5
  regex?: RegExp;
7
6
  invalidMessage?: React.ReactNode;
7
+ icon?: React.ReactNode;
8
8
  }
9
9
 
10
10
  export default function Input({
@@ -12,85 +12,87 @@ export default function Input({
12
12
  className,
13
13
  regex,
14
14
  invalidMessage = "Valor no válido",
15
+ icon = null,
15
16
  ...props
16
17
  }: InputProps) {
17
18
  const value = `${props?.value || ""}`;
18
19
  const isValid = !regex ? true : regex.test(value);
19
20
  const isPassword = props.type === "password";
20
21
  const [showPassword, setShowPassword] = useState(false);
21
-
22
+ const svg = icon;
22
23
  return (
23
- <div className="w-full">
24
- <label className="flex flex-col gap-1">
25
- <div className="font-bold">
26
- {label} {props?.required && <span className="text-red-500">*</span>}
27
- </div>
28
- <div className="relative">
29
- <input
30
- {...props}
31
- type={isPassword && showPassword ? "text" : props.type}
32
- className={[
33
- "p-2 w-full rounded border shadow",
34
- isPassword && "pr-10",
35
- value !== "" && !isValid && "bg-red-200 text-black",
36
- value !== "" && isValid && "bg-green-200 text-black",
37
- className,
38
- ]
39
- .filter(Boolean)
40
- .join(" ")}
41
- />
42
- {isPassword && (
43
- <button
44
- type="button"
45
- onClick={() => setShowPassword((prev) => !prev)}
46
- className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-800 focus:outline-none"
47
- aria-label={
48
- showPassword ? "Ocultar contraseña" : "Mostrar contraseña"
49
- }
50
- >
51
- {showPassword ? (
52
- // Ojo cerrado (ocultar)
53
- <svg
54
- xmlns="http://www.w3.org/2000/svg"
55
- className="h-5 w-5"
56
- fill="none"
57
- viewBox="0 0 24 24"
58
- stroke="currentColor"
59
- >
60
- <path
61
- strokeLinecap="round"
62
- strokeLinejoin="round"
63
- strokeWidth={2}
64
- d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
65
- />
66
- </svg>
67
- ) : (
68
- // Ojo abierto (mostrar)
69
- <svg
70
- xmlns="http://www.w3.org/2000/svg"
71
- className="h-5 w-5"
72
- fill="none"
73
- viewBox="0 0 24 24"
74
- stroke="currentColor"
75
- >
76
- <path
77
- strokeLinecap="round"
78
- strokeLinejoin="round"
79
- strokeWidth={2}
80
- d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
81
- />
82
- <path
83
- strokeLinecap="round"
84
- strokeLinejoin="round"
85
- strokeWidth={2}
86
- d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
87
- />
88
- </svg>
89
- )}
90
- </button>
91
- )}
92
- </div>
93
- </label>
24
+ <div className="w-full relative my-3">
25
+ <div className="relative flex items-center border rounded bg-white pr-1 mb-5 w-full">
26
+ <input
27
+ {...props}
28
+ type={isPassword && showPassword ? "text" : props.type}
29
+ className={[
30
+ "block p-2 w-full bg-transparent min-w-0",
31
+ isPassword && "pr-10",
32
+ value !== "" && !isValid && "bg-red-200 text-black",
33
+ value !== "" && isValid && "bg-green-200 text-black",
34
+ className,
35
+ ]
36
+ .filter(Boolean)
37
+ .join(" ")}
38
+ />
39
+ <label className="absolute -top-2.5 left-2 text-xs font-bold px-1">
40
+ {label}
41
+ {props?.required && <span className="text-red-500 ml-1">*</span>}
42
+ </label>
43
+ {isPassword ? (
44
+ <button
45
+ type="button"
46
+ onClick={() => setShowPassword((prev) => !prev)}
47
+ className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-800 focus:outline-none"
48
+ aria-label={
49
+ showPassword ? "Ocultar contraseña" : "Mostrar contraseña"
50
+ }
51
+ >
52
+ {showPassword ? (
53
+ // Ojo cerrado (ocultar)
54
+ <svg
55
+ xmlns="http://www.w3.org/2000/svg"
56
+ className="h-5 w-5"
57
+ fill="none"
58
+ viewBox="0 0 24 24"
59
+ stroke="currentColor"
60
+ >
61
+ <path
62
+ strokeLinecap="round"
63
+ strokeLinejoin="round"
64
+ strokeWidth={2}
65
+ d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
66
+ />
67
+ </svg>
68
+ ) : (
69
+ // Ojo abierto (mostrar)
70
+ <svg
71
+ xmlns="http://www.w3.org/2000/svg"
72
+ className="h-5 w-5"
73
+ fill="none"
74
+ viewBox="0 0 24 24"
75
+ stroke="currentColor"
76
+ >
77
+ <path
78
+ strokeLinecap="round"
79
+ strokeLinejoin="round"
80
+ strokeWidth={2}
81
+ d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
82
+ />
83
+ <path
84
+ strokeLinecap="round"
85
+ strokeLinejoin="round"
86
+ strokeWidth={2}
87
+ d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
88
+ />
89
+ </svg>
90
+ )}
91
+ </button>
92
+ ) : (
93
+ <i className="absulute right-[12px] text-[#3a7bd5] ">{svg}</i>
94
+ )}
95
+ </div>
94
96
  {!isValid && value !== "" && (
95
97
  <div className="text-red-800 invalid">{invalidMessage}</div>
96
98
  )}
package/src/pop/overlay.tsx CHANGED
@@ -18,12 +18,12 @@ export function PopupOverlay({
18
18
  <div
19
19
  className={"fixed inset-0 flex items-center justify-center z-[1000] "}
20
20
  style={{ background: "rgba(15,23,42,0.45)", backdropFilter: "blur(2px)" }}
21
- onClick={(e) => {
22
- if (e.target === e.currentTarget) {
23
- onClose(false);
24
- popup.onCancel?.();
25
- }
26
- }}
21
+ // onClick={(e) => {
22
+ // if (e.target === e.currentTarget) {
23
+ // onClose(false);
24
+ // popup.onCancel?.();
25
+ // }
26
+ // }}
27
27
  >
28
28
  <style>{`
29
29
  @keyframes fadeInScale {
package/src/select/index.tsx CHANGED
@@ -119,21 +119,13 @@ export default function Select({
119
119
  }
120
120
  }, [isOpen]);
121
121
  return (
122
- <div ref={containerRef} className="w-full">
123
- {label && (
124
- <label className="font-bold mb-1 block">
125
- {label} {props?.required && <span className="text-red-500">*</span>}
126
- </label>
127
- )}
128
- <div className="relative">
122
+ <div ref={containerRef} className="w-full relative my-3">
123
+ <div className="relative flex items-center border rounded bg-white">
129
124
  <input
130
125
  autoComplete="off"
131
126
  ref={inputRef}
132
127
  {...props}
133
- className={[
134
- "p-2 w-full rounded border shadow",
135
- props?.className,
136
- ].join(" ")}
128
+ className={["p-2 w-full transparent", props?.className].join(" ")}
137
129
  value={inputValue}
138
130
  onBlur={(e) => {
139
131
  setTimeout(() => {
@@ -170,6 +162,11 @@ export default function Select({
170
162
  onFocus={() => setIsOpen(true)}
171
163
  onKeyDown={handleKeyDown}
172
164
  />
165
+ {label && (
166
+ <label className="absolute -top-2.5 left-2 text-xs font-bold px-1">
167
+ {label} {props?.required && <span className="text-red-500">*</span>}
168
+ </label>
169
+ )}
173
170
  {!isOpen && (
174
171
  <div className="absolute top-0 right-0 flex flex-col justify-center items-center px-2 py-2 font-bold">
175
172
  <SelectIcon />
@@ -196,7 +193,7 @@ export default function Select({
196
193
  {isOpen && filtered.length > 0 && (
197
194
  <div
198
195
  style={{ zIndex: 9999999999 }}
199
- className={`absolute w-full border rounded shadow bg-white z-10 max-h-100 overflow-y-auto ${
196
+ className={`absolute w-full border rounded shadow bg-white z-10 max-h-100 top-10 overflow-y-auto ${
200
197
  openUpwards ? "bottom-full mb-1" : "mt-1"
201
198
  }`}
202
199
  >
package/src/text-area/index.tsx CHANGED
@@ -4,11 +4,10 @@ import React, {
4
4
  useState,
5
5
  } from "react";
6
6
 
7
- interface Props
8
- extends DetailedHTMLProps<
9
- TextareaHTMLAttributes<HTMLTextAreaElement>,
10
- HTMLTextAreaElement
11
- > {
7
+ interface Props extends DetailedHTMLProps<
8
+ TextareaHTMLAttributes<HTMLTextAreaElement>,
9
+ HTMLTextAreaElement
10
+ > {
12
11
  label?: React.ReactNode;
13
12
  maxLength?: number;
14
13
  }
@@ -22,33 +21,29 @@ export default function TextArea({
22
21
  }: Props) {
23
22
  const [value, setValue] = useState<string>((props?.value as string) || "");
24
23
  return (
25
- <div className="w-full">
26
- <label className="flex flex-col gap-1">
27
- <div className="font-bold ">
24
+ <div className="w-full relative my-3">
25
+ <div className="relative flex items-center border rounded bg-white ">
26
+ <textarea
27
+ {...props}
28
+ className={["p-1 w-full transparent", className].join(" ")}
29
+ value={value}
30
+ onChange={(e) => {
31
+ if (maxLength) {
32
+ e.target.value = e.target.value.slice(0, maxLength);
33
+ }
34
+ setValue(e.target.value);
35
+ onChange?.(e);
36
+ }}
37
+ ></textarea>{" "}
38
+ <label className="absolute -top-2.5 left-2 text-xs font-bold px-1">
28
39
  {label} {props?.required && <span className="text-red-500">*</span>}
29
- </div>
30
- <div>
31
- <textarea
32
- {...props}
33
- className={["p-1 w-full rounded border shadow", className].join(
34
- " "
35
- )}
36
- value={value}
37
- onChange={(e) => {
38
- if (maxLength) {
39
- e.target.value = e.target.value.slice(0, maxLength);
40
- }
41
- setValue(e.target.value);
42
- onChange?.(e);
43
- }}
44
- ></textarea>
45
- {maxLength && (
46
- <div className=" text-xs text-gray text-right">
47
- {value.length} / {maxLength}
48
- </div>
49
- )}
50
- </div>
51
- </label>
40
+ </label>
41
+ {maxLength && (
42
+ <div className=" text-xs text-gray text-right">
43
+ {value.length} / {maxLength}
44
+ </div>
45
+ )}
46
+ </div>
52
47
  </div>
53
48
  );
54
49
  }