@playfast/reform-better-hub-ui-primitives 0.2.1 → 0.3.0

package/src/components/combobox.tsx

@@ -1,296 +1,298 @@
-// Adapted from better-hub by Better Auth — https://github.com/better-auth/better-hub
-// (apps/web/src/components/ui/combobox.tsx). Full credit to the Better Auth team.
-
 import * as React from 'react'
 import { Combobox as ComboboxPrimitive } from '@base-ui/react'
 import { CheckIcon, ChevronDownIcon, XIcon } from 'lucide-react'
 
 import { cn } from '../foundation/cn'
 import { Button } from './button'
-import {
-	InputGroup,
-	InputGroupAddon,
-	InputGroupButton,
-	InputGroupInput,
-} from './input-group'
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './input-group'
 
 const Combobox: typeof ComboboxPrimitive.Root = ComboboxPrimitive.Root
 
 function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props): React.JSX.Element {
-	return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
 }
 
-function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props): React.JSX.Element {
-	return (
-		<ComboboxPrimitive.Trigger
-			data-slot="combobox-trigger"
-			className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
-			{...props}
-		>
-			{children}
-			<ChevronDownIcon
-				data-slot="combobox-trigger-icon"
-				className="pointer-events-none size-4 text-muted-foreground"
-			/>
-		</ComboboxPrimitive.Trigger>
-	)
+function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Trigger.Props): React.JSX.Element {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon
+        data-slot="combobox-trigger-icon"
+        className="pointer-events-none size-4 text-muted-foreground"
+      />
+    </ComboboxPrimitive.Trigger>
+  )
 }
 
 function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props): React.JSX.Element {
-	return (
-		<ComboboxPrimitive.Clear
-			data-slot="combobox-clear"
-			render={<InputGroupButton variant="ghost" size="icon-xs" />}
-			className={cn(className)}
-			{...props}
-		>
-			<XIcon className="pointer-events-none" />
-		</ComboboxPrimitive.Clear>
-	)
+  return (
+    <ComboboxPrimitive.Clear
+      data-slot="combobox-clear"
+      render={<InputGroupButton variant="ghost" size="icon-xs" />}
+      className={cn(className)}
+      {...props}
+    >
+      <XIcon className="pointer-events-none" />
+    </ComboboxPrimitive.Clear>
+  )
 }
 
 type ComboboxInputPropsExternalApi = ComboboxPrimitive.Input.Props & {
-	showTrigger?: boolean
-	showClear?: boolean
+  showTrigger?: boolean
+  showClear?: boolean
 }
 
 function ComboboxInput({
-	className,
-	children,
-	disabled = false,
-	showTrigger = true,
-	showClear = false,
-	...props
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
 }: ComboboxInputPropsExternalApi): React.JSX.Element {
-	return (
-		<InputGroup className={cn('w-auto', className)}>
-			<ComboboxPrimitive.Input
-				render={<InputGroupInput disabled={disabled} />}
-				{...props}
-			/>
-			<InputGroupAddon align="inline-end">
-				{showTrigger && (
-					<InputGroupButton
-						size="icon-xs"
-						variant="ghost"
-						asChild
-						data-slot="input-group-button"
-						className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
-						disabled={disabled}
-					>
-						<ComboboxTrigger />
-					</InputGroupButton>
-				)}
-				{showClear && <ComboboxClear disabled={disabled} />}
-			</InputGroupAddon>
-			{children}
-		</InputGroup>
-	)
+  return (
+    <InputGroup className={cn('w-auto', className)}>
+      <ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <InputGroupButton
+            size="icon-xs"
+            variant="ghost"
+            asChild
+            data-slot="input-group-button"
+            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+            disabled={disabled}
+          >
+            <ComboboxTrigger />
+          </InputGroupButton>
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  )
 }
 
 function ComboboxContent({
-	className,
-	side = 'bottom',
-	sideOffset = 6,
-	align = 'start',
-	alignOffset = 0,
-	anchor,
-	...props
+  className,
+  side = 'bottom',
+  sideOffset = 6,
+  align = 'start',
+  alignOffset = 0,
+  anchor,
+  ...props
 }: ComboboxPrimitive.Popup.Props &
-	Pick<
-		ComboboxPrimitive.Positioner.Props,
-		'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'
-	>): React.JSX.Element {
-	return (
-		<ComboboxPrimitive.Portal>
-			<ComboboxPrimitive.Positioner
-				side={side}
-				sideOffset={sideOffset}
-				align={align}
-				alignOffset={alignOffset}
-				anchor={anchor}
-				className="isolate z-50"
-			>
-				<ComboboxPrimitive.Popup
-					data-slot="combobox-content"
-					data-chips={!!anchor}
-					className={cn(
-						"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",
-						className,
-					)}
-					{...props}
-				/>
-			</ComboboxPrimitive.Positioner>
-		</ComboboxPrimitive.Portal>
-	)
+  Pick<
+    ComboboxPrimitive.Positioner.Props,
+    'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'
+  >): React.JSX.Element {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="isolate z-50"
+      >
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          className={cn(
+            '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',
+            className,
+          )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  )
 }
 
 function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): React.JSX.Element {
-	return (
-		<ComboboxPrimitive.List
-			data-slot="combobox-list"
-			className={cn(
-				'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',
-				className,
-			)}
-			{...props}
-		/>
-	)
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(
+        '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',
+        className,
+      )}
+      {...props}
+    />
+  )
 }
 
