alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { tv, type VariantProps } from "tailwind-variants";
3
4 export const select = tv({
5 base: "w-full appearance-none rounded border bg-background-default px-3 py-2 pr-9 text-sm outline-none transition-colors disabled:cursor-not-allowed",
6 variants: {
7 error: {
8 false:
9 "border-border-default focus:border-border-strong focus:ring-1 focus:ring-border-strong",
10 true: "border-border-danger bg-background-danger-subtle text-foreground-danger focus:border-border-focus-danger focus:ring-1 focus:ring-border-focus-danger"
11 },
12 disabled: {
13 false: "",
14 true: "bg-background-inset text-foreground-disabled"
15 }
16 },
17 defaultVariants: {
18 error: false,
19 disabled: false
20 }
21 });
22
23 export type SelectVariants = VariantProps<typeof select>;
24</script>
25
26<script lang="ts">
27 import ChevronDown from "$icon/chevron-down";
28 import type { HTMLSelectAttributes } from "svelte/elements";
29 import type { Snippet } from "svelte";
30
31 interface Props extends Omit<HTMLSelectAttributes, "class" | "value"> {
32 value?: string;
33 error?: boolean;
34 disabled?: boolean;
35 class?: string;
36 children?: Snippet;
37 }
38
39 let {
40 value = $bindable(""),
41 error = false,
42 disabled = false,
43 class: className,
44 children,
45 ...rest
46 }: Props = $props();
47
48 const classes = $derived(select({ error, disabled, class: className }));
49</script>
50
51<div class="relative">
52 <select bind:value {disabled} aria-invalid={error} class={classes} {...rest}>
53 {#if children}
54 {@render children()}
55 {/if}
56 </select>
57 <ChevronDown
58 class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-foreground-subtle"
59 aria-hidden="true"
60 />
61</div>