@manhphi1309/input-group 0.2.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.
Files changed (5) hide show
  1. package/dist/index.cjs +86 -0
  2. package/dist/index.d.cts +43 -0
  3. package/dist/index.d.mts +43 -0
  4. package/dist/index.mjs +79 -0
  5. package/package.json +36 -0
package/dist/index.cjs ADDED
@@ -0,0 +1,86 @@
1
+ "use client";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ //#endregion
4
+ require("react");
5
+ let class_variance_authority = require("class-variance-authority");
6
+ let _manhphi1309_utils = require("@manhphi1309/utils");
7
+ let _manhphi1309_button = require("@manhphi1309/button");
8
+ let _manhphi1309_input = require("@manhphi1309/input");
9
+ let _manhphi1309_textarea = require("@manhphi1309/textarea");
10
+ let react_jsx_runtime = require("react/jsx-runtime");
11
+ //#region src/index.tsx
12
+ function InputGroup({ className, ...props }) {
13
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
14
+ "data-slot": "input-group",
15
+ role: "group",
16
+ className: (0, _manhphi1309_utils.cn)("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
17
+ ...props
18
+ });
19
+ }
20
+ const inputGroupAddonVariants = (0, class_variance_authority.cva)("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
21
+ variants: { align: {
22
+ "inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
23
+ "inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
24
+ "block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
25
+ "block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
26
+ } },
27
+ defaultVariants: { align: "inline-start" }
28
+ });
29
+ function InputGroupAddon({ className, align = "inline-start", ...props }) {
30
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
31
+ role: "group",
32
+ "data-slot": "input-group-addon",
33
+ "data-align": align,
34
+ className: (0, _manhphi1309_utils.cn)(inputGroupAddonVariants({ align }), className),
35
+ onClick: (e) => {
36
+ if (e.target.closest("button")) return;
37
+ e.currentTarget.parentElement?.querySelector("input")?.focus();
38
+ },
39
+ ...props
40
+ });
41
+ }
42
+ const inputGroupButtonVariants = (0, class_variance_authority.cva)("flex items-center gap-2 text-sm shadow-none", {
43
+ variants: { size: {
44
+ xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
45
+ sm: "",
46
+ "icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
47
+ "icon-sm": "size-8 p-0 has-[>svg]:p-0"
48
+ } },
49
+ defaultVariants: { size: "xs" }
50
+ });
51
+ function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
52
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_manhphi1309_button.Button, {
53
+ type,
54
+ "data-size": size,
55
+ variant,
56
+ className: (0, _manhphi1309_utils.cn)(inputGroupButtonVariants({ size }), className),
57
+ ...props
58
+ });
59
+ }
60
+ function InputGroupText({ className, ...props }) {
61
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
62
+ className: (0, _manhphi1309_utils.cn)("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
63
+ ...props
64
+ });
65
+ }
66
+ function InputGroupInput({ className, ...props }) {
67
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_manhphi1309_input.Input, {
68
+ "data-slot": "input-group-control",
69
+ className: (0, _manhphi1309_utils.cn)("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
70
+ ...props
71
+ });
72
+ }
73
+ function InputGroupTextarea({ className, ...props }) {
74
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_manhphi1309_textarea.Textarea, {
75
+ "data-slot": "input-group-control",
76
+ className: (0, _manhphi1309_utils.cn)("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
77
+ ...props
78
+ });
79
+ }
80
+ //#endregion
81
+ exports.InputGroup = InputGroup;
82
+ exports.InputGroupAddon = InputGroupAddon;
83
+ exports.InputGroupButton = InputGroupButton;
84
+ exports.InputGroupInput = InputGroupInput;
85
+ exports.InputGroupText = InputGroupText;
86
+ exports.InputGroupTextarea = InputGroupTextarea;
package/dist/index.d.cts ADDED
@@ -0,0 +1,43 @@
1
+ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
2
+ import * as _$class_variance_authority_types0 from "class-variance-authority/types";
3
+ import * as React from "react";
4
+ import { VariantProps } from "class-variance-authority";
5
+ import { Button } from "@manhphi1309/button";
6
+
7
+ //#region src/index.d.ts
8
+ declare function InputGroup({
9
+ className,
10
+ ...props
11
+ }: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
12
+ declare const inputGroupAddonVariants: (props?: ({
13
+ align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
14
+ } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
15
+ declare function InputGroupAddon({
16
+ className,
17
+ align,
18
+ ...props
19
+ }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): _$react_jsx_runtime0.JSX.Element;
20
+ declare const inputGroupButtonVariants: (props?: ({
21
+ size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
22
+ } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
23
+ declare function InputGroupButton({
24
+ className,
25
+ type,
26
+ variant,
27
+ size,
28
+ ...props
29
+ }: Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): _$react_jsx_runtime0.JSX.Element;
30
+ declare function InputGroupText({
31
+ className,
32
+ ...props
33
+ }: React.ComponentProps<"span">): _$react_jsx_runtime0.JSX.Element;
34
+ declare function InputGroupInput({
35
+ className,
36
+ ...props
37
+ }: React.ComponentProps<"input">): _$react_jsx_runtime0.JSX.Element;
38
+ declare function InputGroupTextarea({
39
+ className,
40
+ ...props
41
+ }: React.ComponentProps<"textarea">): _$react_jsx_runtime0.JSX.Element;
42
+ //#endregion
43
+ export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
package/dist/index.d.mts ADDED
@@ -0,0 +1,43 @@
1
+ import * as React from "react";
2
+ import { VariantProps } from "class-variance-authority";
3
+ import { Button } from "@manhphi1309/button";
4
+ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
5
+ import * as _$class_variance_authority_types0 from "class-variance-authority/types";
6
+
7
+ //#region src/index.d.ts
8
+ declare function InputGroup({
9
+ className,
10
+ ...props
11
+ }: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
12
+ declare const inputGroupAddonVariants: (props?: ({
13
+ align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
14
+ } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
15
+ declare function InputGroupAddon({
16
+ className,
17
+ align,
18
+ ...props
19
+ }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): _$react_jsx_runtime0.JSX.Element;
20
+ declare const inputGroupButtonVariants: (props?: ({
21
+ size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
22
+ } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
23
+ declare function InputGroupButton({
24
+ className,
25
+ type,
26
+ variant,
27
+ size,
28
+ ...props
29
+ }: Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): _$react_jsx_runtime0.JSX.Element;
30
+ declare function InputGroupText({
31
+ className,
32
+ ...props
33
+ }: React.ComponentProps<"span">): _$react_jsx_runtime0.JSX.Element;
34
+ declare function InputGroupInput({
35
+ className,
36
+ ...props
37
+ }: React.ComponentProps<"input">): _$react_jsx_runtime0.JSX.Element;
38
+ declare function InputGroupTextarea({
39
+ className,
40
+ ...props
41
+ }: React.ComponentProps<"textarea">): _$react_jsx_runtime0.JSX.Element;
42
+ //#endregion
43
+ export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
package/dist/index.mjs ADDED
@@ -0,0 +1,79 @@
1
+ "use client";
2
+ import "react";
3
+ import { cva } from "class-variance-authority";
4
+ import { cn } from "@manhphi1309/utils";
5
+ import { Button } from "@manhphi1309/button";
6
+ import { Input } from "@manhphi1309/input";
7
+ import { Textarea } from "@manhphi1309/textarea";
8
+ import { jsx } from "react/jsx-runtime";
9
+ //#region src/index.tsx
10
+ function InputGroup({ className, ...props }) {
11
+ return /* @__PURE__ */ jsx("div", {
12
+ "data-slot": "input-group",
13
+ role: "group",
14
+ className: cn("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
15
+ ...props
16
+ });
17
+ }
18
+ const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
19
+ variants: { align: {
20
+ "inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
21
+ "inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
22
+ "block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
23
+ "block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
24
+ } },
25
+ defaultVariants: { align: "inline-start" }
26
+ });
27
+ function InputGroupAddon({ className, align = "inline-start", ...props }) {
28
+ return /* @__PURE__ */ jsx("div", {
29
+ role: "group",
30
+ "data-slot": "input-group-addon",
31
+ "data-align": align,
32
+ className: cn(inputGroupAddonVariants({ align }), className),
33
+ onClick: (e) => {
34
+ if (e.target.closest("button")) return;
35
+ e.currentTarget.parentElement?.querySelector("input")?.focus();
36
+ },
37
+ ...props
38
+ });
39
+ }
40
+ const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
41
+ variants: { size: {
42
+ xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
43
+ sm: "",
44
+ "icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
45
+ "icon-sm": "size-8 p-0 has-[>svg]:p-0"
46
+ } },
47
+ defaultVariants: { size: "xs" }
48
+ });
49
+ function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
50
+ return /* @__PURE__ */ jsx(Button, {
51
+ type,
52
+ "data-size": size,
53
+ variant,
54
+ className: cn(inputGroupButtonVariants({ size }), className),
55
+ ...props
56
+ });
57
+ }
58
+ function InputGroupText({ className, ...props }) {
59
+ return /* @__PURE__ */ jsx("span", {
60
+ className: cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
61
+ ...props
62
+ });
63
+ }
64
+ function InputGroupInput({ className, ...props }) {
65
+ return /* @__PURE__ */ jsx(Input, {
66
+ "data-slot": "input-group-control",
67
+ className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
68
+ ...props
69
+ });
70
+ }
71
+ function InputGroupTextarea({ className, ...props }) {
72
+ return /* @__PURE__ */ jsx(Textarea, {
73
+ "data-slot": "input-group-control",
74
+ className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
75
+ ...props
76
+ });
77
+ }
78
+ //#endregion
79
+ export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
package/package.json ADDED
@@ -0,0 +1,36 @@
1
+ {
2
+ "name": "@manhphi1309/input-group",
3
+ "version": "0.2.1",
4
+ "main": "./dist/index.cjs",
5
+ "module": "./dist/index.mjs",
6
+ "types": "./dist/index.d.ts",
7
+ "exports": {
8
+ ".": {
9
+ "types": "./dist/index.d.ts",
10
+ "import": "./dist/index.mjs",
11
+ "require": "./dist/index.cjs"
12
+ }
13
+ },
14
+ "files": [
15
+ "dist"
16
+ ],
17
+ "scripts": {
18
+ "build": "tsdown"
19
+ },
20
+ "peerDependencies": {
21
+ "react": "^19.0.0",
22
+ "react-dom": "^19.0.0"
23
+ },
24
+ "dependencies": {
25
+ "@manhphi1309/button": "*",
26
+ "@manhphi1309/field": "*",
27
+ "@manhphi1309/input": "*",
28
+ "@manhphi1309/textarea": "*",
29
+ "@manhphi1309/utils": "*",
30
+ "@storybook/nextjs-vite": "*",
31
+ "class-variance-authority": "^0.7.1",
32
+ "clsx": "^2.1.1",
33
+ "lucide-react": "^1.17.0",
34
+ "tailwind-merge": "^3.6.0"
35
+ }
36
+ }