Intentwise Primitives

<FilterSelect
  data={{ label: 'Campaign Type', options: [...], value: [], mode: 'multi' }}
  onChange={(value) => setSelected(value)}
  searchable
/>

<FilterSelect
  data={{ label: 'Status', options: [...], value: 'active', mode: 'single' }}
  onChange={(value) => setStatus(value)}
/>

<FilterSelect
  data={{ label: 'Campaign Type', options: [...], value: applied, mode: 'multi' }}
  onChange={setApplied}
  confirm
  searchable
/>

<FilterSelect data={...} onChange={...} loading />
<FilterSelect data={...} onChange={...} disabled />

<FilterBar>
  <FilterSelect data={campaignType} onChange={...} />
  <FilterSelect data={status} onChange={...} />
  <FilterSelect data={brand} onChange={...} />
</FilterBar>

<SegmentedControl
  data={{ options: [{ value: '7d', label: '7D' }, ...], value: '30d' }}
  onChange={(value) => setTimeRange(value)}
/>

<SegmentedControl data={...} onChange={...} size="sm" />

<OrgAccountSelector
  data={{ organizations: [...], accounts: [...], selectedOrgId, selectedAccountId }}
  onOrgChange={(id) => setOrgId(id)}
  onAccountChange={(id) => setAccountId(id)}
/>

<OrgAccountSelector data={...} orgsLoading accountsLoading />

<OrgAccountSelector data={...} disabled />

<FilterChipBar
  filters={filters}
  onChange={setFilters}
  filterMenuItems={[{ value: 'campaign', label: 'Campaign', filterType: 'name' }, ...]}
/>

<NameFilterDialog
  open={open}
  onClose={() => setOpen(false)}
  onApply={(result) => { ...; setOpen(false); }}
  title="Campaign(s)"
  options={[{ id, label, secondaryLabel? }, ...]}
  showSelectOperator={true}
  showNonSelectOperators={true}
  virtualizeList   // opt-in for large lists
/>

<StatusFilterDialog
  open={open}
  onClose={() => setOpen(false)}
  onApply={(result) => { ...; setOpen(false); }}
  selectionMode="single"
  options={[{ id: 'enabled', label: 'Enabled' }]}
/>

<DateFilterDialog
  open={open}
  onClose={() => setOpen(false)}
  onApply={({ operator, value }) => { ...; setOpen(false); }}
  title="Campaign Start Date"
  defaultOperator="GREATER_THAN"
  defaultValue="2026-07-16"
/>

<TableColumnSelector
  columns={[{ id, label, visible }, ...]}
  open={open}
  onOpenChange={setOpen}
  onApply={(state) => setState(state)}
/>

<div ref={targetRef} className={FULLSCREEN_TARGET_CLASS}>...</div>
<FullscreenToggle targetRef={targetRef} />

<DarkModeProvider><DarkModeToggle showLabel size="md" /></DarkModeProvider>

<DateRangePicker value={range} onChange={setRange} label="Date range" />

<DateRangePicker
  value={range}
  onChange={setRange}
  label="Date range"
  comparison
  comparisonValue={compare}
  onComparisonChange={setCompare}
/>

const customPresets: DateRangePresetItem[] = [
  { label: 'Recent Week',  getRange: () => ({ start: subDays(new Date(), 6),  end: new Date() }) },
  { label: 'Recent Month', getRange: () => ({ start: subDays(new Date(), 29), end: new Date() }) },
  { label: 'Year to Date', getRange: () => ({ start: startOfYear(new Date()), end: new Date() }) },
];

<DateRangePicker value={range} onChange={setRange} label="Date range" presets={customPresets} />

<DateRangePicker
  value={range}
  onChange={setRange}
  label="Date range"
  presets={fixedPresets}
  hideCustom
/>

<MetricChip
  label="Spend"
  color="#4573D2"
  type="line"
  onTypeChange={(type) => {}}
  onRemove={() => {}}
/>

<MetricsSelector metrics={[...]} value={value} onChange={setValue} />

<ExportToolbar containerRef={ref} filename="chart" onExportExcel={() => {}} />

exportTableToXlsx(columns, rows, 'revenue.xlsx', 'Data', {
  currencyCode: 'USD',
  decimals: 0, // $2,500,000,000 instead of $2,500,000,000.00
})

<Toggle checked={checked} onChange={setChecked} label="Enable feature" />

<TimeAggregation value={value} onChange={setValue} />

<RollUpSelector options={[...]} value={value} onChange={setValue} />

<FrequencySelector title="Frequency" options={[...]} value={value} onChange={setValue} onSave={() => {}} />

<EntitySelector campaigns={[...]} onChange={(c, a) => {}} />

<ViewModeToggle value={mode} onChange={setMode} />

<ViewModeToggle value="chart" onChange={...} size="sm" />

<LayoutSelector options={layouts} value={layout} onChange={setLayout} />

<DataLabelsToggle pressed={on} onPressedChange={setOn} />

<DataExportButton getData={async () => rows} columns={columns} fileName="export" />

