@bytespell/shella 0.2.2 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. package/dist/bin/shella-init.js +28 -93
  2. package/dist/bin/shella-init.js.map +1 -1
  3. package/dist/src/api.d.ts.map +1 -1
  4. package/dist/src/api.js +36 -2
  5. package/dist/src/api.js.map +1 -1
  6. package/dist/src/index.d.ts.map +1 -1
  7. package/dist/src/index.js +60 -5
  8. package/dist/src/index.js.map +1 -1
  9. package/dist/src/logger.d.ts.map +1 -1
  10. package/dist/src/logger.js +46 -1
  11. package/dist/src/logger.js.map +1 -1
  12. package/dist/src/plugin-manager.d.ts +22 -1
  13. package/dist/src/plugin-manager.d.ts.map +1 -1
  14. package/dist/src/plugin-manager.js +84 -32
  15. package/dist/src/plugin-manager.js.map +1 -1
  16. package/dist/src/port-allocator.js +1 -1
  17. package/dist/src/port-allocator.js.map +1 -1
  18. package/dist/src/registry.d.ts +15 -1
  19. package/dist/src/registry.d.ts.map +1 -1
  20. package/dist/src/registry.js +29 -0
  21. package/dist/src/registry.js.map +1 -1
  22. package/dist/src/types.d.ts +20 -2
  23. package/dist/src/types.d.ts.map +1 -1
  24. package/dist/src/types.js.map +1 -1
  25. package/dist/src/watcher.d.ts +4 -3
  26. package/dist/src/watcher.d.ts.map +1 -1
  27. package/dist/src/watcher.js +91 -74
  28. package/dist/src/watcher.js.map +1 -1
  29. package/package.json +6 -2
  30. package/bundled-plugins/agent/README.md +0 -3
  31. package/bundled-plugins/agent/components.json +0 -24
  32. package/bundled-plugins/agent/dist/assets/index-BGeDYr6P.css +0 -1
  33. package/bundled-plugins/agent/dist/assets/index-J14lI3Er.js +0 -49
  34. package/bundled-plugins/agent/dist/assets/inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2 +0 -0
  35. package/bundled-plugins/agent/dist/assets/inter-cyrillic-wght-normal-DqGufNeO.woff2 +0 -0
  36. package/bundled-plugins/agent/dist/assets/inter-greek-ext-wght-normal-DlzME5K_.woff2 +0 -0
  37. package/bundled-plugins/agent/dist/assets/inter-greek-wght-normal-CkhJZR-_.woff2 +0 -0
  38. package/bundled-plugins/agent/dist/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2 +0 -0
  39. package/bundled-plugins/agent/dist/assets/inter-latin-wght-normal-Dx4kXJAl.woff2 +0 -0
  40. package/bundled-plugins/agent/dist/assets/inter-vietnamese-wght-normal-CBcvBZtf.woff2 +0 -0
  41. package/bundled-plugins/agent/dist/index.html +0 -14
  42. package/bundled-plugins/agent/dist/vite.svg +0 -1
  43. package/bundled-plugins/agent/eslint.config.js +0 -23
  44. package/bundled-plugins/agent/index.html +0 -13
  45. package/bundled-plugins/agent/package-lock.json +0 -11034
  46. package/bundled-plugins/agent/package.json +0 -52
  47. package/bundled-plugins/agent/public/vite.svg +0 -1
  48. package/bundled-plugins/agent/server.js +0 -240
  49. package/bundled-plugins/agent/src/App.tsx +0 -586
  50. package/bundled-plugins/agent/src/assets/react.svg +0 -1
  51. package/bundled-plugins/agent/src/components/ui/alert-dialog.tsx +0 -182
  52. package/bundled-plugins/agent/src/components/ui/badge.tsx +0 -45
  53. package/bundled-plugins/agent/src/components/ui/button.tsx +0 -60
  54. package/bundled-plugins/agent/src/components/ui/card.tsx +0 -94
  55. package/bundled-plugins/agent/src/components/ui/combobox.tsx +0 -294
  56. package/bundled-plugins/agent/src/components/ui/dropdown-menu.tsx +0 -253
  57. package/bundled-plugins/agent/src/components/ui/field.tsx +0 -225
  58. package/bundled-plugins/agent/src/components/ui/input-group.tsx +0 -147
  59. package/bundled-plugins/agent/src/components/ui/input.tsx +0 -19
  60. package/bundled-plugins/agent/src/components/ui/label.tsx +0 -24
  61. package/bundled-plugins/agent/src/components/ui/select.tsx +0 -185
  62. package/bundled-plugins/agent/src/components/ui/separator.tsx +0 -26
  63. package/bundled-plugins/agent/src/components/ui/switch.tsx +0 -31
  64. package/bundled-plugins/agent/src/components/ui/textarea.tsx +0 -18
  65. package/bundled-plugins/agent/src/index.css +0 -131
  66. package/bundled-plugins/agent/src/lib/utils.ts +0 -6
  67. package/bundled-plugins/agent/src/main.tsx +0 -11
  68. package/bundled-plugins/agent/tsconfig.app.json +0 -32
  69. package/bundled-plugins/agent/tsconfig.json +0 -13
  70. package/bundled-plugins/agent/tsconfig.node.json +0 -26
  71. package/bundled-plugins/agent/vite.config.ts +0 -14
  72. package/bundled-plugins/terminal/index.html +0 -24
  73. package/bundled-plugins/terminal/package-lock.json +0 -3316
  74. package/bundled-plugins/terminal/package.json +0 -37
  75. package/bundled-plugins/terminal/server.ts +0 -169
  76. package/bundled-plugins/terminal/src/App.tsx +0 -168
  77. package/bundled-plugins/terminal/src/main.tsx +0 -9
  78. package/bundled-plugins/terminal/tsconfig.json +0 -22
  79. package/bundled-plugins/terminal/vite.config.ts +0 -10
  80. package/templates/express/package.json +0 -11
  81. package/templates/express/public/index.html +0 -64
  82. package/templates/express/server.js +0 -37
  83. package/templates/vanilla/package.json +0 -8
  84. package/templates/vanilla/public/index.html +0 -64
  85. package/templates/vanilla/server.js +0 -54
