@tunjiadeyemi/ui 1.2.0 → 1.3.0

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 (5) hide show
  1. package/dist/index.d.mts +4 -2
  2. package/dist/index.d.ts +4 -2
  3. package/dist/index.js +35 -40
  4. package/dist/index.mjs +35 -40
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -13,7 +13,7 @@ interface ModalProps {
13
13
  declare const Modal: ({ isDrag, showModal, onClose, children, className, revealMode, }: ModalProps) => react_jsx_runtime.JSX.Element;
14
14
 
15
15
  interface TextInputProps {
16
- type?: "password" | "otp" | "text" | "email" | "number";
16
+ type?: 'password' | 'otp' | 'text' | 'email' | 'number';
17
17
  value?: string;
18
18
  onOtpClick?: () => void;
19
19
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -29,9 +29,11 @@ interface TextInputProps {
29
29
  borderRadius?: string;
30
30
  height?: string;
31
31
  width?: string;
32
+ eyeIcon?: React.ReactNode;
33
+ eyeClosedIcon?: React.ReactNode;
32
34
  }
33
35
 
34
- declare const Input: ({ onChange, onOtpClick, validate, type, value, minLength, maxLength, className, placeholder, errorMessage, width, height, color, textColor, borderRadius, backgroundColor, }: TextInputProps) => react_jsx_runtime.JSX.Element;
36
+ declare const Input: ({ onChange, onOtpClick, validate, type, value, minLength, maxLength, className, placeholder, errorMessage, width, height, color, textColor, borderRadius, backgroundColor, eyeIcon, eyeClosedIcon }: TextInputProps) => react_jsx_runtime.JSX.Element;
35
37
 
36
38
  interface SkeletonProps {
37
39
  className?: string;
package/dist/index.d.ts CHANGED
@@ -13,7 +13,7 @@ interface ModalProps {
13
13
  declare const Modal: ({ isDrag, showModal, onClose, children, className, revealMode, }: ModalProps) => react_jsx_runtime.JSX.Element;
14
14
 
15
15
  interface TextInputProps {
16
- type?: "password" | "otp" | "text" | "email" | "number";
16
+ type?: 'password' | 'otp' | 'text' | 'email' | 'number';
17
17
  value?: string;
18
18
  onOtpClick?: () => void;
19
19
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -29,9 +29,11 @@ interface TextInputProps {
29
29
  borderRadius?: string;
30
30
  height?: string;
31
31
  width?: string;
32
+ eyeIcon?: React.ReactNode;
33
+ eyeClosedIcon?: React.ReactNode;
32
34
  }
33
35
 
34
- declare const Input: ({ onChange, onOtpClick, validate, type, value, minLength, maxLength, className, placeholder, errorMessage, width, height, color, textColor, borderRadius, backgroundColor, }: TextInputProps) => react_jsx_runtime.JSX.Element;
36
+ declare const Input: ({ onChange, onOtpClick, validate, type, value, minLength, maxLength, className, placeholder, errorMessage, width, height, color, textColor, borderRadius, backgroundColor, eyeIcon, eyeClosedIcon }: TextInputProps) => react_jsx_runtime.JSX.Element;
35
37
 
36
38
  interface SkeletonProps {
37
39
  className?: string;
package/dist/index.js CHANGED
@@ -138,7 +138,9 @@ var Input = ({
138
138
  color = "#6B2CE9",
139
139
  textColor = "white",
140
140
  borderRadius = "10px",
141
- backgroundColor = "#1F1F23"
141
+ backgroundColor = "#1F1F23",
142
+ eyeIcon = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Eye, { className: "cursor-pointer", size: 18 }),
143
+ eyeClosedIcon = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.EyeClosed, { className: "cursor-pointer", size: 18 })
142
144
  }) => {
143
145
  const [showPassword, setShowPassword] = (0, import_react.useState)(false);
144
146
  const [error, setError] = (0, import_react.useState)(null);
@@ -226,7 +228,7 @@ var Input = ({
226
228
  onClick: togglePasswordVisibility,
227
229
  className: "absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition-colors",
228
230
  "aria-label": showPassword ? "Hide password" : "Show password",
229
- children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Eye, { className: "cursor-pointer", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.EyeClosed, { className: "cursor-pointer", size: 18 })
231
+ children: showPassword ? eyeIcon : eyeClosedIcon
230
232
  }
231
233
  )
232
234
  ] }),
@@ -234,44 +236,37 @@ var Input = ({
234
236
  ] });
235
237
  } else if (type === "otp") {
236
238
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { width }, children: [
237
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
238
- "div",
239
- {
240
- className: "relative flex items-center gap-4",
241
- style: { width: "100%" },
242
- children: [
243
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
244
- "input",
245
- {
246
- type: "number",
247
- value,
248
- onChange,
249
- placeholder,
250
- style: {
251
- backgroundColor,
252
- color: textColor,
253
- borderRadius,
254
- height,
255
- width: "100%"
256
- },
257
- className: `border ${error ? "border-red-500" : "border-transparent"} placeholder:text-sm text-sm px-4 pr-28 placeholder:opacity-30 focus:outline-none transition ${className}`,
258
- onFocus: (e) => !error && (e.target.style.borderColor = color),
259
- onBlur: (e) => e.target.style.borderColor = error ? "#ef4444" : "transparent"
260
- }
261
- ),
262
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
263
- "button",
264
- {
265
- type: "button",
266
- onClick: onOtpClick,
267
- className: "text-[#A77BFF] cursor-pointer font-medium text-sm w-fit absolute right-4 top-1/2 -translate-y-1/2",
268
- "aria-label": "Resend code",
269
- children: "Resend code"
270
- }
271
- )
272
- ]
273
- }
274
- ),
239
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative flex items-center gap-4", style: { width: "100%" }, children: [
240
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
241
+ "input",
242
+ {
243
+ type: "number",
244
+ value,
245
+ onChange,
246
+ placeholder,
247
+ style: {
248
+ backgroundColor,
249
+ color: textColor,
250
+ borderRadius,
251
+ height,
252
+ width: "100%"
253
+ },
254
+ className: `border ${error ? "border-red-500" : "border-transparent"} placeholder:text-sm text-sm px-4 pr-28 placeholder:opacity-30 focus:outline-none transition ${className}`,
255
+ onFocus: (e) => !error && (e.target.style.borderColor = color),
256
+ onBlur: (e) => e.target.style.borderColor = error ? "#ef4444" : "transparent"
257
+ }
258
+ ),
259
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
260
+ "button",
261
+ {
262
+ type: "button",
263
+ onClick: onOtpClick,
264
+ className: "text-[#A77BFF] cursor-pointer font-medium text-sm w-fit absolute right-4 top-1/2 -translate-y-1/2",
265
+ "aria-label": "Resend code",
266
+ children: "Resend code"
267
+ }
268
+ )
269
+ ] }),
275
270
  error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-red-500 text-xs mt-1 px-1", children: error })