<TableToolbar
  featureToolbar={<span className="text-sm text-iw-text-secondary">Custom actions here</span>}
  chartToggle={{ showChart, onToggleChart: () => setShowChart(v => !v) }}
  showColumnSelector
  onColumnSelectorOpen={() => alert('Open column selector')}
  showExport
  exportProps={{ getData: async () => rows, columns, fileName: 'export' }}
  showFullscreen
  fullscreenExpanded={fullscreenExpanded}
  onFullscreenChange={setFullscreenExpanded}
  targetRef={containerRef}
/>

<Card>Content goes here</Card>
<Card header={<span>Header</span>}>With header slot</Card>

<InputField label="Name" size="md" value={value} onChange={setValue} />
<InputField label="Error" error="Required" value="" onChange={() => {}} />
<InputField label="Disabled" disabled value="Cannot edit" onChange={() => {}} />

<FileUpload
  variant="image"
  accept="image/*"
  value={file}
  onChange={setFile}
  validate={validateImageDimensions({ width: 300, height: 180 })}
  maxSizeBytes={200 * 1024}
  label="Brand logo"
/>

<FileUpload
  variant="video"
  accept="video/*"
  value={file}
  onChange={setFile}
  validate={[
    validateVideoDimensions([{ width: 1920, height: 1080 }, { width: 3840, height: 2160 }]),
    validateVideoDuration({ minSec: 5, maxSec: 30 }),
  ]}
  maxSizeBytes={500 * 1024 * 1024}
  label="Sponsored video"
/>

<FileUpload
  variant="generic"
  accept=".srt"
  value={file}
  onChange={setFile}
  label="Captions"
/>

<Button variant="primary" startIcon={<Plus />}>New Rule</Button>
<Button variant="secondary">View History</Button>
<Button variant="tertiary">Cancel</Button>
<Button variant="none">Filter</Button>

<SelectField value={value} onChange={setValue} label="Target">
  <option value="line_items">Line Items</option>
  <option value="ad_groups">Ad Groups</option>
</SelectField>

<CheckboxField checked={checked} onChange={setChecked} label="Enable undo schedule" />

// ReactNode label — name + inline badge
<CheckboxField
  checked={checked}
  onChange={setChecked}
  label={
    <span className="inline-flex items-baseline gap-1.5">
      <span>Enable undo schedule</span>
      <span className="text-[10px] font-medium uppercase tracking-wide text-iw-text-muted">beta</span>
    </span>
  }
/>

<RadioField checked={value === 'a'} onChange={(checked) => checked && setValue('a')} />

<TimeField value={value} onChange={setValue} label="Execution Time" />

const { toasts, addToast, removeToast } = useToast();

// design: 'accent' (default) | 'solid' | 'soft'
addToast('success', 'Your automation rule is now live.', { title: 'Rule saved', design: 'solid' });
addToast('error', 'We couldn’t save the rule.', { title: 'Save failed', design: 'soft' });

// or set one design for every toast on the container:
<ToastContainer toasts={toasts} onRemove={removeToast} design="accent" />

<DateTimePicker value={dateTime} onChange={setDateTime} label="Start Date" />
<DateTimePicker value={dateOnly} onChange={setDateOnly} showTime={false} variant="underline" label="Execution Date" />

<CalendarRangeModal
  isOpen={open}
  onClose={() => setOpen(false)}
  initialStartDate={start}
  initialEndDate={end}
  onApply={(s, e) => { setStart(s); setEnd(e); setOpen(false); }}
/>

<DateRangeSelector
  selectedPreset={preset}
  onPresetChange={setPreset}
  customRange={{ startDate: start, endDate: end }}
  onCustomRangeChange={(s, e) => { setStart(s); setEnd(e); }}
/>

<SimpleAccordion items={items} expanded={expanded} onExpandedChange={setExpanded} />

<SimpleAccordion items={items} allowMultiple />

<Checkbox checked={checked} onCheckedChange={setChecked} label="Enable" size="md" />

<FilterConditionCell conditions={[{ fieldLabel: 'Campaign', opLabel: 'is', valueStr: 'SP' }]} />

<FilterConditionCell conditions={[]} />

<SearchInput value={value} onChange={setValue} onSearch={handleSearch} debounceMs={300} />

<SelectableTable columns={cols} rows={rows} rowIdField="id"
  selectedIds={selectedIds} onSelectionChange={setSelectedIds} />

<SelectableTable
  selectionMode="radio"
  columns={cols} rows={rows} rowIdField="id"
  selectedIds={selectedIds} onSelectionChange={setSelectedIds} />

<SelectableTable loading columns={cols} rows={[]} ... />

<SelectableTable
  rowMinHeight="48px"
  rowMaxHeight="72px"
  columns={cols} rows={rows} rowIdField="id"
  selectedIds={selectedIds} onSelectionChange={setSelectedIds} />

<Card header="Regular">content</Card>
<TransparentCard header="Transparent">content</TransparentCard>

