Update AGENTS.md. Start fixing old weird errors

packages/ui/src/combobox.tsx

@@ -15,43 +15,42 @@ import {
 
 const Combobox = ComboboxPrimitive.Root;
 
-function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
-  return <ComboboxPrimitive.Value data-slot='combobox-value' {...props} />;
-}
+const ComboboxValue = ({ ...props }: ComboboxPrimitive.Value.Props) => (
+  <ComboboxPrimitive.Value data-slot='combobox-value' {...props} />
+);
 
-function ComboboxTrigger({
+const ComboboxTrigger = ({
   className,
   children,
   ...props
-}: ComboboxPrimitive.Trigger.Props) {
-  return (
-    <ComboboxPrimitive.Trigger
-      data-slot='combobox-trigger'
-      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
-      {...props}
-    >
-      {children}
-      <ChevronDownIcon className='text-muted-foreground pointer-events-none size-4' />
-    </ComboboxPrimitive.Trigger>
-  );
-}
+}: ComboboxPrimitive.Trigger.Props) => (
+  <ComboboxPrimitive.Trigger
+    data-slot='combobox-trigger'
+    className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+    {...props}
+  >
+    {children}
+    <ChevronDownIcon className='text-muted-foreground pointer-events-none size-4' />
+  </ComboboxPrimitive.Trigger>
+);
 
-function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
-  return (
-    <ComboboxPrimitive.Clear
-      data-slot='combobox-clear'
-      className={cn(className)}
-      {...props}
-      render={
-        <InputGroupButton variant='ghost' size='icon-xs'>
-          <XIcon className='pointer-events-none' />
-        </InputGroupButton>
-      }
-    />
-  );
-}
+const ComboboxClear = ({
+  className,
+  ...props
+}: ComboboxPrimitive.Clear.Props) => (
+  <ComboboxPrimitive.Clear
+    data-slot='combobox-clear'
+    className={cn(className)}
+    {...props}
+    render={
+      <InputGroupButton variant='ghost' size='icon-xs'>
+        <XIcon className='pointer-events-none' />
+      </InputGroupButton>
+    }
+  />
+);
 
-function ComboboxInput({
+const ComboboxInput = ({
   className,
   children,
   disabled = false,
@@ -61,32 +60,30 @@ function ComboboxInput({
 }: ComboboxPrimitive.Input.Props & {
   showTrigger?: boolean;
   showClear?: boolean;
-}) {
-  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'
-            render={<ComboboxTrigger />}
-            data-slot='input-group-button'
-            className='group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent'
-            disabled={disabled}
-          />
-        )}
-        {showClear && <ComboboxClear disabled={disabled} />}
-      </InputGroupAddon>
-      {children}
-    </InputGroup>
-  );
-}
+}) => (
+  <InputGroup className={cn('w-auto', className)}>
+    <ComboboxPrimitive.Input
+      render={<InputGroupInput disabled={disabled} />}
+      {...props}
+    />
+    <InputGroupAddon align='inline-end'>
+      {showTrigger && (
+        <InputGroupButton
+          size='icon-xs'
+          variant='ghost'
+          render={<ComboboxTrigger />}
+          data-slot='input-group-button'
+          className='group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent'
+          disabled={disabled}
+        />
+      )}
+      {showClear && <ComboboxClear disabled={disabled} />}
+    </InputGroupAddon>
+    {children}
+  </InputGroup>
+);
 