276
271
  ] });
277
272
  } else {
package/dist/index.mjs CHANGED
@@ -110,7 +110,9 @@ var Input = ({
110
110
  color = "#6B2CE9",
111
111
  textColor = "white",
112
112
  borderRadius = "10px",
113
- backgroundColor = "#1F1F23"
113
+ backgroundColor = "#1F1F23",
114
+ eyeIcon = /* @__PURE__ */ jsx2(Eye, { className: "cursor-pointer", size: 18 }),
115
+ eyeClosedIcon = /* @__PURE__ */ jsx2(EyeClosed, { className: "cursor-pointer", size: 18 })
114
116
  }) => {
115
117
  const [showPassword, setShowPassword] = useState(false);
116
118
  const [error, setError] = useState(null);
@@ -198,7 +200,7 @@ var Input = ({
198
200
  onClick: togglePasswordVisibility,
199
201
  className: "absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition-colors",
200
202
  "aria-label": showPassword ? "Hide password" : "Show password",
201
- children: showPassword ? /* @__PURE__ */ jsx2(Eye, { className: "cursor-pointer", size: 18 }) : /* @__PURE__ */ jsx2(EyeClosed, { className: "cursor-pointer", size: 18 })
203
+ children: showPassword ? eyeIcon : eyeClosedIcon
202
204
  }
203
205
  )
204
206
  ] }),
@@ -206,44 +208,37 @@ var Input = ({
206
208
  ] });
207
209
  } else if (type === "otp") {
208
210
  return /* @__PURE__ */ jsxs2("div", { style: { width }, children: [
209
- /* @__PURE__ */ jsxs2(
210
- "div",
211
- {
212
- className: "relative flex items-center gap-4",
213
- style: { width: "100%" },
214
- children: [
215
- /* @__PURE__ */ jsx2(
216
- "input",
217
- {
218
- type: "number",
219
- value,
220
- onChange,
221
- placeholder,
222
- style: {
223
- backgroundColor,
224
- color: textColor,
225
- borderRadius,
226
- height,
227
- width: "100%"
228
- },
229
- className: `border ${error ? "border-red-500" : "border-transparent"} placeholder:text-sm text-sm px-4 pr-28 placeholder:opacity-30 focus:outline-none transition ${className}`,
230
- onFocus: (e) => !error && (e.target.style.borderColor = color),
231
- onBlur: (e) => e.target.style.borderColor = error ? "#ef4444" : "transparent"
232
- }
233
- ),
234
- /* @__PURE__ */ jsx2(
235
- "button",
236
- {
237
- type: "button",
238
- onClick: onOtpClick,
239
- className: "text-[#A77BFF] cursor-pointer font-medium text-sm w-fit absolute right-4 top-1/2 -translate-y-1/2",
240
- "aria-label": "Resend code",
241
- children: "Resend code"
242
- }
243
- )
244
- ]
245
- }
246
- ),
211
+ /* @__PURE__ */ jsxs2("div", { className: "relative flex items-center gap-4", style: { width: "100%" }, children: [
212
+ /* @__PURE__ */ jsx2(
213
+ "input",
214
+ {
215
+ type: "number",
216
+ value,
217
+ onChange,
218
+ placeholder,
219
+ style: {
220
+ backgroundColor,
221
+ color: textColor,
222
+ borderRadius,
223
+ height,
224
+ width: "100%"
225
+ },
226
+ className: `border ${error ? "border-red-500" : "border-transparent"} placeholder:text-sm text-sm px-4 pr-28 placeholder:opacity-30 focus:outline-none transition ${className}`,
227
+ onFocus: (e) => !error && (e.target.style.borderColor = color),
228
+ onBlur: (e) => e.target.style.borderColor = error ? "#ef4444" : "transparent"
229
+ }
230
+ ),
231
+ /* @__PURE__ */ jsx2(
232
+ "button",
233
+ {
234
+ type: "button",
235
+ onClick: onOtpClick,
236
+ className: "text-[#A77BFF] cursor-pointer font-medium text-sm w-fit absolute right-4 top-1/2 -translate-y-1/2",
237
+ "aria-label": "Resend code",
238
+ children: "Resend code"
239
+ }
240
+ )
241
+ ] }),
247
242
  error && /* @__PURE__ */ jsx2("p", { className: "text-red-500 text-xs mt-1 px-1", children: error })
248
243
  ] });
249
244
  } else {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tunjiadeyemi/ui",
3
- "version": "1.2.0",
3
+ "version": "1.3.0",
4
4
  "description": "A collection of reusable UI components",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",