43 lines
1.9 KiB
TypeScript
43 lines
1.9 KiB
TypeScript
import { z } from "zod/v4";
|
|
import type { JSX } from "solid-js";
|
|
import type { ComponentMeta } from "../../meta";
|
|
|
|
export const ComboboxRootPropsSchema = z.object({
|
|
value: z.string().optional().describe("Controlled selected value"),
|
|
defaultValue: z.string().optional().describe("Initial selected value (uncontrolled)"),
|
|
inputValue: z.string().optional().describe("Controlled input text value"),
|
|
name: z.string().optional().describe("Form field name"),
|
|
placeholder: z.string().optional().describe("Placeholder text shown in the input when empty"),
|
|
disabled: z.boolean().optional().describe("Whether the combobox is disabled"),
|
|
required: z.boolean().optional().describe("Whether selection is required"),
|
|
allowCustomValue: z.boolean().optional().describe("Allow selecting a value not in the items list"),
|
|
});
|
|
|
|
export interface ComboboxRootProps extends z.infer<typeof ComboboxRootPropsSchema> {
|
|
items: string[];
|
|
onValueChange?: (value: string) => void;
|
|
open?: boolean;
|
|
defaultOpen?: boolean;
|
|
onOpenChange?: (open: boolean) => void;
|
|
onInputChange?: (value: string) => void;
|
|
getLabel?: (value: string) => string;
|
|
children: JSX.Element;
|
|
}
|
|
|
|
export const ComboboxItemPropsSchema = z.object({
|
|
value: z.string().describe("The value this item represents"),
|
|
disabled: z.boolean().optional().describe("Whether this item is disabled"),
|
|
textValue: z.string().optional().describe("Accessible text used for typeahead matching"),
|
|
});
|
|
|
|
export interface ComboboxItemProps extends z.infer<typeof ComboboxItemPropsSchema>, JSX.HTMLAttributes<HTMLDivElement> {
|
|
children?: JSX.Element;
|
|
}
|
|
|
|
export const ComboboxMeta: ComponentMeta = {
|
|
name: "Combobox",
|
|
description: "Searchable select that filters options as the user types, with keyboard navigation",
|
|
parts: ["Root", "Input", "Trigger", "Portal", "Content", "Listbox", "Item", "ItemLabel", "ItemIndicator", "Group", "GroupLabel"] as const,
|
|
requiredParts: ["Root", "Input", "Content", "Item"] as const,
|
|
} as const;
|