Aurora Native Select

1"use client"
2 
3import * as React from "react"
4import { ChevronDown } from "lucide-react"
5import { cn } from "@/lib/utils"
6 
7export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
8  placeholder?: string
9}
10 
11function NativeSelect({ className, style, children, placeholder, disabled, onFocus, onBlur, ref, ...props }: NativeSelectProps & { ref?: React.Ref<HTMLSelectElement> }) {
12  return (
13    <span className="relative inline-flex w-full items-center">
14      <select
15        {...props}
16        ref={ref}
17        disabled={disabled}
18        className={cn(
19          "h-9 w-full appearance-none rounded-[var(--aurora-radius-2)] border px-4 py-2 pr-10",
20          "font-[var(--aurora-font-sans)]",
21          "text-[var(--aurora-text-primary)]",
22          "transition-all duration-150 ease-out",
23          "focus-visible:outline-none",
24          "cursor-pointer",
25          "disabled:pointer-events-none disabled:opacity-45 disabled:cursor-not-allowed",
26          className
27        )}
28        style={{
29          background: "var(--aurora-control-surface)",
30          borderColor: "var(--aurora-border-strong)",
31          color: "var(--aurora-text-primary)",
32          fontSize: "var(--aurora-type-body-sm)",
33          fontWeight: "var(--aurora-weight-body)",
34          letterSpacing: "var(--aurora-letter-ui)",
35          lineHeight: "var(--aurora-line-ui)",
36          ...style,
37        }}
38        onFocus={(event) => {
39          event.currentTarget.dataset.previousBorderColor = event.currentTarget.style.borderColor
40          event.currentTarget.dataset.previousBoxShadow = event.currentTarget.style.boxShadow
41          event.currentTarget.style.borderColor = "color-mix(in srgb, var(--aurora-accent-primary) 42%, var(--aurora-border-strong))"
42          event.currentTarget.style.boxShadow =
43            "0 0 0 2px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent)"
44          onFocus?.(event)
45        }}
46        onBlur={(event) => {
47          event.currentTarget.style.borderColor = event.currentTarget.dataset.previousBorderColor ?? ""
48          event.currentTarget.style.boxShadow = event.currentTarget.dataset.previousBoxShadow ?? ""
49          onBlur?.(event)
50        }}
51      >
52        {placeholder ? (
53          <option value="" disabled>
54            {placeholder}
55          </option>
56        ) : null}
57        {children}
58      </select>
59      <ChevronDown
60        aria-hidden="true"
61// … truncated