{
  "name": "location-picker",
  "title": "LocationPicker",
  "description": "Branch / pickup-point selector for businesses with multiple locations.",
  "type": "component",
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "location-picker.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Location } from \"../types/business\";\nimport { useLocations } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface LocationPickerClassNames {\n  root?: string;\n  item?: string;\n  activeItem?: string;\n  empty?: string;\n  loading?: string;\n}\n\nexport interface LocationPickerProps {\n  /** Override locations (skips useLocations fetch). For SSR, pass pre-fetched locations. */\n  locations?: Location[];\n  /** Override the current location. */\n  currentLocation?: Location | null;\n  /** Called when a location is selected. */\n  onLocationChange?: (location: Location) => void;\n  /** Custom location renderer. */\n  renderLocation?: (location: Location, isActive: boolean) => React.ReactNode;\n  /** Text shown when no locations are available. */\n  emptyMessage?: string;\n  className?: string;\n  classNames?: LocationPickerClassNames;\n}\n\n/**\n * LocationPicker — renders a location selector for multi-location businesses.\n *\n * Uses `useLocations` to fetch locations unless overridden via props.\n * Returns `null` when there is only one location (no picker needed).\n */\nexport function LocationPicker({\n  locations: locationsProp,\n  currentLocation: currentLocationProp,\n  onLocationChange,\n  renderLocation,\n  emptyMessage,\n  className,\n  classNames,\n}: LocationPickerProps): React.ReactElement | null {\n  const {\n    locations: fetched,\n    currentLocation: fetchedCurrent,\n    setCurrentLocation,\n    isLoading,\n  } = useLocations();\n\n  const locations = locationsProp ?? fetched;\n  const currentLocation = currentLocationProp ?? fetchedCurrent;\n\n  const handleSelect = (location: Location): void => {\n    if (onLocationChange) {\n      onLocationChange(location);\n    } else {\n      setCurrentLocation(location);\n    }\n  };\n\n  if (isLoading && locations.length === 0) {\n    return (\n      <div\n        data-cimplify-location-picker\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      />\n    );\n  }\n\n  // No picker needed for single location\n  if (locations.length <= 1) {\n    return null;\n  }\n\n  if (locations.length === 0) {\n    return (\n      <div\n        data-cimplify-location-picker\n        data-empty\n        className={cn(className, classNames?.root, classNames?.empty)}\n      >\n        <p>{emptyMessage ?? \"No locations available\"}</p>\n      </div>\n    );\n  }\n\n  return (\n    <div data-cimplify-location-picker className={cn(className, classNames?.root)}>\n      {locations.map((location) => {\n        const isActive = currentLocation?.id === location.id;\n        return (\n          <button\n            key={location.id}\n            type=\"button\"\n            onClick={() => handleSelect(location)}\n            data-cimplify-location-item\n            data-active={isActive || undefined}\n            aria-pressed={isActive}\n            className={cn(classNames?.item, isActive && classNames?.activeItem)}\n          >\n            {renderLocation ? (\n              renderLocation(location, isActive)\n            ) : (\n              <span>{location.name}</span>\n            )}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"
    }
  ]
}