@playfast/reform-better-hub-ui-primitives 0.2.2 → 0.3.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 (25) hide show
  1. package/README.md +9 -9
  2. package/package.json +23 -23
  3. package/src/components/agent-icon.tsx +16 -16
  4. package/src/components/autocomplete.tsx +166 -162
  5. package/src/components/badge.tsx +46 -45
  6. package/src/components/button.tsx +56 -63
  7. package/src/components/combobox.tsx +233 -228
  8. package/src/components/command.tsx +135 -139
  9. package/src/components/dialog.tsx +106 -98
  10. package/src/components/dropdown-menu.tsx +118 -115
  11. package/src/components/github-background.tsx +214 -216
  12. package/src/components/halftone-background.tsx +164 -155
  13. package/src/components/halftone-config.ts +8 -8
  14. package/src/components/input-group.tsx +149 -147
  15. package/src/components/input.tsx +17 -17
  16. package/src/components/live-duration.tsx +70 -64
  17. package/src/components/logo.tsx +9 -13
  18. package/src/components/popover.tsx +60 -62
  19. package/src/components/resize-handle.tsx +73 -75
  20. package/src/components/sheet.tsx +120 -112
  21. package/src/components/textarea.tsx +15 -15
  22. package/src/components/time-ago.tsx +64 -62
  23. package/src/components/tooltip.tsx +48 -42
  24. package/src/foundation/styles.css +6 -4
  25. package/src/index.ts +21 -21
package/src/components/button.tsx CHANGED
@@ -1,73 +1,66 @@
1
- import { Slot } from "@radix-ui/react-slot";
2
- import type { VariantProps } from "class-variance-authority";
3
- import { cva } from "class-variance-authority";
4
- import type { ClassProp } from "class-variance-authority/types";
5
- import type * as React from "react";
6
- import { cn } from "../foundation/cn";
1
+ import { Slot } from '@radix-ui/react-slot'
2
+ import type { VariantProps } from 'class-variance-authority'
3
+ import { cva } from 'class-variance-authority'
4
+ import type { ClassProp } from 'class-variance-authority/types'
5
+ import type * as React from 'react'
6
+ import { cn } from '../foundation/cn'
7
7
 
8
8
  type ButtonVariantsExternalApi = (
9
- props?:
10
- | ({
11
- variant?:
12
- | "default"
13
- | "destructive"
14
- | "outline"
15
- | "secondary"
16
- | "ghost"
17
- | "link"
18
- | undefined;
19
- size?: "default" | "sm" | "lg" | "icon" | undefined;
20
- } & ClassProp)
21
- | undefined,
22
- ) => string;
9
+ props?:
10
+ | ({
11
+ variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | undefined
12
+ size?: 'default' | 'sm' | 'lg' | 'icon' | undefined
13
+ } & ClassProp)
14
+ | undefined,
15
+ ) => string
23
16
 
24
17
  const buttonVariants: ButtonVariantsExternalApi = cva(
25
- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
26
- {
27
- variants: {
28
- variant: {
29
- default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
30
- destructive:
31
- "bg-destructive text-white shadow-xs hover:bg-destructive/90",
32
- outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
33
- secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
34
- ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
35
- link: "text-primary underline-offset-4 hover:underline",
36
- },
37
- size: {
38
- default: "h-9 px-4 py-2 has-[>svg]:px-3",
39
- sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
40
- lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
41
- icon: "size-9",
42
- },
43
- },
44
- defaultVariants: {
45
- variant: "default",
46
- size: "default",
47
- },
48
- },
49
- );
18
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
19
+ {
20
+ variants: {
21
+ variant: {
22
+ default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
23
+ destructive: 'bg-destructive text-white shadow-xs hover:bg-destructive/90',
24
+ outline:
25
+ 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
26
+ secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
27
+ ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
28
+ link: 'text-primary underline-offset-4 hover:underline',
29
+ },
30
+ size: {
31
+ default: 'h-9 px-4 py-2 has-[>svg]:px-3',
32
+ sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
33
+ lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
34
+ icon: 'size-9',
35
+ },
36
+ },
37
+ defaultVariants: {
38
+ variant: 'default',
39
+ size: 'default',
40
+ },
41
+ },
42
+ )
50
43
 
51
- type ButtonPropsExternalApi = React.ComponentProps<"button"> &
52
- VariantProps<typeof buttonVariants> & {
53
- asChild?: boolean;
54
- };
44
+ type ButtonPropsExternalApi = React.ComponentProps<'button'> &
45
+ VariantProps<typeof buttonVariants> & {
46
+ asChild?: boolean
47
+ }
55
48
 
