Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
TypeScript
at icy/tmrrpn
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061import { tv, type VariantProps } from "tailwind-variants";
/** one row of a Select, in either rendering */export interface SelectOption { value: string; /** `value` is still matched when filtering */ label?: string; /** right-aligned secondary text, e.g. "default" on a repo's default branch. rich only: * a native `<option>` has nowhere to put it */ hint?: string; /** consecutive options sharing one become a single optgroup or heading */ group?: string; disabled?: boolean;}
export type SelectAlign = "left" | "right";
/** The box both renderings draw. Layout differs — a native select needs the chevron overlaid, * the rich trigger lays it out inline — so each renderer appends its own padding and display, * and only the border, fill and state colours live here. */export const selectField = tv({ slots: { box: "w-full rounded-sm border bg-background-default transition-colors outline-none disabled:cursor-not-allowed", chevron: "shrink-0 text-foreground-subtle" }, variants: { error: { false: { box: "border-border-default text-foreground-default focus-visible:border-border-strong focus-visible:ring-1 focus-visible:ring-border-strong" }, true: { 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", chevron: "text-foreground-danger" } }, disabled: { false: {}, true: { box: "text-foreground-disabled", chevron: "text-foreground-disabled" } } }, compoundVariants: [ { error: true, disabled: true, class: { box: "border-border-danger-subtle bg-background-danger-subtle text-foreground-danger-subtle", chevron: "text-foreground-danger-subtle" } } ], defaultVariants: { error: false, disabled: false }});
export type SelectFieldVariants = VariantProps<typeof selectField>;