A `forwardRef`-wrapped button component styled to match Input fields, designed to trigger popups, popovers, dropdowns, and custom calendars while maintaining visual consistency with other form elements. ## Key Components ### `InputTriggerProps` Extends `React.ButtonHTMLAttributes` (omitting `children`) with: | Prop | Type | Description | |------|------|-------------| | `selectedLabel` | `React.ReactNode` | Displayed when a value is selected | | `placeholder` | `string` | Shown when no value is selected | | `startIcon` | `React.ReactNode` | Icon rendered on the left | | `endIcon` | `React.ReactNode` | Icon rendered on the right (e.g. chevron) | | `invalid` | `boolean` | Applies error border styling | ### `InputTrigger` A `forwardRef` button that: - Renders `placeholder` text (muted) when `selectedLabel` is `undefined`, `null`, or `""` - Applies `data-invalid` for error states and `data-[state=open]` accent border when open - Supports disabled, hover, and active visual states via Tailwind utility classes ## Usage Example ```typescript import { InputTrigger } from "./input-trigger"; import { CalendarIcon, ChevronDownIcon } from "lucide-react"; // Inside a Radix Popover } endIcon={} invalid={!!formErrors.date} /> ... ``` > **When to use:** Triggers for popovers, custom calendars, or `ActionsMenuDropdown`. Use `` for flat-list selection, and `` for page-level CTAs.