alice.pds.demo.boltless.dev
This repository has no description
1import { tv, type VariantProps } from "tailwind-variants";
2
3/** one row of a Select, in either rendering */
4export interface SelectOption {
5 value: string;
6 /** shown instead of `value`; `value` is still matched when filtering */
7 label?: string;
8 /** right-aligned secondary text, e.g. "default" on a repo's default branch. rich only:
9 * a native `<option>` has nowhere to put it */
10 hint?: string;
11 /** consecutive options sharing one become a single optgroup or heading */
12 group?: string;
13 disabled?: boolean;
14}
15
16export type SelectAlign = "left" | "right";
17
18/** The box both renderings draw. Layout differs — a native select needs the chevron overlaid,
19 * the rich trigger lays it out inline — so each renderer appends its own padding and display,
20 * and only the border, fill and state colours live here. */
21export const selectField = tv({
22 slots: {
23 box: "w-full rounded-sm border bg-background-default transition-colors outline-none disabled:cursor-not-allowed",
24 chevron: "shrink-0 text-foreground-subtle"
25 },
26 variants: {
27 error: {
28 false: {
29 box: "border-border-default text-foreground-default focus-visible:border-border-strong focus-visible:ring-1 focus-visible:ring-border-strong"
30 },
31 true: {
32 box: "border-border-danger bg-background-danger-subtle text-foreground-danger focus-visible:border-border-focus-danger focus-visible:ring-1 focus-visible:ring-border-focus-danger",
33 chevron: "text-foreground-danger"
34 }
35 },
36 disabled: {
37 false: {},
38 true: {
39 box: "text-foreground-disabled",
40 chevron: "text-foreground-disabled"
41 }
42 }
43 },
44 compoundVariants: [
45 {
46 error: true,
47 disabled: true,
48 class: {
49 box: "border-border-danger-subtle bg-background-danger-subtle text-foreground-danger-subtle",
50 chevron: "text-foreground-danger-subtle"
51 }
52 }
53 ],
54 defaultVariants: {
55 error: false,
56 disabled: false
57 }
58});
59
60export type SelectFieldVariants = VariantProps<typeof selectField>;