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