fluxy-bot 0.8.9 → 0.9.0
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/README.md +53 -84
- package/bin/cli.js +1717 -6
- package/components.json +18 -18
- package/package.json +98 -109
- package/postcss.config.js +3 -3
- package/scripts/install.ps1 +1 -1
- package/scripts/install.sh +1 -1
- package/scripts/postinstall.js +47 -58
- package/shared/ai.ts +118 -202
- package/shared/config.ts +37 -39
- package/shared/logger.ts +6 -14
- package/shared/paths.ts +10 -16
- package/shared/relay.ts +89 -98
- package/supervisor/backend.ts +77 -89
- package/supervisor/chat/ARCHITECTURE.md +13 -14
- package/supervisor/chat/OnboardWizard.tsx +2194 -3419
- package/supervisor/chat/fluxy-main.tsx +495 -633
- package/supervisor/chat/fluxy.html +24 -36
- package/supervisor/chat/onboard-main.tsx +8 -8
- package/supervisor/chat/onboard.html +10 -13
- package/supervisor/chat/src/components/Chat/AudioBubble.tsx +94 -108
- package/supervisor/chat/src/components/Chat/ChatView.tsx +14 -36
- package/supervisor/chat/src/components/Chat/ImageLightbox.tsx +71 -89
- package/supervisor/chat/src/components/Chat/InputBar.tsx +498 -728
- package/supervisor/chat/src/components/Chat/MessageBubble.tsx +154 -246
- package/supervisor/chat/src/components/Chat/MessageList.tsx +114 -138
- package/supervisor/chat/src/components/Chat/TypingIndicator.tsx +38 -50
- package/supervisor/chat/src/components/LoginScreen.tsx +245 -296
- package/supervisor/chat/src/hooks/useChat.ts +210 -259
- package/supervisor/chat/src/hooks/useFluxyChat.ts +232 -322
- package/supervisor/chat/src/hooks/useSpeechRecognition.ts +126 -148
- package/supervisor/chat/src/lib/auth.ts +20 -23
- package/supervisor/chat/src/lib/ws-client.ts +113 -125
- package/supervisor/chat/src/styles/globals.css +76 -85
- package/supervisor/file-saver.ts +39 -52
- package/supervisor/fluxy-agent.ts +213 -292
- package/supervisor/index.ts +895 -1263
- package/supervisor/scheduler.ts +237 -299
- package/supervisor/tunnel.ts +113 -167
- package/supervisor/vite-dev.ts +51 -61
- package/supervisor/widget.js +135 -147
- package/supervisor/worker.ts +45 -49
- package/tsconfig.json +18 -24
- package/vite.config.ts +48 -55
- package/vite.fluxy.config.ts +34 -34
- package/worker/claude-auth.ts +202 -265
- package/worker/codex-auth.ts +144 -181
- package/worker/db.ts +63 -191
- package/worker/index.ts +601 -842
- package/workspace/MYSELF.md +1 -1
- package/workspace/PULSE.json +6 -6
- package/workspace/backend/index.ts +16 -19
- package/workspace/client/index.html +47 -60
- package/workspace/client/public/manifest.json +21 -21
- package/workspace/client/public/sw.js +29 -31
- package/workspace/client/src/App.tsx +91 -136
- package/workspace/client/src/components/Dashboard/DashboardPage.tsx +68 -72
- package/workspace/client/src/components/ErrorBoundary.tsx +11 -11
- package/workspace/client/src/components/Layout/DashboardLayout.tsx +35 -35
- package/workspace/client/src/components/Layout/Footer.tsx +12 -12
- package/workspace/client/src/components/Layout/MobileNav.tsx +23 -23
- package/workspace/client/src/components/Layout/Sidebar.tsx +81 -81
- package/workspace/client/src/components/ui/avatar.tsx +85 -85
- package/workspace/client/src/components/ui/badge.tsx +40 -41
- package/workspace/client/src/components/ui/button.tsx +56 -57
- package/workspace/client/src/components/ui/card.tsx +75 -75
- package/workspace/client/src/components/ui/dialog.tsx +114 -117
- package/workspace/client/src/components/ui/dropdown-menu.tsx +191 -199
- package/workspace/client/src/components/ui/input.tsx +17 -17
- package/workspace/client/src/components/ui/scroll-area.tsx +47 -47
- package/workspace/client/src/components/ui/select.tsx +145 -151
- package/workspace/client/src/components/ui/separator.tsx +21 -21
- package/workspace/client/src/components/ui/sheet.tsx +102 -102
- package/workspace/client/src/components/ui/skeleton.tsx +10 -10
- package/workspace/client/src/components/ui/switch.tsx +26 -26
- package/workspace/client/src/components/ui/tabs.tsx +69 -69
- package/workspace/client/src/components/ui/textarea.tsx +14 -14
- package/workspace/client/src/components/ui/tooltip.tsx +37 -37
- package/workspace/client/src/lib/utils.ts +1 -1
- package/workspace/client/src/main.tsx +3 -3
- package/workspace/client/src/styles/globals.css +76 -85
- package/workspace/skills/code-reviewer/.claude-plugin/plugin.json +3 -3
- package/workspace/skills/code-reviewer/skills/code-reviewer/SKILL.md +0 -6
- package/workspace/skills/daily-standup/.claude-plugin/plugin.json +3 -3
- package/workspace/skills/daily-standup/skills/daily-standup/SKILL.md +0 -7
- package/workspace/skills/workspace-helper/.claude-plugin/plugin.json +3 -3
- package/workspace/skills/workspace-helper/skills/workspace-helper/SKILL.md +0 -2
- package/bin/cli.backup.js +0 -2138
- package/cli/commands/daemon.ts +0 -42
- package/cli/commands/init.ts +0 -32
- package/cli/commands/start.ts +0 -113
- package/cli/commands/tunnel.temp.ts +0 -206
- package/cli/commands/tunnel.ts +0 -227
- package/cli/commands/update.ts +0 -163
- package/cli/core/base-adapter.ts +0 -156
- package/cli/core/cloudflared.ts +0 -113
- package/cli/core/config.ts +0 -73
- package/cli/core/os-detector.ts +0 -43
- package/cli/core/server.ts +0 -109
- package/cli/core/types.ts +0 -15
- package/cli/index.ts +0 -72
- package/cli/platforms/darwin.ts +0 -146
- package/cli/platforms/index.ts +0 -21
- package/cli/platforms/linux.ts +0 -156
- package/cli/platforms/win32.ts +0 -34
- package/cli/utils/ui.ts +0 -37
|
@@ -1,196 +1,190 @@
|
|
|
1
|
-
|
|
1
|
+
"use client"
|
|
2
2
|
|
|
3
|
-
import * as React from
|
|
4
|
-
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from
|
|
5
|
-
import { Select as SelectPrimitive } from
|
|
3
|
+
import * as React from "react"
|
|
4
|
+
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
|
|
5
|
+
import { Select as SelectPrimitive } from "radix-ui"
|
|
6
6
|
|
|
7
|
-
import { cn } from
|
|
7
|
+
import { cn } from "@/lib/utils"
|
|
8
8
|
|
|
9
9
|
function Select({
|
|
10
|
-
|
|
10
|
+
...props
|
|
11
11
|
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
|
12
|
-
|
|
12
|
+
return <SelectPrimitive.Root data-slot="select" {...props} />
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
function SelectGroup({
|
|
16
|
-
|
|
16
|
+
...props
|
|
17
17
|
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
|
18
|
-
|
|
18
|
+
return <SelectPrimitive.Group data-slot="select-group" {...props} />
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
function SelectValue({
|
|
22
|
-
|
|
22
|
+
...props
|
|
23
23
|
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
|
24
|
-
|
|
24
|
+
return <SelectPrimitive.Value data-slot="select-value" {...props} />
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
function SelectTrigger({
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
className,
|
|
29
|
+
size = "default",
|
|
30
|
+
children,
|
|
31
|
+
...props
|
|
32
32
|
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
|
33
|
-
|
|
33
|
+
size?: "sm" | "default"
|
|
34
34
|
}) {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
35
|
+
return (
|
|
36
|
+
<SelectPrimitive.Trigger
|
|
37
|
+
data-slot="select-trigger"
|
|
38
|
+
data-size={size}
|
|
39
|
+
className={cn(
|
|
40
|
+
"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",
|
|
41
|
+
className
|
|
42
|
+
)}
|
|
43
|
+
{...props}
|
|
44
|
+
>
|
|
45
|
+
{children}
|
|
46
|
+
<SelectPrimitive.Icon asChild>
|
|
47
|
+
<ChevronDownIcon className="size-4 opacity-50" />
|
|
48
|
+
</SelectPrimitive.Icon>
|
|
49
|
+
</SelectPrimitive.Trigger>
|
|
50
|
+
)
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
function SelectContent({
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
54
|
+
className,
|
|
55
|
+
children,
|
|
56
|
+
position = "item-aligned",
|
|
57
|
+
align = "center",
|
|
58
|
+
...props
|
|
59
59
|
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
60
|
+
return (
|
|
61
|
+
<SelectPrimitive.Portal>
|
|
62
|
+
<SelectPrimitive.Content
|
|
63
|
+
data-slot="select-content"
|
|
64
|
+
className={cn(
|
|
65
|
+
"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-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
|
|
66
|
+
position === "popper" &&
|
|
67
|
+
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
|
68
|
+
className
|
|
69
|
+
)}
|
|
70
|
+
position={position}
|
|
71
|
+
align={align}
|
|
72
|
+
{...props}
|
|
73
|
+
>
|
|
74
|
+
<SelectScrollUpButton />
|
|
75
|
+
<SelectPrimitive.Viewport
|
|
76
|
+
className={cn(
|
|
77
|
+
"p-1",
|
|
78
|
+
position === "popper" &&
|
|
79
|
+
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
|
|
80
|
+
)}
|
|
81
|
+
>
|
|
82
|
+
{children}
|
|
83
|
+
</SelectPrimitive.Viewport>
|
|
84
|
+
<SelectScrollDownButton />
|
|
85
|
+
</SelectPrimitive.Content>
|
|
86
|
+
</SelectPrimitive.Portal>
|
|
87
|
+
)
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
function SelectLabel({
|
|
91
|
-
|
|
92
|
-
|
|
91
|
+
className,
|
|
92
|
+
...props
|
|
93
93
|
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
{...props}
|
|
102
|
-
/>
|
|
103
|
-
);
|
|
94
|
+
return (
|
|
95
|
+
<SelectPrimitive.Label
|
|
96
|
+
data-slot="select-label"
|
|
97
|
+
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
|
|
98
|
+
{...props}
|
|
99
|
+
/>
|
|
100
|
+
)
|
|
104
101
|
}
|
|
105
102
|
|
|
106
103
|
function SelectItem({
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
104
|
+
className,
|
|
105
|
+
children,
|
|
106
|
+
...props
|
|
110
107
|
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
108
|
+
return (
|
|
109
|
+
<SelectPrimitive.Item
|
|
110
|
+
data-slot="select-item"
|
|
111
|
+
className={cn(
|
|
112
|
+
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default 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",
|
|
113
|
+
className
|
|
114
|
+
)}
|
|
115
|
+
{...props}
|
|
116
|
+
>
|
|
117
|
+
<span
|
|
118
|
+
data-slot="select-item-indicator"
|
|
119
|
+
className="absolute right-2 flex size-3.5 items-center justify-center"
|
|
120
|
+
>
|
|
121
|
+
<SelectPrimitive.ItemIndicator>
|
|
122
|
+
<CheckIcon className="size-4" />
|
|
123
|
+
</SelectPrimitive.ItemIndicator>
|
|
124
|
+
</span>
|
|
125
|
+
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
|
126
|
+
</SelectPrimitive.Item>
|
|
127
|
+
)
|
|
131
128
|
}
|
|
132
129
|
|
|
133
130
|
function SelectSeparator({
|
|
134
|
-
|
|
135
|
-
|
|
131
|
+
className,
|
|
132
|
+
...props
|
|
136
133
|
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
{...props}
|
|
145
|
-
/>
|
|
146
|
-
);
|
|
134
|
+
return (
|
|
135
|
+
<SelectPrimitive.Separator
|
|
136
|
+
data-slot="select-separator"
|
|
137
|
+
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
|
|
138
|
+
{...props}
|
|
139
|
+
/>
|
|
140
|
+
)
|
|
147
141
|
}
|
|
148
142
|
|
|
149
143
|
function SelectScrollUpButton({
|
|
150
|
-
|
|
151
|
-
|
|
144
|
+
className,
|
|
145
|
+
...props
|
|
152
146
|
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
147
|
+
return (
|
|
148
|
+
<SelectPrimitive.ScrollUpButton
|
|
149
|
+
data-slot="select-scroll-up-button"
|
|
150
|
+
className={cn(
|
|
151
|
+
"flex cursor-default items-center justify-center py-1",
|
|
152
|
+
className
|
|
153
|
+
)}
|
|
154
|
+
{...props}
|
|
155
|
+
>
|
|
156
|
+
<ChevronUpIcon className="size-4" />
|
|
157
|
+
</SelectPrimitive.ScrollUpButton>
|
|
158
|
+
)
|
|
165
159
|
}
|
|
166
160
|
|
|
167
161
|
function SelectScrollDownButton({
|
|
168
|
-
|
|
169
|
-
|
|
162
|
+
className,
|
|
163
|
+
...props
|
|
170
164
|
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
165
|
+
return (
|
|
166
|
+
<SelectPrimitive.ScrollDownButton
|
|
167
|
+
data-slot="select-scroll-down-button"
|
|
168
|
+
className={cn(
|
|
169
|
+
"flex cursor-default items-center justify-center py-1",
|
|
170
|
+
className
|
|
171
|
+
)}
|
|
172
|
+
{...props}
|
|
173
|
+
>
|
|
174
|
+
<ChevronDownIcon className="size-4" />
|
|
175
|
+
</SelectPrimitive.ScrollDownButton>
|
|
176
|
+
)
|
|
183
177
|
}
|
|
184
178
|
|
|
185
179
|
export {
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
}
|
|
180
|
+
Select,
|
|
181
|
+
SelectContent,
|
|
182
|
+
SelectGroup,
|
|
183
|
+
SelectItem,
|
|
184
|
+
SelectLabel,
|
|
185
|
+
SelectScrollDownButton,
|
|
186
|
+
SelectScrollUpButton,
|
|
187
|
+
SelectSeparator,
|
|
188
|
+
SelectTrigger,
|
|
189
|
+
SelectValue,
|
|
190
|
+
}
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
|
|
1
|
+
"use client"
|
|
2
2
|
|
|
3
|
-
import * as React from
|
|
4
|
-
import { Separator as SeparatorPrimitive } from
|
|
3
|
+
import * as React from "react"
|
|
4
|
+
import { Separator as SeparatorPrimitive } from "radix-ui"
|
|
5
5
|
|
|
6
|
-
import { cn } from
|
|
6
|
+
import { cn } from "@/lib/utils"
|
|
7
7
|
|
|
8
8
|
function Separator({
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
className,
|
|
10
|
+
orientation = "horizontal",
|
|
11
|
+
decorative = true,
|
|
12
|
+
...props
|
|
13
13
|
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
14
|
+
return (
|
|
15
|
+
<SeparatorPrimitive.Root
|
|
16
|
+
data-slot="separator"
|
|
17
|
+
decorative={decorative}
|
|
18
|
+
orientation={orientation}
|
|
19
|
+
className={cn(
|
|
20
|
+
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
|
|
21
|
+
className
|
|
22
|
+
)}
|
|
23
|
+
{...props}
|
|
24
|
+
/>
|
|
25
|
+
)
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
export { Separator }
|
|
28
|
+
export { Separator }
|
|
@@ -1,141 +1,141 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { XIcon } from
|
|
3
|
-
import { Dialog as SheetPrimitive } from
|
|
1
|
+
import * as React from "react"
|
|
2
|
+
import { XIcon } from "lucide-react"
|
|
3
|
+
import { Dialog as SheetPrimitive } from "radix-ui"
|
|
4
4
|
|
|
5
|
-
import { cn } from
|
|
5
|
+
import { cn } from "@/lib/utils"
|
|
6
6
|
|
|
7
7
|
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
|
|
8
|
-
|
|
8
|
+
return <SheetPrimitive.Root data-slot="sheet" {...props} />
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
function SheetTrigger({
|
|
12
|
-
|
|
12
|
+
...props
|
|
13
13
|
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
|
|
14
|
-
|
|
14
|
+
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
function SheetClose({
|
|
18
|
-
|
|
18
|
+
...props
|
|
19
19
|
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
|
|
20
|
-
|
|
20
|
+
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
function SheetPortal({
|
|
24
|
-
|
|
24
|
+
...props
|
|
25
25
|
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
|
|
26
|
-
|
|
26
|
+
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
function SheetOverlay({
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
className,
|
|
31
|
+
...props
|
|
32
32
|
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
33
|
+
return (
|
|
34
|
+
<SheetPrimitive.Overlay
|
|
35
|
+
data-slot="sheet-overlay"
|
|
36
|
+
className={cn(
|
|
37
|
+
"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-50 bg-black/50",
|
|
38
|
+
className
|
|
39
|
+
)}
|
|
40
|
+
{...props}
|
|
41
|
+
/>
|
|
42
|
+
)
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
function SheetContent({
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
46
|
+
className,
|
|
47
|
+
children,
|
|
48
|
+
side = "right",
|
|
49
|
+
showCloseButton = true,
|
|
50
|
+
...props
|
|
51
51
|
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
|
|
52
|
-
|
|
53
|
-
|
|
52
|
+
side?: "top" | "right" | "bottom" | "left"
|
|
53
|
+
showCloseButton?: boolean
|
|
54
54
|
}) {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
55
|
+
return (
|
|
56
|
+
<SheetPortal>
|
|
57
|
+
<SheetOverlay />
|
|
58
|
+
<SheetPrimitive.Content
|
|
59
|
+
data-slot="sheet-content"
|
|
60
|
+
className={cn(
|
|
61
|
+
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
|
62
|
+
side === "right" &&
|
|
63
|
+
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
|
|
64
|
+
side === "left" &&
|
|
65
|
+
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
|
|
66
|
+
side === "top" &&
|
|
67
|
+
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
|
|
68
|
+
side === "bottom" &&
|
|
69
|
+
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
|
|
70
|
+
className
|
|
71
|
+
)}
|
|
72
|
+
{...props}
|
|
73
|
+
>
|
|
74
|
+
{children}
|
|
75
|
+
{showCloseButton && (
|
|
76
|
+
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
|
|
77
|
+
<XIcon className="size-4" />
|
|
78
|
+
<span className="sr-only">Close</span>
|
|
79
|
+
</SheetPrimitive.Close>
|
|
80
|
+
)}
|
|
81
|
+
</SheetPrimitive.Content>
|
|
82
|
+
</SheetPortal>
|
|
83
|
+
)
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
-
function SheetHeader({ className, ...props }: React.ComponentProps<
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
86
|
+
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
87
|
+
return (
|
|
88
|
+
<div
|
|
89
|
+
data-slot="sheet-header"
|
|
90
|
+
className={cn("flex flex-col gap-1.5 p-4", className)}
|
|
91
|
+
{...props}
|
|
92
|
+
/>
|
|
93
|
+
)
|
|
94
94
|
}
|
|
95
95
|
|
|
96
|
-
function SheetFooter({ className, ...props }: React.ComponentProps<
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
96
|
+
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
97
|
+
return (
|
|
98
|
+
<div
|
|
99
|
+
data-slot="sheet-footer"
|
|
100
|
+
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
|
101
|
+
{...props}
|
|
102
|
+
/>
|
|
103
|
+
)
|
|
104
104
|
}
|
|
105
105
|
|
|
106
106
|
function SheetTitle({
|
|
107
|
-
|
|
108
|
-
|
|
107
|
+
className,
|
|
108
|
+
...props
|
|
109
109
|
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
110
|
+
return (
|
|
111
|
+
<SheetPrimitive.Title
|
|
112
|
+
data-slot="sheet-title"
|
|
113
|
+
className={cn("text-foreground font-semibold", className)}
|
|
114
|
+
{...props}
|
|
115
|
+
/>
|
|
116
|
+
)
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
function SheetDescription({
|
|
120
|
-
|
|
121
|
-
|
|
120
|
+
className,
|
|
121
|
+
...props
|
|
122
122
|
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
123
|
+
return (
|
|
124
|
+
<SheetPrimitive.Description
|
|
125
|
+
data-slot="sheet-description"
|
|
126
|
+
className={cn("text-muted-foreground text-sm", className)}
|
|
127
|
+
{...props}
|
|
128
|
+
/>
|
|
129
|
+
)
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
export {
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
}
|
|
133
|
+
Sheet,
|
|
134
|
+
SheetTrigger,
|
|
135
|
+
SheetClose,
|
|
136
|
+
SheetContent,
|
|
137
|
+
SheetHeader,
|
|
138
|
+
SheetFooter,
|
|
139
|
+
SheetTitle,
|
|
140
|
+
SheetDescription,
|
|
141
|
+
}
|