List Box

export * from "./list-box";
export * as ListBox from "./namespace";
export * from "./styles";

"use client";
 
import {
  Header,
  ListBoxItem as ListBoxItemPrimitive,
  ListBox as ListBoxPrimitive,
  ListBoxSection as ListBoxSectionPrimitive,
} from "react-aria-components";
import { ListBoxStyles } from "./styles";
 
export interface ListBoxRootProps<T extends object>
  extends React.ComponentProps<typeof ListBoxPrimitive<T>> {}
 
export function ListBoxRoot<T extends object>({
  className,
  ...props
}: ListBoxRootProps<T>) {
  return (
    <ListBoxPrimitive
      {...props}
      className={(values) =>
        ListBoxStyles.Root({
          className:
            typeof className === "function" ? className(values) : className,
        })
      }
    />
  );
}
 
export interface ListBoxItemProps<T extends object>
  extends React.ComponentProps<typeof ListBoxItemPrimitive<T>> {}
 
export function ListBoxItem<T extends object>({
  className,
  ...props
}: ListBoxItemProps<T>) {
  return (
    <ListBoxItemPrimitive
      {...props}
      className={(values) =>
        ListBoxStyles.Item({
          isDisabled: values.isDisabled,
          isDragging: values.isDragging,
          isFocusVisible: values.isFocusVisible,
          isHovered: values.isHovered,
          isSelected: values.isSelected,
          className:
            typeof className === "function" ? className(values) : className,
        })
      }
    />
  );
}
 
export interface ListBoxPickerProps<T extends object>
  extends React.ComponentProps<typeof ListBoxPrimitive<T>> {}
 
export function ListBoxPicker<T extends object>({
  className,
  ...props
}: ListBoxPickerProps<T>) {
  return (
    <ListBoxPrimitive
      {...props}
      className={(values) =>
        ListBoxStyles.Picker({
          className:
            typeof className === "function" ? className(values) : className,
        })
      }
    />
  );
}
 
export interface ListBoxSectionProps<T extends object>
  extends React.ComponentProps<typeof ListBoxSectionPrimitive<T>> {}
 
export function ListBoxSection<T extends object>({
  className,
  ...props
}: ListBoxSectionProps<T>) {
  return (
    <ListBoxSectionPrimitive
      {...props}
      className={ListBoxStyles.Section({ className })}
    />
  );
}
 
export interface ListBoxSectionHeaderProps
  extends React.ComponentProps<typeof Header> {}
 
export function ListBoxSectionHeader({
  className,
  ...props
}: ListBoxSectionHeaderProps) {
  return (
    <Header {...props} className={ListBoxStyles.SectionHeader({ className })} />
  );
}

export {
  ListBoxRoot as Root,
  ListBoxItem as Item,
  ListBoxPicker as Picker,
  ListBoxSection as Section,
  ListBoxSectionHeader as SectionHeader,
} from "./list-box";

import { cva } from "~/lib/cva";
 
export const ListBoxStyles = {
  Root: cva({
    base: [
      "flex max-h-96 w-full min-w-72 flex-col gap-y-1 overflow-y-auto rounded-xl border p-1 shadow-lg outline-hidden [scrollbar-width:thin] [&::-webkit-scrollbar]:size-0.5",
    ],
  }),
  Item: cva({
    base: "relative cursor-pointer rounded-[calc(var(--radius)-1px)] p-2 text-base outline-hidden lg:text-sm",
    variants: {
      isFocusVisible: {
        true: "bg-secondary text-secondary-fg [&:focus-visible_[slot=description]]:text-accent-fg/70 [&:focus-visible_[slot=label]]:text-accent-fg",
      },
      isHovered: {
        true: "bg-accent/60 text-accent-fg [&:hover_[slot=description]]:text-accent-fg/70 [&:hover_[slot=label]]:text-accent-fg [&_.text-muted-fg]:text-accent-fg/80",
      },
      isSelected: {
        true: "bg-accent text-accent-fg **:data-[slot=icon]:text-accent-fg **:data-[slot=label]:text-accent-fg [&_.text-muted-fg]:text-accent-fg/80",
      },
      isDragging: { true: "cursor-grabbing bg-secondary text-secondary-fg" },
      isDisabled: {
        true: "cursor-default text-muted-fg opacity-70",
      },
    },
  }),
  Picker: cva({
    base: ["max-h-72 overflow-auto p-1 outline-hidden"],
  }),
  Section: cva({
    base: [
      "first:-mt-1 flex flex-col gap-y-0.5 after:block after:h-1 after:content-['']",
    ],
  }),
  SectionHeader: cva({
    base: [
      "-top-1.5 -mb-0.5 -mx-1 sticky z-10 min-w-(--trigger-width) truncate border-y bg-bg px-4 py-2 font-medium text-muted-fg text-sm supports-[-moz-appearance:none]:bg-bg [&+*]:mt-1",
    ],
  }),
};