@manhphi1309/input-group 0.2.1 → 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/dist/index.cjs +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.mjs +1 -1
- 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
|
+
```
|
package/dist/index.cjs
CHANGED
|
@@ -8,7 +8,7 @@ let _manhphi1309_button = require("@manhphi1309/button");
|
|
|
8
8
|
let _manhphi1309_input = require("@manhphi1309/input");
|
|
9
9
|
let _manhphi1309_textarea = require("@manhphi1309/textarea");
|
|
10
10
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
11
|
-
//#region
|
|
11
|
+
//#region index.tsx
|
|
12
12
|
function InputGroup({ className, ...props }) {
|
|
13
13
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
14
14
|
"data-slot": "input-group",
|
package/dist/index.d.cts
CHANGED
package/dist/index.d.mts
CHANGED
|
@@ -4,7 +4,7 @@ import { Button } from "@manhphi1309/button";
|
|
|
4
4
|
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
5
5
|
import * as _$class_variance_authority_types0 from "class-variance-authority/types";
|
|
6
6
|
|
|
7
|
-
//#region
|
|
7
|
+
//#region index.d.ts
|
|
8
8
|
declare function InputGroup({
|
|
9
9
|
className,
|
|
10
10
|
...props
|
package/dist/index.mjs
CHANGED
|
@@ -6,7 +6,7 @@ import { Button } from "@manhphi1309/button";
|
|
|
6
6
|
import { Input } from "@manhphi1309/input";
|
|
7
7
|
import { Textarea } from "@manhphi1309/textarea";
|
|
8
8
|
import { jsx } from "react/jsx-runtime";
|
|
9
|
-
//#region
|
|
9
|
+
//#region index.tsx
|
|
10
10
|
function InputGroup({ className, ...props }) {
|
|
11
11
|
return /* @__PURE__ */ jsx("div", {
|
|
12
12
|
"data-slot": "input-group",
|