@byhandi/heroui-kit 0.1.1 → 0.1.2

package/README.md

@@ -16,14 +16,34 @@ npm install @byhandi/heroui-kit
 
 Ensure you have the following peer dependencies installed in your project:
 
-- `react` >= 19
-- `react-dom` >= 19
+- `react` >= 18
+- `react-dom` >= 18
 - `@heroui/react` >= 2.8
 - `framer-motion` >= 11
 - `react-hook-form` >= 7
+- `@hookform/resolvers` >= 3
 
 ## Components
 
+### Button
+
+A customized wrapper around HeroUI's `Button` component.
+
+**Default Props:**
+
+- `color`: "primary"
+- `type`: "button"
+
+**Usage:**
+
+```tsx
+import { Button } from "@byhandi/heroui-kit";
+
+function App() {
+  return <Button onPress={() => console.log("Clicked")}>Click Me</Button>;
+}
+```
+
 ### InputText
 
 A styled wrapper around HeroUI's `Input` component.
@@ -47,13 +67,6 @@ function App() {
 
 ### InputTextWithRHFControl
 
-A wrapper component that integrates `InputText` with `react-hook-form`'s `Controller`. It automatically handles:
-
-- State management via `control`
-- Error states (`isInvalid`)
-- Error messages (`errorMessage`)
-- Required validation (if `isRequired` prop is true)
-
 **Usage:**
 
 ```tsx
@@ -80,6 +93,178 @@ function App() {
 }
 ```
 
+### InputNumber
+
+A styled wrapper around HeroUI's `NumberInput`.
+
+**Default Props:**
+
+- `variant`: "bordered"
+- `labelPlacement`: "outside"
+
+**Usage:**
+
+```tsx
+import { InputNumber } from "@byhandi/heroui-kit";
+
+function App() {
+  return <InputNumber label="Age" />;
+}
+```
+
+### InputNumberWithRHFControl
+
+Wrapper for `InputNumber` with React Hook Form integration.
+
+**Usage:**
+
+```tsx
+<InputNumberWithRHFControl control={control} name="age" label="Age" />
+```
+
+### Textarea
+
+A styled wrapper around HeroUI's `Textarea`.
+
+**Default Props:**
+
+- `variant`: "bordered"
+- `labelPlacement`: "outside"
+
+**Usage:**
+
+```tsx
+import { Textarea } from "@byhandi/heroui-kit";
+
+function App() {
+  return <Textarea label="Description" />;
+}
+```
+
+### TextareaWithRHFControl
+
+Wrapper for `Textarea` with React Hook Form integration.
+
+**Usage:**
+
+```tsx
+<TextareaWithRHFControl control={control} name="description" label="Description" />
+```
+
+### Select
+
+A styled wrapper around HeroUI's `Select`.
+
+**Default Props:**
+
+- `variant`: "bordered"
+- `labelPlacement`: "outside"
+
+**Usage:**
+
+```tsx
+import { Select } from "@byhandi/heroui-kit";
+
+const options = [{ value: "1", label: "Option 1" }];
+
+function App() {
+  return <Select label="Choose" options={options} />;
+}
+```
+
+### SelectWithRHFControl
+
+Wrapper for `Select` with React Hook Form integration.
+
+**Usage:**
+
+```tsx
+<SelectWithRHFControl control={control} name="choice" label="Choose" options={options} />
+```
+
+### Autocomplete
+
+A styled wrapper around HeroUI's `Autocomplete`.
+
+**Default Props:**
+
+- `variant`: "bordered"
+- `labelPlacement`: "outside"
+
+**Usage:**
+
+```tsx
+import { Autocomplete } from "@byhandi/heroui-kit";
+
+const options = [{ value: "1", label: "Option 1" }];
+
+function App() {
+  return <Autocomplete label="Search" options={options} />;
+}
+```
+
+### AutocompleteWithRHFControl
+
+Wrapper for `Autocomplete` with React Hook Form integration.
+
+**Usage:**
+
+```tsx
+<AutocompleteWithRHFControl control={control} name="search" label="Search" options={options} />
+```
+
+### Checkbox
+
+A styled wrapper around HeroUI's `Checkbox`.
+
+**Usage:**
+
+```tsx
+import { Checkbox } from "@byhandi/heroui-kit";
+
+function App() {
+  return <Checkbox>Accept terms</Checkbox>;
+}
+```
+
+### CheckboxWithRHFControl
+
+Wrapper for `Checkbox` with React Hook Form integration.
+
+**Usage:**
+
+```tsx
+<CheckboxWithRHFControl control={control} name="terms">
+  Accept terms
+</CheckboxWithRHFControl>
+```
+
+### CheckboxGroup
+
+A styled wrapper around HeroUI's `CheckboxGroup`.
+
+**Usage:**
+
+```tsx
+import { CheckboxGroup } from "@byhandi/heroui-kit";
+
+const options = [{ value: "1", label: "Option 1" }];
+
+function App() {
+  return <CheckboxGroup label="Options" options={options} />;
+}
+```
+
+### CheckboxGroupWithRHFControl
+
+Wrapper for `CheckboxGroup` with React Hook Form integration.
+
+**Usage:**
+
+```tsx
+<CheckboxGroupWithRHFControl control={control} name="options" label="Options" options={options} />
+```
+
 ## Development
 
 This project uses Vite for development and bundling.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@byhandi/heroui-kit",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Opinionated HeroUI components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -16,12 +16,12 @@
     "preview": "vite preview"
   },
   "peerDependencies": {
-    "@heroui/react": "^2.8.7",
-    "@hookform/resolvers": "^5.2.2",
+    "@heroui/react": ">=2.8",
+    "@hookform/resolvers": ">=3",
     "framer-motion": ">=11.5.6 || >=12.0.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-hook-form": "^7.71.1"
+    "react": ">=18",
+    "react-dom": ">=18",
+    "react-hook-form": ">=7"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",