56
49
  function Button({
57
- className,
58
- variant,
59
- size,
60
- asChild = false,
61
- ...props
50
+ className,
51
+ variant,
52
+ size,
53
+ asChild = false,
54
+ ...props
62
55
  }: ButtonPropsExternalApi): React.JSX.Element {
63
- const Comp = asChild ? Slot : "button";
64
- return (
65
- <Comp
66
- data-slot="button"
67
- className={cn(buttonVariants({ variant, size, className }))}
68
- {...props}
69
- />
70
- );
56
+ const Comp = asChild ? Slot : 'button'
57
+ return (
58
+ <Comp
59
+ data-slot="button"
60
+ className={cn(buttonVariants({ variant, size, className }))}
61
+ {...props}
62
+ />
63
+ )
71
64
  }
72
65
 
73
- export { Button, buttonVariants };
66
+ export { Button, buttonVariants }
package/src/components/combobox.tsx CHANGED
@@ -4,290 +4,295 @@ import { CheckIcon, ChevronDownIcon, XIcon } from 'lucide-react'
4
4
 
5
5
  import { cn } from '../foundation/cn'
6
6
  import { Button } from './button'
7
- import {
8
- InputGroup,
9
- InputGroupAddon,
10
- InputGroupButton,
11
- InputGroupInput,
12
- } from './input-group'
7
+ import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './input-group'
13
8
 
14
9
  const Combobox: typeof ComboboxPrimitive.Root = ComboboxPrimitive.Root
15
10
 
16
11
  function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props): React.JSX.Element {
17
- return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
12
+ return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
18
13
  }
19
14
 
20
- function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props): React.JSX.Element {
21
- return (
22
- <ComboboxPrimitive.Trigger
23
- data-slot="combobox-trigger"
24
- className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
25
- {...props}
26
- >
27
- {children}
28
- <ChevronDownIcon
29
- data-slot="combobox-trigger-icon"
30
- className="pointer-events-none size-4 text-muted-foreground"
31
- />
32
- </ComboboxPrimitive.Trigger>
33
- )
15
+ function ComboboxTrigger({
16
+ className,
17
+ children,
18
+ ...props
19
+ }: ComboboxPrimitive.Trigger.Props): React.JSX.Element {
20
+ return (
21
+ <ComboboxPrimitive.Trigger
22
+ data-slot="combobox-trigger"
23
+ className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
24
+ {...props}
25
+ >
26
+ {children}
27
+ <ChevronDownIcon
28
+ data-slot="combobox-trigger-icon"
29
+ className="pointer-events-none size-4 text-muted-foreground"
30
+ />
31
+ </ComboboxPrimitive.Trigger>
32
+ )
34
33
  }
35
34
 
36
35
  function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props): React.JSX.Element {
37
- return (
38
- <ComboboxPrimitive.Clear
39
- data-slot="combobox-clear"
40
- render={<InputGroupButton variant="ghost" size="icon-xs" />}
41
- className={cn(className)}
42
- {...props}
43
- >
44
- <XIcon className="pointer-events-none" />
45
- </ComboboxPrimitive.Clear>
46
- )
36
+ return (
37
+ <ComboboxPrimitive.Clear
38
+ data-slot="combobox-clear"
39
+ render={<InputGroupButton variant="ghost" size="icon-xs" />}
40
+ className={cn(className)}
41
+ {...props}
42
+ >
43
+ <XIcon className="pointer-events-none" />
44
+ </ComboboxPrimitive.Clear>
45
+ )
47
46
  }
48
47
 
49
48
  type ComboboxInputPropsExternalApi = ComboboxPrimitive.Input.Props & {
50
- showTrigger?: boolean
51
- showClear?: boolean
49
+ showTrigger?: boolean
50
+ showClear?: boolean
52
51
  }
53
52
 
