{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-select-23","type":"registry:block","title":"Multi-select with overlapping dots","description":"Multi-select with overlapping dots","dependencies":["cn"],"registryDependencies":["@reui/badge","field","select"],"files":[{"path":"c-select-23.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\nimport { Badge } from \"@/components/reui/badge\"\n\nimport { cn } from \"cn\"\nimport { Field } from \"@/components/ui/field\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\n\nconst statuses = [\n  { value: \"ready\", label: \"Ready\", color: \"bg-emerald-400\" },\n  { value: \"error\", label: \"Error\", color: \"bg-red-500\" },\n  { value: \"building\", label: \"Building\", color: \"bg-amber-500\" },\n  { value: \"queued\", label: \"Queued\", color: \"bg-blue-500\" },\n  { value: \"initializing\", label: \"Initializing\", color: \"bg-primary\" },\n  { value: \"canceled\", label: \"Canceled\", color: \"bg-fuchsia-500\" },\n]\n\nexport function Pattern() {\n  const [selected, setSelected] = useState<string[]>(\n    statuses.slice(0, 5).map((s) => s.value)\n  )\n\n  return (\n    <Field className=\"max-w-xs\">\n      <Select\n        multiple\n        value={selected}\n        onValueChange={(val) => setSelected(val)}\n        items={statuses}\n      >\n        <SelectTrigger className=\"w-full justify-between\">\n          <SelectValue>\n            {(values: string[]) => {\n              const selectedData = statuses.filter((s) =>\n                values.includes(s.value)\n              )\n              return (\n                <div className=\"flex items-center gap-2 overflow-hidden\">\n                  <div className=\"flex -space-x-1 overflow-hidden\">\n                    {selectedData.map((s) => (\n                      <div\n                        key={s.value}\n                        className={cn(\n                          \"ring-background size-2.5 shrink-0 rounded-full ring-2\",\n                          s.color\n                        )}\n                      />\n                    ))}\n                  </div>\n                  <span className=\"truncate\">Status</span>\n                  <Badge variant=\"outline\" size=\"sm\">\n                    {values.length}/{statuses.length}\n                  </Badge>\n                </div>\n              )\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={false} className=\"min-w-48\">\n          <SelectGroup>\n            {statuses.map((status) => (\n              <SelectItem key={status.value} value={status.value}>\n                <div className=\"flex items-center gap-2\">\n                  <div className={cn(\"size-2 rounded-full\", status.color)} />\n                  <span>{status.label}</span>\n                </div>\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Field>\n  )\n}","target":"components/examples/c-select-23.tsx"}],"meta":{"order":23}}