@@ -1,182 +0,0 @@
1
- import * as React from "react"
2
- import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
3
-
4
- import { cn } from "@/lib/utils"
5
- import { Button } from "@/components/ui/button"
6
-
7
- function AlertDialog({
8
- ...props
9
- }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
10
- return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
11
- }
12
-
13
- function AlertDialogTrigger({
14
- ...props
15
- }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
16
- return (
17
- <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
18
- )
19
- }
20
-
21
- function AlertDialogPortal({
22
- ...props
23
- }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
24
- return (
25
- <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
26
- )
27
- }
28
-
29
- function AlertDialogOverlay({
30
- className,
31
- ...props
32
- }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
33
- return (
34
- <AlertDialogPrimitive.Overlay
35
- data-slot="alert-dialog-overlay"
36
- className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
37
- {...props}
38
- />
39
- )
40
- }
41
-
42
- function AlertDialogContent({
43
- className,
44
- size = "default",
45
- ...props
46
- }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
47
- size?: "default" | "sm"
48
- }) {
49
- return (
50
- <AlertDialogPortal>
51
- <AlertDialogOverlay />
52
- <AlertDialogPrimitive.Content
53
- data-slot="alert-dialog-content"
54
- data-size={size}
55
- className={cn(
56
- "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 gap-6 rounded-xl p-6 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
57
- className
58
- )}
59
- {...props}
60
- />
61
- </AlertDialogPortal>
62
- )
63
- }
64
-
65
- function AlertDialogHeader({
66
- className,
67
- ...props
68
- }: React.ComponentProps<"div">) {
69
- return (
70
- <div
71
- data-slot="alert-dialog-header"
72
- className={cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className)}
73
- {...props}
74
- />
75
- )
76
- }
77
-
78
- function AlertDialogFooter({
79
- className,
80
- ...props
81
- }: React.ComponentProps<"div">) {
82
- return (
83
- <div
84
- data-slot="alert-dialog-footer"
85
- className={cn(
86
- "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
87
- className
88
- )}
89
- {...props}
90
- />
91
- )
92
- }
93
-
94
- function AlertDialogMedia({
95
- className,
96
- ...props
97
- }: React.ComponentProps<"div">) {
98
- return (
99
- <div
100
- data-slot="alert-dialog-media"
101
- className={cn("bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8", className)}
102
- {...props}
103
- />
104
- )
105
- }
106
-
107
- function AlertDialogTitle({
108
- className,
109
- ...props
110
- }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
111
- return (
112
- <AlertDialogPrimitive.Title
113
- data-slot="alert-dialog-title"
114
- className={cn("text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className)}
115
- {...props}
116
- />
117
- )
118
- }
119
-
120
- function AlertDialogDescription({
121
- className,
122
- ...props
123
- }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
124
- return (
125
- <AlertDialogPrimitive.Description
126
- data-slot="alert-dialog-description"
127
- className={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className)}
128
- {...props}
129
- />
130
- )
131
- }
132
-
133
- function AlertDialogAction({
134
- className,
135
- variant = "default",
136
- size = "default",
137
- ...props
138
- }: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
139
- Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
140
- return (
141
- <Button variant={variant} size={size} asChild>
142
- <AlertDialogPrimitive.Action
143
- data-slot="alert-dialog-action"
144
- className={cn(className)}
145
- {...props}
146
- />
147
- </Button>
148
- )
149
- }
150
-
151
- function AlertDialogCancel({
152
- className,
153
- variant = "outline",
154
- size = "default",
155
- ...props
156
- }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
157
- Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
158
- return (
159
- <Button variant={variant} size={size} asChild>
160
- <AlertDialogPrimitive.Cancel
161
- data-slot="alert-dialog-cancel"
162
- className={cn(className)}
163
- {...props}
164
- />
165
- </Button>
166
- )
167
- }
168
-
169
- export {
170
- AlertDialog,
171
- AlertDialogAction,
172
- AlertDialogCancel,
173
- AlertDialogContent,
174
- AlertDialogDescription,
175
- AlertDialogFooter,
176
- AlertDialogHeader,
177
- AlertDialogMedia,
178
- AlertDialogOverlay,
179
- AlertDialogPortal,
180
- AlertDialogTitle,
181
- AlertDialogTrigger,
182
- }
@@ -1,45 +0,0 @@
1
- import * as React from "react"
2
- import { cva, type VariantProps } from "class-variance-authority"
3
- import { Slot } from "radix-ui"
4
-
5
- import { cn } from "@/lib/utils"
6
-
7
- const badgeVariants = cva(
8
- "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
9
- {
10
- variants: {
11
- variant: {
12
- default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
13
- secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
14
- destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
15
- outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
16
- ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
17
- link: "text-primary underline-offset-4 hover:underline",
18
- },
19
- },
20
- defaultVariants: {
21
- variant: "default",
22
- },
23
- }
24
- )
25
-
26
- function Badge({
27
- className,
28
- variant = "default",
29
- asChild = false,
30
- ...props
31
- }: React.ComponentProps<"span"> &
32
- VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
33
- const Comp = asChild ? Slot.Root : "span"
34
-
35
- return (
36
- <Comp
37
- data-slot="badge"
38
- data-variant={variant}
39
- className={cn(badgeVariants({ variant }), className)}
40
- {...props}
41
- />
42
- )
43
- }
44
-
45
- export { Badge, badgeVariants }
@@ -1,60 +0,0 @@
1
- import * as React from "react"
2
- import { cva, type VariantProps } from "class-variance-authority"
3
- import { Slot } from "radix-ui"
4
-
5
- import { cn } from "@/lib/utils"
6
-
7
- const buttonVariants = cva(
8
- "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:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
9
- {
10
- variants: {
11
- variant: {
12
- default: "bg-primary text-primary-foreground hover:bg-primary/80",
13
- outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs",
14
- secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
15
- ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
16
- destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
17
- link: "text-primary underline-offset-4 hover:underline",
18
- },
19
- size: {
20
- default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
21
- xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
22
- sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
23
- lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
24
- icon: "size-9",
25
- "icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
26
- "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
27
- "icon-lg": "size-10",
28
- },
29
- },
30
- defaultVariants: {
31
- variant: "default",
32
- size: "default",
33
- },
34
- }
35
- )
36
-
37
- function Button({
38
- className,
39
- variant = "default",
40
- size = "default",
41
- asChild = false,
42
- ...props
43
- }: React.ComponentProps<"button"> &
44
- VariantProps<typeof buttonVariants> & {
45
- asChild?: boolean
46
- }) {
47
- const Comp = asChild ? Slot.Root : "button"
48
-
49
- return (
50
- <Comp
51
- data-slot="button"
52
- data-variant={variant}
53
- data-size={size}
54
- className={cn(buttonVariants({ variant, size, className }))}
55
- {...props}
56
- />
57
- )
58
- }
59
-
60
- export { Button, buttonVariants }
@@ -1,94 +0,0 @@
1
- import * as React from "react"
2
-
3
- import { cn } from "@/lib/utils"
4
-
5
- function Card({
6
- className,
7
- size = "default",
8
- ...props
9
- }: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
10
- return (
11
- <div
12
- data-slot="card"
13
- data-size={size}
14
- className={cn("ring-foreground/10 bg-card text-card-foreground gap-6 overflow-hidden rounded-xl py-6 text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
15
- {...props}
16
- />
17
- )
18
- }
19
-
20
- function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
21
- return (
22
- <div
23
- data-slot="card-header"
24
- className={cn(
25
- "gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
26
- className
27
- )}
28
- {...props}
29
- />
30
- )
31
- }
32
-
33
- function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
34
- return (
35
- <div
36
- data-slot="card-title"
37
- className={cn("text-base leading-normal font-medium group-data-[size=sm]/card:text-sm", className)}
38
- {...props}
39
- />
40
- )
41
- }
42
-
43
- function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
44
- return (
45
- <div
46
- data-slot="card-description"
47
- className={cn("text-muted-foreground text-sm", className)}
48
- {...props}
49
- />
50
- )
51
- }
52
-
53
- function CardAction({ className, ...props }: React.ComponentProps<"div">) {
54
- return (
55
- <div
56
- data-slot="card-action"
57
- className={cn(
58
- "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
59
- className
60
- )}
61
- {...props}
62
- />
63
- )
64
- }
65
-
66
- function CardContent({ className, ...props }: React.ComponentProps<"div">) {
67
- return (
68
- <div
69
- data-slot="card-content"
70
- className={cn("px-6 group-data-[size=sm]/card:px-4", className)}
71
- {...props}
72
- />
73
- )
74
- }
75
-
76
- function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
77
- return (
78
- <div
79
- data-slot="card-footer"
80
- className={cn("rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4 flex items-center", className)}
81
- {...props}
82
- />
83
- )
84
- }
85
-
86
- export {
87
- Card,
88
- CardHeader,
89
- CardFooter,
90
- CardTitle,
91
- CardAction,
92
- CardDescription,
93
- CardContent,
94
- }
@@ -1,294 +0,0 @@
1
- "use client"
2
-
3
- import * as React from "react"
4
- import { Combobox as ComboboxPrimitive } from "@base-ui/react"
5
-
6
- import { cn } from "@/lib/utils"
7
- import { Button } from "@/components/ui/button"
8
- import {
9
- InputGroup,
10
- InputGroupAddon,
11
- InputGroupButton,
12
- InputGroupInput,
13
- } from "@/components/ui/input-group"
14
- import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react"
15
-
16
- const Combobox = ComboboxPrimitive.Root
17
-
18
- function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
19
- return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
20
- }
21
-
22
- function ComboboxTrigger({
23
- className,
24
- children,
25
- ...props
26
- }: ComboboxPrimitive.Trigger.Props) {
27
- return (
28
- <ComboboxPrimitive.Trigger
29
- data-slot="combobox-trigger"
30
- className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
31
- {...props}
32
- >
33
- {children}
34
- <ChevronDownIcon className="text-muted-foreground size-4 pointer-events-none" />
35
- </ComboboxPrimitive.Trigger>
36
- )
37
- }
38
-
39
- function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
40
- return (
41
- <ComboboxPrimitive.Clear
42
- data-slot="combobox-clear"
43
- render={<InputGroupButton variant="ghost" size="icon-xs" />}
44
- className={cn(className)}
45
- {...props}
46
- >
47
- <XIcon className="pointer-events-none" />
48
- </ComboboxPrimitive.Clear>
49
- )
50
- }
51
-
52
- function ComboboxInput({
53
- className,
54
- children,
55
- disabled = false,
56
- showTrigger = true,
57
- showClear = false,
58
- ...props
59
- }: ComboboxPrimitive.Input.Props & {
60
- showTrigger?: boolean
61
- showClear?: boolean
62
- }) {
63
- return (
64
- <InputGroup className={cn("w-auto", className)}>
65
- <ComboboxPrimitive.Input
66
- render={<InputGroupInput disabled={disabled} />}
67
- {...props}
68
- />
69
- <InputGroupAddon align="inline-end">
70
- {showTrigger && (
71
- <InputGroupButton
72
- size="icon-xs"
73
- variant="ghost"
74
- asChild
75
- data-slot="input-group-button"
76
- className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
77
- disabled={disabled}
78
- >
79
- <ComboboxTrigger />
80
- </InputGroupButton>
81
- )}
82
- {showClear && <ComboboxClear disabled={disabled} />}
83
- </InputGroupAddon>
84
- {children}
85
- </InputGroup>
86
- )
87
- }
88
-
89
- function ComboboxContent({
90
- className,
91
- side = "bottom",
92
- sideOffset = 6,
93
- align = "start",
94
- alignOffset = 0,
95
- anchor,
96
- ...props
97
- }: ComboboxPrimitive.Popup.Props &
98
- Pick<
99
- ComboboxPrimitive.Positioner.Props,
100
- "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
101
- >) {
102
- return (
103
- <ComboboxPrimitive.Portal>
104
- <ComboboxPrimitive.Positioner
105
- side={side}
106
- sideOffset={sideOffset}
107
- align={align}
108
- alignOffset={alignOffset}
109
- anchor={anchor}
110
- className="isolate z-50"
111
- >
112
- <ComboboxPrimitive.Popup
113
- data-slot="combobox-content"
114
- data-chips={!!anchor}
115
- className={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-md shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)", className )}
116
- {...props}
117
- />
118
- </ComboboxPrimitive.Positioner>
119
- </ComboboxPrimitive.Portal>
120
- )
121
- }
122
-
123
- function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
124
- return (
125
- <ComboboxPrimitive.List
126
- data-slot="combobox-list"
127
- className={cn(
128
- "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain",
129
- className
130
- )}
131
- {...props}
132
- />
133
- )
134
- }
135
-
136
- function ComboboxItem({
137
- className,
138
- children,
139
- ...props
140
- }: ComboboxPrimitive.Item.Props) {
141
- return (
142
- <ComboboxPrimitive.Item
143
- data-slot="combobox-item"
144
- className={cn(
145
- "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
146
- className
147
- )}
148
- {...props}
149
- >
150
- {children}
151
- <ComboboxPrimitive.ItemIndicator
152
- render={<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />}
153
- >
154
- <CheckIcon className="pointer-events-none" />
155
- </ComboboxPrimitive.ItemIndicator>
156
- </ComboboxPrimitive.Item>
157
- )
158
- }
159
-
160
- function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
161
- return (
162
- <ComboboxPrimitive.Group
163
- data-slot="combobox-group"
164
- className={cn(className)}
165
- {...props}
166
- />
167
- )
168
- }
169
-
170
- function ComboboxLabel({
171
- className,
172
- ...props
173
- }: ComboboxPrimitive.GroupLabel.Props) {
174
- return (
175
- <ComboboxPrimitive.GroupLabel
176
- data-slot="combobox-label"
177
- className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
178
- {...props}
179
- />
180
- )
181
- }
182
-
183
- function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
184
- return (
185
- <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
186
- )
187
- }
188
-
189
- function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
190
- return (
191
- <ComboboxPrimitive.Empty
192
- data-slot="combobox-empty"
193
- className={cn("text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex", className)}
194
- {...props}
195
- />
196
- )
197
- }
198
-
199
- function ComboboxSeparator({
200
- className,
201
- ...props
202
- }: ComboboxPrimitive.Separator.Props) {
203
- return (
204
- <ComboboxPrimitive.Separator
205
- data-slot="combobox-separator"
206
- className={cn("bg-border -mx-1 my-1 h-px", className)}
207
- {...props}
208
- />
209
- )
210
- }
211
-
212
- function ComboboxChips({
213
- className,
214
- ...props
215
- }: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
216
- ComboboxPrimitive.Chips.Props) {
217
- return (
218
- <ComboboxPrimitive.Chips
219
- data-slot="combobox-chips"
220
- className={cn("dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5", className)}
221
- {...props}
222
- />
223
- )
224
- }
225
-
226
- function ComboboxChip({
227
- className,
228
- children,
229
- showRemove = true,
230
- ...props
231
- }: ComboboxPrimitive.Chip.Props & {
232
- showRemove?: boolean
233
- }) {
234
- return (
235
- <ComboboxPrimitive.Chip
236
- data-slot="combobox-chip"
237
- className={cn(
238
- "bg-muted text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50",
239
- className
240
- )}
241
- {...props}
242
- >
243
- {children}
244
- {showRemove && (
245
- <ComboboxPrimitive.ChipRemove
246
- render={<Button variant="ghost" size="icon-xs" />}
247
- className="-ml-1 opacity-50 hover:opacity-100"
248
- data-slot="combobox-chip-remove"
249
- >
250
- <XIcon className="pointer-events-none" />
251
- </ComboboxPrimitive.ChipRemove>
252
- )}
253
- </ComboboxPrimitive.Chip>
254
- )
255
- }
256
-
257
- function ComboboxChipsInput({
258
- className,
259
- ...props
260
- }: ComboboxPrimitive.Input.Props) {
261
- return (
262
- <ComboboxPrimitive.Input
263
- data-slot="combobox-chip-input"
264
- className={cn(
265
- "min-w-16 flex-1 outline-none",
266
- className
267
- )}
268
- {...props}
269
- />
270
- )
271
- }
272
-
273
- function useComboboxAnchor() {
274
- return React.useRef<HTMLDivElement | null>(null)
275
- }
276
-
277
- export {
278
- Combobox,
279
- ComboboxInput,
280
- ComboboxContent,
281
- ComboboxList,
282
- ComboboxItem,
283
- ComboboxGroup,
284
- ComboboxLabel,
285
- ComboboxCollection,
286
- ComboboxEmpty,
287
- ComboboxSeparator,
288
- ComboboxChips,
289
- ComboboxChip,
290
- ComboboxChipsInput,
291
- ComboboxTrigger,
292
- ComboboxValue,
293
- useComboboxAnchor,
294
- }