@greatapps/common 1.1.21 → 1.1.23
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/ui/form/Select.mjs +3 -2
- package/dist/components/ui/form/Select.mjs.map +1 -1
- package/dist/components/ui/overlay/Sheet.mjs +12 -6
- package/dist/components/ui/overlay/Sheet.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/ui/form/Select.tsx +38 -34
- package/src/components/ui/overlay/Sheet.tsx +42 -28
|
@@ -22,6 +22,7 @@ function SelectTrigger({
|
|
|
22
22
|
className,
|
|
23
23
|
size = "default",
|
|
24
24
|
children,
|
|
25
|
+
icon,
|
|
25
26
|
...props
|
|
26
27
|
}) {
|
|
27
28
|
return /* @__PURE__ */ jsxs(
|
|
@@ -36,10 +37,10 @@ function SelectTrigger({
|
|
|
36
37
|
...props,
|
|
37
38
|
children: [
|
|
38
39
|
children,
|
|
39
|
-
/* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
|
|
40
|
+
/* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: icon ?? /* @__PURE__ */ jsx(
|
|
40
41
|
ChevronDownIcon,
|
|
41
42
|
{
|
|
42
|
-
className: "\n
|
|
43
|
+
className: "\n size-4 opacity-50 transition-all duration-200\n group-data-[state=open]/data-select:rotate-180\n group-data-[state=open]/data-select:opacity-100\n group-data-[state=open]/data-select:text-gray-950!\n "
|
|
43
44
|
}
|
|
44
45
|
) })
|
|
45
46
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ui/form/Select.tsx"],"sourcesContent":["\"use client\"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ui/form/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport { cn } from \"../../../infra/utils/clsx\";\n\nfunction Select({\n ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n}\n\nfunction SelectGroup({\n ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nfunction SelectValue({\n ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />;\n}\n\nfunction SelectTrigger({\n className,\n size = \"default\",\n children,\n icon,\n ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n size?: \"sm\" | \"default\";\n}) {\n return (\n <SelectPrimitive.Trigger\n data-slot=\"select-trigger\"\n data-size={size}\n className={cn(\n \"group/data-select border-input data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer\",\n className,\n )}\n {...props}\n >\n {children}\n\n <SelectPrimitive.Icon asChild>\n {icon ?? (\n <ChevronDownIcon\n className=\"\n size-4 opacity-50 transition-all duration-200\n group-data-[state=open]/data-select:rotate-180\n group-data-[state=open]/data-select:opacity-100\n group-data-[state=open]/data-select:text-gray-950!\n \"\n />\n )}\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n );\n}\n\nfunction SelectContent({\n className,\n children,\n position = \"popper\",\n align = \"center\",\n ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n return (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n data-slot=\"select-content\"\n className={cn(\n \"bg-popover text-popover-foreground 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 relative z-[1001] max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md\",\n position === \"popper\" &&\n \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n className,\n )}\n position={position}\n align={align}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n \"p-1\",\n position === \"popper\" &&\n \"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1\",\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n );\n}\n\nfunction SelectLabel({\n className,\n ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n return (\n <SelectPrimitive.Label\n data-slot=\"select-label\"\n className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n {...props}\n />\n );\n}\n\nfunction SelectItem({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n return (\n <SelectPrimitive.Item\n data-slot=\"select-item\"\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 cursor-pointer\",\n className,\n )}\n {...props}\n >\n <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <CheckIcon className=\"size-4\" />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText className=\"cursor-pointer\">\n {children}\n </SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n );\n}\n\nfunction SelectSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n return (\n <SelectPrimitive.Separator\n data-slot=\"select-separator\"\n className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n {...props}\n />\n );\n}\n\nfunction SelectScrollUpButton({\n className,\n ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n return (\n <SelectPrimitive.ScrollUpButton\n data-slot=\"select-scroll-up-button\"\n className={cn(\n \"flex cursor-default items-center justify-center py-1\",\n className,\n )}\n {...props}\n >\n <ChevronUpIcon className=\"size-4\" />\n </SelectPrimitive.ScrollUpButton>\n );\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n return (\n <SelectPrimitive.ScrollDownButton\n data-slot=\"select-scroll-down-button\"\n className={cn(\n \"flex cursor-default items-center justify-center py-1\",\n className,\n )}\n {...props}\n >\n <ChevronDownIcon className=\"size-4\" />\n </SelectPrimitive.ScrollDownButton>\n );\n}\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n};\n"],"mappings":"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","names":[]}
|
|
@@ -42,20 +42,26 @@ function SheetContent({
|
|
|
42
42
|
children,
|
|
43
43
|
side = "right",
|
|
44
44
|
showCloseButton = true,
|
|
45
|
+
noAnimation = false,
|
|
45
46
|
...props
|
|
46
47
|
}) {
|
|
47
48
|
return /* @__PURE__ */ jsxs(SheetPortal, { children: [
|
|
48
|
-
/* @__PURE__ */ jsx(SheetOverlay, {}),
|
|
49
|
+
/* @__PURE__ */ jsx(SheetOverlay, { className: noAnimation ? "!animate-none" : void 0 }),
|
|
49
50
|
/* @__PURE__ */ jsxs(
|
|
50
51
|
SheetPrimitive.Content,
|
|
51
52
|
{
|
|
52
53
|
"data-slot": "sheet-content",
|
|
53
54
|
className: cn(
|
|
54
|
-
"bg-background
|
|
55
|
-
|
|
56
|
-
side === "
|
|
57
|
-
side === "
|
|
58
|
-
side === "
|
|
55
|
+
"bg-background fixed z-50 flex flex-col gap-4 shadow-lg",
|
|
56
|
+
!noAnimation && "data-[state=open]:animate-in data-[state=closed]:animate-out transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
|
57
|
+
!noAnimation && side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
|
|
58
|
+
!noAnimation && side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
|
|
59
|
+
!noAnimation && side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
|
60
|
+
!noAnimation && side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
|
61
|
+
side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
|
|
62
|
+
side === "left" && "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
|
|
63
|
+
side === "top" && "inset-x-0 top-0 h-auto border-b",
|
|
64
|
+
side === "bottom" && "inset-x-0 bottom-0 h-auto border-t",
|
|
59
65
|
className
|
|
60
66
|
),
|
|
61
67
|
...props,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ui/overlay/Sheet.tsx"],"sourcesContent":["\"use client\"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ui/overlay/Sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\";\nimport { XIcon } from \"lucide-react\";\nimport { cn } from \"../../../infra/utils/clsx\";\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\nfunction SheetTrigger({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nfunction SheetClose({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nfunction SheetPortal({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n}\n\nfunction SheetOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n return (\n <SheetPrimitive.Overlay\n data-slot=\"sheet-overlay\"\n className={cn(\n \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[1000] bg-black/50\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SheetContent({\n className,\n children,\n side = \"right\",\n showCloseButton = true,\n noAnimation = false,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n showCloseButton?: boolean;\n noAnimation?: boolean;\n}) {\n return (\n <SheetPortal>\n <SheetOverlay className={noAnimation ? \"!animate-none\" : undefined} />\n <SheetPrimitive.Content\n data-slot=\"sheet-content\"\n className={cn(\n \"bg-background fixed z-50 flex flex-col gap-4 shadow-lg\",\n !noAnimation &&\n \"data-[state=open]:animate-in data-[state=closed]:animate-out transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n !noAnimation &&\n side === \"right\" &&\n \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right\",\n !noAnimation &&\n side === \"left\" &&\n \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left\",\n !noAnimation &&\n side === \"top\" &&\n \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n !noAnimation &&\n side === \"bottom\" &&\n \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n side === \"right\" &&\n \"inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm\",\n side === \"left\" &&\n \"inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm\",\n side === \"top\" && \"inset-x-0 top-0 h-auto border-b\",\n side === \"bottom\" && \"inset-x-0 bottom-0 h-auto border-t\",\n className,\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <SheetPrimitive.Close\n data-slot=\"sheet-close\"\n className=\"absolute top-3 right-3 hover:cursor-pointer flex size-8 items-center justify-center rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-950 focus:outline-none\"\n >\n <XIcon className=\"size-[18px]\" />\n <span className=\"sr-only\">Close</span>\n </SheetPrimitive.Close>\n )}\n </SheetPrimitive.Content>\n </SheetPortal>\n );\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sheet-header\"\n className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n {...props}\n />\n );\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sheet-footer\"\n className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n {...props}\n />\n );\n}\n\nfunction SheetTitle({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n return (\n <SheetPrimitive.Title\n data-slot=\"sheet-title\"\n className={cn(\"text-foreground font-semibold\", className)}\n {...props}\n />\n );\n}\n\nfunction SheetDescription({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n return (\n <SheetPrimitive.Description\n data-slot=\"sheet-description\"\n className={cn(\"text-muted-foreground text-sm\", className)}\n {...props}\n />\n );\n}\n\nexport {\n Sheet,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n};\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -1,35 +1,36 @@
|
|
|
1
|
-
"use client"
|
|
1
|
+
"use client";
|
|
2
2
|
|
|
3
|
-
import * as React from "react"
|
|
4
|
-
import * as SelectPrimitive from "@radix-ui/react-select"
|
|
5
|
-
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
|
|
6
|
-
import { cn } from "../../../infra/utils/clsx"
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
5
|
+
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
|
|
6
|
+
import { cn } from "../../../infra/utils/clsx";
|
|
7
7
|
|
|
8
8
|
function Select({
|
|
9
9
|
...props
|
|
10
10
|
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
|
11
|
-
return <SelectPrimitive.Root data-slot="select" {...props}
|
|
11
|
+
return <SelectPrimitive.Root data-slot="select" {...props} />;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
function SelectGroup({
|
|
15
15
|
...props
|
|
16
16
|
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
|
17
|
-
return <SelectPrimitive.Group data-slot="select-group" {...props}
|
|
17
|
+
return <SelectPrimitive.Group data-slot="select-group" {...props} />;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
function SelectValue({
|
|
21
21
|
...props
|
|
22
22
|
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
|
23
|
-
return <SelectPrimitive.Value data-slot="select-value" {...props}
|
|
23
|
+
return <SelectPrimitive.Value data-slot="select-value" {...props} />;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
function SelectTrigger({
|
|
27
27
|
className,
|
|
28
28
|
size = "default",
|
|
29
29
|
children,
|
|
30
|
+
icon,
|
|
30
31
|
...props
|
|
31
32
|
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
|
32
|
-
size?: "sm" | "default"
|
|
33
|
+
size?: "sm" | "default";
|
|
33
34
|
}) {
|
|
34
35
|
return (
|
|
35
36
|
<SelectPrimitive.Trigger
|
|
@@ -37,25 +38,26 @@ function SelectTrigger({
|
|
|
37
38
|
data-size={size}
|
|
38
39
|
className={cn(
|
|
39
40
|
"group/data-select border-input data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer",
|
|
40
|
-
className
|
|
41
|
+
className,
|
|
41
42
|
)}
|
|
42
43
|
{...props}
|
|
43
44
|
>
|
|
44
45
|
{children}
|
|
45
46
|
|
|
46
47
|
<SelectPrimitive.Icon asChild>
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
48
|
+
{icon ?? (
|
|
49
|
+
<ChevronDownIcon
|
|
50
|
+
className="
|
|
51
|
+
size-4 opacity-50 transition-all duration-200
|
|
52
|
+
group-data-[state=open]/data-select:rotate-180
|
|
53
|
+
group-data-[state=open]/data-select:opacity-100
|
|
54
|
+
group-data-[state=open]/data-select:text-gray-950!
|
|
55
|
+
"
|
|
56
|
+
/>
|
|
57
|
+
)}
|
|
55
58
|
</SelectPrimitive.Icon>
|
|
56
59
|
</SelectPrimitive.Trigger>
|
|
57
|
-
)
|
|
58
|
-
|
|
60
|
+
);
|
|
59
61
|
}
|
|
60
62
|
|
|
61
63
|
function SelectContent({
|
|
@@ -72,8 +74,8 @@ function SelectContent({
|
|
|
72
74
|
className={cn(
|
|
73
75
|
"bg-popover text-popover-foreground 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 relative z-[1001] max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
|
|
74
76
|
position === "popper" &&
|
|
75
|
-
|
|
76
|
-
className
|
|
77
|
+
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
|
78
|
+
className,
|
|
77
79
|
)}
|
|
78
80
|
position={position}
|
|
79
81
|
align={align}
|
|
@@ -84,7 +86,7 @@ function SelectContent({
|
|
|
84
86
|
className={cn(
|
|
85
87
|
"p-1",
|
|
86
88
|
position === "popper" &&
|
|
87
|
-
|
|
89
|
+
"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1",
|
|
88
90
|
)}
|
|
89
91
|
>
|
|
90
92
|
{children}
|
|
@@ -92,7 +94,7 @@ function SelectContent({
|
|
|
92
94
|
<SelectScrollDownButton />
|
|
93
95
|
</SelectPrimitive.Content>
|
|
94
96
|
</SelectPrimitive.Portal>
|
|
95
|
-
)
|
|
97
|
+
);
|
|
96
98
|
}
|
|
97
99
|
|
|
98
100
|
function SelectLabel({
|
|
@@ -105,7 +107,7 @@ function SelectLabel({
|
|
|
105
107
|
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
|
|
106
108
|
{...props}
|
|
107
109
|
/>
|
|
108
|
-
)
|
|
110
|
+
);
|
|
109
111
|
}
|
|
110
112
|
|
|
111
113
|
function SelectItem({
|
|
@@ -118,7 +120,7 @@ function SelectItem({
|
|
|
118
120
|
data-slot="select-item"
|
|
119
121
|
className={cn(
|
|
120
122
|
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 cursor-pointer",
|
|
121
|
-
className
|
|
123
|
+
className,
|
|
122
124
|
)}
|
|
123
125
|
{...props}
|
|
124
126
|
>
|
|
@@ -127,9 +129,11 @@ function SelectItem({
|
|
|
127
129
|
<CheckIcon className="size-4" />
|
|
128
130
|
</SelectPrimitive.ItemIndicator>
|
|
129
131
|
</span>
|
|
130
|
-
<SelectPrimitive.ItemText className="cursor-pointer">
|
|
132
|
+
<SelectPrimitive.ItemText className="cursor-pointer">
|
|
133
|
+
{children}
|
|
134
|
+
</SelectPrimitive.ItemText>
|
|
131
135
|
</SelectPrimitive.Item>
|
|
132
|
-
)
|
|
136
|
+
);
|
|
133
137
|
}
|
|
134
138
|
|
|
135
139
|
function SelectSeparator({
|
|
@@ -142,7 +146,7 @@ function SelectSeparator({
|
|
|
142
146
|
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
|
|
143
147
|
{...props}
|
|
144
148
|
/>
|
|
145
|
-
)
|
|
149
|
+
);
|
|
146
150
|
}
|
|
147
151
|
|
|
148
152
|
function SelectScrollUpButton({
|
|
@@ -154,13 +158,13 @@ function SelectScrollUpButton({
|
|
|
154
158
|
data-slot="select-scroll-up-button"
|
|
155
159
|
className={cn(
|
|
156
160
|
"flex cursor-default items-center justify-center py-1",
|
|
157
|
-
className
|
|
161
|
+
className,
|
|
158
162
|
)}
|
|
159
163
|
{...props}
|
|
160
164
|
>
|
|
161
165
|
<ChevronUpIcon className="size-4" />
|
|
162
166
|
</SelectPrimitive.ScrollUpButton>
|
|
163
|
-
)
|
|
167
|
+
);
|
|
164
168
|
}
|
|
165
169
|
|
|
166
170
|
function SelectScrollDownButton({
|
|
@@ -172,13 +176,13 @@ function SelectScrollDownButton({
|
|
|
172
176
|
data-slot="select-scroll-down-button"
|
|
173
177
|
className={cn(
|
|
174
178
|
"flex cursor-default items-center justify-center py-1",
|
|
175
|
-
className
|
|
179
|
+
className,
|
|
176
180
|
)}
|
|
177
181
|
{...props}
|
|
178
182
|
>
|
|
179
183
|
<ChevronDownIcon className="size-4" />
|
|
180
184
|
</SelectPrimitive.ScrollDownButton>
|
|
181
|
-
)
|
|
185
|
+
);
|
|
182
186
|
}
|
|
183
187
|
|
|
184
188
|
export {
|
|
@@ -192,4 +196,4 @@ export {
|
|
|
192
196
|
SelectSeparator,
|
|
193
197
|
SelectTrigger,
|
|
194
198
|
SelectValue,
|
|
195
|
-
}
|
|
199
|
+
};
|
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
"use client"
|
|
1
|
+
"use client";
|
|
2
2
|
|
|
3
|
-
import * as React from "react"
|
|
4
|
-
import * as SheetPrimitive from "@radix-ui/react-dialog"
|
|
5
|
-
import { XIcon } from "lucide-react"
|
|
6
|
-
import { cn } from "../../../infra/utils/clsx"
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import * as SheetPrimitive from "@radix-ui/react-dialog";
|
|
5
|
+
import { XIcon } from "lucide-react";
|
|
6
|
+
import { cn } from "../../../infra/utils/clsx";
|
|
7
7
|
|
|
8
8
|
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
|
|
9
|
-
return <SheetPrimitive.Root data-slot="sheet" {...props}
|
|
9
|
+
return <SheetPrimitive.Root data-slot="sheet" {...props} />;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
function SheetTrigger({
|
|
13
13
|
...props
|
|
14
14
|
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
|
|
15
|
-
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props}
|
|
15
|
+
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
function SheetClose({
|
|
19
19
|
...props
|
|
20
20
|
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
|
|
21
|
-
return <SheetPrimitive.Close data-slot="sheet-close" {...props}
|
|
21
|
+
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
function SheetPortal({
|
|
25
25
|
...props
|
|
26
26
|
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
|
|
27
|
-
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props}
|
|
27
|
+
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
function SheetOverlay({
|
|
@@ -36,11 +36,11 @@ function SheetOverlay({
|
|
|
36
36
|
data-slot="sheet-overlay"
|
|
37
37
|
className={cn(
|
|
38
38
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[1000] bg-black/50",
|
|
39
|
-
className
|
|
39
|
+
className,
|
|
40
40
|
)}
|
|
41
41
|
{...props}
|
|
42
42
|
/>
|
|
43
|
-
)
|
|
43
|
+
);
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
function SheetContent({
|
|
@@ -48,27 +48,41 @@ function SheetContent({
|
|
|
48
48
|
children,
|
|
49
49
|
side = "right",
|
|
50
50
|
showCloseButton = true,
|
|
51
|
+
noAnimation = false,
|
|
51
52
|
...props
|
|
52
53
|
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
|
|
53
|
-
side?: "top" | "right" | "bottom" | "left"
|
|
54
|
-
showCloseButton?: boolean
|
|
54
|
+
side?: "top" | "right" | "bottom" | "left";
|
|
55
|
+
showCloseButton?: boolean;
|
|
56
|
+
noAnimation?: boolean;
|
|
55
57
|
}) {
|
|
56
58
|
return (
|
|
57
59
|
<SheetPortal>
|
|
58
|
-
<SheetOverlay />
|
|
60
|
+
<SheetOverlay className={noAnimation ? "!animate-none" : undefined} />
|
|
59
61
|
<SheetPrimitive.Content
|
|
60
62
|
data-slot="sheet-content"
|
|
61
63
|
className={cn(
|
|
62
|
-
"bg-background
|
|
64
|
+
"bg-background fixed z-50 flex flex-col gap-4 shadow-lg",
|
|
65
|
+
!noAnimation &&
|
|
66
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
|
67
|
+
!noAnimation &&
|
|
68
|
+
side === "right" &&
|
|
69
|
+
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
|
|
70
|
+
!noAnimation &&
|
|
71
|
+
side === "left" &&
|
|
72
|
+
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
|
|
73
|
+
!noAnimation &&
|
|
74
|
+
side === "top" &&
|
|
75
|
+
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
|
76
|
+
!noAnimation &&
|
|
77
|
+
side === "bottom" &&
|
|
78
|
+
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
|
63
79
|
side === "right" &&
|
|
64
|
-
"
|
|
80
|
+
"inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
|
|
65
81
|
side === "left" &&
|
|
66
|
-
"
|
|
67
|
-
side === "top" &&
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
|
|
71
|
-
className
|
|
82
|
+
"inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
|
|
83
|
+
side === "top" && "inset-x-0 top-0 h-auto border-b",
|
|
84
|
+
side === "bottom" && "inset-x-0 bottom-0 h-auto border-t",
|
|
85
|
+
className,
|
|
72
86
|
)}
|
|
73
87
|
{...props}
|
|
74
88
|
>
|
|
@@ -84,7 +98,7 @@ function SheetContent({
|
|
|
84
98
|
)}
|
|
85
99
|
</SheetPrimitive.Content>
|
|
86
100
|
</SheetPortal>
|
|
87
|
-
)
|
|
101
|
+
);
|
|
88
102
|
}
|
|
89
103
|
|
|
90
104
|
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
@@ -94,7 +108,7 @@ function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
|
94
108
|
className={cn("flex flex-col gap-1.5 p-4", className)}
|
|
95
109
|
{...props}
|
|
96
110
|
/>
|
|
97
|
-
)
|
|
111
|
+
);
|
|
98
112
|
}
|
|
99
113
|
|
|
100
114
|
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
@@ -104,7 +118,7 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
|
104
118
|
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
|
105
119
|
{...props}
|
|
106
120
|
/>
|
|
107
|
-
)
|
|
121
|
+
);
|
|
108
122
|
}
|
|
109
123
|
|
|
110
124
|
function SheetTitle({
|
|
@@ -117,7 +131,7 @@ function SheetTitle({
|
|
|
117
131
|
className={cn("text-foreground font-semibold", className)}
|
|
118
132
|
{...props}
|
|
119
133
|
/>
|
|
120
|
-
)
|
|
134
|
+
);
|
|
121
135
|
}
|
|
122
136
|
|
|
123
137
|
function SheetDescription({
|
|
@@ -130,7 +144,7 @@ function SheetDescription({
|
|
|
130
144
|
className={cn("text-muted-foreground text-sm", className)}
|
|
131
145
|
{...props}
|
|
132
146
|
/>
|
|
133
|
-
)
|
|
147
|
+
);
|
|
134
148
|
}
|
|
135
149
|
|
|
136
150
|
export {
|
|
@@ -142,4 +156,4 @@ export {
|
|
|
142
156
|
SheetFooter,
|
|
143
157
|
SheetTitle,
|
|
144
158
|
SheetDescription,
|
|
145
|
-
}
|
|
159
|
+
};
|