-function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props): React.JSX.Element {
-	return (
-		<ComboboxPrimitive.Item
-			data-slot="combobox-item"
-			className={cn(
-				"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",
-				className,
-			)}
-			{...props}
-		>
-			{children}
-			<ComboboxPrimitive.ItemIndicator
-				data-slot="combobox-item-indicator"
-				render={
-					<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
-				}
-			>
-				<CheckIcon className="pointer-events-none size-4 pointer-coarse:size-5" />
-			</ComboboxPrimitive.ItemIndicator>
-		</ComboboxPrimitive.Item>
-	)
+function ComboboxItem({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Item.Props): React.JSX.Element {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        "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",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator
+        data-slot="combobox-item-indicator"
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none size-4 pointer-coarse:size-5" />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  )
 }
 
 function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props): React.JSX.Element {
-	return (
-		<ComboboxPrimitive.Group
-			data-slot="combobox-group"
-			className={cn(className)}
-			{...props}
-		/>
-	)
+  return <ComboboxPrimitive.Group data-slot="combobox-group" className={cn(className)} {...props} />
 }
 
-function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props): React.JSX.Element {
-	return (
-		<ComboboxPrimitive.GroupLabel
-			data-slot="combobox-label"
-			className={cn(
-				'px-2 py-1.5 text-xs text-muted-foreground pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm',
-				className,
-			)}
-			{...props}
-		/>
-	)
+function ComboboxLabel({
+  className,
+  ...props
+}: ComboboxPrimitive.GroupLabel.Props): React.JSX.Element {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-label"
+      className={cn(
+        'px-2 py-1.5 text-xs text-muted-foreground pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm',
+        className,
+      )}
+      {...props}
+    />
+  )
 }
 
 function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props): React.JSX.Element {
-	return <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
+  return <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
 }
 
 function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props): React.JSX.Element {
-	return (
-		<ComboboxPrimitive.Empty
-			data-slot="combobox-empty"
-			className={cn(
-				'hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex',
-				className,
-			)}
-			{...props}
-		/>
-	)
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn(
+        'hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex',
+        className,
+      )}
+      {...props}
+    />
+  )
 }
 
-function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props): React.JSX.Element {
-	return (
-		<ComboboxPrimitive.Separator
-			data-slot="combobox-separator"
-			className={cn('-mx-1 my-1 h-px bg-border', className)}
-			{...props}
-		/>
-	)
+function ComboboxSeparator({
+  className,
+  ...props
+}: ComboboxPrimitive.Separator.Props): React.JSX.Element {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot="combobox-separator"
+      className={cn('-mx-1 my-1 h-px bg-border', className)}
+      {...props}
+    />
+  )
 }
 
 function ComboboxChips({
-	className,
-	...props
-}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props): React.JSX.Element {
-	return (
-		<ComboboxPrimitive.Chips
-			data-slot="combobox-chips"
-			className={cn(
-				'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',
-				className,
-			)}
-			{...props}
-		/>
-	)
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
+  ComboboxPrimitive.Chips.Props): React.JSX.Element {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="combobox-chips"
+      className={cn(
+        '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',
+        className,
+      )}
+      {...props}
+    />
+  )
 }
 
 type ComboboxChipPropsExternalApi = ComboboxPrimitive.Chip.Props & {
-	showRemove?: boolean
+  showRemove?: boolean
 }
 
 function ComboboxChip({
-	className,
-	children,
-	showRemove = true,
-	...props
+  className,
+  children,
+  showRemove = true,
+  ...props
 }: ComboboxChipPropsExternalApi): React.JSX.Element {
-	return (
-		<ComboboxPrimitive.Chip
-			data-slot="combobox-chip"
-			className={cn(
-				'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',
-				className,
-			)}
-			{...props}
-		>
-			{children}
-			{showRemove && (
-				<ComboboxPrimitive.ChipRemove
-					render={<Button variant="ghost" size="icon" />}
-					className="-ml-1 opacity-50 hover:opacity-100"
-					data-slot="combobox-chip-remove"
-				>
-					<XIcon className="pointer-events-none" />
-				</ComboboxPrimitive.ChipRemove>
-			)}
-		</ComboboxPrimitive.Chip>
-	)
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot="combobox-chip"
+      className={cn(
+        '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',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          render={<Button variant="ghost" size="icon" />}
+          className="-ml-1 opacity-50 hover:opacity-100"
+          data-slot="combobox-chip-remove"
+        >
+          <XIcon className="pointer-events-none" />
+        </ComboboxPrimitive.ChipRemove>
+      )}
+    </ComboboxPrimitive.Chip>
+  )
 }
 
-function ComboboxChipsInput({ className, children, ...props }: ComboboxPrimitive.Input.Props): React.JSX.Element {
-	return (
-		<ComboboxPrimitive.Input
-			data-slot="combobox-chip-input"
-			className={cn('min-w-16 flex-1 outline-none', className)}
-			{...props}
-		/>
-	)
+function ComboboxChipsInput({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Input.Props): React.JSX.Element {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot="combobox-chip-input"
+      className={cn('min-w-16 flex-1 outline-none', className)}
+      {...props}
+    />
+  )
 }
 
 type ComboboxAnchorElementExternalApi = HTMLDivElement | null
 
 function useComboboxAnchor(): React.RefObject<ComboboxAnchorElementExternalApi> {
-	return React.useRef<ComboboxAnchorElementExternalApi>(null)
+  return React.useRef<ComboboxAnchorElementExternalApi>(null)
 }
 
 export {
-	Combobox,
-	ComboboxInput,
-	ComboboxContent,
-	ComboboxList,
-	ComboboxItem,
-	ComboboxGroup,
-	ComboboxLabel,
-	ComboboxCollection,
-	ComboboxEmpty,
-	ComboboxSeparator,
-	ComboboxChips,
-	ComboboxChip,
-	ComboboxChipsInput,
-	ComboboxTrigger,
-	ComboboxValue,
-	useComboboxAnchor,
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
 }