@byhandi/heroui-kit 0.1.1
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.
- package/README.md +96 -0
- package/dist/index.cjs.js +6 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.es.js +308 -0
- package/dist/input-text/InputText.d.ts +4 -0
- package/dist/input-text/InputText.d.ts.map +1 -0
- package/dist/input-text/InputTextWithRHFControl.d.ts +10 -0
- package/dist/input-text/InputTextWithRHFControl.d.ts.map +1 -0
- package/dist/input-text/index.d.ts +4 -0
- package/dist/input-text/index.d.ts.map +1 -0
- package/package.json +40 -0
package/README.md
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
# @byhandi/heroui-kit
|
|
2
|
+
|
|
3
|
+
Opinionated HeroUI components with built-in React Hook Form integration.
|
|
4
|
+
|
|
5
|
+
## Introduction
|
|
6
|
+
|
|
7
|
+
This library provides a collection of customized components built on top of [HeroUI](https://heroui.com). It focuses on providing consistent styling (e.g., `bordered` variant, `sm` radius) and seamless integration with `react-hook-form` via dedicated control wrappers.
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @byhandi/heroui-kit
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Peer Dependencies
|
|
16
|
+
|
|
17
|
+
Ensure you have the following peer dependencies installed in your project:
|
|
18
|
+
|
|
19
|
+
- `react` >= 19
|
|
20
|
+
- `react-dom` >= 19
|
|
21
|
+
- `@heroui/react` >= 2.8
|
|
22
|
+
- `framer-motion` >= 11
|
|
23
|
+
- `react-hook-form` >= 7
|
|
24
|
+
|
|
25
|
+
## Components
|
|
26
|
+
|
|
27
|
+
### InputText
|
|
28
|
+
|
|
29
|
+
A styled wrapper around HeroUI's `Input` component.
|
|
30
|
+
|
|
31
|
+
**Default Props:**
|
|
32
|
+
|
|
33
|
+
- `variant`: "bordered"
|
|
34
|
+
- `radius`: "sm"
|
|
35
|
+
- `labelPlacement`: "outside"
|
|
36
|
+
- Background: White (Light Mode) / Default (Dark Mode)
|
|
37
|
+
|
|
38
|
+
**Usage:**
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import { InputText } from "@byhandi/heroui-kit";
|
|
42
|
+
|
|
43
|
+
function App() {
|
|
44
|
+
return <InputText label="Username" placeholder="Enter your username" />;
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### InputTextWithRHFControl
|
|
49
|
+
|
|
50
|
+
A wrapper component that integrates `InputText` with `react-hook-form`'s `Controller`. It automatically handles:
|
|
51
|
+
|
|
52
|
+
- State management via `control`
|
|
53
|
+
- Error states (`isInvalid`)
|
|
54
|
+
- Error messages (`errorMessage`)
|
|
55
|
+
- Required validation (if `isRequired` prop is true)
|
|
56
|
+
|
|
57
|
+
**Usage:**
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
import { useForm } from "react-hook-form";
|
|
61
|
+
import { InputTextWithRHFControl } from "@byhandi/heroui-kit";
|
|
62
|
+
|
|
63
|
+
interface FormValues {
|
|
64
|
+
username: string;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
function App() {
|
|
68
|
+
const { control, handleSubmit } = useForm<FormValues>();
|
|
69
|
+
|
|
70
|
+
const onSubmit = (data: FormValues) => {
|
|
71
|
+
console.log(data);
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
return (
|
|
75
|
+
<form onSubmit={handleSubmit(onSubmit)}>
|
|
76
|
+
<InputTextWithRHFControl control={control} name="username" label="Username" isRequired />
|
|
77
|
+
<button type="submit">Submit</button>
|
|
78
|
+
</form>
|
|
79
|
+
);
|
|
80
|
+
}
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## Development
|
|
84
|
+
|
|
85
|
+
This project uses Vite for development and bundling.
|
|
86
|
+
|
|
87
|
+
### Scripts
|
|
88
|
+
|
|
89
|
+
- **`npm run dev`**: Start the development server.
|
|
90
|
+
- **`npm run build`**: Build the library for production (outputs to `dist`).
|
|
91
|
+
- **`npm run lint`**: Run ESLint.
|
|
92
|
+
- **`npm run preview`**: Preview the production build.
|
|
93
|
+
|
|
94
|
+
## License
|
|
95
|
+
|
|
96
|
+
MIT
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const te=require("react"),F=require("@heroui/react"),ne=require("react-hook-form");var b={exports:{}},_={};var $;function ae(){if($)return _;$=1;var s=Symbol.for("react.transitional.element"),d=Symbol.for("react.fragment");function f(l,o,u){var c=null;if(u!==void 0&&(c=""+u),o.key!==void 0&&(c=""+o.key),"key"in o){u={};for(var i in o)i!=="key"&&(u[i]=o[i])}else u=o;return o=u.ref,{$$typeof:s,type:l,key:c,ref:o!==void 0?o:null,props:u}}return _.Fragment=d,_.jsx=f,_.jsxs=f,_}var E={};var q;function oe(){return q||(q=1,process.env.NODE_ENV!=="production"&&(function(){function s(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===K?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case p:return"Fragment";case V:return"Profiler";case J:return"StrictMode";case X:return"Suspense";case B:return"SuspenseList";case Q:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case U:return"Portal";case G:return e.displayName||"Context";case z:return(e._context.displayName||"Context")+".Consumer";case H:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case Z:return r=e.displayName||null,r!==null?r:s(e.type)||"Memo";case T:r=e._payload,e=e._init;try{return s(e(r))}catch{}}return null}function d(e){return""+e}function f(e){try{d(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),d(e)}}function l(e){if(e===p)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===T)return"<...>";try{var r=s(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function o(){var e=k.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function c(e){if(j.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function i(e,r){function t(){w||(w=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function M(){var e=s(this.type);return N[e]||(N[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function L(e,r,t,n,v,x){var a=t.ref;return e={$$typeof:y,type:e,key:r,props:t,_owner:n},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:M}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:v}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:x}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function P(e,r,t,n,v,x){var a=r.children;if(a!==void 0)if(n)if(ee(a)){for(n=0;n<a.length;n++)S(a[n]);Object.freeze&&Object.freeze(a)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else S(a);if(j.call(r,"key")){a=s(e);var m=Object.keys(r).filter(function(re){return re!=="key"});n=0<m.length?"{key: someKey, "+m.join(": ..., ")+": ...}":"{key: someKey}",Y[a+n]||(m=0<m.length?"{"+m.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
2
|
+
let props = %s;
|
|
3
|
+
<%s {...props} />
|
|
4
|
+
React keys must be passed directly to JSX without using spread:
|
|
5
|
+
let props = %s;
|
|
6
|
+
<%s key={someKey} {...props} />`,n,a,m,a),Y[a+n]=!0)}if(a=null,t!==void 0&&(f(t),a=""+t),c(r)&&(f(r.key),a=""+r.key),"key"in r){t={};for(var g in r)g!=="key"&&(t[g]=r[g])}else t=r;return a&&i(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),L(e,a,t,o(),v,x)}function S(e){h(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===T&&(e._payload.status==="fulfilled"?h(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function h(e){return typeof e=="object"&&e!==null&&e.$$typeof===y}var R=te,y=Symbol.for("react.transitional.element"),U=Symbol.for("react.portal"),p=Symbol.for("react.fragment"),J=Symbol.for("react.strict_mode"),V=Symbol.for("react.profiler"),z=Symbol.for("react.consumer"),G=Symbol.for("react.context"),H=Symbol.for("react.forward_ref"),X=Symbol.for("react.suspense"),B=Symbol.for("react.suspense_list"),Z=Symbol.for("react.memo"),T=Symbol.for("react.lazy"),Q=Symbol.for("react.activity"),K=Symbol.for("react.client.reference"),k=R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,j=Object.prototype.hasOwnProperty,ee=Array.isArray,O=console.createTask?console.createTask:function(){return null};R={react_stack_bottom_frame:function(e){return e()}};var w,N={},C=R.react_stack_bottom_frame.bind(R,u)(),I=O(l(u)),Y={};E.Fragment=p,E.jsx=function(e,r,t){var n=1e4>k.recentlyCreatedOwnerStacks++;return P(e,r,t,!1,n?Error("react-stack-top-frame"):C,n?O(l(e)):I)},E.jsxs=function(e,r,t){var n=1e4>k.recentlyCreatedOwnerStacks++;return P(e,r,t,!0,n?Error("react-stack-top-frame"):C,n?O(l(e)):I)}})()),E}var W;function se(){return W||(W=1,process.env.NODE_ENV==="production"?b.exports=ae():b.exports=oe()),b.exports}var A=se();function D(s){return A.jsx(F.Input,{variant:"bordered",radius:"sm",labelPlacement:"outside",placeholder:"Type here",validationBehavior:"aria",...s,classNames:{...s.classNames,inputWrapper:F.cn("bg-white dark:bg-default",[s.classNames?.inputWrapper])}})}function ue(s){const{control:d,name:f,rules:l={},...o}=s,u={...l,...o.isRequired&&!l?.required?{required:"This field is required"}:{}};return A.jsx(ne.Controller,{control:d,name:f,rules:u,render:({field:c,fieldState:i})=>A.jsx(D,{...c,...o,value:c.value??"",isInvalid:!!i.error,errorMessage:i.error?.message})})}exports.InputText=D;exports.InputTextWithRHFControl=ue;
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
|
package/dist/index.es.js
ADDED
|
@@ -0,0 +1,308 @@
|
|
|
1
|
+
import ee from "react";
|
|
2
|
+
import { Input as re, cn as te } from "@heroui/react";
|
|
3
|
+
import { Controller as ne } from "react-hook-form";
|
|
4
|
+
var v = { exports: {} }, _ = {};
|
|
5
|
+
var $;
|
|
6
|
+
function ae() {
|
|
7
|
+
if ($) return _;
|
|
8
|
+
$ = 1;
|
|
9
|
+
var s = /* @__PURE__ */ Symbol.for("react.transitional.element"), d = /* @__PURE__ */ Symbol.for("react.fragment");
|
|
10
|
+
function f(l, o, u) {
|
|
11
|
+
var i = null;
|
|
12
|
+
if (u !== void 0 && (i = "" + u), o.key !== void 0 && (i = "" + o.key), "key" in o) {
|
|
13
|
+
u = {};
|
|
14
|
+
for (var c in o)
|
|
15
|
+
c !== "key" && (u[c] = o[c]);
|
|
16
|
+
} else u = o;
|
|
17
|
+
return o = u.ref, {
|
|
18
|
+
$$typeof: s,
|
|
19
|
+
type: l,
|
|
20
|
+
key: i,
|
|
21
|
+
ref: o !== void 0 ? o : null,
|
|
22
|
+
props: u
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
return _.Fragment = d, _.jsx = f, _.jsxs = f, _;
|
|
26
|
+
}
|
|
27
|
+
var E = {};
|
|
28
|
+
var F;
|
|
29
|
+
function oe() {
|
|
30
|
+
return F || (F = 1, process.env.NODE_ENV !== "production" && (function() {
|
|
31
|
+
function s(e) {
|
|
32
|
+
if (e == null) return null;
|
|
33
|
+
if (typeof e == "function")
|
|
34
|
+
return e.$$typeof === Z ? null : e.displayName || e.name || null;
|
|
35
|
+
if (typeof e == "string") return e;
|
|
36
|
+
switch (e) {
|
|
37
|
+
case b:
|
|
38
|
+
return "Fragment";
|
|
39
|
+
case U:
|
|
40
|
+
return "Profiler";
|
|
41
|
+
case L:
|
|
42
|
+
return "StrictMode";
|
|
43
|
+
case G:
|
|
44
|
+
return "Suspense";
|
|
45
|
+
case X:
|
|
46
|
+
return "SuspenseList";
|
|
47
|
+
case H:
|
|
48
|
+
return "Activity";
|
|
49
|
+
}
|
|
50
|
+
if (typeof e == "object")
|
|
51
|
+
switch (typeof e.tag == "number" && console.error(
|
|
52
|
+
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
53
|
+
), e.$$typeof) {
|
|
54
|
+
case M:
|
|
55
|
+
return "Portal";
|
|
56
|
+
case V:
|
|
57
|
+
return e.displayName || "Context";
|
|
58
|
+
case J:
|
|
59
|
+
return (e._context.displayName || "Context") + ".Consumer";
|
|
60
|
+
case z:
|
|
61
|
+
var r = e.render;
|
|
62
|
+
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
|
|
63
|
+
case B:
|
|
64
|
+
return r = e.displayName || null, r !== null ? r : s(e.type) || "Memo";
|
|
65
|
+
case T:
|
|
66
|
+
r = e._payload, e = e._init;
|
|
67
|
+
try {
|
|
68
|
+
return s(e(r));
|
|
69
|
+
} catch {
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
return null;
|
|
73
|
+
}
|
|
74
|
+
function d(e) {
|
|
75
|
+
return "" + e;
|
|
76
|
+
}
|
|
77
|
+
function f(e) {
|
|
78
|
+
try {
|
|
79
|
+
d(e);
|
|
80
|
+
var r = !1;
|
|
81
|
+
} catch {
|
|
82
|
+
r = !0;
|
|
83
|
+
}
|
|
84
|
+
if (r) {
|
|
85
|
+
r = console;
|
|
86
|
+
var t = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
|
|
87
|
+
return t.call(
|
|
88
|
+
r,
|
|
89
|
+
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
|
|
90
|
+
n
|
|
91
|
+
), d(e);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
function l(e) {
|
|
95
|
+
if (e === b) return "<>";
|
|
96
|
+
if (typeof e == "object" && e !== null && e.$$typeof === T)
|
|
97
|
+
return "<...>";
|
|
98
|
+
try {
|
|
99
|
+
var r = s(e);
|
|
100
|
+
return r ? "<" + r + ">" : "<...>";
|
|
101
|
+
} catch {
|
|
102
|
+
return "<...>";
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
function o() {
|
|
106
|
+
var e = k.A;
|
|
107
|
+
return e === null ? null : e.getOwner();
|
|
108
|
+
}
|
|
109
|
+
function u() {
|
|
110
|
+
return Error("react-stack-top-frame");
|
|
111
|
+
}
|
|
112
|
+
function i(e) {
|
|
113
|
+
if (w.call(e, "key")) {
|
|
114
|
+
var r = Object.getOwnPropertyDescriptor(e, "key").get;
|
|
115
|
+
if (r && r.isReactWarning) return !1;
|
|
116
|
+
}
|
|
117
|
+
return e.key !== void 0;
|
|
118
|
+
}
|
|
119
|
+
function c(e, r) {
|
|
120
|
+
function t() {
|
|
121
|
+
y || (y = !0, console.error(
|
|
122
|
+
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
|
|
123
|
+
r
|
|
124
|
+
));
|
|
125
|
+
}
|
|
126
|
+
t.isReactWarning = !0, Object.defineProperty(e, "key", {
|
|
127
|
+
get: t,
|
|
128
|
+
configurable: !0
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
function D() {
|
|
132
|
+
var e = s(this.type);
|
|
133
|
+
return N[e] || (N[e] = !0, console.error(
|
|
134
|
+
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
135
|
+
)), e = this.props.ref, e !== void 0 ? e : null;
|
|
136
|
+
}
|
|
137
|
+
function q(e, r, t, n, p, x) {
|
|
138
|
+
var a = t.ref;
|
|
139
|
+
return e = {
|
|
140
|
+
$$typeof: j,
|
|
141
|
+
type: e,
|
|
142
|
+
key: r,
|
|
143
|
+
props: t,
|
|
144
|
+
_owner: n
|
|
145
|
+
}, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
|
|
146
|
+
enumerable: !1,
|
|
147
|
+
get: D
|
|
148
|
+
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
|
|
149
|
+
configurable: !1,
|
|
150
|
+
enumerable: !1,
|
|
151
|
+
writable: !0,
|
|
152
|
+
value: 0
|
|
153
|
+
}), Object.defineProperty(e, "_debugInfo", {
|
|
154
|
+
configurable: !1,
|
|
155
|
+
enumerable: !1,
|
|
156
|
+
writable: !0,
|
|
157
|
+
value: null
|
|
158
|
+
}), Object.defineProperty(e, "_debugStack", {
|
|
159
|
+
configurable: !1,
|
|
160
|
+
enumerable: !1,
|
|
161
|
+
writable: !0,
|
|
162
|
+
value: p
|
|
163
|
+
}), Object.defineProperty(e, "_debugTask", {
|
|
164
|
+
configurable: !1,
|
|
165
|
+
enumerable: !1,
|
|
166
|
+
writable: !0,
|
|
167
|
+
value: x
|
|
168
|
+
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
|
|
169
|
+
}
|
|
170
|
+
function g(e, r, t, n, p, x) {
|
|
171
|
+
var a = r.children;
|
|
172
|
+
if (a !== void 0)
|
|
173
|
+
if (n)
|
|
174
|
+
if (Q(a)) {
|
|
175
|
+
for (n = 0; n < a.length; n++)
|
|
176
|
+
h(a[n]);
|
|
177
|
+
Object.freeze && Object.freeze(a);
|
|
178
|
+
} else
|
|
179
|
+
console.error(
|
|
180
|
+
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
181
|
+
);
|
|
182
|
+
else h(a);
|
|
183
|
+
if (w.call(r, "key")) {
|
|
184
|
+
a = s(e);
|
|
185
|
+
var m = Object.keys(r).filter(function(K) {
|
|
186
|
+
return K !== "key";
|
|
187
|
+
});
|
|
188
|
+
n = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", I[a + n] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
189
|
+
`A props object containing a "key" prop is being spread into JSX:
|
|
190
|
+
let props = %s;
|
|
191
|
+
<%s {...props} />
|
|
192
|
+
React keys must be passed directly to JSX without using spread:
|
|
193
|
+
let props = %s;
|
|
194
|
+
<%s key={someKey} {...props} />`,
|
|
195
|
+
n,
|
|
196
|
+
a,
|
|
197
|
+
m,
|
|
198
|
+
a
|
|
199
|
+
), I[a + n] = !0);
|
|
200
|
+
}
|
|
201
|
+
if (a = null, t !== void 0 && (f(t), a = "" + t), i(r) && (f(r.key), a = "" + r.key), "key" in r) {
|
|
202
|
+
t = {};
|
|
203
|
+
for (var A in r)
|
|
204
|
+
A !== "key" && (t[A] = r[A]);
|
|
205
|
+
} else t = r;
|
|
206
|
+
return a && c(
|
|
207
|
+
t,
|
|
208
|
+
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
|
|
209
|
+
), q(
|
|
210
|
+
e,
|
|
211
|
+
a,
|
|
212
|
+
t,
|
|
213
|
+
o(),
|
|
214
|
+
p,
|
|
215
|
+
x
|
|
216
|
+
);
|
|
217
|
+
}
|
|
218
|
+
function h(e) {
|
|
219
|
+
S(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === T && (e._payload.status === "fulfilled" ? S(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
|
|
220
|
+
}
|
|
221
|
+
function S(e) {
|
|
222
|
+
return typeof e == "object" && e !== null && e.$$typeof === j;
|
|
223
|
+
}
|
|
224
|
+
var R = ee, j = /* @__PURE__ */ Symbol.for("react.transitional.element"), M = /* @__PURE__ */ Symbol.for("react.portal"), b = /* @__PURE__ */ Symbol.for("react.fragment"), L = /* @__PURE__ */ Symbol.for("react.strict_mode"), U = /* @__PURE__ */ Symbol.for("react.profiler"), J = /* @__PURE__ */ Symbol.for("react.consumer"), V = /* @__PURE__ */ Symbol.for("react.context"), z = /* @__PURE__ */ Symbol.for("react.forward_ref"), G = /* @__PURE__ */ Symbol.for("react.suspense"), X = /* @__PURE__ */ Symbol.for("react.suspense_list"), B = /* @__PURE__ */ Symbol.for("react.memo"), T = /* @__PURE__ */ Symbol.for("react.lazy"), H = /* @__PURE__ */ Symbol.for("react.activity"), Z = /* @__PURE__ */ Symbol.for("react.client.reference"), k = R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, w = Object.prototype.hasOwnProperty, Q = Array.isArray, O = console.createTask ? console.createTask : function() {
|
|
225
|
+
return null;
|
|
226
|
+
};
|
|
227
|
+
R = {
|
|
228
|
+
react_stack_bottom_frame: function(e) {
|
|
229
|
+
return e();
|
|
230
|
+
}
|
|
231
|
+
};
|
|
232
|
+
var y, N = {}, C = R.react_stack_bottom_frame.bind(
|
|
233
|
+
R,
|
|
234
|
+
u
|
|
235
|
+
)(), Y = O(l(u)), I = {};
|
|
236
|
+
E.Fragment = b, E.jsx = function(e, r, t) {
|
|
237
|
+
var n = 1e4 > k.recentlyCreatedOwnerStacks++;
|
|
238
|
+
return g(
|
|
239
|
+
e,
|
|
240
|
+
r,
|
|
241
|
+
t,
|
|
242
|
+
!1,
|
|
243
|
+
n ? Error("react-stack-top-frame") : C,
|
|
244
|
+
n ? O(l(e)) : Y
|
|
245
|
+
);
|
|
246
|
+
}, E.jsxs = function(e, r, t) {
|
|
247
|
+
var n = 1e4 > k.recentlyCreatedOwnerStacks++;
|
|
248
|
+
return g(
|
|
249
|
+
e,
|
|
250
|
+
r,
|
|
251
|
+
t,
|
|
252
|
+
!0,
|
|
253
|
+
n ? Error("react-stack-top-frame") : C,
|
|
254
|
+
n ? O(l(e)) : Y
|
|
255
|
+
);
|
|
256
|
+
};
|
|
257
|
+
})()), E;
|
|
258
|
+
}
|
|
259
|
+
var W;
|
|
260
|
+
function se() {
|
|
261
|
+
return W || (W = 1, process.env.NODE_ENV === "production" ? v.exports = ae() : v.exports = oe()), v.exports;
|
|
262
|
+
}
|
|
263
|
+
var P = se();
|
|
264
|
+
function ue(s) {
|
|
265
|
+
return /* @__PURE__ */ P.jsx(
|
|
266
|
+
re,
|
|
267
|
+
{
|
|
268
|
+
variant: "bordered",
|
|
269
|
+
radius: "sm",
|
|
270
|
+
labelPlacement: "outside",
|
|
271
|
+
placeholder: "Type here",
|
|
272
|
+
validationBehavior: "aria",
|
|
273
|
+
...s,
|
|
274
|
+
classNames: {
|
|
275
|
+
...s.classNames,
|
|
276
|
+
inputWrapper: te("bg-white dark:bg-default", [s.classNames?.inputWrapper])
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
);
|
|
280
|
+
}
|
|
281
|
+
function fe(s) {
|
|
282
|
+
const { control: d, name: f, rules: l = {}, ...o } = s, u = {
|
|
283
|
+
...l,
|
|
284
|
+
...o.isRequired && !l?.required ? { required: "This field is required" } : {}
|
|
285
|
+
};
|
|
286
|
+
return /* @__PURE__ */ P.jsx(
|
|
287
|
+
ne,
|
|
288
|
+
{
|
|
289
|
+
control: d,
|
|
290
|
+
name: f,
|
|
291
|
+
rules: u,
|
|
292
|
+
render: ({ field: i, fieldState: c }) => /* @__PURE__ */ P.jsx(
|
|
293
|
+
ue,
|
|
294
|
+
{
|
|
295
|
+
...i,
|
|
296
|
+
...o,
|
|
297
|
+
value: i.value ?? "",
|
|
298
|
+
isInvalid: !!c.error,
|
|
299
|
+
errorMessage: c.error?.message
|
|
300
|
+
}
|
|
301
|
+
)
|
|
302
|
+
}
|
|
303
|
+
);
|
|
304
|
+
}
|
|
305
|
+
export {
|
|
306
|
+
ue as InputText,
|
|
307
|
+
fe as InputTextWithRHFControl
|
|
308
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputText.d.ts","sourceRoot":"","sources":["../../src/input-text/InputText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,UAAU,EAAM,MAAM,eAAe,CAAC;AAE3D,iBAAS,SAAS,CAAC,KAAK,EAAE,UAAU,2CAenC;AAED,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { InputProps } from "@heroui/react";
|
|
2
|
+
import { type Control, type FieldValues, type Path, type RegisterOptions } from "react-hook-form";
|
|
3
|
+
export type InputTextWithRHFControlProps<T extends FieldValues> = InputProps & {
|
|
4
|
+
control: Control<T>;
|
|
5
|
+
name: Path<T>;
|
|
6
|
+
rules?: RegisterOptions<T, Path<T>>;
|
|
7
|
+
};
|
|
8
|
+
declare function InputTextWithRHFControl<T extends FieldValues>(props: InputTextWithRHFControlProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export default InputTextWithRHFControl;
|
|
10
|
+
//# sourceMappingURL=InputTextWithRHFControl.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputTextWithRHFControl.d.ts","sourceRoot":"","sources":["../../src/input-text/InputTextWithRHFControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAEL,KAAK,OAAO,EACZ,KAAK,WAAW,EAChB,KAAK,IAAI,EACT,KAAK,eAAe,EACrB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,MAAM,4BAA4B,CAAC,CAAC,SAAS,WAAW,IAAI,UAAU,GAAG;IAC7E,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACpB,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACd,KAAK,CAAC,EAAE,eAAe,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;CACrC,CAAC;AAEF,iBAAS,uBAAuB,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,EAAE,4BAA4B,CAAC,CAAC,CAAC,2CAwB7F;AAED,eAAe,uBAAuB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/input-text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAE/E,YAAY,EAAE,4BAA4B,EAAE,MAAM,2BAA2B,CAAC"}
|
package/package.json
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@byhandi/heroui-kit",
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"description": "Opinionated HeroUI components",
|
|
5
|
+
"main": "dist/index.cjs.js",
|
|
6
|
+
"module": "dist/index.es.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"files": [
|
|
9
|
+
"dist"
|
|
10
|
+
],
|
|
11
|
+
"sideEffects": false,
|
|
12
|
+
"scripts": {
|
|
13
|
+
"dev": "vite",
|
|
14
|
+
"build": "vite build && tsc -p tsconfig.build.json",
|
|
15
|
+
"lint": "eslint .",
|
|
16
|
+
"preview": "vite preview"
|
|
17
|
+
},
|
|
18
|
+
"peerDependencies": {
|
|
19
|
+
"@heroui/react": "^2.8.7",
|
|
20
|
+
"@hookform/resolvers": "^5.2.2",
|
|
21
|
+
"framer-motion": ">=11.5.6 || >=12.0.0",
|
|
22
|
+
"react": "^19.2.0",
|
|
23
|
+
"react-dom": "^19.2.0",
|
|
24
|
+
"react-hook-form": "^7.71.1"
|
|
25
|
+
},
|
|
26
|
+
"devDependencies": {
|
|
27
|
+
"@eslint/js": "^9.39.1",
|
|
28
|
+
"@types/node": "^24.10.1",
|
|
29
|
+
"@types/react": "^19.2.5",
|
|
30
|
+
"@types/react-dom": "^19.2.3",
|
|
31
|
+
"@vitejs/plugin-react": "^5.1.1",
|
|
32
|
+
"eslint": "^9.39.1",
|
|
33
|
+
"eslint-plugin-react-hooks": "^7.0.1",
|
|
34
|
+
"eslint-plugin-react-refresh": "^0.4.24",
|
|
35
|
+
"globals": "^16.5.0",
|
|
36
|
+
"typescript": "~5.9.3",
|
|
37
|
+
"typescript-eslint": "^8.46.4",
|
|
38
|
+
"vite": "^7.2.4"
|
|
39
|
+
}
|
|
40
|
+
}
|