@c-rex/ui 0.3.0-build.42 → 0.3.0-build.49
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/package.json +7 -2
- package/src/badge.tsx +37 -37
- package/src/command.tsx +98 -94
- package/src/dropdown-hover-item.tsx +16 -19
- package/src/input-group.tsx +158 -162
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@c-rex/ui",
|
|
3
|
-
"version": "0.3.0-build.
|
|
3
|
+
"version": "0.3.0-build.49",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"files": [
|
|
6
6
|
"src"
|
|
@@ -153,7 +153,12 @@
|
|
|
153
153
|
},
|
|
154
154
|
"scripts": {
|
|
155
155
|
"lint": "eslint .",
|
|
156
|
-
"lint:fix": "eslint . --fix"
|
|
156
|
+
"lint:fix": "eslint . --fix",
|
|
157
|
+
"check-types": "tsc --noEmit",
|
|
158
|
+
"test": "echo \u0027No tests\u0027",
|
|
159
|
+
"build": "echo \u0027No build script\u0027",
|
|
160
|
+
"format:check": "prettier --check .",
|
|
161
|
+
"validate": "npm run lint \u0026\u0026 npm run check-types \u0026\u0026 npm run test \u0026\u0026 npm run build"
|
|
157
162
|
},
|
|
158
163
|
"devDependencies": {
|
|
159
164
|
"@c-rex/eslint-config": "*",
|
package/src/badge.tsx
CHANGED
|
@@ -1,46 +1,46 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
import { Slot } from "@radix-ui/react-slot"
|
|
3
|
-
import { cva, type VariantProps } from "class-variance-authority"
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
3
|
+
import { cva, type VariantProps } from "class-variance-authority";
|
|
4
4
|
|
|
5
|
-
import { cn } from "@c-rex/utils"
|
|
5
|
+
import { cn } from "@c-rex/utils";
|
|
6
6
|
|
|
7
7
|
const badgeVariants = cva(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
)
|
|
8
|
+
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
|
9
|
+
{
|
|
10
|
+
variants: {
|
|
11
|
+
variant: {
|
|
12
|
+
default:
|
|
13
|
+
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
|
14
|
+
secondary:
|
|
15
|
+
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
|
16
|
+
destructive:
|
|
17
|
+
"border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
18
|
+
outline:
|
|
19
|
+
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
defaultVariants: {
|
|
23
|
+
variant: "default",
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
);
|
|
27
27
|
|
|
28
28
|
function Badge({
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
29
|
+
className,
|
|
30
|
+
variant,
|
|
31
|
+
asChild = false,
|
|
32
|
+
...props
|
|
33
33
|
}: React.ComponentProps<"span"> &
|
|
34
|
-
|
|
35
|
-
|
|
34
|
+
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
|
35
|
+
const Comp = asChild ? Slot : "span";
|
|
36
36
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
37
|
+
return (
|
|
38
|
+
<Comp
|
|
39
|
+
data-slot="badge"
|
|
40
|
+
className={cn(badgeVariants({ variant }), className)}
|
|
41
|
+
{...props}
|
|
42
|
+
/>
|
|
43
|
+
);
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
export { Badge, badgeVariants }
|
|
46
|
+
export { Badge, badgeVariants };
|
package/src/command.tsx
CHANGED
|
@@ -7,145 +7,149 @@ import { cn } from "@c-rex/utils";
|
|
|
7
7
|
import { Dialog, DialogContent } from "./dialog";
|
|
8
8
|
|
|
9
9
|
const Command = React.forwardRef<
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
React.ElementRef<typeof CommandPrimitive>,
|
|
11
|
+
React.ComponentPropsWithoutRef<typeof CommandPrimitive>
|
|
12
12
|
>(({ className, ...props }, ref) => (
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
13
|
+
<CommandPrimitive
|
|
14
|
+
ref={ref}
|
|
15
|
+
className={cn(
|
|
16
|
+
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
|
|
17
|
+
className,
|
|
18
|
+
)}
|
|
19
|
+
{...props}
|
|
20
|
+
/>
|
|
21
21
|
));
|
|
22
22
|
Command.displayName = CommandPrimitive.displayName;
|
|
23
23
|
|
|
24
24
|
const CommandDialog = ({ children, ...props }: DialogProps) => {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
25
|
+
return (
|
|
26
|
+
<Dialog {...props}>
|
|
27
|
+
<DialogContent className="overflow-hidden p-0">
|
|
28
|
+
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
|
|
29
|
+
{children}
|
|
30
|
+
</Command>
|
|
31
|
+
</DialogContent>
|
|
32
|
+
</Dialog>
|
|
33
|
+
);
|
|
34
34
|
};
|
|
35
35
|
|
|
36
36
|
const CommandInput = React.forwardRef<
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
37
|
+
React.ElementRef<typeof CommandPrimitive.Input>,
|
|
38
|
+
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
|
|
39
|
+
/** Rendered inside the input row, after the text field (e.g. an info button). */
|
|
40
|
+
trailing?: React.ReactNode;
|
|
41
|
+
}
|
|
42
|
+
>(({ className, trailing, ...props }, ref) => (
|
|
43
|
+
<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
|
|
44
|
+
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
|
|
45
|
+
<CommandPrimitive.Input
|
|
46
|
+
ref={ref}
|
|
47
|
+
className={cn(
|
|
48
|
+
"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
|
|
49
|
+
className,
|
|
50
|
+
)}
|
|
51
|
+
{...props}
|
|
52
|
+
/>
|
|
53
|
+
{trailing}
|
|
54
|
+
</div>
|
|
51
55
|
));
|
|
52
56
|
|
|
53
57
|
CommandInput.displayName = CommandPrimitive.Input.displayName;
|
|
54
58
|
|
|
55
59
|
const CommandList = React.forwardRef<
|
|
56
|
-
|
|
57
|
-
|
|
60
|
+
React.ElementRef<typeof CommandPrimitive.List>,
|
|
61
|
+
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
|
|
58
62
|
>(({ className, ...props }, ref) => (
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
63
|
+
<CommandPrimitive.List
|
|
64
|
+
ref={ref}
|
|
65
|
+
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
|
|
66
|
+
{...props}
|
|
67
|
+
/>
|
|
64
68
|
));
|
|
65
69
|
|
|
66
70
|
CommandList.displayName = CommandPrimitive.List.displayName;
|
|
67
71
|
|
|
68
72
|
const CommandEmpty = React.forwardRef<
|
|
69
|
-
|
|
70
|
-
|
|
73
|
+
React.ElementRef<typeof CommandPrimitive.Empty>,
|
|
74
|
+
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
|
|
71
75
|
>((props, ref) => (
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
76
|
+
<CommandPrimitive.Empty
|
|
77
|
+
ref={ref}
|
|
78
|
+
className="py-6 text-center text-sm"
|
|
79
|
+
{...props}
|
|
80
|
+
/>
|
|
77
81
|
));
|
|
78
82
|
|
|
79
83
|
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
|
|
80
84
|
|
|
81
85
|
const CommandGroup = React.forwardRef<
|
|
82
|
-
|
|
83
|
-
|
|
86
|
+
React.ElementRef<typeof CommandPrimitive.Group>,
|
|
87
|
+
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
|
|
84
88
|
>(({ className, ...props }, ref) => (
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
89
|
+
<CommandPrimitive.Group
|
|
90
|
+
ref={ref}
|
|
91
|
+
className={cn(
|
|
92
|
+
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
|
|
93
|
+
className,
|
|
94
|
+
)}
|
|
95
|
+
{...props}
|
|
96
|
+
/>
|
|
93
97
|
));
|
|
94
98
|
|
|
95
99
|
CommandGroup.displayName = CommandPrimitive.Group.displayName;
|
|
96
100
|
|
|
97
101
|
const CommandSeparator = React.forwardRef<
|
|
98
|
-
|
|
99
|
-
|
|
102
|
+
React.ElementRef<typeof CommandPrimitive.Separator>,
|
|
103
|
+
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
|
|
100
104
|
>(({ className, ...props }, ref) => (
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
105
|
+
<CommandPrimitive.Separator
|
|
106
|
+
ref={ref}
|
|
107
|
+
className={cn("-mx-1 h-px bg-border", className)}
|
|
108
|
+
{...props}
|
|
109
|
+
/>
|
|
106
110
|
));
|
|
107
111
|
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
|
|
108
112
|
|
|
109
113
|
const CommandItem = React.forwardRef<
|
|
110
|
-
|
|
111
|
-
|
|
114
|
+
React.ElementRef<typeof CommandPrimitive.Item>,
|
|
115
|
+
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
|
|
112
116
|
>(({ className, ...props }, ref) => (
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
117
|
+
<CommandPrimitive.Item
|
|
118
|
+
ref={ref}
|
|
119
|
+
className={cn(
|
|
120
|
+
"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
|
121
|
+
className,
|
|
122
|
+
)}
|
|
123
|
+
{...props}
|
|
124
|
+
/>
|
|
121
125
|
));
|
|
122
126
|
|
|
123
127
|
CommandItem.displayName = CommandPrimitive.Item.displayName;
|
|
124
128
|
|
|
125
129
|
const CommandShortcut = ({
|
|
126
|
-
|
|
127
|
-
|
|
130
|
+
className,
|
|
131
|
+
...props
|
|
128
132
|
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
133
|
+
return (
|
|
134
|
+
<span
|
|
135
|
+
className={cn(
|
|
136
|
+
"ml-auto text-xs tracking-widest text-muted-foreground",
|
|
137
|
+
className,
|
|
138
|
+
)}
|
|
139
|
+
{...props}
|
|
140
|
+
/>
|
|
141
|
+
);
|
|
138
142
|
};
|
|
139
143
|
CommandShortcut.displayName = "CommandShortcut";
|
|
140
144
|
|
|
141
145
|
export {
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
146
|
+
Command,
|
|
147
|
+
CommandDialog,
|
|
148
|
+
CommandInput,
|
|
149
|
+
CommandList,
|
|
150
|
+
CommandEmpty,
|
|
151
|
+
CommandGroup,
|
|
152
|
+
CommandItem,
|
|
153
|
+
CommandShortcut,
|
|
154
|
+
CommandSeparator,
|
|
151
155
|
};
|
|
@@ -1,27 +1,24 @@
|
|
|
1
|
-
import { cn } from "@c-rex/utils"
|
|
1
|
+
import { cn } from "@c-rex/utils";
|
|
2
2
|
|
|
3
3
|
interface DropdownHoverItemProps {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
label: React.ReactNode;
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
className?: string;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
export function DropdownHoverItem({
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
label,
|
|
11
|
+
children,
|
|
12
|
+
className,
|
|
13
13
|
}: DropdownHoverItemProps) {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
<div className="w-48 bg-white border rounded shadow-lg p-2 max-h-[30rem] overflow-auto">
|
|
21
|
-
{children}
|
|
22
|
-
</div>
|
|
23
|
-
|
|
24
|
-
</div>
|
|
14
|
+
return (
|
|
15
|
+
<div className={cn("relative inline-block group/dropdown", className)}>
|
|
16
|
+
{label}
|
|
17
|
+
<div className="hidden group-hover/dropdown:block absolute left-0 z-10 pt-2">
|
|
18
|
+
<div className="w-48 rounded border border-border bg-popover p-2 text-popover-foreground shadow-lg max-h-[30rem] overflow-auto">
|
|
19
|
+
{children}
|
|
25
20
|
</div>
|
|
26
|
-
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
);
|
|
27
24
|
}
|
package/src/input-group.tsx
CHANGED
|
@@ -1,192 +1,188 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
import { cva, type VariantProps } from "class-variance-authority"
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { cva, type VariantProps } from "class-variance-authority";
|
|
3
3
|
|
|
4
|
-
import { cn } from "@c-rex/utils"
|
|
5
|
-
import { Button } from "./button"
|
|
6
|
-
import { Input } from "./input"
|
|
7
|
-
import { Textarea } from "./textarea"
|
|
4
|
+
import { cn } from "@c-rex/utils";
|
|
5
|
+
import { Button } from "./button";
|
|
6
|
+
import { Input } from "./input";
|
|
7
|
+
import { Textarea } from "./textarea";
|
|
8
8
|
|
|
9
9
|
const inputGroupVariants = cva(
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}
|
|
24
|
-
)
|
|
10
|
+
"group/input-group relative flex w-full items-center rounded-md transition-[color,box-shadow] outline-none h-9 min-w-0 has-[>textarea]:h-auto",
|
|
11
|
+
{
|
|
12
|
+
variants: {
|
|
13
|
+
variant: {
|
|
14
|
+
default: "border border-input bg-background",
|
|
15
|
+
embedded: "border-0 bg-transparent shadow-none",
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
defaultVariants: {
|
|
19
|
+
variant: "default",
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
);
|
|
25
23
|
|
|
26
24
|
function InputGroup({
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}: React.ComponentProps<"div"> &
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
)
|
|
25
|
+
className,
|
|
26
|
+
variant,
|
|
27
|
+
...props
|
|
28
|
+
}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupVariants>) {
|
|
29
|
+
return (
|
|
30
|
+
<div
|
|
31
|
+
data-slot="input-group"
|
|
32
|
+
role="group"
|
|
33
|
+
className={cn(
|
|
34
|
+
inputGroupVariants({ variant }),
|
|
35
|
+
|
|
36
|
+
// Variants based on alignment.
|
|
37
|
+
"has-[>[data-align=inline-start]]:[&>input]:pl-2",
|
|
38
|
+
"has-[>[data-align=inline-end]]:[&>input]:pr-2",
|
|
39
|
+
"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
|
|
40
|
+
"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
|
|
41
|
+
|
|
42
|
+
// Focus state.
|
|
43
|
+
"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
|
|
44
|
+
|
|
45
|
+
// Error state.
|
|
46
|
+
"has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
|
|
47
|
+
|
|
48
|
+
className,
|
|
49
|
+
)}
|
|
50
|
+
{...props}
|
|
51
|
+
/>
|
|
52
|
+
);
|
|
56
53
|
}
|
|
57
54
|
|
|
58
55
|
const inputGroupAddonVariants = cva(
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
)
|
|
56
|
+
"text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
|
|
57
|
+
{
|
|
58
|
+
variants: {
|
|
59
|
+
align: {
|
|
60
|
+
"inline-start":
|
|
61
|
+
"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
|
|
62
|
+
"inline-end":
|
|
63
|
+
"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
|
|
64
|
+
"block-start":
|
|
65
|
+
"order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
|
|
66
|
+
"block-end":
|
|
67
|
+
"order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
|
|
68
|
+
},
|
|
69
|
+
},
|
|
70
|
+
defaultVariants: {
|
|
71
|
+
align: "inline-start",
|
|
72
|
+
},
|
|
73
|
+
},
|
|
74
|
+
);
|
|
78
75
|
|
|
79
76
|
function InputGroupAddon({
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
77
|
+
className,
|
|
78
|
+
align = "inline-start",
|
|
79
|
+
...props
|
|
83
80
|
}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
81
|
+
return (
|
|
82
|
+
<div
|
|
83
|
+
role="group"
|
|
84
|
+
data-slot="input-group-addon"
|
|
85
|
+
data-align={align}
|
|
86
|
+
className={cn(inputGroupAddonVariants({ align }), className)}
|
|
87
|
+
onClick={(e) => {
|
|
88
|
+
if ((e.target as HTMLElement).closest("button")) {
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
e.currentTarget.parentElement?.querySelector("input")?.focus();
|
|
92
|
+
}}
|
|
93
|
+
{...props}
|
|
94
|
+
/>
|
|
95
|
+
);
|
|
99
96
|
}
|
|
100
97
|
|
|
101
98
|
const inputGroupButtonVariants = cva(
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
)
|
|
99
|
+
"text-sm shadow-none flex gap-2 items-center",
|
|
100
|
+
{
|
|
101
|
+
variants: {
|
|
102
|
+
size: {
|
|
103
|
+
xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
|
|
104
|
+
sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
|
|
105
|
+
"icon-xs":
|
|
106
|
+
"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
|
|
107
|
+
"icon-sm": "size-8 p-0 has-[>svg]:p-0",
|
|
108
|
+
},
|
|
109
|
+
},
|
|
110
|
+
defaultVariants: {
|
|
111
|
+
size: "xs",
|
|
112
|
+
},
|
|
113
|
+
},
|
|
114
|
+
);
|
|
118
115
|
|
|
119
116
|
function InputGroupButton({
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
117
|
+
className,
|
|
118
|
+
type = "button",
|
|
119
|
+
variant = "ghost",
|
|
120
|
+
size = "xs",
|
|
121
|
+
...props
|
|
125
122
|
}: Omit<React.ComponentProps<typeof Button>, "size"> &
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
123
|
+
VariantProps<typeof inputGroupButtonVariants>) {
|
|
124
|
+
return (
|
|
125
|
+
<Button
|
|
126
|
+
type={type}
|
|
127
|
+
data-size={size}
|
|
128
|
+
variant={variant}
|
|
129
|
+
className={cn(inputGroupButtonVariants({ size }), className)}
|
|
130
|
+
{...props}
|
|
131
|
+
/>
|
|
132
|
+
);
|
|
136
133
|
}
|
|
137
134
|
|
|
138
135
|
function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
136
|
+
return (
|
|
137
|
+
<span
|
|
138
|
+
className={cn(
|
|
139
|
+
"text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
|
|
140
|
+
className,
|
|
141
|
+
)}
|
|
142
|
+
{...props}
|
|
143
|
+
/>
|
|
144
|
+
);
|
|
148
145
|
}
|
|
149
146
|
|
|
150
147
|
const InputGroupInput = React.forwardRef<
|
|
151
|
-
|
|
152
|
-
|
|
148
|
+
HTMLInputElement,
|
|
149
|
+
React.ComponentProps<typeof Input>
|
|
153
150
|
>(({ className, ...props }, ref) => {
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
})
|
|
166
|
-
InputGroupInput.displayName = "InputGroupInput"
|
|
167
|
-
|
|
151
|
+
return (
|
|
152
|
+
<Input
|
|
153
|
+
data-slot="input-group-control"
|
|
154
|
+
ref={ref}
|
|
155
|
+
className={cn(
|
|
156
|
+
"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
|
|
157
|
+
className,
|
|
158
|
+
)}
|
|
159
|
+
{...props}
|
|
160
|
+
/>
|
|
161
|
+
);
|
|
162
|
+
});
|
|
163
|
+
InputGroupInput.displayName = "InputGroupInput";
|
|
168
164
|
|
|
169
165
|
function InputGroupTextarea({
|
|
170
|
-
|
|
171
|
-
|
|
166
|
+
className,
|
|
167
|
+
...props
|
|
172
168
|
}: React.ComponentProps<"textarea">) {
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
169
|
+
return (
|
|
170
|
+
<Textarea
|
|
171
|
+
data-slot="input-group-control"
|
|
172
|
+
className={cn(
|
|
173
|
+
"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
|
|
174
|
+
className,
|
|
175
|
+
)}
|
|
176
|
+
{...props}
|
|
177
|
+
/>
|
|
178
|
+
);
|
|
183
179
|
}
|
|
184
180
|
|
|
185
181
|
export {
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
}
|
|
182
|
+
InputGroup,
|
|
183
|
+
InputGroupAddon,
|
|
184
|
+
InputGroupButton,
|
|
185
|
+
InputGroupText,
|
|
186
|
+
InputGroupInput,
|
|
187
|
+
InputGroupTextarea,
|
|
188
|
+
};
|