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={...} 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 }, ...]}
  showSelectOperator={true}
  showNonSelectOperators={true}
/>

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

<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" />

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

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

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

<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={() => {}} />

<Button variant="primary" startIcon={<Plus />}>New Rule</Button>
<Button variant="secondary">View History</Button>
<Button variant="tertiary">Cancel</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" />

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

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

const { toasts, addToast, removeToast } = useToast();
<ToastContainer toasts={toasts} onRemove={removeToast} />

<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); }}
/>

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

<Accordion 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 loading columns={cols} rows={[]} ... />

<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 />

<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)}
/>