54
53
  function ComboboxInput({
55
- className,
56
- children,
57
- disabled = false,
58
- showTrigger = true,
59
- showClear = false,
60
- ...props
54
+ className,
55
+ children,
56
+ disabled = false,
57
+ showTrigger = true,
58
+ showClear = false,
59
+ ...props
61
60
  }: ComboboxInputPropsExternalApi): React.JSX.Element {
62
- return (
63
- <InputGroup className={cn('w-auto', className)}>
64
- <ComboboxPrimitive.Input
65
- render={<InputGroupInput disabled={disabled} />}
66
- {...props}
67
- />
68
- <InputGroupAddon align="inline-end">
69
- {showTrigger && (
70
- <InputGroupButton
71
- size="icon-xs"
72
- variant="ghost"
73
- asChild
74
- data-slot="input-group-button"
75
- className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
76
- disabled={disabled}
77
- >
78
- <ComboboxTrigger />
79
- </InputGroupButton>
80
- )}
81
- {showClear && <ComboboxClear disabled={disabled} />}
82
- </InputGroupAddon>
83
- {children}
84
- </InputGroup>
85
- )
61
+ return (
62
+ <InputGroup className={cn('w-auto', className)}>
63
+ <ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />
64
+ <InputGroupAddon align="inline-end">
65
+ {showTrigger && (
66
+ <InputGroupButton
67
+ size="icon-xs"
68
+ variant="ghost"
69
+ asChild
70
+ data-slot="input-group-button"
71
+ className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
72
+ disabled={disabled}
73
+ >
74
+ <ComboboxTrigger />
75
+ </InputGroupButton>
76
+ )}
77
+ {showClear && <ComboboxClear disabled={disabled} />}
78
+ </InputGroupAddon>
79
+ {children}
80
+ </InputGroup>
81
+ )
86
82
  }
87
83
 
88
84
  function ComboboxContent({
89
- className,
90
- side = 'bottom',
91
- sideOffset = 6,
92
- align = 'start',
93
- alignOffset = 0,
94
- anchor,
95
- ...props
85
+ className,
86
+ side = 'bottom',
87
+ sideOffset = 6,
88
+ align = 'start',
89
+ alignOffset = 0,
90
+ anchor,
91
+ ...props
96
92
  }: ComboboxPrimitive.Popup.Props &
97
- Pick<
98
- ComboboxPrimitive.Positioner.Props,
99
- 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'
100
- >): React.JSX.Element {
101
- return (
102
- <ComboboxPrimitive.Portal>
103
- <ComboboxPrimitive.Positioner
104
- side={side}
105
- sideOffset={sideOffset}
106
- align={align}
107
- alignOffset={alignOffset}
108
- anchor={anchor}
109
- className="isolate z-50"
110
- >
111
- <ComboboxPrimitive.Popup
112
- data-slot="combobox-content"
113
- data-chips={!!anchor}
114
- className={cn(
115
- "group/combobox-content relative max-h-96 w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-card text-card-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) 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 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
116
- className,
117
- )}
118
- {...props}
119
- />
120
- </ComboboxPrimitive.Positioner>
121
- </ComboboxPrimitive.Portal>
122
- )
93
+ Pick<
94
+ ComboboxPrimitive.Positioner.Props,
95
+ 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'
96
+ >): React.JSX.Element {
97
+ return (
98
+ <ComboboxPrimitive.Portal>
99
+ <ComboboxPrimitive.Positioner
100
+ side={side}
101
+ sideOffset={sideOffset}
102
+ align={align}
103
+ alignOffset={alignOffset}
104
+ anchor={anchor}
105
+ className="isolate z-50"
106
+ >
107
+ <ComboboxPrimitive.Popup
108
+ data-slot="combobox-content"
109
+ data-chips={!!anchor}
110
+ className={cn(
111
+ 'group/combobox-content relative max-h-96 w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-card text-card-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) 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 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
112
+ className,
113
+ )}
114
+ {...props}
115
+ />
116
+ </ComboboxPrimitive.Positioner>
117
+ </ComboboxPrimitive.Portal>
118
+ )
123
119
  }
124
120
 
125
121
  function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): React.JSX.Element {
126
- return (
127
- <ComboboxPrimitive.List
128
- data-slot="combobox-list"
129
- className={cn(
130
- 'max-h-[min(calc(--spacing(96)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0',
131
- className,
132
- )}
133
- {...props}
134
- />
135
- )
122
+ return (
123
+ <ComboboxPrimitive.List
124
+ data-slot="combobox-list"
125
+ className={cn(
126
+ 'max-h-[min(calc(--spacing(96)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0',
127
+ className,
128
+ )}
129
+ {...props}
130
+ />
131
+ )
136
132
  }
137
133
 