-function ComboboxContent({
+const ComboboxContent = ({
   className,
   side = 'bottom',
   sideOffset = 6,
@@ -98,191 +95,178 @@ function ComboboxContent({
   Pick<
     ComboboxPrimitive.Positioner.Props,
     'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'
-  >) {
-  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(
-            '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 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 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) overflow-hidden rounded-lg shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none',
-            className,
-          )}
-          {...props}
-        />
-      </ComboboxPrimitive.Positioner>
-    </ComboboxPrimitive.Portal>
-  );
-}
+  >) => (
+  <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(
+          '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 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 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) overflow-hidden rounded-lg shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none',
+          className,
+        )}
+        {...props}
+      />
+    </ComboboxPrimitive.Positioner>
+  </ComboboxPrimitive.Portal>
+);
 
-function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
-  return (
-    <ComboboxPrimitive.List
-      data-slot='combobox-list'
-      className={cn(
-        'no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+const ComboboxList = ({
+  className,
+  ...props
+}: ComboboxPrimitive.List.Props) => (
+  <ComboboxPrimitive.List
+    data-slot='combobox-list'
+    className={cn(
+      'no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0',
+      className,
+    )}
+    {...props}
+  />
+);
 
-function ComboboxItem({
+const ComboboxItem = ({
   className,
   children,
   ...props
-}: ComboboxPrimitive.Item.Props) {
-  return (
-    <ComboboxPrimitive.Item
-      data-slot='combobox-item'
-      className={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 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",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ComboboxPrimitive.ItemIndicator
-        render={
-          <span className='pointer-events-none absolute right-2 flex size-4 items-center justify-center'>
-            <CheckIcon className='pointer-events-none' />
-          </span>
-        }
-      />
-    </ComboboxPrimitive.Item>
-  );
-}
-
-function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
-  return (
-    <ComboboxPrimitive.Group
-      data-slot='combobox-group'
-      className={cn(className)}
-      {...props}
+}: ComboboxPrimitive.Item.Props) => (
+  <ComboboxPrimitive.Item
+    data-slot='combobox-item'
+    className={cn(
+      "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 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",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ComboboxPrimitive.ItemIndicator
+      render={
+        <span className='pointer-events-none absolute right-2 flex size-4 items-center justify-center'>
+          <CheckIcon className='pointer-events-none' />
+        </span>
+      }
     />
-  );
-}
+  </ComboboxPrimitive.Item>
+);
 
-function ComboboxLabel({
+const ComboboxGroup = ({
   className,
   ...props
-}: ComboboxPrimitive.GroupLabel.Props) {
-  return (
-    <ComboboxPrimitive.GroupLabel
-      data-slot='combobox-label'
-      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
-      {...props}
-    />
-  );
-}
+}: ComboboxPrimitive.Group.Props) => (
+  <ComboboxPrimitive.Group
+    data-slot='combobox-group'
+    className={cn(className)}
+    {...props}
+  />
+);
 
-function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
-  return (
-    <ComboboxPrimitive.Collection data-slot='combobox-collection' {...props} />
-  );
-}
-
-function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
-  return (
-    <ComboboxPrimitive.Empty
-      data-slot='combobox-empty'
-      className={cn(
-        'text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function ComboboxSeparator({
+const ComboboxLabel = ({
   className,
   ...props
-}: ComboboxPrimitive.Separator.Props) {
-  return (
-    <ComboboxPrimitive.Separator
-      data-slot='combobox-separator'
-      className={cn('bg-border -mx-1 my-1 h-px', className)}
-      {...props}
-    />
-  );
-}
+}: ComboboxPrimitive.GroupLabel.Props) => (
+  <ComboboxPrimitive.GroupLabel
+    data-slot='combobox-label'
+    className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+    {...props}
+  />
+);
 
-function ComboboxChips({
+const ComboboxCollection = ({
+  ...props
+}: ComboboxPrimitive.Collection.Props) => (
+  <ComboboxPrimitive.Collection data-slot='combobox-collection' {...props} />
+);
+
+const ComboboxEmpty = ({
+  className,
+  ...props
+}: ComboboxPrimitive.Empty.Props) => (
+  <ComboboxPrimitive.Empty
+    data-slot='combobox-empty'
+    className={cn(
+      'text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex',
+      className,
+    )}
+    {...props}
+  />
+);
+
+const ComboboxSeparator = ({
+  className,
+  ...props
+}: ComboboxPrimitive.Separator.Props) => (
+  <ComboboxPrimitive.Separator
+    data-slot='combobox-separator'
+    className={cn('bg-border -mx-1 my-1 h-px', className)}
+    {...props}
+  />
+);
+
+const ComboboxChips = ({
   className,
   ...props
 }: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
-  ComboboxPrimitive.Chips.Props) {
-  return (
-    <ComboboxPrimitive.Chips
-      data-slot='combobox-chips'
-      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-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+  ComboboxPrimitive.Chips.Props) => (
+  <ComboboxPrimitive.Chips
+    data-slot='combobox-chips'
+    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-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1',
+      className,
+    )}
+    {...props}
+  />
+);
 
-function ComboboxChip({
+const ComboboxChip = ({
   className,
   children,
   showRemove = true,
   ...props
 }: ComboboxPrimitive.Chip.Props & {
   showRemove?: boolean;
-}) {
-  return (
-    <ComboboxPrimitive.Chip
-      data-slot='combobox-chip'
-      className={cn(
-        'bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap 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
-          className='-ml-1 opacity-50 hover:opacity-100'
-          data-slot='combobox-chip-remove'
-          render={
-            <Button variant='ghost' size='icon-xs'>
-              <XIcon className='pointer-events-none' />
-            </Button>
-          }
-        />
-      )}
-    </ComboboxPrimitive.Chip>
-  );
-}
+}) => (
+  <ComboboxPrimitive.Chip
+    data-slot='combobox-chip'
+    className={cn(
+      'bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap 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
+        className='-ml-1 opacity-50 hover:opacity-100'
+        data-slot='combobox-chip-remove'
+        render={
+          <Button variant='ghost' size='icon-xs'>
+            <XIcon className='pointer-events-none' />
+          </Button>
+        }
+      />
+    )}
+  </ComboboxPrimitive.Chip>
+);
 
-function ComboboxChipsInput({
+const ComboboxChipsInput = ({
   className,
   ...props
-}: ComboboxPrimitive.Input.Props) {
-  return (
-    <ComboboxPrimitive.Input
-      data-slot='combobox-chip-input'
-      className={cn('min-w-16 flex-1 outline-none', className)}
-      {...props}
-    />
-  );
-}
+}: ComboboxPrimitive.Input.Props) => (
+  <ComboboxPrimitive.Input
+    data-slot='combobox-chip-input'
+    className={cn('min-w-16 flex-1 outline-none', className)}
+    {...props}
+  />
+);
 
-function useComboboxAnchor() {
-  return React.useRef<HTMLDivElement | null>(null);
-}
+const useComboboxAnchor = () => React.useRef<HTMLDivElement | null>(null);
 
 export {
   Combobox,