<TreeSelect items={items} selectedIds={selectedIds} onSelectionChange={setSelectedIds} />

<TreeSelect items={items} selectedIds={selectedIds} onSelectionChange={setSelectedIds} searchable />

<RadioGroup
  options={[{ value: 'include', label: 'Include' }, { value: 'exclude', label: 'Exclude' }]}
  value={value}
  onChange={setValue}
  orientation="horizontal"
/>

<RadioGroup
  options={[{ value: 'new-bid', label: 'Set New Bid' }, ...]}
  value={value}
  onChange={setValue}
  orientation="vertical"
/>

<RadioGroup options={[...]} value="active" disabled />

<RadioGroup
  options={[{ value: 'set', label: 'Set new bid' }, ...]}
  value={value}
  onChange={setValue}
  orientation="vertical"
  optionLabelClassName="italic text-iw-text-muted"
/>

<IWDialog isOpen={open} onClose={() => setOpen(false)}>
  <IWDialogHeader title="Edit Line Item" />
  <IWDialogBody>...</IWDialogBody>
  <IWDialogFooter>
    <Button variant="secondary" onClick={onClose}>Cancel</Button>
    <Button variant="primary" onClick={onSave}>Save</Button>
  </IWDialogFooter>
</IWDialog>

<IWDialogHeader title="Bulk Update" variant="branded" />

<IWDialog isOpen={open} onClose={onClose} size="xl">...</IWDialog>

<IWDrawer isOpen={open} onClose={() => setOpen(false)}>
  <IWDrawerHeader title="Settings" />
  <IWDrawerBody>...</IWDrawerBody>
  <IWDrawerFooter>
    <Button variant="primary" onClick={onClose}>Apply</Button>
  </IWDrawerFooter>
</IWDrawer>

<IWDrawer isOpen={open} onClose={onClose} position="left" width="20rem">...</IWDrawer>

<MetricFilterDialog
  open={open}
  onClose={() => setOpen(false)}
  title="Filter by Impressions"
  filterType="number"
  onApply={(result) => console.log(result)}
/>

<MetricFilterDialog
  open={open}
  onClose={() => setOpen(false)}
  title="Filter by Campaign Name"
  filterType="text"
  onApply={(result) => console.log(result)}
/>

<CopyButton text="Campaign name test99673" />

<CopyButton
  text="some-api-key-123"
  label="Copy API key"
  onCopy={(text) => console.log('Copied:', text)}
/>

<div className="group flex items-center gap-1 w-48 border rounded p-2">
  <span className="flex-1 truncate text-sm">Campaign name test99673</span>
  <CopyButton
    text="Campaign name test99673"
    className="opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100"
  />
</div>

<div className="space-y-2">
  <Label htmlFor="campaign">Campaign name</Label>
  <Input id="campaign" placeholder="Summer Sale" />
</div>

<Select value={value} onValueChange={setValue}>
  <SelectTrigger className="w-[220px]">
    <SelectValue placeholder="Ad type" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="sp">Sponsored Products</SelectItem>
    <SelectItem value="sb">Sponsored Brands</SelectItem>
  </SelectContent>
</Select>

<Accordion type="single" collapsible>
  <AccordionItem value="a">
    <AccordionTrigger>Performance</AccordionTrigger>
    <AccordionContent>Spend, revenue, and ROAS.</AccordionContent>
  </AccordionItem>
</Accordion>

<ActionMenu
  trigger={<Button size="sm">Actions</Button>}
  items={[
    { label: 'Edit', onClick: () => {} },
    { label: 'Duplicate', onClick: () => {} },
    { label: 'Delete', onClick: () => {}, disabled: true },
  ]}
/>

<Command className="rounded-iw-md border">
  <CommandInput placeholder="Search metrics…" />
  <CommandList>
    <CommandEmpty>No results.</CommandEmpty>
    <CommandGroup heading="Metrics">
      <CommandItem>Spend</CommandItem>
      <CommandItem>Revenue</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

<ContextMenu>
  <ContextMenuTrigger>Right click me</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Open</ContextMenuItem>
    <ContextMenuItem>Rename</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

<Dialog>
  <DialogTrigger asChild><Button>Open</Button></DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Confirm</DialogTitle>
      <DialogDescription>Apply changes to this campaign?</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button>Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

<Popover>
  <PopoverTrigger asChild><Button>Filters</Button></PopoverTrigger>
  <PopoverContent>Filter panel content</PopoverContent>
</Popover>

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild><Button>Hover me</Button></TooltipTrigger>
    <TooltipContent>Helpful hint</TooltipContent>
  </Tooltip>
</TooltipProvider>

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="details">Details</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview panel</TabsContent>
</Tabs>

<Skeleton className="h-4 w-48" />
<Skeleton className="h-24 w-full rounded-iw-md" />

<Separator />
<Separator orientation="vertical" />

<ScrollArea className="h-40 w-64 rounded border">…</ScrollArea>

<Toaster />
<Button onClick={() => toast.success('Saved')}>Notify</Button>