138
- function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props): React.JSX.Element {
139
- return (
140
- <ComboboxPrimitive.Item
141
- data-slot="combobox-item"
142
- className={cn(
143
- "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-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
144
- className,
145
- )}
146
- {...props}
147
- >
148
- {children}
149
- <ComboboxPrimitive.ItemIndicator
150
- data-slot="combobox-item-indicator"
151
- render={
152
- <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
153
- }
154
- >
155
- <CheckIcon className="pointer-events-none size-4 pointer-coarse:size-5" />
156
- </ComboboxPrimitive.ItemIndicator>
157
- </ComboboxPrimitive.Item>
158
- )
134
+ function ComboboxItem({
135
+ className,
136
+ children,
137
+ ...props
138
+ }: ComboboxPrimitive.Item.Props): React.JSX.Element {
139
+ return (
140
+ <ComboboxPrimitive.Item
141
+ data-slot="combobox-item"
142
+ className={cn(
143
+ "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-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
144
+ className,
145
+ )}
146
+ {...props}
147
+ >
148
+ {children}
149
+ <ComboboxPrimitive.ItemIndicator
150
+ data-slot="combobox-item-indicator"
151
+ render={
152
+ <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
153
+ }
154
+ >
155
+ <CheckIcon className="pointer-events-none size-4 pointer-coarse:size-5" />
156
+ </ComboboxPrimitive.ItemIndicator>
157
+ </ComboboxPrimitive.Item>
158
+ )
159
159
  }
160
160
 
161
161
  function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props): React.JSX.Element {
162
- return (
163
- <ComboboxPrimitive.Group
164
- data-slot="combobox-group"
165
- className={cn(className)}
166
- {...props}
167
- />
168
- )
162
+ return <ComboboxPrimitive.Group data-slot="combobox-group" className={cn(className)} {...props} />
169
163
  }
170
164
 
171
- function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props): React.JSX.Element {
172
- return (
173
- <ComboboxPrimitive.GroupLabel
174
- data-slot="combobox-label"
175
- className={cn(
176
- 'px-2 py-1.5 text-xs text-muted-foreground pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm',
177
- className,
178
- )}
179
- {...props}
180
- />
181
- )
165
+ function ComboboxLabel({
166
+ className,
167
+ ...props
168
+ }: ComboboxPrimitive.GroupLabel.Props): React.JSX.Element {
169
+ return (
170
+ <ComboboxPrimitive.GroupLabel
171
+ data-slot="combobox-label"
172
+ className={cn(
173
+ 'px-2 py-1.5 text-xs text-muted-foreground pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm',
174
+ className,
175
+ )}
176
+ {...props}
177
+ />
178
+ )
182
179
  }
183
180
 
184
181
  function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props): React.JSX.Element {
185
- return <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
182
+ return <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
186
183
  }
187
184
 
188
185
  function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props): React.JSX.Element {
189
- return (
190
- <ComboboxPrimitive.Empty
191
- data-slot="combobox-empty"
192
- className={cn(
193
- 'hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex',
194
- className,
195
- )}
196
- {...props}
197
- />
198
- )
186
+ return (
187
+ <ComboboxPrimitive.Empty
188
+ data-slot="combobox-empty"
189
+ className={cn(
190
+ 'hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex',
191
+ className,
192
+ )}
193
+ {...props}
194
+ />
195
+ )
199
196
  }
200
197
 
201
- function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props): React.JSX.Element {
202
- return (
203
- <ComboboxPrimitive.Separator
204
- data-slot="combobox-separator"
205
- className={cn('-mx-1 my-1 h-px bg-border', className)}
206
- {...props}
207
- />
208
- )
198
+ function ComboboxSeparator({
199
+ className,
200
+ ...props
201
+ }: ComboboxPrimitive.Separator.Props): React.JSX.Element {
202
+ return (
203
+ <ComboboxPrimitive.Separator
204
+ data-slot="combobox-separator"
205
+ className={cn('-mx-1 my-1 h-px bg-border', className)}
206
+ {...props}
207
+ />
208
+ )
209
209
  }
210
210
 
211
211
  function ComboboxChips({
212
- className,
213
- ...props
214
- }: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props): React.JSX.Element {
215
- return (
216
- <ComboboxPrimitive.Chips
217
- data-slot="combobox-chips"
218
- className={cn(
219
- 'flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40',
220
- className,
221
- )}
222
- {...props}
223
- />
224
- )
212
+ className,
213
+ ...props
214
+ }: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
215
+ ComboboxPrimitive.Chips.Props): React.JSX.Element {
216
+ return (
217
+ <ComboboxPrimitive.Chips
218
+ data-slot="combobox-chips"
219
+ className={cn(
220
+ 'flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40',
221
+ className,
222
+ )}
223
+ {...props}
224
+ />
225
+ )
225
226
  }
