{
  "name": "staff-picker",
  "title": "StaffPicker",
  "description": "Staff member selection list with avatar and bio.",
  "type": "component",
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "staff-picker.tsx",
      "content": "\"use client\";\n\nimport { Radio } from \"@base-ui/react/radio\";\nimport { RadioGroup } from \"@base-ui/react/radio-group\";\nimport React from \"react\";\nimport type { Staff } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nconst ANY_VALUE = \"__any__\";\n\nexport interface StaffPickerClassNames {\n  root?: string;\n  option?: string;\n  avatar?: string;\n  name?: string;\n  bio?: string;\n}\n\nexport interface StaffPickerProps {\n  /** List of available staff members. */\n  staff: Staff[];\n  /** Currently selected staff ID, or null for \"Any available\". */\n  selectedStaffId?: string | null;\n  /** Called when a staff member is selected. Passes null for \"Any available\". */\n  onStaffSelect?: (staffId: string | null) => void;\n  /** Show \"Any available\" option. Default: true. */\n  showAnyOption?: boolean;\n  /** Label for the \"Any available\" option. */\n  anyLabel?: string;\n  className?: string;\n  classNames?: StaffPickerClassNames;\n}\n\nexport function StaffPicker({\n  staff,\n  selectedStaffId,\n  onStaffSelect,\n  showAnyOption = true,\n  anyLabel = \"Any available\",\n  className,\n  classNames,\n}: StaffPickerProps): React.ReactElement {\n  const groupValue =\n    selectedStaffId === null ? ANY_VALUE : (selectedStaffId ?? \"\");\n\n  return (\n    <RadioGroup\n      data-cimplify-staff-picker\n      className={cn(className, classNames?.root)}\n      value={groupValue}\n      onValueChange={(value) => {\n        onStaffSelect?.(value === ANY_VALUE ? null : value);\n      }}\n    >\n      {showAnyOption && (\n        <Radio.Root\n          value={ANY_VALUE}\n                    data-cimplify-staff-option\n          data-selected={selectedStaffId === null || undefined}\n          data-any\n          className={classNames?.option}\n        >\n          <span data-cimplify-staff-name className={classNames?.name}>\n            {anyLabel}\n          </span>\n        </Radio.Root>\n      )}\n      {staff.map((member) => (\n        <Radio.Root\n          key={member.id}\n          value={member.id}\n                    data-cimplify-staff-option\n          data-selected={selectedStaffId === member.id || undefined}\n          className={classNames?.option}\n        >\n          {member.avatar_url && (\n            <img\n              src={member.avatar_url}\n              alt={member.name}\n              data-cimplify-staff-avatar\n              className={classNames?.avatar}\n            />\n          )}\n          <span data-cimplify-staff-name className={classNames?.name}>\n            {member.name}\n          </span>\n          {member.bio && (\n            <span data-cimplify-staff-bio className={classNames?.bio}>\n              {member.bio}\n            </span>\n          )}\n        </Radio.Root>\n      ))}\n    </RadioGroup>\n  );\n}\n"
    }
  ]
}