{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "filter-chip-bar",
  "title": "Filter Chip Bar",
  "description": "Filter Chip Bar from the Get IT Done design system.",
  "dependencies": [
    "lucide-react@^0.379.0"
  ],
  "registryDependencies": [
    "https://zero-design.itdone.de/r/button.json",
    "https://zero-design.itdone.de/r/chip.json",
    "https://zero-design.itdone.de/r/labels-context.json",
    "https://zero-design.itdone.de/r/utils.json",
    "https://zero-design.itdone.de/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/filter-chip-bar.tsx",
      "content": "'use client';\n\nimport { Plus } from 'lucide-react';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { Button } from '@/components/ui/button';\nimport { Chip } from '@/components/ui/chip';\nimport { useLabels } from '@/components/ui/labels-context';\n\nexport interface FilterChipItem {\n  id: string;\n  // \"Key: value\" text, for example \"Status: open\".\n  label: string;\n}\n\nexport interface FilterChipBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  // Applied filters. Plain strings are used as both id and label.\n  chips: Array<FilterChipItem | string>;\n  onRemove?: (id: string) => void;\n  // Shows the reset link while at least one filter is applied.\n  reset?: boolean;\n  resetLabel?: string;\n  onReset?: () => void;\n  // Renders the dashed \"add filter\" chip when provided.\n  onAdd?: () => void;\n  addLabel?: string;\n  // Spacing context only: in an action bar the row sits in a single line, above a list it wraps freely.\n  placement?: 'in-action-bar' | 'above-list';\n  // Text announced when the filter set changes to nothing.\n  emptyLabel?: string;\n}\n\nconst normalize = (chip: FilterChipItem | string): FilterChipItem => (typeof chip === 'string' ? { id: chip, label: chip } : chip);\n\nconst FilterChipBar = React.forwardRef<HTMLDivElement, FilterChipBarProps>(\n  (\n    {\n      className,\n      chips,\n      onRemove,\n      reset = true,\n      resetLabel: resetLabelProp,\n      onReset,\n      onAdd,\n      addLabel: addLabelProp,\n      placement = 'above-list',\n      emptyLabel: emptyLabelProp,\n      'aria-label': ariaLabelProp,\n      ...props\n    },\n    ref,\n  ) => {\n    const l = useLabels();\n    const resetLabel = resetLabelProp ?? l.reset;\n    const addLabel = addLabelProp ?? l.addFilter;\n    const emptyLabel = emptyLabelProp ?? l.noFiltersApplied;\n    const ariaLabel = ariaLabelProp ?? l.appliedFilters;\n    const items = chips.map(normalize);\n    const count = items.length;\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label={ariaLabel}\n        data-placement={placement}\n        data-empty={count === 0 || undefined}\n        className={cn('flex flex-wrap items-center gap-2', placement === 'in-action-bar' && 'flex-nowrap overflow-x-auto', className)}\n        {...props}\n      >\n        {items.map((chip) => (\n          <Chip\n            key={chip.id}\n            variant=\"outline\"\n            size=\"control\"\n            label={chip.label}\n            removeLabel={l.removeFilter(chip.label)}\n            onRemove={onRemove ? () => onRemove(chip.id) : undefined}\n          />\n        ))}\n        {onAdd ? (\n          <Chip\n            size=\"control\"\n            variant=\"outline\"\n            dashed\n            icon={<Plus aria-hidden=\"true\" />}\n            label={addLabel}\n            onClick={onAdd}\n          />\n        ) : null}\n        {reset && count > 0 && onReset ? (\n          <Button type=\"button\" variant=\"link\" size=\"no-size\" className=\"typography-ui text-text-brand underline-offset-4\" onClick={onReset}>\n            {resetLabel}\n          </Button>\n        ) : null}\n        <span role=\"status\" className=\"sr-only\">\n          {count === 0 ? emptyLabel : l.filtersApplied(count)}\n        </span>\n      </div>\n    );\n  },\n);\nFilterChipBar.displayName = 'FilterChipBar';\n\nexport { FilterChipBar };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}