@stackshift-ui/select 7.0.0-beta.1 → 7.0.0-beta.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/dist/chunk-WPRWH7JK.mjs +180 -0
- package/package.json +4 -4
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
// src/select.tsx
|
|
2
|
+
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
3
|
+
import { Check, ChevronDown, ChevronUp } from "lucide-react";
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
import { cn, DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
var displayName = "Select";
|
|
8
|
+
var displayNameTrigger = "SelectTrigger";
|
|
9
|
+
var displayNameValue = "SelectValue";
|
|
10
|
+
var displayNameContent = "SelectContent";
|
|
11
|
+
var displayNameItem = "SelectItem";
|
|
12
|
+
var displayNameGroup = "SelectGroup";
|
|
13
|
+
var displayNameLabel = "SelectLabel";
|
|
14
|
+
var displayNameSeparator = "SelectSeparator";
|
|
15
|
+
var displayNameScrollUpButton = "SelectScrollUpButton";
|
|
16
|
+
var displayNameScrollDownButton = "SelectScrollDownButton";
|
|
17
|
+
var Select = React.forwardRef(
|
|
18
|
+
({ ...props }, ref) => {
|
|
19
|
+
const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
|
|
20
|
+
return /* @__PURE__ */ jsx(Component, { as: SelectPrimitive.Root, ref, ...props });
|
|
21
|
+
}
|
|
22
|
+
);
|
|
23
|
+
Select.displayName = displayName;
|
|
24
|
+
var SelectGroup = React.forwardRef(({ className, ...props }, ref) => {
|
|
25
|
+
const { [displayNameGroup]: Component = DefaultComponent } = useStackShiftUIComponents();
|
|
26
|
+
return /* @__PURE__ */ jsx(Component, { as: SelectPrimitive.Group, ref, className: cn("p-1", className), ...props });
|
|
27
|
+
});
|
|
28
|
+
SelectGroup.displayName = displayNameGroup;
|
|
29
|
+
var SelectValue = React.forwardRef(({ className, ...props }, ref) => {
|
|
30
|
+
const { [displayNameValue]: Component = DefaultComponent } = useStackShiftUIComponents();
|
|
31
|
+
return /* @__PURE__ */ jsx(
|
|
32
|
+
Component,
|
|
33
|
+
{
|
|
34
|
+
as: SelectPrimitive.Value,
|
|
35
|
+
ref,
|
|
36
|
+
className: cn("text-sm outline-none", className),
|
|
37
|
+
...props
|
|
38
|
+
}
|
|
39
|
+
);
|
|
40
|
+
});
|
|
41
|
+
SelectValue.displayName = displayNameValue;
|
|
42
|
+
var SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => {
|
|
43
|
+
const { [displayNameTrigger]: Component = DefaultComponent } = useStackShiftUIComponents();
|
|
44
|
+
return /* @__PURE__ */ jsxs(
|
|
45
|
+
Component,
|
|
46
|
+
{
|
|
47
|
+
as: SelectPrimitive.Trigger,
|
|
48
|
+
ref,
|
|
49
|
+
className: cn(
|
|
50
|
+
"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 data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
|
51
|
+
className
|
|
52
|
+
),
|
|
53
|
+
...props,
|
|
54
|
+
children: [
|
|
55
|
+
children,
|
|
56
|
+
/* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
|
|
57
|
+
]
|
|
58
|
+
}
|
|
59
|
+
);
|
|
60
|
+
});
|
|
61
|
+
SelectTrigger.displayName = displayNameTrigger;
|
|
62
|
+
var SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => {
|
|
63
|
+
const { [displayNameScrollUpButton]: Component = DefaultComponent } = useStackShiftUIComponents();
|
|
64
|
+
return /* @__PURE__ */ jsx(
|
|
65
|
+
Component,
|
|
66
|
+
{
|
|
67
|
+
as: SelectPrimitive.ScrollUpButton,
|
|
68
|
+
ref,
|
|
69
|
+
className: cn("flex cursor-default items-center justify-center py-1", className),
|
|
70
|
+
...props,
|
|
71
|
+
children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
|
|
72
|
+
}
|
|
73
|
+
);
|
|
74
|
+
});
|
|
75
|
+
SelectScrollUpButton.displayName = displayNameScrollUpButton;
|
|
76
|
+
var SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => {
|
|
77
|
+
const { [displayNameScrollDownButton]: Component = DefaultComponent } = useStackShiftUIComponents();
|
|
78
|
+
return /* @__PURE__ */ jsx(
|
|
79
|
+
Component,
|
|
80
|
+
{
|
|
81
|
+
as: SelectPrimitive.ScrollDownButton,
|
|
82
|
+
ref,
|
|
83
|
+
className: cn("flex cursor-default items-center justify-center py-1", className),
|
|
84
|
+
...props,
|
|
85
|
+
children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
|
|
86
|
+
}
|
|
87
|
+
);
|
|
88
|
+
});
|
|
89
|
+
SelectScrollDownButton.displayName = displayNameScrollDownButton;
|
|
90
|
+
var SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => {
|
|
91
|
+
const { [displayNameContent]: Component = DefaultComponent } = useStackShiftUIComponents();
|
|
92
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
|
|
93
|
+
Component,
|
|
94
|
+
{
|
|
95
|
+
as: SelectPrimitive.Content,
|
|
96
|
+
ref,
|
|
97
|
+
className: cn(
|
|
98
|
+
"relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 origin-[--radix-select-content-transform-origin]",
|
|
99
|
+
position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
|
100
|
+
className
|
|
101
|
+
),
|
|
102
|
+
position,
|
|
103
|
+
...props,
|
|
104
|
+
children: [
|
|
105
|
+
/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
|
|
106
|
+
/* @__PURE__ */ jsx(
|
|
107
|
+
SelectPrimitive.Viewport,
|
|
108
|
+
{
|
|
109
|
+
className: cn(
|
|
110
|
+
"p-1",
|
|
111
|
+
position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
|
112
|
+
),
|
|
113
|
+
children
|
|
114
|
+
}
|
|
115
|
+
),
|
|
116
|
+
/* @__PURE__ */ jsx(SelectScrollDownButton, {})
|
|
117
|
+
]
|
|
118
|
+
}
|
|
119
|
+
) });
|
|
120
|
+
});
|
|
121
|
+
SelectContent.displayName = displayNameContent;
|
|
122
|
+
var SelectLabel = React.forwardRef(({ className, ...props }, ref) => {
|
|
123
|
+
const { [displayNameLabel]: Component = DefaultComponent } = useStackShiftUIComponents();
|
|
124
|
+
return /* @__PURE__ */ jsx(
|
|
125
|
+
Component,
|
|
126
|
+
{
|
|
127
|
+
as: SelectPrimitive.Label,
|
|
128
|
+
ref,
|
|
129
|
+
className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
|
|
130
|
+
...props
|
|
131
|
+
}
|
|
132
|
+
);
|
|
133
|
+
});
|
|
134
|
+
SelectLabel.displayName = displayNameLabel;
|
|
135
|
+
var SelectItem = React.forwardRef(({ className, children, ...props }, ref) => {
|
|
136
|
+
const { [displayNameItem]: Component = DefaultComponent } = useStackShiftUIComponents();
|
|
137
|
+
return /* @__PURE__ */ jsxs(
|
|
138
|
+
Component,
|
|
139
|
+
{
|
|
140
|
+
as: SelectPrimitive.Item,
|
|
141
|
+
ref,
|
|
142
|
+
className: cn(
|
|
143
|
+
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
144
|
+
className
|
|
145
|
+
),
|
|
146
|
+
...props,
|
|
147
|
+
children: [
|
|
148
|
+
/* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
|
|
149
|
+
/* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
|
|
150
|
+
]
|
|
151
|
+
}
|
|
152
|
+
);
|
|
153
|
+
});
|
|
154
|
+
SelectItem.displayName = displayNameItem;
|
|
155
|
+
var SelectSeparator = React.forwardRef(({ className, ...props }, ref) => {
|
|
156
|
+
const { [displayNameSeparator]: Component = DefaultComponent } = useStackShiftUIComponents();
|
|
157
|
+
return /* @__PURE__ */ jsx(
|
|
158
|
+
Component,
|
|
159
|
+
{
|
|
160
|
+
as: SelectPrimitive.Separator,
|
|
161
|
+
ref,
|
|
162
|
+
className: cn("-mx-1 my-1 h-px bg-muted", className),
|
|
163
|
+
...props
|
|
164
|
+
}
|
|
165
|
+
);
|
|
166
|
+
});
|
|
167
|
+
SelectSeparator.displayName = displayNameSeparator;
|
|
168
|
+
|
|
169
|
+
export {
|
|
170
|
+
Select,
|
|
171
|
+
SelectGroup,
|
|
172
|
+
SelectValue,
|
|
173
|
+
SelectTrigger,
|
|
174
|
+
SelectScrollUpButton,
|
|
175
|
+
SelectScrollDownButton,
|
|
176
|
+
SelectContent,
|
|
177
|
+
SelectLabel,
|
|
178
|
+
SelectItem,
|
|
179
|
+
SelectSeparator
|
|
180
|
+
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stackshift-ui/select",
|
|
3
3
|
"description": "",
|
|
4
|
-
"version": "7.0.0-beta.
|
|
4
|
+
"version": "7.0.0-beta.3",
|
|
5
5
|
"private": false,
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"main": "./dist/index.js",
|
|
@@ -36,11 +36,11 @@
|
|
|
36
36
|
"@radix-ui/react-select": "^2.2.5",
|
|
37
37
|
"classnames": "^2.5.1",
|
|
38
38
|
"lucide-react": "^0.468.0",
|
|
39
|
-
"@stackshift-ui/scripts": "6.1.0-beta.
|
|
40
|
-
"@stackshift-ui/system": "6.1.0-beta.
|
|
39
|
+
"@stackshift-ui/scripts": "6.1.0-beta.2",
|
|
40
|
+
"@stackshift-ui/system": "6.1.0-beta.3"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
|
-
"@stackshift-ui/system": ">=6.1.0-beta.
|
|
43
|
+
"@stackshift-ui/system": ">=6.1.0-beta.3",
|
|
44
44
|
"@types/react": "16.8 - 19",
|
|
45
45
|
"next": "10 - 14",
|
|
46
46
|
"react": "16.8 - 19",
|