dev_agent
fcbdebd6e8
CI / ci (push) Successful in 2m0s
Co-authored-by: dev_agent <dev_agent@cubecraftlabs.com>
28 lines
922 B
TypeScript
28 lines
922 B
TypeScript
import { ChevronDown } from 'lucide-react'
|
|
import { useId, type ComponentPropsWithRef } from 'react'
|
|
import { Icon } from './Icon.tsx'
|
|
import styles from './Select.module.css'
|
|
|
|
export type SelectProps = Omit<ComponentPropsWithRef<'select'>, 'id' | 'multiple'> & {
|
|
label: string
|
|
}
|
|
|
|
// Pill dropdown: a native select on the surface fill with a chevron, always
|
|
// associated with its label. Pass the options as children.
|
|
export function Select({ label, className, children, ...rest }: SelectProps) {
|
|
const id = useId()
|
|
return (
|
|
<div className={styles.field}>
|
|
<label htmlFor={id} className={styles.label}>
|
|
{label}
|
|
</label>
|
|
<span className={styles.control}>
|
|
<select id={id} className={[styles.select, className].filter(Boolean).join(' ')} {...rest}>
|
|
{children}
|
|
</select>
|
|
<Icon icon={ChevronDown} className={styles.chevron} />
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|