226
227
 
227
228
  type ComboboxChipPropsExternalApi = ComboboxPrimitive.Chip.Props & {
228
- showRemove?: boolean
229
+ showRemove?: boolean
229
230
  }
230
231
 
231
232
  function ComboboxChip({
232
- className,
233
- children,
234
- showRemove = true,
235
- ...props
233
+ className,
234
+ children,
235
+ showRemove = true,
236
+ ...props
236
237
  }: ComboboxChipPropsExternalApi): React.JSX.Element {
237
- return (
238
- <ComboboxPrimitive.Chip
239
- data-slot="combobox-chip"
240
- className={cn(
241
- 'flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0',
242
- className,
243
- )}
244
- {...props}
245
- >
246
- {children}
247
- {showRemove && (
248
- <ComboboxPrimitive.ChipRemove
249
- render={<Button variant="ghost" size="icon" />}
250
- className="-ml-1 opacity-50 hover:opacity-100"
251
- data-slot="combobox-chip-remove"
252
- >
253
- <XIcon className="pointer-events-none" />
254
- </ComboboxPrimitive.ChipRemove>
255
- )}
256
- </ComboboxPrimitive.Chip>
257
- )
238
+ return (
239
+ <ComboboxPrimitive.Chip
240
+ data-slot="combobox-chip"
241
+ className={cn(
242
+ 'flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0',
243
+ className,
244
+ )}
245
+ {...props}
246
+ >
247
+ {children}
248
+ {showRemove && (
249
+ <ComboboxPrimitive.ChipRemove
250
+ render={<Button variant="ghost" size="icon" />}
251
+ className="-ml-1 opacity-50 hover:opacity-100"
252
+ data-slot="combobox-chip-remove"
253
+ >
254
+ <XIcon className="pointer-events-none" />
255
+ </ComboboxPrimitive.ChipRemove>
256
+ )}
257
+ </ComboboxPrimitive.Chip>
258
+ )
258
259
  }
259
260
 
260
- function ComboboxChipsInput({ className, children, ...props }: ComboboxPrimitive.Input.Props): React.JSX.Element {
261
- return (
262
- <ComboboxPrimitive.Input
263
- data-slot="combobox-chip-input"
264
- className={cn('min-w-16 flex-1 outline-none', className)}
265
- {...props}
266
- />
267
- )
261
+ function ComboboxChipsInput({
262
+ className,
263
+ children,
264
+ ...props
265
+ }: ComboboxPrimitive.Input.Props): React.JSX.Element {
266
+ return (
267
+ <ComboboxPrimitive.Input
268
+ data-slot="combobox-chip-input"
269
+ className={cn('min-w-16 flex-1 outline-none', className)}
270
+ {...props}
271
+ />
272
+ )
268
273
  }
269
274
 
270
275
  type ComboboxAnchorElementExternalApi = HTMLDivElement | null
271
276
 
272
277
  function useComboboxAnchor(): React.RefObject<ComboboxAnchorElementExternalApi> {
273
- return React.useRef<ComboboxAnchorElementExternalApi>(null)
278
+ return React.useRef<ComboboxAnchorElementExternalApi>(null)
274
279
  }
275
280
 
276
281
  export {
277
- Combobox,
278
- ComboboxInput,
279
- ComboboxContent,
280
- ComboboxList,
281
- ComboboxItem,
282
- ComboboxGroup,
283
- ComboboxLabel,
284
- ComboboxCollection,
285
- ComboboxEmpty,
286
- ComboboxSeparator,
287
- ComboboxChips,
288
- ComboboxChip,
289
- ComboboxChipsInput,
290
- ComboboxTrigger,
291
- ComboboxValue,
292
- useComboboxAnchor,
282
+ Combobox,
283
+ ComboboxInput,
284
+ ComboboxContent,
285
+ ComboboxList,
286
+ ComboboxItem,
287
+ ComboboxGroup,
288
+ ComboboxLabel,
289
+ ComboboxCollection,
290
+ ComboboxEmpty,
291
+ ComboboxSeparator,
292
+ ComboboxChips,
293
+ ComboboxChip,
294
+ ComboboxChipsInput,
295
+ ComboboxTrigger,
296
+ ComboboxValue,
297
+ useComboboxAnchor,
293
298
  }