@snapdragonsnursery/react-components 1.17.1 → 1.17.2
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
CHANGED
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
//
|
|
2
|
+
// radix-select.jsx
|
|
3
|
+
// -----------
|
|
4
|
+
// shadcn/ui Select component wrappers using @radix-ui/react-select.
|
|
5
|
+
// Import and use in forms for consistent dropdown styling with advanced features.
|
|
6
|
+
//
|
|
7
|
+
// Example:
|
|
8
|
+
// <Select value={value} onValueChange={setValue}>
|
|
9
|
+
// <SelectTrigger className="w-full"><SelectValue placeholder="Select..." /></SelectTrigger>
|
|
10
|
+
// <SelectContent>
|
|
11
|
+
// <SelectItem value="site">Nursery site</SelectItem>
|
|
12
|
+
// <SelectItem value="custom">Custom address</SelectItem>
|
|
13
|
+
// </SelectContent>
|
|
14
|
+
// </Select>
|
|
15
|
+
|
|
16
|
+
import * as React from "react";
|
|
17
|
+
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
18
|
+
import { Check, ChevronDown, ChevronUp } from "lucide-react";
|
|
19
|
+
import { cn } from "../../lib/utils";
|
|
20
|
+
|
|
21
|
+
const Select = SelectPrimitive.Root;
|
|
22
|
+
|
|
23
|
+
const SelectGroup = SelectPrimitive.Group;
|
|
24
|
+
|
|
25
|
+
const SelectValue = SelectPrimitive.Value;
|
|
26
|
+
|
|
27
|
+
const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
|
|
28
|
+
<SelectPrimitive.Trigger
|
|
29
|
+
ref={ref}
|
|
30
|
+
className={cn(
|
|
31
|
+
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background",
|
|
32
|
+
"placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
|
33
|
+
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
34
|
+
"[&>span]:line-clamp-1",
|
|
35
|
+
className
|
|
36
|
+
)}
|
|
37
|
+
{...props}
|
|
38
|
+
>
|
|
39
|
+
{children}
|
|
40
|
+
<SelectPrimitive.Icon asChild>
|
|
41
|
+
<ChevronDown className="h-4 w-4 opacity-50" />
|
|
42
|
+
</SelectPrimitive.Icon>
|
|
43
|
+
</SelectPrimitive.Trigger>
|
|
44
|
+
));
|
|
45
|
+
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
46
|
+
|
|
47
|
+
const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (
|
|
48
|
+
<SelectPrimitive.ScrollUpButton
|
|
49
|
+
ref={ref}
|
|
50
|
+
className={cn(
|
|
51
|
+
"flex cursor-default items-center justify-center py-1",
|
|
52
|
+
className
|
|
53
|
+
)}
|
|
54
|
+
{...props}
|
|
55
|
+
>
|
|
56
|
+
<ChevronUp className="h-4 w-4" />
|
|
57
|
+
</SelectPrimitive.ScrollUpButton>
|
|
58
|
+
));
|
|
59
|
+
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
60
|
+
|
|
61
|
+
const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (
|
|
62
|
+
<SelectPrimitive.ScrollDownButton
|
|
63
|
+
ref={ref}
|
|
64
|
+
className={cn(
|
|
65
|
+
"flex cursor-default items-center justify-center py-1",
|
|
66
|
+
className
|
|
67
|
+
)}
|
|
68
|
+
{...props}
|
|
69
|
+
>
|
|
70
|
+
<ChevronDown className="h-4 w-4" />
|
|
71
|
+
</SelectPrimitive.ScrollDownButton>
|
|
72
|
+
));
|
|
73
|
+
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
|
74
|
+
|
|
75
|
+
const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (
|
|
76
|
+
<SelectPrimitive.Portal>
|
|
77
|
+
<SelectPrimitive.Content
|
|
78
|
+
ref={ref}
|
|
79
|
+
className={cn(
|
|
80
|
+
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
|
|
81
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
82
|
+
"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
83
|
+
position === "popper" &&
|
|
84
|
+
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
|
85
|
+
className
|
|
86
|
+
)}
|
|
87
|
+
position={position}
|
|
88
|
+
{...props}
|
|
89
|
+
>
|
|
90
|
+
<SelectScrollUpButton />
|
|
91
|
+
<SelectPrimitive.Viewport
|
|
92
|
+
className={cn(
|
|
93
|
+
"p-1",
|
|
94
|
+
position === "popper" &&
|
|
95
|
+
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
|
96
|
+
)}
|
|
97
|
+
>
|
|
98
|
+
{children}
|
|
99
|
+
</SelectPrimitive.Viewport>
|
|
100
|
+
<SelectScrollDownButton />
|
|
101
|
+
</SelectPrimitive.Content>
|
|
102
|
+
</SelectPrimitive.Portal>
|
|
103
|
+
));
|
|
104
|
+
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
105
|
+
|
|
106
|
+
const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
|
|
107
|
+
<SelectPrimitive.Label
|
|
108
|
+
ref={ref}
|
|
109
|
+
className={cn("px-2 py-1.5 text-sm font-semibold", className)}
|
|
110
|
+
{...props}
|
|
111
|
+
/>
|
|
112
|
+
));
|
|
113
|
+
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
114
|
+
|
|
115
|
+
const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (
|
|
116
|
+
<SelectPrimitive.Item
|
|
117
|
+
ref={ref}
|
|
118
|
+
className={cn(
|
|
119
|
+
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none",
|
|
120
|
+
"focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
121
|
+
className
|
|
122
|
+
)}
|
|
123
|
+
{...props}
|
|
124
|
+
>
|
|
125
|
+
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
|
|
126
|
+
<SelectPrimitive.ItemIndicator>
|
|
127
|
+
<Check className="h-4 w-4" />
|
|
128
|
+
</SelectPrimitive.ItemIndicator>
|
|
129
|
+
</span>
|
|
130
|
+
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
|
131
|
+
</SelectPrimitive.Item>
|
|
132
|
+
));
|
|
133
|
+
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
134
|
+
|
|
135
|
+
const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
|
|
136
|
+
<SelectPrimitive.Separator
|
|
137
|
+
ref={ref}
|
|
138
|
+
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
|
139
|
+
{...props}
|
|
140
|
+
/>
|
|
141
|
+
));
|
|
142
|
+
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
|
143
|
+
|
|
144
|
+
export {
|
|
145
|
+
Select,
|
|
146
|
+
SelectGroup,
|
|
147
|
+
SelectValue,
|
|
148
|
+
SelectTrigger,
|
|
149
|
+
SelectScrollUpButton,
|
|
150
|
+
SelectScrollDownButton,
|
|
151
|
+
SelectContent,
|
|
152
|
+
SelectLabel,
|
|
153
|
+
SelectItem,
|
|
154
|
+
SelectSeparator,
|
|
155
|
+
};
|
|
156
|
+
|
|
@@ -1,155 +1,35 @@
|
|
|
1
|
-
//
|
|
2
|
-
// select
|
|
3
|
-
//
|
|
4
|
-
// shadcn/ui Select component wrappers using @radix-ui/react-select.
|
|
5
|
-
// Import and use in forms for consistent dropdown styling.
|
|
6
|
-
//
|
|
7
|
-
// Example:
|
|
8
|
-
// <Select value={value} onValueChange={setValue}>
|
|
9
|
-
// <SelectTrigger className="w-full"><SelectValue placeholder="Select..." /></SelectTrigger>
|
|
10
|
-
// <SelectContent>
|
|
11
|
-
// <SelectItem value="site">Nursery site</SelectItem>
|
|
12
|
-
// <SelectItem value="custom">Custom address</SelectItem>
|
|
13
|
-
// </SelectContent>
|
|
14
|
-
// </Select>
|
|
1
|
+
// shadcn-style Select component
|
|
2
|
+
// Provides consistent select styling across the application
|
|
3
|
+
// This is a simple HTML select wrapper, for advanced select features use radix-select.jsx
|
|
15
4
|
|
|
16
5
|
import * as React from "react";
|
|
17
|
-
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
18
|
-
import { Check, ChevronDown, ChevronUp } from "lucide-react";
|
|
19
6
|
import { cn } from "../../lib/utils";
|
|
20
7
|
|
|
21
|
-
const Select =
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
const SelectValue = SelectPrimitive.Value;
|
|
26
|
-
|
|
27
|
-
const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
|
|
28
|
-
<SelectPrimitive.Trigger
|
|
29
|
-
ref={ref}
|
|
30
|
-
className={cn(
|
|
31
|
-
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background",
|
|
32
|
-
"placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
|
33
|
-
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
34
|
-
"[&>span]:line-clamp-1",
|
|
35
|
-
className
|
|
36
|
-
)}
|
|
37
|
-
{...props}
|
|
38
|
-
>
|
|
39
|
-
{children}
|
|
40
|
-
<SelectPrimitive.Icon asChild>
|
|
41
|
-
<ChevronDown className="h-4 w-4 opacity-50" />
|
|
42
|
-
</SelectPrimitive.Icon>
|
|
43
|
-
</SelectPrimitive.Trigger>
|
|
44
|
-
));
|
|
45
|
-
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
46
|
-
|
|
47
|
-
const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (
|
|
48
|
-
<SelectPrimitive.ScrollUpButton
|
|
49
|
-
ref={ref}
|
|
50
|
-
className={cn(
|
|
51
|
-
"flex cursor-default items-center justify-center py-1",
|
|
52
|
-
className
|
|
53
|
-
)}
|
|
54
|
-
{...props}
|
|
55
|
-
>
|
|
56
|
-
<ChevronUp className="h-4 w-4" />
|
|
57
|
-
</SelectPrimitive.ScrollUpButton>
|
|
58
|
-
));
|
|
59
|
-
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
60
|
-
|
|
61
|
-
const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (
|
|
62
|
-
<SelectPrimitive.ScrollDownButton
|
|
63
|
-
ref={ref}
|
|
64
|
-
className={cn(
|
|
65
|
-
"flex cursor-default items-center justify-center py-1",
|
|
66
|
-
className
|
|
67
|
-
)}
|
|
68
|
-
{...props}
|
|
69
|
-
>
|
|
70
|
-
<ChevronDown className="h-4 w-4" />
|
|
71
|
-
</SelectPrimitive.ScrollDownButton>
|
|
72
|
-
));
|
|
73
|
-
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
|
74
|
-
|
|
75
|
-
const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (
|
|
76
|
-
<SelectPrimitive.Portal>
|
|
77
|
-
<SelectPrimitive.Content
|
|
78
|
-
ref={ref}
|
|
8
|
+
const Select = React.forwardRef(({ className, children, ...props }, ref) => {
|
|
9
|
+
return (
|
|
10
|
+
<select
|
|
79
11
|
className={cn(
|
|
80
|
-
"
|
|
81
|
-
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
82
|
-
"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
83
|
-
position === "popper" &&
|
|
84
|
-
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
|
12
|
+
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
85
13
|
className
|
|
86
14
|
)}
|
|
87
|
-
|
|
15
|
+
ref={ref}
|
|
88
16
|
{...props}
|
|
89
17
|
>
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
18
|
+
{children}
|
|
19
|
+
</select>
|
|
20
|
+
);
|
|
21
|
+
});
|
|
22
|
+
Select.displayName = "Select";
|
|
23
|
+
|
|
24
|
+
const SelectOption = React.forwardRef(
|
|
25
|
+
({ className, children, ...props }, ref) => {
|
|
26
|
+
return (
|
|
27
|
+
<option className={cn("", className)} ref={ref} {...props}>
|
|
98
28
|
{children}
|
|
99
|
-
</
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
105
|
-
|
|
106
|
-
const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
|
|
107
|
-
<SelectPrimitive.Label
|
|
108
|
-
ref={ref}
|
|
109
|
-
className={cn("px-2 py-1.5 text-sm font-semibold", className)}
|
|
110
|
-
{...props}
|
|
111
|
-
/>
|
|
112
|
-
));
|
|
113
|
-
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
114
|
-
|
|
115
|
-
const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (
|
|
116
|
-
<SelectPrimitive.Item
|
|
117
|
-
ref={ref}
|
|
118
|
-
className={cn(
|
|
119
|
-
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none",
|
|
120
|
-
"focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
121
|
-
className
|
|
122
|
-
)}
|
|
123
|
-
{...props}
|
|
124
|
-
>
|
|
125
|
-
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
|
|
126
|
-
<SelectPrimitive.ItemIndicator>
|
|
127
|
-
<Check className="h-4 w-4" />
|
|
128
|
-
</SelectPrimitive.ItemIndicator>
|
|
129
|
-
</span>
|
|
130
|
-
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
|
131
|
-
</SelectPrimitive.Item>
|
|
132
|
-
));
|
|
133
|
-
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
134
|
-
|
|
135
|
-
const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
|
|
136
|
-
<SelectPrimitive.Separator
|
|
137
|
-
ref={ref}
|
|
138
|
-
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
|
139
|
-
{...props}
|
|
140
|
-
/>
|
|
141
|
-
));
|
|
142
|
-
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
|
29
|
+
</option>
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
);
|
|
33
|
+
SelectOption.displayName = "SelectOption";
|
|
143
34
|
|
|
144
|
-
export {
|
|
145
|
-
Select,
|
|
146
|
-
SelectGroup,
|
|
147
|
-
SelectValue,
|
|
148
|
-
SelectTrigger,
|
|
149
|
-
SelectScrollUpButton,
|
|
150
|
-
SelectScrollDownButton,
|
|
151
|
-
SelectContent,
|
|
152
|
-
SelectLabel,
|
|
153
|
-
SelectItem,
|
|
154
|
-
SelectSeparator,
|
|
155
|
-
};
|
|
35
|
+
export { Select, SelectOption };
|