@alpic-ai/ui 0.0.0-dev.85c8341 → 0.0.0-staging.dcd2ccb
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/components/combobox.mjs +1 -1
- package/dist/components/dialog.mjs +2 -2
- package/dist/components/select.d.mts +1 -9
- package/dist/components/select.mjs +8 -28
- package/package.json +1 -1
- package/src/components/combobox.tsx +1 -1
- package/src/components/dialog.tsx +2 -2
- package/src/components/select.tsx +2 -35
|
@@ -187,7 +187,7 @@ function ComboboxItem({ className, children, itemValue, ...props }) {
|
|
|
187
187
|
"data-slot": "combobox-item",
|
|
188
188
|
"data-selected-item": selected || void 0,
|
|
189
189
|
onSelect: () => onSelect(itemValue),
|
|
190
|
-
className: cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-
|
|
190
|
+
className: cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 outline-hidden select-none", "type-text-md font-medium text-foreground mx-1.5 my-px", "data-[selected=true]:bg-background-hover", "data-[selected-item]:bg-accent", "data-[disabled=true]:pointer-events-none data-[disabled=true]:text-disabled-foreground", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5", className),
|
|
191
191
|
...props,
|
|
192
192
|
children: [/* @__PURE__ */ jsx("span", {
|
|
193
193
|
className: "flex flex-1 items-center gap-2 truncate",
|
|
@@ -33,7 +33,7 @@ function DialogOverlay({ className, ...props }) {
|
|
|
33
33
|
}
|
|
34
34
|
const dialogContentVariants = cva([
|
|
35
35
|
"bg-background fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2",
|
|
36
|
-
"
|
|
36
|
+
"max-h-[calc(100vh-4rem)] overflow-hidden rounded-2xl px-6 shadow-lg outline-none",
|
|
37
37
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
38
38
|
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
39
39
|
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
@@ -63,7 +63,7 @@ function DialogContent({ className, children, size, showCloseButton = true, ...p
|
|
|
63
63
|
function DialogHeader({ className, ...props }) {
|
|
64
64
|
return /* @__PURE__ */ jsx("div", {
|
|
65
65
|
"data-slot": "dialog-header",
|
|
66
|
-
className: cn("flex flex-col gap-0.5
|
|
66
|
+
className: cn("flex flex-col gap-0.5 py-6 pr-10", className),
|
|
67
67
|
...props
|
|
68
68
|
});
|
|
69
69
|
}
|
|
@@ -39,13 +39,5 @@ declare function SelectSeparator({
|
|
|
39
39
|
className,
|
|
40
40
|
...props
|
|
41
41
|
}: React.ComponentProps<typeof SelectPrimitive.Separator>): _$react_jsx_runtime0.JSX.Element;
|
|
42
|
-
declare function SelectScrollUpButton({
|
|
43
|
-
className,
|
|
44
|
-
...props
|
|
45
|
-
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): _$react_jsx_runtime0.JSX.Element;
|
|
46
|
-
declare function SelectScrollDownButton({
|
|
47
|
-
className,
|
|
48
|
-
...props
|
|
49
|
-
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): _$react_jsx_runtime0.JSX.Element;
|
|
50
42
|
//#endregion
|
|
51
|
-
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel,
|
|
43
|
+
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cn } from "../lib/cn.mjs";
|
|
3
3
|
import { selectTriggerVariants } from "./select-trigger-variants.mjs";
|
|
4
|
-
import { CheckIcon, ChevronDownIcon
|
|
4
|
+
import { CheckIcon, ChevronDownIcon } from "lucide-react";
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
7
7
|
//#region src/components/select.tsx
|
|
@@ -35,19 +35,15 @@ function SelectTrigger({ className, size = "md", children, ...props }) {
|
|
|
35
35
|
});
|
|
36
36
|
}
|
|
37
37
|
function SelectContent({ className, children, position = "popper", ...props }) {
|
|
38
|
-
return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */
|
|
38
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(SelectPrimitive.Content, {
|
|
39
39
|
"data-slot": "select-content",
|
|
40
40
|
className: cn("bg-popover text-popover-foreground", "relative z-50 max-h-[min(var(--radix-select-content-available-height),300px)] min-w-[8rem] overflow-hidden rounded-md border border-border-secondary py-1 shadow-lg", "origin-(--radix-select-content-transform-origin)", "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", 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", className),
|
|
41
41
|
position,
|
|
42
42
|
...props,
|
|
43
|
-
children:
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
children
|
|
48
|
-
}),
|
|
49
|
-
/* @__PURE__ */ jsx(SelectScrollDownButton, {})
|
|
50
|
-
]
|
|
43
|
+
children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, {
|
|
44
|
+
className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"),
|
|
45
|
+
children
|
|
46
|
+
})
|
|
51
47
|
}) });
|
|
52
48
|
}
|
|
53
49
|
function SelectLabel({ className, ...props }) {
|
|
@@ -60,7 +56,7 @@ function SelectLabel({ className, ...props }) {
|
|
|
60
56
|
function SelectItem({ className, children, ...props }) {
|
|
61
57
|
return /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
|
|
62
58
|
"data-slot": "select-item",
|
|
63
|
-
className: cn("relative flex
|
|
59
|
+
className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pl-2 outline-hidden select-none", "type-text-md font-medium text-foreground mx-1 my-px", "[@media(hover:hover)]:hover:bg-background-hover", "focus:bg-background-hover", "data-[disabled]:pointer-events-none data-[disabled]:text-disabled-foreground", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
64
60
|
...props,
|
|
65
61
|
children: [/* @__PURE__ */ jsx("span", {
|
|
66
62
|
className: "absolute right-2 flex size-4 items-center justify-center",
|
|
@@ -75,21 +71,5 @@ function SelectSeparator({ className, ...props }) {
|
|
|
75
71
|
...props
|
|
76
72
|
});
|
|
77
73
|
}
|
|
78
|
-
function SelectScrollUpButton({ className, ...props }) {
|
|
79
|
-
return /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, {
|
|
80
|
-
"data-slot": "select-scroll-up-button",
|
|
81
|
-
className: cn("flex cursor-default items-center justify-center py-1", className),
|
|
82
|
-
...props,
|
|
83
|
-
children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
|
|
84
|
-
});
|
|
85
|
-
}
|
|
86
|
-
function SelectScrollDownButton({ className, ...props }) {
|
|
87
|
-
return /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, {
|
|
88
|
-
"data-slot": "select-scroll-down-button",
|
|
89
|
-
className: cn("flex cursor-default items-center justify-center py-1", className),
|
|
90
|
-
...props,
|
|
91
|
-
children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
|
|
92
|
-
});
|
|
93
|
-
}
|
|
94
74
|
//#endregion
|
|
95
|
-
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel,
|
|
75
|
+
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants };
|
package/package.json
CHANGED
|
@@ -349,7 +349,7 @@ function ComboboxItem({ className, children, itemValue, ...props }: ComboboxItem
|
|
|
349
349
|
data-selected-item={selected || undefined}
|
|
350
350
|
onSelect={() => onSelect(itemValue)}
|
|
351
351
|
className={cn(
|
|
352
|
-
"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-
|
|
352
|
+
"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 outline-hidden select-none",
|
|
353
353
|
"type-text-md font-medium text-foreground mx-1.5 my-px",
|
|
354
354
|
"data-[selected=true]:bg-background-hover",
|
|
355
355
|
"data-[selected-item]:bg-accent",
|
|
@@ -37,7 +37,7 @@ function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Dial
|
|
|
37
37
|
const dialogContentVariants = cva(
|
|
38
38
|
[
|
|
39
39
|
"bg-background fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2",
|
|
40
|
-
"
|
|
40
|
+
"max-h-[calc(100vh-4rem)] overflow-hidden rounded-2xl px-6 shadow-lg outline-none",
|
|
41
41
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
42
42
|
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
43
43
|
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
@@ -93,7 +93,7 @@ function DialogContent({ className, children, size, showCloseButton = true, ...p
|
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
96
|
-
return <div data-slot="dialog-header" className={cn("flex flex-col gap-0.5
|
|
96
|
+
return <div data-slot="dialog-header" className={cn("flex flex-col gap-0.5 py-6 pr-10", className)} {...props} />;
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
const dialogFooterVariants = cva("pb-6 pt-6", {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
4
4
|
import type { VariantProps } from "class-variance-authority";
|
|
5
|
-
import { CheckIcon, ChevronDownIcon
|
|
5
|
+
import { CheckIcon, ChevronDownIcon } from "lucide-react";
|
|
6
6
|
import type * as React from "react";
|
|
7
7
|
|
|
8
8
|
import { cn } from "../lib/cn";
|
|
@@ -75,7 +75,6 @@ function SelectContent({
|
|
|
75
75
|
position={position}
|
|
76
76
|
{...props}
|
|
77
77
|
>
|
|
78
|
-
<SelectScrollUpButton />
|
|
79
78
|
<SelectPrimitive.Viewport
|
|
80
79
|
className={cn(
|
|
81
80
|
"p-1",
|
|
@@ -85,7 +84,6 @@ function SelectContent({
|
|
|
85
84
|
>
|
|
86
85
|
{children}
|
|
87
86
|
</SelectPrimitive.Viewport>
|
|
88
|
-
<SelectScrollDownButton />
|
|
89
87
|
</SelectPrimitive.Content>
|
|
90
88
|
</SelectPrimitive.Portal>
|
|
91
89
|
);
|
|
@@ -110,7 +108,7 @@ function SelectItem({ className, children, ...props }: React.ComponentProps<type
|
|
|
110
108
|
<SelectPrimitive.Item
|
|
111
109
|
data-slot="select-item"
|
|
112
110
|
className={cn(
|
|
113
|
-
"relative flex
|
|
111
|
+
"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pl-2 outline-hidden select-none",
|
|
114
112
|
"type-text-md font-medium text-foreground mx-1 my-px",
|
|
115
113
|
"[@media(hover:hover)]:hover:bg-background-hover",
|
|
116
114
|
"focus:bg-background-hover",
|
|
@@ -142,43 +140,12 @@ function SelectSeparator({ className, ...props }: React.ComponentProps<typeof Se
|
|
|
142
140
|
);
|
|
143
141
|
}
|
|
144
142
|
|
|
145
|
-
/* ── Scroll buttons ──────────────────────────────────────────────────────── */
|
|
146
|
-
|
|
147
|
-
function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
|
148
|
-
return (
|
|
149
|
-
<SelectPrimitive.ScrollUpButton
|
|
150
|
-
data-slot="select-scroll-up-button"
|
|
151
|
-
className={cn("flex cursor-default items-center justify-center py-1", className)}
|
|
152
|
-
{...props}
|
|
153
|
-
>
|
|
154
|
-
<ChevronUpIcon className="size-4" />
|
|
155
|
-
</SelectPrimitive.ScrollUpButton>
|
|
156
|
-
);
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
function SelectScrollDownButton({
|
|
160
|
-
className,
|
|
161
|
-
...props
|
|
162
|
-
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
|
163
|
-
return (
|
|
164
|
-
<SelectPrimitive.ScrollDownButton
|
|
165
|
-
data-slot="select-scroll-down-button"
|
|
166
|
-
className={cn("flex cursor-default items-center justify-center py-1", className)}
|
|
167
|
-
{...props}
|
|
168
|
-
>
|
|
169
|
-
<ChevronDownIcon className="size-4" />
|
|
170
|
-
</SelectPrimitive.ScrollDownButton>
|
|
171
|
-
);
|
|
172
|
-
}
|
|
173
|
-
|
|
174
143
|
export {
|
|
175
144
|
Select,
|
|
176
145
|
SelectContent,
|
|
177
146
|
SelectGroup,
|
|
178
147
|
SelectItem,
|
|
179
148
|
SelectLabel,
|
|
180
|
-
SelectScrollDownButton,
|
|
181
|
-
SelectScrollUpButton,
|
|
182
149
|
SelectSeparator,
|
|
183
150
|
SelectTrigger,
|
|
184
151
|
SelectValue,
|