{ "schemaVersion": 1, "name": "select", "useFor": "Use the field appearance inside Field for forms. Use compact in dense rows and ghost or chip for filters. Field required is inherited by Select. Give Select a name for FormData; keep value and onValueChange on the root. Use compact on SelectContent for compact fields and toolbar menus.", "constraints": [ "Pill-shaped triggers", "Empty string item values", "Long lists without a search (use a command)" ], "documentation": "The field matches the input: 36px, 8px corners, the 16 percent ink edge, 14px Inter and a drawn chevron. Its menu fits the trigger and viewport and wraps long option labels.\n\nFor controlled forms, reset `value` from the form's `onReset` handler. `Field` displays your current error; validation and submitting to a backend belong to the form. A disabled item cannot be chosen. Prefer a segmented control when a small set of choices should remain visible.", "source": "Extension from opencommerce-agentcard-web src/components/monitoring.tsx (#merchant-filter)", "exports": [ "Select", "SelectContent", "SelectGroup", "SelectItem", "SelectLabel", "SelectSeparator", "SelectTrigger", "SelectValue" ], "client": true, "docsUrl": "https://opencommerce-ds.vercel.app/components/select", "markdownUrl": "https://opencommerce-ds.vercel.app/r/select.md", "examples": [ { "path": "examples/select.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Field } from \"@/components/ui/field\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\n\nexport function Site() {\n return (\n
\n \n \n \n \n \n \n
\n );\n}\n\nexport function Controlled() {\n const [value, setValue] = React.useState(\"a\");\n return (\n
\n \n \n \n
\n );\n}\n\nexport function Toolbar() {\n return (\n
\n \n \n
\n \n
\n
\n );\n}\n\nexport function Form() {\n const [value, setValue] = React.useState(\"\");\n const [error, setError] = React.useState(\"\");\n const [result, setResult] = React.useState(\"\");\n return (\n
{\n event.preventDefault();\n if (!value) { setError(\"Choose a card before continuing.\"); setResult(\"\"); return; }\n setError(\"\");\n setResult(`Selected: ${new FormData(event.currentTarget).get(\"card\")}.`);\n }} onReset={() => { setValue(\"\"); setError(\"\"); setResult(\"\"); }}>\n \n \n \n \n \n \n
\n

{result}

\n
\n );\n}\n", "exports": [ "Site", "Controlled", "Toolbar", "Form" ], "requires": [ "select", "button", "field" ], "packages": [], "previews": [ { "name": "Site", "url": "https://opencommerce-ds.vercel.app/preview/select/Site" }, { "name": "Controlled", "url": "https://opencommerce-ds.vercel.app/preview/select/Controlled" }, { "name": "Toolbar", "url": "https://opencommerce-ds.vercel.app/preview/select/Toolbar" }, { "name": "Form", "url": "https://opencommerce-ds.vercel.app/preview/select/Form" } ] } ], "type": "ui", "title": "Select", "description": "Single-choice select with field, compact, ghost and chip treatments.", "surface": "site", "kinds": [ "input" ], "requires": [ "theme", "surface", "field", "utils" ], "packages": [ "@radix-ui/react-select", "lucide-react", "class-variance-authority" ], "files": [ { "path": "components/ui/select.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { usePortalContainer } from \"@/lib/surface\";\nimport { useFieldControl } from \"@/components/ui/field\";\nimport { cn } from \"@/lib/utils\";\n\n// A single choice. `field` is the brand's field (the input's 36px box with 8px corners on the 16 percent ink edge, 14px\n// Inter) with a drawn chevron 12px in from the right; focus and an open list turn the edge blue, with no glow. `compact`\n// is the same at 32px for dense rows. `ghost` is the white key for a toolbar, `chip` a quiet label on a wash. The list is\n// the brand's floating panel (white, a 9 percent ink edge, 8px corners) growing from its trigger in a quick ease-out;\n// the row under the pointer or the keys takes the pale blue, the chosen one a blue tick.\nconst triggerVariants = cva(\n \"flex min-w-0 max-w-full items-center gap-2 whitespace-nowrap outline-none transition-[background-color,border-color,color,scale] duration-160 ease-out disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none [&_svg]:shrink-0 [&>[data-slot=select-value]]:min-w-0 [&>[data-slot=select-value]]:truncate [&>[data-slot=select-value]]:text-left\",\n {\n variants: {\n appearance: {\n field:\n \"w-full gap-3 rounded-control border border-hairline bg-surface font-sans text-fg hover:border-line-field-hover focus-visible:border-line-brand data-[state=open]:border-line-brand data-placeholder:text-fg-faint aria-invalid:border-danger [&>span]:flex-1 [&>span]:truncate [&>span]:text-left\",\n ghost:\n \"h-8 rounded-control border border-hairline bg-surface px-3 font-sans text-body-sm text-fg hover:bg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus-ring active:scale-97 data-[state=open]:bg-subtle motion-reduce:active:scale-100\",\n chip: \"h-7 rounded-sm bg-wash-pill px-2.5 font-sans text-caption text-fg-muted hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus-ring data-[state=open]:text-fg\",\n },\n // A shorter field, for dense rows.\n compact: { true: \"\", false: \"\" },\n },\n compoundVariants: [\n { appearance: \"field\", compact: false, className: \"h-9 px-3 text-body-sm\" },\n { appearance: \"field\", compact: true, className: \"h-8 px-2.5 text-body-sm\" },\n ],\n defaultVariants: { appearance: \"field\", compact: false },\n },\n);\n\n/** The select's mark: a small open chevron, drawn in a 1.5px line. */\nfunction SelectMark({ className }: { className?: string }) {\n return (\n \n \n \n );\n}\n\nfunction Select(props: React.ComponentProps) {\n const { required } = useFieldControl({ required: props.required });\n return ;\n}\n\nfunction SelectGroup(props: React.ComponentProps) {\n return ;\n}\n\nfunction SelectValue(props: React.ComponentProps) {\n return ;\n}\n\nfunction SelectTrigger({ className, appearance, compact, children, ...props }: React.ComponentProps & VariantProps) {\n const { required, ...control } = useFieldControl(props);\n return (\n \n {children}\n \n \n \n \n );\n}\n\nfunction SelectContent({ className, children, compact = false, position = \"popper\", collisionPadding = 8, ...props }: React.ComponentProps & { compact?: boolean }) {\n return (\n \n \n \n \n \n {children}\n \n \n \n \n \n );\n}\n\nfunction SelectLabel({ className, ...props }: React.ComponentProps) {\n return ;\n}\n\nfunction SelectItem({ className, children, description, ...props }: React.ComponentProps & { description?: React.ReactNode }) {\n return (\n \n \n {children}\n {description && {description}}\n \n \n \n \n \n );\n}\n\nfunction SelectSeparator({ className, ...props }: React.ComponentProps) {\n return ;\n}\n\nexport { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue };\n" } ] }