Native Select

<script lang="ts">
  import { Input as Primitive } from '@sveltery/base/input';
  import type { InputProps } from '@sveltery/base/input';
  import type { HTMLSelectAttributes } from 'svelte/elements';
  import type { NativeSelectProps } from './types.js';
  import { cn } from 'cn';
  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
  let { children, class: classProp, size = 'default', value = $bindable(), ...props }: NativeSelectProps = $props();
</script>
<div class={cn('group/native-select relative w-fit has-[select:disabled]:opacity-50', classProp)} data-slot="native-select-wrapper" data-size={size}>
  {#if props.multiple}
    <!-- Base's control holds one value, so a multiple select stays native. -->
    <select data-slot="native-select" data-size={size} class="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed" {...props} bind:value>
      {@render children?.()}
    </select>
  {:else}
    <!-- Base labels, describes and validates its control, so the select renders through it. -->
    <Primitive {...props as InputProps} bind:value>
      {#snippet render(control)}
        <select data-slot="native-select" data-size={size} class="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed" {...control as HTMLSelectAttributes}>
          {@render children?.()}
        </select>
      {/snippet}
    </Primitive>
  {/if}
  <ChevronDownIcon
    class="text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none"
    aria-hidden="true"
    data-slot="native-select-icon"
  />
</div>

<script lang="ts">
  import type { NativeSelectOptGroupProps } from './types.js';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: NativeSelectOptGroupProps = $props();
</script>
<optgroup data-slot="native-select-optgroup" {...props} class={cn('bg-[Canvas] text-[CanvasText]', classProp)}>
  {@render children?.()}
</optgroup>

<script lang="ts">
  import type { NativeSelectOptionProps } from './types.js';
  import { cn } from 'cn';
  let { children, class: classProp, ...props }: NativeSelectOptionProps = $props();
</script>
<option data-slot="native-select-option" {...props} class={cn('bg-[Canvas] text-[CanvasText]', classProp)}>
  {@render children?.()}
</option>

import type { HTMLOptgroupAttributes, HTMLOptionAttributes, HTMLSelectAttributes } from 'svelte/elements';

export type NativeSelectProps = Omit<HTMLSelectAttributes, 'size'> & { size?: 'sm' | 'default' };
export type NativeSelectOptionProps = HTMLOptionAttributes;
export type NativeSelectOptGroupProps = HTMLOptgroupAttributes;

export { default as NativeSelect } from './NativeSelect.svelte';
export { default as NativeSelectOption } from './NativeSelectOption.svelte';
export { default as NativeSelectOptGroup } from './NativeSelectOptGroup.svelte';
export type { NativeSelectProps, NativeSelectOptionProps, NativeSelectOptGroupProps } from './types.js';