<FilterFaceted.Root>
  <FilterFaceted.Trigger />
  <FilterFaceted.Content>
    <FilterFaceted.Input />
    <FilterFaceted.Empty />
    <FilterFaceted.List>
      <FilterFaceted.Option />
    </FilterFaceted.List>
    <FilterFaceted.Separator />
    <FilterFaceted.Footer />
  </FilterFaceted.Content>
</FilterFaceted.Root>

<DataFilters.Root>
  <DataFilters.Items>
    <DataFilters.Item />
  </DataFilters.Items>
  <DataFilters.Separator />
  <DataFilters.Clear />
</DataFilters.Root>

const options = [
  { value: 'pending', label: 'Pending', count: 12 },
  { value: 'processing', label: 'Processing', count: 3 },
  { value: 'completed', label: 'Completed', count: 8 }
]

return (
  <FilterFaceted.Root>
    <FilterFaceted.Trigger asChild>
      <Button variant="outline">Status</Button>
    </FilterFaceted.Trigger>
    <FilterFaceted.Content>
      <FilterFaceted.Input placeholder="Search status..." />
      <FilterFaceted.List>
        {options.map((option) => (
          <FilterFaceted.Option 
            key={option.value}
            value={option.value}
            count={option.count}
          >
            {option.label}
          </FilterFaceted.Option>
        ))}
      </FilterFaceted.List>
    </FilterFaceted.Content>
  </FilterFaceted.Root>
)

const [filters, setFilters] = useState<string[]>([])

return (
  <DataFilters.Root value={filters} onValueChange={setFilters}>
    <DataFilters.Items>
      {filters.map((filter) => (
        <DataFilters.Item key={filter} value={filter}>
          {filter}
        </DataFilters.Item>
      ))}
    </DataFilters.Items>
    {filters.length > 0 && (
      <>
        <DataFilters.Separator />
        <DataFilters.Clear>Reset filters</DataFilters.Clear>
      </>
    )}
  </DataFilters.Root>
)

const options = [
  { value: 'low', label: 'Low Priority', count: 12, color: 'success' },
  { value: 'medium', label: 'Medium Priority', count: 3, color: 'warning' },
  { value: 'high', label: 'High Priority', count: 8, color: 'danger' }
]

return (
  <FilterFaceted.Root>
    <FilterFaceted.Trigger asChild>
      <Button variant="outline">Priority</Button>
    </FilterFaceted.Trigger>
    <FilterFaceted.Content>
      <FilterFaceted.List>
        {options.map((option) => (
          <FilterFaceted.Option 
            key={option.value}
            value={option.value}
            count={option.count}
            color={option.color}
          >
            <div className="flex items-center gap-2">
              <div className={cn(
                'size-2 rounded-full',
                option.color === 'success' && 'bg-success-solid',
                option.color === 'warning' && 'bg-warning-solid',
                option.color === 'danger' && 'bg-danger-solid'
              )} />
              {option.label}
            </div>
          </FilterFaceted.Option>
        ))}
      </FilterFaceted.List>
    </FilterFaceted.Content>
  </FilterFaceted.Root>
)

const options = [
  { value: 'inbox', label: 'Inbox', icon: InboxIcon, count: 12 },
  { value: 'sent', label: 'Sent', icon: SendIcon, count: 3 },
  { value: 'draft', label: 'Draft', icon: FileIcon, count: 8 }
]

return (
  <FilterFaceted.Root>
    <FilterFaceted.Trigger asChild>
      <Button variant="outline">Mail</Button>
    </FilterFaceted.Trigger>
    <FilterFaceted.Content>
      <FilterFaceted.List>
        {options.map((option) => (
          <FilterFaceted.Option 
            key={option.value}
            value={option.value}
            count={option.count}
          >
            <div className="flex items-center gap-2">
              <option.icon className="size-4" />
              {option.label}
            </div>
          </FilterFaceted.Option>
        ))}
      </FilterFaceted.List>
    </FilterFaceted.Content>
  </FilterFaceted.Root>
)