@manhphi1309/input-group 0.2.2 → 0.2.3
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 +50 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# @manhphi1309/input-group
|
|
2
|
+
|
|
3
|
+
A set of components for building complex input layouts with addons, buttons, and text inline.
|
|
4
|
+
|
|
5
|
+
## Subcomponents
|
|
6
|
+
This package provides the following components:
|
|
7
|
+
- `InputGroup`
|
|
8
|
+
- `InputGroupAddon`
|
|
9
|
+
- `InputGroupButton`
|
|
10
|
+
- `InputGroupText`
|
|
11
|
+
- `InputGroupInput`
|
|
12
|
+
- `InputGroupTextarea`
|
|
13
|
+
|
|
14
|
+
## Dependencies
|
|
15
|
+
This package relies on:
|
|
16
|
+
- `@manhphi1309/button`
|
|
17
|
+
- `@manhphi1309/field`
|
|
18
|
+
- `@manhphi1309/input`
|
|
19
|
+
- `@manhphi1309/textarea`
|
|
20
|
+
- `@manhphi1309/utils`
|
|
21
|
+
- `class-variance-authority`
|
|
22
|
+
- `clsx`
|
|
23
|
+
- `lucide-react`
|
|
24
|
+
- `tailwind-merge`
|
|
25
|
+
|
|
26
|
+
## Installation
|
|
27
|
+
```bash
|
|
28
|
+
npm install @manhphi1309/input-group
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Usage Example
|
|
32
|
+
```tsx
|
|
33
|
+
import {
|
|
34
|
+
InputGroup,
|
|
35
|
+
InputGroupAddon,
|
|
36
|
+
InputGroupInput,
|
|
37
|
+
InputGroupText
|
|
38
|
+
} from "@manhphi1309/input-group";
|
|
39
|
+
|
|
40
|
+
export default function Example() {
|
|
41
|
+
return (
|
|
42
|
+
<InputGroup>
|
|
43
|
+
<InputGroupAddon align="inline-start">
|
|
44
|
+
<InputGroupText>https://</InputGroupText>
|
|
45
|
+
</InputGroupAddon>
|
|
46
|
+
<InputGroupInput placeholder="example.com" />
|
|
47
|
+
</InputGroup>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
```
|